/* Hallmark · shape: app screen · genre: playful · theme: Hum (deal 1/3, seed duolingo-style-daily-trivia-streak-dd01·f54f88fb·2026-10-24·r0)
 * nav: top bar, wordmark left, three text links, streak count right · signature: the week of card-stock day tiles under a display-size streak figure · states: first run, done today, at risk, freeze used, streak lost, round idle, answer chosen, checked right, checked wrong, quit confirm, empty league, empty stats
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a quiz app is a familiar category; the argument is that the streak is the product, so the streak figure owns the first screen and categories sit below it */
/* Hallmark · waive 39b · button.cat is a 112px topic tile, not a toolbar control · tapping a large card-stock tile starts a practice round, the picker pattern players know from learning apps; every other control is 40 to 54px */
/* Hallmark · answered: F4, the results screen sits on the pear field, so its primary is ink card stock instead of pear; still one primary on that screen */
/* Hallmark · answered: F7, pills sit on controls (nav links, tabs) plus the progress track and the loading toast, which read as one rounded strip in Hum */
/* Hallmark · answered: F7, every text input shares one recipe on purpose: forms across the app and admin read as one system */
/* Hallmark · answered: torn edges are clip-path polygons drawn by app.js; without script the bar and verdict keep a clean rounded edge */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Chillax"; src: url("fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --container-app: 1120px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --color-right: var(--color-mint);
  --color-right-ink: var(--color-ink);
  --color-wrong: oklch(86% 0.07 22);
  --color-wrong-edge: oklch(70% 0.2 22);
  --color-wrong-ink: oklch(32% 0.09 22);
  --color-right-edge: var(--color-mint-deep);
  --bar-h: 64px;
}

html { background: var(--color-paper); }
body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0625rem; min-height: 100dvh; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* top bar */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--grain), var(--fibre), var(--color-paper-2); filter: var(--shadow-paper); padding-top: env(safe-area-inset-top, 0px); }
.bar__in { max-width: var(--container-app); margin-inline: auto; min-height: var(--bar-h); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: var(--space-lg); }
.wordmark { font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.nav { display: flex; gap: var(--space-2xs); margin-inline-start: var(--space-md); }
.nav a { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink-2); transition: background-color var(--dur-short) var(--ease-out); }
.nav a:hover { background: var(--color-paper-3); }
.nav a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.bar__streak { margin-inline-start: auto; font-weight: 600; white-space: nowrap; }
.bar__streak .num { font-size: var(--text-lg); }

.shell { max-width: var(--container-app); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); padding-block: var(--space-xl) var(--space-3xl); }
.view { display: grid; gap: var(--space-xl); }

/* buttons: card stock */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 54px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-card); color: var(--color-ink); font-weight: 600; font-size: var(--text-md); white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), opacity var(--dur-micro) var(--ease-snap); }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; --edge: 5px; translate: 0 0; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule); --edge: 0px; }
.btn--quiet:hover { background: var(--color-paper-2); --edge: 0px; translate: 0 0; }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* first-run name form */
.hello { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-sugar); }
.hello label { font-weight: 600; }
.hello__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hello input { flex: 1 1 10rem; min-width: 0; min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-card); color: var(--color-ink); font-size: var(--text-md); }
.hello input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.hello__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }

/* today */
.today { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.sheet { position: relative; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); filter: var(--shadow-paper); }
.streak { padding: var(--space-xl); display: grid; gap: var(--space-md); }
.streak__greet { color: var(--color-muted); }
.streak__figure { font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-sm); max-width: none; font-size: clamp(4.5rem, 9vw, 7rem); line-height: 0.9; }
.streak__unit { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.streak__state { font-size: var(--text-lg); max-width: 34ch; }
.streak[data-state="risk"] .streak__state mark, .streak__state mark { background: color-mix(in oklab, var(--color-accent) 60%, transparent); color: inherit; padding-inline: var(--space-3xs); border-radius: 4px; box-decoration-break: clone; }

.week { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.week li { display: grid; gap: var(--space-2xs); justify-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.day { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: var(--radius-input); display: grid; place-items: center; font-weight: 600; font-size: var(--text-md); background: var(--color-paper-2); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-rule); }
.day--done { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 4px 0 0 var(--color-accent-deep); }
.day--frozen { background: var(--grain), var(--fibre), var(--color-sugar); color: var(--color-accent-2); box-shadow: 0 4px 0 0 color-mix(in oklab, var(--color-accent-2) 40%, var(--color-sugar)); }
.day--today { background: var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.day--future { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule); }
.week li.is-today { color: var(--color-ink); font-weight: 600; }

.streak__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-sm); }
.streak__meta { color: var(--color-muted); font-size: var(--text-sm); }

.standing { display: grid; gap: var(--space-sm); padding-top: var(--space-sm); }
.standing__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.standing__head a, .page-head a { color: var(--color-accent-2); }
.note { font-size: var(--text-sm); color: var(--color-muted); }

/* tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table th { text-align: left; font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.is-you td { background: color-mix(in oklab, var(--color-accent) 45%, transparent); font-weight: 600; }
.table tr.is-you td:first-child { border-radius: var(--radius-input) 0 0 var(--radius-input); padding-left: var(--space-sm); }
.table tr.is-you td:last-child { border-radius: 0 var(--radius-input) var(--radius-input) 0; padding-right: var(--space-sm); }
.table--compact td { padding-block: var(--space-xs); }
.zone { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.zone--up { color: var(--color-mint-deep); font-weight: 600; }
.zone--down { color: var(--color-wrong-ink); font-weight: 600; }
.table tr.cut td { border-bottom: 2px solid var(--color-ink); }

/* practice */
.practice { display: grid; gap: var(--space-md); }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.cat { --edge: 5px; display: grid; gap: var(--space-3xs); align-content: end; min-height: 112px; padding: var(--space-md); border: 0; border-radius: var(--radius-stock); text-align: left; cursor: pointer; color: var(--color-ink); background: var(--grain), var(--fibre), var(--tone); box-shadow: 0 var(--edge) 0 0 color-mix(in oklab, var(--tone) 70%, var(--color-ink)); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.cat:hover { --edge: 7px; translate: 0 -2px; }
.cat:active { --edge: 1px; translate: 0 4px; }
.cat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cat__name { font-weight: 600; font-size: var(--text-lg); }
.cat__n { font-size: var(--text-sm); color: var(--color-ink-2); }
.tone-accent { --tone: var(--color-accent); }
.tone-mint { --tone: var(--color-mint); }
.tone-coral { --tone: var(--color-wrong); }
.tone-sugar { --tone: var(--color-sugar); }
.tone-sand { --tone: var(--color-sand); }

/* round */
.view--round { max-width: 720px; margin-inline: auto; width: 100%; gap: var(--space-xl); padding-bottom: 280px; }
.round__top { display: flex; align-items: center; gap: var(--space-md); }
.progress { flex: 1; height: 14px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--grain), var(--color-mint-deep); transform-origin: left center; transform: scaleX(0); transition: transform var(--dur-long) var(--ease-out); }
.round__count { white-space: nowrap; color: var(--color-muted); }
.round__body { display: grid; gap: var(--space-md); }
.round__cat { color: var(--color-muted); }
.round__q:focus { outline: none; }
.round__q { font-size: clamp(1.6rem, 3.4vw, 2.2rem); max-width: 26ch; line-height: 1.12; }
.opts { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.opt { --edge: 4px; display: flex; align-items: center; gap: var(--space-md); min-height: 64px; width: 100%; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-stock); text-align: left; font-size: var(--text-lg); color: var(--color-ink); cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 2px var(--color-rule), 0 var(--edge) 0 0 var(--color-rule); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background-color var(--dur-micro) var(--ease-snap); }
.opt:hover:not(:disabled) { translate: 0 -1px; --edge: 5px; }
.opt:active:not(:disabled) { translate: 0 3px; --edge: 1px; }
.opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.opt__key { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: var(--text-sm); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-rule); }
.opt__mark { margin-inline-start: auto; font-weight: 600; font-size: var(--text-sm); }
.opt[aria-checked="true"] { background: var(--grain), var(--fibre), var(--color-sugar); box-shadow: inset 0 0 0 2px var(--color-accent-2), 0 var(--edge) 0 0 var(--color-accent-2); }
.opt[aria-checked="true"] .opt__key { background: var(--color-accent-2); color: var(--color-card); box-shadow: none; }
.opt.is-right { background: var(--grain), var(--fibre), var(--color-right); box-shadow: inset 0 0 0 2px var(--color-right-edge), 0 4px 0 0 var(--color-right-edge); color: var(--color-right-ink); }
.opt.is-wrong { background: var(--grain), var(--fibre), var(--color-wrong); box-shadow: inset 0 0 0 2px var(--color-wrong-edge), 0 4px 0 0 var(--color-wrong-edge); color: var(--color-wrong-ink); }
.opt:disabled { cursor: default; }
.opt:disabled:not(.is-right):not(.is-wrong) { opacity: 0.55; background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.opt.is-wrong { animation: shake 260ms var(--ease-snap); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.round__combo { min-height: 1lh; font-weight: 600; color: var(--color-mint-deep); }
.round__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.round__hint { color: var(--color-muted); font-size: var(--text-sm); }

.verdict { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); background: var(--grain), var(--fibre), var(--verdict-bg, var(--color-right)); color: var(--verdict-ink, var(--color-ink)); filter: var(--shadow-paper); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(0); transition: transform var(--dur-long) var(--ease-out); }
.verdict.is-wrong { --verdict-bg: var(--color-wrong); --verdict-ink: var(--color-wrong-ink); }
.verdict.is-right { --verdict-bg: var(--color-right); --verdict-ink: var(--color-ink); }
@starting-style { .verdict { transform: translateY(100%); } }
.verdict__in { max-width: 720px; margin-inline: auto; padding: var(--space-xl) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-lg) max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.verdict__text { flex: 1 1 20rem; min-width: 0; display: grid; gap: var(--space-2xs); }
.verdict__title { font-weight: 600; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.verdict__why { max-width: 52ch; }
.verdict__act { display: flex; align-items: center; gap: var(--space-md); }
.verdict__xp { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.verdict .btn--primary { min-width: 160px; }

.confirm { position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); background: var(--grain), var(--fibre), var(--color-paper-2); filter: var(--shadow-paper); padding: var(--space-lg) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.confirm p { font-weight: 600; font-size: var(--text-lg); }
.confirm__row { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }

/* done: figures on the pear field */
.done { padding: var(--space-xl); display: grid; gap: var(--space-md); max-width: 760px; margin-inline: auto; width: 100%; }
.sheet--pear { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); }
.done__lead { font-size: var(--text-lg); }
.done__figure { font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-sm); max-width: none; font-size: clamp(5rem, 13vw, 9rem); line-height: 0.88; }
.done__unit { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.done__note { font-size: var(--text-lg); max-width: 40ch; min-height: 1lh; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-sm) 0 0; }
.figs > div { padding: var(--space-sm) var(--space-md); border-left: 1px solid color-mix(in oklab, var(--color-ink) 25%, transparent); }
.figs > div:first-child { padding-left: 0; border-left: 0; }
.figs dt { font-size: var(--text-sm); }
.figs dd { font-variant-numeric: tabular-nums; margin: 0; font-weight: 600; font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.grid5 { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xs); }
.grid5 li { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm); }
.grid5 .g-right { background: var(--grain), var(--color-mint); box-shadow: 0 3px 0 0 var(--color-mint-deep); }
.grid5 .g-wrong { background: var(--grain), var(--color-wrong); box-shadow: 0 3px 0 0 var(--color-wrong-edge); color: var(--color-wrong-ink); }
.done__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.done .btn--primary { background: var(--grain), var(--fibre), var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--edge) 0 0 color-mix(in oklab, var(--color-ink) 60%, var(--color-accent-deep)); }
.done .btn:not(.btn--primary) { box-shadow: inset 0 0 0 1px var(--color-accent-deep), 0 var(--edge) 0 0 var(--color-accent-deep); }
.done__copied { font-size: var(--text-sm); min-height: 1lh; }

/* page heads, tabs */
.page-head { display: grid; gap: var(--space-2xs); }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.page-head__sub { color: var(--color-muted); }
.tabs { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-3); justify-self: start; }
.tab { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.tab:hover { background: var(--color-paper-2); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* you */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stats > div { padding: var(--space-xs) var(--space-lg); border-left: 1px solid var(--color-rule); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dt { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.stats dd { font-variant-numeric: tabular-nums; margin: 0; font-weight: 600; font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.you { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.you > section { display: grid; gap: var(--space-md); }
.month__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs); }
.month__grid li { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.month__grid .wd { aspect-ratio: auto; }
.month__grid .m-done { background: var(--grain), var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.month__grid .m-frozen { background: var(--grain), var(--color-sugar); color: var(--color-accent-2); font-weight: 600; }
.month__grid .m-missed { box-shadow: inset 0 0 0 1px var(--color-rule); }
.month__grid .m-today { box-shadow: inset 0 0 0 2px var(--color-ink); color: var(--color-ink); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); }
.key { width: 14px; height: 14px; border-radius: 4px; }
.key--done { background: var(--color-accent); }
.key--frozen { background: var(--color-sugar); }
.key--missed { box-shadow: inset 0 0 0 1px var(--color-muted); }

.tools { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); display: grid; gap: var(--space-sm); }
.tools summary { cursor: pointer; font-weight: 600; color: var(--color-accent-2); width: max-content; max-width: 100%; border-radius: 6px; }
.tools summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tools[open] { gap: var(--space-sm); }
.tools > p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.tools__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.tools__clock { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; margin-top: var(--space-xs); }


/* status, errors, nudges */
.busy { position: fixed; top: calc(var(--bar-h) + var(--space-sm) + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.alert { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-wrong); color: var(--color-wrong-ink); }
.alert:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.alert p { font-weight: 600; }
.alert__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.nudge { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--grain), var(--fibre), var(--color-sugar); font-weight: 600; }
.cat:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-paper-2); color: var(--color-muted); translate: 0 0; --edge: 0px; }
.hello input[aria-invalid="true"] { border-color: var(--color-error); }

/* verdict extras: source credit and reporting */
.verdict__source { font-size: var(--text-sm); opacity: 0.8; min-height: 0; }
.verdict__source:empty, .report__done:empty { display: none; }
.report { font-size: var(--text-sm); }
.report summary { cursor: pointer; font-weight: 600; width: max-content; max-width: 100%; border-radius: 6px; }
.report summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.report__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.chip-btn { min-height: 36px; padding: 0 var(--space-sm); border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.chip-btn:hover { background: color-mix(in oklab, var(--color-card) 40%, transparent); }
.chip-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.report__done { margin-top: var(--space-xs); font-weight: 600; }

/* account */
.account { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.account__google { min-height: 44px; }
.account__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.danger { display: grid; gap: var(--space-2xs); justify-items: start; }

/* settings */
.settings { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.reminder { display: grid; gap: var(--space-xs); }
.reminder label { font-weight: 500; }
.reminder__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.reminder input { min-height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-card); color: var(--color-ink); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.reminder input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* torn edges (app.js writes the polygon into --torn) */
[data-torn].is-torn { clip-path: var(--torn); }

@media (max-width: 60rem) {
  .today, .you { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 40rem) {
  :root { --bar-h: 56px; }
  .bar__in { gap: var(--space-sm); }
  .wordmark { font-size: var(--text-md); }
  .nav { margin-inline-start: 0; }
  .nav a { padding: var(--space-xs) var(--space-xs); }
  .streak, .done { padding: var(--space-lg); }
  .figs dd, .stats dd { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
  .round__hint { display: none; }
  .round__foot .btn { width: 100%; }
  .verdict__act { width: 100%; justify-content: space-between; }
  .shell { padding-block: var(--space-lg) var(--space-3xl); }
}
@media (max-width: 26rem) {
  .bar__streak { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opt.is-wrong { animation: none; }
  .verdict { transition: none; }
}

/* privacy and terms */
.legal { max-width: 46rem; display: grid; gap: var(--space-md); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-md); }
.legal p, .legal li { max-width: 65ch; line-height: 1.65; }
.legal ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }
.legal a { color: var(--color-accent-2); }
.legal .updated { color: var(--color-muted); }