/* Shared skeleton; each site only swaps the --brand pair via data-site on <html>.
   Every text/background pair below meets WCAG AA (most reach AAA). */
:root {
  --ink: #17212b;
  --muted: #4a5563;
  --paper: #f5f7fa;
  --card: #ffffff;
  --line: #dde2e8;
  --signal: #f2b705;      /* road-sign yellow: the one bright colour, used for the main action and focus */
  --on-dark: #c9d1da;
  --brand: #234a8f;
  --brand-tint: #e5ebf6;
  --radius-lg: 14px;
  --radius-sm: 8px;
}

[data-site="ondriver"] { --brand: #0e5a6e; --brand-tint: #e3f0f3; }
[data-site="abdriver"] { --brand: #234a8f; --brand-tint: #e5ebf6; }
[data-site="usdriver"] { --brand: #8c2f2a; --brand-tint: #f6e8e7; }
[data-site="bcclass"] { --brand: #046a38; --brand-tint: #e3f0e7; }
[data-site="vozaihub"] { --brand: #1f3a5f; --brand-tint: #e4eaf2; }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", "Noto Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-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;
}

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 { 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: var(--gutter);
  padding-right: var(--gutter);
}

.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; }
/* Handbook, concept, question-list and blog pages: text runs as wide as the page column (as in driver-on). */
.site-main :is(.handbook-chapter, .handbook-index, .concept, .blog-index, .blog-post, .question-directory, .question-category, .guide) :is(p, li) { max-width: none; }

.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: #17212b;        /* text on the yellow plate, in both themes */
  --signal-edge: #17212b;      /* yellow alone is 1.69:1 on the light paper, so the plate gets an ink edge */
  --on-brand: #ffffff;
  --link: #234a8f;             /* links and the focus ring; the header fill is --brand */
  --logo-plate: #e5ebf6;       /* the logo stays a light plate on the header in both themes */
  --footer-bg: #17212b;
  --scrim: rgba(23, 33, 43, .45);   /* behind a dialog */
  --toast-bg: #17212b;         /* the "not saved" bar: dark on the light page, light on the dark page */
  --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(23, 33, 43, .1);
  --pop-shadow: rgba(23, 33, 43, .16);
  --clear: transparent;
  --sunken: #eceff3;           /* neutral ground for the open row, the current tab and hover; the site's light colour is pink on usdriver */
  --correct: #0f6b3f;
  --on-correct: #ffffff;
  --wrong: #b3261e;
  --lane-dash: var(--muted);
  --art-red: #c8102e;
  --art-white: #ffffff;
  --art-edge: #8a949f;
  --art-black: #17212b;        /* symbols on prohibition signs; 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: #232d36;
    --signal-edge: #f2b705;    /* on the dark paper the yellow plate needs no edge */
    --footer-bg: #0b1014;
    --fact-rule: rgba(231, 236, 241, .12);
    --pop-shadow: rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .6);
    --toast-bg: #e7ecf1;
    --on-toast: #12181e;
    --correct: #17804e;        /* white text 4.96:1 */
    --wrong: #ff8278;          /* 6.68:1 on the card */
    --ink: #e7ecf1;
    --muted: #a9b4c0;
    --paper: #12181e;
    --card: #1a222a;
    --line: #2f3a45;
    --brand: #9db8f0;          /* as text and links on the dark paper; the header fill is --brand-fill */
    --brand-fill: #234a8f;
    --brand-tint: #1c2a45;
    --link: #9db8f0;
  }
  [data-site="ondriver"] { --brand: #7cc4d6; --brand-fill: #0e5a6e; --brand-tint: #123238; --link: #7cc4d6; }
  [data-site="abdriver"] { --brand: #9db8f0; --brand-fill: #234a8f; --brand-tint: #1c2a45; --link: #9db8f0; }
  [data-site="usdriver"] { --brand: #f0a8a3; --brand-fill: #8c2f2a; --brand-tint: #3a2220; --link: #f0a8a3; }
  [data-site="bcclass"] { --brand: #57b67e; --brand-fill: #046a38; --brand-tint: #14291d; --link: #57b67e; }
  [data-site="vozaihub"] { --brand: #9fb6d9; --brand-fill: #1f3a5f; --brand-tint: #1b2a42; --link: #9fb6d9; }
  /* --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;
}