/* driver-bc's whole theme/site.css: a full replacement of driver-sitekit's theme/site.css
   taken at sitekit commit e7f2b2c (m2) plus the U1 render patch (7bf42bb). When sitekit
   changes its default stylesheet, this file does not follow; copy the change over by hand.
   Structure, spacing, sizes and radii are the skeleton's, unchanged.
   Differences from the default, all values copied from the live BC site's stylesheet
   (driver-icbc, baseline 83b2aff1, site/pages/assets/site.css):
   - the light and dark palettes are icbc's :root table (lines 14-30 light, 48-64 dark):
     paper #eef2ec / card #ffffff / ink #13201a / muted #5d6d63 / rule #d3dcd2,
     green #046a38 with tint #e3f0e7, amber #ffc72c, red #c8102e; dark paper #121613,
     card #1a211c, ink #e9efe8, muted #9aa89e, rule #2a332c, lifted green #57b67e,
     green-soft #14291d, red #ff7a86;
   - type: icbc's font stacks (lines 35-36), body in --serif and headings in --sans,
     as icbc's body and headings do; sizes stay the skeleton's;
   - only the bcclass site pair is carried; the skeleton's other site pairs are dropped
     because this stylesheet is BC's.
   --page and --gutter already match icbc's (sitekit notes icbc site.css :39-40). */
:root {
  --ink: #13201a;
  --muted: #5d6d63;
  --paper: #eef2ec;
  --card: #ffffff;
  --line: #d3dcd2;
  --signal: #ffc72c;      /* icbc --amber, the sign yellow: main action and focus */
  --on-dark: #e9efe8;
  --brand: #046a38;
  --brand-tint: #e3f0e7;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: Charter, "Iowan Old Style", Georgia, "PingFang SC", "Hiragino Sans GB", serif;
  --radius-lg: 14px;
  --radius-sm: 8px;
}

[data-site="bcclass"] { --brand: #046a38; --brand-tint: #e3f0e7; }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.65 var(--serif);
  -webkit-text-size-adjust: 100%;
  /* Short pages keep the footer at the bottom of the window. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* icbc puts body copy in --serif and its chrome and controls in --sans
   (site.css:105 body, :111 headings, :215-227 bar/nav, :558 the call to action,
   :947 footer links). These selectors are where the skeleton has the same parts. */
.site-header, .site-nav, .pick-lang, .pick-list, .cta a, .options .option,
.answer summary, .back, .question-list a, .jurisdiction-nav a, .facts dt, .facts dd,
.site-footer { font-family: var(--sans); }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
/* Yellow only where the ground is dark: on the light page it would fall below 3:1. */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--signal); }
.site-header .pick-list :focus-visible { outline-color: var(--brand); }

h1, h2 { font-family: var(--sans); line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; }

/* Header, footer and bands paint to the window edge with border-image (it does not clip
   the language list the way clip-path would); their content stays on the column. */
.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-top: .9rem;
  padding-bottom: .9rem;
  color: #fff;
  border-image: linear-gradient(var(--brand) 0 0) fill 0 / / 0 100vmax;
}
.site-header a { color: #fff; text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-right: auto;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.brand-logo { display: block; width: 28px; height: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .95rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Language picker: the current language on a pill; opens a list of every version of this page. */
.pick-lang { position: relative; font-size: .9rem; }
.pick-lang summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.pick-lang summary::-webkit-details-marker { display: none; }
.pick-lang summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-left: .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.pick-lang[open] summary, .pick-lang summary:hover { background: rgba(255, 255, 255, .14); }
.pick-icon { width: 1rem; height: 1rem; }
.pick-short { display: none; }
.pick-list {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 10;
  min-width: 10rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(23, 33, 43, .16);
}
.site-header .pick-list a {
  display: block;
  padding: .45rem .7rem;
  border-radius: 6px;
  color: var(--ink);
}
.site-header .pick-list a:hover { background: var(--brand-tint); text-decoration: none; }
.site-header .pick-list a[aria-current] { color: var(--brand); font-weight: 700; }

.site-main { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 1rem; }
.site-main p, .site-main li { max-width: 40em; }

.lede { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.25rem; }

/* Home hero: title, one line of context, and the main action. */
.hero { padding-bottom: .5rem; }

.cta { margin: 0; }
.cta a {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(23, 33, 43, .18);
}
.cta a:hover { background: #ffc61a; }

/* Exam facts: a tinted panel in the site colour. */
.exam {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem 1.1rem;
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
}
.exam h2 { margin-top: 0; color: var(--brand); }
/* On the home page the facts panel becomes a full-width band. */
.exam.band {
  margin-top: 2.5rem;
  padding: 2rem 0 1.75rem;
  border-radius: 0;
  background: none;
  border-image: linear-gradient(var(--brand-tint) 0 0) fill 0 / / 0 100vmax;
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0 1.5rem;
  margin: 0;
}
.fact { display: contents; }
.facts dt, .facts dd { padding: .5rem 0; border-top: 1px solid rgba(23, 33, 43, .1); }
.fact:first-child dt, .fact:first-child dd { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 650; }
.facts dd a { font-weight: 400; font-size: .9rem; margin-left: .35rem; }

.authority { color: var(--muted); font-size: .9rem; margin: .75rem 0 0; }

/* Link lists (guides, questions, jurisdictions, sources) read as one bordered stack. */
.guides ul,
.question-list,
.jurisdiction-list,
.sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.guides li,
.question-list li,
.jurisdiction-list li,
.sources li { max-width: none; border-top: 1px solid var(--line); }
.guides li:first-child,
.question-list li:first-child,
.jurisdiction-list li:first-child,
.sources li:first-child { border-top: 0; }
.guides a,
.question-list a,
.jurisdiction-list a,
.sources a {
  display: block;
  padding: .8rem 1.1rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  font-weight: 600;
}
.guides a:hover,
.question-list a:hover,
.jurisdiction-list a:hover,
.sources a:hover { background: var(--brand-tint); border-left-color: var(--brand); }
.question-list a { color: var(--ink); font-weight: 500; }

/* Guides and jurisdictions: separate white cards in a grid instead of one stack. */
.guides ul.card-grid,
.jurisdiction-list.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.card-grid li { border-top: 0; }
.card-grid li a {
  height: 100%;
  padding: 1rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.card-grid li a:hover { border-color: var(--brand); border-left-color: var(--brand); }
.sources a { font-weight: 500; }

.jurisdiction-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.jurisdiction-nav a {
  padding: .35rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  text-decoration: none;
}

/* Guide article. */
.guide > p:not(.back) { margin: 0 0 1rem; }

.back { margin-top: 2rem; font-size: .95rem; }

/* Question page: the stem leads, options are tappable-looking cards. */
.question h1 { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.stem { font-size: 1.3rem; font-weight: 650; line-height: 1.45; margin: .5rem 0 1.25rem; }

.sign {
  margin: 1rem 0;
  padding: 1rem;
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sign svg { display: block; max-width: 9rem; height: auto; }
.sign figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.options .option {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  max-width: none;
  padding: .8rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.option .key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: .05rem;
}

.answer {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.answer summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-weight: 700;
  color: var(--brand);
}
.answer[open] summary { border-bottom: 1px solid var(--line); }
.answer > p { margin: 0; padding: .75rem 1rem 0; }
.answer > p:last-child { padding-bottom: .9rem; }
.answer-text { font-weight: 650; }
.manual-basis, .explanation { color: var(--muted); font-size: .95rem; }

/* Legal and not-found pages. */
.legal-body p { margin: 0 0 1rem; }

.site-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  color: var(--on-dark);
  border-image: linear-gradient(var(--ink) 0 0) fill 0 / / 0 100vmax;
  font-size: .9rem;
}
.site-footer a { color: #fff; }

/* Links to the other sites: the footer's one column. */
.other-places { padding-bottom: 1.5rem; }
.other-places h2 { font-size: .95rem; color: #fff; margin: 0 0 .6rem; }
.other-places ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.disclaimer {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .site-main { padding-top: 1.5rem; }
  .exam { padding: 1rem 1.1rem; margin-left: -.25rem; margin-right: -.25rem; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: .1rem; border-top: 0; }
  .cta a { display: block; text-align: center; }
  .stem { font-size: 1.15rem; }
  .site-nav { order: 3; width: 100%; }
  .pick-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pick-short { display: inline; }
  .exam.band { padding: 1.5rem 0 1.25rem; margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 学习区样式默认值：跟随稿子的设计变量表，默认模板只使用其中既有变量。 */
:root {
  --signal-hover: #ffc61a;
  --on-signal: #13201a;        /* icbc --ink: text on the yellow plate, in both themes */
  --signal-edge: #13201a;      /* icbc --ink: the yellow plate needs an ink edge on the light paper */
  --on-brand: #ffffff;
  --link: #046a38;             /* icbc --green: links and the focus ring; the header fill is --brand */
  --logo-plate: #e3f0e7;       /* icbc --green-soft: the logo stays a light plate on the header */
  --footer-bg: #0d110f;        /* icbc dark --paper-deep */
  --scrim: rgba(19, 32, 26, .45);   /* icbc --ink at 45%, behind a dialog */
  --toast-bg: #13201a;         /* icbc --ink: the "not saved" bar */
  --on-toast: #ffffff;
  --pill-line: rgba(255, 255, 255, .55);
  --pill-hover: rgba(255, 255, 255, .14);
  --footer-rule: rgba(255, 255, 255, .16);
  --fact-rule: rgba(19, 32, 26, .1);
  --pop-shadow: rgba(19, 32, 26, .16);
  --clear: transparent;
  --sunken: #e4eae1;           /* icbc --paper-deep: neutral ground for the open row, the current tab and hover */
  --correct: #046a38;          /* icbc --green */
  --on-correct: #ffffff;
  --wrong: #c8102e;            /* icbc --red */
  --lane-dash: var(--muted);
  --art-red: #c8102e;
  --art-white: #ffffff;
  --art-edge: #5d6d63;         /* icbc --muted */
  --art-black: #13201a;        /* icbc --ink; the same in both themes, like the other sign colours */
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --fs-body: 17px;
  --fs-body-narrow: 16px;
  --lh-body: 1.65;
  --lh-tight: 1.25;
  --lh-stem: 1.45;
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fs-h2: 1.25rem;
  --fs-brand: 1.2rem;
  --fs-lede: 1.1rem;
  --fs-nav: .95rem;
  --fs-small: .9rem;
  --fs-tab: .75rem;
  --fs-stem: 1.3rem;
  --fs-stem-narrow: 1.15rem;
  --fs-counter: 1rem;
  --fs-cell: .95rem;
  --fs-total: 2.5rem;
  --fs-plate: 3.5rem;
  --fs-plate-narrow: 2.75rem;
  --fs-plate-of: 1.4rem;
  --fs-art: 25px;
  --fw-text: 400;
  --fw-row: 500;
  --fw-semi: 600;
  --fw-stem: 650;
  --fw-bold: 700;
  --fw-num: 800;               /* scores and question numbers, as on a sign */
  --fw-label: 800;             /* the words Correct / Wrong and the counter */
  --track-tight: -.01em;
  --track-num: -.02em;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-hair: 2px;
  --radius: 6px;
  --radius-pill: 999px;        /* sitekit header language button only */
  --radius-focus: 3px;
  --radius-round: 50%;         /* option letters */
  --bw: 1px;
  --bw-strong: 2px;
  --bw-wrong: 3px;
  --bw-row: 4px;
  --focus-w: 3px;
  --focus-gap: 2px;
  --rule-at-sm: 3px;           /* the white rule inside a green plate: distance from the edge */
  --rule-w-sm: 1.5px;
  --rule-at-lg: 5px;
  --rule-w-lg: 2px;
  --lane-h: 4px;
  --lane-now-h: 14px;
  --lane-gap: 2px;
  --marker-h: 8px;
  --page: 72rem;               /* the page width, padding included (icbc site.css :39 --page, web/src/styles.css :117) */
  --gutter: clamp(1.1rem, 4vw, 3rem); /* the space left and right of the page (icbc site.css :40 --gutter) */
  --side: 18.75rem;
  --col-gap: 2.5rem;
  --bar-h: 3.25rem;
  --tap: 44px;
  --key: 1.75rem;
  --glyph: 1.25rem;
  --glyph-sm: 1rem;
  --icon: 22px;
  --logo-w: 28px;
  --sign-w: 9rem;
  --prose: 40em;
  --slash-w: .6rem;
  --dur: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sunken: #0d110f;
    --signal-edge: #ffc72c;    /* icbc --amber; on the dark paper the yellow plate needs no edge */
    --footer-bg: #0d110f;
    --fact-rule: rgba(233, 239, 232, .12);
    --pop-shadow: rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .6);
    --toast-bg: #e9efe8;
    --on-toast: #121613;
    --correct: #57b67e;        /* icbc lifted green */
    --on-correct: #09150e;     /* icbc dark --on-green: text on the lifted green, 7.46:1 */
    --wrong: #ff7a86;          /* icbc lifted red */
    --ink: #e9efe8;
    --muted: #9aa89e;
    --paper: #121613;
    --card: #1a211c;
    --line: #2a332c;
    --brand: #57b67e;          /* icbc lifted green, as text and links on the dark paper */
    --brand-fill: #046a38;
    --brand-tint: #14291d;
    --link: #57b67e;
  }
  [data-site="bcclass"] { --brand: #57b67e; --brand-fill: #046a38; --brand-tint: #14291d; --link: #57b67e; }
  /* --ink is light text here, so the surfaces that used it as a fill or sat under it as ink take their own colours. */
  .site-header { border-image: linear-gradient(var(--brand-fill) 0 0) fill 0 / / 0 100vmax; }
  .option .key { background: var(--brand-fill); }
  .site-footer { border-image: linear-gradient(var(--footer-bg) 0 0) fill 0 / / 0 100vmax; }
  .cta a { color: var(--on-signal); }
}

:root:lang(zh-Hans) {
  --lh-body: 1.75;
  --lh-tight: 1.4;
  --lh-stem: 1.6;
  --fs-stem: 1.25rem;
  --fs-stem-narrow: 1.125rem;
  --fw-stem: 600;
  --fw-bold: 600;
  --fw-label: 600;
  --track-tight: 0;
}

/* ---------- learning-area entry page (/learn/) ----------
   The entry page template is sitekit's templates/learn_page.html; the skeleton's own
   site.css carries no rules for its classes, so an override that replaces that file whole
   (this one does) has to bring them. Selectors and values are copied from driver-on's
   theme/site.css, the accepted entry page: without them the lead, the button and the four
   cards fall back to browser defaults and the 40em cap on .site-main p/li above, which is
   what made the text column about 60% of the page. Values are BC's variables (the same
   table as the rest of this file); nothing here is a new design.
   The lead keeps no max-width of its own: this page opens the learning area, it is not body
   prose, so it runs the full content width (the scope is .learn-page only; .site-main p stays
   at 40em for ordinary pages). */
.learn-page .breadcrumb { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.learn-page .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; list-style: none; }
.learn-page .breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); max-width: none; }
.learn-page .breadcrumb li + li::before { content: "›"; color: var(--muted); }
.learn-page .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); }
.learn-page .lead { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-lede); max-width: none; }
.site-main .learn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-6); max-width: none; }
.learn-cta .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--sp-3) var(--sp-6); background: var(--signal); border: var(--bw-strong) solid var(--signal-edge); border-radius: var(--radius); color: var(--on-signal); font-weight: var(--fw-bold); text-decoration: none; }
.learn-cta .button:hover { background: var(--signal-hover); }
/* auto-fit, not the copy's auto-fill: BC's column leaves 1112 px of content at 1280, which
   auto-fill cuts into five 13rem tracks, so four cards stop at 80% of the row. auto-fit drops
   the empty fifth track and the four cards take the whole content width. */
.learn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-3); }
.learn-cards li { max-width: none; margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-cards strong { display: block; font-weight: var(--fw-semi); }
.learn-cards a { text-decoration: none; }
.learn-cards span { display: block; margin-top: var(--sp-1); color: var(--muted); }

/* ---------- home page blocks (A34) ----------
   Selectors and structure copied from driver-on's theme/site.css; BC's home template uses
   the same class names. Every value is one of BC's variables above (that table is icbc's),
   so against driver-on only the colour values differ. Sizes, spacing and radii are the
   skeleton/home variables, not new design.
   The option, verdict, answer and link-list rules in the middle are the ones the block-2
   card and the block-8/10 lists use; those selectors are not home-only, so BC's question
   pages follow driver-on's option styling too. */

/* Glyph symbols the try-a-question card references (#g-check, #g-x). */
.glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }
.g { width: var(--glyph); height: var(--glyph); flex: none; }
.options { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.options .option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: none;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: var(--lh-tight);
  text-align: left;
}
button.option { cursor: pointer; }
button.option:disabled { cursor: default; }
button.option:not(:disabled):hover { background: var(--sunken); }
.option .key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--key);
  height: var(--key);
  border-radius: var(--radius-round);
  background: var(--ink);
  color: var(--card);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
}
.opt-text { flex: 1 1 auto; min-width: 0; }
.mark { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-label); }
.options .option--right {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct);
}
.options .option--right .key { background: var(--on-correct); color: var(--correct); }
.options .option--wrong { border-color: var(--wrong); box-shadow: inset 0 0 0 calc(var(--bw-wrong) - var(--bw)) var(--wrong); }
.options .option--wrong .mark { color: var(--wrong); }
/* Screen-reader-only verdict sentences inside each home option: answer.js marks the options with
   .option--right / .option--wrong, and only the matching sentence is turned on (display:none keeps the rest unread). */
.sr-verdict { display: none; }
.option--right .sr-verdict--right, .option--wrong .sr-verdict--wrong { display: block; }
.verdict { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.verdict[hidden] { display: none; }
.verdict p { margin: 0; }
.verdict-line { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); }
.verdict-line .g { color: var(--wrong); }
.verdict-word { color: var(--wrong); font-weight: var(--fw-label); }
.more-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }
/* Shown instead of the options when the page has no script (noscript) or the site ships none. */
.answer { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.answer summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-bold); color: var(--link); }
.answer[open] summary { border-bottom: var(--bw) solid var(--line); }
.answer > p { margin: 0; padding: var(--sp-3) var(--sp-4); }
.site-main .link-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.site-main .link-list li { border-top: var(--bw) solid var(--line); }
.site-main .link-list li:first-child { border-top: 0; }
.site-main .link-list a { display: flex; align-items: center; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); border-left: 0; font-weight: var(--fw-row); line-height: var(--lh-stem); color: var(--ink); text-decoration: none; }
.site-main .link-list a:hover { background: var(--sunken); }
/* ---------- home page (A34) ---------- */
:root {
  --block-gap: var(--sp-9);         /* space above each home block */
  --hero-side: 26rem;               /* the try-a-question card beside the intro at 1024 px */
  --fs-count: 2.25rem;              /* the counted numbers in the number strip */
  --fs-price: 1.75rem;              /* plan prices */
  --fs-step: 1.5rem;                /* step numbers in "How to start" */
  --sign-tile: 6.5rem;              /* one drawing on the sign wall */
  --sign-tile-narrow: 5rem;
  --tile-min: 15rem;                /* narrowest feature tile before the grid drops a column */
  --compare-label: 9.5rem;          /* first column of the free / Premium table */
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw-strong) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
/* The main action is a yellow plate with an ink edge: yellow alone is 1.69:1 on the paper. */
.btn--primary { background: var(--signal); border-color: var(--signal-edge); color: var(--on-signal); }
.btn--small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-semi); }

.block { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--block-gap); scroll-margin-top: var(--sp-4); }
.block > h2 + .lede { margin-top: calc(-1 * var(--sp-2)); }

/* Block 1 + 2: the intro and the try-a-question card, one column, two at 1024 px. */
.front { display: grid; gap: var(--sp-7); align-items: start; }
.front-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.front-intro .lede { color: var(--ink); }
.front-intro .lede strong { font-weight: var(--fw-semi); }
.classline { display: flex; align-items: center; gap: var(--sp-3); margin: 0; color: var(--muted); font-size: var(--fs-small); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Block 2: the card is a quiet box; only the answered options carry plates. */
.try { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); min-width: 0; }
.try-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.try .sign { padding: var(--sp-2); width: fit-content; }
.counter { margin: 0; font-size: var(--fs-counter); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; }
.counter__n { font-weight: var(--fw-num); }
.try .stem { font-size: var(--fs-lede); }
.try-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
/* The card's own language switch (EN / 简 / 繁): three 44 px buttons, the chosen one ink. */
.qlang { display: inline-flex; border: var(--bw) solid var(--muted); border-radius: var(--radius); overflow: hidden; }
.qlang button {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 0;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.qlang button + button { border-left: var(--bw) solid var(--muted); }
.qlang button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.qlang button:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }

/* The verdict box after a public question: no explanation, only right/wrong, one sentence and a link. */
.verdict--right .verdict-line .g,
.verdict--right .verdict-word { color: var(--correct); }
.verdict .copy-note { color: var(--muted); max-width: var(--prose); }

/* Block 3: three counted numbers and the fixed language count in a ruled row; two by two on a phone. */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--sp-4) 0; border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); }
.count { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-3); }
.count + .count { border-left: var(--bw) solid var(--line); }
.count dt { order: 2; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-tight); }
.count dd { order: 1; margin: 0; font-size: var(--fs-count); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.counts-note { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-small); max-width: var(--prose); }

/* Block 4 keeps the exam band from styles.css; here only its spacing as a home block. */
.home .exam.band { margin-top: var(--block-gap); }

/* Block 5: what the learning area does, one ruled list in a white box. */
.does { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.does li { display: grid; gap: var(--sp-1) var(--sp-6); padding: var(--sp-4) var(--sp-5); }
.does li + li { border-top: var(--bw) solid var(--line); }
.does h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.does p { margin: 0; color: var(--muted); max-width: var(--prose); }

/* Block 6: free and subscription side by side, one row per line of the engine contract §8. */
.compare-wrap { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.compare thead th { background: var(--sunken); font-size: var(--fs-small); }
/* Row labels break only at spaces: "Explanations" must not become "Explanation" / "s" in a narrow column. */
.compare tbody th { font-weight: var(--fw-semi); overflow-wrap: normal; }
.compare tbody tr { border-top: var(--bw) solid var(--line); }
.compare col.c-label { width: var(--compare-label); }

.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.plan h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.price { margin: 0; font-size: var(--fs-price); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.price small { font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: 0; color: var(--muted); }
.plan .btn { align-self: stretch; margin-top: var(--sp-2); }
.small-print { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: var(--prose); }

/* Block 6b: three learning-area screenshots in a row, each with its caption underneath, as in the draft.
   The pictures are 360 wide phone screens, so they keep their own proportions and sit in a card frame. */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
.shots figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.shots img { display: block; width: 100%; height: auto; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.shots figcaption { color: var(--muted); font-size: var(--fs-small); }

/* Block 7: a real sequence, so it is numbered. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); grid-row: span 2; font-size: var(--fs-step); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; line-height: 1; }
.steps h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.steps p { margin: 0; color: var(--muted); }

/* Block 8: latest articles and the guides. */
.reading { display: grid; gap: var(--sp-6); }
.reading h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); letter-spacing: 0; }
/* Titles and guide rows read as links (site colour, underlined), as in the draft; the .home prefix beats .site-main .link-list a. */
.home .reading .link-list a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
/* The title in an article row sits flush with its date (the row carries the padding). */
.home .reading .link-row a { padding: 0; }

/* Block 9: the sign wall. Drawings only use the art-* classes from styles.css. */
.signwall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sign-tile-narrow), 1fr)); gap: var(--sp-3); }
.signwall li { display: grid; place-items: center; aspect-ratio: 1; padding: var(--sp-3); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.signwall svg { display: block; width: 100%; height: auto; max-width: var(--sign-tile); }

/* Block 10: questions people ask first. */
.faq { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.faq details + details { border-top: var(--bw) solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-semi); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .5rem; height: .5rem; border-right: var(--bw-strong) solid currentColor; border-bottom: var(--bw-strong) solid currentColor; transform: translateY(-2px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
/* The FAQ answer is not the question page's "Answer" disclosure (.answer above): no box of its own, no stacked padding. */
.faq .answer { padding: 0 var(--sp-5) var(--sp-4); max-width: var(--prose); background: none; border: 0; border-radius: 0; }
.faq .answer > p { padding: 0; }
/* display:inline-flex would beat the browser's [hidden]: a control that needs script stays hidden until header.js shows it. */
.btn[hidden], .qlang[hidden] { display: none; }
/* Latest articles: title link, then the date, in one row of the link list. */
.link-row { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); }
.link-row a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; font-weight: var(--fw-semi); }
.link-row time { color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.faq .answer p { margin: 0; }
.faq .answer a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }

/* Block 11: what we do not do. */
.refusals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)); gap: var(--sp-3); }
.refusals li { padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.refusals h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-body); letter-spacing: 0; }
.refusals p { margin: 0; color: var(--muted); }

/* Block 12: other provinces and states, a row of links. */
.places { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.places a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }

/* Entrance, number strip and sign wall (home.js adds .in). Only when scripts run and motion is welcome. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rise:not(.in) { opacity: 0; transform: translateY(.75rem); }
  .rise { transition: opacity .5s ease, transform .5s ease; }
  .signwall li { transition: opacity .4s ease, transform .4s ease; }
  .signwall:not(.in) li { opacity: 0; transform: scale(.92); }
}
@media (hover: hover) {
  .qlang button:not([aria-pressed="true"]):hover,
  .faq summary:hover { background: var(--sunken); }
}

@media (max-width: 30rem) {
  .cta-row { flex-direction: column; align-self: stretch; }
  .cta-row .btn { align-self: stretch; }
  .try { padding: var(--sp-4); }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .count { padding: 0 var(--sp-2); }
  .count:nth-child(odd) { border-left: 0; }
  .count dd { font-size: var(--fs-h1); }
  .compare th, .compare td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
  .compare col.c-label { width: 36%; }
  .steps li { padding: var(--sp-3) var(--sp-4); }
  .faq summary { padding: var(--sp-3) var(--sp-4); }
  .faq .answer { padding: 0 var(--sp-4) var(--sp-4); }
}

/* On a 320 px phone the label column is about 100 px wide; "Explanations" needs a smaller size to fit whole. */
@media (max-width: 22.5rem) {
  .compare tbody th { font-size: .8rem; }
}

@media (min-width: 45rem) {
  .does li { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); }
  .reading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signwall { grid-template-columns: repeat(auto-fill, minmax(var(--sign-tile), 1fr)); }
}

@media (min-width: 64rem) {
  .front { grid-template-columns: minmax(0, 1fr) var(--hero-side); gap: var(--col-gap); }
  .front-intro { padding-top: var(--sp-6); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .steps li::before { grid-row: auto; }
}