/* "Zenith Kanji" design system (see DESIGN.md) — tokens keep this file's
   existing semantic names (--bg, --accent, etc.) so every rule below still
   works unchanged; only the palette/scale VALUES come from DESIGN.md.
   Category colors map to its "Tiered Progression" scheme: Primary/Radical
   Blue, Secondary/Kanji Pink — kanji glyphs/text use these directly; solid
   fills (buttons, badges, SRS tiles) use the theme-constant --fill-* tokens
   below instead, since a fill paired with white text needs a saturated
   color in BOTH themes, not one that goes pastel-light in dark mode. */
:root {
  --bg: #f4fafd;            /* background */
  --fg: #161d1f;             /* on-background */
  --muted: #3e4851;          /* on-surface-variant */
  --card-bg: #ffffff;        /* surface-container-lowest */
  --border: #bec7d3;         /* outline-variant */
  --accent: #006398;         /* primary */
  --accent-dark: #004b73;    /* on-primary-fixed-variant */
  --kanji: #b10075;          /* secondary — "Kanji Pink" */
  --correct: #2e9e5b;
  --incorrect: #ba1a1a;      /* error */
  --qtype-reading: #0f9b8e;
  --qtype-meaning: #c2740a;
  --warn-bg: #fff4d6;
  --warn-fg: #7a5c00;
  --danger-bg: #ffdad6;      /* error-container */
  --danger-fg: #93000a;      /* on-error-container */

  /* "Fill" colors: same value in both themes, unlike --accent/--kanji/etc.
     above which intentionally go pastel-light in dark mode (right for text
     drawn on the page background, wrong for a solid chip/button/tile that
     white text sits on — pastel-on-dark and white-on-pastel are opposite
     needs). Anything pairing a saturated background with white text/icons
     (badges, buttons, SRS tiles) should use these, not the adaptive tokens.
     All check at >=4.5:1 contrast against white. */
  --fill-accent: #006398;
  --fill-accent-dark: #004b73;
  --fill-kanji: #b10075;
  --fill-radical: #006398;
  --fill-apprentice: #b10075;
  --fill-guru: #850aeb;
  --fill-master: #006398;
  --fill-enlightened: #0077b3;
  --fill-burned: #434343;
  --fill-incorrect: #ba1a1a;

  /* Shapes: rounded scale */
  --radius-sm: 0.25rem;
  --radius: 0.75rem;         /* DEFAULT card radius (was a flat 12px) */
  --radius-lg: 1rem;         /* kanji tiles */
  --radius-xl: 1.5rem;       /* capsule chips */
  --radius-full: 9999px;

  /* Typography: named per DESIGN.md, falling back to system/CJK fonts since
     this is an offline-first PWA with no external font loading. */
  --font-headline: "Plus Jakarta Sans", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Inter", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 900px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1517;
    --fg: #e2e9ec;
    --muted: #a9b4bd;
    --card-bg: #1a2225;
    --border: #3e4851;
    --accent: #93ccff;       /* inverse-primary */
    --accent-dark: #cce5ff;  /* primary-fixed */
    --kanji: #ffafd2;        /* secondary-fixed-dim */
    --incorrect: #ffb4ab;    /* error, dark-mode: was missing an override,
                                 leaving the light-mode #ba1a1a at ~2.5:1
                                 contrast against the dark background */
    --qtype-reading: #2dd4c4;
    --qtype-meaning: #e0a53a;
    --warn-bg: #4a3c14;
    --warn-fg: #f0cf7a;
    --danger-bg: #4a1f1f;
    --danger-fg: #f5b8b8;
  }
}

* { box-sizing: border-box; }
html {
  /* PC-first base size (vs. the 16px browser default) — everything else in
     this file is sized in rem, so this scales the whole app at once rather
     than every rule needing its own bump for desktop reading distance. */
  font-size: 19px;
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

/* Header */
.app-header { position: relative; max-width: var(--maxw); margin: 0 auto; text-align: center; padding: 1.1rem 1rem 0.4rem; }
.app-header h1 { margin: 0; font-size: 1.4rem; font-family: var(--font-headline); font-weight: 700; letter-spacing: 0.04em; }
.app-header-en { font-size: 0.9rem; color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
.icon-btn { background: none; border: none; color: var(--fg); cursor: pointer; padding: 0.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--accent); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-btn { position: absolute; top: 0.9rem; right: 0.9rem; }
.hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 1.3rem; height: 0.9rem; }
.hamburger-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0.5rem 1rem 3rem; }
.screen { animation: fade 0.15s ease; }
.hidden { display: none !important; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Banners */
.banner-warning, .banner-error { border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0.6rem 0; font-size: 0.9rem; line-height: 1.5; }
.banner-warning { background: var(--warn-bg); color: var(--warn-fg); }
.banner-error { background: var(--danger-bg); color: var(--danger-fg); }
code { background: rgba(128,128,128,0.18); padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.9em; }
kbd { font-family: var(--font-mono); background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0.05rem 0.35rem; font-size: 0.85em; }

/* Dashboard CTA — "Tonal Layers" card: white surface + category-color
   accent dot/button, rather than a fully saturated gradient fill, per
   DESIGN.md's Elevation spec (Level 1 white card, Level 2 tinted glow). */
.cta-row { display: flex; gap: 0.8rem; margin: 0.8rem 0; }
.cta-btn {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card-bg); color: var(--fg); padding: 1rem 1rem 0.9rem;
  cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.1s, box-shadow 0.15s;
}
.cta-btn:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--cta-glow, transparent); }
.cta-btn:active:not(:disabled) { transform: translateY(1px); }
.cta-btn:disabled { opacity: 0.45; cursor: default; }
.cta-lessons { --cta-glow: color-mix(in srgb, var(--kanji) 20%, transparent); }
.cta-reviews { --cta-glow: color-mix(in srgb, var(--accent) 20%, transparent); }
.cta-head { display: flex; align-items: center; justify-content: space-between; }
.cta-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cta-dot { width: 0.6rem; height: 0.6rem; border-radius: var(--radius-full); flex: none; }
.cta-lessons .cta-dot { background: var(--kanji); }
.cta-reviews .cta-dot { background: var(--accent); }
.cta-num { font-family: var(--font-headline); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.cta-action {
  display: inline-block; align-self: flex-start; margin-top: 0.2rem;
  font-size: 0.78rem; font-weight: 700; color: #fff; padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
}
/* "thick bottom border" tactile press per DESIGN.md Action Buttons */
.cta-lessons .cta-action { background: var(--fill-kanji); border-bottom: 2px solid color-mix(in srgb, var(--fill-kanji) 60%, black); }
.cta-reviews .cta-action { background: var(--fill-accent); border-bottom: 2px solid var(--fill-accent-dark); }
.cta-btn:disabled .cta-action { border-bottom-color: transparent; }

.extra-btn { width: 100%; border: 1px dashed var(--border); background: var(--card-bg); color: var(--fg); border-radius: var(--radius-lg); padding: 0.7rem; cursor: pointer; font-size: 0.9rem; margin-bottom: 1rem; }
.extra-btn span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.extra-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.extra-btn:disabled { opacity: 0.4; cursor: default; }

.section-heading { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 1.2rem 0 0.5rem; }
.section-heading span { text-transform: none; letter-spacing: 0; margin-left: 0.4rem; }

/* SRS distribution */
.srs-distribution { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.srs-cell { border-radius: var(--radius-lg); padding: 0.6rem 0.4rem; color: #fff; text-align: center; }
.srs-cell .n { font-family: var(--font-headline); font-size: 1.4rem; font-weight: 700; display: block; }
.srs-cell .k { font-family: var(--font-mono); font-size: 0.6rem; opacity: 0.95; display: block; letter-spacing: 0.02em; }
.srs-cell .nx { font-size: 0.58rem; opacity: 0.8; display: block; margin-top: 0.15rem; line-height: 1.25; }
.srs-apprentice { background: var(--fill-apprentice); }
.srs-guru { background: var(--fill-guru); }
.srs-master { background: var(--fill-master); }
.srs-enlightened { background: var(--fill-enlightened); }
.srs-burned { background: var(--fill-burned); }

/* Level progress */
.level-progress { display: flex; flex-direction: column; gap: 0.6rem; }
.level-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.6rem 0.8rem; }
.level-row-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.4rem; }
.level-row-head strong { font-family: var(--font-headline); }
.level-row-head .locked { color: var(--muted); }
.level-bars { display: flex; gap: 0.4rem; }
.level-bar { flex: 1; }
.level-bar-track { height: 8px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.level-bar-fill { height: 100%; border-radius: var(--radius-full); }
.level-bar-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); margin-top: 0.2rem; display: flex; justify-content: space-between; }
.fill-kanji { background: var(--kanji); }
.next-review-hint { color: var(--muted); font-size: 0.85rem; text-align: center; margin-top: 1rem; }

/* Session shared */
.session-topbar { display: flex; align-items: center; justify-content: space-between; margin: 0.4rem 0 1rem; }
.link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0.3rem; }
.link-btn span { margin-left: 0.3rem; }
.link-btn:hover { color: var(--accent); }
.session-progress { font-size: 0.85rem; color: var(--muted); }
.session-actions { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.2rem; }
.primary-btn, .secondary-btn, .danger-btn { border-radius: 10px; padding: 0.7rem 1.2rem; font-size: 0.95rem; cursor: pointer; border: none; }
.primary-btn { background: var(--fill-accent); color: #fff; }
.primary-btn:hover { background: var(--fill-accent-dark); }
.primary-btn span, .secondary-btn span { display: block; font-size: 0.68rem; opacity: 0.85; }
.secondary-btn { background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); }
.secondary-btn:hover { border-color: var(--accent); }
.danger-btn { background: transparent; color: var(--incorrect); border: 1px solid var(--incorrect); }
.danger-btn:hover { background: var(--fill-incorrect); color: #fff; }
.danger-btn span { display: block; font-size: 0.68rem; }

/* Type badge + glyphs */
.type-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); color: #fff; margin-bottom: 0.6rem; }
.badge-kanji { background: var(--fill-kanji); }

/* Item card (lessons) */
.item-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; text-align: center; }
.item-card .glyph { font-family: var(--font-headline); font-size: 4.5rem; line-height: 1.1; margin: 0.3rem 0; }
.badge-kanji-glyph { color: var(--kanji); }
.item-card .primary-meaning { font-family: var(--font-headline); font-size: 1.5rem; font-weight: 700; margin: 0.2rem 0; }
.item-card .readings { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0.6rem; }
.item-card .readings b { color: var(--fg); }
.item-card .composition { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0; }
/* Component radicals: a lightweight visual hint, not a quizzable item —
   small decorative chips, deliberately subordinate to the kanji above. */
.item-card .composition .rad { display: inline-block; background: var(--fill-radical); color: #fff; border-radius: 6px; padding: 0.05rem 0.4rem; margin: 0.1rem; font-size: 0.8rem; opacity: 0.85; }
.item-card .composition .rad-uncertain { opacity: 0.6; font-style: italic; }
.uncertain-flag { color: var(--warn-fg); font-size: 0.75rem; }

/* Quiz card */
.quiz-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.2rem; text-align: center; }
.quiz-glyph-wrap { margin-bottom: 0.5rem; }
.quiz-glyph { display: block; font-size: 4.5rem; line-height: 1.15; }
.quiz-glyph.kanji { color: var(--kanji); }
.quiz-glyph-context { font-size: 3.2rem; }
.quiz-glyph-context .ctx-target { color: var(--kanji); background: color-mix(in srgb, var(--kanji) 14%, transparent); border-radius: var(--radius-sm); padding: 0 0.12em; }
.quiz-glyph-context .ctx-kana { color: var(--fg); }
.quiz-glyph-context ruby { color: var(--fg); }
.quiz-glyph-context rt { font-size: 1rem; color: var(--muted); font-weight: 400; }
.quiz-context-caption { font-size: 0.85rem; color: var(--muted); margin: -0.2rem 0 0.4rem; }
.quiz-prompt { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.8rem; }
.quiz-prompt b { font-weight: 700; }
.quiz-prompt b.qtype-reading { color: var(--qtype-reading); }
.quiz-prompt b.qtype-meaning { color: var(--qtype-meaning); }
.quiz-form { display: flex; flex-direction: column; align-items: center; }
.quiz-input-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 340px; justify-content: center; }
.quiz-input-row .quiz-input { max-width: none; flex: 1; }
.mic-btn { flex: none; border: 2px solid var(--border); background: var(--card-bg); color: var(--fg); border-radius: var(--radius-full); width: 2.6rem; height: 2.6rem; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.mic-btn:hover:not(:disabled) { border-color: var(--accent); }
.mic-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mic-btn:disabled { opacity: 0.4; cursor: default; }
/* Red = recording, a near-universal mic convention. --fill-incorrect is
   reused here purely for its verified white-text contrast in both themes,
   not for its "error" meaning. */
.mic-btn.listening { background: var(--fill-incorrect); color: #fff; border-color: var(--fill-incorrect); animation: mic-pulse 1.4s ease-out infinite; }
/* Sonar-ping: start as a tight, visible ring flush against the button edge
   (0 spread + opaque-ish color IS visible there, it just isn't expanded
   yet), then grow outward while fading to fully transparent. The reverse
   pairing (transparent-while-expanded) would never show a ring at all. */
@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fill-incorrect) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--fill-incorrect) 0%, transparent); }
}
.quiz-mic-status { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; text-align: center; }
.quiz-input { width: 100%; max-width: 340px; font-size: 1.5rem; text-align: center; padding: 0.6rem 0.8rem; border-radius: 10px; border: 2px solid var(--border); background: var(--bg); color: var(--fg); }
.quiz-input.mode-reading { border-color: var(--qtype-reading); }
.quiz-input.mode-meaning { border-color: var(--qtype-meaning); }
.quiz-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.quiz-input.mode-reading:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qtype-reading) 35%, transparent); }
.quiz-input.mode-meaning:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qtype-meaning) 35%, transparent); }
.quiz-input.correct { border-color: var(--correct); background: rgba(46,158,91,0.12); }
.quiz-input.incorrect { border-color: var(--incorrect); background: rgba(186,26,26,0.12); }
.quiz-input.shake { animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }
.quiz-feedback { min-height: 1.3rem; margin: 0.6rem 0 0; font-size: 0.9rem; }
.quiz-feedback.correct { color: var(--correct); }
.quiz-feedback.incorrect { color: var(--incorrect); }
.quiz-continue { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }
.quiz-continue span { color: var(--accent); margin-left: 0.3rem; }

/* Item info panel */
.item-info { text-align: left; margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.item-info h4 { margin: 0.6rem 0 0.3rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.item-info .word-list { display: flex; flex-direction: column; gap: 0.3rem; }
.item-info .word { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; }
.item-info .word .jp { font-size: 1.05rem; color: var(--fg); }
.item-info .word .rd { color: var(--accent); font-weight: 500; }
.item-info .word .gl { color: var(--muted); flex: 1; text-align: right; }
.item-info .sentence { font-size: 0.95rem; margin: 0.2rem 0; }
.item-info .sentence-tr { color: var(--muted); font-size: 0.85rem; }
.item-info .meta-line { margin: 0; font-size: 0.9rem; }
.item-info .reading-group { display: block; }
.item-info .reading-group + .reading-group { margin-top: 0.15rem; }

/* Summary */
.summary-stats { display: flex; gap: 0.8rem; justify-content: center; margin: 1rem 0; }
.summary-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1.1rem; text-align: center; }
.summary-stat strong { font-size: 1.6rem; display: block; }
.summary-stat span { font-size: 0.75rem; color: var(--muted); }
.summary-items { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 1rem 0; }
.summary-chip { padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 1.1rem; border: 1px solid var(--border); }
.summary-chip.missed { border-color: var(--incorrect); background: rgba(186,26,26,0.1); }

/* Settings */
.settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.settings-panel { width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem 1.2rem; }
.settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.settings-header h2 { font-size: 1.1rem; margin: 0; }
.settings-header h2 span { font-size: 0.8rem; color: var(--muted); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.settings-row-column { flex-direction: column; align-items: stretch; }
.settings-row-label { font-size: 0.9rem; }
.settings-row-label span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; transition: 0.2s; cursor: pointer; }
.switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.switch input:checked + .switch-slider { background: var(--fill-accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.settings-segmented { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.segmented-btn { flex: 1; padding: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; cursor: pointer; }
.segmented-btn.active { background: var(--fill-accent); color: #fff; border-color: var(--fill-accent); }
.settings-about { border-top: 1px solid var(--border); }
.about-app { font-size: 0.9rem; margin: 0.3rem 0; }
.about-version { color: var(--muted); font-size: 0.78rem; }
.about-note { font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 0; }