/* Hallmark · shape: app screen · genre: editorial · theme: Garden (deal 1/3, seed calm-offline-reading-aid-7649·57299035·2026-10-29·r0) · redesign: full
 * nav: kept, a top bar with the wordmark and one settings toggle · signature: the shaded passage, each sentence tinted by its grade at reading size, with the grade figures in a rail beside it · states: empty (no passage yet), full, speech unavailable note
 * axes: light/roman-serif/chromatic-green · posture: committed · surface: absolute (the high-contrast display mode only) · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, the step order is kept; recomposed the passage form as a split row and moved the grade figures into a rail beside the reader */
/* Hallmark · faces: Vollkorn and Hanken Grotesk are not loaded because the app promises zero network requests; Georgia carries the heads and the reader keeps the dyslexia-friendly Verdana default the settings switch */
/* Hallmark · waive 7b · surface: absolute is declared, and only body.contrast paints pure black and white · a reader who ticks High contrast is asking for pure black on white, so tinting it would undo the setting */
@import url("./tokens.css");
@import url("./base.css");

html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); line-height: 1.55; font-variant-numeric: lining-nums; }

.skip { position: absolute; left: var(--space-xs); top: var(--space-xs); z-index: var(--z-toast); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card); transform: translateY(-200%); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* The results heading takes focus only so screen readers land on it; it is not a control. */
#resHead:focus { outline: none; }

/* The top bar */
.top { border-bottom: var(--rule-hair) solid var(--color-rule); }
.top-row { display: flex; gap: var(--space-md) var(--space-lg); align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: var(--space-md); }
.brand { min-width: 0; }
h1 { font-size: var(--text-display); color: var(--color-ink); max-width: none; }
.tag { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 75ch; }
h2 { font-size: var(--text-section); color: var(--color-ink); line-height: 1.15; }

/* Display settings: a paper well under the bar */
.settings { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-md) var(--space-lg); padding-block: var(--space-lg); align-items: end; }
.settings label { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.settings label.check { flex-direction: row; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-md); color: var(--color-ink); }
output { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* Fields */
input[type="range"] { width: 100%; accent-color: var(--color-accent); min-height: 32px; margin: 0; }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); flex-shrink: 0; }
select, textarea { color: var(--color-ink); background: var(--color-surface); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); padding: var(--space-xs) var(--space-sm); }
select { min-height: 44px; max-width: 100%; }
textarea { display: block; width: 100%; font-size: var(--text-md); line-height: 1.6; resize: vertical; }
select:hover, textarea:hover { border-color: var(--color-ink-2); }
select:focus-visible, textarea:focus-visible { outline-offset: -1px; }
select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
::placeholder { color: var(--color-muted); opacity: 1; }

/* Buttons: one flat leaf-green pill beside a hairline pill */
.btn { font-size: var(--text-md); font-weight: 400; min-height: 44px; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); cursor: pointer; border: 2px solid var(--color-rule-2); background: transparent; color: var(--color-ink); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.ghost:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.btn.primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: 40px; padding: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.btn:disabled, .btn:disabled:hover { opacity: 0.55; cursor: not-allowed; transform: none; background: transparent; border-color: var(--color-rule-2); }
.btn.primary:disabled { background: var(--color-accent); border-color: var(--color-accent); }
body.contrast .btn.ghost { border-color: var(--color-ink); }

.row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-block: var(--space-sm); }
.block { display: block; margin-bottom: var(--space-xs); }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-lg); }
.field select { width: 100%; }

/* 1. The passage form: the head and sample on the left, the paste box on the right */
.compose { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl); align-items: start; }
.compose-main { min-width: 0; }

/* 2. The reader: grade figures in a rail beside the shaded passage */
.results { border-top: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-xl); }
.results > h2 { margin-bottom: var(--space-lg); }
.results-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); grid-template-areas: "main rail"; gap: var(--space-xl); align-items: start; }
.results-main { grid-area: main; min-width: 0; }
.summary { grid-area: rail; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); position: sticky; top: var(--space-md); }
.stat { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); min-width: 0; }
.stat b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.stat.key { grid-column: span 2; border-top-color: var(--color-ink-2); }
.stat.key b { font-size: var(--text-3xl); }
.stat span { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.35; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); margin-bottom: var(--space-md); }
.tabs [role="tab"] { flex-shrink: 0; font-size: var(--text-md); background: transparent; color: var(--color-ink-2); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: var(--space-xs) var(--space-sm); min-height: 44px; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.tabs [role="tab"]:hover { color: var(--color-ink); border-bottom-color: var(--color-rule-2); }
.tabs [role="tab"]:active { background: var(--color-paper-2); }
.tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--color-ink); font-weight: 700; border-bottom-color: var(--color-accent); }
body.contrast .tabs [role="tab"][aria-selected="true"] { text-decoration: underline; }

.speech { display: flex; gap: var(--space-sm) var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-card); }
.speech label { display: flex; align-items: center; gap: var(--space-xs); }
.speech input[type="range"] { width: 9rem; }

[role="tabpanel"]:focus-visible { outline-offset: var(--space-xs); }
.legend { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); max-width: 68ch; }
.sw { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; border: var(--rule-hair) solid var(--color-rule-2); border-radius: 3px; margin-left: var(--space-2xs); }
.sw.easy { background: var(--color-paper); }
.sw.mid { background: var(--color-level-mid); }
.sw.hard { background: var(--color-level-hard); border-bottom: 3px solid var(--color-level-hard-line); }
.gl-sample { color: var(--color-ink-2); text-decoration: underline dotted 2px; text-underline-offset: 4px; }

.reader { font-size: var(--fs); letter-spacing: var(--ls); word-spacing: var(--ws); line-height: var(--lh); max-width: 68ch; color: var(--color-ink); }
.reader p { max-width: none; margin: 0 0 0.9em; }
.sent { border-radius: 3px; padding: 0.08em 0.1em; transition: opacity var(--dur-micro) var(--ease-out); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sent.mid { background: var(--color-level-mid); }
.sent.hard { background: var(--color-level-hard); border-bottom: 3px solid var(--color-level-hard-line); }
#reader .sent.now { outline: 2px solid var(--color-accent); background: var(--color-sent-now); }
body.ruler .reader.ruled .sent:not(.now) { opacity: 0.35; }
.w.speaking { background: var(--color-speak); border-radius: 3px; }
.gl { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; text-decoration: underline dotted 2px; text-underline-offset: 4px; line-height: inherit; }
.gl:hover { text-decoration-style: solid; text-decoration-color: var(--color-accent); }
.gl:active { background: var(--color-sent-now); }
mark.swap { background: var(--color-swap); color: inherit; border-radius: 3px; padding: 0 0.1em; }

.focus-box { background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-lg); min-height: 10rem; margin-block: var(--space-md); }
.focus-meta { margin-bottom: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.focus-sentence { font-size: calc(var(--fs) * 1.2); }
.focus-hint { margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-ink-2); max-width: 68ch; }

.hints { padding-left: 1.4em; margin: var(--space-md) 0 0; max-width: 72ch; }
.hints > li { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.hints .orig { font-size: var(--text-md); max-width: none; }
.hints ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; color: var(--color-ink-2); }
.hints ul li + li { margin-top: var(--space-2xs); }
.grade { display: inline-block; font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-xs); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); margin-right: var(--space-xs); font-variant-numeric: tabular-nums; }

/* The glossary card */
.pop { position: absolute; z-index: var(--z-dropdown); max-width: min(22rem, calc(100% - 32px)); background: var(--color-surface); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); box-shadow: 0 6px 20px var(--color-shadow); }
.pop-word { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); margin-bottom: var(--space-2xs); }
.pop-def { margin-bottom: var(--space-xs); font-size: var(--text-md); line-height: 1.55; }
.pop .row { margin-bottom: 0; }

/* How the score works, set as a note beside its head */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-sm) var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.about p { max-width: 65ch; color: var(--color-ink-2); }
.foot { color: var(--color-muted); font-size: var(--text-sm); padding-block: var(--space-lg) var(--space-xl); }
.foot p { max-width: 75ch; }

@media (max-width: 60rem) {
  .results-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "main"; gap: var(--space-lg); }
  .summary { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat.key { grid-column: auto; }
  .stat.key b { font-size: var(--text-2xl); }
}
@media (max-width: 48rem) {
  .compose, .about { grid-template-columns: minmax(0, 1fr); }
  .compose { padding-block: var(--space-lg); }
}
@media (max-width: 32.5rem) {
  h1 { font-size: var(--text-xl); }
  .speech input[type="range"] { width: 7rem; }
  .pop { position: fixed; left: 16px !important; right: 16px; bottom: 16px; top: auto !important; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .btn, .tabs [role="tab"], .sent { transition: none; } .btn:active { transform: none; } }