/* Page-specific styles that build on base.css. */

/* ---------- Login ---------- */
.login-page { min-height: calc(100dvh - 80px); display: flex; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-4); }
.login-card {
  width: 100%; max-width: 24rem; padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, rgba(36, 33, 30, 0.9), rgba(24, 22, 20, 0.95));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.login-emblem { display: flex; justify-content: center; color: var(--bronze-strong); margin-bottom: var(--sp-3); filter: drop-shadow(0 0 14px rgba(224, 189, 122, 0.35)); }
.login-title { text-align: center; font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: var(--sp-1); }
.login-motto { background: none; border: 0; color: var(--text-muted); font-size: 1.15rem; cursor: pointer; padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-4); }
.password-row { display: flex; gap: var(--sp-2); align-items: center; }
.password-row .input { flex: 1; }

/* ---------- Today ---------- */
.today { max-width: 36rem; margin: var(--sp-5) auto 0; }
.today-headline { margin-top: var(--sp-2); }
.today-reason { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.today-plan { display: grid; gap: var(--sp-4); }
.today-plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.today-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--sp-2); font-size: var(--fs-lg); }
.today-steps li::marker { color: var(--bronze); font-family: var(--font-serif); }
.today-go { width: 100%; }
.today-map { margin-top: var(--sp-5); }
.today-calm { margin-top: var(--sp-6); }

/* ---------- Player ---------- */
body.in-session .tabbar { display: none; }
.player { max-width: 40rem; margin: 0 auto; display: grid; gap: var(--sp-4); }
.player-head { display: grid; gap: var(--sp-2); }
.player-stage { min-height: 50vh; }
.exercise-card { display: grid; gap: var(--sp-4); }
.ex { display: grid; gap: var(--sp-3); }
.ex-instruction { font-size: var(--fs-lg); font-weight: 500; margin: 0; }
.ex-latin { margin: 0; }
.player-actions { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.player-actions .btn-primary { margin-left: auto; }
.hints { display: grid; gap: var(--sp-2); }
.hint { font-size: var(--fs-sm); }
.ai-badge { margin-right: var(--sp-1); }
.result-panel p { margin: var(--sp-1) 0 0; }
.intro-card summary { cursor: pointer; list-style: none; font-weight: 600; }
.intro-card summary::-webkit-details-marker { display: none; }
.intro-card .examples { margin: var(--sp-2) 0; padding-left: 1.2rem; }
.bronze { color: var(--bronze-strong); }
.chip-groups { display: grid; gap: var(--sp-3); }
.chip-group.is-warm .chip-group-title { color: var(--ochre); }
.chip-group.is-warm .chips { outline: 1px dashed var(--ochre); outline-offset: 6px; border-radius: var(--radius); }
.token.is-highlight { border-bottom-color: var(--bronze); color: var(--bronze-strong); }
.token.is-solution { border: 1px dashed var(--patina); }
.token-german { font-family: var(--font-sans); font-size: var(--fs-lg); }
.tokens.german { gap: var(--sp-1); }
.choice-long { font-size: var(--fs-md); line-height: 1.4; }
.choice.is-used { opacity: 0.55; }
.pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.pairs .choice { flex-wrap: wrap; }
@media (max-width: 480px) { .pairs { grid-template-columns: 1fr; } }
.pair-tag { margin-left: auto; }
.vocab-help { min-height: 1.5em; }
.text-context summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); }
.text-full { padding-left: 1.4rem; font-size: 1.05rem; }
.text-full li.is-current { color: var(--bronze-strong); }
.solution-line { color: var(--patina); }
.translation-result { display: grid; gap: var(--sp-1); }

/* ---------- Finish ---------- */
.finish { max-width: 36rem; margin: var(--sp-5) auto 0; }
.finish-points { padding-left: 1.2rem; display: grid; gap: var(--sp-2); font-size: var(--fs-lg); }
.reward { display: flex; gap: var(--sp-3); align-items: center; color: var(--text); }
.reward svg { color: var(--bronze-strong); flex: none; }
.reward-relic { border-color: var(--bronze-deep); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab { padding: var(--sp-2) var(--sp-3); color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
.tab[aria-current="page"] { color: var(--bronze-strong); border-bottom-color: var(--bronze); }

/* ---------- Compass ---------- */
.compass-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.domain-card { padding: 0; overflow: hidden; }
.domain-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.domain-head h3 { margin: 0; }
.domain-card > .stack-sm { padding: 0 var(--sp-4) var(--sp-4); }
.torches { display: inline-flex; gap: 5px; }
.torch-dot { width: 10px; height: 18px; border-radius: 5px 5px 3px 3px; background: var(--surface-3); border: 1px solid var(--line-strong); }
.torch-dot.lit { background: linear-gradient(180deg, #fff2cf, var(--bronze-strong) 45%, var(--bronze-deep)); border-color: var(--bronze); box-shadow: 0 0 10px rgba(224, 189, 122, 0.45); }
.skill-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.skill-actions { gap: var(--sp-2); }

/* ---------- Catacomb map ---------- */
.wing-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.wing h4 { margin-bottom: var(--sp-2); }
.wing-map { width: 100%; height: auto; display: block; }
.corridor { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; }
.corridor.open { stroke: var(--bronze-deep); stroke-dasharray: none; }
.chamber { cursor: pointer; outline: none; }
.chamber-room { fill: var(--bg-deep); stroke: var(--line-strong); stroke-width: 2; }
.chamber-glow { fill: var(--bronze); }
.chamber-buried .chamber-room { stroke-dasharray: 3 4; stroke: var(--line); }
.chamber-discovered .chamber-room { stroke: var(--bronze-deep); }
.chamber-lit .chamber-room { fill: #3a2c17; stroke: var(--bronze); }
.chamber-secured .chamber-room { fill: #5a4320; stroke: var(--bronze-strong); }
.chamber-flame { fill: #ffe9b8; }
.chamber.not-introduced { opacity: 0.45; }
.chamber:focus-visible .chamber-room, .chamber:hover .chamber-room { stroke: var(--text); }
.chamber-panel { position: sticky; top: 64px; z-index: 2; }

/* ---------- Relics & chronicle ---------- */
.relic-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.relic { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; color: var(--text); cursor: pointer; font: inherit; }
.relic.found svg { color: var(--bronze-strong); filter: drop-shadow(0 0 8px rgba(224, 189, 122, 0.4)); }
.relic.hidden-relic { opacity: 0.45; }
.relic.hidden-relic svg { color: var(--text-faint); }
.tablets { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.tablet { background: linear-gradient(180deg, #2a241c, #1e1a15); border-color: #4a3f30; }
.training-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.text-row { padding: var(--sp-2) 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.text-row:hover { color: var(--bronze-strong); }
.exam-row { justify-content: flex-start; }
.select { appearance: auto; }

/* ---------- Settings ---------- */
.focus-list, .skill-toggles { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* ---------- Trainer ---------- */
.trainer { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); align-items: start; }
@media (max-width: 900px) { .trainer { grid-template-columns: 1fr; } }
.trainer-inputs ol, .trainer-text { padding-left: 1.4rem; display: grid; gap: var(--sp-3); margin: 0; }
.trainer-text li { font-size: 1.15rem; line-height: 1.6; }
.word-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; border-bottom: 1px dotted var(--line-strong); }
.word-link:hover { color: var(--bronze-strong); }
.trainer-vocab { position: sticky; top: 64px; max-height: calc(100dvh - 90px); overflow: auto; }
.vocab-sheet { padding-left: 1.2rem; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.vocab-sheet li.is-highlight { color: var(--bronze-strong); }
.trainer-result { margin-top: var(--sp-1); }
.strong { font-weight: 600; }

/* ---------- Parent & admin ---------- */
.stat-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.stat-value { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--bronze-strong); }
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, 14px); gap: 3px; }
.heat { width: 14px; height: 14px; border-radius: 3px; background: var(--bronze); }
.row-focus td:first-child { border-left: 3px solid var(--bronze); }
.row-gap td:first-child { border-left: 3px solid var(--ochre); }
.clickable { cursor: pointer; }
.clickable:hover td { background: var(--surface-2); }
.attempt-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.attempt { display: grid; gap: var(--sp-1); border-left-width: 3px; }
.attempt.ok { border-left-color: var(--patina); }
.attempt.miss { border-left-color: var(--ochre); }
.change-log { padding-left: 1.1rem; display: grid; gap: var(--sp-1); }
.token-code { display: block; padding: var(--sp-3); background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); word-break: break-all; font-size: var(--fs-sm); user-select: all; }
.account-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.danger-zone { border-color: #5a2a1c; }

/* ---------- Legal pages ---------- */
.legal h2 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.legal p { color: var(--text-muted); }

/* Router host per navigation (see pages/student.js): layout-neutral. */
.view-host { display: contents; }