/* =========================================================================
   web.css -- SCREEN-ONLY layer        (linked media="screen")
   Presentation/behavior that must NOT reach the printed page: page chrome,
   the minimizable left nav (TOC + search), term tooltips, the search page,
   hover/:target affordances.
   Built so far: the navigation panel + search-bar behavior (DESIGN.md 5a/5b).
   Tooltips (5c) and the search page (5d) land here in later threads.
   ========================================================================= */

:root{
  --nav-w:290px;
  --nav-bg:#fbfcfe;
  --nav-edge:#e7d9a8;       /* warm hairline, kept clear of ochre's editorial role */
}

/* ---- room for the docked panel (desktop only; never on print) -------- */
@media screen and (min-width:821px){
  body:not(.nav-collapsed){ padding-left:var(--nav-w); transition:padding-left .22s ease; }
}

/* ---- panel shell ----------------------------------------------------- */
.navpanel{
  position:fixed; top:0; left:0; bottom:0; width:var(--nav-w);
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--nav-bg); border-right:1px solid var(--line);
  box-shadow:0 0 18px rgba(20,40,80,.06);
  z-index:50; padding:.7rem .7rem 1rem;
  transform:translateX(0); transition:transform .22s ease;
  font-size:.92rem; overflow:hidden;
}
.nav-collapsed .navpanel{ transform:translateX(-100%); }

/* search row */
.nav-search{ display:flex; gap:.4rem; align-items:center; flex:0 0 auto; }
.nav-search-input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:.95rem;
  padding:.42rem .55rem; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink);
}
.nav-search-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.nav-min{
  flex:0 0 auto; cursor:pointer; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--muted); width:2rem; height:2rem; font-size:1.1rem; line-height:1;
}
.nav-min:hover{ background:var(--fill1); color:var(--ink); }

/* floating re-open button (visible only when collapsed) */
.nav-open{
  position:fixed; top:.7rem; left:.7rem; z-index:49; display:none;
  cursor:pointer; width:2.5rem; height:2.5rem; font-size:1.2rem; line-height:1;
  border:1px solid var(--line); border-radius:9px; background:var(--nav-bg); color:var(--head);
  box-shadow:0 2px 8px rgba(20,40,80,.12);
}
.nav-collapsed .nav-open{ display:block; }
.nav-open:hover{ background:#fff; }

/* backdrop (mobile overlay only) */
.nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,25,45,.42); z-index:40; }

/* ---- dropdown (index mirror) & results (Enter search) ---------------- */
.nav-dropdown, .nav-results{
  flex:0 1 auto; overflow:auto; border:1px solid var(--line); border-radius:8px;
  background:#fff; padding:.35rem; max-height:46vh;
}
.nav-dd-head, .nav-res-head{
  font-size:.78rem; color:var(--muted); padding:.15rem .3rem .35rem; border-bottom:1px solid var(--line);
  margin-bottom:.3rem;
}
.nav-dd-empty{ font-size:.85rem; color:var(--muted); padding:.4rem .3rem; }
/* cloned index entries keep their hanging indent (lemma flush, continuation
   lines indented) but contained: padding-left must exceed the negative
   text-indent so the first line never escapes the dropdown's left edge. */
.nav-dd-item{ margin:.1rem 0; padding:.18rem .35rem .18rem 1.2rem; text-indent:-.85rem; border-radius:5px; font-size:.85rem; }
.nav-dd-item:hover{ background:var(--fill2); }
.nav-dd-item .lemma{ font-weight:700; }
.nav-dd-more{ font-size:.78rem; color:var(--muted); padding:.35rem .3rem 0; font-style:italic; }

.nav-res-item{ display:flex; gap:.4rem; padding:.28rem .3rem; border-radius:5px; text-decoration:none; color:var(--ink); }
.nav-res-item:hover{ background:var(--fill2); }
.nav-res-num{ flex:0 0 auto; font-weight:700; color:var(--accent-deep); min-width:2.2rem; }
.nav-res-snip{ font-size:.82rem; color:var(--muted); }
.nav-res-snip mark, .nav-dd-item mark{ background:#ffe9a8; color:inherit; padding:0 1px; border-radius:2px; }

/* ---- go-to-§ box ----------------------------------------------------- */
.nav-goto{ flex:0 0 auto; background:var(--fill1); border:1px solid var(--line); border-radius:8px; padding:.4rem .5rem; }
.nav-goto-row{ display:flex; align-items:center; gap:.4rem; }
.nav-goto-label{ font-size:.84rem; font-weight:700; color:var(--head); white-space:nowrap; }
.nav-goto-input{ width:4.6rem; flex:0 0 auto; font:inherit; font-size:.92rem; text-align:center;
  padding:.32rem .4rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.nav-goto-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.nav-goto-btn{ margin-left:auto; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
  padding:.32rem .7rem; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:#fff; }
.nav-goto-btn:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.nav-goto-msg{ font-size:.78rem; color:var(--warn); margin:.3rem .1rem 0; }

/* ---- table of contents ---------------------------------------------- */
.nav-toc{ flex:1 1 auto; overflow:auto; padding-right:.2rem; }
.nav-toc ul{ list-style:none; margin:0; padding:0; }
.nav-toc a{ display:block; text-decoration:none; color:var(--ink); border-radius:5px; }
.nav-toc a:hover{ background:var(--fill1); color:var(--accent-deep); }
.toc-i1 > a{ font-weight:700; color:var(--head); padding:.32rem .4rem; margin-top:.25rem; }
.toc-l2{ margin:0 0 .35rem; }
.toc-i2 > a{ font-size:.86rem; color:var(--muted); padding:.16rem .4rem .16rem .9rem; border-left:2px solid var(--line); margin-left:.45rem; }
.toc-i2 > a:hover{ border-left-color:var(--accent); }
/* Third level: the h4s that were always in the document (Ablative, Purpose
   Clauses, …). Stepped in again and set smaller, so the eye can still find the
   h2/h3 spine in a list this long; the rule is hairline rather than 2px so a
   deep nest does not read as a stack of bars. */
.toc-l3{ margin:.05rem 0 .2rem; }
.toc-i3 > a{ font-size:.8rem; color:var(--muted); padding:.1rem .4rem .1rem .9rem;
  border-left:1px solid var(--line); margin-left:1.5rem; }
.toc-i3 > a:hover{ border-left-color:var(--accent); color:var(--accent-deep); }
/* Fourth level: only the third declension's kinds of consonant stem reach here.
   Stepped in once more and set in italic, so depth is signalled by style as well
   as indent -- four nested rules would otherwise read as a picket fence. */
.toc-l4{ margin:0 0 .1rem; }
.toc-i4 > a{ font-size:.76rem; font-style:italic; color:var(--muted);
  padding:.08rem .4rem .08rem .8rem; border-left:1px dotted var(--line); margin-left:2.4rem; }
.toc-i4 > a:hover{ border-left-color:var(--accent); color:var(--accent-deep); font-style:normal; }

/* ---- §5d search page (modal "all instances" results) ----------------- */
.search-page{ position:fixed; inset:0; z-index:80; display:flex; }
.search-page[hidden]{ display:none; }
.sp-backdrop{ position:absolute; inset:0; background:rgba(15,25,45,.45); }
.sp-panel{ position:relative; margin:auto; width:min(680px,94vw); max-height:88vh;
  display:flex; flex-direction:column; background:#fff; border-radius:12px;
  box-shadow:0 12px 48px rgba(15,25,45,.35); overflow:hidden; }
.sp-head{ display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.sp-head-text{ flex:1 1 auto; min-width:0; }
.sp-title{ font-weight:700; color:var(--head); font-size:1.04rem; }
.sp-count{ font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.sp-close{ flex:0 0 auto; cursor:pointer; width:2rem; height:2rem; font-size:1.25rem; line-height:1;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); }
.sp-close:hover{ background:var(--fill1); color:var(--ink); }
.sp-body{ overflow:auto; padding:.5rem .65rem 1rem; }
.sp-variants{ font-size:.78rem; color:var(--muted); font-style:italic; padding:.25rem .4rem .55rem; }
.sp-group{ margin:.3rem 0 .65rem; }
.sp-group-head{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; cursor:pointer;
  background:var(--fill1); border:1px solid var(--line); border-radius:7px; padding:.32rem .55rem;
  color:var(--head); font-weight:700; font-size:.92rem; }
.sp-group-head:hover{ background:var(--fill2); }
.sp-group-count{ margin-left:auto; font-weight:400; font-size:.8rem; color:var(--muted); }
.sp-occ{ display:block; width:100%; text-align:left; cursor:pointer; font:inherit; font-size:.86rem;
  color:var(--ink); background:none; border:0; border-left:2px solid var(--line);
  margin:.18rem 0 .18rem .55rem; padding:.26rem .55rem; border-radius:0 5px 5px 0; }
.sp-occ:hover{ background:var(--fill2); border-left-color:var(--accent); }
.sp-occ mark{ background:#ffe08a; color:inherit; padding:0 1px; border-radius:2px; }
.sp-empty{ color:var(--muted); padding:1.2rem; text-align:center; }
.sp-error{ margin:.6rem; padding:.7rem .85rem; border:1px solid var(--edborder); border-left:4px solid var(--warn);
  border-radius:7px; background:var(--edbg-soft); color:var(--ink); font-size:.9rem; }
body.sp-open{ overflow:hidden; }                 /* lock background scroll while open */
::highlight(pharr-occ){ background:#ffe08a; color:#1c2430; }   /* the jumped-to occurrence */

/* ---- jump-to flash on the target section ----------------------------- */
.nav-flash{ animation:navFlash 1.6s ease-out; }
@keyframes navFlash{
  0%{ background:#fff3cf; box-shadow:0 0 0 4px #fff3cf; }
  100%{ background:transparent; box-shadow:0 0 0 4px transparent; }
}

/* ---- mobile: always-minimized overlay; content never pushed ---------- */
@media screen and (max-width:820px){
  body{ padding-left:0 !important; }
  .navpanel{ width:min(86vw,330px); box-shadow:0 0 30px rgba(0,0,0,.28); }
  .nav-dropdown, .nav-results{ max-height:38vh; }
  body:not(.nav-collapsed) .nav-backdrop{ display:block; }
}
@media screen and (min-width:821px){
  .nav-backdrop{ display:none !important; }
}

/* =========================================================================
   Mobile legibility (screen only, <=820px). Pre-existing wide content blocks
   (paradigm/synopsis grids, the seven-cases table, the perfect-passive and
   scansion set-pieces) are wider than a phone and otherwise force the WHOLE
   document to pan sideways -- so body prose can't be read without horizontal
   scrolling. Fix: trim the page gutter to give prose more room, and contain
   each wide block in its OWN horizontal scroller so only that block scrolls.
   Content-neutral: presentation only, no text/structure changes; never reaches
   print (this file is media="screen" and the query is screen-scoped).
   ========================================================================= */
@media screen and (max-width:820px){
  /* reclaim horizontal room for prose (desktop keeps its 2.6rem gutter) */
  .page{ padding-left:1.05rem; padding-right:1.05rem; }

  /* Wide blocks scroll within themselves instead of panning the page.
     On a <table>, display:block makes the element a block-level scroll
     container while the browser's anonymous table boxes preserve the
     row/cell layout (and therefore all zebra/banding/divider classes).
     width:max-content shrinks a table that already fits to its content
     width -- so a narrow paradigm doesn't stretch its frame across the
     viewport with white to the right -- and the paradigm tables then
     re-center through core.css's margin:auto (matching desktop), while
     example/synopsis grids stay left like desktop. Tables wider than the
     phone are capped by max-width and scroll from the left. */
  .page table.grid{
    display:block;
    width:max-content;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* the seven-cases set-piece is a full-width table whose cells hold wrapping
     prose; keep it full width (its frame hugs the column) rather than
     shrink-wrapping it to the longest line. */
  .page .casetable{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* --- table polish: fit more before the scroller has to engage --------- */
  /* English column headers wrap instead of forcing the table wider -- e.g.
     §31's "Stem Characteristic" / "Genitive Singular", which are nowrap by
     default and were the only thing pushing that table past the viewport.
     Latin forms are never broken: paradigm body cells wrap only at existing
     spaces (multi-form cells like "dī, deī, diī"), and single forms stay
     whole because nothing forces a mid-word break. */
  .page table.grid th{ white-space:normal; }

  /* Recover horizontal room from cell gutters rather than from font size --
     the type stays full-size for a class with limited grammar background.
     Vertical padding and font are untouched, so row banding reads the same. */
  .page table.grid td, .page table.grid th{ padding-left:.42rem; padding-right:.42rem; }
  .page table.grid.tight td, .page table.grid.tight th{ padding-left:.34rem; padding-right:.34rem; }

  /* Flex/inline set-pieces with nowrap rows (perfect-passive system, framed
     and abstract scansion) get the same horizontal scroller as a wrapper. */
  .page .ppsys,
  .page .scanblock,
  .page .schemeblock,
  .page .scanrow{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Verb-conjugation blocks (.vconj) lock two fixed-width columns (16.5rem
     each) that together exceed a phone. Until a block is converted to the
     collapsed layout below, scroll it as one unit (keeps the Ind./Subj. header
     column-aligned with the tenses). (.vconj4 self-scrolls via core.css.) */
  .page .vconj:not(.vstacked){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start;
  }
  .page .vconj:not(.vstacked) .vtense:not(.vt-free),
  .page .vconj:not(.vstacked) .vmoodrow{ max-width:none; justify-content:start; }

  /* ---- collapsed two-column conjugations (.vconj.vstacked) ----
     Each tense's Indicative | Subjunctive pair stacks into a single column
     (Subjunctive under Indicative), and every mood table gets a labelled
     header carrying its § badge (the act/pass tables hold no mood text of
     their own, and the shared .vmoodrow is dropped). */
  .vconj.vstacked{ align-items:stretch; }
  .vconj.vstacked .vmoodrow{ display:none; }
  .vconj.vstacked .vtense:not(.vt-free){ grid-template-columns:1fr; width:auto; max-width:100%; }
  .vconj.vstacked .vtense:not(.vt-free) .vt-title,
  .vconj.vstacked .vtense:not(.vt-free) .vt-gloss{ grid-column:1/-1; }
  .vconj.vstacked .vtense:not(.vt-free) .vpair > div,
  .vconj.vstacked .vtense:not(.vt-free) .vpair > div:nth-of-type(2){ grid-column:1; min-width:0; }
  .vconj.vstacked .vml{
    display:block; font-variant:small-caps; font-weight:700; letter-spacing:.03em;
    font-size:.74rem; color:var(--term-deep); margin:.35rem 0 .12rem;
  }
  .vconj.vstacked .vml.subj{ color:var(--term-deep); }
  .vconj.vstacked .vml .secbadge{
    font-variant:normal; font-weight:700; font-size:.66rem; color:var(--accent);
    background:#fff; border:1px solid var(--line); border-radius:.3rem;
    padding:0 .24rem; margin-right:.26rem; letter-spacing:0; vertical-align:.06em;
  }

  /* ---- four-column verb grids (habeō etc.): stack into two columns on a
     phone -- Indicative | Subjunctive, with the Active block over the Passive
     block, per tense. Voice isn't class-encoded in the markup, so passive
     items carry .v4pass; pushing them after the active items (via order) turns
     the grid's auto-flow into the stack. Colstacks and periphrastic cells ride
     along unchanged. Scoped to .v4stacked so the still-four-column siblings
     (dīcō, audiō) keep today's horizontal scroll until they're converted. */
  .vconj4.v4stacked .v4grid{ display:block; min-width:0; }
  .vconj4.v4stacked .v4voice,
  .vconj4.v4stacked .v4col{ display:none; }   /* global 4-col header is moot once stacked */
  .vconj4.v4stacked .v4tblock{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:.4rem; row-gap:.08rem; align-content:start;
    margin:.35rem 0 .9rem;
  }
  .vconj4.v4stacked .v4tblock > .v4tense{ grid-column:1/-1; order:0; }
  /* mood headers sit inside each voice block and carry the §142-145 badges */
  .vconj4.v4stacked .v4tblock > .v4mh{
    display:block; font-variant:small-caps; font-weight:700;
    letter-spacing:.03em; font-size:.74rem; color:var(--term-deep);
    border-bottom:1px solid var(--line); padding:.12rem .3rem .1rem;
  }
  .vconj4.v4stacked .v4tblock > .v4mh.act{ order:1; }
  .vconj4.v4stacked .v4tblock > .v4mh.pass{ order:2; }
  .vconj4.v4stacked .v4tblock > .v4mh .secbadge{
    font-variant:normal; font-weight:700; font-size:.66rem; color:var(--accent);
    background:#fff; border:1px solid var(--line); border-radius:.3rem;
    padding:0 .24rem; margin-right:.26rem; letter-spacing:0; vertical-align:.06em;
  }
  .vconj4.v4stacked .v4tblock > .v4vh{
    display:block; grid-column:1/-1; font-variant:small-caps; font-weight:700;
    letter-spacing:.04em; font-size:.78rem; color:var(--head); text-align:center;
    background:var(--fill1); border-radius:5px; padding:.16rem; margin-top:.22rem;
  }
  .vconj4.v4stacked .v4tblock > .v4vh.act{ order:1; }
  .vconj4.v4stacked .v4tblock > .v4vh.pass{ order:2; }
  /* Sg./Pl. band labels, one per voice block (the shared .v4grp column is
     dropped, so number is re-stated here). .act rides the active block,
     .pass the passive; the Plural band echoes the row tint. */
  .vconj4.v4stacked .v4tblock > .v4nl{
    display:block; grid-column:1/-1; font-variant:small-caps; font-weight:700;
    letter-spacing:.04em; font-size:.72rem; color:var(--muted);
    padding:.2rem .3rem .05rem; border-bottom:1px dotted var(--line);
  }
  .vconj4.v4stacked .v4tblock > .v4nl.act{ order:1; }
  .vconj4.v4stacked .v4tblock > .v4nl.pass{ order:2; }
  .vconj4.v4stacked .v4tblock > .v4grp{ display:none; }
  .vconj4.v4stacked .v4tblock > .v4cell,
  .vconj4.v4stacked .v4tblock > .v4colstack,
  .vconj4.v4stacked .v4tblock > .v4peri{ order:1; }
  .vconj4.v4stacked .v4tblock > .v4cell.v4pass,
  .vconj4.v4stacked .v4tblock > .v4colstack.v4pass,
  .vconj4.v4stacked .v4tblock > .v4peri.v4pass{ order:2; }

  /* ---- §71-style paradigm collapse (.numcollapse, spike on bonus) ----
     Convert the table to a 4-track grid (case · M · F · N) and stack the
     Singular block over the Plural block. The cells keep their banding (it's
     per-cell, so it survives the grid). The original spanning <thead> is
     hidden; injected band/header rows and a duplicated case label per row
     supply the labels each block needs. Ordering: headword 0, Sg band 1,
     Sg M/F/N 2, Sg data 3, Pl band 4, Pl M/F/N 5, Pl data 6. */
  .page table.numcollapse{
    display:grid; grid-template-columns:max-content 1fr 1fr 1fr;
    width:100%; box-shadow:0 0 0 2px var(--grid-frame);
  }
  .page table.numcollapse thead{ display:none; }
  .page table.numcollapse tbody{ display:contents; }
  .page table.numcollapse tbody tr{ display:contents; }
  .page table.numcollapse .vc-hw, .page table.numcollapse .vc-band,
  .page table.numcollapse .vc-gh{ display:contents; }
  .page table.numcollapse td.casecopy{ display:block; }
  .page table.numcollapse td, .page table.numcollapse th{
    display:block;   /* clean grid items -- avoid anonymous table-cell boxes */
    border:1px solid var(--grid-rule); padding:.22rem .5rem;
  }
  /* default tbody cell = Singular-block data */
  .page table.numcollapse tbody td, .page table.numcollapse tbody th{ order:3; }
  .page table.numcollapse tbody td.pl-grp, .page table.numcollapse td.casecopy{ order:6; }
  /* headword + bands span the full width */
  .page table.numcollapse .vc-hw td{
    order:0; grid-column:1/-1; text-align:center; font-weight:700;
    background:var(--head-blue); color:#fff; padding:.28rem;
  }
  /* the headword band is dark blue, so its .hw/.gl tokens must go light --
     core's white-forcing only covers thead/numband, not these injected bands
     (mirrors core.css table.grid.paradigm thead th .hw/.gl). Covers both
     .numcollapse and .lemcollapse headword bands. */
  .page table.numcollapse .vc-hw td .hw,
  .page table.lemcollapse .vc-hw td .hw{ color:#fff; }
  .page table.numcollapse .vc-hw td .gl,
  .page table.lemcollapse .vc-hw td .gl{ color:#dfeaf6; }
  .page table.numcollapse .vc-band td{
    grid-column:1/-1; font-variant:small-caps; font-weight:700; color:#fff;
    letter-spacing:.04em; padding:.16rem .5rem;
  }
  .page table.numcollapse .vc-band.vc-sg td{ order:1; background:var(--head-blue); }
  .page table.numcollapse .vc-band.vc-pl td{ order:4; background:var(--num-green-deep); }
  .page table.numcollapse .vc-gh.vc-sg td, .page table.numcollapse .vc-gh.vc-sg th{ order:2; }
  .page table.numcollapse .vc-gh.vc-pl td, .page table.numcollapse .vc-gh.vc-pl th{ order:5; }
  .page table.numcollapse .vc-gh th{ text-align:center; font-weight:700; background:var(--fill1); }
  .page table.numcollapse td.vc-corner{ background:transparent; border:0; }
  /* the desktop vertical divider before the plural block is meaningless when
     stacked */
  .page table.numcollapse td.pl-start, .page table.numcollapse th.pl-start{ border-left:1px solid var(--grid-rule); }

  /* asymmetric variant (ācer): three genders in the singular, two in the
     plural. The plural M./F. spans the M+F tracks, centered, so the N column
     still lines up under the singular N. */
  .page table.numcollapse.vc-asym td.pl-grp.pl-start,
  .page table.numcollapse.vc-asym .vc-gh.vc-pl th.vc-mf{ grid-column:2/4; text-align:center; }
  .page table.numcollapse.vc-asym td.pl-grp:not(.pl-start),
  .page table.numcollapse.vc-asym .vc-gh.vc-pl th:not(.vc-mf){ grid-column:4; }

  /* ---- by-lemma collapse for the row-banded one-ending adjective tables
     (.lemcollapse, §82 fēlīx/recēns etc.) ---- These show two lemmas side by
     side (case · l1 M.,F. · l1 N · l2 M.,F. · l2 N) with Singular/Plural as
     row-bands. On a phone we stack the two lemmas: each gets its headword,
     its Singular/Plural bands, and M.,F. · N columns. The second lemma's cells
     carry .vc-l2 (the wbound cell and the one after it) plus a duplicated case
     label; ordering routes them into the lower block. Order: l1 hw 0, Sg band
     1, Sg hdr 2, Sg data 3, Pl band 4, Pl hdr 5, Pl data 6; l2 hw 7 … data 13. */
  .page table.lemcollapse{
    display:grid; grid-template-columns:max-content 1fr 1fr;
    width:100%; box-shadow:0 0 0 2px var(--grid-frame);
  }
  .page table.lemcollapse thead{ display:none; }
  .page table.lemcollapse tbody, .page table.lemcollapse tbody tr{ display:contents; }
  .page table.lemcollapse .vc-hw, .page table.lemcollapse .vc-band,
  .page table.lemcollapse .vc-gh{ display:contents; }
  .page table.lemcollapse td.casecopy{ display:block; }
  .page table.lemcollapse td, .page table.lemcollapse th{
    display:block; border:1px solid var(--grid-rule); padding:.22rem .5rem;
  }
  .page table.lemcollapse td.wbound{ border-left:1px solid var(--grid-rule); }
  .page table.lemcollapse td.vc-corner{ background:transparent; border:0; }
  /* headword + number bands span the row */
  .page table.lemcollapse .vc-hw td{
    grid-column:1/-1; text-align:center; font-weight:700; padding:.28rem;
    background:var(--head-blue); color:#fff;
  }
  .page table.lemcollapse .vc-hw.lc-l1 td{ order:0; }
  .page table.lemcollapse .vc-hw.lc-l2 td{ order:7; margin-top:.5rem; }
  .page table.lemcollapse .vc-band td,
  .page table.lemcollapse tr.numband td{
    grid-column:1/-1; font-variant:small-caps; font-weight:700; color:#fff;
    letter-spacing:.04em; padding:.16rem .5rem;
  }
  .page table.lemcollapse tr.numband:not(.plural-start) td{ order:1; background:var(--head-blue); }
  .page table.lemcollapse tr.numband.plural-start td{ order:4; background:var(--num-green-deep); }
  .page table.lemcollapse .vc-band.lc-l2.lc-sg td{ order:8; background:var(--head-blue); }
  .page table.lemcollapse .vc-band.lc-l2.lc-pl td{ order:11; background:var(--num-green-deep); }
  /* M.,F. · N column headers per block */
  .page table.lemcollapse .vc-gh th{ text-align:center; font-weight:700; background:var(--fill1); }
  .page table.lemcollapse .vc-gh.lc-l1.lc-sg td, .page table.lemcollapse .vc-gh.lc-l1.lc-sg th{ order:2; }
  .page table.lemcollapse .vc-gh.lc-l1.lc-pl td, .page table.lemcollapse .vc-gh.lc-l1.lc-pl th{ order:5; }
  .page table.lemcollapse .vc-gh.lc-l2.lc-sg td, .page table.lemcollapse .vc-gh.lc-l2.lc-sg th{ order:9; }
  .page table.lemcollapse .vc-gh.lc-l2.lc-pl td, .page table.lemcollapse .vc-gh.lc-l2.lc-pl th{ order:12; }
  /* lemma-1 data = case + non-vc-l2 numdata; lemma-2 data = .vc-l2 cells */
  .page table.lemcollapse tr.sg-row > td:first-child,
  .page table.lemcollapse tr.sg-row td.numdata:not(.vc-l2){ order:3; }
  .page table.lemcollapse tr.pl-row > td:first-child,
  .page table.lemcollapse tr.pl-row td.numdata:not(.vc-l2){ order:6; }
  .page table.lemcollapse tr.sg-row td.vc-l2{ order:10; }
  .page table.lemcollapse tr.pl-row td.vc-l2{ order:13; }

  /* §191-198 deponent synopsis: the four conjugations side by side ARE the
     comparison, so don't collapse -- let it scroll (it already does) but pin
     the case-label column so the row labels stay in view. The cells already
     carry a solid background and nowrap, and the table is border-collapse
     separate, so sticky works cleanly. */
  .page table.synopsis td.syn-case,
  .page table.synopsis th.syn-corner{ position:sticky; left:0; z-index:2; }

  /* §205a defective-verbs table sits in the narrower editor panel; give the
     panel a little more room on a phone and tighten the example-grid gutters +
     header type so its five columns fit without scrolling. */
  .page .edpanel{ padding-left:.65rem; padding-right:.65rem; }
  .page table.grid.examplegrid td,
  .page table.grid.examplegrid th{ padding-left:.28rem; padding-right:.28rem; }
  .page table.grid.examplegrid thead th{ font-size:.76rem; }

  /* §52 (comes / pēs / caput, three mute-stem nouns side by side): keep them
     adjacent so the masculine vs neuter comparison stays visible and let it
     scroll, with the case-label column pinned. (A by-lemma collapse can't give
     comes its own wide columns and pēs+caput their own narrow ones in a single
     table -- stacked blocks share column widths -- so sticky-scroll it is.)
     The paradigm case column is transparent, so give it a solid background. */
  .page table.stickycol td:first-child,
  .page table.stickycol th:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--fill2); border-right:2px solid var(--grid-frame);
  }
}

/* =========================================================================
   Grammatical tooltips (DESIGN.md §5c). Injected at runtime by js/tooltips.js;
   styling lives here (media=screen) so the print layer is untouched. The
   clickable affordance must stay faint -- a barely-there dotted underline that
   never recolors the word (so it can't disturb the .term / .la / .hw emphasis
   hierarchy) -- and reveal a soft highlight only on hover/focus.
   ========================================================================= */
.gloss-term{
  cursor: help;
  text-decoration: underline dotted rgba(90,103,117,.30);
  text-underline-offset: .15em;
  text-decoration-thickness: .055em;
  border-radius: 2px;
  transition: background-color .12s ease, text-decoration-color .12s ease;
}
.gloss-term:hover,
.gloss-term:focus-visible{
  background: var(--syn-c2-bg);            /* soft magenta wash, ties to "term" */
  text-decoration-color: var(--term);
  outline: none;
}
.gloss-term:focus-visible{ box-shadow: 0 0 0 2px var(--syn-c2-bg); }

/* The popup. Positioned in document coordinates next to the word, so it tracks
   the word on scroll. Generous but bounded; scrolls when the definition runs
   long; the rest of the page stays visible (no dimming backdrop -- a stray
   click anywhere else dismisses it). */
.gloss-pop{
  position: absolute; z-index: 70;
  width: min(30rem, calc(100vw - 24px));
  max-height: min(70vh, 32rem);
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--edborder);
  border-left: 4px solid var(--term);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(20,30,50,.18), 0 2px 6px rgba(20,30,50,.10);
  padding: .8rem .95rem .85rem;
  font-size: .92rem; line-height: 1.5;
  color: var(--neutral-ink);
}
.gloss-pop[hidden]{ display:none; }

/* LANDING MODE -- opened by URL (#term=<slug>) from the dictionary, rather than
   by clicking a word here. There is no occurrence to sit beside, and this panel
   is not an aside: it is the whole reason the reader is on this page. So it
   stops dressing as an annotation and dresses as a destination -- centred, on a
   dimmed page, with a frame and an eyebrow that say what it is. The dimming also
   does real work: it makes dismissal deliberate, where the annotation's
   light-dismiss would fire on any stray click and strand the reader. */
.gloss-pop-backdrop{
  position: fixed; inset: 0; z-index: 69;
  background: rgba(15,25,45,.45);
}
.gloss-pop-backdrop[hidden]{ display:none; }

.gloss-pop-standalone{
  position: fixed;
  left: 50%; top: 4.5rem;
  transform: translateX(-50%);
  max-height: min(78vh, 36rem);
  width: min(34rem, calc(100vw - 24px));
  /* a destination gets a full frame, not the annotation's single ochre spine */
  border: 1px solid var(--line);
  border-left: 4px solid var(--term);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(15,25,45,.35);
  padding: .75rem 1.05rem 1rem;
}
.gloss-pop-standalone:focus{ outline: none; }
.gloss-pop-standalone:focus-visible{ outline: 2px solid var(--term); outline-offset: 2px; }
@media (max-width: 640px){
  .gloss-pop-standalone{ top: 3rem; }
}

/* Names the panel for a reader who arrived cold. Hidden in annotation mode,
   where the word being explained is right there and needs no announcing. */
.gloss-pop-eyebrow{
  font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .3rem; margin-bottom: .45rem;
  border-bottom: 1px solid var(--line);
}
.gloss-pop-eyebrow[hidden]{ display:none; }

/* On a landing the § links and "All instances" are not footnotes -- they are the
   ways INTO the book from a page the reader reached sideways. Give them weight. */
.gloss-pop-standalone .gloss-pop-links{
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--line);
}
.gloss-pop-standalone .gloss-pop-links a,
.gloss-pop-standalone .gloss-pop-links button{
  font-size: .88rem;
}

/* The labelled exit. The backdrop deliberately does NOT dismiss, so this and the
   corner × are the only ways out besides Escape -- it has to be findable. Pushed
   to the far end of the actions row, away from the links that lead further in,
   so leaving and going deeper are not adjacent targets. */
.gloss-pop-dismiss{
  margin-left: auto;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--muted);
  padding: .15rem .6rem; cursor: pointer;
}
.gloss-pop-dismiss:hover{ background: var(--fill1); color: var(--ink); }
.gloss-pop-dismiss[hidden]{ display:none; }
/* An unresolvable slug: the border drops its term-ochre claim, since there is
   no term. Deliberately visible -- a dead inbound link must not look normal. */
.gloss-pop-missing{ border-left-color: var(--muted); }
.gloss-pop-missing .gloss-pop-term{ color: var(--muted); font-style: italic; }

/* The Kind that was asked for, when arriving via #term=<a subclass name>.
   NO NEGATIVE MARGIN. The first version used `margin: 0 -.25rem` to keep the
   highlight flush with its unmarked neighbours, but that shorthand REPLACED the
   base `margin: .1rem .55rem .1rem 0` -- so the gap to the next Kind went from
   +8.3px to -3.7px and the highlight ran into the following word. Measured, not
   guessed. Padding widens the item instead; the inherited margins keep the gap. */
.gloss-pop-sub-item.is-target{
  font-weight: 600;
  background: var(--syn-c2-bg);
  border-radius: 4px;
  padding: .05rem .3rem;
}
.gloss-pop-head{
  display:flex; align-items:baseline; gap:.5rem;
  margin: 0 0 .35rem;
}
.gloss-pop-term{
  font-weight:700; color: var(--term-deep);
  font-size:1.04rem; flex:1 1 auto;
}
.gloss-pop-src{
  flex:0 0 auto; font-size:.72rem; letter-spacing:.02em;
  text-transform:uppercase; color: var(--muted);
}
.gloss-pop-close{
  flex:0 0 auto; appearance:none; background:none; border:none;
  font-size:1.25rem; line-height:1; color:var(--muted);
  cursor:pointer; padding:0 .1rem; margin-left:.1rem;
}
.gloss-pop-close:hover{ color: var(--term-deep); }
.gloss-pop-def{ margin:0; }
/* Backstop signal when a definition's mini-markup is malformed: the renderer
   shows the parser's error here instead of mis-rendering (the validator is the
   primary guard). Authoring-time only -- clean content never sees this. */
.gloss-markup-error{ color:#b00020; font-style:italic; }
/* Editor's expansion of Pharr's terse definition: the ochre editorial voice,
   mirroring .edbox. Digital-only (tooltips aren't printed), so ochre carries
   the distinction without a redundant non-colour channel. */
.gloss-pop-ed{
  margin-top:.7rem;
  background: var(--edbg-soft);
  border:1px solid var(--edborder);
  border-left:4px solid var(--edrule);
  border-radius:6px;
  padding:.5rem .7rem;
  color: var(--edink);
  line-height:1.5;
}
.gloss-pop-ed[hidden]{ display:none; }
/* Subclasses: the constructions/uses split out of variants in the JSON pass,
   shown as a clickable list (each jumps to its § section). */
.gloss-pop-sub{
  margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid var(--edborder);
  font-size:.86rem; line-height:1.5;
}
.gloss-pop-sub[hidden]{ display:none; }
.gloss-pop-sub-label{
  font-weight:700; color: var(--neutral-ink); margin-right:.35rem;
  display:block; margin-bottom:.2rem;
}
/* The Kinds list scrolls INSIDE the popup, so a case with many constructions
   cannot push the definition and the section links off the bottom. The ablative
   has 25 in Pharr; an unbounded list would make the panel a wall of blue and
   bury the two things a reader most needs -- what the case IS, and the way out.
   Capped in `em` so it tracks the type size, and it collapses to its natural
   height when a case has only a few. */
.gloss-pop-sub-list{
  display:block;
  max-height: 7.5em;
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't chain the scroll to the page behind */
  padding-right:.25rem;
}
.gloss-pop-sub-item{
  display:inline-block; margin:.1rem .55rem .1rem 0;
  color: var(--accent); text-decoration:none; cursor:pointer;
  scroll-margin-block: 2em;       /* leave context above when scrolled into view */
}
.gloss-pop-sub-item:hover{ text-decoration:underline; color: var(--accent-deep); }
span.gloss-pop-sub-item{ color: var(--neutral-ink); cursor:default; } /* no anchor */
.gloss-pop-sub-sec{ color: var(--muted); font-size:.82em; }
.gloss-pop-links{
  display:flex; flex-wrap:wrap; gap:.35rem .8rem;
  margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid var(--edborder);
  font-size:.85rem;
}
.gloss-pop-links a,
.gloss-pop-links button{
  appearance:none; background:none; border:none; padding:0;
  color: var(--accent); cursor:pointer; font:inherit;
  text-decoration:none;
}
.gloss-pop-links a:hover,
.gloss-pop-links button:hover{ text-decoration:underline; color: var(--accent-deep); }
.gloss-pop-allbtn{ font-weight:600; }

/* ---- Footnotes: notes are always visible; the call is a link to its note ----
   The in-text symbol is a plain anchor (href="#fn-N") that jumps to the note --
   it stays a real hyperlink, which matters most in the mobile layout where the
   note can be far from the call. Hover underlines it to read as clickable. */
.fn-call:hover::after{ text-decoration:underline; }