/* 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; right: 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;
  right: 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; }

/* --------------------------------------------------------- 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-right: 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;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* The back of the card: a blank tile filling the card, never wider than it. */
.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;
}
body.no-translit .tr { transform: rotateX(180deg); cursor: pointer; }
body.no-en .en { transform: rotateX(180deg); cursor: pointer; }
/* A card turned back over on its own, while the rest stay face-down. */
body.no-translit .tr.is-peeked, body.no-en .en.is-peeked { transform: none; }
body.no-translit .tr:hover::after, body.no-en .en:hover::after { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tr, .en { transition: 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: left;
  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-right: 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-left: 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-left: 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-right: 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; }

.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-right: 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: 22px; color: var(--faint); font-size: 13px; }
.srs-stat b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.srs-total { margin-left: auto; }

.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-right: 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-right: 4px; }
  .tbl th { padding-right: 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; }
}