/*
 * theme.css — look and feel shared by every page.
 *
 * Tokens:   --bg --surface --surface-2 --ink --ink-soft --line
 *           --accent --accent-ink --gold --jade --good --bad
 *           Light by default; dark follows prefers-color-scheme.
 * Layout:   .page (centered column, 16px gutter), ending in the
 *           copyright line (.page::after; see LICENSE)
 * Header:   .page-header > a.back, .eyebrow, h1, p.lede
 * Pills:    .pill (small rounded label)
 * Buttons:  .btn, .btn.primary, .btn:disabled
 * Cards:    .card-grid > a.card; div.card.soon for "Coming soon"
 *           h2.stage-head heads a group of card grids
 * Feedback: .feedback.good / .feedback.bad; .tip (callout box)
 * Answers:  .pic-grid > button.pic-btn (Canto.picButton): .picked .right .wrong
 *           [data-label] none / hanzi / both: the .pic-label under the
 *           picture is hidden, characters only, or characters over Jyutping
 *           (red is only for .wrong: hover is a neutral border, mouse only,
 *           so a button under a finger after a tap never looks marked)
 *           .choice-grid > button.choice (text answers), same states;
 *           .choice-grid.nums: numeral answers, two columns even on phones
 * Tones:    .tone-chart (Canto.toneChart)
 * Text:     [lang="zh-HK"] gets the Chinese font; .jp is jyutping,
 *           its tone digits are <sup> (see Canto.jyutping in core.js).
 *           .zh (Canto.zh): Jyutping over each character in words on
 *           their own on wide screens, after the word elsewhere.
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;700&display=swap");

:root {
  --bg: #fbf6ee;
  --surface: #ffffff;
  --surface-2: #f4ece0;
  --ink: #2a211b;
  --ink-soft: #6b5d52;
  --line: #e6d9c7;
  --accent: #b8342a;
  --accent-ink: #ffffff;
  --gold: #c88a1e;
  --jade: #2f7d6d;
  --good: #2f7d4a;
  --bad: #b8342a;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(60 40 20 / 0.08), 0 4px 14px rgb(60 40 20 / 0.06);
  --font-zh: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, var(--font-zh);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1613;
    --surface: #26201b;
    --surface-2: #312822;
    --ink: #f3ebe1;
    --ink-soft: #b9aa9b;
    --line: #3d332b;
    --accent: #e0655a;
    --accent-ink: #1b1613;
    --gold: #e0ad4a;
    --jade: #5fb8a4;
    --good: #6cc98a;
    --bad: #ef7b70;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--font);
}

[lang="zh-HK"], .hanzi { font-family: var(--font-zh); }

a { color: var(--accent); }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}
.page::after {
  content: "© 2026 Stephen Sullivan. All rights reserved.";
  display: block;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
}

/* Header */
.page-header { margin-bottom: 28px; }
.page-header .back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}
.page-header .back:hover { color: var(--accent); }
.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-header h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
}
.page-header h1 .hanzi { color: var(--accent); margin-right: 0.3em; }
.lede { margin: 8px 0 0; color: var(--ink-soft); max-width: 60ch; }

/* Pills */
.pill {
  display: inline-block;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

/* Buttons. [hidden] must win over their display: inline-flex. */
[hidden] { display: none !important; }
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); }
.btn:focus-visible, .card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
a.card:hover { border-color: var(--accent); }
.card h2, .card h3 { margin: 0; font-size: 20px; }
.card p { margin: 0; color: var(--ink-soft); }
.card img { width: 72px; height: 72px; }
.card .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.card.soon { opacity: 0.6; box-shadow: none; border-style: dashed; }
.stage-head { margin: 32px 0 12px; font-size: 15px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.page-header + .stage-head { margin-top: 0; }

/* Feedback */
.feedback {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.feedback.good { border-color: var(--good); color: var(--good); }
.feedback.bad { border-color: var(--bad); color: var(--bad); }

.tip {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: var(--surface-2);
}
.tip strong { color: var(--gold); }

/* Answer buttons */
.pic-grid, .choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
}
.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .pic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: 1fr; }
}
.pic-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid.nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pic-btn, .choice {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pic-btn { aspect-ratio: 1; padding: 8px; }
.pic-btn img { width: 100%; height: 100%; }
.pic-btn .pic-label { display: none; }
.pic-btn:not([data-label="none"]) { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pic-btn:not([data-label="none"]) img { height: auto; aspect-ratio: 1; }
.pic-btn:not([data-label="none"]) .pic-label { display: block; line-height: 1.25; }
.pic-label .hanzi { display: block; font-size: 22px; font-weight: 700; }
.pic-label .jp { display: block; font-size: 14px; color: var(--ink-soft); }
.pic-btn[data-label="hanzi"] .pic-label .jp { display: none; }
@media (max-width: 560px) { .pic-grid.cols-3 .pic-label .hanzi { font-size: 18px; } }
.choice { padding: 14px 16px; font-size: 20px; text-align: center; }
.choice .hanzi { font-size: 24px; font-weight: 700; }
.choice-grid.nums .choice { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { :is(.pic-btn, .choice):hover:not(:disabled, .picked, .right, .wrong) { border-color: var(--ink-soft); } }
:is(.pic-btn, .choice):disabled { cursor: default; }
:is(.pic-btn, .choice):focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
:is(.pic-btn, .choice).picked { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
:is(.pic-btn, .choice).right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
:is(.pic-btn, .choice).wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }

/* Tone chart */
.tone-chart { border-collapse: collapse; margin: 10px 0 4px; font-size: 15px; }
.tone-chart td { padding: 3px 12px 3px 0; vertical-align: middle; }
.tone-chart svg { display: block; }

/* Jyutping */
.jp { color: var(--ink-soft); font-size: 0.95em; }
:is(.jp, .zh rt) sup { font-size: 0.65em; margin-left: 1px; color: var(--gold); font-weight: 700; }

/* Chinese with Jyutping (Canto.zh). In prose, and on phones, the Jyutping
   follows the word. In words on their own (word cards, answers, tiles,
   speech bubbles, Say It Back) on wider screens, each syllable sits over
   its character, and the Jyutping after the word is hidden (display: none,
   so screen readers read it once). .zh-flat: characters and syllables
   don't pair up (卅 saa1 aa6), so it keeps the Jyutping after the word.
   A picture's label (.pic-label) puts the Jyutping under the word. */
.zh rt { display: none; }
:is(.word, .tile) .zh { display: contents; }
@media (min-width: 700px) {
  :is(.word, .choice, .tile, .speech, .say-word) .zh:not(.zh-flat) rt {
    display: revert;
    font: 400 14px/1.3 var(--font);
    color: var(--ink-soft);
    padding-bottom: 2px;
  }
  :is(.word, .choice, .tile, .speech, .say-word) .zh:not(.zh-flat) .jp { display: none; }
  :is(.word, .choice, .tile, .speech, .say-word) .zh ruby { ruby-position: over; ruby-align: center; margin: 0 0.1em; }
}