/* TheLearnDen KS2 SATs arithmetic generator. Scoped to .arith-app. */
.arithmetic-tool-page {
      max-width: none;
      margin: 0;
      padding: 0 0 3rem;
    }

    .arithmetic-tool-page > .seo-breadcrumbs {
      width: min(72rem, calc(100% - 1.8rem));
      margin: 1rem auto 0;
    }

    .arith-app,
    .arith-app * {
      box-sizing: border-box;
    }

    .arith-app {
      --paper: #FFFFFF;
      --ground: #F2F0EA;
      --ink: #16191F;
      --muted: #5E6876;
      --line: #D8D4CA;
      --rule: #C9C3B6;
      --accent: #1B5E4B;
      --accent-hover: #134A3A;
      --accent-soft: #E2EFEA;
      --accent-ink: #123F33;
      --mark: #8A4B10;
      --mark-soft: #F6ECE0;
      --danger: #A22E2E;
      --danger-soft: #FBE9E7;
      --success: #176B45;
      --success-soft: #E5F3EB;
      --focus: #C36A16;
      --shadow: 0 12px 32px rgba(23, 30, 38, .08);
      max-width: 72rem;
      margin: 0 auto;
      padding: 1rem .9rem 4rem;
      color: var(--ink);
    }

    :root:not([data-theme="light"]) .arith-app {
      --paper: #1A1E25;
      --ground: #111419;
      --ink: #E8EBEF;
      --muted: #A1AAB7;
      --line: #303741;
      --rule: #3A424E;
      --accent: #68D4B0;
      --accent-hover: #87DFC0;
      --accent-soft: #12291F;
      --accent-ink: #B9F1DE;
      --mark: #E3A35F;
      --mark-soft: #2A1F12;
      --danger: #FF9B94;
      --danger-soft: #321A1A;
      --success: #74D9A9;
      --success-soft: #142A20;
      --focus: #F0AF68;
      --shadow: none;
    }

    .arith-app button,
    .arith-app input { font: inherit; }

    .arith-app button {
      border: 1px solid transparent;
      border-radius: .65rem;
      min-height: 2.75rem;
      padding: .7rem .9rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
    }

    .arith-app button:hover { transform: translateY(-1px); }
    .arith-app button:active { transform: translateY(0); }
    .arith-app button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

    .arith-app :focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 3px;
    }

    .arith-shell {
      display: grid;
      gap: 1rem;
    }

    .arith-hero,
    .arith-panel,
    .arith-paper,
    .arith-info,
    .arith-results,
    .arith-footer {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 1rem;
      box-shadow: var(--shadow);
    }

    .arith-hero { padding: clamp(1rem, 3vw, 1.7rem); }

    .arith-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin: 0;
      color: var(--accent);
      font: 750 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .arith-eyebrow::before {
      content: "";
      width: .55rem;
      height: .55rem;
      border-radius: 50%;
      background: currentColor;
    }

    .arith-title {
      max-width: 18ch;
      margin: .55rem 0 .45rem;
      font: 700 clamp(1.75rem, 4vw, 2.75rem)/1.05 Georgia, "Iowan Old Style", "Times New Roman", serif;
      letter-spacing: -.025em;
    }

    .arith-lede {
      max-width: 48rem;
      margin: 0;
      color: var(--muted);
      font-size: clamp(.98rem, 2vw, 1.08rem);
    }

    .arith-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    .arith-pill {
      display: inline-flex;
      align-items: center;
      min-height: 2rem;
      padding: .4rem .6rem;
      border-radius: .45rem;
      background: var(--accent-soft);
      color: var(--accent-ink);
      font: 750 .76rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    .arith-trust {
      margin: .9rem 0 0;
      padding: .8rem .9rem;
      border-left: .25rem solid var(--accent);
      border-radius: .25rem .7rem .7rem .25rem;
      background: var(--accent-soft);
      color: var(--accent-ink);
      font-size: .86rem;
    }

    .arith-panel { padding: .9rem; }

    .arith-toolbar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .55rem;
    }

    .arith-button-primary {
      background: var(--accent);
      color: #FFFFFF;
      border-color: var(--accent);
    }

    :root:not([data-theme="light"]) .arith-button-primary { color: #0E1A15; }

    .arith-button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

    .arith-button-secondary {
      background: transparent;
      color: var(--accent);
      border-color: var(--accent);
    }

    .arith-button-quiet {
      background: var(--accent-soft);
      color: var(--accent-ink);
      border-color: transparent;
    }

    .arith-setup-row {
      display: grid;
      gap: .65rem;
      margin-top: .75rem;
      padding-top: .75rem;
      border-top: 1px solid var(--line);
    }

    .arith-paper-code,
    .arith-timer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .arith-field-label {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 700;
    }

    .arith-seed-input {
      width: 7.5rem;
      min-height: 2.55rem;
      padding: .55rem .65rem;
      border: 1px solid var(--line);
      border-radius: .55rem;
      background: var(--paper);
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }

    .arith-timer { margin-left: auto; }
    .arith-timer-display {
      min-width: 5.5rem;
      color: var(--ink);
      font: 800 1rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
      text-align: center;
    }

    .arith-timer-display[aria-live="assertive"] { color: var(--danger); }

    .arith-paper { overflow: hidden; }

    .arith-paper-head {
      display: grid;
      gap: .75rem;
      padding: 1rem;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, var(--accent-soft), transparent);
    }

    .arith-paper-title {
      margin: 0;
      font: 700 1.18rem/1.25 Georgia, "Iowan Old Style", serif;
    }

    .arith-paper-instructions {
      margin: 0;
      color: var(--muted);
      font-size: .88rem;
    }

    .arith-print-identity { display: none; }

    .arith-question-list {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .arith-question {
      display: grid;
      grid-template-columns: 2.25rem minmax(0, 1fr) auto;
      gap: .7rem;
      align-items: start;
      min-width: 0;
      padding: .95rem;
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
    }

    .arith-question:last-child { border-bottom: 0; }

    .arith-question-number {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: .5rem;
      background: var(--accent-soft);
      color: var(--accent-ink);
      font: 800 .86rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    .arith-question-body { min-width: 0; }

    .arith-expression {
      min-height: 2.2rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .25rem;
      color: var(--ink);
      font-size: clamp(1.08rem, 3vw, 1.3rem);
      font-variant-numeric: tabular-nums lining-nums;
      letter-spacing: .005em;
    }

    .arith-expression-long { align-items: flex-start; }

    .arith-method-label {
      display: inline-block;
      margin-top: .5rem;
      color: var(--muted);
      font-size: .75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .arith-question-side {
      display: grid;
      justify-items: end;
      gap: .45rem;
    }

    .arith-answer-input {
      width: 7.6rem;
      min-height: 2.65rem;
      padding: .55rem .65rem;
      border: 2px solid var(--line);
      border-radius: .55rem;
      background: var(--paper);
      color: var(--ink);
      font-weight: 750;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .arith-answer-input::placeholder { color: var(--muted); opacity: .72; }
    .arith-answer-input[aria-invalid="true"] { border-color: var(--danger); }

    .arith-question.is-correct .arith-answer-input {
      border-color: var(--success);
      background: var(--success-soft);
    }

    .arith-question.is-wrong .arith-answer-input,
    .arith-question.is-unanswered .arith-answer-input {
      border-color: var(--danger);
      background: var(--danger-soft);
    }

    .arith-marks {
      color: var(--mark);
      background: var(--mark-soft);
      border-radius: .35rem;
      padding: .32rem .45rem;
      font: 750 .69rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: nowrap;
    }

    .arith-feedback {
      grid-column: 2 / -1;
      margin-top: .2rem;
      padding: .65rem .75rem;
      border-radius: .55rem;
      background: var(--accent-soft);
      color: var(--accent-ink);
      font-size: .87rem;
    }

    .arith-feedback[hidden] { display: none; }
    .arith-question.is-wrong .arith-feedback,
    .arith-question.is-unanswered .arith-feedback {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .arith-feedback strong { color: inherit; }
    .arith-print-answer-box,
    .arith-working-grid { display: none; }

    .arith-frac {
      display: inline-grid;
      grid-template-rows: auto auto;
      place-items: center;
      min-width: 1.25em;
      margin-inline: .05em;
      vertical-align: middle;
      line-height: 1;
    }

    .arith-frac-top {
      width: 100%;
      padding: 0 .12em .08em;
      border-bottom: .075em solid currentColor;
      text-align: center;
    }

    .arith-frac-bottom { padding: .08em .12em 0; }
    .arith-mixed { display: inline-flex; align-items: center; gap: .12em; }

    .arith-vertical-calc {
      display: inline-grid;
      min-width: 6.5rem;
      justify-items: end;
      font: 500 1.35rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: .12em;
    }

    .arith-vertical-bottom {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .45rem;
      width: 100%;
      padding-bottom: .15rem;
      border-bottom: 2px solid currentColor;
    }

    .arith-vertical-bottom span:last-child { justify-self: end; }

    .arith-long-division {
      display: inline-flex;
      align-items: flex-start;
      font: 500 1.35rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: .08em;
    }

    .arith-long-divisor { padding: .23rem .3rem 0 0; }
    .arith-long-dividend {
      min-width: 4.2rem;
      padding: .16rem .35rem .25rem;
      border-top: 2px solid currentColor;
      border-left: 2px solid currentColor;
    }

    .arith-results {
      padding: 1rem;
      scroll-margin-top: 1rem;
    }

    .arith-results[hidden] { display: none; }

    .arith-results-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .75rem;
    }

    .arith-results h2,
    .arith-info h2 {
      margin: 0;
      font: 700 1.3rem/1.2 Georgia, "Iowan Old Style", serif;
    }

    .arith-score {
      display: inline-flex;
      align-items: baseline;
      gap: .25rem;
      color: var(--accent);
      font: 800 1.55rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    .arith-score small { color: var(--muted); font-size: .75rem; }

    .arith-results-note {
      margin: .65rem 0 0;
      color: var(--muted);
      font-size: .86rem;
    }

    .arith-breakdown {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .55rem;
      margin-top: .9rem;
    }

    .arith-breakdown-item {
      padding: .7rem;
      border: 1px solid var(--line);
      border-radius: .65rem;
      background: var(--ground);
    }

    .arith-breakdown-label {
      display: block;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 750;
    }

    .arith-breakdown-score {
      display: block;
      margin-top: .18rem;
      font: 800 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    .arith-info {
      display: grid;
      gap: 1rem;
      padding: 1rem;
    }

    .arith-info p { margin: .45rem 0 0; color: var(--muted); }
    .arith-info ul { margin: .55rem 0 0; padding-left: 1.25rem; color: var(--muted); }
    .arith-info li + li { margin-top: .3rem; }

    .arith-caution {
      padding: .8rem .9rem;
      border-radius: .65rem;
      background: var(--mark-soft);
      color: var(--mark);
      font-size: .87rem;
    }

    .arith-footer {
      padding: .9rem 1rem;
      color: var(--muted);
      font-size: .8rem;
    }

    .arith-footer p { margin: 0; }
    .arith-footer p + p { margin-top: .45rem; }
    .arith-footer a { color: var(--accent); }

    .arith-answer-key { display: none; }
    .arith-sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    @media (min-width: 42rem) {
      .arith-app { padding: 1.75rem 1.2rem 4rem; }
      .arith-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .arith-setup-row { grid-template-columns: 1fr auto; align-items: center; }
      .arith-question { padding: 1rem 1.1rem; }
      .arith-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .arith-caution { grid-column: 1 / -1; }
    }

    @media (min-width: 64rem) {
      .arith-toolbar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
      .arith-breakdown { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    @media (max-width: 31rem) {
      .arith-question {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: .6rem;
      }
      .arith-question-side {
        grid-column: 2;
        grid-template-columns: minmax(7rem, 1fr) auto;
        align-items: center;
        justify-items: stretch;
      }
      .arith-answer-input { width: 100%; text-align: left; }
      .arith-feedback { grid-column: 2; }
      .arith-breakdown { grid-template-columns: 1fr; }
      .arith-timer { width: 100%; margin-left: 0; }
    }

    @media print {
      @page { size: A4; margin: 11mm; }

      :root {
        color-scheme: light;
        --page-ground: #FFFFFF;
        --page-ink: #111111;
      }

      body { background: #FFFFFF !important; color: #111111 !important; }

      .arith-app {
        --paper: #FFFFFF;
        --ground: #FFFFFF;
        --ink: #111111;
        --muted: #444444;
        --line: #777777;
        --rule: #A0A0A0;
        --accent: #111111;
        --accent-soft: #FFFFFF;
        --accent-ink: #111111;
        --mark: #111111;
        --mark-soft: #FFFFFF;
        --danger: #111111;
        --danger-soft: #FFFFFF;
        --success: #111111;
        --success-soft: #FFFFFF;
        --shadow: none;
        max-width: none;
        padding: 0;
      }

      #bg-canvas,
      .topbar,
      .site-footer,
      #bottomnav,
      .overlay,
      .sheet,
      .seo-breadcrumbs,
      .arith-hero,
      .arith-panel,
      .arith-results,
      .arith-info,
      .arith-footer { display: none !important; }

      .arith-paper {
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
      }

      .arith-paper-head {
        padding: 0 0 5mm;
        border-bottom: 2px solid #111111;
        background: #FFFFFF;
      }

      .arith-paper-title { font-size: 18pt; }
      .arith-paper-instructions { font-size: 9.5pt; }
      .arith-print-identity {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 7mm;
        margin-top: 5mm;
        font-size: 9pt;
      }

      .arith-print-line {
        display: inline-block;
        min-width: 42mm;
        margin-left: 2mm;
        border-bottom: 1px solid #111111;
      }

      .arith-question-list { display: block; }

      .arith-question {
        display: grid;
        grid-template-columns: 12mm minmax(0, 1fr) 29mm;
        gap: 4mm;
        min-height: 43mm;
        padding: 5mm 0 4mm;
        border-bottom: 1px solid #777777;
        break-inside: avoid;
        page-break-inside: avoid;
        background: #FFFFFF !important;
      }

      .arith-question[data-marks="2"] { min-height: 64mm; }
      .arith-question-number {
        width: 9mm;
        height: 9mm;
        border: 1px solid #111111;
        border-radius: 2mm;
        background: #FFFFFF;
        color: #111111;
        font-size: 9pt;
      }

      .arith-expression { font-size: 14pt; min-height: 9mm; }
      .arith-expression-long { font-size: 15pt; }
      .arith-method-label { margin-top: 2mm; color: #111111; font-size: 8pt; }
      .arith-answer-input,
      .arith-feedback { display: none !important; }

      .arith-question-side { gap: 2mm; }
      .arith-print-answer-box {
        display: block;
        width: 27mm;
        height: 13mm;
        border: 2px solid #111111;
      }

      .arith-marks {
        color: #111111;
        background: #FFFFFF;
        padding: 0;
        font-size: 8pt;
      }

      .arith-working-grid {
        display: block;
        min-height: 24mm;
        margin-top: 3mm;
        background-image:
          linear-gradient(#E4A5AF 1px, transparent 1px),
          linear-gradient(90deg, #E4A5AF 1px, transparent 1px);
        background-size: 5mm 5mm;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .arith-question[data-marks="2"] .arith-working-grid { min-height: 44mm; }
      .arith-vertical-calc,
      .arith-long-division { font-size: 16pt; }

      .arith-app[data-print-mode="answers"] .arith-paper { display: none !important; }
      .arith-app[data-print-mode="answers"] .arith-answer-key {
        display: block;
        color: #111111;
      }

      .arith-answer-key h2 {
        margin: 0 0 3mm;
        font: 700 18pt/1.2 'Fraunces', 'Fraunces Fallback', Georgia, serif;
      }

      .arith-answer-key p { margin: 0 0 5mm; font-size: 9.5pt; }
      .arith-answer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5mm 7mm;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: answer;
      }

      .arith-answer-grid li {
        counter-increment: answer;
        display: grid;
        grid-template-columns: 9mm 1fr auto;
        gap: 2mm;
        padding: 2mm 0;
        border-bottom: 1px solid #BBBBBB;
        font-size: 10pt;
        break-inside: avoid;
      }

      .arith-answer-grid li::before {
        content: counter(answer) ".";
        font-weight: 700;
      }

      .arith-answer-key-note {
        margin-top: 7mm !important;
        padding-top: 4mm;
        border-top: 1px solid #777777;
        font-size: 8.5pt !important;
      }
    }