/* study.css — THE study surface. Generated by tools/extract_study.py
   from src/mikraos.html; do not hand-edit, edit the reader and re-run.

   Every learning surface on torah.today loads this: the reader, the
   otzar, a shiur sheet, the daf, the bindery. It carries the four things
   that make them one experience rather than a family resemblance —

     the palette          one set of tokens, contrast-checked
     the column grid      34fr 36fr 30fr 46px, proportions never px
     the rectangle        .rect — one text block, everywhere
     which side           primary on the reading hand; in either English
                          mode the whole grammar mirrors. Carried by the
                          document's `dir`, set to ltr when EN>0.

   The reader stays canonical and this file is cut OUT of it, so the
   surface that defines the model cannot drift from the model. A page
   that loads this and sets `dir` correctly conforms by construction. */

:root{
  /* eye-calibrated: warm grounds (less blue emission), softened ink
     (no harsh max-contrast), indigo accent instead of scorching blue */
  --page:#eae7dc; --panel:#f3f0e6; --raise:#f9f6ee; --deep:#e1ded2;
  --line:rgba(31,30,24,.14); --line-soft:rgba(31,30,24,.07);
  /* Hierarchy is carried by TYPE, not by fading the ink.
     --faint was #a09e90, which measures 2.0–2.5:1 on this page — well under the
     4.5:1 a person can comfortably read, and it was carrying real content ("no
     mefarshim on this pasuk", the ref under each source, the hints). --dim was
     #6c6a5d at 4.04:1, also short. Both are now darkened past 4.5:1.
     What told you a label was secondary is now what it always should have been:
     it is smaller, it is set in the mono or UI face, it is uppercase and tracked.
     Those distinctions survive at full strength; low contrast did not need to be
     doing that job, and on a sunlit phone it stopped doing it at all. */
  --txt:#2b2a22; --bright:#181711; --dim:#545046; --faint:#635e4d;
  --blue:#2140db; --blue-deep:#1b33b0; --blue-soft:rgba(33,64,219,.07);
  --viol:#6a5cd0; --viol-deep:#5648b4; --viol-line:rgba(106,92,208,.26);
  --scale:1;
  --he:'IBM Plex Sans Hebrew','Heebo',sans-serif;
  --disp:'Heebo','IBM Plex Sans Hebrew',sans-serif;
  --pasukfont:'Taamey Frank CLM','David Libre',serif;
  --meffont:'Noto Serif Hebrew','Frank Ruhl Libre','Taamey Frank CLM',serif;
  /* Commentary has its own INK, not a weaker version of the pasuk's. A muted
     sepia is what a printed Mikraos Gedolos uses to separate the voices, it does
     not compete with the blue that marks a dibbur hamatchil, and at 9.6:1 it is
     darker than the grey it replaces rather than lighter. Distinguishing by hue
     means the mefarshim can be set at full strength and still read as a
     different voice from the text they sit beside. */
  --meftxt:#41382b; --entxt:#55534a;
  --ui:'Space Grotesk',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

/* ---- the instrument: depth columns. When space runs out the grid grows
   leftward past the viewport and a slider appears — room for deeper
   generations of commentary. ---- */
main{display:grid;grid-template-columns:34fr 36fr 30fr 46px;flex:1;min-height:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  /* no transition on the column track: animating the grid makes every relayout
     (section change, rotate, unfold) visibly slide, which reads as instability */
  transition:opacity .3s ease}
/* opening a source folds the study back (recedes); closing it resurfaces fully.
   main is a grid+scroll container that ignores transform/filter, so we recede
   it with opacity, which it honors. */
body.folded main{opacity:.32}
body.folded #stack{opacity:.32;transition:opacity .3s ease}
.col{display:flex;flex-direction:column;min-width:0;border-inline-start:1px solid var(--line-soft)}
.col:first-child{border-inline-start:0}
.col-h{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;
  padding:11px 16px;background:var(--deep);border-bottom:1px solid var(--line)}
.col-h .ctx{margin-inline-start:auto}
.col-h .fold{background:none;border:0;color:var(--faint);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:0 2px;transition:.15s}
.col-h .fold:hover{color:var(--blue)}
/* folded column -> thin strip */
.col .vtab{display:none;flex:1;align-items:center;justify-content:center;cursor:pointer;
  writing-mode:vertical-rl;font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.3em;color:var(--dim);user-select:none;transition:.15s;gap:10px}
.col .vtab:hover{background:var(--raise);color:var(--blue)}
.col.folded .col-h,.col.folded .col-b{display:none}
.col.folded .vtab{display:flex}
.col.folded{border-inline-start:1px solid var(--line);background:var(--deep)}
.col-h .cap{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue)}
.col.dim .col-h .cap{color:var(--faint)}
.col-h .ctx{font-size:12.5px;color:var(--dim)}
.col-b{flex:1;overflow-y:auto;min-height:0}

/* ---- rectangles. sharp. ruler-drawn. ---- */
/* 16px of side padding was too little for Hebrew set at 20px+: the first and
   last letters of every line sat almost on the rule, which reads as cramped
   however good the type is. Vertical rhythm is unchanged — this is about the
   gutter, not the leading. */
.rect{border-bottom:1px solid var(--line-soft);background:var(--panel);cursor:pointer;
  padding:15px 22px;transition:background .13s;position:relative}
.rect:hover{background:var(--raise)}
.rect.on{background:var(--raise);
  box-shadow:inset 3px 0 0 var(--blue),0 8px 30px rgba(33,64,219,.10)}
.rect .tag{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rect .nm{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.08em;
  color:var(--dim);direction:ltr}
.rect .nmhe{font-family:var(--disp);font-weight:700;
  font-size:calc(14.5px*var(--scale));color:var(--blue-deep);
  transition:font-weight .15s}
.rect:hover .nmhe{font-weight:900}
.rect .ref{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--faint)}
.rect .deeper{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--blue);
  border:1px solid rgba(33,64,219,.3);padding:3px 9px;cursor:pointer;
  background:none;transition:.15s}
.rect .deeper:hover{background:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(33,64,219,.3)}
.rect.on .deeper.lit{background:var(--blue);color:#fff}
/* the slick chevron */
.rect .arr{flex:0 0 auto;font-family:var(--ui);font-size:13px;color:var(--faint);
  display:inline-block;transition:transform .2s cubic-bezier(.2,.7,.2,1),color .15s;
  transform:rotate(0deg);margin-inline-start:4px}
.rect.open .arr{transform:rotate(-90deg);color:var(--blue)}
.rect:hover .arr{color:var(--blue)}
.col-b .empty{height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);text-align:center;line-height:2.4}
.col.dim .col-b{background:
  repeating-linear-gradient(45deg,transparent 0 16px,rgba(31,30,24,.02) 16px 32px)}
/* ---- WHICH SIDE THE TEXT SITS ON -------------------------------------------
   The primary source sits on the reading hand and depth grows away from it:
   in Hebrew the pasuk is on the RIGHT and the mefarshim open leftward; in
   either English mode the whole grammar mirrors — pasuk LEFT, mefarshim opening
   rightward. That is one rule for every section of the work, not a per-page
   decision, and it is carried by the document's `dir` so the grid, the rail and
   every logical margin follow it without a second switch to keep in step.

   These rules are keyed to `body.en` (EN 1 or 2), NOT to `body.enonly`. They
   used to be enonly, which meant the bilingual mode kept a Hebrew layout while
   showing English text — reading left-to-right against a right-to-left page.
   Hiding the Hebrew is a content decision and stays on .enonly; which side the
   columns fall on is a direction decision and belongs here.

   Safe to flip the document because every Hebrew block declares its own
   `direction:rtl` in CSS rather than inheriting it. The two below are the
   exceptions that have to be restated at this level. */
body.en #rail{direction:ltr}
body.en .stackrow .pv{direction:rtl;text-align:right}
body.en .rect.open .arr{transform:rotate(90deg)}
/* Chitas: non-Rashi mefarshim tucked behind one thin row */
.rect.mef.tucked{display:none}
.rect.on .hasrashi{background:var(--blue);color:#fff;border-color:var(--blue)}
.rect.mef.addr{opacity:.9}
.rect.mef.addr .prev{font-style:italic;color:var(--dim)}