/* =========================================================================
   core.css -- SHARED layer (web + print)
   Linked for all media. Holds everything not specific to one medium:
   :root tokens, typography, section layout, inline roles, the editorial
   system, tables/paradigms, scansion, braces. See the navigation map below.
   Screen-only page chrome still lives here for now; it migrates to web.css
   when the web layer is built (verified then by render-diff vs. print).
   ========================================================================= */

/*
  ============================================================================
  STYLESHEET NAVIGATION  (search '/* ' to jump between rule groups)
  ----------------------------------------------------------------------------
   :root .............. CSS custom properties (color palette, fonts)
   headings ........... h1–h4 styles
   section blocks ..... .sec, .sn numbered-section layout
   inline roles ....... .la .gl .term .hw .noneform .ed  (text-colour roles)
   editorial (ours) ... .ed (inline) / .edbox (note) / .edpanel (panel) — ochre family
   Pharr's notes ...... .editnote — cool blue-grey, deliberately not ochre
   tables ............. paradigm grids, zebra, number-group banding,
                        .numhdr .pl-start .sg-grp .pl-grp .pl-hdr dividers
   scansion ........... per-syllable aligned, CSS-drawn metrical marks
   classification list  right-opening SVG brace (e.g. §39 mute stems)
   perfect passive .... participle + left-opening brace + stacked sum-forms
                        (.ppbrace .ppstem .ppgend .pppart .vperi .vconj4 …)
   print .............. @media print overrides
  ============================================================================
*/
:root{
  --ink:#1c2430;
  --muted:#5a6675;
  --line:#d7deea;
  --paper:#ffffff;
  --accent:#1f5fa6;        /* Latin */
  --accent-deep:#163e6e;
  --num-green:#1f7a68;      /* plural banding (mid) */
  --num-green-deep:#0b4d41; /* plural banding (deep, for headings) */
  --la-green:#10654f;       /* Latin text inside plural (green) cells; matched depth to --accent */
  --head-blue:#123a63;      /* singular header band: deep navy matched to the deep green */
  --grid-frame:#3a3f47;     /* paradigm outer frame: near-black grey */
  --grid-rule:#b9bfc8;      /* paradigm interior rules: light grey */
  --neutral-ink:#222831;    /* "neutral" text (case labels): near-black, not blue */
  --term:#9a3b86;          /* grammatical terms */
  --term-deep:#6f2860;
  --head:#0f2a47;
  --hwcol:#0b6b5e;         /* headwords / lemmas */
  --noneink:#8a94a3;
  --edink:#7a6a16;         /* editorial voice (ours): ochre ink */
  --edbg:#fff8e9;          /* editorial panel background */
  --edbg-soft:#fffdf6;     /* editorial note-box background (lighter) */
  --edrule:#b89a2e;        /* editorial accent rule */
  --edborder:#e7d9a8;      /* editorial border */
  --fill1:#eef4fb;         /* table header fill */
  --fill2:#f6f9fd;         /* zebra */
  --fill3:#eafaf4;         /* neuter / special col */
  --fillrule:#fbf3fb;      /* rule-of-gender callouts */
  --warn:#b34;
  --sans:'Helvetica Neue',Arial,'Liberation Sans',sans-serif;
}
*{box-sizing:border-box}
html{font-size:15px}
body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.5;
  margin:0;
  background:#f3f5f8;
}
.page{max-width:52rem;margin:0 auto;background:var(--paper);padding:2.2rem 2.6rem 3rem}

/* ---- headings ---- */
h1.h1{font-size:1.9rem;color:var(--head);margin:.2rem 0 .2rem;letter-spacing:.01em}
.subtitle{color:var(--muted);font-size:1.02rem;margin:0 0 1.4rem}
h2.h2{font-size:1.32rem;color:#fff;background:var(--head);
  padding:.42rem .7rem;border-radius:7px;margin:2.1rem 0 1rem;letter-spacing:.01em}
h3.h3{font-size:1.08rem;color:var(--head);margin:1.5rem 0 .55rem;
  border-bottom:2px solid var(--line);padding-bottom:.18rem}
h4.h4{font-size:.98rem;color:var(--term-deep);margin:1.1rem 0 .4rem;
  text-transform:none;font-weight:700}
/* h5/h6 exist for the third declension's real depth: I. Consonant Stems (h4)
   > 1.-5. the kinds of stem (h5) > a.-c. the mute paradigm tables (h6). Each
   step is smaller and lighter than the last so four levels of nesting still
   read as a hierarchy rather than as four kinds of bold. */
h5.h5{font-size:.92rem;color:var(--term-deep);margin:.95rem 0 .3rem;font-weight:700}
/* A heading directly under its parent heading needs no gap of its own: the two
   are one unit ("I. Consonant Stems" / "1. Liquid Stems in l"), and the
   collapsed .95rem read as a hole between them. */
h4.h4 + h5.h5, h5.h5 + h6.h6{margin-top:.3rem}
h6.h6{font-size:.86rem;color:var(--muted);margin:.8rem 0 .25rem;
  font-weight:700;font-style:italic}

/* ---- section blocks ---- */
.sec{margin:.55rem 0 .7rem}
.sn{display:inline-block;min-width:1.6rem;font-weight:800;color:var(--accent-deep)}

/* ---- inline roles ---- */
.la{font-weight:700;color:var(--accent)}          /* Latin */
.gl{font-style:italic;color:var(--muted)}          /* English gloss */
.term{font-weight:700;color:var(--term)}           /* grammatical term */
.hw{font-weight:700;color:var(--hwcol)}            /* headword/lemma */
.noneform{font-style:italic;color:var(--noneink);font-weight:400}
.ed{font-style:italic;color:var(--edink)}
.pt{font-style:normal;color:var(--ink)}   /* Pharr’s own connective words (e.g. “etc.”) — upright, not a gloss */
.warn{color:var(--warn)}

/* ---- tables ---- */
table.grid{border-collapse:collapse;margin:.7rem 0 1rem;font-size:.92rem;width:auto}
table.grid caption{caption-side:top;text-align:left;color:var(--muted);
  font-style:italic;padding:.1rem 0 .35rem}
table.grid th{background:var(--fill1);color:var(--head);font-weight:700;
  padding:.28rem .6rem;border:1px solid var(--line);text-align:left;white-space:nowrap}
table.grid td{padding:.24rem .6rem;border:1px solid var(--line);vertical-align:top}
table.grid tbody tr:nth-child(even){background:var(--fill2)}
.case{font-variant:small-caps;font-weight:700;color:var(--neutral-ink);
  letter-spacing:.03em;font-size:.86rem}
td.neut, th.neut{background:var(--fill3)}
table.grid.tight td, table.grid.tight th{padding:.18rem .5rem;font-size:.88rem}

/* ===== table-type differentiation ===== */
/* (a) morphological paradigms: interior rules are a quiet light grey; the outer frame is a
   near-black grey drawn with box-shadow so it sits OUTSIDE the collapsed cell borders and
   can never be overridden (no edge spillage). The blue/green tints carry the meaning. */
table.grid.paradigm{border:0;box-shadow:0 0 0 2px var(--grid-frame)}
table.grid.paradigm td, table.grid.paradigm th{border:1px solid var(--grid-rule)}
table.grid.paradigm thead th{background:var(--head-blue);color:#fff;border-color:var(--grid-frame)}
/* whole-table plural paradigms: the header band is dark green */
table.grid.paradigm thead th.pl-thead{background:var(--num-green-deep);border-color:var(--grid-frame)}
/* table-labelling corner numbers (§56, §59, §63): white background and the same
   dark-blue as the prose section numbers (.sn), at heading size/weight */
table.grid.paradigm thead th.cornerhead{background:#fff;color:var(--accent-deep);
  font-size:.98rem;font-weight:800;font-variant:normal;letter-spacing:0;
  border-color:var(--grid-rule)}
/* readability: any colored token inside the dark-blue header must be light, not its dark default */
table.grid.paradigm thead th .la,
table.grid.paradigm thead th .hw,
table.grid.paradigm thead th .term,
table.grid.paradigm thead th .case,
table.grid.paradigm tr.numband td .la,
table.grid.paradigm tr.numband td .hw{color:#fff}
table.grid.paradigm thead th .gl,
table.grid.paradigm tr.numband td .gl{color:#dfeaf6;font-style:italic}
table.grid.paradigm thead th .sn{color:#cfe0f2}
table.grid.paradigm caption{color:var(--accent-deep);font-weight:600}
/* ===== The Seven Cases (§30): a titled reference set-piece ===== */
.casetable{border-collapse:separate;border-spacing:0;width:100%;margin:.7rem 0 1.2rem;
  box-shadow:0 0 0 2px var(--grid-frame);border-radius:10px;overflow:hidden}
.casetable caption{caption-side:top;text-align:left;background:var(--head-blue);color:#fff;padding:.6rem .9rem}
.casetable caption .ct-title{display:block;font-weight:800;font-size:1.12rem;letter-spacing:.02em}
.casetable caption .ct-sub{display:block;font-weight:400;font-size:.82rem;color:#cfe0f2;
  font-style:italic;margin-top:.12rem}
.casetable td{border-top:1px solid var(--grid-rule);padding:.4rem .9rem;vertical-align:baseline}
.casetable tr:first-child td{border-top:0}
.casetable tr:nth-child(even){background:var(--fill2)}
.casetable td.caselabel{white-space:nowrap;width:1%;border-right:3px solid var(--accent);
  background:var(--fill1)}
.casetable td.caselabel .case{color:var(--accent-deep);font-size:1.04rem;letter-spacing:.04em}
.casetable td.casedef{color:var(--ink)}
/* number-band: visually separate Sg. from Pl. with a heavier rule + tint */
table.grid.paradigm tr.numband td{background:var(--head-blue);color:#fff;
  font-variant:small-caps;letter-spacing:.05em;font-weight:700;
  padding:.12rem .6rem;font-size:.8rem;border-color:var(--grid-frame)}
/* (1) the Plural band heading is dark green */
table.grid.paradigm tr.numband.plural-start td{background:var(--num-green-deep);
  border-color:var(--grid-frame)}
table.grid.paradigm tr.plural-start td, table.grid.paradigm tr.plural-start th{
  border-top:3px solid var(--grid-frame)}
/* boundary between distinct word-paradigms shown side by side */
table.grid.paradigm td.pbound, table.grid.paradigm th.pbound{
  border-left:3px solid var(--grid-frame)}
table.grid.paradigm thead th.pbound{border-left:3px solid var(--grid-frame)}
/* row-banded noun tables (Sg./Pl. stacked vertically to fit several lemmas side by side):
   echo the adjective/pronoun banding with blue (Sg.) / green (Pl.) row tints,
   and separate the distinct words with a vertical rule via .wbound. */
table.grid.paradigm tr.sg-row td.numdata{background:rgba(31,95,166,.07)}
table.grid.paradigm tr.pl-row td.numdata{background:rgba(11,107,94,.09)}
table.grid.paradigm tr.sg-row:nth-of-type(even) td.numdata{background:rgba(31,95,166,.11)}
table.grid.paradigm tr.pl-row:nth-of-type(even) td.numdata{background:rgba(11,107,94,.13)}
table.grid.paradigm tr.pl-row td.numdata .neut,
table.grid.paradigm tr.sg-row td.numdata .neut{background:transparent}
/* vertical rule between distinct words (lemma boundary) — neutral, heavier grey */
table.grid.paradigm td.wbound, table.grid.paradigm th.wbound{
  border-left:3px solid var(--grid-frame)}
table.grid.paradigm tr.numband td.wbound{border-left:3px solid var(--grid-frame)}
/* interior grid: light grey throughout; the outer frame is the table's box-shadow */
table.grid.paradigm tbody td{border-color:var(--grid-rule)}

/* (b) syntactic / example tables: warm, borderless-row, term-colored frame */
table.grid.examplegrid{border:1px solid var(--line);border-left:4px solid var(--term)}
table.grid.examplegrid td{border:0;border-bottom:1px solid var(--fillrule);
  vertical-align:top;padding:.3rem .7rem}
table.grid.examplegrid tbody tr:nth-child(even){background:var(--fillrule)}
table.grid.examplegrid tr:last-child td{border-bottom:0}

/* (c) verb conjugation: 2-wide (sg|pl) × 3 (person) grid blocks */
.vconj{margin:.7rem 0 1rem}
.vconj .vtense{margin:.55rem 0 .9rem}
.vconj .vt-label{font-variant:small-caps;letter-spacing:.05em;font-weight:700;
  color:var(--accent-deep);font-size:.82rem;margin-bottom:.18rem}
.vconj .vt-gloss{font-style:italic;color:var(--muted);font-size:.84rem;margin:.02rem 0 .3rem}
table.vgrid{border-collapse:collapse;font-size:.9rem}
table.vgrid th{background:var(--fill1);color:var(--head);font-weight:700;
  font-variant:small-caps;letter-spacing:.04em;font-size:.78rem;
  padding:.14rem .55rem;border:1px solid var(--line)}
table.vgrid td{padding:.16rem .6rem;border:1px solid var(--line);white-space:nowrap}
table.vgrid td.pers{font-weight:700;color:var(--muted);text-align:right;
  font-size:.82rem;background:var(--fill2)}
table.vgrid td .la{font-weight:700;color:var(--accent)}
table.vgrid.act{border-left:3px solid var(--accent)}
table.vgrid.pass{border-left:3px solid var(--term)}
.vconj .vpair{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start}
.vconj .vcol-label{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  font-size:.8rem;letter-spacing:.04em;margin:0 0 .15rem}

/* rule-of-gender / note callouts */
.callout{background:var(--fillrule);border-left:4px solid var(--term);
  padding:.45rem .7rem;border-radius:0 6px 6px 0;margin:.6rem 0}
.note{background:#f4f7fb;border-left:4px solid var(--accent);
  padding:.45rem .7rem;border-radius:0 6px 6px 0;margin:.6rem 0;color:#2a3543}
.subrules{margin:.2rem 0 .2rem 1.4rem}
.subrules .sub{display:block;margin:.18rem 0}
.sub-letter{font-weight:800;color:var(--term);font-style:italic;margin-right:.25rem}
/* a free-standing sub-lettered paragraph (not inside .subrules) gets indented too */
.sec > .sub-letter:first-child{margin-left:0}
.sec.subitem{margin-left:1.4rem}
/* second-level nesting: a sub-note under a numbered/lettered item indents further */
.subrules .sub.lvl2{margin-left:1.5rem}
.subrules .sub.num{margin-top:.4rem}
/* center paradigm and verb tables like Pharr; example tables stay left */
table.grid.paradigm{margin-left:auto;margin-right:auto}
.vconj{display:flex;flex-direction:column;align-items:center}
.vconj .vtense{width:100%;max-width:42rem}
.vconj > .vt-label{align-self:center}

/* ---- scansion: per-syllable aligned, CSS-drawn marks ---- */
:root{ --markink:#b3402f; }   /* warm rust for metrical marks */

/* Aligned display: each syllable carries its mark directly above it. */
.scan{display:flex;flex-wrap:wrap;align-items:flex-end;margin:.15rem 0 .6rem;
  font-weight:700;color:var(--accent);letter-spacing:.005em;line-height:1.18}
.scan .ft{display:inline-flex;align-items:flex-end}
.scan .syl{display:inline-flex;flex-direction:column;align-items:center;
  justify-content:flex-end;padding:0 .06em}
.scan .syl.elide .txt{color:#aeb6c2;font-weight:600}
.scan .syl.elide .txt::after{content:"";} /* tie char is already in text */
.scan .mk{height:1.05em;width:100%;display:flex;align-items:flex-end;justify-content:center}
.scan .footsep{align-self:stretch;border-left:1px solid #e1e7f0;margin:.1em .16em 0}
/* word gap: wider blank space between words (no rule) */
.scan .wsep{display:inline-block;width:.85em}

/* the three marks, drawn (not glyphs) so they are crisp & identical anywhere */
.scan .mk.long::before{content:"";display:block;width:.82em;height:.15em;
  background:var(--markink);border-radius:1px;margin-bottom:.34em}
/* breve = smooth semicircular cup: bottom-only border on a wide ellipse */
.scan .mk.breve::before{content:"";display:block;width:.6em;height:.30em;
  border:0 solid var(--markink);border-bottom-width:.13em;border-radius:0 0 .6em .6em/0 0 .55em .55em;
  margin-bottom:.22em}
.scan .mk.anc::before{content:"";display:block;width:.6em;height:.30em;opacity:.55;
  border:0 dashed var(--markink);border-bottom-width:.13em;border-radius:0 0 .6em .6em/0 0 .55em .55em;
  margin-bottom:.22em}

/* inline marks for running prose (e.g. "a dactyl —⏑⏑") */
.im{display:inline-block;vertical-align:.18em;margin:0 .07em}
.im.long{width:.7em;height:.13em;background:var(--markink);border-radius:1px;vertical-align:.28em}
.im.breve{width:.5em;height:.26em;border:0 solid var(--markink);border-bottom-width:.11em;
  border-radius:0 0 .5em .5em/0 0 .5em .5em}
.im.anc{width:.5em;height:.26em;border:0 dashed var(--markink);border-bottom-width:.11em;
  border-radius:0 0 .5em .5em/0 0 .5em .5em;opacity:.55}
.ift{display:inline-block;margin-right:.45em;white-space:nowrap}

/* legacy two-line scansion fallback (unused by default) */
.scanrow{margin:.35rem 0 .7rem;font-size:1.02rem}
.scanlat{font-weight:700;color:var(--accent);letter-spacing:.01em}
.scanmarks{margin-top:.05rem;line-height:1}

/* framed scansion container */
.scanblock{background:#f7faff;border:1px solid #e2e9f4;border-left:4px solid var(--accent);
  border-radius:8px;padding:.7rem .9rem;margin:.7rem 0}

/* two-tier abstract metrical scheme (§394) */
.schemeblock{padding:1rem 1.1rem}
.scheme{display:flex;align-items:center;flex-wrap:wrap;font-size:1.15rem}
.scheme .ft2{display:inline-flex;align-items:center;gap:.5em}
.scheme .schemesep{align-self:stretch;border-left:1px solid #d7deea;margin:0 .55em;
  min-height:2.3em}
.scheme .pos1{display:flex;flex-direction:column;align-items:center;justify-content:center}
.scheme .ictus{color:var(--markink);font-weight:700;line-height:.6;height:.7em;font-size:1.1em}
.scheme .markrow{display:flex;align-items:center;justify-content:center}
.scheme .pos2{display:flex;flex-direction:column;align-items:center;gap:.42em}
.scheme .tier{display:flex;align-items:center;justify-content:center;gap:.18em}
.scheme .tier.bot{padding-top:.05em;border-top:1px dotted #cfd9e8;width:100%}
/* center the single mark / pair within the scheme rows */
.scheme .im{margin:0 .06em}

/* ---- classification list with right-opening SVG brace (e.g. §39 mute stems) ---- */
.classlist{margin:.6rem 0 1rem .4rem;font-size:.95rem}
.classlist .clrow{display:flex;align-items:baseline;margin:.16rem 0}
.classlist .clnum{flex:0 0 1.4rem;font-weight:700;color:var(--accent-deep)}
.classlist .clhead{font-weight:700;color:var(--term);margin:.5rem 0 .3rem}
.classlist .clhead.second{margin-top:.7rem}
/* the braced item: number | label | brace | stacked sub-rows */
.braceitem{display:flex;align-items:stretch;margin:.16rem 0}
.braceitem .clnum{flex:0 0 1.4rem;font-weight:700;color:var(--accent-deep);
  display:flex;align-items:center}
.braceitem .blabel{display:flex;align-items:center;font-style:italic;
  padding-right:.45rem;white-space:nowrap}
.braceitem .bsvg{flex:0 0 auto;display:flex;align-items:stretch}
.braceitem .bsvg svg{height:100%;width:.85rem;display:block}
.braceitem .bsvg svg path{fill:none;stroke:var(--term);stroke-width:2}
.braceitem .bsub{display:flex;flex-direction:column;justify-content:center;
  padding-left:.5rem}
.braceitem .bsub .sline{margin:.13rem 0;line-height:1.3}
.braceitem .bsub .sl{font-weight:700;font-style:italic;color:var(--term);
  margin-right:.3rem}

/* ---- perfect passive system: participle (once) + left-opening brace + stacked sum-forms ---- */
.ppsys{margin:.5rem 0 .2rem;border-left:4px solid var(--term);
  background:#fbf5f9;padding:.5rem .7rem .6rem}
.ppsys .ppsys-head{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  font-size:.82rem;margin-bottom:.4rem}
.ppsys .pptense{margin:.35rem 0}
.ppsys .pptense-label{font-variant:small-caps;font-weight:700;color:var(--accent-deep);
  font-size:.8rem;margin-bottom:.15rem}
.ppsys .pptense-gloss{font-style:italic;color:var(--ink);opacity:.82;
  font-size:.85rem;margin-bottom:.2rem}
.ppsys .ppcols{display:flex;flex-wrap:wrap;gap:1.4rem}
.ppsys .ppcol{display:flex;flex-direction:column;gap:.45rem}
.ppsys .ppcol-label{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  font-size:.78rem}
/* one number-group: participle | brace | stacked auxiliaries */
.ppgrid{display:flex;align-items:stretch}
.ppgrid .pppart{display:flex;align-items:center;padding-right:.15rem;
  font-weight:700;color:var(--accent);white-space:nowrap}
.ppgrid .ppbrace{flex:0 0 auto;display:flex;align-items:stretch}
.ppgrid .ppbrace svg{height:100%;width:.7rem;display:block}
.ppgrid .ppbrace svg path{fill:none;stroke:var(--term);stroke-width:2}
.ppgrid .ppaux{display:flex;flex-direction:column;justify-content:center;
  padding-left:.4rem}
.ppgrid .ppaux .auxline{margin:.07rem 0;line-height:1.25;white-space:nowrap}
.ppgrid .ppaux .auxline .la{font-weight:700;color:var(--accent)}
.ppsys .noneform{font-style:italic;color:var(--ink);opacity:.6;font-size:.85rem}

/* ===== four-column ACTIVE/PASSIVE conjugation grid (habeō, dīcō, audiō) ===== */
.vconj4{margin:.8rem 0 1.1rem;font-size:.9rem;overflow-x:auto}
.vconj4 .v4grid{display:grid;
  grid-template-columns:max-content repeat(4, minmax(7rem, 1fr));
  border:1px solid var(--line);border-left:3px solid var(--accent);min-width:34rem}
.vconj4 .v4voice{font-variant:small-caps;font-weight:700;letter-spacing:.05em;
  text-align:center;padding:.2rem .4rem;border-bottom:1px solid var(--line);
  background:var(--fill1);color:var(--head);font-size:.82rem}
.vconj4 .v4voice.act{grid-column:2 / 4;border-right:2px solid var(--line)}
.vconj4 .v4voice.pass{grid-column:4 / 6}
.vconj4 .v4voice.corner{grid-column:1 / 2;background:var(--fill2)}
.vconj4 .v4col{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  font-size:.76rem;letter-spacing:.03em;text-align:center;padding:.18rem .4rem;
  border-bottom:1px solid var(--line);background:var(--fill2)}
.vconj4 .v4col .secbadge{font-variant:normal;font-weight:700;font-size:.68rem;color:var(--accent);
  background:#fff;border:1px solid var(--line);border-radius:.3rem;
  padding:0 .26rem;margin-right:.28rem;letter-spacing:0;vertical-align:.08em}
.vconj4 .v4col.corner{grid-column:1 / 2}
.vconj4 .v4col.actsubj{border-right:2px solid var(--line)}
.vconj4 .v4tense{grid-column:1 / 6;text-align:center;font-variant:small-caps;
  font-weight:700;letter-spacing:.06em;font-size:.8rem;color:var(--accent-deep);
  background:#fff;padding:.32rem .4rem .2rem;border-top:1px solid var(--line)}
.vconj4 .v4gloss{font-variant:normal;font-style:italic;font-weight:400;
  color:var(--muted);font-size:.82rem;letter-spacing:0}
.vconj4 .v4grp{grid-column:1 / 2;display:flex;align-items:center;justify-content:flex-end;
  font-weight:700;color:var(--muted);font-size:.78rem;padding:.1rem .5rem .1rem .4rem;background:var(--fill2)}
.vconj4 .v4cell{padding:.12rem .55rem;border-top:1px solid #edf1f7;white-space:nowrap;display:flex;align-items:center}
.vconj4 .v4cell.actsubj{border-right:2px solid var(--line)}
.vconj4 .v4cell .pers{color:var(--muted);font-weight:700;font-size:.78rem;margin-right:.5rem;min-width:.7rem;text-align:right}
.vconj4 .v4cell .la{font-weight:700;color:var(--accent)}
.vconj4 .v4cell.empty,.vconj4 .v4peri.empty{background:repeating-linear-gradient(135deg,#fafbfd,#fafbfd 6px,#f1f4f9 6px,#f1f4f9 12px)}
.vconj4 .v4colstack{display:flex;flex-direction:column;justify-content:center}
.vconj4 .v4colstack.actsubj{border-right:2px solid var(--line)}
.vconj4 .v4colstack .v4cell{border-top:0;padding-top:.06rem;padding-bottom:.06rem}
.vconj4 .v4grp-sg3{align-items:center}
.vconj4 .v4peri{padding:.18rem .55rem;border-top:1px solid #edf1f7;display:flex;align-items:stretch}
.vconj4 .v4peri.actsubj{border-right:2px solid var(--line)}
.vconj4 .v4peri .pppart{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-right:.1rem;font-weight:700;color:var(--accent);white-space:nowrap;font-size:.86rem;line-height:1.18}
.vconj4 .v4peri .pppart .ppgend{font-size:.8rem}
.vconj4 .v4peri .ppbrace{flex:0 0 auto;display:flex;align-items:stretch}
.vconj4 .v4peri .ppbrace svg{height:100%;width:.7rem;display:block}
.vconj4 .v4peri .ppbrace svg path{fill:none;stroke:var(--term);stroke-width:2}
.vconj4 .v4peri .ppaux{display:flex;flex-direction:column;justify-content:center;padding-left:.35rem}
.vconj4 .v4peri .ppaux .auxline{margin:.04rem 0;line-height:1.2;white-space:nowrap}
.vconj4 .v4peri .ppaux .auxline .la{font-weight:700;color:var(--accent);font-size:.86rem}
@media print{.vconj4{overflow-x:visible}}  /* break control lives in print.css */

/* singular/plural distinction inside the shared four-column cells:
   plural rows get a slightly cooler shade + a heavier boundary above the first row */
.vconj4 .v4cell.v4pl,.vconj4 .v4colstack.v4pl .v4cell,
.vconj4 .v4colstack.v4pl,.vconj4 .v4peri.v4pl{background:#f1f5fb}
.vconj4 .v4grp.v4pl,.vconj4 .v4grp.v4firstpl{background:#e8eef7}
/* keep the hatched "form lacking" texture even when the cell is plural */
.vconj4 .v4cell.v4pl.empty,.vconj4 .v4peri.v4pl.empty,
.vconj4 .v4colstack.v4pl .v4cell.empty{
  background:repeating-linear-gradient(135deg,#eef2f8,#eef2f8 6px,#e2e8f2 6px,#e2e8f2 12px)}

/* Mobile voice-stack hooks (the phone reflow lives in web.css). These keep the
   added markup inert on desktop AND in print: the per-tense wrapper is
   transparent to the grid, and the injected mood/voice labels are hidden. */
.v4tblock{display:contents}
.v4mh,.v4vh,.v4nl{display:none}
/* injected per-table mood labels for the collapsed two-column conjugations
   (.vconj.vstacked); hidden on desktop and in print, shown only on phones */
.vml{display:none}
/* injected rows/cells for the collapsed paradigm tables (.numcollapse, a §71
   spike): the duplicated case labels and the per-number band/header rows are
   inert on desktop and in print -- the table renders normally there. */
.vc-hw,.vc-band,.vc-gh{display:none}
td.casecopy{display:none}



/* ===== legacy 2-column tables: tense-name title rows + locked subjunctive alignment ===== */
:root{ --vcolw:16.5rem; --vcolgap:1.4rem; }
/* lock the tense block to a 2-track grid: indicative column is always exactly
   --vcolw wide, so the subjunctive column's left edge is constant across every
   tense — even when the two sides carry different section badges, and even for
   single-column tenses (future, fut. perf.) which occupy only the first track. */
.vconj .vtense:not(.vt-free){display:grid;
  grid-template-columns:var(--vcolw) var(--vcolw);
  column-gap:var(--vcolgap);justify-content:center;width:max-content;max-width:100%}
.vconj .vtense:not(.vt-free) .vt-gloss{grid-column:1 / 3}
.vconj .vtense:not(.vt-free) .vt-title{grid-column:1 / 3;
  font-variant:small-caps;font-weight:700;letter-spacing:.06em;
  font-size:.82rem;color:var(--accent-deep);text-align:center;
  padding:.2rem 0 .26rem;margin-bottom:.1rem;border-bottom:1px solid var(--line)}
.vconj .vtense:not(.vt-free) .vt-title .vt-suff{font-variant:normal;font-style:italic;font-weight:400;
  color:var(--muted);font-size:.82rem;letter-spacing:0}
/* the pair is now just contents flowing into the two grid tracks */
.vconj .vtense:not(.vt-free) .vpair{display:contents}
.vconj .vtense:not(.vt-free) .vpair > div{grid-column:1;min-width:0}
.vconj .vtense:not(.vt-free) .vpair > div:nth-of-type(2){grid-column:2}
.vconj .vtense:not(.vt-free) .vpair > table.vgrid{grid-column:1;width:100%}
.vconj .vtense:not(.vt-free) .vpair > div > table.vgrid{width:100%}
/* allow plural forms to size naturally inside the locked column */
.vconj .vtense table.vgrid td{white-space:nowrap}

/* paror perfect-system bands, inline within the 2-column vtense grid (no magenta box) */
.vconj .vt-peri .vpericol{display:flex;flex-direction:column;gap:.4rem}
.vconj .vt-peri .vperi-head{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  font-size:.78rem;letter-spacing:.02em;padding:.1rem .55rem;background:var(--fill2);border:1px solid var(--line)}
.vconj .vt-peri .vperi-row{display:flex;align-items:stretch;gap:.5rem;padding:.12rem .2rem}
.vconj .vt-peri .vperi-row.vperi-pl{background:#f1f5fb}
.vconj .vt-peri .vperi-grp{font-weight:700;color:var(--muted);font-size:.78rem;display:flex;align-items:center;min-width:1.6rem}
.vconj .vt-peri .vperi{display:flex;align-items:stretch}
.vconj .vt-peri .vperi .pppart{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-right:.1rem;font-weight:700;color:var(--accent);white-space:nowrap;font-size:.86rem;line-height:1.18}
.vconj .vt-peri .vperi .pppart .ppgend{font-size:.8rem}
.vconj .vt-peri .vperi .ppbrace{flex:0 0 auto;display:flex;align-items:stretch}
.vconj .vt-peri .vperi .ppbrace svg{height:100%;width:.7rem;display:block}
.vconj .vt-peri .vperi .ppbrace svg path{fill:none;stroke:var(--term);stroke-width:2}
.vconj .vt-peri .vperi .ppaux{display:flex;flex-direction:column;justify-content:center;padding-left:.35rem}
.vconj .vt-peri .vperi .ppaux .auxline{margin:.04rem 0;line-height:1.2;white-space:nowrap}
.vconj .vt-peri .vperi .ppaux .auxline .la{font-weight:700;color:var(--accent);font-size:.86rem}
.vconj .vt-peri .vperi-lacking{padding:.5rem .55rem}


/* ===== Second/Third/Fourth-conjugation deponent synopsis ===== */
/* four verb classes (II, III, III-iō, IV) each get a colour identity, echoing the
   sg/pl banding used in the noun & adjective paradigm tables. */
:root{
  --syn-c0:#1f5fa6; --syn-c0-deep:#123a63; --syn-c0-bg:rgba(31,95,166,.07);
  --syn-c1:#1f7a68; --syn-c1-deep:#0b4d41; --syn-c1-bg:rgba(11,107,94,.09);
  --syn-c2:#9a3b86; --syn-c2-deep:#6f2860; --syn-c2-bg:rgba(154,59,134,.08);
  --syn-c3:#b5701a; --syn-c3-deep:#7d4a0a; --syn-c3-deep:#7d4a0a; --syn-c3-bg:rgba(181,112,26,.10);
}
table.synopsis{border-collapse:separate;border-spacing:0;width:100%;max-width:46rem;
  border:1px solid var(--grid-frame);font-size:.9rem}
table.synopsis th,table.synopsis td{padding:.18rem .6rem;text-align:left;vertical-align:baseline}
/* class header row (II / III / III(-iō) / IV) */
table.synopsis .syn-chdr{font-variant:small-caps;font-weight:700;letter-spacing:.05em;
  color:#fff;text-align:center;font-size:.82rem}
table.synopsis .syn-c0.syn-chdr{background:var(--syn-c0-deep)}
table.synopsis .syn-c1.syn-chdr{background:var(--syn-c1-deep)}
table.synopsis .syn-c2.syn-chdr{background:var(--syn-c2-deep)}
table.synopsis .syn-c3.syn-chdr{background:var(--syn-c3-deep)}
/* verb sub-header row */
table.synopsis .syn-vhdr{text-align:center;font-size:.8rem;font-weight:400;
  border-bottom:2px solid var(--grid-frame)}
table.synopsis .syn-vhdr .la{font-weight:700}
table.synopsis .syn-c0.syn-vhdr{background:var(--syn-c0-bg)}
table.synopsis .syn-c1.syn-vhdr{background:var(--syn-c1-bg)}
table.synopsis .syn-c2.syn-vhdr{background:var(--syn-c2-bg)}
table.synopsis .syn-c3.syn-vhdr{background:var(--syn-c3-bg)}
table.synopsis .syn-vhdr .la{color:inherit}
table.synopsis .syn-c0.syn-vhdr .la{color:var(--syn-c0-deep)}
table.synopsis .syn-c1.syn-vhdr .la{color:var(--syn-c1-deep)}
table.synopsis .syn-c2.syn-vhdr .la{color:var(--syn-c2-deep)}
table.synopsis .syn-c3.syn-vhdr .la{color:var(--syn-c3-deep)}
table.synopsis .syn-corner{background:var(--fill2)}
/* mood/form section heading rows, spanning the whole width */
table.synopsis .syn-sechead td{font-variant:small-caps;font-weight:700;letter-spacing:.06em;
  color:var(--accent-deep);text-align:center;font-size:.84rem;
  background:var(--fill1);border-top:1px solid var(--grid-frame);border-bottom:1px solid var(--line);
  padding-top:.26rem;padding-bottom:.22rem}
table.synopsis .syn-sechead .secbadge{font-variant:normal;font-weight:700;font-size:.7rem;
  color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:.3rem;
  padding:0 .3rem;margin-right:.4rem;letter-spacing:0;vertical-align:.08em}
/* case label gutter */
table.synopsis .syn-case{font-variant:small-caps;font-weight:700;color:var(--muted);
  font-size:.76rem;letter-spacing:.02em;white-space:nowrap;background:var(--fill2);
  border-right:1px solid var(--line)}
/* form cells: each class tinted + Latin recoloured to its class colour */
table.synopsis .syn-form{white-space:nowrap;border-top:1px solid #edf1f7}
table.synopsis .syn-c0.syn-form{background:var(--syn-c0-bg)}
table.synopsis .syn-c1.syn-form{background:var(--syn-c1-bg)}
table.synopsis .syn-c2.syn-form{background:var(--syn-c2-bg)}
table.synopsis .syn-c3.syn-form{background:var(--syn-c3-bg)}
table.synopsis .syn-c0.syn-form .la{color:var(--syn-c0-deep);font-weight:700}
table.synopsis .syn-c1.syn-form .la{color:var(--syn-c1-deep);font-weight:700}
table.synopsis .syn-c2.syn-form .la{color:var(--syn-c2-deep);font-weight:700}
table.synopsis .syn-c3.syn-form .la{color:var(--syn-c3-deep);font-weight:700}
/* heavier vertical rules separating the four classes */
table.synopsis .syn-c0{border-left:3px solid var(--grid-frame)}
table.synopsis .syn-c1,table.synopsis .syn-c2,table.synopsis .syn-c3{border-left:2px solid var(--line)}
@media print{table.synopsis{break-inside:auto}table.synopsis .syn-sechead{break-after:avoid}}

@media print{ :root{ --vcolw:14.5rem } }

/* single hoisted Indicative/Subjunctive mood header (once per two-column table) */
.vconj .vmoodrow{display:grid;grid-template-columns:var(--vcolw) var(--vcolw);
  column-gap:var(--vcolgap);justify-content:center;width:max-content;max-width:100%;
  margin:.2rem 0 .35rem}
.vconj .vmood{font-variant:small-caps;font-weight:700;letter-spacing:.04em;
  font-size:.92rem;color:var(--term-deep);padding:.1rem 0 .28rem;
  border-bottom:2px solid var(--line)}
.vconj .vmood-ind{color:var(--term-deep)}
.vconj .vmood-subj{color:var(--term-deep)}
.vconj .vmood .secbadge{font-variant:normal;font-weight:700;font-size:.74rem;color:var(--accent);
  background:var(--fill1);border:1px solid var(--line);border-radius:.3rem;
  padding:0 .32rem;margin-right:.4rem;letter-spacing:0;vertical-align:.1em}




/* the "is/eis/iis" stacked alternates */
.alts{color:var(--accent);font-weight:700}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* prose cross-references: muted so they don't clash with blue Latin */
a.xref{color:var(--accent-deep);text-decoration:none;
  border-bottom:1px dotted #9fb4d0}
a.xref:hover{border-bottom-style:solid;text-decoration:none}
@media print{ a.xref{color:inherit;border-bottom:0} }

/* index */
.indexcols{column-count:2;column-gap:1.6rem;font-size:.86rem}
.idx{break-inside:avoid;margin:.05rem 0;text-indent:-1.1rem;padding-left:1.1rem;line-height:1.32}
.idx .lemma{font-weight:700;color:var(--accent-deep)}
/* Index lemmas come in kinds, and the old single blue implied they were all
   Latin. They are not: the first column alone holds "Anticipation, clauses of",
   "Appointing, verbs of, with two accusatives" and "At" (the ENGLISH preposition,
   "translated by prep. with abl.").
   Each kind takes the colour this edition ALREADY assigns to that kind of thing,
   so the index makes no new claims -- ONLY LATIN IS BLUE:
     .lemma-latin   -- var(--accent), the same blue as .la everywhere else, so the
       index agrees with the text about what Latin looks like.
     .lemma-term    -- var(--term-deep): the edition's magenta for a grammatical
       term, one step deeper than b.term's var(--term) because index type is
       .86rem and the lighter tone goes thin. Clicking opens its glossary entry;
       the
       dotted underline is the affordance the vocabulary app uses for a grammar
       link, so the two surfaces teach one gesture.
     .lemma-english -- var(--neutral-ink), documented in the palette as "near-
       black, not blue". An English topic heading ("Ability", "Time") is neither
       Latin nor a term, and should look like neither.
     .idx-added     -- ours, not Pharr's: editorial ochre. Selected from the
       ENTRY, not a class on the span, because the span is regenerated on every
       build run and a marker there does not survive. It must come last so it
       wins over .lemma-term, which every added entry also carries. */
.idx .lemma-plain{color:var(--neutral-ink)}
.idx .lemma-latin{color:var(--accent)}
.idx .lemma-english{color:var(--neutral-ink)}
.idx .lemma-term{color:var(--term-deep);cursor:pointer;
  text-decoration:underline dotted var(--line);text-underline-offset:3px}
.idx .lemma-term:hover{color:var(--term);text-decoration-color:var(--term)}
.idx-added .lemma{color:var(--edink)}
.idx-added .lemma:hover{color:var(--edrule);text-decoration-color:var(--edrule)}
.idxnote{font-size:.85rem}

/* Invisible landing anchors for section cross-references.
   BLOCK, not inline-block: an inline-block on its own line still generates a
   LINE BOX, so each of these 139 zero-height anchors was reserving a full
   line-height of nothing. Measured on screen: ~7px apiece where margins partly
   absorbed it, the full ~27px directly under a heading (the gap after "3. Liquid
   Stems in r" was 35px against 8px for a heading whose section carries its own
   id), and 1,440px of phantom whitespace over the document. A zero-height block
   generates no line box. Verified that no stub sits mid-paragraph, so none of
   them was relying on inline flow. Print was never affected -- print.css has
   always set .anchor-stub{display:none}. */
.anchor-stub{display:block;width:0;height:0;overflow:hidden}
.vconj .secbadge{font-variant:normal;font-weight:700;font-size:.72rem;color:var(--accent);
  background:var(--fill1);border:1px solid var(--line);border-radius:.3rem;
  padding:0 .3rem;margin-right:.35rem;vertical-align:.08em;letter-spacing:0}
/* Labeled infinite-form sub-blocks (imperative, infinitive, participle, etc.) */
.infforms{margin:.6rem 0 1rem}
.infforms .iff{margin:.3rem 0;padding:.3rem .55rem;border-left:3px solid var(--accent);
  background:var(--fill1)}
.infforms .iff-head{font-variant:small-caps;font-weight:700;color:var(--term-deep);
  letter-spacing:.04em;margin-bottom:.12rem}
.infforms .iff-head .secbadge{font-variant:normal;font-weight:700;font-size:.72rem;
  color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:.3rem;
  padding:0 .3rem;margin-right:.35rem;letter-spacing:0;vertical-align:.08em}
.infforms .iff-body{font-size:.92rem;line-height:1.5}
.infforms .iff-body .sub-row{display:block;margin:.05rem 0}
.infforms .iff-body .vlabel{color:var(--muted);font-style:italic;margin-right:.25rem}
/* Singular/plural grouped headers for declension tables */
.numgroup thead .numhdr{font-variant:small-caps;letter-spacing:.06em;font-weight:700;
  color:#fff;text-align:center}
/* tint the grouped header cells to echo the body banding: Sg. navy, Pl. green */
.numgroup thead .numhdr{background:var(--head-blue)}
.numgroup thead .numhdr.pl-start{background:var(--num-green-deep);border-color:var(--grid-frame)}
.numgroup thead tr:first-child .numhdr:not(.pl-start){background:var(--head-blue)}
/* gender/number subheader cells echo the Sg./Pl. band directly above them */
table.grid.paradigm thead th.sg-hdr{background:var(--head-blue)}
table.grid.paradigm thead th.pl-hdr{background:var(--num-green-deep);border-color:var(--grid-frame)}
/* (1) heavier vertical rule at the Sg./Pl. boundary — neutral grey */
.numgroup tbody td.pl-start{border-left:3px solid var(--grid-frame)}
.numgroup thead th.pl-start{border-left:3px solid var(--grid-frame)}
.numgroup thead th.pl-hdr{border-left:3px solid var(--grid-frame)}
.numgroup thead .numhdr.pl-start{border-left:3px solid var(--grid-frame)}
/* (2) background tint banding: singular group cool, plural group a touch warmer/greener,
   so the eye reads two blocks. Applied to data cells via .sg-grp / .pl-grp.
   Kept subtle and layered under zebra striping (zebra rows still show through). */
table.grid.paradigm tbody td.sg-grp{background:rgba(31,95,166,.07)}
table.grid.paradigm tbody td.pl-grp{background:rgba(11,107,94,.09)}
table.grid.paradigm tbody tr:nth-child(even) td.sg-grp{background:rgba(31,95,166,.13)}
table.grid.paradigm tbody tr:nth-child(even) td.pl-grp{background:rgba(11,107,94,.15)}
/* neuter cells inside a tinted plural group keep their identity but pick up the warm cast */
table.grid.paradigm tbody td.pl-grp .neut{background:transparent}
/* Latin text in plural (green-shaded) cells is green, matched in depth to the
   default Latin blue, and dark enough to contrast with the pale-green background */
table.grid.paradigm tbody td.pl-grp .la,
table.grid.paradigm tbody tr.pl-row td.numdata .la{color:var(--la-green)}
/* (3) grouped SINGULAR / PLURAL header labels handled by .numhdr spanning cells (markup) */
.paradigm .case .rownum{font-variant:normal;font-weight:700;font-size:.68rem;color:var(--accent);
  background:var(--fill1);border:1px solid var(--line);border-radius:.28rem;
  padding:0 .26rem;margin-right:.3rem;vertical-align:.06em;letter-spacing:0}
.paradigm .inlinebadge{font-weight:700;font-size:.68rem;color:var(--accent);
  background:var(--fill1);border:1px solid var(--line);border-radius:.28rem;
  padding:0 .26rem;margin-right:.4rem;vertical-align:.06em;white-space:nowrap}
:target{scroll-margin-top:0.6rem}
.sec:target,h2:target,h3:target,h4:target{
  background:linear-gradient(90deg,#fff6d8,transparent 60%);
  border-radius:6px;transition:background .4s}

/* editor note box */
/* ---- Editorial voice (ours): ochre family, three tiers ---- */
/* Tier 1 = inline .ed (defined above). Tier 2 = .edbox (note). Tier 3 = .edpanel (panel). */
/* All share ochre ink + an ochre left rule so they read as one voice. */
.edpanel{background:var(--edbg);border:1px solid var(--edborder);
  border-left:5px solid var(--edrule);border-radius:8px;
  padding:.9rem 1.15rem;margin:1.1rem 0;color:var(--ink);break-inside:avoid}
.edpanel .edpanel-h{font-weight:700;color:var(--edink);font-size:1.02rem;margin:0 0 .5rem}
.edpanel p{margin:.45rem 0;line-height:1.5}
.edpanel .edpanel-key{display:inline-block;font-weight:700;color:var(--edink)}
/* NOT italic. The italics were dropped from .edpanel for equity -- long runs of
   italic are harder for dyslexic readers -- and print.css had already dropped
   them from .edbox too, so the same sentence read italic on screen and upright
   on paper. The screen is if anything the WORSE place to keep them: a reader on
   paper cannot adjust anything, yet paper was the one surface we fixed. The soft
   ochre fill, the ochre left rule and the ochre ink are three signals already,
   and print has been proving the box reads without a fourth. (Editor, 2026-07-21.) */
.edbox{background:var(--edbg-soft);border:1px solid var(--edborder);
  border-left:4px solid var(--edrule);border-radius:6px;
  padding:.55rem .8rem;margin:.7rem 0;
  color:var(--edink);font-size:.9rem;line-height:1.5;break-inside:avoid}
.edbox b{font-style:normal;color:var(--edink)}
/* Editorial tables (inside panel/box): ochre voice, soft — never paradigm blue */
.edpanel table.edtab,.edbox table.edtab{border-collapse:collapse;margin:.55rem 0 .3rem;
  font-style:normal;font-size:.92rem;line-height:1.4;width:100%}
.edpanel table.edtab th,.edbox table.edtab th{text-align:left;font-weight:700;
  color:var(--edink);border-bottom:1px solid var(--edrule);padding:.22rem .7rem .22rem 0}
.edpanel table.edtab td,.edbox table.edtab td{padding:.2rem .7rem .2rem 0;
  border-bottom:1px solid var(--edborder);vertical-align:top}
.edpanel table.edtab tr:last-child td,.edbox table.edtab tr:last-child td{border-bottom:none}
/* ---- Pharr's own notes: deliberately NOT ochre, so they never read as our voice ---- */
.editnote{background:var(--fill2);border:1px solid var(--line);
  border-left:4px solid var(--muted);border-radius:6px;
  padding:.6rem .85rem;margin:1rem 0;font-size:.9rem;color:var(--ink);line-height:1.5;break-inside:avoid}
.editnote b{color:var(--accent-deep)}

/* ---- Footnotes (Pharr's): in-text symbol call + block-anchored note ----
   Single-source (DESIGN.md §2): one inline call on the anchor word + one note
   block, authored once; only presentation diverges -- print rules it off as a
   block-anchored note (the closest the Chromium PDF engine supports; it has no
   true page-bottom footnotes). The note is always visible in both outputs; the
   in-text call is a plain anchor link to it (and the note's symbol links back).
   Markers are SYMBOLS (* | dagger | double-dagger), not numbers, so they read
   as rare/exceptional against the heavy section-number traffic. Pharr's voice,
   never ochre. Audience (student vs teacher) rides on data-fn-audience; the
   teacher label word + the dotted left rule are a NON-COLOUR channel that
   survives a grayscale photocopy (§6c), exactly as the editorial voice does. */
@counter-style fn-symbols{system:fixed 1;symbols:"*" "\2020" "\2021" "\00A7" "\2016" "\00B6";suffix:""}
.page{counter-reset:footnote}
.fn-call{counter-increment:footnote;text-decoration:none}
.fn-call::after{content:counter(footnote,fn-symbols);
  font-size:.72em;vertical-align:super;line-height:0;
  color:var(--accent);font-weight:600;padding:0 .12em}
.footnote{font-size:.86rem;line-height:1.5;color:var(--ink);
  margin:.6rem 0 .25rem;padding-top:.4rem;border-top:1px solid var(--line);
  max-width:44em;break-inside:avoid}
/* the note's opening symbol doubles as a back-link to the call */
.footnote .fn-back{text-decoration:none;color:var(--accent);font-weight:700;margin-right:.45em}
.footnote .fn-back::before{content:counter(footnote,fn-symbols)}
/* teacher-facing: redundant non-colour channel = the label word + a dotted rule */
.footnote[data-fn-audience="teacher"]{border-left:2px dotted var(--muted);
  padding-left:.85rem;background:var(--fill2);border-radius:0 5px 5px 0}
.footnote[data-fn-audience="teacher"]::before{content:"To the teacher";display:block;
  font-variant:small-caps;letter-spacing:.07em;font-size:.7rem;font-weight:700;
  color:var(--muted);margin-bottom:.18rem}
/* screen-reader-only helper (names the otherwise symbol-only in-text call) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.legend{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:.6rem 0 0;font-size:.85rem}
.legend span b{display:inline-block;margin-right:.3rem}