/* SRS on the Athenaeum design contract 0.2.0 (After hours). Tokens and the reading shell
   come from the pinned copies in design/; this file adds the controls, cards and charts. */
:root {
  --srs-forgot: #e39a8c;
  --srs-hard: #e7c589;
  --srs-good: #a6dfb5;
  --srs-easy: #9fc5e8;
  /* One mint ramp, validated as an ordinal scale against the surface. */
  --srs-ramp-1: #125c31;
  --srs-ramp-2: #286d41;
  --srs-ramp-3: #539868;
  --srs-ramp-4: #6cb180;
  --srs-ramp-5: #a5deb4;
  --srs-track: #232d2e;
  --srs-radius: 4px;
}

[hidden] { display: none !important; }
.ath-brand img { width: 30px; height: 30px; }
.ath-page { padding-block: 2.25rem 4rem; }
.ath-page h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: 1rem; }
.ath-page h2 { margin: 2.75rem 0 0.75rem; font-size: 1.15rem; letter-spacing: -0.03em; }
.ath-page h3 { margin: 0 0 0.4rem; color: var(--ath-color-muted); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.ath-page p { margin-block: 0 1rem; }
.ath-footer a { color: var(--ath-color-muted); }
.narrow { max-width: 44rem; }
.muted { color: var(--ath-color-muted); }
.small { font-size: 0.8125rem; }
.lede { max-width: 40ch; color: var(--ath-color-muted); font-size: 1.0625rem; }
kbd { margin-left: 0.5rem; padding: 0 0.35rem; border: 1px solid currentColor; border-radius: 3px; font: inherit; font-size: 0.6875rem; opacity: 0.6; }
@media (hover: none) { kbd { display: none; } }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border: 1px solid var(--ath-color-link); border-radius: var(--srs-radius); background: transparent; color: var(--ath-color-link); font: inherit; font-size: 0.875rem; line-height: 1.4; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ath-color-link); color: var(--ath-color-canvas); }
.btn-primary { background: var(--ath-color-link); color: var(--ath-color-canvas); font-weight: 700; }
.btn-primary:hover { background: var(--ath-color-text); border-color: var(--ath-color-text); }
.btn-quiet { border-color: var(--ath-color-border); color: var(--ath-color-muted); }
.btn-quiet:hover { background: var(--ath-color-surface); border-color: var(--ath-color-muted); color: var(--ath-color-text); }
.btn-large { padding: 0.8rem 1.4rem; font-size: 1rem; }
.btn[aria-pressed="true"] { border-color: var(--ath-color-focus); color: var(--ath-color-focus); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.actions form { margin: 0; }
.stack > * + * { margin-top: 1.5rem; }
.field { margin-bottom: 1rem; }
.field label, .typed label, .write label, dialog label { display: block; margin-bottom: 0.35rem; font-size: 0.8125rem; color: var(--ath-color-muted); }
.field-row { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: end; }
.field-row .field { flex: 1 1 12rem; }
.field-row .btn { margin-bottom: 1rem; }
input:not([type]), input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius);
  background: var(--ath-color-surface); color: var(--ath-color-text); font: inherit; font-size: 1rem; }
textarea { resize: vertical; line-height: 1.5; }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0.35rem 0 0; flex: none; accent-color: var(--ath-color-link); }
fieldset { margin: 0; padding: 1.1rem 1rem 0.4rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); }
legend { padding-inline: 0.5rem; color: var(--ath-color-muted); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.checks { display: grid; gap: 0.15rem; margin-bottom: 0.75rem; }
.checks-inline { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.checks label, .check { display: flex; gap: 0.6rem; align-items: flex-start; padding-block: 0.3rem; cursor: pointer; }
.check { margin-bottom: 0.4rem; }
.checks .count { margin-left: auto; font-size: 0.75rem; }
.help { color: var(--ath-color-muted); font-size: 0.8125rem; line-height: 1.6; }
.notice { padding: 0.7rem 1rem; border: 1px solid var(--ath-color-focus); border-radius: var(--srs-radius); font-size: 0.875rem; }
.sticky-save { position: sticky; bottom: 0; margin: 0; padding-block: 0.9rem; background: var(--ath-color-canvas); border-top: 1px solid var(--ath-color-border); }
/* The shared account page's markup. */
.card { margin-block: 1rem; padding: 1rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); background: var(--ath-color-surface); }

/* Units and decks */
.label { margin: 0 0 0.6rem; color: var(--ath-color-muted); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.ath-page h2.label { margin: 0 0 0.6rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
.sessions { margin-bottom: 2.75rem; border-bottom: 1px solid var(--ath-color-border); }
.session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.9rem 0.25rem; border-top: 1px solid var(--ath-color-border); }
.session-text { display: grid; gap: 0.3rem; flex: 1 1 16rem; min-width: 0; color: var(--ath-color-text); text-decoration: none; }
.session-text:hover { color: var(--ath-color-link); }
.session-actions { display: flex; align-items: center; gap: 0.5rem; }
.session-actions form { margin: 0; }
.deck-text { display: grid; gap: 0.3rem; min-width: 0; }
.deck-name { font-weight: 700; letter-spacing: -0.02em; }
.deck-standing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; color: var(--ath-color-muted); font-size: 0.8125rem; line-height: 1.6; }
.stagebar { display: inline-flex; flex: none; gap: 2px; width: 7rem; height: 6px; }
.stagebar .segment { min-width: 2px; border-radius: 2px; }
.units.ath-section-index { margin-top: 1.5rem; }
.units .ath-entry { padding-block: 1.1rem; }
.heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.ath-page .heading-row h1 { margin-bottom: 0; }
.heading-row + .muted { margin-top: 0.75rem; }
.back-link { font-size: 0.8125rem; }
.back-link a { color: var(--ath-color-muted); text-decoration: none; }
.back-link a:hover { color: var(--ath-color-link); }
.ath-page .ath-eyebrow { margin-bottom: 0.75rem; }
.modes { margin-top: 1.5rem; padding-bottom: 0.2rem; }
.modes > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.toggle { display: inline-flex; margin-bottom: 0.6rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); }
.toggle label { padding: 0.4rem 1.1rem; border-radius: 3px; color: var(--ath-color-muted); font-size: 0.875rem; cursor: pointer; }
#mode-srs:checked ~ .toggle label[for="mode-srs"], #mode-classic:checked ~ .toggle label[for="mode-classic"] { background: var(--ath-color-link); color: var(--ath-color-canvas); font-weight: 700; }
#mode-srs:focus-visible ~ .toggle label[for="mode-srs"], #mode-classic:focus-visible ~ .toggle label[for="mode-classic"] { outline: var(--ath-focus-width) solid var(--ath-color-focus); outline-offset: 3px; }
/* Only the chosen mode's note shows. */
.mode-note { display: none; }
#mode-srs:checked ~ #note-srs, #mode-classic:checked ~ #note-classic { display: block; }
.choices { margin-top: 1.25rem; padding-bottom: 0.4rem; }
.guide h3 { margin: 1.75rem 0 0.5rem; color: var(--ath-color-text); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
.guide table { display: table; width: 100%; }
.guide th, .guide td:first-child { white-space: nowrap; }
.guide td { vertical-align: top; }
.landing { padding-top: 2rem; }
.landing .actions { margin-top: 2rem; }
.landing .lede { max-width: none; }
.definition { margin-bottom: 2rem; padding: 0.9rem 1.1rem; border-left: 2px solid var(--ath-color-link); color: #ccd3cc; line-height: 1.7; }
.definition strong { color: var(--ath-color-text); }
.definition em { color: var(--ath-color-muted); }
.ath-prose .definition { margin-top: 0; }
.guide h2 { margin-top: 2.25rem; }
.guide td:first-child { color: var(--ath-color-text); font-weight: 700; }
.ath-page .turn { justify-content: space-between; margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.chip-toggle { cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.chip-toggle > span { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); color: var(--ath-color-muted); font-size: 0.8125rem; }
.chip-toggle input:checked + span { border-color: var(--ath-color-link); color: var(--ath-color-text); }
.chip-toggle input:checked + span .muted { color: var(--ath-color-link); }
.chip-toggle input:focus-visible + span { outline: var(--ath-focus-width) solid var(--ath-color-focus); outline-offset: 3px; }
.lessons { margin-block: 1.25rem 0; padding-bottom: 0.6rem; }
.lesson { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0; cursor: pointer; }
.lesson-name { flex: 1; }
.lesson-count { font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticky-save { display: flex; align-items: center; gap: 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-block: 1.5rem 2rem; }
.tile { padding: 1rem 1.1rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); background: var(--ath-color-surface); }
.ath-page .tile p { margin: 0; }
.tile-label { color: var(--ath-color-muted); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tile-value { font-size: 2rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; }
.tile-unit { color: var(--ath-color-muted); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; }
.tile-note { color: var(--ath-color-muted); font-size: 0.75rem; line-height: 1.6; }

/* Card text */
.blank { display: inline-block; width: 3.2em; border-bottom: 1px solid var(--ath-color-muted); vertical-align: baseline; }
.slot { color: var(--ath-color-focus); }
.display { overflow-x: auto; padding-block: 0.25rem; text-align: center; }
.katex { font-size: 1.1em; }

/* Study screen */
.study { max-width: 44rem; margin-inline: auto; }
.session-bar { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; }
.session-bar a { min-width: 0; overflow: hidden; color: var(--ath-color-muted); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.session-bar span { flex: none; }
.session-bar a:hover { color: var(--ath-color-link); }
.progress { height: 3px; margin-block: 0.6rem 1.25rem; border-radius: 2px; background: var(--srs-track); }
#progress-fill { width: 0; height: 100%; border-radius: 2px; background: var(--srs-ramp-3); transition: width 160ms ease; }
.sync { color: var(--ath-color-focus); font-size: 0.75rem; }
.flashcard { padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); background: var(--ath-color-surface); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ath-color-muted); font-size: 0.75rem; }
.card-corner { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.star { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: -0.4rem -0.4rem -0.4rem 0; padding: 0; border: 0; border-radius: var(--srs-radius); background: none; cursor: pointer; }
.star svg { fill: none; stroke: var(--ath-color-muted); stroke-width: 1.6; stroke-linejoin: round; }
.star:hover svg { stroke: var(--ath-color-focus); }
.star[aria-pressed="true"] svg { fill: var(--ath-color-focus); stroke: var(--ath-color-focus); }
.chip { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); color: var(--ath-color-muted); font-size: 0.6875rem; white-space: nowrap; }
.chip-trouble { border-color: var(--ath-color-focus); color: var(--ath-color-focus); }
.ath-page .ask { margin: 1.5rem 0 0.4rem; color: var(--ath-color-link); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.prompt { font-size: 1.2rem; line-height: 1.55; }
.prompt.is-term { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.ath-page .prompt p, .ath-page .answer p, .ath-page .example p { margin-block: 0 0.6rem; }
.prompt ul, .answer ul, .answer ol, .example ul { margin-block: 0.25rem 0.75rem; padding-left: 1.4rem; }
.answer li { margin-block: 0.4rem; }
.answer li::marker { color: var(--ath-color-link); }
.typed, .write { margin-top: 1.25rem; }
.typed div { display: flex; gap: 0.6rem; }
.typed input { flex: 1; min-width: 0; }
.btn { flex: none; white-space: nowrap; }
#reveal-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
.back:focus { outline: none; }
.back { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ath-color-border); }
.answer { font-size: 1.05rem; line-height: 1.65; }
.answer .term { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.answer .aka { color: var(--ath-color-muted); font-size: 0.8125rem; }
.verdict { padding: 0.5rem 0.75rem; border-left: 2px solid var(--ath-color-muted); font-size: 0.875rem; }
.verdict.is-right { border-color: var(--srs-good); }
.verdict.is-wrong { border-color: var(--srs-forgot); }
.yours, .example { margin-top: 1.1rem; padding: 0.8rem 1rem; border-left: 2px solid var(--ath-color-border); color: #ccd3cc; font-size: 0.9375rem; line-height: 1.6; }
.yours p { margin: 0; white-space: pre-wrap; }
.ath-page .sources { margin: 1.1rem 0 0; color: var(--ath-color-muted); font-size: 0.6875rem; }
.answer li.part { list-style: none; position: relative; margin-left: -1.4rem; padding: 0.3rem 0.5rem 0.3rem 2rem; border-radius: var(--srs-radius); cursor: pointer; }
.answer li.part::before { content: ''; position: absolute; left: 0.45rem; top: 0.62rem; width: 0.95rem; height: 0.95rem; border: 1px solid var(--ath-color-muted); border-radius: 3px; }
.answer li.part[aria-checked="true"]::before { border-color: var(--srs-good); background: var(--srs-good) linear-gradient(135deg, transparent 0 100%); box-shadow: inset 0 0 0 2px var(--ath-color-surface); }
.answer li.part:hover { background: var(--ath-color-canvas); }
.grades { position: sticky; bottom: 0; margin-top: 1rem; padding-block: 0.75rem; background: var(--ath-color-canvas); }
.grades .help { margin: 0 0 0.5rem; }
.grade-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }
.grade { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.65rem 0.25rem; border: 1px solid var(--grade); border-radius: var(--srs-radius); background: transparent; color: var(--grade); font: inherit; cursor: pointer; }
.grade:hover:not(:disabled), .grade.suggested { background: var(--grade); color: var(--ath-color-canvas); }
.grade:disabled { opacity: 0.5; cursor: default; }
.grade kbd { position: absolute; margin: 0; border: 0; top: 0.15rem; right: 0.35rem; }
.grade { position: relative; }
.grade-name { font-size: 0.9375rem; font-weight: 700; }
.grade-when { font-size: 0.6875rem; opacity: 0.85; }
.grade-forgot { --grade: var(--srs-forgot); }
.grade-hard { --grade: var(--srs-hard); }
.grade-good { --grade: var(--srs-good); }
.grade-easy { --grade: var(--srs-easy); }
.tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.75rem; }
.tool { padding: 0.4rem 0; border: 0; background: none; color: var(--ath-color-muted); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.tool:hover:not(:disabled) { color: var(--ath-color-link); }
.tool:disabled { opacity: 0.4; cursor: default; }
.tool[aria-pressed="true"] { color: var(--ath-color-focus); }
.done { padding-top: 1rem; }
dialog { width: min(100% - 2rem, 32rem); padding: 1.25rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); background: var(--ath-color-surface); color: var(--ath-color-text); }
dialog::backdrop { background: rgba(8, 11, 12, 0.7); }

/* Card list */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0 1rem; margin-bottom: 0.5rem; }
.filters .field { flex: 1 1 11rem; }
.filters .grow { flex: 2 1 16rem; }
.filters .btn { margin-bottom: 1rem; }
.card-list { border-bottom: 1px solid var(--ath-color-border); }
.card-row { border-top: 1px solid var(--ath-color-border); }
.card-row summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.85rem 0.25rem; cursor: pointer; list-style: none; }
.card-row summary::-webkit-details-marker { display: none; }
.card-row summary:hover, .card-row[open] summary { background: var(--ath-color-surface); }
.ath-page .card-front p { margin: 0; font-weight: 700; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.card-body { padding: 0.5rem 0.25rem 1.5rem; max-width: 44rem; }
.chip.stage-learning, .chip.stage-proficient, .chip.stage-mastered { border-color: var(--srs-ramp-3); color: var(--ath-color-text); }
.card-tags { align-items: center; }

/* Charts: thin marks, a 2px surface gap between fills, hairline rules. */
.chart { margin-top: 2.75rem; }
.inference { max-width: 44rem; }
.stat { white-space: nowrap; color: var(--ath-color-text); }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0; margin: 0.5rem 0 1rem; list-style: none; color: var(--ath-color-muted); font-size: 0.75rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.swatch { width: 0.75rem; height: 0.75rem; border-radius: 2px; }
.stage-new { background: var(--srs-track); }
.stage-learning { background: var(--srs-ramp-2); }
.stage-proficient { background: var(--srs-ramp-3); }
.stage-mastered { background: var(--srs-ramp-5); }
.chip.stage-new, .chip.stage-learning, .chip.stage-proficient, .chip.stage-mastered { background: none; }
.unit-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(6rem, 1fr) 3.5rem; align-items: center; gap: 0.25rem 1rem; padding-block: 0.45rem; }
.ath-page .unit-row p { margin: 0; font-size: 0.8125rem; }
.unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-recall { text-align: right; font-variant-numeric: tabular-nums; }
.stackbar { display: flex; gap: 2px; height: 14px; }
.segment { min-width: 3px; border-radius: 2px; outline-offset: 2px; }
.segment:hover, .segment:focus-visible { filter: brightness(1.25); }
.heat { display: flex; gap: 3px; margin-top: 1rem; overflow-x: auto; padding-bottom: 0.25rem; }
.heat-week { display: grid; gap: 3px; }
.heat-day { display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--srs-track); outline-offset: 1px; }
.heat-future { background: none; }
.heat-day.level-1 { background: var(--srs-ramp-1); }
.heat-day.level-2 { background: var(--srs-ramp-3); }
.heat-day.level-3 { background: var(--srs-ramp-4); }
.heat-day.level-4 { background: var(--srs-ramp-5); }
.heat-scale { display: flex; align-items: center; gap: 3px; margin-top: 0.6rem; }
.heat-scale .heat-day:first-of-type { margin-left: 0.4rem; }
.heat-scale .heat-day:last-of-type { margin-right: 0.4rem; }
.table-view { margin-top: 1rem; font-size: 0.8125rem; }
.table-view summary { color: var(--ath-color-muted); cursor: pointer; }
.table-view table { margin-top: 0.5rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { padding: 0.35rem 1rem 0.35rem 0; border-bottom: 1px solid var(--ath-color-border); text-align: left; }
.table-view th { color: var(--ath-color-muted); font-weight: 400; }
.tip { position: absolute; z-index: 3; padding: 0.3rem 0.6rem; border: 1px solid var(--ath-color-border); border-radius: var(--srs-radius); background: var(--ath-color-canvas); color: var(--ath-color-text); font-size: 0.75rem; pointer-events: none; white-space: nowrap; }

@media (max-width: 640px) {
  .ath-page { padding-block: 1.5rem 3rem; }
  .ath-header nav { gap: 0.25rem 1.25rem; }
  .flashcard { padding: 1rem; }
  .unit-row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .unit-row .stackbar { grid-column: 1 / -1; grid-row: 2; }
  .grade-name { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { #progress-fill { transition: none; } }
@media print { .grades, .tools, .session-bar, .progress { display: none; } }