/* ═══════════════════════════════════════════════════════════════════
   ኤላም — app screens

   The shell and every screen inside it. Load after base.css.

   One rule shapes the layout: nothing here is a dashboard. There is no
   sidebar of destinations. A slim top bar carries the four tracks, and
   the moment you step into a course, a reading or a session it collapses
   to a back link and the thing's own name while the track's colour takes
   over the page.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════ Shell ═══════════════════ */

/* overflow-x: clip, not hidden: clip does not create a scroll container,
   so the sticky top bar keeps working. Needed because the section blocks
   below bleed to 100vw, which is wider than the page on any browser with
   a classic scrollbar. */
/* On a wide monitor the app is a sheet of cream paper laid on a slightly
   darker mat, rather than cream stretched to 2560px — a reading column
   that wide is unusable, and the mat gives the page an edge to end at. */
body { background: var(--paper); }
.shell {
  min-height: 100vh;
  width: 100%;
  max-width: var(--frame-wide);
  margin-inline: auto;
  background: var(--app);
  overflow-x: clip;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--session-chrome);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  height: 70px;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
}


/* Centred, not shoved against the settings icon. Pushed to the right the
   four Ethiopic names crowd one corner and leave a third of the bar
   empty; centring them puts the brand, the destinations and the settings
   on three even beats. */
.topnav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.topnav__link {
  padding: 9px 14px;
  border-radius: 999px;
  font: 400 14.5px/1.5 var(--et);
  color: var(--ink-4);
  white-space: nowrap;
}
.topnav__link:hover { background: var(--hover); color: var(--ink); }
/* "You are here" is the one place the track's own colour is allowed to
   act as a label, so it gets the deep partner as ink on the pale tint. */
.topnav__link.is-on { background: var(--tint, var(--line-soft)); color: var(--tint-ink, var(--ink)); font-weight: 500; }

.topbar__end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  margin-inline-start: auto;
}

.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
/* An icon button is the smallest target on the site and the one with no
   label, so its hover has to be unmistakable: a filled disc, a ring, and
   full-strength ink. */
.iconbtn:hover,
.iconbtn:focus-visible { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.iconbtn.is-on { background: var(--accent-bg); color: var(--accent); }
.iconbtn svg { width: 20px; height: 20px; }

/* ── The ladder, explained in settings ── */
.panel--ladder { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.panel--ladder p { margin: 0; font: 500 14.5px/1.75 var(--ui); color: var(--ink-3); text-wrap: pretty; }
.panel--ladder p b { color: var(--ink); font-weight: 700; }
.ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  counter-reset: rung;
}
.ladder li {
  flex: 1 1 128px;
  padding: 11px 13px;
  border-radius: var(--r);
  background: var(--rail);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ladder li b { font: 700 12.5px/1.35 var(--ui); color: var(--ink-2); }
.ladder li span { font: 600 12.5px/1.4 var(--ui); color: var(--accent-2); }

/* ── The account chip ──
   Standing evidence that signing in did something. An initial and one
   word: enough to answer "am I signed in, and is my work safe?" without
   spending any of the bar's attention on it. */
.acctchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-3);
  max-width: 190px;
}
.acctchip[hidden] { display: none; }
.acctchip:hover { border-color: var(--line-3); color: var(--ink); }
.acctchip__mark {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font: 800 12px/1 var(--ui);
}
.acctchip__txt {
  font: 700 12px/1.3 var(--ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acctchip[data-state="syncing"] .acctchip__mark { background: var(--ink-4); }
.acctchip[data-state="error"] { border-color: var(--bad-line); color: var(--bad-2); }
.acctchip[data-state="error"] .acctchip__mark { background: var(--bad); }

/* On a phone the bar is already tight; the initial alone still answers
   the question, so the word goes. */
@media (max-width: 560px) {
  .acctchip { padding: 4px; max-width: none; }
  .acctchip__txt { display: none; }
}

/* ── The quiet bar ────────────────────────────────────────────────
   Inside a course, a reading or a result, the destinations disappear and
   the bar says only where you are and how to get back out. */
.topbar--quiet .topnav,
.topbar--quiet .brand__txt { display: none; }

.topbar .brand,
.topbar .brand:hover { color: var(--ink); }
/* Ink, not terracotta. The terracotta is reserved for "you are here" and
   for links; a permanently-accented logo spends it on the one element
   nobody needs directed to. */
.topbar .brand__name { color: var(--ink); }
.topbar .brand__sub { color: var(--ink-4); }

/* [hidden] loses to display:flex, so it has to be restated. Without this
   the back link shows on the home page, where there is nothing to go back
   from. */
.crumb { display: flex; align-items: center; gap: 10px; min-width: 0; margin-inline-end: auto; }
.crumb[hidden] { display: none; }
.crumb__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--hover);
  font: 600 13px/1.3 var(--ui);
  color: var(--ink-2);
  cursor: pointer;
}
.crumb__back:hover { background: var(--sunk); border-color: var(--line-2); color: var(--ink); }
.crumb__here {
  min-width: 0;
  font: 400 15px/1.4 var(--et);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 40px) 80px;
}
.page--narrow { max-width: 46rem; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.section { display: flex; flex-direction: column; gap: 14px; }
.section + .section { margin-top: 34px; }

/* Bottom tabs — phones only, and never on an immersive screen */
.tabbar { display: none; }

/* ── Section blocks ───────────────────────────────────────────────
   These used to bleed to the window edge in bands of colour — sand for
   one section, a pink tint for the next. On the cream page that reads as
   three different pages stacked on top of each other, and the seams land
   in arbitrary places because the bleed is measured against the viewport
   while everything else is measured against the frame.

   They are now pure rhythm: space and an eyebrow. The page is one sheet
   of paper from the top bar to the footer, and the white cards on it are
   the only thing that changes value. */
.block {
  margin-top: 38px;
  padding: 0;
  width: auto;
  background: none;
}
.block__in {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ═══════════════════ Home ═══════════════════
   One column, full width, stacked. The old two-column layout left a hole
   in the bottom-right corner at every size; a single column ending in a
   figures strip has no corner to leave empty. */

/* 42px was a landing-page headline on a working screen. The design set
   puts the greeting at 30px — big enough to own the top of the page,
   small enough that the daily review card under it is still the loudest
   thing there, which is the point of the whole screen. */
.greet { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }
.greet h1 { margin: 0; font: 800 clamp(26px, 3.2vw, 30px)/1.25 var(--ui); letter-spacing: -.025em; color: var(--ink); }
.greet p  { margin: 0; font: 500 14.5px/1.6 var(--ui); color: var(--ink-5); max-width: 48ch; }

.hero {
  border-radius: var(--r-2xl);
  padding: clamp(22px, 3.4vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}
.hero__body { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hero__body h2 { margin: 0; font: 800 clamp(21px, 2.6vw, 27px)/1.25 var(--ui); letter-spacing: -.02em; color: var(--ink); }
.hero__body p  { margin: 0; font: 500 15px/1.65 var(--ui); color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.hero .tag { align-self: flex-start; }
.hero .btn { flex: 0 1 auto; min-width: 0; }
.hero__art { flex: none; width: 92px; height: 92px; color: var(--tint-ink, var(--accent)); }

.hero--first { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.hero--done  { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }

/* The one dark surface on the site. It is the thing you came here to do. */
.hero--due { background: var(--ink-block); box-shadow: var(--sh-dark); }
.hero--due .hero__count { flex: none; font: 400 clamp(46px, 6vw, 64px)/1 var(--et); color: #fff; }
.hero--due .hero__body h2 { color: #fff; }
.hero--due .hero__body p  { color: #a8a099; }
.hero--due .num-alt { color: rgba(255,255,255,.5); }

.resume {
  text-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  width: 100%;
  color: inherit;
  transition: box-shadow .12s var(--ease);
}
.resume:hover { box-shadow: var(--sh-2); color: inherit; }
.resume__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--tint, var(--accent-bg));
  display: grid; place-items: center;
  color: var(--tint-ink, var(--accent));
  font-size: 15px;
}
.resume__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.resume__eyebrow {
  font: 700 11px/1.4 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tint-ink, var(--accent));
}
.resume__title { font: 400 14.5px/1.7 var(--et); color: var(--ink); text-wrap: pretty; }
.resume__go { flex: none; color: var(--ink-5); font-size: 18px; }

/* ── Track cards ──────────────────────────────────────────────────
   A block of the track's colour with its emblem drawn into it. This is
   where the site stops being a list of words. */
.grid { display: grid; gap: 16px; }
/* There are exactly four tracks. 200px lets them sit four across on a
   laptop and two across on a tablet — never three with an orphan alone on
   the next row. */
.grid--tracks  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--courses { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ─── A series: one book, several days ───────────────────────────────
   Drawn as a heading and a rule rather than a box. The days inside are
   still ordinary course cards — boxing them would make the group look
   like a single thing you enter, when what you actually pick is one
   day. The rule is the track's own colour, so a series belongs to its
   ዘርፍ without needing to be labelled twice. */
.series { margin-bottom: 28px; }
.series:last-child { margin-bottom: 0; }
.series__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--tint-ink, var(--line-3));
  margin-bottom: 14px;
}
.series__title {
  margin: 0;
  font: 600 var(--t-lg)/1.5 var(--et);
  color: var(--ink);
}
.series__meta {
  font: 600 var(--t-xs)/1.5 var(--ui);
  color: var(--ink-4);
  letter-spacing: .01em;
}

.tcard {
  position: relative;
  overflow: hidden;
  text-align: start;
  background: var(--tint, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  color: inherit;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.tcard:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); color: inherit; }
/* A watermark, so it has to stay behind the meta line rather than
   underneath it. It was 128px hanging off two edges, which put the
   thickest part of the drawing directly under "1 course · 45 questions". */
.tcard__art {
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  color: var(--tint-ink);
  opacity: .13;
  pointer-events: none;
}
.tcard__title { font: 500 19px/1.55 var(--et); color: var(--ink); text-wrap: pretty; position: relative; }
.tcard .cmeta { position: relative; }
.tcard .mstat { margin-top: auto; position: relative; }

.ccard {
  text-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  border-radius: var(--r-xl);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  color: inherit;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.ccard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); color: inherit; }
.ccard__title { font: 500 19px/1.6 var(--et); color: var(--ink); text-wrap: pretty; }
.ccard__desc  { font: 400 14px/1.8 var(--et); color: var(--ink-2); text-wrap: pretty; }
.cmeta { font: 600 12.5px/1.5 var(--ui); color: var(--ink-3); }
.cmeta .num-alt { color: var(--ink-5); }

/* ── Study plan ───────────────────────────────────────────────────
   A cadence, not a streak. A streak punishes one missed day; three
   sessions a week is something a nine-year-old can actually keep and a
   parent can actually check. */
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}
.plan__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.plan__title { font: 800 18px/1.3 var(--ui); letter-spacing: -.01em; color: var(--ink); }
.plan__line  { font: 500 13.5px/1.6 var(--ui); color: var(--ink-3); text-wrap: pretty; }
.plan__pips { display: flex; gap: 8px; flex: none; }
.plan__pip {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 2px solid var(--line-2);
  display: grid; place-items: center;
  font: 700 11px/1 var(--ui);
  color: var(--ink-5);
}
.plan__pip.is-done { background: var(--good); border-color: var(--good); color: #fff; }

/* ── Figures ──────────────────────────────────────────────────────
   A strip, not a column. Four numbers do not deserve a whole rail. */
.figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.figrow {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.figrow:last-child { border-right: 0; }
.figrow dt { font: 600 12px/1.5 var(--ui); color: var(--ink-3); }
.figrow dd { margin: 0; font: 400 26px/1.2 var(--et); color: var(--ink); }

/* ═══════════════════ Track and course ═══════════════════
   Both open with a band of the track's own colour carrying its emblem,
   so the page says where you are before a word is read. */

.band {
  background: var(--tint, var(--paper));
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3.6vw, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-bottom: 24px;
}
.band__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.band__eyebrow {
  font: 700 11.5px/1.4 var(--ui);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tint-ink, var(--ink-3));
}
.band h1 { margin: 0; font: 600 clamp(25px, 3.4vw, 36px)/1.4 var(--et); color: var(--ink); text-wrap: pretty; }
.band p  { margin: 0; max-width: 60ch; font: 400 15.5px/1.85 var(--et); color: var(--ink-2); text-wrap: pretty; }
.band__art { flex: none; width: clamp(84px, 11vw, 124px); color: var(--tint-ink); }

.runbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.runbar .btn { padding-inline-end: 12px; }

/* The count rides in a chip rather than trailing the label after a
   middot: it is a different kind of thing from the words, and at a
   glance the row should read as four sizes to choose between. */
.btn__n {
  flex: none;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rail);
  color: var(--ink-3);
  font: 800 12px/1.4 var(--ui);
  font-variant-numeric: tabular-nums;
}
.btn--dark .btn__n { background: rgba(255, 255, 255, .16); color: var(--on-dark); }
.btn:hover .btn__n { background: var(--sunk); }
.btn--dark:hover .btn__n { background: rgba(255, 255, 255, .22); }

.runbar__note {
  margin: 0 0 24px;
  font: 400 14px/1.7 var(--ui);
  color: var(--ink-4);
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  /* Four full-width rows beat four cramped ones that wrap mid-label. */
  .runbar { flex-direction: column; gap: 8px; }
  .runbar .btn { width: 100%; justify-content: space-between; }
}

.draftbar {
  background: var(--warn-bg);
  border-radius: 16px;
  padding: 15px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}
.draftbar__icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--warn-line);
  display: grid; place-items: center;
  color: var(--warn-ink);
  font: 700 14px/1 var(--ui);
}
.draftbar p { flex: 1; min-width: 0; margin: 0; font: 500 13.5px/1.65 var(--ui); color: var(--warn-ink); }
.draftbar b { font-weight: 700; }

.mstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 20px;
  background: var(--card);
  box-shadow: var(--sh-1);
  border-radius: var(--r-lg);
  margin-bottom: 22px;
}
.mstrip__label { font: 800 17px/1.3 var(--ui); letter-spacing: -.01em; color: var(--mc, var(--m0)); }
.mstrip__pct   { font: 700 14px/1.4 var(--ui); color: var(--ink-2); }
.mbar { flex: 1 1 160px; height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.mbar > span {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--mc, var(--m0));
  transition: width .4s var(--ease);
}

.urow {
  text-align: start;
  width: 100%;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  color: inherit;
}
.urow:hover { background: var(--tint, var(--hover)); color: inherit; }
.urow__num {
  flex: none;
  min-width: 38px; height: 38px;
  padding: 0 7px;
  display: grid; place-items: center;
  background: var(--paper);
  border-radius: var(--r-sm);
  font: 400 16px/1 var(--et);
  color: var(--ink-2);
}
.urow__num .num-alt { display: none; }
.urow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.urow__title { font: 500 16px/1.7 var(--et); color: var(--ink); text-wrap: pretty; }
.urow__meta  { font: 600 12px/1.5 var(--ui); color: var(--ink-3); }
.urow__meta .num-alt { color: var(--ink-5); }
.urow__side {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.empty {
  background: var(--card);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
  padding: 56px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.empty h2 { margin: 0; font: 800 20px/1.35 var(--ui); letter-spacing: -.01em; color: var(--ink); }
.empty p  { margin: 0 auto; max-width: 46ch; font: 500 14.5px/1.7 var(--ui); color: var(--ink-3); text-wrap: pretty; }

/* ═══════════════════ Reading ═══════════════════
   Read first, then practise. The measure is deliberately narrow and the
   leading deliberately loose — Ethiopic needs more vertical room than
   Latin, and this is the one screen where people read continuously. */

/* Same reasoning as the session: a long stretch of Ethiopic prose reads
   better on the warm off-white than on white. */
.reading {
  max-width: 40rem;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px);
}
.reading__lead { font: 400 19px/1.95 var(--et); color: var(--ink-2); margin: 0 0 28px; text-wrap: pretty; }
.reading h2 { margin: 34px 0 12px; font: 600 22px/1.55 var(--et); color: var(--ink); text-wrap: pretty; }
.reading p  { margin: 0 0 18px; font: 400 17.5px/2 var(--et); color: var(--ink); text-wrap: pretty; }
.reading .note {
  background: var(--tint, var(--line-soft));
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 24px 0;
  font: 400 16px/1.95 var(--et);
  color: var(--ink-2);
}
.reading .note b { color: var(--tint-ink, var(--ink)); font-weight: 600; }
.reading blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--tint-ink, var(--accent));
  font: 400 18px/2 var(--et);
  color: var(--ink);
}
.reading__foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.reading__done { font: 600 13.5px/1.6 var(--ui); color: var(--ink-3); margin-inline-end: auto; }

.rrow {
  text-align: start;
  width: 100%;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  color: inherit;
}
.rrow:hover { background: var(--tint, var(--hover)); color: inherit; }
.rrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rrow__title { font: 500 16px/1.7 var(--et); color: var(--ink); }
.rrow__meta  { font: 600 12px/1.5 var(--ui); color: var(--ink-3); }
.rrow__go { flex: none; color: var(--ink-5); font-size: 18px; }

/* ═══════════════════ Session ═══════════════════ */


/* The one screen you sit on for twenty minutes, so it takes the warm
   off-white rather than the page's white. It also says, without a word,
   that you are inside something rather than browsing. */
.session {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 15;
  display: flex;
  flex-direction: column;
}
.session[hidden] { display: none; }

/* Practice becomes a quiet, warm-paper study stage. Results keep the paper
   shell above, so reflection still feels like part of the library. */
#ov-practice { background: var(--session-bg); }
#ov-practice .session__top,
#ov-practice .session__foot {
  background: var(--session-chrome);
  border-color: var(--session-line);
}
#ov-practice .exitbtn {
  background: var(--session-card);
  border-color: var(--session-card-line);
  color: var(--ink-2);
}
#ov-practice .exitbtn:hover {
  background: var(--session-key);
  border-color: var(--line-2);
  color: var(--session-ink);
}
#ov-practice .session__pos,
#ov-practice .session__pos .num-alt,
#ov-practice .qnum,
#ov-practice .qnum .num-alt,
#ov-practice .hint,
#ov-practice .deferred-note { color: var(--session-muted); }
#ov-practice .pbar { background: var(--session-line); }
#ov-practice .pbar__fill { background: var(--ink-2); }
#ov-practice .session__count[data-mode="deferred"] {
  background: var(--session-key);
  color: var(--session-muted);
}
#ov-practice .qkind { background: var(--warn-bg); color: var(--warn); }
#ov-practice .qstem { color: var(--session-ink); }
/* The session surface repaints resting cards, and only resting ones.
   An id beats the state classes on specificity, so a tile that has been
   paired, marked right or marked wrong has to be excused by name —
   otherwise the practice screen quietly erases every colour the
   exercise just took the trouble to apply. */
#ov-practice .opt:not(.is-right):not(.is-wrong):not(.is-picked),
#ov-practice .mtile--l:not([data-pair]):not(.is-right):not(.is-wrong),
#ov-practice .mtile--r:not([data-pair]):not(.is-right):not(.is-wrong),
#ov-practice .match:not(.is-armed) .match__bank,
#ov-practice .player {
  background: var(--session-card);
  border-color: var(--session-card-line);
  box-shadow: none;
}
/* …and the armed bank keeps its ring here too, for the same reason. */
#ov-practice .match.is-armed .match__bank {
  background: var(--session-card);
  border-color: var(--session-card-line);
}
#ov-practice .opt:hover:not(:disabled) {
  background: var(--session-card);
  border-color: var(--line-2);
  box-shadow: 0 0 0 2px rgba(28, 26, 23, .06);
}
#ov-practice .opt__key { background: var(--session-key); color: var(--ink-5); }
/* Deliberately no background here: the base .opt.is-picked fill applies,
   and restating it was how this state ended up with two owners and one
   of them silently winning. */
#ov-practice .opt.is-picked { border-color: var(--accent); }
#ov-practice .qfig img { border-color: var(--session-card-line); background: var(--session-key); }
#ov-practice .qfig figcaption { color: var(--session-muted); }
#ov-practice .session__foot .btn { background: var(--ink-block); color: var(--on-dark); }
#ov-practice .session__foot .btn:disabled { background: var(--session-disabled); color: var(--session-muted); }
#ov-practice .session__foot .btn:hover:not(:disabled) { background: var(--ink); }

.session__top { border-bottom: 1px solid var(--line); background: var(--session-chrome); }
.session__top-in {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.exitbtn {
  flex: none;
  min-height: 38px;
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 13px/1.3 var(--ui);
  color: var(--ink-2);
  cursor: pointer;
}
.exitbtn:hover { background: var(--hover); border-color: var(--line-2); color: var(--ink); }

.session__meter { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.session__pos { flex: none; font: 700 13px/1.4 var(--ui); color: var(--ink-2); white-space: nowrap; }
.session__pos .num-alt { color: var(--ink-4); }
.pbar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
  display: block;
  min-width: 40px;
}
.pbar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width .25s var(--ease);
  width: 0;
}
.session__count {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 13px;
  font: 400 13px/1.3 var(--et);
  background: var(--good-bg);
  color: var(--good);
  white-space: nowrap;
}
.session__count[data-mode="deferred"] { background: var(--line-soft); color: var(--ink-2); }
.session__count i { font: 700 11px/1 var(--ui); font-style: normal; }
.session__count[data-mode="deferred"] i { display: none; }
.session__count .num-alt { color: inherit; opacity: .65; }

/* A question that fits should not scroll. The footer is a flex sibling
   rather than an overlay, so the scroller only ever holds the question
   itself — the old 140px of bottom padding was reserving room for a bar
   that is not on top of it, and that padding alone was enough to put a
   scrollbar on a four-line true/false. */
.session__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The result screen reuses the page shell, so cap it like the app frame */
.session__scroll > .page { max-width: var(--frame); margin: 0 auto; }
.session__body {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px clamp(16px, 3vw, 32px) 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  /* Centre a short question in the space instead of stranding it under
     the meter with a gulf beneath — but never push a long one up out of
     reach, which is what `justify-content: center` alone would do. */
  min-height: 100%;
  justify-content: center;
}

.qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qkind {
  font: 700 11px/1.4 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 5px 12px;
}
.qnum { font: 600 12px/1.4 var(--ui); color: var(--ink-5); }
.qnum .num-alt { color: var(--ink-6); }

.qstem {
  margin: 0;
  font: 500 27px/1.8 var(--et);
  color: var(--ink);
  text-wrap: pretty;
}
/* Negations — *ያልሆነው* — must not be misread as their opposite */
.qstem .neg {
  font-style: normal;
  color: var(--bad);
  font-weight: 600;
  border-bottom: 2px solid var(--bad-soft);
}

/* ─── Text options ─── */
.options { display: flex; flex-direction: column; gap: 11px; }

.opt {
  position: relative;
  width: 100%;
  text-align: start;
  min-height: 64px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform .1s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}
.opt:hover:not(:disabled) { transform: translateY(-1px); }
.opt:disabled { cursor: default; }

.opt__key {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--app);
  font: 400 13px/1 var(--et);
  color: var(--ink-3);
}
.opt__text { flex: 1; min-width: 0; font: 400 18px/1.75 var(--et); color: var(--ink); text-wrap: pretty; }
.opt__hot  { flex: none; font: 600 11px/1 var(--ui); color: var(--ink-6); }
.opt__mark { flex: none; font: 700 14px/1.6 var(--ui); color: var(--ink-3); min-width: 12px; }

.opt.is-right {
  background: var(--good-fill);
  border: 2px solid var(--good);
  padding: 15px 19px;
}
.opt.is-right .opt__key  { background: #d6e5db; color: var(--good-2); }
.opt.is-right .opt__mark { color: var(--good-2); }

.opt.is-wrong {
  background: var(--bad-fill);
  border: 2px solid var(--bad);
  padding: 15px 19px;
}
.opt.is-wrong .opt__key  { background: #f0d3cc; color: var(--bad-2); }
.opt.is-wrong .opt__mark { color: var(--bad-2); }

.opt.is-muted { opacity: .55; }

/* Chosen but not yet committed. Deliberately a different visual language
   from is-right / is-wrong — this is a pencil mark, so it reads as
   "selected", never as "correct". Colour alone doesn't carry it: the
   border thickens and the key fills in too. */
/* Chosen, not yet marked. With feedback deferred this is the only record
   of the decision until the end of the session, so it says so three ways
   — a fill you can see across a room, a 2px rule, and the word "Chosen"
   rather than a dot somebody has to interpret. */
.opt.is-picked {
  background: var(--pick-bg);
  border: 2px solid var(--accent);
  padding: 15px 19px;
}
.opt.is-picked .opt__key  { background: var(--accent); color: #fff; }
.opt.is-picked .opt__mark {
  color: var(--accent-2);
  font: 700 11px/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.opt.is-picked .opt__mark::after { content: "Chosen"; }

/* ─── True or false ───
   Two targets, side by side on anything wider than a phone, with the
   letter key dropped — ሀ/ለ tells a student nothing when the options are
   እውነት and ሐሰት. The tint is a whisper, not a hint: both sides get one,
   so neither looks like the safe answer. */
.options--tf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.opt[data-side] {
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.opt[data-side] .opt__key { display: none; }
.opt[data-side] .opt__text {
  flex: none;
  font-size: 30px;
  line-height: 1.35;
  text-align: center;
}
/* The keyboard hint used to be `position: absolute` with no offset,
   which put "1" and "2" on top of the words እውነት and ሐሰት. It belongs in
   the corner, quietly, and only where a keyboard exists at all. */
.opt[data-side] .opt__hot {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  font-size: 10.5px;
  color: var(--ink-5);
}
@media (hover: none) and (pointer: coarse) {
  .opt__hot { display: none; }
}
.opt[data-side="true"]  { border-color: var(--good-line); }
.opt[data-side="false"] { border-color: var(--bad-line); }
.opt[data-side].is-picked { border-color: var(--accent); }

/* ─── Picture options ─── */
.options--img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.options--img .opt {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  min-height: 0;
}
.options--img .opt.is-picked,
.options--img .opt.is-right,
.options--img .opt.is-wrong,
.options--img .opt.is-chosen { padding: 11px; }
.options--img .opt__key {
  position: absolute;
  margin: 6px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.opt__img {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
}
.opt__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.options--img .opt__text {
  flex: none;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* ─── A picture belonging to the question ───
   Capped by height rather than width so a tall manuscript page and a wide
   diagram both leave room for the options below without scrolling. */
.qfig {
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.qfig img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
}
.qfig figcaption { font: 400 15px/1.7 var(--et); color: var(--ink-4); }

/* ─── Character options ─── */
.options--glyph {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.opt--glyph {
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-lg);
  padding: 12px;
}
.opt--glyph.is-chosen, .opt--glyph.is-right, .opt--glyph.is-wrong { padding: 11px; }
.opt--glyph .opt__key { display: none; }
.opt--glyph .opt__text { flex: none; font-size: 62px; line-height: 1.2; text-align: center; }
.opt--glyph .opt__mark { min-height: 13px; font-size: 13px; }

/* ─── Matching ───────────────────────────────────────────────────────
   The hard part of a matching question is not making the pair; it is
   seeing, afterwards, which two things you joined. So a completed pair
   is stated three times over — both halves take the same wash, the same
   rule down the side, and the same number — and the left tile repeats
   its partner's words in a chip, so the pairing survives even when the
   bank has scrolled out of sight on a phone. */
.match { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.match__col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.match__bank {
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 380px;
  background: var(--card);
  box-shadow: var(--sh-1);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  transition: box-shadow .2s var(--ease);
}
/* While a left tile is held, the bank is the only place worth tapping.
   The ring is a shadow rather than an outline, because `outline` means
   keyboard focus everywhere else in this app and should keep meaning
   only that. */
.match.is-armed .match__bank { box-shadow: var(--sh-lift), 0 0 0 2px var(--ink); }
.match.is-armed .mtile--r:not(.is-done) { border-color: var(--line-3); background: var(--card); }
.match__hint {
  font: 600 12px/1.6 var(--ui);
  color: var(--ink-3);
  text-wrap: pretty;
  min-height: 2.4em;   /* the line changes as you go; don't let it jump */
}
.match.is-armed .match__hint { color: var(--ink); }
.match__pills { display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start; }
.match__col.is-nudge { animation: nudge .4s var(--ease); }

.mtile {
  position: relative;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.mtile--l {
  width: 100%;
  text-align: start;
  min-height: 62px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-2);
}
.mtile__text { flex: 1; min-width: 0; font: 500 17px/1.75 var(--et); color: var(--ink); }

/* The pair number — the thing that actually says "these two go together".
   A solid disc with a white numeral, not a tinted outline: it has to be
   findable across the gap between the column and the bank at a glance,
   on a cheap phone screen, by someone who cannot separate the colours.
   Empty until a pair is made, so it costs no room on an untouched tile
   and appears exactly when it means something. */
.mtile__no {
  flex: none;
  display: none;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font: 800 14px/1 var(--ui);
  font-variant-numeric: tabular-nums;
  background: var(--ink-4);
  color: #fff;
}
.mtile[data-pair] .mtile__no { display: inline-flex; }

/* The chip on the left tile that repeats the partner's words. */
.mtile__pin {
  flex: none;
  max-width: 100%;
  text-align: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  font: 400 15px/1.6 var(--et);
  color: var(--ink-6);
}
.mtile--l.is-done .mtile__pin { background: var(--card); }

.mtile--l.is-active {
  background: var(--line-soft);
  border-color: var(--ink);
  border-inline-start-color: var(--ink);
  box-shadow: var(--sh-lift);
}
.mtile--l.is-right { background: var(--good-fill); border-color: var(--good); border-inline-start-color: var(--good); }
.mtile--l.is-wrong { background: var(--bad-fill);  border-color: var(--bad);  border-inline-start-color: var(--bad); }

/* What it should have been, said where the mistake is. */
.mtile__fix {
  flex-basis: 100%;
  font: 500 14px/1.7 var(--et);
  color: var(--good-2);
}
.mtile__fix::before {
  content: "→ ";
  font-family: var(--ui);
}

.mtile--r {
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  font: 400 17px/1.6 var(--et);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}
.mtile--r .mtile__pin { display: none; }
.mtile--r .mtile__text { font-size: 17px; font-weight: 400; }
.mtile--r.is-done { border-style: solid; }
.mtile--r.is-right { background: var(--good-fill); border-color: var(--good); color: var(--good-2); }
.mtile--r.is-wrong { background: var(--bad-fill);  border-color: var(--bad); color: var(--bad-2); }

/* ── The six pair washes ──
   One rule per pair rather than six near-identical blocks would be
   nicer, but custom properties cannot be selected on, and this stays
   readable next to the token file it mirrors. */
/* A paired tile is stated loudly: filled wash, a 2px rule all round in
   the pair's ink, a 6px slab down the leading edge, and the numbered
   disc filled in the same ink. The resting palette elsewhere is quiet
   because it is being *read*; this is being *matched*, and a pairing you
   have to hunt for is the same as no pairing at all. */
.mtile[data-pair] {
  border-width: 2px;
  border-style: solid;
}
.mtile--l[data-pair] { border-inline-start-width: 6px; }

.mtile[data-pair="1"] { background: var(--p1); border-color: var(--p1-ink); }
.mtile[data-pair="2"] { background: var(--p2); border-color: var(--p2-ink); }
.mtile[data-pair="3"] { background: var(--p3); border-color: var(--p3-ink); }
.mtile[data-pair="4"] { background: var(--p4); border-color: var(--p4-ink); }
.mtile[data-pair="5"] { background: var(--p5); border-color: var(--p5-ink); }
.mtile[data-pair="6"] { background: var(--p6); border-color: var(--p6-ink); }
.mtile[data-pair="1"] .mtile__no { background: var(--p1-ink); }
.mtile[data-pair="2"] .mtile__no { background: var(--p2-ink); }
.mtile[data-pair="3"] .mtile__no { background: var(--p3-ink); }
.mtile[data-pair="4"] .mtile__no { background: var(--p4-ink); }
.mtile[data-pair="5"] .mtile__no { background: var(--p5-ink); }
.mtile[data-pair="6"] .mtile__no { background: var(--p6-ink); }

/* The chip echoing the partner's words takes the same ink, so the left
   tile alone tells you what it is joined to without looking away. */
.mtile[data-pair="1"] .mtile__pin { border: 1.5px solid var(--p1-ink); color: var(--p1-ink); }
.mtile[data-pair="2"] .mtile__pin { border: 1.5px solid var(--p2-ink); color: var(--p2-ink); }
.mtile[data-pair="3"] .mtile__pin { border: 1.5px solid var(--p3-ink); color: var(--p3-ink); }
.mtile[data-pair="4"] .mtile__pin { border: 1.5px solid var(--p4-ink); color: var(--p4-ink); }
.mtile[data-pair="5"] .mtile__pin { border: 1.5px solid var(--p5-ink); color: var(--p5-ink); }
.mtile[data-pair="6"] .mtile__pin { border: 1.5px solid var(--p6-ink); color: var(--p6-ink); }

/* ─── Listening ─── */
.player {
  background: var(--card);
  box-shadow: var(--sh-1);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.player__btn {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--ink);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
}
.player--empty .player__btn {
  background: var(--line-soft);
  border: 1px dashed var(--line-2);
  color: var(--ink-5);
  cursor: default;
}
.player__note { flex: 1 1 200px; min-width: 0; margin: 0; font: 600 13.5px/1.6 var(--ui); color: var(--ink-2); }
.player--empty .player__note { color: var(--bad); }
.player audio { flex: 1 1 200px; min-width: 0; max-width: 100%; }

/* ─── Feedback ─── */
.fb {
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: fadeUp .18s ease-out;
  background: var(--good-bg);
}
.fb[hidden] { display: none; }
.fb.is-bad { background: var(--bad-bg); }

.fb__head { display: flex; align-items: center; gap: 10px; }
.fb__icon {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  display: grid; place-items: center;
  font: 700 12px/1 var(--ui);
}
.fb.is-bad .fb__icon { background: var(--bad); }
.fb__title { font: 800 17px/1.4 var(--ui); letter-spacing: -.01em; color: var(--good); }
.fb.is-bad .fb__title { color: var(--bad); }

.fb__answer { font: 400 16px/1.8 var(--et); color: var(--ink); text-wrap: pretty; }
.fb__answer .lab {
  font: 700 11px/1.4 var(--ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--good-line);
  margin-inline-end: .5em;
}
.fb.is-bad .fb__answer .lab { color: var(--bad-soft); }

.fb__explain {
  font: 400 14.5px/1.85 var(--et);
  color: var(--ink-2);
  background: rgba(255,255,255,.82);
  border-radius: var(--r);
  padding: 13px 16px;
  text-wrap: pretty;
}
.fb__explain[hidden] { display: none; }

.deferred-note { font: 600 13px/1.7 var(--ui); color: var(--ink-3); }
.deferred-note[hidden] { display: none; }

/* ─── Session footer ─── */
.session__foot { border-top: 1px solid var(--line); background: var(--rail); }
.session__foot-in {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.hint { flex: 1; font: 600 12.5px/1.5 var(--ui); color: var(--ink-4); }
.session__foot .btn {
  flex: none;
  min-height: 52px;
  padding: 0 34px;
  border: none;
  border-radius: 15px;
  font: 700 16px/1.4 var(--ui);
  background: var(--ink);
  color: #fff;
}
.session__foot .btn:disabled { background: var(--sunk); color: var(--ink-4); }
.session__foot .btn:hover:not(:disabled) { background: #2b2823; }

/* ═══════════════════ Results ═══════════════════ */


.res-hero {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  animation: pop .22s ease-out;
  box-shadow: var(--sh-2);
}
.res-hero__pct { flex: none; font: 400 62px/1 var(--et); color: var(--good); }
.res-hero.is-low .res-hero__pct { color: var(--bad); }
.res-hero__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.res-hero__raw     { font: 600 13px/1.5 var(--ui); color: var(--ink-3); }
.res-hero__verdict { margin: 0; font: 800 22px/1.35 var(--ui); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.res-hero__best    { font: 700 12.5px/1.6 var(--ui); color: var(--warn); }
.res-hero__best[hidden] { display: none; }

/* Results actions sit in a row under the score, not in a rail */
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.res-actions .btn { flex: 0 1 auto; }
.res-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 30px; }

.rev {
  background: var(--card);
  border: 1px solid var(--bad-line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rev__head {
  font: 700 11px/1.4 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bad);
}
.rev__q { font: 500 17px/1.8 var(--et); color: var(--ink); text-wrap: pretty; }
.rev__q .neg { font-style: normal; color: var(--bad); font-weight: 600; }
.rev__lines { display: flex; gap: 28px; flex-wrap: wrap; }
.rev__line { font: 400 14.5px/1.75 var(--et); }
.rev__line span {
  font: 700 11px/1.4 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-inline-end: .5em;
}
.rev__line--yours { color: var(--bad); }
.rev__line--yours span { color: var(--bad-soft); }
.rev__line--right { color: var(--good); }
.rev__line--right span { color: var(--good-line); }
.rev__explain {
  font: 400 14px/1.85 var(--et);
  color: var(--ink-2);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  text-wrap: pretty;
}

.rev--ok {
  background: var(--card);
  box-shadow: var(--sh-1);
  border-radius: var(--r);
  padding: 13px 16px;
  display: flex;
  gap: 11px;
  align-items: center;
}
.rev--ok .tick {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--good-bg);
  color: var(--good);
  display: grid; place-items: center;
  font-size: 11px;
}
.rev--ok .rev__q { flex: 1; min-width: 0; font: 400 14px/1.75 var(--et); color: var(--ink-2); }

.move {
  background: var(--card);
  box-shadow: var(--sh-1);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.move__title { font: 500 14px/1.7 var(--et); color: var(--ink); text-wrap: pretty; }
.move__row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.move__was  { color: var(--ink-5); }
.move__arrow { color: var(--ink-5); font-size: 13px; }
.move__now  { animation: pop .32s ease-out both; }
.move__line {
  font: 700 12px/1.5 var(--ui);
  color: var(--mc, var(--m0));
  animation: fadeUp .32s ease-out both;
}

.nextdue {
  margin: 0;
  background: var(--good-bg);
  border-radius: 16px;
  padding: 14px 16px;
  font: 600 13px/1.65 var(--ui);
  color: var(--good);
  text-wrap: pretty;
}
.nextdue[hidden] { display: none; }

.brow {
  padding: 13px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.brow__name  { flex: 1; min-width: 0; font: 400 13.5px/1.7 var(--et); color: var(--ink); text-wrap: pretty; }
.brow__score { flex: none; font: 400 13.5px/1.5 var(--et); color: var(--ink-2); }
.brow[data-band="hi"]  .brow__score { color: var(--good); }
.brow[data-band="mid"] .brow__score { color: var(--warn); }
.brow[data-band="lo"]  .brow__score { color: var(--bad); }

/* ═══════════════════ Settings ═══════════════════ */


.page--settings { max-width: 640px; display: flex; flex-direction: column; gap: 26px; }
.page--settings h1 { margin: 0; font: 800 28px/1.3 var(--ui); letter-spacing: -.025em; color: var(--ink); }
.setblock { display: flex; flex-direction: column; gap: 10px; }

.radio-row {
  text-align: start;
  width: 100%;
  min-height: 58px;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: center;
  cursor: pointer;
}
.radio-row.is-on { background: var(--app); }
.radio-row__dot {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid var(--line-2);
  background: transparent;
}
.radio-row.is-on .radio-row__dot {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: inset 0 0 0 3px #fff;
}
.radio-row__label  { flex: 1; min-width: 0; font: 600 15px/1.5 var(--ui); color: var(--ink); }
.radio-row__sample { flex: none; font: 400 15px/1.5 var(--et); color: var(--ink-3); }

.switch-row {
  text-align: start;
  width: 100%;
  min-height: 68px;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
}
.switch-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.switch-row__label { font: 600 15px/1.5 var(--ui); color: var(--ink); }
.switch-row__hint  { font: 500 12.5px/1.6 var(--ui); color: var(--ink-3); text-wrap: pretty; }
.switchel {
  flex: none;
  width: 52px; height: 31px;
  border-radius: 999px;
  background: var(--line-2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px;
  transition: background .18s var(--ease);
}
.switch-row.is-on .switchel { background: var(--ink); justify-content: flex-end; }
.switchel > span {
  width: 25px; height: 25px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22,24,29,.32);
}
.setnote { margin: 0; max-width: 56ch; font: 500 13px/1.7 var(--ui); color: var(--ink-3); text-wrap: pretty; }

.panel--account { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-email  { font: 700 15px/1.4 var(--ui); color: var(--ink); word-break: break-all; }
.acct-status { margin-top: 2px; font: 600 12.5px/1.6 var(--ui); color: var(--ink-3); }
.acct-status[data-state="synced"]  { color: var(--good); }
.acct-status[data-state="error"]   { color: var(--bad); }
.acct-status[data-state="syncing"] { color: var(--warn); }

/* ─── Continue with Google ───
   Google's own guidance: white surface, thin grey border, their mark at
   full colour, and nothing decorative added to it. It is now the only
   way in, so it is also the only button in this panel. */
.gbtn {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 14px 20px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  font: 700 15.5px/1.4 var(--ui);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), transform .12s var(--ease);
}
.gbtn:hover:not(:disabled) { border-color: var(--line-3); box-shadow: var(--sh-lift); transform: translateY(-1px); }
.gbtn:disabled { opacity: .6; cursor: default; }
.gbtn__mark { display: grid; place-items: center; flex: none; }

.setnote--tight { margin-top: -4px; }

#acct-msg:empty { display: none; }
#acct-msg[data-bad="true"] { color: var(--bad); }

/* ═══════════════════ Dialog ═══════════════════ */


.dialog {
  position: fixed;
  inset: 0;
  background: rgba(28,26,23,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 24px;
}
.dialog[hidden] { display: none; }
.dialog__card {
  width: 100%;
  max-width: 430px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeUp .18s ease-out;
  box-shadow: var(--sh-dialog);
}
.dialog__card h2 { margin: 0; font: 800 21px/1.35 var(--ui); letter-spacing: -.02em; color: var(--ink); }
.dialog__card p  { margin: 0 0 6px; font: 500 14.5px/1.65 var(--ui); color: var(--ink-2); text-wrap: pretty; }
.dialog__acts { display: flex; gap: 10px; justify-content: flex-end; }
.dialog__acts .btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
.dialog__cancel  { background: var(--app); color: var(--ink-2); border: none; font-weight: 600; }
.dialog__cancel:hover { background: var(--line-soft); }
.dialog__confirm { background: var(--bad); color: #fff; border: none; padding: 0 22px; }
.dialog__confirm:hover { background: var(--bad-2); }

/* ═══════════════════ Phones ═══════════════════
   The rail becomes a bottom tab bar. Everything else stacks. */

@media (max-width: 900px) {
  body { background: var(--app); }

  /* The top bar keeps the brand and settings; destinations move to the
     bottom, where a thumb can reach them. */
  .topnav { display: none; }
  .topbar__in { height: 58px; }

  .page { padding: 20px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .band { padding: 22px; border-radius: var(--r-xl); }
  .band__art { width: 72px; }

  .greet h1 { font-size: 27px; }
  .hero { padding: 22px; border-radius: var(--r-xl); }
  .hero .btn { width: 100%; }
  .hero__art { display: none; }

  .figures { grid-template-columns: 1fr 1fr; }
  .figrow:nth-child(2n) { border-right: 0; }
  .figrow:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

  .reading p { font-size: 16.5px; line-height: 1.95; }
  .reading__lead { font-size: 17.5px; }

  .qstem { font-size: 21px; line-height: 1.75; }
  .opt { min-height: 58px; padding: 14px 16px; }
  .opt.is-chosen, .opt.is-right, .opt.is-wrong { padding: 13px 15px; }
  .opt__text { font-size: 16.5px; }
  .opt__hot { display: none; }
  .options--glyph { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .opt--glyph { min-height: 116px; }
  .opt--glyph .opt__text { font-size: 48px; }

  /* On a phone the bank sits under the tiles rather than beside them,
     so it gets the full width and the pills get room to breathe. */
  .match { gap: 14px; }
  .match__bank { max-width: none; padding: 16px; }
  .mtile--l { min-height: 56px; padding: 12px 14px; }
  .mtile--l .mtile__text { font-size: 16.5px; }
  .mtile--r { min-height: 44px; font-size: 16.5px; }
  .mtile__pin { font-size: 14px; padding: 4px 10px; }

  .session__body { padding: 24px 16px 40px; }
  .session__top-in { padding: 12px 16px; gap: 10px; }
  .exitbtn { padding: 8px 13px; }
  .session__pos { font-size: 12px; }
  .session__count { padding: 6px 10px; font-size: 12px; }
  .session__foot-in { padding: 12px 16px; gap: 10px; }
  .session__foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .session__foot .btn { padding: 0 22px; min-height: 50px; font-size: 15px; }
  .hint { font-size: 11.5px; }

  .res-hero { padding: 22px; }
  .res-hero__pct { font-size: 48px; }
  .res-actions .btn { flex: 1 1 100%; }
  .page--settings h1 { font-size: 24px; }

  .tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 12;
    background: var(--rail);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Immersion: once you are inside something, the tabs get out of the way */
  body.is-immersive .tabbar { display: none; }
  body.is-immersive .page { padding-bottom: 60px; }

  .tabbar a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 10px;
    color: var(--ink-3);
    font: 600 10.5px/1.3 var(--ui);
    text-align: center;
  }
  .tabbar a:hover { color: var(--ink); }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.is-on { color: var(--ink); }
  .tabbar a.is-on svg { color: var(--accent); }
}

@media (max-width: 420px) {
  .tabbar a { font-size: 9.5px; }
}

/* ═══════════════════ Print ═══════════════════
   Cmd+P on a result page gives a clean handout for group study. */
@media print {
  .topbar, .tabbar, .session__top, .session__foot,
  .dialog, .res-actions { display: none !important; }
  body, .shell { background: #fff; }
  .session, .session__scroll { position: static; overflow: visible; }
  .card, .panel, .rev, .res-hero, .band { box-shadow: none; break-inside: avoid; }
}