/* Kana Trainer — /hiragana/trainer, /katakana/trainer
   Writing-only SRS review hub. Scoped to .tr-page. Uses the site tokens
   (site.css second :root wins: blue accent) with fallbacks, and the
   homepage's warm-paper language: Newsreader display serif, pill badge,
   gradient launch panel, 12–20px radii, soft card shadows.

   Redesigned 2026-09-14 — the homepage's main CTA now lands here. */

.tr-page {
  width: 100%;
  --tr-learned: var(--green, #2f8f5b);
  --tr-due: var(--recall-accent, #d01b83);
  --tr-weak: var(--orange, #bd7a14);
  --tr-learning: var(--accent, #20507e);
  --tr-fail: var(--red, #b1322a);
  --tr-serif: var(--font-display, 'Newsreader', Georgia, serif);
  --tr-jp: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --tr-radius: 20px;
}
.tr-page [hidden] { display: none !important; }
/* Full page width like every other section page; the launch panel + map
   sit in the main column of .layout-with-rail with the site rail beside. */
.tr-hub { margin: 0 auto; }

/* ── Hero ─────────────────────────────────────────────────────── */
/* Script switch sits centred under the site-standard hero card. */
.tr-script-row { display: flex; justify-content: center; margin: 22px 0; }
/* Same segmented control as /chart's .kana-toggle (css/chart.css): 12px
   track, 3px pad, 1.5px border, 8px×22px .92rem buttons, あ/ア sub-labels. */
.tr-script { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border-radius: 12px; background: var(--bg-outer, var(--inset, #f4ede0)); border: 1.5px solid var(--container-border, var(--line-2, #d9cdb4)); }
.tr-script__opt { display: inline-block; line-height: normal; padding: 8px 22px; border-radius: 9px; font-size: .92rem; font-weight: 700; color: var(--text-muted, var(--muted, #54403a)); text-decoration: none; transition: background .15s, color .15s; }
.tr-script__opt .jp { font-family: 'Noto Sans JP', sans-serif; opacity: .7; margin-left: 5px; font-weight: 500; }
.tr-script__opt:hover { color: var(--accent, #20507e); }
.tr-script__opt.is-on .jp { opacity: .85; }
.tr-script__opt.is-on { background: var(--accent, #20507e); color: #fff; }
.tr-script__opt:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 2px; }

/* ── Launch panel ─────────────────────────────────────────────── */
.tr-launch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 36px; align-items: center; padding: 26px 30px; border-radius: var(--tr-radius);
  border: 1px solid var(--accent-line, rgba(32,80,126,.24)); background: linear-gradient(135deg, var(--accent-bg, rgba(32,80,126,.08)), rgba(47, 108, 158, .04)); box-shadow: var(--shadow-hero, none); }
.tr-progress { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line-2, #d7cdb6); }
.tr-progress__seg { display: block; height: 100%; width: 0; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.tr-progress__seg--learned { background: var(--tr-learned); }
.tr-progress__seg--due { background: var(--tr-due); }
.tr-progress__seg--weak { background: var(--tr-weak); }
.tr-progress__seg--learning { background: var(--tr-learning); opacity: .7; }
.tr-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.tr-stat { display: inline-flex; align-items: baseline; gap: 7px; }
.tr-stat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tr-dot, transparent); align-self: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--line-2, #d7cdb6); }
.tr-stat--learned { --tr-dot: var(--tr-learned); }
.tr-stat--due { --tr-dot: var(--tr-due); }
.tr-stat--weak { --tr-dot: var(--tr-weak); }
.tr-stat--learned::before, .tr-stat--due::before, .tr-stat--weak::before { box-shadow: none; }
.tr-stat__n { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tr-stat__of { font-size: 15px; font-weight: 600; color: var(--faint, #938b80); margin-left: 1px; }
.tr-stat__l { font-size: 13px; color: var(--muted, #6b7280); }
.tr-stat--learned .tr-stat__n { color: var(--tr-learned); }
.tr-stat--due .tr-stat__n { color: var(--tr-due); }
.tr-stat--weak .tr-stat__n { color: var(--tr-weak); }
.tr-launch__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tr-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; font-size: 17px; letter-spacing: .01em; white-space: nowrap;
  color: #fff; background: var(--accent, #20507e); border: 0; border-radius: 14px; padding: 15px 26px; cursor: pointer;
  box-shadow: 0 10px 26px rgba(32, 80, 126, .28); transition: transform .15s, box-shadow .15s; }
.tr-start svg { transition: transform .15s; }
.tr-start:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(32, 80, 126, .32); }
.tr-start:hover svg { transform: translateX(3px); }
.tr-start:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 3px; }
.tr-next-preview { margin: 0; min-height: 1.4em; text-align: center; font-size: 13px; color: var(--muted, #6b7280); font-family: var(--tr-jp); letter-spacing: .04em; }

/* ── Syllabary map ────────────────────────────────────────────── */
.tr-mapsec { margin-top: 30px; }
.tr-map-title { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #e3dac8);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint, #938b80); }
.tr-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); }
.tr-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; background: var(--tr-dot, #ccc); }
.tr-legend .is-new { --tr-dot: transparent; }
.tr-legend .is-new::before { box-shadow: inset 0 0 0 1px var(--line-2, #d7cdb6); }
.tr-legend .is-learning { --tr-dot: var(--tr-learning); }
.tr-legend .is-weak { --tr-dot: var(--tr-weak); }
.tr-legend .is-due { --tr-dot: var(--tr-due); }
.tr-legend .is-learned { --tr-dot: var(--tr-learned); }
.tr-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 4px 26px; padding: 16px 22px 18px; border-radius: var(--tr-radius);
  border: 1px solid var(--line-2, #d7cdb6); background: var(--card, #faf6ee); box-shadow: var(--shadow-card, none); }
.tr-map-row { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; min-width: 0; }
.tr-map-row__name { align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--faint, #938b80); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-radius: 4px; }
.tr-map-row__name:hover { color: var(--accent, #20507e); text-decoration: underline; text-underline-offset: 3px; }
.tr-map-row__name:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 2px; }
.tr-map-row__chars { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-map-char { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; box-sizing: border-box; white-space: nowrap; border-radius: 10px;
  border: 1px solid var(--line-2, #d7cdb6); background: var(--inset, #fcfaf5); font-family: var(--tr-jp); font-size: 17px; letter-spacing: -.02em; color: var(--muted, #6b7280); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.tr-map-char:hover { border-color: var(--accent, #20507e); box-shadow: 0 0 0 1px var(--accent, #20507e); transform: translateY(-1px); }
.tr-map-char:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 2px; }
.tr-map-char.is-learning { color: var(--text, inherit); background: color-mix(in srgb, var(--tr-learning) 16%, transparent); border-color: color-mix(in srgb, var(--tr-learning) 38%, transparent); }
.tr-map-char.is-weak { color: var(--text, inherit); background: color-mix(in srgb, var(--tr-weak) 22%, transparent); border-color: color-mix(in srgb, var(--tr-weak) 45%, transparent); }
.tr-map-char.is-due { color: var(--text, inherit); background: color-mix(in srgb, var(--tr-due) 16%, transparent); border-color: color-mix(in srgb, var(--tr-due) 40%, transparent); }
.tr-map-char.is-learned { color: var(--text, inherit); background: color-mix(in srgb, var(--tr-learned) 18%, transparent); border-color: color-mix(in srgb, var(--tr-learned) 40%, transparent); }

/* ── Session ──────────────────────────────────────────────────── */
.tr-session { max-width: 480px; margin: 0 auto; }
.tr-session__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tr-exit { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 13px 7px 9px; border-radius: 999px;
  border: 1px solid var(--line-2, #d7cdb6); background: var(--inset, #fcfaf5); color: var(--muted, #6b7280); cursor: pointer; transition: color .15s, border-color .15s; }
.tr-exit:hover { color: var(--accent, #20507e); border-color: var(--accent, #20507e); }
.tr-session__progress { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-lap-progress { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280); text-align: right; font-variant-numeric: tabular-nums; transform-origin: right center; transition: transform .2s, color .2s; }
.tr-lap-progress.is-pulse { animation: tr-pulse .9s ease; }
@keyframes tr-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.3); color: var(--accent, #20507e); } 100% { transform: scale(1); } }
.tr-lap-track { height: 8px; border-radius: 999px; background: var(--line-2, #d7cdb6); overflow: hidden; }
.tr-lap-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent, #20507e), var(--accent-light, #2f6c9e)); transition: width .3s ease; }

.tr-prompt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 0 14px; }
.tr-prompt__sound { justify-self: end; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent, #20507e); color: #fff; box-shadow: var(--shadow-card, none); transition: transform .15s; }
.tr-prompt__sound:hover { transform: translateY(-1px); }
.tr-prompt__sound:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 3px; }
.tr-prompt__sound svg { width: 20px; height: 20px; }
.tr-prompt__romaji { font-family: var(--tr-serif); font-weight: 500; font-size: 60px; line-height: 1; letter-spacing: -.01em; text-align: center; }
.tr-prompt__status { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-2, #d7cdb6); background: var(--inset, #fcfaf5); color: var(--muted, #6b7280); }
.tr-prompt__status.is-learning { color: var(--tr-learning); border-color: color-mix(in srgb, var(--tr-learning) 40%, transparent); background: color-mix(in srgb, var(--tr-learning) 10%, transparent); }
.tr-prompt__status.is-due { color: var(--tr-due); border-color: color-mix(in srgb, var(--tr-due) 40%, transparent); background: color-mix(in srgb, var(--tr-due) 10%, transparent); }
.tr-prompt__status.is-weak { color: var(--tr-weak); border-color: color-mix(in srgb, var(--tr-weak) 45%, transparent); background: color-mix(in srgb, var(--tr-weak) 12%, transparent); }
.tr-prompt__status.is-learned { color: var(--tr-learned); border-color: color-mix(in srgb, var(--tr-learned) 40%, transparent); background: color-mix(in srgb, var(--tr-learned) 10%, transparent); }

.tr-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--canvas-border, #d7e0ea); border-radius: var(--tr-radius); overflow: hidden;
  background: var(--inset, #fcfaf5); box-shadow: var(--shadow-card, none); touch-action: none; }
.tr-canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.tr-feedback { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 14px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: var(--card, #faf6ee); border: 1px solid var(--line-2, #d7cdb6); box-shadow: var(--shadow-card, none);
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.tr-score { position: absolute; top: 12px; right: 14px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .25s; pointer-events: none; }

.tr-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 18px; }
/* Workbook hand-off: appears once a character is clearly struggling. */
.tr-tools .tr-tool--workbook { text-decoration: none; color: var(--tr-weak); border-color: color-mix(in srgb, var(--tr-weak) 55%, transparent); }
.tr-tools .tr-tool--workbook[hidden] { display: none; }
.tr-sum-workbook { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--accent); }
.tr-sum-workbook:hover { text-decoration: underline; }
.tr-sum-workbook[hidden] { display: none; }
.tr-tool { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-2, #d7cdb6); background: var(--inset, #fcfaf5); color: var(--text, inherit); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.tr-tool--icon { padding: 9px 13px; }
.tr-tool:hover { border-color: var(--accent, #20507e); color: var(--accent, #20507e); }
.tr-tool.is-on { background: var(--accent, #20507e); color: #fff; border-color: transparent; }
.tr-tool:focus-visible { outline: 2px solid var(--accent, #20507e); outline-offset: 2px; }
.tr-tool svg { display: block; }

/* track: the last eight writes · the current prompt */
.tr-track { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tr-track__recent { display: flex; gap: 4px; overflow: hidden; justify-content: flex-end; }
.tr-track-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; white-space: nowrap; border-radius: 9px; flex: 0 0 auto;
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; border: 1px solid var(--line-2, #d7cdb6); background: var(--inset, #fcfaf5); color: var(--muted, #6b7280); }
.tr-track-chip.is-current { min-width: 40px; height: 40px; font-size: 15px; background: var(--accent, #20507e); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(32, 80, 126, .25); }
.tr-track-chip.is-clean { background: color-mix(in srgb, var(--tr-learned) 20%, transparent); border-color: color-mix(in srgb, var(--tr-learned) 40%, transparent); color: var(--text, inherit); }
.tr-track-chip.is-done.is-weak { background: color-mix(in srgb, var(--tr-weak) 24%, transparent); border-color: color-mix(in srgb, var(--tr-weak) 45%, transparent); color: var(--text, inherit); }
.tr-track-chip.is-fail { background: color-mix(in srgb, var(--tr-fail) 18%, transparent); border-color: color-mix(in srgb, var(--tr-fail) 40%, transparent); color: var(--text, inherit); }
.tr-track__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #938b80); text-align: center; margin-top: 8px; }

/* ── Summary ──────────────────────────────────────────────────── */
.tr-summary { max-width: 560px; margin: 0 auto; text-align: center; }
.tr-summary h2 { margin: 8px 0 4px; font-family: var(--tr-serif); font-weight: 500; font-size: clamp(30px, 4vw, 40px); letter-spacing: -.02em; line-height: 1.1; }
.tr-sum-writes { color: var(--muted, #6b7280); margin: 0 0 20px; font-size: 16px; }
.tr-sum-block { text-align: left; border: 1px solid var(--line-2, #d7cdb6); border-left: 4px solid var(--tr-learning); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--card, #faf6ee); box-shadow: var(--shadow-card, none); }
.tr-sum-block--grad { border-left-color: var(--tr-learned); }
.tr-sum-block--weak { border-left-color: var(--tr-weak); }
.tr-sum-block h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6b7280); }
.tr-sum-block h3 small { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 6px; color: var(--faint, #938b80); }
.tr-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-sum-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; white-space: nowrap; border-radius: 10px;
  font-family: var(--tr-jp); font-size: 17px; letter-spacing: -.02em; background: color-mix(in srgb, var(--tr-learning) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tr-learning) 36%, transparent); }
.tr-sum-block--weak .tr-sum-chip { background: color-mix(in srgb, var(--tr-weak) 22%, transparent); border-color: color-mix(in srgb, var(--tr-weak) 45%, transparent); }
.tr-sum-block--grad .tr-sum-chip { background: color-mix(in srgb, var(--tr-learned) 18%, transparent); border-color: color-mix(in srgb, var(--tr-learned) 40%, transparent); }
.tr-sum-chipwrap { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 38px; }
.tr-sum-sub { font-size: 10px; color: var(--muted, #6b7280); line-height: 1; }
.tr-sum-bar { width: 28px; height: 4px; border-radius: 2px; background: var(--line-2, #d7cdb6); overflow: hidden; }
.tr-sum-bar > i { display: block; height: 100%; background: var(--accent, #20507e); }
.tr-sum-none { font-size: 13px; color: var(--faint, #938b80); }
.tr-sum-due { color: var(--muted, #6b7280); margin: 10px 0 18px; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.tr-summary__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 680px) {
  .tr-launch { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  .tr-launch__cta { align-items: stretch; }
  .tr-start { width: 100%; }
  .tr-stats { gap: 6px 18px; }
}
@media (max-width: 560px) {
  .tr-map { padding: 10px 14px 12px; gap: 2px 18px; }
  .tr-map-char { min-width: 33px; height: 33px; font-size: 15.5px; padding: 0 5px; }
  .tr-prompt { gap: 10px; }
  .tr-prompt__romaji { font-size: 50px; }
  .tr-tool { font-size: 13px; padding: 8px 13px; }
  .tr-session__top { gap: 12px; }
}

/* ── Session polish (2026-09-14) ──────────────────────────────── */
/* Full-viewport ink-wash backdrop painted by GameShader ('ink' look) while
   a session is open. z-index 0 (not negative: body paints its own opaque
   background over negative-z children of the root), pointer-events none. Tokens are read by the shader each ~0.8 s, so the theme
   toggle is picked up live. */
.tr-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  --shader: ink; --shader-tint: #2f6c9e; --shader-alpha: .4; }
/* The session content sits above the backdrop; the sticky header (z 30) already does. */
.tr-session { position: relative; z-index: 1; }
html.dark .tr-backdrop { --shader-tint: #8cbde6; --shader-alpha: .22; }

/* Views ease in instead of popping. */
.tr-session:not([hidden]), .tr-summary:not([hidden]) { animation: tr-view-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tr-view-in { from { opacity: 0; } to { opacity: 1; } }

/* Faint dashed centre guides on the writing card, like a practice-sheet cell. */
.tr-canvas-wrap {
  background:
    repeating-linear-gradient(90deg, var(--canvas-grid, rgba(32,80,126,.18)) 0 6px, transparent 6px 12px) center / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--canvas-grid, rgba(32,80,126,.18)) 0 6px, transparent 6px 12px) center / 1px 100% no-repeat,
    var(--inset, #fcfaf5);
}

/* The romaji settles in with each new character. */
.tr-prompt.is-swap .tr-prompt__romaji { animation: tr-swap .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tr-swap { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* Sound button rings once while the clip plays. */
.tr-prompt__sound.is-playing { animation: tr-ring .7s ease-out; }
@keyframes tr-ring { 0% { box-shadow: 0 0 0 0 rgba(32, 80, 126, .45); } 100% { box-shadow: 0 0 0 14px rgba(32, 80, 126, 0); } }
html.dark .tr-prompt__sound.is-playing { animation-name: tr-ring-dark; }
@keyframes tr-ring-dark { 0% { box-shadow: 0 0 0 0 rgba(140, 189, 230, .5); } 100% { box-shadow: 0 0 0 14px rgba(140, 189, 230, 0); } }

/* Focus mode: the footer steps back while writing. */
body.tr-in-lap .site-footer { opacity: .6; transition: opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .tr-session:not([hidden]), .tr-summary:not([hidden]), .tr-prompt.is-swap .tr-prompt__romaji, .tr-prompt__sound.is-playing, .tr-lap-progress.is-pulse { animation: none; }
  .tr-start, .tr-start svg, .tr-map-char { transition: none; }
}