/* Shared across every page. Written by hand; the pages are generated.
   Conventions follow the journeys-brief set: one wrap, cards for navigation,
   a tag per category, and a dark scheme. theme.js sets data-theme on <html>
   from the reader's choice, or from the device until they make one. */

:root {
  color-scheme:light;
  --bg:#ffffff; --fg:#1a1a1e; --muted:#55555f; --faint:#86868f;
  --line:#e3e3e8; --panel:#f6f6f8; --accent:#4f46e5; --accent-bg:#eef0fd;
  --warn:#b45309; --warn-bg:#fdf3e7;

  --paal:#1d3b57; --piel:#1f6f5c; --hifil:#6b3fa0;
  --hitpael:#a5641a; --nifal:#9d2f3f; --pual:#3f8a74; --hufal:#8a63b5;
  --geo:#1b6d8f; --chag:#5f7a1c;

  /* the gender figures (build/figures.py): green masculine, pink feminine */
  --fig-m:#2f8f55; --fig-m-bg:#dff2e6; --fig-f:#d0487f; --fig-f-bg:#fbe1ec;
  --fig-n:#6b6b75; --fig-n-bg:#ececf0;

  --he-font: "Taamey Frank CLM", "Arial Hebrew Scholar", "SBL Hebrew",
             "New Peninim MT", "Arial Hebrew", "Times New Roman", serif;
}
:root[data-theme="dark"] {
    color-scheme:dark;
    --bg:#17171a; --fg:#ececf0; --muted:#b3b3bc; --faint:#7d7d87;
    --line:#2c2c32; --panel:#1f1f24; --accent:#a5a1f5; --accent-bg:#23233a;
    --warn:#e0a34e; --warn-bg:#2a2214;

    --paal:#7ea8d6; --piel:#5cc0a6; --hifil:#b79cf5;
    --hitpael:#e0a061; --nifal:#e8848f; --pual:#79d3ba; --hufal:#c4a6ea;
    --geo:#6cc3e6; --chag:#b3cc6a;

    --fig-m:#62cf8f; --fig-m-bg:#1c3326; --fig-f:#f18ab5; --fig-f-bg:#3a1f2b;
    --fig-n:#b3b3bc; --fig-n-bg:#2a2a30;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.zone { scroll-margin-top:14px; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap { max-width:900px; margin:0 auto; padding:40px 28px 80px; }
.wrap.wide { max-width:1240px; }

a.back { color:var(--accent); text-decoration:none; font-size:13px; }
a.back:hover { text-decoration:underline; }
.eyebrow {
  color:var(--faint); font-size:13px; text-transform:uppercase;
  letter-spacing:.04em; margin-top:14px;
}
h1 { font-size:26px; margin:4px 0 6px; }
h2 {
  font-size:16px; text-transform:uppercase; letter-spacing:.04em;
  margin:36px 0 8px; color:var(--faint);
}
h3 { font-size:15px; margin:22px 0 4px; }
.lede { color:var(--muted); margin:0 0 18px; max-width:64ch; }
p { max-width:72ch; }
.note {
  color:var(--faint); font-size:12.5px; margin-top:38px;
  padding-top:14px; border-top:1px solid var(--line);
}

/* --- Hebrew ---------------------------------------------------------------
   Every scrap of Hebrew is its own right-to-left island. Without the isolation
   a trailing comma or arrow drifts to the wrong end of the phrase. */
.he {
  font-family:var(--he-font); direction:rtl; unicode-bidi:isolate;
  font-size:1.28em; line-height:1.85;
}
.he.big { font-size:1.9em; }
.fig { display:inline-block; vertical-align:-0.25em; margin:0 .25em; overflow:visible; }
.cue { float:left; min-width:2.6em; margin:2px 6px 0 0; }
.cue-to { color:var(--muted); font-size:13px; margin-left:2px; }
.say { font-size:12px; color:var(--muted); font-style:italic; direction:ltr; }
.pair { font-family:var(--he-font); direction:rtl; unicode-bidi:isolate;
        font-size:1.2em; white-space:nowrap; }
.hi { font-family:var(--he-font); direction:rtl; unicode-bidi:isolate;
      font-size:1.2em; color:var(--accent); font-weight:600; }

/* --- cards, as on the briefs index --------------------------------------- */
a.card {
  display:block; text-decoration:none; color:inherit; background:var(--bg);
  border:1px solid var(--line); border-radius:12px; padding:15px 19px; margin:10px 0;
  transition:border-color .12s, background .12s;
}
a.card:hover { border-color:var(--accent); background:var(--accent-bg); }
a.card .depth {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--faint);
}
a.card .t { font-size:16px; font-weight:650; margin:2px 0 4px; }
a.card .d { color:var(--muted); font-size:13.5px; max-width:none; }
a.card .arrow { float:right; color:var(--faint); }
.depth-line { display:flex; align-items:center; gap:8px; }
.depth-line .dot { width:7px; height:7px; border-radius:999px; background:var(--faint); flex:none; }

.section { margin-top:36px; }
.section .path {
  display:flex; align-items:baseline; gap:10px;
  border-bottom:2px solid var(--line); padding-bottom:8px; margin-bottom:6px;
}
.section .path .badge {
  font-size:12px; font-weight:700; color:#fff; background:var(--accent);
  border-radius:999px; padding:2px 10px;
}
.section .path h2 { font-size:18px; margin:0; text-transform:none; letter-spacing:0; color:var(--fg); }
.section .path .scope { color:var(--faint); font-size:13px; margin-left:auto; }
.legend {
  color:var(--muted); font-size:13px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:0 0 6px;
}
.legend b { color:var(--fg); }

/* --- the hub's tiles and the landing pages --------------------------------
   One tile per section, each in its own colour; the same colour carries onto
   that section's landing page as the badge and the card edge. A planned page
   is shown but not linked, so the landing page is also the plan. */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-top:18px; }
a.tile {
  display:block; text-decoration:none; color:inherit; background:var(--bg);
  border:1px solid var(--line); border-top:4px solid var(--b,var(--accent)); border-radius:12px;
  padding:14px 18px 16px; transition:border-color .12s, background .12s;
}
a.tile:hover { background:var(--accent-bg); border-color:var(--b,var(--accent)); }
.tile-he { font-family:var(--he-font); direction:rtl; text-align:right; font-size:26px;
           line-height:1.4; color:var(--b,var(--accent)); }
a.tile .t { font-size:18px; font-weight:700; margin:0 0 4px; }
a.tile .d { color:var(--muted); font-size:13.5px; }
a.tile .d .he, .card .he { font-size:1.15em; line-height:1.4; }
a.tile .inside { color:var(--faint); font-size:12px; margin-top:10px; border-top:1px solid var(--line);
                 padding-top:8px; }
.todo { color:var(--warn); }
.section .path .badge[class*="b-"] { background:var(--b); }
[data-theme="dark"] .section .path .badge[class*="b-"] { color:#17171a; }
.section .path h2 a { color:inherit; text-decoration:none; font-family:var(--he-font); }
div.card, a.card[class*="b-"] { border-left:3px solid var(--b,var(--line)); }
div.card {
  display:block; background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--b,var(--line));
  border-radius:12px; padding:15px 19px; margin:10px 0;
}
div.card .t { font-size:16px; font-weight:650; margin:2px 0 4px; }
div.card .t a { color:inherit; }
div.card .d { color:var(--muted); font-size:13.5px; }
div.card .depth { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.card .sub { font-size:13px; margin-top:8px; }
div.card.linked { position:relative; transition:border-color .12s, background .12s; }
div.card.linked:hover, div.card.linked:focus-within { border-color:var(--accent); background:var(--accent-bg); }
div.card.linked .arrow { float:right; color:var(--faint); }
div.card.linked .t a.stretch { text-decoration:none; }
div.card.linked .t a.stretch::after { content:""; position:absolute; inset:0; border-radius:12px; }
div.card.linked .t a.stretch:focus-visible { outline:none; }
div.card.linked .sub { position:relative; z-index:1; }
.card .sub a { color:var(--accent); }
.card.planned { opacity:.55; border-style:dashed; }
.card.planned .dot { background:var(--warn); }

/* --- panels -------------------------------------------------------------- */
.panel {
  border:1px solid var(--line); border-top:2.5px solid var(--accent);
  border-radius:0 0 8px 8px; background:var(--panel); padding:14px 18px; margin:14px 0;
}
.panel h3 { margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em;
            color:var(--accent); }
.panel p:last-child { margin-bottom:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px) { .grid2 { grid-template-columns:1fr; } }

.callout { border:1px solid var(--warn); background:var(--warn-bg);
           border-radius:10px; padding:14px 18px; margin:16px 0; }
.callout h3 { margin:0 0 6px; font-size:14px; text-transform:none; letter-spacing:0; }

/* --- tables ---------------------------------------------------------------
   A table of five conjugated forms cannot be made narrow enough for a phone,
   so it swipes sideways inside its own box rather than dragging the prose off
   the screen with it. The shadow on the right edge is the hint that it moves. */
.scroll {
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 4px;
  background:linear-gradient(to right, var(--bg) 30%, transparent),
             linear-gradient(to left, var(--bg) 30%, transparent) 100% 0,
             radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
             radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
  background-repeat:no-repeat; background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
table { width:100%; border-collapse:collapse; }
th {
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
  text-align:left; padding:7px 10px; font-weight:650;
  border-bottom:1.5px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:1;
}
td { padding:5px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:hover td { background:var(--accent-bg); }
td.num { color:var(--faint); font-size:12px; text-align:right; width:38px; }
td.he-cell { font-family:var(--he-font); direction:rtl; text-align:right;
             font-size:19px; line-height:1.75; unicode-bidi:isolate; }
td.he-cell .say { display:block; font-size:11px; line-height:1.3; text-align:right; }
.gloss-ru, .gloss-es { font-size:13px; }
.gloss-en { font-size:13px; color:var(--muted); }

/* --- binyan colours ------------------------------------------------------ */
.b-paal { --b:var(--paal); } .b-piel { --b:var(--piel); }
.b-hifil { --b:var(--hifil); } .b-hitpael { --b:var(--hitpael); }
.b-nifal { --b:var(--nifal); } .b-pual { --b:var(--pual); }
.b-hufal { --b:var(--hufal); } .b-geo { --b:var(--geo); }
.tag {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--b,var(--faint)); border-radius:999px;
  padding:1px 9px; white-space:nowrap;
}
[data-theme="dark"] .tag { color:#17171a; }
.tag a { color:inherit; text-decoration:none; }
.tag a:hover { text-decoration:underline; }
.qual { font-size:11px; color:var(--muted); margin-left:5px; }
.qual.he-q { font-family:var(--he-font); direction:rtl; unicode-bidi:isolate; font-size:13px; }

/* --- the verbs page ------------------------------------------------------ */
#q {
  width:100%; padding:11px 14px; font-size:14px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel); color:var(--fg); margin:6px 0 10px;
}
#q:focus { outline:none; border-color:var(--accent); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.chip {
  font-size:12px; padding:3px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--muted);
  user-select:none;
}
.chip:hover { border-color:var(--accent); }
.chip[data-facet="group"], .chip[data-facet="binyan"] { color:var(--b,var(--muted)); }
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
[data-theme="dark"] .chip[aria-pressed="true"] { color:#17171a; }
.chips-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em;
               color:var(--faint); align-self:center; margin-right:4px; width:58px; }
.count { color:var(--faint); font-size:12px; margin:8px 0 12px; }
div.count { min-height:19px; }
.guessed { color:var(--warn); cursor:help; font-size:11px; vertical-align:super; }
tr.hidden { display:none; }

/* --- the adjectives and nouns pages --------------------------------------
   Each set of five is its own tbody with a heading row, so a filter can hide a
   whole set once none of its rows match. The coloured rule on the left is what
   makes the fives read as fives when scrolling. */
a.chip { text-decoration:none; color:var(--b,var(--muted)); }
table.sets tbody.set td:first-child { border-left:3px solid var(--b,var(--line)); }
table.sets[dir="rtl"] tbody.set td:first-child { border-left:0; border-right:3px solid var(--b,var(--line)); }
table[dir="rtl"] th { text-align:right; }
table.sets tr.set-head td {
  background:var(--panel); padding:14px 10px 6px; border-bottom:1.5px solid var(--line);
}
table.sets tr.set-head:hover td { background:var(--panel); }
table.sets tr.set-head .tag { margin-right:8px; }
table.sets tbody.set { scroll-margin-top:12px; }
td.he-cell.absent { color:var(--faint); text-align:center; }
.exc { font-size:12px; color:var(--warn); margin-top:2px; }
.exc a { color:inherit; text-decoration:none; }
.exc a:hover { text-decoration:underline; }
.exc .he { font-size:14px; line-height:1.3; }
details summary { cursor:pointer; color:var(--accent); font-size:12.5px; }
details[open] summary { color:var(--faint); }

/* --- the arch ------------------------------------------------------------ */
.arch { display:block; margin:10px auto 0; max-width:100%; height:auto; }
.arch text { font-family:var(--he-font); fill:var(--fg); }
.arch text.latin { font-family:-apple-system,Helvetica,Arial,sans-serif; fill:var(--muted); }
.arch text.small { font-family:-apple-system,Helvetica,Arial,sans-serif; fill:var(--faint); }
.arch path { fill:none; stroke-width:9; stroke-linecap:round; opacity:.45; }

/* --- phones ---------------------------------------------------------------
   Nothing is rearranged; the margins come in, the headings come down a size,
   and the filter labels stop reserving a column of their own. */
@media (max-width:640px) {
  .wrap { padding:26px 16px 60px; }
  h1 { font-size:22px; }
  .he.big { font-size:1.55em; }
  a.card, div.card { padding:13px 15px; }
  .panel, .callout, .legend { padding:12px 14px; }
  .section .path { flex-wrap:wrap; }
  .section .path .scope { margin-left:0; width:100%; }
  .chips-label { width:auto; }
  td.he-cell { font-size:17px; }
}