/* Light palette, same values as the sister project ulpan-hebrew. */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --card-hover: #f3f4f6;
  --border: #e5e7eb;
  --text: #1a1a1a;
  --dim: #525252;
  --faint: #6b7280;
  --accent: #0071B9;
  --accent-dim: #d0e7f4;
  --warn: #dc2626;
}

@font-face {
  font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('frank-ruhl-he.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('frank-ruhl-lext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('frank-ruhl-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'KtavYad';
  src: url('KtavYadCLM-MediumItalic.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The hidden attribute must win over any element's own display rule
   (.srs-answer, .srs-grades, .install all set display). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  padding: 72px 20px 64px;
  -webkit-text-size-adjust: 100%;
}

.container { max-width: 900px; margin: 0 auto; }

/* --------------------------------------------------------- menu (hamburger) */

.menu { position: fixed; top: 12px; inset-inline-end: 14px; z-index: 60; }

.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--dim);
  transition: transform 0.2s, opacity 0.2s;
}
.menu-btn:hover { border-color: var(--accent); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu.open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu.open .menu-btn span:nth-child(2) { opacity: 0; }
.menu.open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  top: 52px;
  inset-inline-end: 0;
  width: 232px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.16);
}
.menu.open .menu-panel { display: flex; }
@media (hover: hover) {
  .menu:hover .menu-panel { display: flex; }
}

.menu-nav { display: flex; flex-direction: column; }
.menu-link {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--dim);
  text-decoration: none;
  font-size: 15px;
}
.menu-link:hover { background: var(--card-hover); color: var(--accent); }

.menu-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
/* An install button that app.js has hidden leaves no empty bordered block. */
.menu-group:has(> .install[hidden]) { display: none; }
.menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--faint);
  padding: 0 10px 8px;
}
.menu-toggles { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 2px; }
.menu-group .install { width: 100%; justify-content: center; margin: 0; }

.ctl {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--dim);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ctl:hover { color: var(--text); border-color: var(--accent); }
.ctl[aria-pressed="true"] { color: #003356; border-color: var(--accent); background: var(--accent-dim); }

/* --------------------------------------------------------- structure */

.back {
  display: inline-block;
  color: var(--faint);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 20px;
}
.back:hover { color: var(--accent); }

header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.eyebrow {
  color: var(--faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 6px;
}

h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; }

.intro { color: var(--dim); max-width: 66ch; margin-bottom: 32px; }

.block { margin-bottom: 44px; }

h2 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.kind {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 1px 7px;
}

.section-note { color: var(--faint); font-size: 15px; margin: 4px 0 14px; max-width: 66ch; }

/* --------------------------------------------------------- hebrew */

.he {
  font-family: 'Frank Ruhl Libre', 'David', serif;
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.45em;
  line-height: 1.75;
}
body.cursive .he { font-family: 'KtavYad', cursive; font-size: 1.7em; }

/* --------------------------------------------------------- play buttons

   One button per Hebrew word, several hundred on the browse page, so the icon is a
   mask on an empty element: a single rule paints all of them and no instance carries
   markup of its own. Quiet at rest (the taste rule: an effect you notice immediately
   is too strong), full strength on hover, focus and while speaking. */
:root {
  --spk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h3.5L13 20V4L7.5 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'  fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 6a8 8 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.say {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 .35em;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: middle;
  background: none;
  background-color: var(--faint);
  opacity: .28;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
  -webkit-mask: var(--spk) center / contain no-repeat;
  mask: var(--spk) center / contain no-repeat;
}
.say:hover, .say:focus-visible { opacity: 1; background-color: var(--accent); }
.say:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.say.playing { opacity: 1; background-color: var(--accent); animation: say-pulse .9s ease-in-out infinite; }
@keyframes say-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* No Hebrew voice on the device: the buttons go rather than fail silently. */
body.no-speech .say { display: none; }

/* Bigger target on the SRS card, where hearing the word is the exercise. */
.srs-front .say { width: 1.5em; height: 1.5em; opacity: .5; margin-inline-start: .5em; }

.say-hint {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  max-width: min(34rem, 92vw);
  z-index: 60;
  background: var(--text);
  color: #fff;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

@media (prefers-reduced-motion: reduce) {
  .say { transition: none; }
  .say.playing { animation: none; }
}

/* --------------------------------------------------------- vocab rows */

.rows { border-top: 1px solid var(--border); }

.row {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(120px, 0.9fr) minmax(180px, 1.4fr);
  gap: 6px 20px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.row:hover { background: var(--card-hover); }

.row-he { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.row-tr { color: var(--accent); font-size: 15px; letter-spacing: 0.2px; }
.row-gl { display: flex; flex-direction: column; gap: 2px; }
.row-note, .row-src { grid-column: 1 / -1; color: var(--faint); font-size: 13.5px; }
.row-src a { color: var(--dim); }

.gloss { font-size: 15px; }
.gloss i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--faint);
  margin-inline-end: 7px;
  vertical-align: 1px;
}
.gloss-fr { color: var(--dim); font-size: 14px; }

/* --------------------------------------------------------- reading cards

   Every reading on the site (.cell-tr, .poal-tr, .line-tr, .row-tr and the
   Reading column) is a card that flips face-down instead of disappearing. The
   box keeps its size either way, so hiding the readings never reflows the page
   and you never lose the line you were reading. Click one card to peek at it. */

.tr, .en {
  display: inline-block;
  position: relative;
  padding: 1px 5px;
  margin: -1px -5px;
  border-radius: 4px;
  perspective: 320px;
}
/* The back of the card: a blank tile filling the card, never wider than it.
   The TILE turns over, never the card itself — a card rotated away with its
   backface hidden is dropped out of hit-testing, so tapping it did nothing at
   all. A card that stays flat is a card you can still click. */
.tr::after, .en::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card-hover);
  transform: rotateX(180deg);
  backface-visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Column hidden: the tile lies face-up over the reading, and the card becomes
   a control. touch-action keeps the tap instant instead of waiting on a
   double-tap-to-zoom guess. */
body.no-translit .tr, body.no-en .en {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body.no-translit .tr::after, body.no-en .en::after { transform: rotateX(0deg); }
/* A card turned back over on its own, while the rest stay face-down. */
body.no-translit .tr.is-peeked::after, body.no-en .en.is-peeked::after { transform: rotateX(180deg); }
body.no-translit .tr:hover::after, body.no-en .en:hover::after { border-color: var(--accent); }
.tr:focus-visible, .en:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tr::after, .en::after { transition: none; }
}

/* ---------- language ----------------------------------------------------
   The page carries every language at once (a static file cannot know which
   was chosen) and shows one. `display: none` rather than visibility so the
   hidden copy takes no space, is not read out by a screen reader, and is not
   found by ctrl-F. Inline, because most of these sit inside a sentence.

   Default when no language class is on yet — the first paint, before app.js
   runs, and any page built with a single language: show the FIRST language
   only, never all of them stacked. */
.lg { display: none; }
/* The per-language rules are GENERATED by build.mjs from config.json's language list and
   stamped over the placeholder below. They used to name `en` and `fr` literally, which
   meant the day this app shipped Russian instead of French the pills switched, the body
   class changed, and the text on screen did not — a silent half-failure, because nothing
   errors when a selector simply matches nothing. Do not hardcode a language here again. */
.lg-en { display: inline; }
body.lang-en .lg-en { display: inline; }
body.lang-en .lg-ru { display: none; }
body.lang-ru .lg-ru { display: inline; }
body.lang-ru .lg-en { display: none; }

body.no-gloss-fr .gloss-fr { display: none; }

.tag {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  white-space: nowrap;
}
.tag-warn { color: var(--warn); border-color: #fecaca; }

/* --------------------------------------------------------- tables */

/* Tables fit the column: no sideways scrolling anywhere on the site. A paradigm
   with more forms than fit is rendered as a wrapping grid instead (.para). */
.tbl-wrap { margin: 4px 0 8px; }

.tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
}
.tbl th {
  text-align: start;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--border);
}
.tbl td {
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
}
.tbl tbody tr:hover { background: var(--card-hover); }

/* The meaning column is the anchor; the form columns share what is left. */
.tbl-forms th:first-child, .tbl-forms td:first-child { width: 27%; }
.tbl-poal th:first-child, .tbl-poal td:first-child { width: 21%; }
.tbl-poal th:nth-child(2), .tbl-poal td:nth-child(2) { width: 19%; }

/* The po'al carries the verb's identity, so it is marked out rather than
   dissolved into the row: accent block, infinitive on top, root and binyan under. */
.poal {
  display: block;
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 6px 9px 7px;
  color: #003356;
}
.c-poal { padding-inline-end: 14px; }
.poal .he { font-size: 1.3em; line-height: 1.5; }
.poal-tr { display: block; color: var(--accent); font-size: 12.5px; }
.poal-root {
  display: block;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.3px;
  margin-top: 3px;
}
/* Inside a wide paradigm the po'al sits under the meaning, same highlight. */
.para-head .poal { display: inline-block; margin-top: 6px; }

/* --------------------------------------------------------- collections */

/* Cumulative pages (verbs, adjectives): same table, plus where it was met. */
.tbl-collection th:last-child, .tbl-collection td:last-child { width: 11%; }
.c-seen { font-size: 13px; }
.c-seen a { color: var(--faint); text-decoration: none; display: block; white-space: nowrap; }
.c-seen a:hover { color: var(--accent); }

/* Under 430px the day links become one compact wrapping line. */
@media (max-width: 430px) {
  .tbl-collection th:last-child, .tbl-collection td:last-child { width: 9%; }
  .c-seen { font-size: 11.5px; }
  .c-seen a { display: inline; white-space: normal; }
}

/* Second copy of the po'al, folded under the meaning on narrow screens where
   six columns stop being readable. Only ever one of the two is displayed. */
.poal-inline { display: none; }
.tbl-vocab th:first-child, .tbl-vocab td:first-child { width: 34%; }
.tbl-vocab th:nth-child(2), .tbl-vocab td:nth-child(2) { width: 24%; }

.tbl .c-tr { color: var(--accent); font-size: 14.5px; }
.cell-word { font-weight: 500; }
.cell-word .tag { margin-inline-start: 7px; vertical-align: 2px; }

/* Reading under the word, so a column stays one word wide. */
.cell-tr { display: block; color: var(--accent); font-size: 13px; margin-top: 2px; }
.cell-sub { display: block; color: var(--faint); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.cell-sub .he { font-size: 1.15em; }


/* --------------------------------------------------------- wide paradigms */

.para { margin: 18px 0 24px; }
.para-head { margin-bottom: 10px; }
.para-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.para-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
}
.para-cell:hover { border-color: var(--accent); }
.para-tag { font-size: 10.5px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }

/* --------------------------------------------------------- dialogue */

.dialogue { border-top: 1px solid var(--border); }
.line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.line:hover { background: var(--card-hover); }
.line-n { color: var(--faint); font-size: 13px; padding-top: 6px; }
.speaker { font-family: 'Frank Ruhl Libre', serif; direction: rtl; unicode-bidi: isolate; font-size: 16px; color: var(--dim); }
body.cursive .speaker { font-family: 'KtavYad', cursive; }
.line-he { display: flex; align-items: baseline; gap: 8px; }
.line-tr { color: var(--accent); font-size: 15px; }
.line-gl { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }

/* --------------------------------------------------------- points, pager */

.points { margin-inline-start: 20px; color: var(--dim); }
.points li { margin: 8px 0; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 40px;
  font-size: 15px;
}
.pager a { color: var(--dim); text-decoration: none; }
.pager a:hover { color: var(--accent); }

.source { color: var(--faint); font-size: 13px; margin-top: 24px; }

/* --------------------------------------------------------- home dashboard */

.home-head { border-bottom: none; margin-bottom: 14px; padding-bottom: 0; }

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
  padding: 6px 0 20px;
  color: var(--faint);
  font-size: 13px;
}
.hs b { color: var(--text); font-size: 20px; font-weight: 600; margin-inline-end: 5px; font-variant-numeric: tabular-nums; }
.hs-empty { color: var(--faint); font-size: 14px; }

.home-cta { display: flex; gap: 10px; margin-bottom: 28px; }
.cta {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 15px;
  border-radius: 12px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cta-main { color: #fff; background: var(--accent); }
.cta-main:hover { background: #005e9c; transform: translateY(-1px); }
.cta-alt { color: var(--dim); background: var(--card); border: 1px solid var(--border); }
.cta-alt:hover { border-color: var(--accent); color: var(--accent); }

.latest {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 34px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.latest:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); }
.latest-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--accent); }
.latest-title { font-size: 21px; font-weight: 600; line-height: 1.3; }
.latest-sum { color: var(--dim); font-size: 15px; margin-top: 3px; }

/* The site before its first lesson exists (build.mjs emptyPage). Same card as .latest,
   minus the link affordances, since there is nothing yet to go to. */
.hint-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 34px;
}
.hint-card h2 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.hint-card p { color: var(--dim); font-size: 15px; line-height: 1.6; }

.lessons-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.lessons-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--faint); }
.search-days { flex: 1; min-width: 170px; margin-bottom: 0; font-size: 15px; padding: 9px 12px; }

.week { border-top: 1px solid var(--border); }
.week:last-of-type { border-bottom: 1px solid var(--border); }
.week-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
}
.week-sum::-webkit-details-marker { display: none; }
.week-sum::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.week[open] .week-sum::before { transform: rotate(45deg); }
.week-sum > span:first-of-type { flex: 1; }
.week-k { color: var(--faint); font-size: 13px; font-weight: 400; }

.week-days { display: flex; flex-direction: column; padding-bottom: 8px; }
.lesson {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}
.lesson:hover { background: var(--card-hover); }
.lesson-n { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.lesson-t { font-size: 15.5px; line-height: 1.35; }
.lesson-d { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

@media (max-width: 460px) {
  .lesson { grid-template-columns: 52px 1fr; row-gap: 2px; }
  .lesson-d { grid-column: 2; }
}

/* --------------------------------------------------------- search */

.search {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.search:focus { outline: none; border-color: var(--accent); }
.empty { color: var(--faint); padding: 20px 4px; }

/* --------------------------------------------------------- practice (SRS) */

.tabs { display: flex; gap: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.tab {
  font: inherit;
  font-size: 15px;
  color: var(--faint);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 2px;
  cursor: pointer;
}
.tab:hover { color: var(--dim); }
.tab-on { color: var(--text); border-bottom-color: var(--accent); }

.srs-stats { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin-bottom: 14px; color: var(--faint); font-size: 13px; }
.srs-stat b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.srs-total { margin-inline-start: auto; }

.srs-opts { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.srs-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); cursor: pointer; }
.srs-switch input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.srs-reset { font: inherit; font-size: 13px; color: var(--faint); background: none; border: none; padding: 4px 2px; cursor: pointer; letter-spacing: 0.2px; }
.srs-reset:hover { color: var(--accent); }
.srs-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.srs-tag { color: var(--faint); font-size: 13px; letter-spacing: 0.3px; }
.srs-poal { margin-top: 10px; font-size: 14px; color: var(--dim); }
.srs-poal .he { font-size: 1.2em; }
.srs-poal-tr { color: var(--accent); font-size: 13px; margin-inline-start: 4px; }
.srs-poal-root { display: block; color: var(--faint); font-size: 12px; letter-spacing: 0.3px; margin-top: 3px; }

.srs-choices { display: grid; gap: 8px; margin-top: 18px; }
.srs-choice {
  font: inherit;
  font-size: 16px;
  text-align: start;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.srs-choice:hover:not(:disabled) { border-color: var(--accent); }
.srs-choice:disabled { cursor: default; }
.srs-choice-right { border-color: #047857; background: #ecfdf5; color: #047857; font-weight: 500; }
.srs-choice-wrong { border-color: var(--warn); background: #fef2f2; color: var(--warn); }
.srs-mc-answer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.srs-continue {
  width: 100%;
  margin-top: 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.srs-continue:hover { background: #005e9c; }

.srs-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 44px 24px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  cursor: pointer;
}
.srs-front .he { font-size: 2.5em; line-height: 1.6; }
.srs-answer { display: flex; flex-direction: column; gap: 5px; }
.srs-tr { color: var(--accent); font-size: 18px; }
.srs-en { color: var(--text); font-size: 21px; }
.srs-src { color: var(--faint); font-size: 13px; margin-top: 6px; }

.srs-actions { margin-top: 18px; }
.srs-show {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 11px;
  padding: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.srs-show:hover { background: #005e9c; }
.srs-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.srs-grade {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 15px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.srs-again { color: var(--warn); }
.srs-again:hover { border-color: var(--warn); background: #fef2f2; }
.srs-good { color: var(--accent); }
.srs-good:hover { border-color: var(--accent); background: var(--accent-dim); }
.srs-easy { color: #047857; }
.srs-easy:hover { border-color: #047857; background: #ecfdf5; }

.srs-done { text-align: center; padding: 52px 20px; }
.srs-done-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.srs-done-sub { color: var(--dim); margin-bottom: 22px; }
.srs-more {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 11px;
  padding: 13px 26px;
  cursor: pointer;
}
.srs-more:hover { background: #005e9c; }

/* --------------------------------------------------------- install (PWA) */

.install {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  margin: 0 0 32px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.install::before {
  content: '';
  width: 15px;
  height: 15px;
  /* down-arrow-into-tray glyph, drawn so it needs no extra asset */
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v9.2l3.1-3.1 1.4 1.4L12 16 6.5 10.5 7.9 9.1 11 12.2V3zM5 19h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6h2v5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v9.2l3.1-3.1 1.4 1.4L12 16 6.5 10.5 7.9 9.1 11 12.2V3zM5 19h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6h2v5z'/%3E%3C/svg%3E");
}
.install:hover { background: #005e9c; transform: translateY(-1px); }
.install:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.install-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.install-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.install-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; line-height: 1.3; }
.install-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 13px; margin-bottom: 20px; }
.install-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  counter-increment: step;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.4;
}
.install-steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #003356;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ios-share { color: var(--accent); flex: 0 0 auto; vertical-align: middle; }
.install-generic { color: var(--dim); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.install-close {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  width: 100%;
  cursor: pointer;
}
.install-close:hover { border-color: var(--accent); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .install { transition: none; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 640px) {
  body { padding: 64px 14px 48px; font-size: 16px; }
  h1 { font-size: 25px; }
  .row { grid-template-columns: 1fr; gap: 2px; padding: 14px 2px; }
  .line { grid-template-columns: 44px 1fr; gap: 10px; }
  .tbl { font-size: 14.5px; }
  .tbl td { padding: 9px 10px 9px 0; }
  .para-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  /* Drop the po'al column, show the copy under the meaning instead. */
  .tbl-poal th:nth-child(2), .tbl-poal td:nth-child(2) { display: none; }
  .tbl-poal th:first-child, .tbl-poal td:first-child { width: 32%; }
  .poal-inline { display: block; margin-top: 7px; }
  .poal-inline .poal { padding: 5px 8px; }
}

/* Below this the four construct columns no longer fit at full type size. */
@media (max-width: 430px) {
  body { padding: 62px 10px 44px; }
  .tbl { font-size: 13px; }
  .tbl th { padding-inline-end: 6px; font-size: 9.5px; letter-spacing: 0.6px; }
  .tbl td { padding: 9px 6px 9px 0; }
  .tbl .he { font-size: 1.2em; }
  .cell-tr { font-size: 11px; }
  .tbl-forms th:first-child, .tbl-forms td:first-child { width: 24%; }
}

@media (max-width: 340px) {
  body { padding: 62px 8px 44px; }
  .tbl { font-size: 12.5px; }
  .tbl td { padding-inline-end: 4px; }
  .tbl th { padding-inline-end: 4px; }
  .tbl .he { font-size: 1.08em; }
  /* Last resort under ~340px: let a long vocalised word break rather than
     push the table wider than the screen. */
  .tbl .he, .tbl .cell-tr, .tbl th { overflow-wrap: anywhere; }
  .ctl { padding: 4px 9px; font-size: 12px; }
}

@media print {
  .controls, .back, .pager { display: none; }
  body { background: #fff; color: #111; padding: 0; }
  .row, .line, .tbl tr { break-inside: avoid; }
}

/* Revision page: the countdown sits in the eyebrow and turns warm when the test
   is within two days. Everything else on the page reuses the day-page blocks. */
.countdown { font-variant-numeric: tabular-nums; }
.countdown.is-soon { color: var(--accent); font-weight: 600; }

/* Home banner for a live test. Reads as urgent without shouting: the accent border
   and the countdown carry the signal, the rest matches the other home cards. */
.test-cta {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--accent); border-inline-start-width: 4px; border-radius: 12px;
  padding: 14px 16px; margin: 0 0 14px; background: var(--card, #fff);
  transition: transform .12s ease, box-shadow .12s ease;
}
.test-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.test-cta-eyebrow { display: block; font-size: 12.5px; color: var(--accent); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; }
.test-cta-title { display: block; font-size: 18px; font-weight: 600; margin-top: 3px; }
.test-cta-sub { display: block; font-size: 14px; color: var(--faint); margin-top: 2px; }

/* Test trainer. Deliberately plain: the question is the interface. */
.drill { text-align: center; }
.drill-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.drill-score { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.drill-prompt { font-size: 14px; color: var(--faint); margin-bottom: 10px; }
.drill-subject { font-size: 34px; line-height: 1.6; }
.drill-sub { font-size: 14px; color: var(--faint); margin-top: 4px; }
.drill-opts { display: grid; gap: 8px; margin: 18px 0 12px; }
@media (min-width: 520px) { .drill-opts { grid-template-columns: 1fr 1fr; } }
.drill-opt {
  font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line, #ddd); background: var(--card, #fff); color: inherit;
  cursor: pointer; touch-action: manipulation; transition: border-color .12s ease, background .12s ease;
}
.drill-opt:hover:not(:disabled) { border-color: var(--accent); }
.drill-opt:disabled { cursor: default; }
.drill-opt.is-right { border-color: #2a7; background: rgba(34,170,119,.10); }
.drill-opt.is-wrong { border-color: #c33; background: rgba(204,51,51,.08); }
.drill-final { font-size: 40px; font-weight: 600; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.drill-go { display: inline-block; }

/* The verification step after an answer: the reading, and the word behind it. */
.drill-reveal {
  margin: 14px auto 4px; padding: 12px 14px; max-width: 34rem;
  border-radius: 10px; background: rgba(0,113,185,.05);
  border: 1px solid rgba(0,113,185,.18);
}
.reveal-main { font-size: 24px; line-height: 1.7; }
.reveal-poal { font-size: 18px; line-height: 1.7; margin-top: 4px; opacity: .8; }
.reveal-tr { display: block; font-size: 14px; color: var(--accent); margin-top: 2px; }
.reveal-en { font-size: 14px; color: var(--faint); margin-top: 6px; }

/* Typed answers: Latin letters, so a phone needs no Hebrew keyboard. */
.drill-type { display: flex; gap: 8px; justify-content: center; margin: 18px 0 12px; }
.drill-input {
  font: inherit; font-size: 18px; padding: 11px 13px; border-radius: 10px; min-width: 0; flex: 1 1 auto;
  max-width: 22rem; border: 1px solid var(--line, #ddd); background: var(--card, #fff); color: inherit;
}
.drill-input:focus { outline: none; border-color: var(--accent); }
.drill-input.is-right { border-color: #2a7; background: rgba(34,170,119,.10); }
.drill-input.is-wrong { border-color: #c33; background: rgba(204,51,51,.08); }
.drill-check {
  font: inherit; font-size: 16px; padding: 11px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.drill-stats { font-size: 13px; color: var(--faint); }
.drill-bar { justify-content: space-between; }
.drill-reveal.is-wrong { background: rgba(204,51,51,.05); border-color: rgba(204,51,51,.22); }
.reveal-again { font-size: 13px; color: #c33; margin-top: 8px; }

/* A listening question has no word to show, so the replay button IS the subject. */
.drill-replay {
  font: inherit; font-size: 16px; padding: 14px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
}
.drill-replay:hover { background: rgba(0,113,185,.07); }
.reveal-why { font-size: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }

/* Focus: attack one weak area instead of waiting for it to come round. */
.drill-focus { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.drill-focus-btn {
  font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #ddd); background: transparent; color: var(--faint);
}
.drill-focus-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* The end of a round is the moment to consolidate, not just to be scored. */
.drill-missed { margin-top: 18px; text-align: start; max-width: 34rem; margin-inline: auto; }
.missed-title { font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.missed-row { padding: 9px 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 20px; line-height: 1.6; }
.missed-en { display: block; font-size: 14px; color: var(--faint); }

/* A cloze sentence is the subject: full width, right to left, blank in place. */
.drill-sentence { display: block; font-size: 24px; line-height: 1.9; max-width: 34rem; margin-inline: auto; }

/* ---- page tab strip -------------------------------------------------------------
   The reference tables and the tests read as one set you move around inside, not four
   pages that happen to link to each other. Deliberately NOT the same class as .tabs,
   which the practice page already uses for its own in-page Practice / Browse switch.
   Written in logical properties (inline-start, padding-inline) so that turning the site
   right-to-left needs no second version of any of this. On a phone the strip scrolls
   sideways inside itself rather than making the page scroll, which is the rule
   everywhere here: wide content scrolls in its own box, the body never does. */
.pagetabs {
  display: flex;
  gap: 4px;
  margin-block: 0 22px;
  padding-block-end: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pagetabs::-webkit-scrollbar { display: none; }
.pagetab {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pagetab:hover { background: var(--card-hover); color: var(--text); }
.pagetab.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* a test row on tests.html reuses .lesson; the upcoming one is marked */
.test-row.is-next { border-color: var(--accent); background: var(--accent-dim); }

/* ---- a four-form paradigm on a phone --------------------------------------------
   On a wide screen a forms table is the right shape: one row per word, the forms
   aligned in columns, so two paradigms can be compared down the page. On a phone that
   same row puts four Hebrew words plus their readings side by side in ~360px, and the
   words break mid-word. So the row becomes a 2x2 block: the word spans the full width
   as a heading, and its four forms sit two-by-two underneath. Same markup, no second
   copy of anything — the table simply stops behaving like a table.
   The column header disappears with the thead, so each cell grows its own label from
   the data-tag the build writes on it. */
@media (max-width: 640px) {
  .tbl-forms { display: block; }
  .tbl-forms thead { display: none; }
  .tbl-forms tbody { display: block; }
  .tbl-forms tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px 0 14px;
    border-block-end: 1px solid var(--border);
  }
  .tbl-forms tr:last-child { border-block-end: 0; }
  .tbl-forms td { display: block; padding: 0; border: 0; }
  .tbl-forms td.c-word,
  .tbl-forms td.c-poal,
  .tbl-forms td.c-seen { grid-column: 1 / -1; }
  .tbl-forms td.c-word { margin-block-end: 4px; }
  .tbl-forms td.c-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    min-width: 0;                 /* a grid child must be allowed to shrink or it overflows */
  }
  .tbl-forms td.c-form:empty { display: none; }
  .tbl-forms td.c-form::before {
    content: attr(data-tag);
    display: block;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--faint);
    margin-block-end: 2px;
  }
  /* the paradigm grid gets the same treatment: two across, never one long line */
  .para-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- right to left ---------------------------------------------------------------
   The page is Hebrew, so the whole layout runs right to left: <html dir="rtl">. Every
   direction-dependent rule above is written in logical properties, so that one attribute
   is the whole switch and there is no mirrored copy of anything to keep in sync.

   What still needs saying explicitly is the LATIN runs. A transliteration or an English
   gloss is left-to-right text sitting inside a right-to-left page, and left to itself the
   bidi algorithm moves its trailing punctuation to the wrong end: "chadash." renders as
   ".chadash", and "(m.s)" loses its brackets to opposite sides. Marking those runs ltr
   fixes it at the source instead of fighting it per string. */
/* EVERY bilingual string travels in a .lg span, and prose is Latin prose even when it has
   Hebrew words inside it. Left to inherit rtl, 183 of 365 Latin runs ending in punctuation
   had that punctuation flung to the far side of the line: a full stop landing 245px into
   the middle of a sentence. unicode-bidi: isolate does NOT fix it — measured, the broken
   runs already computed `isolate`. Only a real direction does, because the run needs its own
   paragraph direction rather than a neutral boundary. A Hebrew word inside keeps its own
   dir="rtl" from the build and renders correctly as an embedded run. */
.lg { direction: ltr; }
.tr, .reveal-tr, .srs-tr, .poal-tr, .srs-poal-tr,
.en, .reveal-en, .missed-en, .lesson-d, .eyebrow, .para-tag,
.tbl th, .c-form::before, .drill-stats, .drill-score, .hs,
.latest-sum, .cell-sub, .intro, .summary, .section-note, .points, .hs-empty, h1, h2, h3,
.search, .drill-input, input[type="search"], input[type="text"],
/* UI chrome is Latin, and a chrome element holding two inline spans gets them reordered by
   an rtl block: "4 days" became "days 4". These read as Latin lines even on a Hebrew page. */
.week-sum, .lesson-n, .lesson-t, .pagetab, .tab, .ctl, .menu-link, .empty, .missed-title,
/* Everything below was added because `node tools/verify-bidi.cjs` measured it painting
   backwards, not because anyone spotted it. That list had already been wrong twice by eye
   — .latest-sum was on it while .latest-title was not, .eyebrow while .latest-eyebrow was
   not — which is why the checker exists. Add to this list from the checker's output. */
.latest-title, .latest-eyebrow, .srs-stats, .srs-stat, .srs-total, .back,
.test-cta-eyebrow, .test-cta-title, .test-cta-sub, .lessons-title, .week-k {
  direction: ltr;
  text-align: start;
}
/* A cell whose content is Latin still sits in an rtl row, so start = right. Put the text
   back on the reading edge of its own box. */
.tbl td.c-mean, .tbl td.c-tr, .c-seen { direction: ltr; text-align: end; }

/* Hebrew keeps its own explicit dir="rtl" from the build; nothing here overrides it. */

/* The day pager: "previous" and "next" swap sides on their own because the flex row is
   rtl now, but the arrow GLYPHS are drawn in the markup and would point the wrong way.
   Flip them with a transform rather than editing eight template strings. */
/* Arrow GLYPHS are drawn in the markup, so the layout flip leaves them pointing the wrong
   way: "back" would still be a left arrow on a page that reads right to left. Mirror every
   one of them from CSS rather than maintaining a second set of template strings. */
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }

/* Latin numerals and dates read left-to-right wherever they appear. */
time, .lesson-n, .drill-score { unicode-bidi: isolate; }