/*
 * The learning area's styles. Colours, type, radius and space are the App's
 * (app/src/ui/tokens.ts: light and dark palettes, type scale) copied as
 * values: web/ does not import app/ source. Change one there, change it here.
 *
 * Widths (drafts README §1): under 720 px the phone layout (header + bottom
 * tab bar); 720–1023 px sections in the top bar, one 680 px column; 1024 px
 * and up the same top bar, and screens that ask for it get the two-column
 * layout: 300 px + 40 px gap + 660 px, fixed at 1000 px and centred, never a
 * third column.
 */
#app {
  --canvas: #F1F7F2; --surface: #FFFFFF; --sunken: #E4EFE6; --line: #DCE7DE;
  --ink: #12151C; --body: #2A2F3A; --muted: #5D646F; --on-ink: #FFFFFF;
  --badge-solid: #5D646F; --accent: #FFB020; --accent-text: #8A5A00;
  --well-green: #D9F0DE; --glyph-green: #0B5E3C;
  --correct-solid: #0F7B4F; --correct-tint: #E3F5EC; --correct-text: #0B5E3C;
  --wrong-solid: #C7332B; --wrong-tint: #FCE9E7; --wrong-text: #A32A22;
  --brand: #0A4F22; --button-primary-bg: #0A4F22; --on-button-primary: #FFFFFF;
  --button-secondary-border: #2E6B45; --on-button-secondary: #0A4F22; --option-selected-bg: #EAF6E4;
  --subnav-bg: #e4eae1; --subnav-line: #d3dcd2; --subnav-mark: #046a38;
  --r-card: 18px; --r-button: 16px; --r-pill: 999px; --r-badge: 4px; --r-sheet: 26px;
  --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 20px; --xxl: 28px; --gutter: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
/*
 * Light or dark follows the site's theme switch (PD 10-08): the site's script
 * writes <html data-theme="light|dark"> from localStorage `theme`, and
 * removes the attribute for System. No attribute: the system setting. The
 * dark palette is written twice, for the switch and for System; the test
 * __tests__/theme.test.ts keeps the two copies identical.
 */
html[data-theme="light"] #app { color-scheme: light; }
html[data-theme="dark"] #app {
  color-scheme: dark;
  --canvas: #0D120F; --surface: #171C19; --sunken: #212724; --line: #2A322C;
  --ink: #F5F4F2; --body: #C9CDD4; --muted: #8B929E; --on-ink: #12151C;
  --badge-solid: #8B929E; --accent: #FFB020; --accent-text: #FFB020;
  --well-green: #16302A; --glyph-green: #5FD7A4;
  --correct-solid: #39C98A; --correct-tint: #10241C; --correct-text: #5FD7A4;
  --wrong-solid: #F26C61; --wrong-tint: #24110F; --wrong-text: #FF9188;
  --brand: #B4F0BC; --button-primary-bg: #22713F; --on-button-primary: #FFFFFF;
  --button-secondary-border: #4F8A66; --on-button-secondary: #B4F0BC; --option-selected-bg: #1C2E23;
  --subnav-bg: #0d110f; --subnav-line: #2a332c; --subnav-mark: #57b67e;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #app {
    --canvas: #0D120F; --surface: #171C19; --sunken: #212724; --line: #2A322C;
    --ink: #F5F4F2; --body: #C9CDD4; --muted: #8B929E; --on-ink: #12151C;
    --badge-solid: #8B929E; --accent: #FFB020; --accent-text: #FFB020;
    --well-green: #16302A; --glyph-green: #5FD7A4;
    --correct-solid: #39C98A; --correct-tint: #10241C; --correct-text: #5FD7A4;
    --wrong-solid: #F26C61; --wrong-tint: #24110F; --wrong-text: #FF9188;
    --brand: #B4F0BC; --button-primary-bg: #22713F; --on-button-primary: #FFFFFF;
    --button-secondary-border: #4F8A66; --on-button-secondary: #B4F0BC; --option-selected-bg: #1C2E23;
    --subnav-bg: #0d110f; --subnav-line: #2a332c; --subnav-mark: #57b67e;
  }
}

#app *, #app *::before, #app *::after { box-sizing: border-box; }
#app { background: var(--canvas); min-height: 100vh; color: var(--body); font-size: 16px; line-height: 25px; }
#app h1, #app h2, #app h3, #app p { margin: 0; }
#app a { color: inherit; }
#app button { font: inherit; }
#app :focus-visible { outline: 3px solid var(--button-secondary-border); outline-offset: 2px; }

#app .t-score { font-size: 44px; line-height: 52px; font-weight: 700; color: var(--ink); }
#app .t-figure { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--ink); }
#app .t-display { font-size: 26px; line-height: 34px; font-weight: 700; color: var(--ink); }
#app .t-question { font-size: 22px; line-height: 32px; font-weight: 700; color: var(--ink); }
#app .t-title { font-size: 21px; line-height: 28px; font-weight: 700; color: var(--ink); }
#app .t-card { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
#app .t-row { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
#app .t-meta { font-size: 13px; line-height: 18px; color: var(--muted); }
#app .t-ref { font-size: 12px; line-height: 17px; color: var(--muted); }
#app .t-fine { font-size: 10px; line-height: 14px; color: var(--muted); }
#app .field-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }

#app .card { background: var(--surface); border-radius: var(--r-card); padding: var(--lg); border: 1px solid var(--line); }
#app .row { display: flex; align-items: center; gap: var(--md); flex-wrap: wrap; }
#app .stack { display: flex; flex-direction: column; gap: var(--sm); }
#app .chip { border: 1px solid var(--line); background: var(--surface); color: var(--body); border-radius: var(--r-pill); padding: 2px 10px; cursor: pointer; }
#app .chip[aria-pressed="true"] { background: var(--well-green); color: var(--glyph-green); border-color: var(--well-green); font-weight: 600; }

/* ---------- frame ---------- */
#app .shell { min-height: 100vh; display: flex; flex-direction: column; }
#app .topbar { display: flex; align-items: center; gap: var(--md); padding: var(--md) var(--gutter); background: var(--subnav-bg); border-bottom: 1px solid var(--subnav-line); white-space: nowrap;  z-index: 10; }
body.learn-round #app .topbar { position: sticky; top: 0; }
#app .learn-here { font-weight: 700; color: var(--ink); font-size: 16px; }
#app .sections { display: none; gap: 48px; align-self: center; }
/* Underlined tabs, not pills: the site bar above has the pills, and two rows of pills read as one level. */
#app .sections a { display: flex; align-items: center; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--muted); padding: 6px 0; border-bottom: 3px solid transparent; text-decoration: none; }
#app .sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--subnav-mark); }
#app .topbar__right { margin-left: auto; display: flex; gap: var(--md); align-items: center; font-size: 14px; color: var(--muted); }
#app .topbar__right a { color: var(--muted); }

#app .content { flex: 1; width: 100%; padding: var(--xl) var(--gutter) var(--xxl); display: flex; flex-direction: column; gap: var(--lg); }

#app .tabbar { position: sticky; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 6px var(--sm) 10px; }
#app .tabbar a { flex: 1; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); padding: 6px 0; border-radius: 12px; text-decoration: none; white-space: nowrap; }
#app .tabbar a[aria-current="page"] { background: var(--sunken); color: var(--ink); }
#app .tabbar__icon { display: block; width: 22px; height: 22px; margin: 0 auto 2px; }

@media (min-width: 720px) {
  #app .topbar { gap: var(--xxl); padding: 0 32px; min-height: 56px; }
  #app .sections { display: flex; }
  #app .learn-here { display: none; }
  #app .tabbar { display: none; }
  #app .content { max-width: 680px; margin: 0 auto; padding: 32px 0 48px; }
  #app .content--landing { max-width: 1000px; }
}
@media (min-width: 1024px) {
  /* S-F1: sign-in and Contact us narrow to 420 px from the wide layout on, as drawn (README §1). */
  #app .content--form { max-width: 420px; }
  /* A-F1, K-C1, B-E1: the account and pricing pages are two equal columns. */
  #app .content--halves { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  #app .content--halves > * { display: flex; flex-direction: column; gap: var(--lg); min-width: 0; }
  #app .content--side { max-width: 1000px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
  #app .content--side > * { display: flex; flex-direction: column; gap: var(--lg); min-width: 0; }
  /* M-D2: a long list scrolls inside its column; the page and the right column stay put. */
  #app .content--side > .side-scroll { position: sticky; top: var(--lg); max-height: calc(100vh - 2 * var(--lg)); overflow-y: auto; }
  /* The row starts under the site bar's logo (the bar's 72rem column plus its gutter) and ends at the same right edge. */
  #app .topbar { padding-left: max(32px, calc((100% - min(72rem, 100%)) / 2 + clamp(1.1rem, 4vw, 3rem))); padding-right: max(32px, calc((100% - min(72rem, 100%)) / 2 + clamp(1.1rem, 4vw, 3rem))); }
}
/* Pointer devices only: hover is not a state on a touch screen (plan 3 §8 row 33). */
@media (hover: hover) {
  #app .sections a:hover { color: var(--ink); }
  #app .tabbar a:hover, #app .chip:not([aria-pressed="true"]):hover { background: var(--sunken); }
}

/* ---------- landing pages (the four functions, signed out) ---------- */
/* One block of tiles under the function's name: the static HTML of /learn/<function>/ and the entry page's four links. */
#app .landing { width: 100%; max-width: 1000px; margin: 0 auto; padding: 32px var(--gutter) 48px; display: flex; flex-direction: column; gap: var(--lg); }
#app .landing h1 { margin: 0; font-size: 28px; line-height: 34px; color: var(--ink); }
#app .landing-prompt { margin: 0; color: var(--muted); }
#app .landing-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--md); }
#app .landing-tile { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); padding: var(--lg); }
#app .landing-tile h2 { margin: 0 0 var(--xs); font-size: 17px; line-height: 24px; color: var(--ink); }
#app .landing-tile p { margin: 0; color: var(--muted); font-size: 14px; }
#app .landing-tile a { display: block; color: inherit; text-decoration: none; }
/* A browser that was signed in the last time keeps the page's own introduction hidden until the server has answered (the inline script in the page sets data-signed-in; tools/site-learn-shell.ts). */
html[data-signed-in] #app .landing[data-static] { display: none; }
#app .landing-form { max-width: 420px; }
/* Inside the learning area's own frame the column is already padded. */
#app .content--landing .landing { padding: 0; max-width: none; }
@media (min-width: 720px) {
  #app .landing-tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ---------- lists, buttons, options ---------- */
#app .grow { flex: 1; min-width: 0; }
#app .group-label { font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 600; margin: var(--sm) var(--xs) 0; }
#app .list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; }
#app .list > .item { border-top: 1px solid var(--line); }
#app .list > .item:first-child { border-top: 0; }
#app .item__link { display: flex; align-items: center; gap: var(--md); padding: var(--md) var(--lg); text-decoration: none; color: inherit; }
#app .item--on { background: var(--sunken); box-shadow: inset 3px 0 0 var(--brand); }
#app .stack--tight { gap: 2px; }
#app .lock { color: var(--muted); white-space: nowrap; }
#app .lock-gap { margin-right: 6px; }
#app .link { color: var(--muted); text-decoration: underline; font-size: 14px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
#app .notice { border-radius: var(--r-card); padding: var(--md) var(--lg); background: var(--sunken); color: var(--body); font-size: 14px; line-height: 20px; }
/* D-C: the redeem outcomes are filled boxes, as drawn (drafts tokens.css .notice.ok / .bad). */
#app .notice--ok { background: var(--correct-tint); color: var(--correct-text); }
#app .notice--bad { background: var(--wrong-tint); color: var(--wrong-text); }
/* A-A4: the language row is a button that looks like the other rows. */
#app .btn { display: block; width: 100%; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; padding: 15px var(--lg); border-radius: var(--r-button); border: 0; cursor: pointer; text-decoration: none; }
#app .btn:disabled { opacity: .45; cursor: default; }
#app .btn--primary { background: var(--button-primary-bg); color: var(--on-button-primary); }
#app .btn--secondary { background: transparent; color: var(--on-button-secondary); border: 1px solid var(--button-secondary-border); padding: 14px var(--lg); }
#app .row--split { flex-wrap: nowrap; }
#app .row--split > * { flex: 1; }
#app .option { display: flex; gap: var(--md); align-items: flex-start; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-button); padding: var(--md) var(--lg); color: var(--ink); cursor: pointer; }
#app .option:disabled { cursor: default; }
#app .option__key { font-weight: 700; color: var(--muted); width: 18px; flex: none; }
#app .option--right { background: var(--correct-tint); border-color: var(--correct-solid); color: var(--correct-text); }
#app .option--wrong { background: var(--wrong-tint); border-color: var(--wrong-solid); color: var(--wrong-text); }
#app .option--selected { background: var(--option-selected-bg); border-color: var(--button-secondary-border); }
#app .t-verdict { font-size: 16px; line-height: 22px; font-weight: 700; }
#app .t-lead { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
#app .verdict-right { color: var(--correct-text); }
#app .verdict-wrong { color: var(--wrong-text); }
#app .progress { height: 6px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
#app .progress > i { display: block; height: 100%; background: var(--brand); }
#app .drawings { display: flex; gap: var(--md); justify-content: center; }
#app .drawing { margin: 0; text-align: center; }
#app .drawing__art svg { width: 160px; height: auto; }
#app .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-weight: 700; font-size: 15px; cursor: pointer; }
#app .iconbtn--on { background: var(--sunken); color: var(--ink); border-color: var(--button-secondary-border); }
#app .qmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
#app .qmap__cell { font-size: 12px; line-height: 24px; text-align: center; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
#app .qmap__r { background: var(--correct-tint); border-color: var(--correct-solid); color: var(--correct-text); }
#app .qmap__w { background: var(--wrong-tint); border-color: var(--wrong-solid); color: var(--wrong-text); }
#app .qmap__cur { border: 2px solid var(--brand); font-weight: 700; color: var(--ink); }
/* Dialogs cover the whole screen, tab bar included (review item 12). */
#app .scrim { position: fixed; inset: 0; background: rgba(12, 40, 22, .45); display: flex; align-items: center; justify-content: center; padding: var(--gutter); z-index: 30; }
#app .sheet { background: var(--surface); border-radius: var(--r-sheet); padding: var(--xl); width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: var(--md); }
@media (hover: hover) {
  /* Only elements not already showing a state: chosen, right, wrong and pressed keep their colour. */
  #app .item__link:hover, #app .option:not(:disabled):not(.option--selected):hover, #app .iconbtn:hover,
  #app .qmap__cell:not(.qmap__r):not(.qmap__w):hover, #app .btn--secondary:not(:disabled):hover { background: var(--sunken); }
  /* Filled buttons stay their own colour, a little darker: sunken under white text would be unreadable (user 10-09). */
  #app .btn--primary:not(:disabled):hover { background: color-mix(in srgb, var(--button-primary-bg) 85%, #000); }
  #app .btn--danger:not(:disabled):hover { background: color-mix(in srgb, var(--wrong-solid) 85%, #000); }
}

/* ---------- exam and Pre-exam ---------- */
#app .timer { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; padding: 4px 10px; border-radius: 8px; background: var(--sunken); color: var(--muted); }
#app .timer--amber { color: var(--accent-text); }
#app .qmap__done { background: var(--sunken); color: var(--ink); }
#app .result-caveat { font-size: 13px; line-height: 18px; color: var(--body); }
#app .readiness { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--md); }
#app .meter { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--sunken); }
#app .meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--muted); }
#app .meter--at_standard > i { background: var(--correct-solid); }
#app .meter--below_standard > i { background: var(--wrong-solid); }
#app .meter > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }

/* ---------- Boost ---------- */
#app .item__link--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
#app .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#app .sources { display: flex; gap: var(--md); }
#app .undo { background: var(--sunken); border-radius: var(--r-card); padding: var(--md) var(--lg); }

/* ---------- sign-in and account ---------- */
#app .field { font: inherit; width: 100%; padding: 12px var(--lg); border-radius: var(--r-button); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
#app .field:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
#app .center { text-align: center; }
#app .faq-list { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); overflow: hidden; }
#app .faq-item { border-bottom: 1px solid var(--line); padding: var(--md) var(--lg); }
#app .faq-item:last-child { border-bottom: 0; }
#app .faq-item > summary { font-weight: 600; cursor: pointer; }
#app .faq-answer { color: var(--muted); margin-top: var(--sm); font-size: 14px; }
#app .faq-answer p { margin: 0 0 var(--sm); }
#app .faq-answer .btn { margin-top: var(--sm); }
/* Read by screen readers, not drawn. */
#app .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#app .google-row { align-items: center; flex-wrap: nowrap; }
/* Google's button is its own iframe: `color-scheme: light` keeps the browser from giving it an opaque white canvas when the page is dark. */
#app .google-button { min-height: 44px; display: flex; justify-content: center; color-scheme: light; }
#app .btn--danger { background: var(--wrong-solid); color: #FFFFFF; }
#app .item__note { padding: 0 var(--lg) var(--md); }
#app .flash { padding: var(--md) var(--lg); border-radius: var(--r-card); background: var(--sunken); color: var(--ink); }
#app textarea.field { min-height: 160px; resize: vertical; }

/* ---------- pricing ---------- */
#app .features { list-style: none; margin: 0; padding: 0; }
/* A concept card's bullets (ConceptBody.tsx): a muted dot, as the App draws them. */
#app .body-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
#app .body-list li::marker { color: var(--muted); }
#app .plan { align-items: center; }
#app .plan__tag { margin-left: var(--sm); font-size: 12px; padding: 1px 8px; }