/* The tokens this page shares with the library and words pages -- the
   grounds, the inks, the lines, the accent, the Hebrew face, --ctl -- are
   in tokens.css, loaded before this sheet. Here: only what the verse
   reader alone uses. Three theme rules, as there. */
:root{
  --spanbg:#f2f0ff;
  --spanline:#c9c2ea;
  --spanink:#5b4f96;
  --hl:#ffe08a;
  --hl-line:#e0a600;
  --vnote-bg:#e8f5ec;
  --vnote-line:#bcdcc6;
  --vcomm:#0969da;
  --cv-bg:#f6ecdf;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07);
  --grk:"SBL Greek","Palatino Linotype","Gentium Plus","Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hl:#6a5320;
    --hl-line:#d9a066;
    --vnote-bg:#2a4a33;
    --vnote-line:#3d6b4a;
    --vcomm:#388bfd;
    --cv-bg:#473c2e;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
  }
}
html[data-theme="dark"]{
  --spanbg:#25233a;
  --spanline:#4a447a;
  --spanink:#b9b0e8;
  --hl:#6a5320;
  --hl-line:#d9a066;
  --vnote-bg:#2a4a33;
  --vnote-line:#3d6b4a;
  --vcomm:#388bfd;
  --cv-bg:#473c2e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
button,input,select{font:inherit;color:inherit}
button,label.chk,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ---------------- header ----------------
   Mobile: three stacked rows, each holding controls that belong together --
   the wordmark and the account, the reference box and its translation, the
   chapter switch and the arrows. >=760px: .hrow uses display:contents so
   every control flows into one row of the header's own flexbox, and `order`
   restores the sequence the wide header has always read in.             */
header{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);
  padding:8px 12px calc(8px);display:flex;flex-direction:column;gap:8px;
  padding-top:calc(8px + env(safe-area-inset-top));box-shadow:0 1px 0 rgba(0,0,0,.02)}
.hrow{display:flex;gap:8px;align-items:center}
/* ONE HEIGHT FOR EVERY BOX IN THE HEADER.

   They were all sized by their own padding and their own text, so no two
   agreed: the buttons and the select asked for min-height:42px, the reference
   box asked for nothing at all and came out at 43 (11px of padding twice over,
   16px of text, two hairlines), the Chapter switch came out at 42 exactly, and
   the wordmark plate at 31 -- a full twelve pixels short of the box beside it.
   On a wide screen they stand in one row and the disagreement is the first
   thing the eye finds.

   So the height is declared once here and every box takes it, rather than each
   arriving at its own by arithmetic nobody can see. box-sizing is border-box
   throughout, so this is the OUTSIDE height including border: set it on the
   wordmark and on the select and the two are the same object tall.

   44px because that is the smallest comfortable touch target, and because the
   icon buttons already claimed 44 wide -- so they come out square. */
/* --ctl itself is declared in tokens.css, once for both halves. */

/* The wordmark on a bookplate: the label inside a front cover, and the one
   thing in the header that opens a dialog. It used to be bare text in the
   weight of a heading, which said nothing about being pressable. */
.brand{display:inline-flex;align-items:center;height:var(--ctl);
  padding:5px 10px 5px 9px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0;background:var(--panel);text-decoration:none;color:var(--ink);
  cursor:pointer;line-height:0;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .08s}
/* Bigger, now that nothing hangs beneath it: About moved into the
   dialog the mark itself opens. */
.brand .mk{height:19px;width:auto;display:block}
.brand .mk .np{fill:var(--accent)}
.brand:hover{background:var(--accent-bg);border-color:var(--accent)}
.brand:active{transform:translateY(1px)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The account corner: whatever community.js has put up top, with About
   beneath it. Right-aligned so the two stack against the same edge. */
/* the wordmark and, under it, what the site is -- centred on the plate,
   because flush left read as a stray word rather than a caption to it */
/* Held the mark and About stacked; About has gone to the dialog, so this
   is just the mark now. Kept as the header's first cell rather than
   unwrapped, so the seventeen headers that share the shape stay alike. */
.brandcol{display:flex;align-items:center}
.acctbox{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  margin-left:auto}
/* Under the wordmark, and it was 11px in --ink3: about 3.4 to 1 against the
   panel in dark, which is below what anyone should have to read. A step up in
   size and two steps up in colour, plus a hit area larger than the letters --
   the padding is cancelled by an equal negative margin, so nothing moves. */
.acctabout{border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink2);
  text-decoration:none;padding:3px 6px;margin:-3px -6px}
.acctabout:hover{color:var(--accent);text-decoration:underline}
.acctabout:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:0}
/* Height from --ctl, so the vertical padding goes: an input with both would
   be the one box in the row whose size depends on its font. */
#ref{flex:1 1 auto;min-width:0;height:var(--ctl);padding:0 12px;
  border:1px solid var(--line);border-radius:0;
  background:var(--bg);font-size:16px}   /* 16px stops iOS zoom-on-focus */
#ref:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
/* the book list is for typing, not for a dropdown: the browser draws a flat
   black triangle for list= inputs that belongs to no palette of ours */
#ref::-webkit-calendar-picker-indicator{display:none!important}
select,.btn{padding:10px 11px;border:1px solid var(--line);border-radius:0;background:var(--bg);
  cursor:pointer;height:var(--ctl)}
select{max-width:46vw;flex:0 1 auto;min-width:0}
.btn.icon{min-width:44px;display:flex;align-items:center;justify-content:center;font-size:18px;padding:10px}
.btn:hover,select:hover{border-color:var(--accent)}
/* On a phone each row sends its second group to the right edge, so the two
   halves read as a pair rather than a queue. */
.r1 #theme{margin-left:auto}
.r3 .nav{margin-left:auto}
.nav{display:flex;gap:6px}
.nav .btn{font-variant-numeric:tabular-nums}
label.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);height:var(--ctl);
  border:1px solid var(--line);border-radius:0;padding:8px 11px;cursor:pointer;white-space:nowrap}
label.chk input{width:16px;height:16px;margin:0}
label.chk:hover{border-color:var(--accent)}
/* A control with nothing to act on right now. Dimmed rather than hidden, so
   the header keeps its shape as the reader searches and comes back -- and
   still clickable, because a click is how it gets to explain itself. */
/* A reading header while a Torah portion is on screen: the shape
   /library/ has, without the verse machinery. Styled here rather than with
   .hdr-t, which lives in reader.css -- a stylesheet this page never loads. */
body.ptview #ref,
body.ptview label.chk,
body.ptview header .nav{display:none}
/* Below 760px .hrow is a real flex row with a gap, so emptying r3 would still
   leave a row's worth of space. Above it .hrow is display:contents and this
   costs nothing. */
body.ptview .hrow.r3{display:none}
/* The haftarah's own ground. Declared here rather than borrowed from
   reader.css's --heb-* family, which this page never loads. Light first, so
   the un-stamped state resolves; then the system default; then the stamped
   choice, so the toggle wins in both directions.

   THE DARK GROUND IS SET BY LIGHTNESS, NOT HUE. It was first built warm but
   dark -- #241f19, luminance 32, against a panel of 30 -- and disappeared: on
   a dark field the eye reads lightness long before it reads hue, so a ground
   two points from its panel is no ground at all. #3b2d1d clears it by 17, and
   the edge went from luminance 62 to 99 so the card has a visible boundary
   rather than a single accent rule doing all the work. */
:root{ --haf-bg:#f7f1e6; --haf-line:#e2d3ba; --haf-ink:#7a5326 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --haf-bg:#3b2d1d; --haf-line:#7d6038;
                                   --haf-ink:#e0ab6d }
}
:root[data-theme="dark"]{ --haf-bg:#3b2d1d; --haf-line:#7d6038;
                          --haf-ink:#e0ab6d }

/* The break itself. Only the colour changes; .card keeps the geometry. */
.card.hafcard{background:var(--haf-bg);border-color:var(--haf-line);
  border-top:3px solid var(--accent);margin-top:26px;padding:14px 14px 12px}
.card.hafcard .vref{color:var(--haf-ink);font-size:14px;letter-spacing:.11em}
.card.hafcard .vref .vname{color:var(--ink2);letter-spacing:.02em}
.card.hafcard .gblurb{color:var(--ink2)}
.card.hafcard .gblurb b{color:var(--haf-ink)}
/* and the readings under it share the ground, so the section holds together */
.card.hafverse{background:var(--haf-bg);border-color:var(--haf-line)}
/* The portion name in the title bar is WIDE-ONLY; the rule that shows it
   is the min-width:760px one below. On a phone it sat immediately after
   "Sign in" with nothing between them and read as part of that control, and
   the card underneath already gives the name in full with its Hebrew. */
.pthdr{display:none;align-items:center;font:600 12px/1.2 system-ui,-apple-system,
  "Segoe UI",Roboto,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap}
@media(min-width:760px){
  body.ptview .pthdr{display:inline-flex;order:2;margin-right:auto} }
label.chk.off{opacity:.45;cursor:not-allowed}
label.chk.off input{cursor:not-allowed}
label.chk.off:hover{border-color:var(--line)}
@media(min-width:760px){
  header{flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 16px;gap:10px}
  .hrow{display:contents}
  #ref{flex:1 1 240px;min-width:200px;order:2}
  select{max-width:none}
  /* one row again, in the order the wide header has always had */
  .brandcol{order:1}
  #theme{order:3;margin-left:0}
  #version{order:4}
  label.chk{order:5}
  .nav{order:6;margin-left:auto}
  .acctbox{order:7;margin-left:0}
}

/* ---------------- main ---------------- */
main{max-width:960px;margin:0 auto;padding:26px 20px 120px}
.vref{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:600;
  margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vref .vname{color:var(--ink3);letter-spacing:.04em;text-transform:none;font-weight:400;font-size:12px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:11px 12px;
  margin-bottom:16px;box-shadow:none}

.verse{font-family:Georgia,"Iowan Old Style",Cambria,serif;font-size:22px;line-height:1.62}
/* ---- the verse as a critical edition, and as paper on a narrow screen ----

   Wide: the text in a measured column with a rule down its edge, and the
   apparatus in the MARGIN beside it rather than in a box underneath -- the
   shape a scholarly edition actually uses, and one nothing on the web defaults
   to. Narrow: the margin has nowhere to go, so it drops below the text under a
   rule and reads as a printed page instead. Same structure, two readings of it.

   The card's shadow went with this. It was the loudest machine-made signature
   in the file -- a tight shadow plus a wide diffuse one, on every surface --
   and nothing depended on it: a hairline border already separates every card
   it sat on. The overlays keep theirs, because they really do float. */
.vcrit{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.vcrit .vbody{min-width:0}
.vcrit .vmarg{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:9px}
@media(min-width:760px){
  .vcrit{grid-template-columns:minmax(0,1fr) 206px;gap:0 26px}
  .vcrit .vbody{border-left:2px solid var(--accent);padding-left:18px}
  .vcrit .verse{max-width:33em}
  /* in the margin the apparatus is a column of rows, not a row of pills */
  .vcrit .vmarg{margin-top:0;padding-top:2px;border-top:0;display:block}
  .vcrit .vmarg .splink,.vcrit .vmarg .spmarks{display:block;width:100%}
  .vcrit .vmarg .splink{margin:0 0 2px;padding:8px 0;border:0;background:none;
    border-bottom:1px solid var(--line2);border-radius:0;text-align:left;
    color:var(--accent)}
  .vcrit .vmarg .splink:hover{background:none;color:var(--ink)}
  /* The same story as the narrow layout below: panel.js injects a filled
     dark-theme ground for .splink after this sheet, at this specificity, and
     it was winning here too, boxing Commentary alone in the stacked column
     and turning its rule blue. The html outranks it on both dark paths. */
  html .vcrit .vmarg .splink{background:none;border-color:var(--line2)}
  .vcrit .vmarg .spmarks{margin:0}
  /* The count sits beside its label, not at the far edge of the column: a
     stacked row is read left to right, like the button under it. */
  .vcrit .vmarg .spmark{display:flex;width:100%;justify-content:flex-start;
    margin:0;padding:8px 0;border:0;border-bottom:1px solid var(--line2);
    border-radius:0;background:none;text-align:left}
  .vcrit .vmarg .spmark:hover{background:none}
  /* Stacked, a chip has nothing beside it for a dot to separate it from -- the
     rule under each row does that -- so the dot the inline rows carry is
     dropped here. See .spmark::after in panel.js. */
  .vcrit .vmarg .spmark::after{display:none}
}
/* ---- narrow: the same apparatus, one width down ----

   Dropping the margin below a rule was only half of it. The apparatus arrived
   down there still dressed as the wide layout's chips -- fills, edges, boxes
   -- which is web furniture standing on what is meant to be a printed page.
   So the boxes go here, and what is left is the text of each control.

   It went further than that first: serif, italic, underlined, on the reading
   that a printed page sets its apparatus the way it sets its text. That is
   true of a footnote and these are not footnotes -- on a narrow screen they
   are the only controls on the card, and dressed as remarks they stopped
   looking pressable. So the TYPE is the wide margin's, unchanged, and only
   the box is dropped. The two widths now differ in layout alone.

   The reference is the exception that proves it: sans and bold, because it
   is not apparatus at all. It says which verse this is.

   The two note channels keep their green and their blue. They were made
   deliberately distinguishable and that still matters; with the fills gone
   the colour rides on the ink. */
@media(max-width:759px){
  /* Upright, bold, and sans. It went out italic with the rest of the
     apparatus, which reads as an aside -- and this is the one line on the
     card that says what you are looking at. Sans separates it from the verse
     as well: on a printed page the text is the serif and everything that
     tells you ABOUT the text is not.
     The stack is spelled out rather than var(--ui) for the reason given at
     #about -- that token is not the same stack on both halves of the site,
     and index.html does not define it at all. */
  .vcrit .vref{font:700 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,Helvetica,Arial,sans-serif;
    font-style:normal;letter-spacing:.01em;
    text-transform:none;color:var(--ink);margin-bottom:6px}
  .vcrit .vref .vname{font-style:normal;font-weight:400;font-size:12.5px;
    letter-spacing:.02em;color:var(--ink3)}
  .vcrit .vmarg{align-items:baseline;gap:18px}
  /* the row's own gap does the spacing here, so the chips carry none */
  .vcrit .vmarg .spmarks{margin:0;gap:18px;align-items:baseline}
  /* Flat, and nothing more. The box and the fill go -- that part of the paper
     reading was right, they were web furniture on a printed page -- but the
     type stays exactly what the wide margin uses. panel.js sets it once,
     uppercase and tracked, and neither layout restates it, so the two widths
     cannot drift apart. Italic serif under a rule was the paper idiom read
     literally, and it made three controls look like a footnote. */
  .vcrit .vmarg .splink,.vcrit .vmarg .spmark{
    display:inline-flex;align-items:baseline;gap:7px;
    margin:0;padding:0;border:0;border-radius:0;background:none}
  .vcrit .vmarg .splink{color:var(--accent)}
  /* panel.js gives .splink a filled dark-theme ground so the boxed control
     of the wide layout keeps an outline. Here the row is flat, and that rule,
     injected after this sheet, was winning by source order and boxing one
     chip of three. The html in the selector outranks it on both dark paths,
     the stamped toggle and the un-stamped system default. */
  html .vcrit .vmarg .splink{background:none;border:0}
  /* Nothing is underlined at rest; the line arrives under the finger. The
     resting underline is what made them read as prose links rather than as
     the row of controls they are. */
  .vcrit .vmarg .splink:hover,.vcrit .vmarg .spmark:hover{
    background:none;text-decoration:underline;text-underline-offset:3px}
}
.verse .w{border-radius:0;padding:0 1px;transition:background .08s}
.verse .w.link{cursor:pointer}
.verse .w.hl{background:var(--hl);box-shadow:0 1px 0 var(--hl-line)}
/* chapter view: the whole chapter, one verse per line so a verse stays an
   easy target on a phone, with its detail opening inline underneath */
.chap{font-family:Georgia,"Iowan Old Style",Cambria,serif;
  font-size:calc(19px * var(--sc,1));line-height:1.66}
.cv{margin:0;padding:7px 10px;border-radius:0;border-left:3px solid transparent;cursor:pointer}
/* A verse that carries writing says so while you scroll, in two channels that
   can both be true of the same verse: your own notes wash it, the community's
   colour the stripe. Neither moves a word -- every verse already reserves that
   3px border and the wash is only a background. These sit BEFORE :hover and
   .on deliberately, so the verse under the cursor and the selected verse still
   look like themselves. */
.cv.hasnote{background:var(--vnote-bg)}
.cv.hascomm{border-left-color:var(--vcomm)}
/* A verse of its own, not the shared --accent-bg. On dark that token is a
   near-black brown sitting 1.12x from the card behind it, so the verse under
   the cursor -- and the selected one -- barely looked touched. This is the
   same colour in light, where it was already right, and a lighter brown on
   dark at 1.56x. It is a token rather than a literal because --accent-bg is
   used in twenty other places, most of them behind accent-coloured text that
   lightening would have cost contrast. */
.cv:hover{background:var(--cv-bg)}
.cv.on{background:var(--cv-bg);border-left-color:var(--accent);cursor:default}
.cv .vn{font-family:var(--ui);font-size:calc(11px * var(--sc,1));font-weight:700;
  color:var(--accent);vertical-align:super;margin-right:5px;letter-spacing:.03em}
/* "V" pressed in the card's heading: the passage as running text */
body.novn .cv .vn{display:none}
/* Turning each kind of mark off, in the chapter's own heading -- the only place
   they exist, so the control is beside the thing it governs rather than in the
   page furniture. The swatch shows the mark itself: a washed block for your
   notes, a stripe for the community's. */
.mktog{font-family:var(--ui);font-size:11px;letter-spacing:.02em;
  text-transform:none;font-weight:600;display:inline-flex;align-items:center;
  gap:6px;padding:3px 9px;border-radius:0;border:1px solid var(--line);
  background:transparent;color:var(--ink3);cursor:pointer;line-height:1.5}
.mktog:hover{border-color:var(--accent);color:var(--accent)}
.mktog i{display:inline-block;width:11px;height:11px;border-radius:0;
  border:1px solid var(--line);background:transparent}
.mktog[data-mk="them"] i{width:4px;height:12px;border-radius:0;border:0;
  background:var(--line)}
.mktog.on{color:var(--ink2)}
.mktog.on[data-mk="you"] i{background:var(--vnote-bg);border-color:var(--vnote-line)}
.mktog.on[data-mk="them"] i{background:var(--vcomm)}
.cv .w{border-radius:0;padding:0 1px;transition:background .08s}
.cv .w.link{cursor:pointer}
.cv .w.hl{background:var(--hl);box-shadow:0 1px 0 var(--hl-line)}
.detail{margin:6px 0 14px;padding:0 0 0 10px;border-left:2px solid var(--line2)}
.detail .card{border:0;box-shadow:none;background:transparent;padding:10px 0;margin:0}
.plainnote{margin-top:12px;font-size:12.5px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:10px}
.plainnote b{color:var(--ink2);font-weight:600}

/* original-language line */
.orig-line{font-size:30px;line-height:1.95;margin:0}
.orig-line.heb{font-family:var(--heb);direction:rtl;text-align:right;font-size:34px}
.orig-line.grk{font-family:var(--grk);direction:ltr}
.orig-line .t{cursor:pointer;border-radius:0;padding:1px 3px;transition:background .08s}
.orig-line .t.hl{background:var(--hl);box-shadow:0 1px 0 var(--hl-line)}
/* One set of sizes for the two side panels, so the word card and the drawer
   cannot drift apart. A phone gets larger furniture: eleven pixels is a
   caption, and these are labels being read at arm's length. */
:root{ --pt-label:11px; --pt-name:14px; --pt-meta:11.5px; --pt-ref:12px }
@media(max-width:759px){
  :root{ --pt-label:12.5px; --pt-name:13.5px; --pt-meta:12.5px; --pt-ref:13px }
}

/* The bar at the top of a stepped-into view -- the drawer focusing on one
   writer, the search card reading one passage. One definition, so the two
   cannot drift apart; each place adds only its own layout. */
.stepbar{align-items:center;gap:11px}
.stepbar button{border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:0;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer}
.stepbar button:hover{border-color:var(--accent);color:var(--accent)}
.stepbar .who{font-weight:700;font-size:var(--pt-name,14px);letter-spacing:-.01em;
  color:var(--ink)}
.stepbar .cat{margin-left:auto;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.sectlabel{display:flex;align-items:center;gap:10px;font-size:var(--pt-label);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;margin:0 0 12px}

/* interlinear grid */
.il{display:flex;flex-wrap:wrap;gap:8px}
.il.heb{direction:rtl}
.il .cell{direction:ltr;min-width:88px;max-width:190px;flex:0 1 auto;border:1px solid var(--line2);
  border-radius:0;padding:9px 10px 8px;background:var(--bg);cursor:pointer;text-align:center;
  transition:background .08s,border-color .08s}
.il .cell:hover{border-color:var(--accent)}
.il .cell.hl{background:var(--hl);border-color:var(--hl-line)}
.il .o{font-size:24px;line-height:1.5;display:block}
.il.heb .o{font-family:var(--heb);direction:rtl;font-size:26px}
.il.grk .o{font-family:var(--grk)}
.il .tr{font-size:12.5px;color:var(--ink2);font-style:italic;display:block;margin-top:2px;word-break:break-word}
.il .gl{font-size:14px;display:block;margin-top:4px;word-break:break-word}
/* the key to the gloss marks, and the STEPBible credit, under the Hebrew
   interlinear */
.ilkey{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--ink3)}
.ilkey b{font-weight:700;color:var(--ink2)}
.ilkey a{color:inherit}
.il .mo{font-size:10.5px;color:var(--ink3);display:block;margin-top:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-word}
.il .sn{font-size:10.5px;color:var(--accent);font-weight:700;display:block;margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

details.usage > .il{margin-top:12px}
details.usage > .ftab,details.usage > .chips{margin-top:10px}

.cnum{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;
  border-top:1px solid var(--line2)}
.cnum:first-child{border-top:0;padding-top:2px}
.cnum .n{font:600 11px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cg,var(--accent));border:1px solid var(--line);border-radius:0;
  text-align:center;height:22px}
.cnum p{margin:0}

details.comm.hebonly summary{opacity:.72}
.onspan{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:0;
  border:1px solid var(--spanline);background:var(--spanbg);color:var(--spanink);
  font:600 10.5px var(--ui);letter-spacing:.04em;white-space:nowrap;vertical-align:1px}
/* a matched word in a tagged translation is a door into the lexicon */
mark.wmark{cursor:pointer;border-bottom:1px dotted currentColor}
mark.wmark:hover{background:var(--accent);color:#fff;border-bottom-color:transparent}
mark.wmwait{opacity:.55}
.onspanrow{border-left:2px solid var(--spanline);padding-left:9px;margin-left:-11px}
/* verses a comment cites, from Sefaria's link table -- tap to go there */
/* choosing how much of the Bible a search covers */
.scopes{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.scope{cursor:pointer;padding:3px 11px;border-radius:0;border:1px solid var(--line);
  background:transparent;color:var(--ink2);font:600 11px var(--ui)}
.scope:hover{border-color:var(--accent);color:var(--ink)}
.scope.on{background:var(--accent);border-color:var(--accent);color:#fff}
.clinks{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
/* a numbered comment sits in a two-column grid; without this the bar drops
   into the 26px number column and stacks one chip per line */
.cnum > .clinks,.cnum > .morebtn{grid-column:2}
.clink{cursor:pointer;padding:2px 9px;border-radius:0;border:1px solid var(--line);
  background:transparent;color:var(--ink2);font:600 11px var(--ui);white-space:nowrap}
.clink:hover{border-color:var(--spanline);color:var(--ink);background:var(--spanbg)}
/* a translator's footnote stays folded until its marker is tapped */
.fnmark{cursor:pointer;color:var(--accent);font:600 .68em var(--ui);vertical-align:super;
  padding:0 3px;border-radius:0;user-select:none}
.fnmark:hover,.fnmark.open{background:var(--accent-bg)}
/* the rest of an encyclopedia article, fetched only when asked for */
.morebtn{cursor:pointer;display:inline-block;margin:7px 0 2px;padding:2px 10px;
  border-radius:0;border:1px solid var(--line);background:transparent;
  color:var(--ink2);font:600 11px var(--ui)}
.morebtn:hover{border-color:var(--accent);color:var(--ink)}
/* a link into the library now, not a button: it keeps the button's look */
a.morebtn{text-decoration:none}
.fnbody{display:block;margin:6px 0;padding:6px 10px;border-left:2px solid var(--accent);
  background:var(--accent-bg);color:var(--ink2);font-size:.92em;line-height:1.5}
.spanflag{font-style:normal;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--spanink);border:1px solid var(--spanline);border-radius:0;padding:1px 7px;
  margin-left:8px}
.hebshare{margin-left:7px;font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:.01em;color:var(--ink3);font-size:10.5px}
.hebsep{margin:14px 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);
  border-top:1px solid var(--line2);padding-top:9px}
.lxxsect{--cg:#b07d3a}
.lxrow{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-top:1px solid var(--line2);padding:9px 2px;color:inherit;
  font-family:inherit;flex-wrap:wrap}
.lxrow:hover{background:var(--accent-bg);border-radius:0}
.lxk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  font-weight:700;color:var(--accent);background:var(--accent-bg);border-radius:0;
  padding:2px 6px;flex:0 0 auto}
.lxw{font-size:calc(21px * var(--sc,1));flex:0 0 auto}
.lxw.heb{font-family:var(--heb);direction:rtl}
.lxw.grk{font-family:var(--grk)}
.lxt{font-size:calc(13px * var(--sc,1));font-style:italic;color:var(--ink2);flex:0 0 auto}
.lxd{font-size:calc(12.5px * var(--sc,1));color:var(--ink3);flex:1 1 120px}
.lxa{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--cg);
  border:1px solid var(--line);border-radius:0;padding:1px 7px;flex:0 0 auto}
.lxn{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cstrip{display:block;width:100%;height:14px}
.cstrip.lead{height:29px}
.cs-ot{fill:var(--accent-bg)}
.cs-nt{fill:#eef1f4}
.cs-div{stroke:var(--panel);stroke-width:.8;fill:none;opacity:.9}
.cs-tick{stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.cs-lab{font-family:var(--ui);font-size:8.5px;fill:var(--ink3);letter-spacing:.9px;
  text-anchor:middle}
.csgo{color:var(--accent);font-weight:700;white-space:nowrap;font-size:12.5px}
.cshint{color:var(--ink3);font-size:11.5px;margin-left:9px}
.cspread{display:block;width:100%;text-align:left;background:var(--bg);cursor:pointer;
  border:1px solid var(--line);border-radius:0;padding:10px 12px 11px;
  font-family:inherit;margin:0 0 14px}
.cspread:hover{border-color:var(--accent);background:var(--accent-bg)}
.cspread .csnote{margin:0 0 7px}
.fonly{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin-left:auto;white-space:nowrap}
.narrowed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
  padding:9px 12px;border-radius:0;background:var(--accent-bg);
  border:1px solid var(--accent)}
.nw{font-size:12.5px;color:var(--ink)}
.nwclear{margin-left:auto;border:1px solid var(--line);background:var(--panel);
  border-radius:0;padding:5px 11px;font:600 11.5px var(--ui);color:var(--ink2);
  cursor:pointer}
.nwclear:hover{border-color:var(--accent);color:var(--ink)}
.srcline{font-size:11.5px;color:var(--ink3);margin:2px 0 9px;line-height:1.45}
.srcline b{color:var(--ink2);font-weight:600}
.pairsect{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
@media(max-width:759px){ .pairsect{grid-template-columns:1fr} }
.sphead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 20px}
.spw{font-size:calc(34px * var(--sc,1));line-height:1.2}
.spw.heb{font-family:var(--heb);direction:rtl}
.spw.grk{font-family:var(--grk)}
.spmeta{font-size:calc(13px * var(--sc,1));color:var(--ink2)}
.spmeta b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--accent);background:var(--accent-bg);border-radius:0;padding:2px 6px;
  margin-right:7px}
/* the lemma and, under it, how it is said */
.spword{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sptr{font-size:calc(15px * var(--sc,1));font-style:italic;color:var(--ink2);line-height:1.35}
.sptr .ph{font-style:normal;color:var(--ink3);
  font-size:calc(12.5px * var(--sc,1));margin-left:7px}
/* The forms live inside a fold now, which brings its own padding, so the list
   no longer carries the gap to what follows. The fold needs air above it: a
   .sectlabel leads a card and so has no top margin, which left this one
   sitting against the graph. */
#spread details.usage{margin-top:22px}
#spread .sectlabel{margin-top:26px}
.spforms{display:flex;flex-wrap:wrap;gap:8px}
.spform{flex:0 1 auto;display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);border-radius:0;background:var(--bg);padding:8px 11px;
  font-family:inherit;color:inherit;text-align:left}
.spform:hover{border-color:var(--accent)}
.spform.on{border-color:var(--accent);background:var(--accent-bg)}
/* Back, leading its own row as it does everywhere else */
.spbar{display:flex;margin:0 0 16px}
/* The list below runs for screens -- 87 forms and 39 books for a common word
   -- so Back pins under the header rather than scrolling away, at every width.
   Built like the word card's step-in bar: edge to edge, ruled off at the foot,
   the page passing beneath it, and reading as an extension of the header,
   which is full width and ruled the same way.

   FIXED, not sticky. body carries overflow-x:hidden, which makes it a scroll
   container, and position:sticky does not hold for anything inside one -- the
   bar drew in the right place and then scrolled away with the page. Fixed is
   answerable to the viewport alone, so no ancestor can undo it.

   Being out of the flow it leaves a hole the card fills: --spbh is the bar's
   own measured height, so what follows starts under the bar, not behind it.

   The bar spans the window but its contents line up with the column main
   holds the card in, so Back sits over the card's edge rather than out in the
   margin on a wide screen. Below that width the column is the window. */
#spread .spbar{position:fixed;left:0;right:0;top:var(--hh,0px);z-index:30;
  margin:0;background:var(--panel);border-bottom:1px solid var(--line);
  padding:10px max(20px, calc((100% - 960px) / 2 + 20px))}
#spread{padding-top:calc(var(--spbh,52px) + 10px)}
@media(max-width:759px){
  /* main's gutter narrows on a phone, so the bar's follows it */
  #spread .spbar{padding:10px 12px}
}
/* the form, with how it sounds under it -- as the word card's rows are built */
.spfwrap{flex:0 0 auto;display:flex;flex-direction:column;gap:1px}
.spfwrap.heb{align-items:flex-end}
.spftr{font-size:calc(11.5px * var(--sc,1));color:var(--ink3);font-style:italic;
  letter-spacing:.01em;direction:ltr}
.spfw{font-size:calc(19px * var(--sc,1));flex:0 0 auto}
.spfw.heb{font-family:var(--heb);direction:rtl}
.spfw.grk{font-family:var(--grk)}
.spfm{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink3);
  flex:0 0 auto}
.spfn{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;flex:0 0 auto;
  margin-left:6px}
.spbook{border-top:1px solid var(--line2);padding:14px 0}
.spname{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.spbn{font-size:calc(14px * var(--sc,1));font-weight:600}
.spbc{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.spbm{flex:1 1 auto;height:4px;border-radius:0;background:var(--line2);overflow:hidden;
  max-width:220px}
.spbm i{display:block;height:100%;background:var(--accent);opacity:.5}
.spchaps{display:flex;flex-wrap:wrap;gap:3px}
.spch{min-width:34px;min-height:34px;border:1px solid var(--line);border-radius:0;
  background:var(--accent-bg);cursor:pointer;font-family:inherit;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3px 5px;line-height:1.1}
.spch.empty{background:none;border-color:var(--line2);color:var(--ink3);opacity:.45;
  cursor:default}
.spch:not(.empty):hover{border-color:var(--accent);color:var(--ink)}
.spch.on{background:var(--accent);border-color:var(--accent);color:#fff}
.spcn{font-size:11.5px;font-variant-numeric:tabular-nums}
.spcc{font-size:9.5px;opacity:.75;font-variant-numeric:tabular-nums}
.spverses{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:9px;
  padding:9px 11px;background:var(--accent-bg);border-radius:0}
.spvl{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin-right:5px}
.spv{min-width:36px;min-height:32px;border:1px solid var(--line);border-radius:0;
  background:var(--panel);cursor:pointer;font-family:inherit;font-size:12.5px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.spv:hover{border-color:var(--accent);color:var(--accent)}
.bbar{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;align-items:stretch}
.bseg{min-width:46px;border:1px solid var(--line);border-radius:0;cursor:pointer;
  background:var(--accent-bg);color:var(--ink2);padding:6px 4px 7px;
  font-family:var(--ui);display:flex;flex-direction:column;align-items:center;gap:1px;
  overflow:hidden}
.bseg:hover{border-color:var(--accent);color:var(--ink)}
.bseg.nt{background:#eaf0f4}
.bseg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.bsn{font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.bsc{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bseg.on .bsc{color:#fff;opacity:.85}
@media(max-width:759px){ .bseg{min-width:44px;padding:7px 4px 8px} }
.csnote{font-size:11px;color:var(--ink3);margin-top:5px}
.lxgwrap{overflow-x:auto;margin:4px 0 14px;padding-bottom:4px}
.lxgrid{border-collapse:collapse}
.lxgcorner{width:calc(96px * var(--sc,1))}
.lxgcol{vertical-align:bottom;padding:0 0 7px;cursor:pointer;min-width:calc(44px * var(--sc,1))}
.lxgcol .lxgw{display:block;font-size:calc(19px * var(--sc,1));line-height:1.1}
.lxgcol .lxgt{display:block;font-size:calc(9.5px * var(--sc,1));color:var(--ink3);font-style:italic;
  max-width:52px;margin:2px auto 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lxgcol.aram .lxgt{color:#b07d3a;font-style:normal}
.lxglab{text-align:right;padding:0 10px 0 0;white-space:nowrap;cursor:pointer}
.lxglab .lxgw{font-family:var(--grk);font-size:calc(17px * var(--sc,1))}
.lxglab .lxgt{font-size:calc(10.5px * var(--sc,1));color:var(--ink3);font-style:italic;margin-left:5px}
.lxglab.me{cursor:default}
.lxglab.me .lxgw{font-weight:700}
.lxglab:hover .lxgw{color:var(--accent)}
.lxgw.heb{font-family:var(--heb);direction:rtl}
.lxgcell{width:calc(40px * var(--sc,1));height:calc(36px * var(--sc,1));border:1px solid var(--line2);background:transparent}
.lxgcell.on{background:var(--accent);opacity:.82}
.lxgcell.faint{background:var(--accent);opacity:.22}
.lxgkey{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;color:var(--ink3);
  flex-wrap:wrap}
.lxgkey .sw{display:inline-block;width:16px;height:10px;border:1px solid var(--line2);
  background:var(--accent);margin-left:6px}
.lxgkey .sw.faint{opacity:.22}
.lxgkey .sw.on{opacity:.82}
.lxgnote{margin-left:auto;color:var(--ink3);opacity:.8}
@media(max-width:759px){
  .lxgcell{width:34px;height:32px}
  .lxgcorner{width:74px}
  .lxglab .lxgw{font-size:15px}
  .lxglab .lxgt{display:none}
}
.hebitem{padding:9px 0;border-top:1px solid var(--line2)}
.hebitem:first-child{border-top:0}
.commbody a.hebref{text-decoration:none;display:block}
.commbody a.hebref:hover{color:var(--accent);text-decoration:underline}
.commbody .hebref{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:calc(11.5px * var(--sc,1)); color:var(--ink3); margin:0 0 5px;
}
.commbody p.hebtext{
  font-family:var(--heb); direction:rtl; text-align:right;
  font-size:calc(19px * var(--sc,1)); line-height:1.95; color:var(--ink); margin:0;
}

/* Jewish commentary, grouped by kind */
details.usage.cgroup{border-left:3px solid var(--cg);margin-bottom:10px}
details.usage.cgroup > summary{color:var(--cg)}
details.usage.cgroup > summary::before{color:var(--cg)}
.gblurb{font-size:var(--pt-meta);color:var(--ink3);margin:9px 0 2px}
.cgroup details.comm summary{color:var(--cg)}
/* A group inside the reader's own card -- other readers, to an
   administrator -- takes the notes green rather than the brown the
   Jewish sources use, so the stripe agrees with the card and the tab. */
.ncard details.usage.cgroup{--cg:var(--nink,#2f6b45)}
.g-c{--cg:#8a5a2b}
.g-m{--cg:#2f6f5e}
.g-t{--cg:#4a5aa8}
.g-s{--cg:#8a4a72}
.g-k{--cg:#7a5aa8}
.g-j{--cg:#3f6ea8}
.g-h{--cg:#7a6a2b}
.g-u{--cg:#6a5a8a}
.g-l{--cg:#2f6a8a}
.g-g{--cg:#8a5a6a}
.g-f{--cg:#5a6a6a}
.g-d{--cg:#7a4a3a}
.g-o{--cg:#4a7a4a}
.g-p{--cg:#6a4a6a}
.gbody{margin-top:6px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .g-c{--cg:#d9a066}
  :root:not([data-theme="light"]) .g-m{--cg:#6fc3ab}
  :root:not([data-theme="light"]) .g-t{--cg:#93a3e8}
  :root:not([data-theme="light"]) .g-s{--cg:#d68fbb}
  :root:not([data-theme="light"]) .g-k{--cg:#b39ae0}
  :root:not([data-theme="light"]) .g-j{--cg:#8ab4e8}
  :root:not([data-theme="light"]) .g-h{--cg:#ccb35f}
  :root:not([data-theme="light"]) .g-u{--cg:#b0a0d8}
  :root:not([data-theme="light"]) .g-l{--cg:#7fc0dd}
  :root:not([data-theme="light"]) .g-g{--cg:#d69fae}
  :root:not([data-theme="light"]) .g-f{--cg:#a8b8b8}
  :root:not([data-theme="light"]) .g-d{--cg:#d9a08a}
  :root:not([data-theme="light"]) .g-o{--cg:#90c990}
  :root:not([data-theme="light"]) .g-p{--cg:#c0a0c0}
}
html[data-theme="dark"] .cs-nt{fill:#23262b}
html[data-theme="dark"] .g-c{--cg:#d9a066}
html[data-theme="dark"] .g-m{--cg:#6fc3ab}
html[data-theme="dark"] .g-t{--cg:#93a3e8}
html[data-theme="dark"] .g-s{--cg:#d68fbb}
html[data-theme="dark"] .g-k{--cg:#b39ae0}
html[data-theme="dark"] .g-j{--cg:#8ab4e8}
html[data-theme="dark"] .g-h{--cg:#ccb35f}
html[data-theme="dark"] .g-u{--cg:#b0a0d8}
html[data-theme="dark"] .g-l{--cg:#7fc0dd}
html[data-theme="dark"] .g-g{--cg:#d69fae}
html[data-theme="dark"] .g-f{--cg:#a8b8b8}
html[data-theme="dark"] .g-d{--cg:#d9a08a}
html[data-theme="dark"] .g-o{--cg:#90c990}
html[data-theme="dark"] .g-p{--cg:#c0a0c0}

/* Jewish commentary */
details.comm{border-top:1px solid var(--line2);padding:9px 0}
details.comm:first-of-type{border-top:0}
details.comm summary{cursor:pointer;font-size:calc(var(--pt-name) * var(--sc,1));
  font-weight:600;color:var(--accent);
  list-style:none;display:flex;align-items:center;gap:8px;min-height:34px}
details.comm summary::-webkit-details-marker{display:none}
details.comm summary::before{content:"\25B8";display:inline-block;transition:transform .12s;
  color:var(--ink3);font-size:11px}
details.comm[open] summary::before{transform:rotate(90deg)}
details.comm summary i{font-style:normal;font-size:var(--pt-meta);color:var(--ink3);
  background:var(--bg);border:1px solid var(--line);border-radius:0;padding:1px 7px}
.commbody{padding:4px 0 6px 18px}
.commbody p{margin:0 0 10px;font-size:calc(15px * var(--sc,1));line-height:1.6;color:var(--ink2)}
.commbody p:last-child{margin-bottom:0}

.empty{color:var(--ink3);font-style:italic}
.err{background:var(--accent-bg);border-color:var(--accent)}

/* ---------------- word card ---------------- */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:50;display:none}
#scrim.on{display:block}
#wc{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--panel);z-index:51;
  border-left:1px solid var(--line);display:none;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.15)}
#wc.on{display:flex}
.wc-head{padding:18px 22px 14px;border-bottom:1px solid var(--line);position:relative;flex:0 0 auto}
.wc-close{position:absolute;top:14px;right:16px;border:1px solid var(--line);background:var(--bg);
  border-radius:0;width:30px;height:30px;cursor:pointer;line-height:1;font-size:17px;color:var(--ink2)}
.wc-close:hover{border-color:var(--accent);color:var(--ink)}
/* the bar sits between the head and the body, so it cannot scroll away */
.wc-bar{display:none;flex:0 0 auto;align-items:center;gap:11px;padding:11px 18px;
  border-bottom:1px solid var(--line);background:var(--panel)}
#wc.focusing .wc-bar{display:flex}
/* Reading one section, the header steps back to what identifies the word:
   the word itself, how it sounds, and its number. The definitions below it
   are the card's own content, and the reader is looking at something else
   now -- on a phone they push the way back off the top of the screen. */
#wc.focusing .wc-def,#wc.focusing .wc-mean{display:none}
.wc-bar button{border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:0;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer}
.wc-bar button:hover{border-color:var(--accent);color:var(--accent)}
.wc-bar .who{font-weight:700;font-size:14px;letter-spacing:-.01em}
/* a section that opens a page of its own promises no drop-down where it stands */
.wc-body details.stepin > summary::before{display:none}
.wc-focus > details > summary{cursor:default}
/* and while one is being read, it is the only thing in the card */
.wc-body.focused > *{display:none}
.wc-body.focused > .wc-focus{display:block}
.wc-lemma{font-size:38px;line-height:1.3;margin:0 0 2px;padding-right:136px}
.wc-lemma.heb{font-family:var(--heb);direction:rtl;text-align:right}
.wc-lemma.grk{font-family:var(--grk)}
.wc-tr{font-size:16px;font-style:italic;color:var(--ink2)}
.wc-tr .ph{font-style:normal;color:var(--ink3);font-size:13.5px;margin-left:6px}
.wc-sn{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-bg);
  border-radius:0;padding:2px 7px;margin-top:8px}
.wc-pos{font-size:12.5px;color:var(--ink3);margin-left:8px}
.wc-def{margin-top:9px;font-size:calc(15px * var(--sc,1));color:var(--ink)}
/* Where Strong's and BDB give the word different meanings, each meaning
   carries a pill naming its source. Strong's in the accent, as the H-number
   pill above it already is; BDB in a blue of its own. */
.srcpill{display:inline-block;vertical-align:.12em;margin:0 0 0 5px;padding:1px 6px;
  font:700 10.5px/1.45 var(--ui,system-ui,sans-serif);letter-spacing:.03em;white-space:nowrap}
.srcpill.str{color:var(--accent);background:var(--accent-bg)}
.srcpill.bdb{color:#2c5a86;background:#e3edf7}
.defsep{color:var(--ink3);margin:0 6px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .srcpill.bdb{color:#9cc0e6;background:#1f2a36}
}
:root[data-theme="dark"] .srcpill.bdb{color:#9cc0e6;background:#1f2a36}
.wc-mean{margin-top:3px;font-size:calc(13.5px * var(--sc,1));color:var(--ink2)}
.wc-body{flex:1 1 auto;overflow-y:auto;padding:16px 22px 40px}
.wc-stat{font-size:13px;color:var(--ink2);margin-bottom:12px}
.wc-stat b{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chip{font-size:12.5px;border:1px solid var(--line);border-radius:0;padding:3px 10px;cursor:pointer;
  background:var(--bg);white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600}
.chip i{font-style:normal;color:var(--ink3);margin-left:5px;font-size:11px}
.chip.on i{color:var(--accent)}

#occfilter{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:0;
  background:var(--bg);margin-bottom:12px;font-size:14px}
.occhint{font-size:var(--pt-meta);color:var(--ink3);margin:5px 2px 2px}
.occhint i{font-style:italic;color:var(--ink2)}
.occ{border-top:1px solid var(--line2);padding:9px 0;cursor:pointer}
.occ:hover{background:var(--accent-bg);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:0}
.occ .r{font-size:var(--pt-ref);font-weight:700;color:var(--accent);letter-spacing:.03em}
.occ .g{font-size:var(--pt-ref);color:var(--ink2);font-style:italic;margin-left:8px}
.occ .g.none{color:var(--ink3);opacity:.85}
.occ .s{font-size:calc(13.5px * var(--sc,1));color:var(--ink2);margin-top:2px;line-height:1.45}
.occ .s mark{background:var(--hl);color:var(--ink);border-radius:0;padding:0 1px}
.foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.foot .wc-stat{margin-bottom:8px}
.more{width:100%;margin-top:8px;padding:11px;border:1px solid var(--accent);border-radius:0;
  background:var(--accent-bg);color:var(--accent);cursor:pointer;font-size:13.5px;font-weight:600;
  min-height:44px}
.more.alt{background:transparent;border-style:dashed;color:var(--ink2);font-weight:400}
.more:hover{filter:brightness(.97)}
.more.alt:hover{border-color:var(--accent);color:var(--ink)}

details.lex{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
details.lex summary{cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink3)}
details.lex summary:hover{color:var(--accent)}
.lexbody{font-size:calc(14px * var(--sc,1));line-height:1.6;color:var(--ink2);margin-top:12px;overflow-wrap:break-word}
.lexbody h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin:18px 0 6px;font-weight:700}
.lexbody h4:first-child{margin-top:0}
.lexbody .orig{font-family:var(--heb);font-size:17px}
/* BDB quotes Greek and Assyrian cognates in the middle of an entry; the
   Hebrew face has no Greek in it, so the words came out as boxes. */
.lexbody .grk{font-family:var(--grk)}
/* One lexicon can carry several senses of a word under one headword. They are
   separate entries in the book and read as separate entries here, rather than
   being run together into a paragraph that changes subject without saying so. */
.lexsense{margin:0 0 10px}
.lexsense:last-of-type{margin-bottom:0}
/* Who wrote this, under the thing they wrote. Klein is CC BY-NC and the
   credit is a condition of showing it; the rest are public domain and the
   credit is simply owed. */
.lexcredit{margin-top:14px;padding-top:9px;border-top:1px solid var(--line);
  font-size:calc(11.5px * var(--sc,1));line-height:1.5;color:var(--ink3)}
.lexbody a.xr,.lexbody a.xl{color:var(--accent);cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:2px}
.lexbody sup{font-size:9px;color:var(--ink3)}

/* outline of biblical usage */
details.usage{margin-bottom:12px;border:1px solid var(--line2);border-radius:0;
  padding:9px 12px;background:var(--bg)}
details.usage summary{cursor:pointer;font-size:var(--pt-label);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--accent);list-style:none}
details.usage summary::-webkit-details-marker{display:none}
details.usage summary::before{content:"\25B8";margin-right:6px;display:inline-block;
  transition:transform .12s;color:var(--ink3)}
details.usage[open] summary::before{transform:rotate(90deg)}
.olist{margin-top:9px}
.oli{font-size:calc(14px * var(--sc,1));line-height:1.5;margin:3px 0;color:var(--ink)}
.oli.d1{padding-left:18px;color:var(--ink2);font-size:calc(13.5px * var(--sc,1))}
.oli.d2{padding-left:36px;color:var(--ink2);font-size:calc(13px * var(--sc,1))}
.oli.d3{padding-left:54px;color:var(--ink3);font-size:calc(13px * var(--sc,1))}
.oli.d4,.oli.d5{padding-left:70px;color:var(--ink3);font-size:calc(12.5px * var(--sc,1))}
.listhead .alsofor{display:inline;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink3);margin-left:6px}
.listhead{margin:20px 0 12px;padding-top:14px;border-top:2px solid var(--line);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.listhead span{display:block;margin-top:3px;font-size:12.5px;letter-spacing:0;
  text-transform:none;font-weight:400;color:var(--ink2)}
.sdef{font-size:calc(14px * var(--sc,1));line-height:1.6;color:var(--ink2);margin-top:9px}
.avplus{display:inline-block;border:1px solid var(--line);background:var(--panel);
  border-radius:0;padding:0 5px;margin-left:6px;cursor:pointer;
  font:700 10px ui-monospace,Menlo,Consolas,monospace;color:var(--accent)}
.avplus:hover{border-color:var(--accent);background:var(--accent-bg)}
.chip.on .avplus{background:var(--panel)}
.avfoot{font-size:11px;color:var(--ink3);margin-top:10px;line-height:1.5}
.wcwarn{color:var(--ink3)}
.avfoot b{color:var(--ink2)}
.avline{font-size:12.5px;color:var(--ink2);margin:12px 0 0;padding-top:10px;
  border-top:1px solid var(--line);line-height:1.6}
.avline b{color:var(--ink3);font-weight:700;margin-right:4px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em}
.avline .dot{margin:0 8px;color:var(--line)}

.forms{margin-bottom:16px}
.ftab{display:flex;flex-direction:column;gap:4px}
.frow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line2);border-radius:0;background:var(--bg);padding:7px 10px;
  min-height:42px}
.frow:hover{border-color:var(--accent)}
.frow.on{background:var(--accent-bg);border-color:var(--accent)}
.frow.cur{border-color:var(--hl-line);box-shadow:inset 3px 0 0 var(--hl-line)}
.frow .fwrap{flex:0 0 auto;min-width:92px;display:flex;flex-direction:column;gap:1px}
.frow .fwrap.heb{align-items:flex-end}
.frow .fw{font-size:calc(21px * var(--sc,1))}
.frow .ftr{font-size:11.5px;color:var(--ink3);font-style:italic;letter-spacing:.01em;
  line-height:1.25;direction:ltr}
.frow .fw.heb{font-family:var(--heb);direction:rtl;text-align:right;font-size:calc(23px * var(--sc,1))}
.frow .fw.grk{font-family:var(--grk)}
.frow .fm{flex:1 1 auto;font-size:11.5px;color:var(--ink2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-word}
.frow .fn{flex:0 0 auto;font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.frow .fcur{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--hl-line);background:var(--hl);border-radius:0;padding:2px 6px}
/* The forms as a grammar book's table (formTable in index.js). It may scroll
   sideways inside its own box on a phone; the page itself never does. */
.fview{display:flex;gap:0;margin:2px 0 12px}
.fvb{font:inherit;font-size:12.5px;padding:5px 14px;border:1px solid var(--line2);
  background:var(--bg);color:var(--ink2);cursor:pointer;border-radius:0}
.fvb+.fvb{border-left:0}
.fvb.on{background:var(--accent-bg);border-color:var(--accent);color:var(--ink);font-weight:700}
.fnote{font-size:12px;color:var(--ink3);margin:10px 0 0;line-height:1.5}
.fnote a,.fgh a,.fgt th a,.fgnl{color:var(--accent)}
.fgh{font-weight:700;font-size:13px;color:var(--ink);margin:14px 0 6px;letter-spacing:.02em}
.fgh:first-child{margin-top:0}
.fgh a{font-weight:400;font-size:12px;margin-left:8px}
.fgscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.fgt{border-collapse:collapse;font-size:12px;min-width:100%}
.fgt th,.fgt td{border:1px solid var(--line2);padding:3px 4px;vertical-align:top}
.fgt th{font-weight:600;color:var(--ink2);text-align:left;background:var(--panel)}
.fgt tr:first-child th{font-size:11px;line-height:1.25;vertical-align:bottom}
.fgt tr+tr th{white-space:nowrap;font-size:11.5px}
.fgt td.empty{background:transparent;text-align:center}
.fgt td.empty::after{content:'\00b7';color:var(--line2)}
/* a form: the word, and under it how often and what is joined to it */
.fchip{display:flex;flex-direction:column;align-items:flex-end;width:100%;margin:0 0 3px;
  padding:2px 5px;border:1px solid var(--line2);background:var(--bg);cursor:pointer;
  border-radius:0;font:inherit;text-align:right}
.fchip:last-child{margin-bottom:0}
.fchip:hover{border-color:var(--accent)}
.fchip .heb{font-family:var(--heb);direction:rtl;font-size:calc(19px * var(--sc,1));
  line-height:1.3;color:var(--ink);white-space:nowrap}
.fchip .grk{font-family:var(--grk);font-size:calc(17px * var(--sc,1));line-height:1.3;
  color:var(--ink);white-space:nowrap}
.fchip:has(.grk){align-items:flex-start;text-align:left}
.tfw.grk{font-family:var(--grk);font-size:calc(24px * var(--sc,1));color:var(--ink)}
.fchip .fcm{font-size:10.5px;line-height:1.2;color:var(--ink3);white-space:nowrap}
.fchip .fcm i{font-style:normal}
.fgn .fchip{display:inline-flex;width:auto;margin:2px}
.fchip.cur{border-color:var(--hl-line);box-shadow:inset 0 -3px 0 var(--hl-line);background:var(--hl)}
.fchip.on{background:var(--accent-bg);border-color:var(--accent)}
.fgn{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px;margin:8px 0 0;font-size:12px}
.fgnl{font-weight:600;margin-right:6px;min-width:9em}
/* "This form": the clicked word's parsing, part by part (index.js, gram.js) */
.tf{font-size:calc(13.5px * var(--sc,1));line-height:1.55;color:var(--ink2)}
.tfhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.tfw{font-family:var(--heb);direction:rtl;font-size:calc(26px * var(--sc,1));color:var(--ink)}
.tftr{font-style:italic;color:var(--ink3)}
.tfgl{color:var(--ink)}
.tfcode,.tfsc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  color:var(--ink3)}
.tfcode{flex-basis:100%}
.tfseg+.tfseg{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.tfsegh{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:4px}
.tfsg{color:var(--ink);font-weight:600}
.tfl{margin:3px 0}
.tfl b{color:var(--ink)}
.tfmore{color:var(--accent);font-size:12px;white-space:nowrap}
.occ .os{font-size:calc(20px * var(--sc,1));line-height:1.9;margin-top:3px}
.occ .os.sec{font-size:calc(17px * var(--sc,1));line-height:1.75;margin-top:6px;opacity:.85}
.occ .os.sec.heb{font-size:calc(19px * var(--sc,1))}
.occ .os.heb{font-family:var(--heb);direction:rtl;text-align:right;font-size:calc(22px * var(--sc,1))}
.occ .os.grk{font-family:var(--grk)}
.occ .os mark{background:var(--hl);color:var(--ink);border-radius:0;padding:0 2px;
  box-shadow:0 1px 0 var(--hl-line)}
/* The small variant is not a header control and must not take --ctl: it sits
   inside a panel among text, where a 44px box would tower over its own line.
   It asked for min-height:0, which was enough while label.chk only set a
   minimum; now that the height is fixed it has to say height:auto instead. */
label.chk.sm{display:inline-flex;font-size:12.5px;padding:5px 9px;
  height:auto;min-height:0;margin-bottom:14px}

.scale{display:inline-flex;gap:4px;margin-left:auto}
.scb{border:1px solid var(--line);background:var(--bg);color:var(--ink2);border-radius:0;
  width:30px;height:28px;cursor:pointer;font:600 12px/1 "Public Sans",sans-serif;
  display:flex;align-items:center;justify-content:center}
.scb:hover{border-color:var(--accent);color:var(--ink)}
/* the verse-number toggle while the numbers are hidden: struck through and
   slanted, so it reads as switched off -- filled in, it read as selected */
.scb.vnb[aria-pressed="true"]{font-style:italic;text-decoration:line-through;
  text-decoration-thickness:1.5px;color:var(--ink3)}
.wc-head .scale{position:absolute;top:14px;right:54px}

#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:9px 16px;border-radius:0;font-size:13.5px;z-index:60;opacity:0;pointer-events:none;
  transition:opacity .18s}
#toast.on{opacity:.94}
kbd{font:11px ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:0;padding:1px 5px;color:var(--ink2);background:var(--bg)}
.hint{max-width:960px;margin:0 auto;padding:0 20px 40px;font-size:12.5px;color:var(--ink3)}

/* ---- tapped-word selection: the touch stand-in for hover ---- */
.verse .w.sel,.cv .w.sel,.orig-line .t.sel{background:var(--hl);box-shadow:0 0 0 2px var(--hl-line)}
.il .cell.sel{background:var(--hl);border-color:var(--hl-line);box-shadow:0 0 0 2px var(--hl-line)}

/* ---- peek bar: what a tapped word is, + a way into the full card ---- */
#peek{position:fixed;left:8px;right:8px;z-index:45;display:none;align-items:center;gap:11px;
  bottom:calc(8px + env(safe-area-inset-bottom));background:var(--panel);
  border:1px solid var(--hl-line);border-radius:0;padding:9px 10px 9px 13px;
  box-shadow:0 8px 30px rgba(0,0,0,.24)}
#peek.on{display:flex}
.pk-o{font-size:23px;line-height:1.35;flex:0 0 auto;max-width:34vw;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pk-o.heb{font-family:var(--heb);direction:rtl;font-size:25px}
.pk-o.grk{font-family:var(--grk)}
.pk-txt{flex:1 1 auto;min-width:0}
.pk-gl{display:block;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-tr{display:block;font-size:11.5px;font-style:italic;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-sn{font-style:normal;color:var(--accent);font-weight:700;margin-right:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pk-go{flex:0 0 auto;border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);
  font-weight:600;font-size:13px;border-radius:0;padding:9px 11px;min-height:40px;cursor:pointer}
.pk-il{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:0;padding:7px 10px;font:inherit;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.pk-il:hover{border-color:var(--accent);color:var(--accent)}
/* the narrowest phones need the room for the word itself */
@media(max-width:380px){ .pk-il{display:none} }
.pk-x{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  border-radius:0;width:36px;height:36px;font-size:17px;line-height:1;cursor:pointer}

@media(max-width:759px){
  /* the controls wrap onto a second line rather than squeezing each other */
  .hrow{flex-wrap:wrap}
  select{flex:1 1 150px;min-width:150px;max-width:none}
  main{padding:16px 12px 120px}
  .card{padding:8px 7px;border-radius:0;margin-bottom:12px}
  .verse{font-size:20px;line-height:1.6}
  .orig-line{font-size:26px;line-height:1.85}
  .orig-line.heb{font-size:29px;line-height:2}
  .orig-line .t{padding:2px 3px}          /* fatter tap target */
  .il{gap:7px}
  .il .cell{min-width:78px;max-width:47vw;padding:8px 8px 7px}
  .il .o{font-size:22px}
  .il.heb .o{font-size:24px}
  .il .gl{font-size:13.5px}
  .hint{display:none}
  .sectlabel{margin-bottom:9px}

  /* the word card becomes a bottom sheet */
  #wc{top:auto;left:0;right:0;bottom:0;width:100%;height:86vh;height:86dvh;
      border-left:none;border-top:1px solid var(--line);border-radius:0;
      box-shadow:0 -8px 32px rgba(0,0,0,.28)}
  #wc::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
      width:38px;height:4px;border-radius:0;background:var(--line)}
  .wc-head{padding:20px 16px 13px}
  .wc-lemma{font-size:32px}
  .wc-body{padding:14px 16px calc(40px + env(safe-area-inset-bottom))}
  .occ{padding:12px 0}
  .occ .os{font-size:19px}
  .occ .os.heb{font-size:21px}
  .occ:hover{margin:0;padding-left:0;padding-right:0}
  .chip{padding:6px 11px;font-size:13px}
  #occfilter{font-size:16px;padding:10px 12px}   /* 16px stops iOS zoom-on-focus */
}
@media(max-width:380px){
  .brand{font-size:13px}
  .il .cell{min-width:70px}
  label.chk{font-size:12px;padding:8px 9px;gap:5px}
  select{min-width:135px}
}

/* ---------------- site footer ----------------
   newprotest.org's copyright line, as one link home. It wears this page's
   palette rather than the main site's, so it follows light and dark with
   everything else -- panel and hairline, the same pairing as the header. */
.site-footer{display:block;margin-top:56px;padding:22px 0;border-top:1px solid var(--line);
  background:var(--panel);color:var(--ink3);text-decoration:none;text-align:center;
  font-size:12px;letter-spacing:.02em}
.site-footer .container{max-width:1140px;margin:0 auto;padding:0 16px}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--accent)}

/* ---------------- what this is ----------------
   An in-page panel, not a window: a pop-up blocker has nothing to block.
   Shares the word card's scrim and its Esc-to-close habit.

   Between the fences below is the whole of it, styles and words, and
   make_readers.py lifts both into the library pages verbatim. Edit it here
   and nowhere else; re-run the generator and the other fifteen follow. The
   library side brings its own veil, having no word card to share one with. */
/* >>> about-css >>> */
/* Its own face. This dialog is drawn on both halves of the site, and they
   set different body fonts deliberately: sans here, Georgia in the library
   readers. Inheriting meant the same paragraphs read differently depending on
   where you opened them. Spelled out rather than var(--ui), which is not the
   same stack on both sides. */
#about{font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:fixed;z-index:51;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(44rem,calc(100vw - 32px));max-height:min(84vh,760px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;background:var(--panel);border:1px solid var(--line);
  border-radius:0;box-shadow:0 12px 48px rgba(0,0,0,.28);display:none;padding:30px 34px 26px}
#about.on{display:block}
.ab-close{position:absolute;top:14px;right:16px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink2);border-radius:0;width:30px;height:30px;font-size:17px;line-height:1;
  cursor:pointer;padding:0}
.ab-close:hover{border-color:var(--accent);color:var(--accent)}
/* set at -.03em when the rest of the site used -.02em, which is the drift an
   outline cannot have; sized by height now, so it scales exactly */
.ab-mark{line-height:0}
.ab-mark .mk{height:25px;width:auto;color:var(--ink)}
.ab-mark .mk .np{fill:var(--accent)}
.ab-tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);
  margin:7px 0 22px}
#about h3{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;margin:24px 0 7px}
#about p{margin:0 0 11px;font-size:16px;line-height:1.62;color:var(--ink2)}
/* A link inside the prose. The panel had rules for its headings, its
   paragraphs, its bold and the links in its footer -- and none for a link in a
   sentence, so that one fell back to the browser's own colours. On the dark
   theme a visited link is #551a8b on #1e1d23, which is 1.5:1: not faint,
   invisible. The accent is 7.3:1 there and 5.9:1 in light. Underlined because
   it sits mid-sentence, where colour alone is not enough to find it -- and
   because that is the one thing a reader can rely on if they see no colour at
   all. .ab-foot keeps its own quieter treatment; it is not a <p>. */
#about p a{color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
#about p a:hover{text-decoration-thickness:2px}
#about p.lead{font-size:18px;color:var(--ink);line-height:1.55}
#about b{color:var(--ink);font-weight:600}
.ab-rule{height:1px;background:var(--line);margin:24px 0 0}
.ab-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin:16px 0 0;font-size:13px;color:var(--ink3)}
.ab-foot a{color:var(--accent);text-decoration:none}
.ab-foot a:hover{text-decoration:underline}
@media(max-width:560px){
  #about{padding:24px 20px 20px;width:calc(100vw - 20px);max-height:88vh}
  .ab-mark .mk{height:21px}
  #about p{font-size:15.5px}
}
/* <<< about-css <<< */
/* One grammar note (openGnote in index.js). Above the word card, which is
   still open behind it, so it takes the next layer up. */
#gnote{position:fixed;z-index:53;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(30rem,calc(100vw - 24px));max-height:min(80vh,640px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 12px 48px rgba(0,0,0,.32),0 0 0 100vmax rgba(0,0,0,.34);display:none;padding:22px 24px 18px}
#gnote.on{display:block}
#gnote .gn-tag{font:600 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 40px 8px 0}
#gnote h2{margin:0 40px 10px 0;font:700 20px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
#gnote .gn-short{margin:0 0 10px;font:16px/1.55 Georgia,"Iowan Old Style",serif;color:var(--ink)}
#gnote .gn-long{margin:0;font:15px/1.65 Georgia,"Iowan Old Style",serif;color:var(--ink2)}
#gnote .heb{font-family:var(--heb);font-size:1.15em}
#gnote .grk{font-family:var(--grk)}
#gnote .gn-foot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
#gnote .gn-foot a{color:var(--accent)}
.tfall{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px}
.tfall a{color:var(--accent)}
/* The calendar of readings. Built to the same idiom as #about -- one element
   over the shared scrim, shown by .on -- rather than a second kind of dialog.
   z-index 51 to sit with it, above the scrim's 50. */
#ptcal{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46rem,calc(100vw - 28px));max-height:min(86vh,780px);
  display:none;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 12px 48px rgba(0,0,0,.28)}
#ptcal.on{display:flex}
.ptcal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.ptcal-head h2{margin:0;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);font-weight:700}
.ptcal-head .sp{flex:1 1 auto}
#ptcalYear{font:inherit;font-size:13px;padding:5px 8px;background:var(--bg);
  color:var(--ink);border:1px solid var(--line);border-radius:0}
.ptcal-close{border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;padding:0}
.ptcal-close:hover{border-color:var(--accent);color:var(--accent)}
.ptcal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 8px}
.ptcal-row{display:grid;grid-template-columns:7.2rem 1fr;gap:2px 12px;
  padding:9px 16px;border-bottom:1px solid var(--line2);width:100%;
  text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  font:inherit;color:inherit}
button.ptcal-row{cursor:pointer}
button.ptcal-row:hover{background:var(--row)}
.ptcal-row .when{font-size:12px;color:var(--ink3);line-height:1.35}
.ptcal-row .when b{display:block;color:var(--ink2);font-weight:600}
.ptcal-row .what{min-width:0}
.ptcal-row .nm{font-weight:600;color:var(--ink)}
button.ptcal-row:hover .nm{color:var(--accent)}
.ptcal-row .ref{font-size:12.5px;color:var(--ink2);margin-top:2px}
.ptcal-row .tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-top:3px}
.ptcal-row.fest{background:var(--haf-bg)}
.ptcal-row.fest .nm{color:var(--haf-ink)}
.ptcal-row.here{box-shadow:inset 3px 0 0 var(--accent)}
.ptcal-foot{padding:9px 16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink3)}
.ptcalbtn{display:inline-block;margin:12px 0 0;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);padding:8px 12px;cursor:pointer;
  font:12.5px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ptcalbtn:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:560px){
  #ptcal{width:calc(100vw - 16px);max-height:90vh}
  .ptcal-row{grid-template-columns:1fr;gap:1px}
  .ptcal-row .when b{display:inline;margin-right:6px}
}
/* Getting out of a long passage. The summary that opens a fold is far off the
   top of the screen by the time you have read to the end of a Rashi or a
   Talmud page, so there is a way out down there too. */
.foldclose{display:block;width:100%;margin:16px 0 2px;padding:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink3);
  font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.foldclose:hover{border-color:var(--accent);color:var(--accent)}
.ccard .foldclose{border-color:var(--cline);color:var(--cink)}
@media(max-width:760px){.foldclose{padding:13px}}   /* a comfortable thumb target */