/*
 * gaimen-kirikae — learn.css
 * Additional stylesheet for the new 3-layer content pages
 * (dashboard.html, contents.html, learn.html). Loaded together with
 * app.css, which it never overrides destructively — only adds new
 * classes prefixed "gk-" plus a handful of small ring/toast helpers.
 * Colors/spacing/radius reuse the custom properties defined in app.css.
 */

/* ---------- word-break safety net (Japanese must never split mid-word) ---------- */
.gk-main,
.gk-card__body,
.gk-qa,
.gk-section-list,
.gk-section-chips,
.gk-guide,
.gk-weak-card,
.gk-chapter-card,
.gk-section-video,
.gk-quiz {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- polish pass v2 (2026-07-29): shared card look ---------- */
:root {
  --gk-radius-card: 16px;
  --gk-shadow-card: 0 1px 3px rgba(20, 30, 45, 0.08);
}

.gk-card,
.gk-chapter-card,
.gk-stat-tile,
.gk-guide,
.gk-week-chart,
.gk-test-row,
.gk-weak-card,
.gk-check-result {
  box-shadow: var(--gk-shadow-card);
}

/* ---------- polish pass v3 (2026-07-29c): playful palette + bigger type ----------
   Kabu-san feedback: "too cool/corporate, needs pop" + "text feels small
   overall". Everything below only affects dashboard/contents/learn.html
   (the only 3 pages that load this stylesheet) — app.css itself and every
   other page (index/unit/exam/practical/...) are untouched.

   Color strategy: app.css's --color-primary was a muted navy (#1e4d78)
   used everywhere, including as a *fill behind white text* (buttons, active
   chips/nav, the learn header). A brighter primary would break that
   white-on-fill contrast, so the palette below is split in two: a darker
   shade that is safe under white text and does all the real work, and a
   lighter one reserved for decoration only. The exact hexes have moved
   since (see the 2026-07-30b note below) — this paragraph is only here to
   explain *why* the split exists.

   ---------- blue, but not *their* blue (2026-07-30b) ----------
   Kabu-san: the service is Aoshingo — 青信号 — so blue has to stay. The
   competitor is also blue, so the separation is made two ways instead:

   1. A different blue. Theirs is royal/indigo (blue-700 #1D4ED8, hue ~224°).
      Ours moves cyan-ward to sky-700 #0369A1 (hue ~201°) — read side by
      side it's the fresher, more "signal" blue rather than the corporate
      one, and it sits better on a warm ground.
   2. A companion that makes it carry. Blue alone on white is what they
      already are; the amber that was already in this palette is blue's
      near-complement, so it does the "映える" job — small, high-energy
      accents against a large calm field. Rough ratio to keep: ~60% cream/
      white ground, ~30% blue, ~10% amber. Amber stays a *highlight* (XP,
      streak, progress, badges); it must not creep onto primary buttons or
      it stops reading as an accent.

     --color-primary        sky-700 #0369A1 — accent/active text AND solid
                             fills that carry white text (~6.4:1 on white,
                             clear of the 4.5:1 AA floor): .btn-primary, the
                             weekly bar, the weak-content pill, the active
                             chip/sidebar row.
     --color-primary-bright  sky-600 #0284C7 — decorative only (gradient
                             light stop, ring arc, icon strokes). At ~4.6:1
                             it is too close to the floor to be trusted
                             under text, so nothing text-bearing uses it.
     --color-primary-soft   sky-50 #F0F9FF — active/selected backgrounds
                             (soft chip/icon fills).
   The cream ground (--color-bg) and amber accents carry over unchanged;
   --color-correct keeps its own green so quiz feedback reads as "correct"
   rather than as brand color. */
:root {
  --gk-radius-card: 20px;
  --gk-shadow-card: 0 3px 10px rgba(3, 105, 161, 0.10);

  --color-primary: #0369A1;
  --color-primary-bright: #0284C7;
  --color-primary-soft: #F0F9FF;

  --color-bg: #FDFAF3;
  --color-border: #EFE6D2;

  --color-correct: #10B981;
  --color-correct-bg: #E1FAEE;
  --color-incorrect: #F43F5E;
  --color-incorrect-bg: #FFE8EC;

  --color-warn-bg: #FEF3E2;

  --gk-amber: #F59E0B;
  --gk-amber-bg: #FEF3E2;
  --gk-orange: #F97316;
  --gk-orange-bg: #FFE6D2;
}

/* ---------- typeface (2026-07-29c, round 2): Kabu-san follow-up "maybe
   the font is part of it". Google Fonts, loaded only by the <link> tags in
   dashboard/contents/learn.html — never touches the system-font pages.
   Nunito covers Latin glyphs, Zen Maru Gothic covers Japanese; per-glyph
   font fallback means a mixed EN/JA string like "Dashboard ダッシュボード"
   renders each script in its own face automatically, no markup needed.
   Weights loaded: Nunito 400/600/700/800, Zen Maru Gothic 500/700 — the
   400 keeps genuinely-body copy (e.g. explanation-card__en, muted labels)
   from being forced into a face it didn't ask for, while headings/buttons/
   chips (already set to 700-800 below and throughout this file) get the
   chunky look. */
body {
  font-family: "Nunito", "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* radius: rounder, chunkier surfaces app-wide on these 3 pages */
:root {
  --radius-md: 16px;
  --radius-lg: 22px;
}

.btn {
  padding: 15px 16px;
  border-radius: 18px;
}

.btn-primary {
  background: var(--color-primary);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.btn-primary:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.btn-primary .btn__en,
.btn-secondary .btn__en,
.btn-ghost .btn__en {
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
}

.btn-primary .btn__ja,
.btn-secondary .btn__ja,
.btn-ghost .btn__ja {
  font-size: 0.8125rem; /* 13px */
}

/* answer-btn (True/False in the check flow): keep True on brand blue but
   give False its own amber accent instead of flat gray — a small two-tone
   touch that keeps the pre-answer choice screen from feeling monochrome,
   while staying neutral about which one is "right" before the tap. */
.answer-btn--false {
  color: var(--gk-amber);
}

.answer-btn--false svg { stroke: var(--gk-amber); }

/* ---------- shell / layout ---------- */
.gk-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.gk-main {
  flex: 1;
  min-width: 0;
  padding: 0 0 calc(70px + var(--safe-bottom));
}

@media (min-width: 900px) {
  .gk-shell {
    max-width: 1120px;
    flex-direction: row;
    align-items: flex-start;
  }

  .gk-main {
    padding: 0 0 32px;
  }
}

/* ---------- nav: bottom bar (mobile) / sidebar (>=900px) ---------- */
.gk-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  min-height: 60px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: var(--safe-bottom);
}

.gk-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px 6px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
}

.gk-nav__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.gk-nav__icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.gk-nav__label {
  font-size: 0.78rem; /* ~12.5px, up from 9.6px */
  font-weight: 700;
  line-height: 1.15;
}

.gk-nav__label .ja {
  display: none;
}

.gk-nav__item.is-active {
  color: var(--color-primary);
}

.gk-nav__item.is-active .gk-nav__icon {
  background: var(--color-primary-soft);
}

/* Left sidebar at >=900px: 200px (2026-07-30b — was 230px, Kabu-san
   flagged it as "a bit too wide" again) with compact ~44px pill rows for
   the active item, echoing the reference competitor's sidebar proportions
   without copying its content. */
@media (min-width: 900px) {
  .gk-nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: column;
    width: 200px;
    flex-shrink: 0;
    height: 100dvh;
    border-top: none;
    border-right: 1px solid var(--color-border);
    padding: 16px 12px;
    gap: 3px;
  }

  .gk-nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .gk-nav__item.is-active {
    background: var(--color-primary-soft);
  }

  .gk-nav__item.is-active .gk-nav__icon {
    background: transparent;
  }

  .gk-nav__icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
  }

  .gk-nav__label {
    font-size: 0.86rem;
  }

  .gk-nav__label .ja {
    display: inline;
    margin-left: 6px;
    font-size: 0.7rem;
    color: var(--color-muted);
    font-weight: 500;
  }
}

/* ---------- toast (dummy nav items) ---------- */
.gk-toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + var(--safe-bottom));
  transform: translateX(-50%);
  background: var(--color-ink);
  color: #fff;
  font-size: 0.78rem;
  padding: 9px 16px;
  border-radius: 999px;
  z-index: 60;
  box-shadow: 0 6px 16px rgba(20, 30, 45, 0.25);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .gk-toast {
    bottom: 24px;
    left: 210px; /* 2026-07-30b: follows .gk-nav's 200px (was 230px) */
    transform: none;
  }
}

/* ---------- loading ---------- */
.gk-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  text-align: center;
  color: var(--color-muted);
}

/* ---------- brand row (Aoshingo badge + wordmark, 2026-07-30) ----------
   Sits above .gk-page-header on dashboard.html / contents.html only — a
   quiet identity line that must not compete with the page title below it.
   learn.html intentionally does NOT include this markup (chapter title is
   the star there), but still loads this stylesheet, so the rule is harmless
   dead weight on that page. */
.gk-brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px 0;
}

.gk-brand-row__badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.gk-brand-row__word {
  font-family: "Nunito", "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #0369A1;
}

/* ---------- page header (shared) ---------- */
.gk-page-header {
  padding: 20px 20px 6px;
}

.gk-page-header__en {
  font-size: 1.5rem; /* 24px, up from 20px */
  font-weight: 800;
  margin: 0;
  color: var(--color-ink);
}

.gk-page-header__ja {
  font-size: 0.9rem; /* ~14.5px, up from 12.8px */
  color: var(--color-ink-soft);
  margin: 2px 0 0;
}

/* ======================================================================
   Dashboard
   ====================================================================== */

.gk-section {
  padding: 14px 20px 4px;
}

.gk-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 10px;
}

.gk-section-title .ja {
  font-weight: 500;
  color: var(--color-muted);
  font-size: 0.76rem;
  margin-left: 6px;
}

/* guide card */
.gk-guide {
  margin: 16px 20px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 16px 16px 14px;
  position: relative;
}

.gk-guide__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary-soft);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.gk-guide__heading {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 2px;
  padding-right: 30px;
}

.gk-guide__heading .ja {
  display: block;
  font-weight: 500;
  color: var(--color-muted);
  font-size: 0.78rem;
  margin-top: 1px;
}

.gk-guide__progress-label {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 700;
  margin: 8px 0 4px;
}

.gk-guide__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.gk-guide__step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--color-border);
}

.gk-guide__step:last-child {
  border-bottom: none;
}

.gk-guide__step-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-guide__step-mark svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  display: none;
}

.gk-guide__step.is-done .gk-guide__step-mark {
  background: var(--color-correct);
  border-color: var(--color-correct);
}

.gk-guide__step.is-done .gk-guide__step-mark svg {
  display: block;
}

.gk-guide__step-text-en {
  font-size: 0.92rem;
  color: var(--color-ink);
  font-weight: 600;
}

.gk-guide__step.is-done .gk-guide__step-text-en {
  color: var(--color-muted);
  text-decoration: line-through;
}

.gk-guide__step-text-ja {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 1px;
}

/* stat tiles */
.gk-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gk-stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 14px 14px 12px;
}

.gk-stat-tile__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.gk-stat-tile__icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--color-primary-bright);
}

/* Four tiles, four accent colors (blue/amber/orange/green) so the grid
   reads as playful rather than one flat corporate blue everywhere. Order
   matches dashboard.html: Cards learned, Study time, Streak, Accuracy. */
.gk-stats-grid .gk-stat-tile:nth-child(2) .gk-stat-tile__icon {
  background: var(--gk-amber-bg);
}
.gk-stats-grid .gk-stat-tile:nth-child(2) .gk-stat-tile__icon svg {
  stroke: var(--gk-amber);
}

.gk-stats-grid .gk-stat-tile:nth-child(3) .gk-stat-tile__icon {
  background: var(--gk-orange-bg);
}
.gk-stats-grid .gk-stat-tile:nth-child(3) .gk-stat-tile__icon svg {
  stroke: var(--gk-orange);
}

.gk-stats-grid .gk-stat-tile:nth-child(4) .gk-stat-tile__icon {
  background: var(--color-correct-bg);
}
.gk-stats-grid .gk-stat-tile:nth-child(4) .gk-stat-tile__icon svg {
  stroke: var(--color-correct);
}

.gk-stat-tile__value {
  font-size: 2rem; /* 32px, up from 28px */
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.15;
}

.gk-stat-tile__label {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 4px;
}

.gk-stat-tile__label .ja {
  display: block;
  margin-top: 1px;
}

.gk-stat-tile__sub {
  font-size: 0.72rem;
  color: var(--color-primary);
  margin-top: 4px;
  font-weight: 600;
}

/* weekly chart */
.gk-week-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 14px 16px;
}

.gk-week-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gk-week-row__label {
  flex: 0 0 34px;
  font-size: 0.76rem;
  color: var(--color-muted);
}

.gk-week-row__track {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: var(--color-primary-soft);
  overflow: hidden;
}

.gk-week-row__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--color-primary-bright);
  min-width: 2px;
}

.gk-week-row.is-today .gk-week-row__fill {
  background: var(--stage-a);
}

.gk-week-row__value {
  flex: 0 0 40px;
  text-align: right;
  font-size: 0.76rem;
  color: var(--color-ink-soft);
}

/* recent tests */
.gk-test-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.gk-test-row__date {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.gk-test-row__rate {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-ink);
}

.gk-test-row__badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  text-transform: uppercase;
}

.gk-test-row__badge.is-pass {
  background: var(--color-correct-bg);
  color: var(--color-correct);
}

.gk-test-row__badge.is-fail {
  background: var(--color-incorrect-bg);
  color: var(--color-incorrect);
}

/* weak content */
.gk-weak-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-incorrect);
  border-radius: var(--gk-radius-card);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.gk-weak-card__title-en {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}

.gk-weak-card__title-ja {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin: 2px 0 0;
}

.gk-weak-card__rate {
  font-size: 0.76rem;
  color: var(--color-incorrect);
  font-weight: 700;
  margin-top: 4px;
}

.gk-weak-card__btn {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.78rem;
  font-weight: 700;
}

.gk-weak-card__btn .ja {
  font-size: 0.64rem;
  font-weight: 500;
  opacity: 0.85;
}

/* ======================================================================
   Contents (28-chapter grid)
   ====================================================================== */

.gk-chapter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 20px 20px;
}

@media (min-width: 640px) and (max-width: 899px) {
  .gk-chapter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .gk-chapter-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 4px 28px 28px;
  }
}

.gk-chapter-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 12px 12px 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.gk-chapter-card:active {
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .gk-chapter-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .gk-chapter-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(20, 30, 45, 0.12);
  }
}

/* chapter banner image (may not exist yet — img.onerror hides this whole
   block, see contents.js buildMedia(); negative margins bleed it flush to
   the card's own rounded top corners despite the card's own padding) */
.gk-chapter-card__media {
  margin: -12px -12px 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
}

.gk-chapter-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gk-chapter-card__media.is-planned .gk-chapter-card__img {
  filter: grayscale(1);
  opacity: 0.55;
}

.gk-chapter-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.gk-chapter-card__num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 999px;
  padding: 2px 9px;
}

.gk-chapter-card__title-en {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 2px;
  line-height: 1.4;
}

.gk-chapter-card__title-ja {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.gk-chapter-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.gk-chapter-card__sections {
  font-size: 0.7rem;
  color: var(--color-muted);
}

.gk-chapter-card--planned {
  color: var(--color-muted);
  cursor: default;
}

.gk-chapter-card--planned .gk-chapter-card__num {
  color: var(--color-muted);
  background: var(--color-bg);
}

.gk-chapter-card--planned .gk-chapter-card__title-en,
.gk-chapter-card--planned .gk-chapter-card__title-ja {
  color: var(--color-muted);
}

.gk-chapter-card__soon {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 3px 9px;
}

.gk-chapter-card__soon .ja {
  margin-left: 3px;
}

/* progress ring (small donut, CSS-only) — bright blue arc, since this is a
   purely decorative graphic (not text), it can use the punchier accent. */
.gk-ring {
  --pct: 0;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary-bright) calc(var(--pct) * 3.6deg), var(--color-border) 0deg);
  flex-shrink: 0;
}

.gk-ring__hole {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-ring__pct {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--color-ink);
}

/* ======================================================================
   Learn (section list + card accordion + check)
   ====================================================================== */

/* Accent band: a blue-to-blue gradient (not a flat rectangle) for a more
   playful "header" feel. White text sits on this band, so both stops have
   to clear AA on their own — sky-800 #075985 is ~8.3:1 and sky-700 #0369A1
   is ~6.4:1, so title/subtitle/tag text stays readable wherever it falls.
   (The lighter #0284C7 is ~4.6:1 and is deliberately kept off this band.)
   The amber accent sits *on* this band as a thin bottom rule — the one
   place the two brand colors meet directly, which is what gives the header
   its lift. */
.gk-learn-header {
  position: relative;
  padding: 16px 20px 14px;
  border-bottom: 3px solid var(--gk-amber);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #075985 0%, #0369A1 100%);
}

.gk-learn-back {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.gk-learn-chapter-tag {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2px;
  font-weight: 700;
}

.gk-learn-title-en {
  font-size: 1.35rem; /* 21.6px, up from 17.6px */
  font-weight: 800;
  margin: 0;
  color: #fff;
  padding-right: 40px;
}

.gk-learn-title-ja {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 2px 0 0;
  padding-right: 40px;
}

/* section chips (mobile) */
.gk-section-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
}

.gk-section-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.gk-section-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.gk-section-chip__check {
  width: 14px;
  height: 14px;
  stroke: var(--color-correct);
}

.gk-section-chip.is-active .gk-section-chip__check {
  stroke: #fff;
}

/* section list (desktop) */
.gk-section-list {
  display: none;
}

.gk-learn-body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .gk-section-chips {
    display: none;
  }

  .gk-section-list {
    display: block;
    flex: 0 0 210px; /* 2026-07-30b: was 230px, Kabu-san flagged as too wide */
    padding: 14px;
    border-right: 1px solid var(--color-border);
  }

  .gk-learn-body {
    flex-direction: row;
    align-items: flex-start;
  }

  .gk-learn-content {
    flex: 1;
    min-width: 0;
  }
}

.gk-section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-ink-soft);
  margin-bottom: 2px;
}

.gk-section-item.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.gk-section-item.is-active .gk-section-item__title-ja {
  color: rgba(255, 255, 255, 0.8);
}

.gk-section-item.is-active .gk-section-item__check {
  stroke: #fff;
}

.gk-section-item__title-en {
  font-size: 0.9rem;
  display: block;
}

.gk-section-item__title-ja {
  font-size: 0.75rem;
  color: var(--color-muted);
  display: block;
  margin-top: 1px;
}

.gk-section-item__check {
  width: 14px;
  height: 14px;
  stroke: var(--color-correct);
  flex-shrink: 0;
}

/* card list / accordion */
.gk-learn-content {
  padding: 16px 20px 24px;
}

.gk-section-heading {
  margin-bottom: 12px;
}

.gk-section-heading__en {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gk-section-heading__ja {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.gk-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gk-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  overflow: hidden;
}

.gk-card__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.gk-card__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-card__titles {
  flex: 1;
  min-width: 0;
}

.gk-card__title-en {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.gk-card__title-ja {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 1px;
}

.gk-card__chevron {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}

.gk-card.is-open .gk-card__chevron {
  transform: rotate(180deg);
}

.gk-card__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.gk-qa {
  padding: 12px 0;
}

.gk-qa + .gk-qa {
  border-top: 1px dashed var(--color-border);
}

.gk-qa__q-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 6px;
}

.gk-qa__q-en {
  font-size: 1.1875rem; /* 19px */
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 3px;
  line-height: 1.55;
}

.gk-qa__q-ja {
  font-size: 0.90625rem; /* 14.5px */
  color: var(--color-muted);
  margin: 0 0 10px;
  line-height: 1.7;
}

/* Answer box: collapsed by default (max-height 0), the "is-open" class plus
   an inline max-height (set from JS, see learn.js buildQaAnswered) is what
   actually opens it. Left accent border + soft fill make the answer read
   as "the answer" at a glance rather than just more body text. */
.gk-qa__a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

.gk-qa__a.is-open {
  opacity: 1;
  padding: 10px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .gk-qa__a {
    transition: none;
  }
}

.gk-qa__a-label {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 4px;
}

.gk-qa__a-en {
  font-size: 1.0625rem; /* 17px */
  color: var(--color-ink);
  margin: 0 0 3px;
  line-height: 1.6;
  font-weight: 600;
}

.gk-qa__a-ja {
  font-size: 0.875rem; /* 14px */
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.75;
}

/* "Show answer" tap zone — the only thing visible below a not-yet-answered
   question. Filled amber and chunky ("押したくなる形") rather than the old
   dashed-outline ghost button, since this is the single most-tapped action
   on the whole page — it should look inviting, not like disabled filler.
   Dark ink text (not white) on the amber fill: verified via the WCAG
   relative-luminance formula at ~6.7:1, comfortably AA-safe — a white
   label on this amber would only reach ~2.8:1. */
.gk-qa--pending {
  padding-bottom: 14px;
}

.gk-qa__show-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: none;
  border-radius: 16px;
  background: var(--gk-amber);
  color: var(--color-ink);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(146, 64, 14, 0.25);
}

.gk-qa__show-btn:active {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0 1px 0 rgba(146, 64, 14, 0.25);
}

.gk-qa__show-btn .en {
  font-size: 0.9rem;
  font-weight: 800;
}

.gk-qa__show-btn .ja {
  font-size: 0.78rem;
  color: rgba(28, 43, 58, 0.7);
  font-weight: 600;
}

.gk-qa__list {
  margin: 10px 0 0;
  padding-left: 20px;
}

.gk-qa__list li {
  margin-bottom: 8px;
}

.gk-qa__list li .en {
  display: block;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.gk-qa__list li .ja {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 1px;
}

.gk-card__next {
  margin-top: 14px;
}

.gk-view[hidden] {
  display: none;
}

/* ======================================================================
   Check flow — Drivey-style restyle (2026-07-30b)
   ------------------------------------------------------------------
   Kabu-san asked to restyle the quiz question/answer/result UI after
   looking at the real Drivey app: no start button (first question shows
   automatically), red True/False cards side by side, a full-width
   correct/incorrect banner + a dedicated blue "Answer" reveal card + a
   gray "Explanation" card stacked after answering, and a completion
   screen with a big green check, an oversized score, and an accuracy
   line. Only structure/spacing is modeled on Drivey — no copied text or
   images. These classes are new (gk-quiz-*) and fully scoped to this
   quiz block; they don't touch .question-card/.feedback-banner/
   .explanation-card/.answer-btn used by unit.html's drill flow.
   ====================================================================== */

.gk-quiz-progress {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  background: var(--color-bg);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  text-align: center;
}

.gk-quiz-progress .dot {
  color: var(--color-muted);
  font-weight: 400;
}

.gk-quiz-progress .ja {
  font-weight: 500;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.gk-quiz-qcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  box-shadow: var(--gk-shadow-card);
  padding: 18px 18px 20px;
  margin-bottom: 14px;
}

.gk-quiz-qcard__en {
  font-size: 1.1875rem; /* 19px */
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.6;
  margin: 0 0 6px;
}

.gk-quiz-qcard__ja {
  font-size: 0.90625rem; /* 14.5px */
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0;
}

/* answer cards: white, rounded, thin border, side-by-side even at 375px —
   grid (not flex-wrap) so two equal columns never stack/overflow narrow
   screens. Icons are both red (Drivey's neutral pre-answer color, not
   semantically correct/incorrect yet), disambiguated by shape (○ vs ✕)
   and by the en/ja labels underneath. */
.gk-quiz-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.gk-quiz-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 18px 10px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gk-quiz-answer:disabled {
  cursor: default;
  opacity: 0.5;
}

@media (min-width: 1024px) {
  .gk-quiz-answer:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 30, 45, 0.12);
    border-color: var(--color-incorrect);
  }
}

.gk-quiz-answer:active:not(:disabled) {
  transform: scale(0.98);
}

.gk-quiz-answer__icon {
  width: 34px;
  height: 34px;
  stroke: var(--color-incorrect);
}

.gk-quiz-answer__label-en {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gk-quiz-answer__label-ja {
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* post-answer stack: banner -> answer reveal -> explanation -> next btn */
.gk-quiz-feedback {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gk-quiz-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: var(--gk-radius-card);
  padding: 14px 16px;
  border: 1.5px solid var(--color-correct);
  background: var(--color-correct-bg);
}

.gk-quiz-banner.is-incorrect {
  border-color: var(--color-incorrect);
  background: var(--color-incorrect-bg);
}

.gk-quiz-banner__icon-wrap {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-correct);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-quiz-banner.is-incorrect .gk-quiz-banner__icon-wrap {
  background: var(--color-incorrect);
}

.gk-quiz-banner__icon {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

.gk-quiz-banner__text-en {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-correct);
}

.gk-quiz-banner.is-incorrect .gk-quiz-banner__text-en {
  color: var(--color-incorrect);
}

.gk-quiz-banner__text-ja {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-left: 2px;
}

.gk-quiz-answer-reveal {
  background: var(--color-primary-soft);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--gk-radius-card);
  padding: 14px 16px;
}

.gk-quiz-answer-reveal__label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 8px;
}

.gk-quiz-answer-reveal__label .ja {
  text-transform: none;
  margin-left: 4px;
  font-weight: 600;
  opacity: 0.85;
}

.gk-quiz-answer-reveal__choice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gk-quiz-answer-reveal__icon {
  width: 22px;
  height: 22px;
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.gk-quiz-answer-reveal__label-en {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gk-quiz-answer-reveal__label-ja {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.gk-quiz-explanation {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--gk-radius-card);
  padding: 14px 16px;
}

.gk-quiz-explanation__label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.gk-quiz-explanation__label .ja {
  text-transform: none;
  margin-left: 4px;
  font-weight: 600;
}

.gk-quiz-explanation__en {
  font-size: 1.0625rem; /* 17px */
  color: var(--color-ink);
  line-height: 1.6;
  margin: 0 0 4px;
  font-weight: 600;
}

.gk-quiz-explanation__ja {
  font-size: 0.875rem; /* 14px */
  color: var(--color-ink-soft);
  line-height: 1.75;
  margin: 0;
}

.gk-quiz-next-btn {
  background: var(--color-correct);
  color: #fff;
}

.gk-quiz-next-btn:active {
  transform: scale(0.98);
}

/* completion screen */
.gk-quiz-complete {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 20px 28px;
}

.gk-quiz-complete__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-correct);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.gk-quiz-complete__icon {
  width: 32px;
  height: 32px;
  stroke: #fff;
}

.gk-quiz-complete__title {
  margin: 0 0 14px;
}

.gk-quiz-complete__title .en {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gk-quiz-complete__title .ja {
  display: block;
  font-size: 0.84rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.gk-quiz-complete__score {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 8px;
  line-height: 1.1;
}

.gk-quiz-complete__accuracy {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0 0 22px;
}

.gk-quiz-complete__accuracy .ja {
  color: var(--color-muted);
  margin-left: 2px;
}

.gk-quiz-complete .btn-row {
  margin-top: 4px;
}

/* ======================================================================
   Section video (top of section, 2026-07-30)
   ====================================================================== */

.gk-section-video {
  margin-bottom: 14px;
}

.gk-section-video__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-muted);
}

.gk-section-video__label .ja {
  font-weight: 500;
  font-size: 0.72rem;
}

.gk-section-video__wrap {
  border-radius: var(--gk-radius-card);
  box-shadow: var(--gk-shadow-card);
  overflow: hidden;
  background: #000;
}

.gk-section-video__wrap.is-square {
  max-width: 480px;
  margin: 0 auto;
}

.gk-section-video__el {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.gk-section-video__wrap.is-square .gk-section-video__el {
  aspect-ratio: 1 / 1;
}

.gk-section-video__wrap.is-wide .gk-section-video__el {
  aspect-ratio: 16 / 9;
}

/* ======================================================================
   Section quiz block (bottom of section, 2026-07-30)
   ------------------------------------------------------------------
   Replaces the old view-cards <-> view-check <-> view-result full-screen
   swap: the quiz now lives as a permanent block under the card list, with
   its own 3-state toggle (intro / check / result) handled by learn.js's
   switchQuizState(). The block itself is hidden entirely when a section
   has no check questions (section.check is empty/absent).
   ====================================================================== */

.gk-quiz {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.gk-quiz[hidden] {
  display: none;
}

.gk-quiz-heading {
  margin-bottom: 12px;
}

/* start card (2026-07-30d): shown first, before question 1 loads — a tap
   on its button is what actually begins the quiz (see startCheck() /
   showQuizIntro() in learn.js). Mirrors .gk-quiz-complete's card look
   (surface + border + centered content) for visual consistency with the
   result screen that ends the same block. */
.gk-quiz-intro {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 20px 26px;
}

.gk-quiz-intro__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.gk-quiz-intro__icon {
  width: 28px;
  height: 28px;
  stroke: var(--color-primary);
}

.gk-quiz-intro__count {
  margin: 0 0 20px;
}

.gk-quiz-intro__count .en {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gk-quiz-intro__count .ja {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.gk-quiz-intro .btn {
  max-width: 280px;
  margin: 0 auto;
}