/* ============================================================================
   The parchment sheet: frame, running head, footer, the content styles that live
   INSIDE the engine columns (lemma faces, superscripts, margins), and print rules.
   ========================================================================== */

@font-face {
  font-family: "Vilna";
  src: url("../fonts/Mekorot-Vilna.ttf");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vilna";
  src: url("../fonts/Mekorot-Vilna-Bold.ttf");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: "Rashi";
  src: url("../fonts/Mekorot-Rashi.ttf");
  font-display: swap;
}

:root {
  --ink: #000;
  --parchment: #ffffff;
  --rule: #000;
  --serif-he: "Taamey Frank CLM", "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
html {
  /* Mobile browsers "boost" text they deem small, selectively inflating runs — fatal to a layout
     whose geometry was measured at exact px. Pin the rendered size to the authored size. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--serif-he);
}

#daf-pages {
  display: flex;
  flex-direction: column;
  /* `safe` keeps an overflowing sheet reachable by scroll (plain `center` hides the start-side
     overflow past the viewport edge); the bare fallback line serves older browsers. */
  align-items: center;
  align-items: safe center;
  gap: 40px;
  padding: 28px 16px 64px;
}

/* The sheet — definite width (daf + padding) so a wide level-2 margin can't blow
   the layout up. */
.page {
  position: relative;
  width: calc(var(--daf-w, 980px) + 48px);
  /* NO max-width: the sheet must always envelop the fixed-px daf inside it. Capping it to the
     viewport (as an old max-width:100% did) shrank the parchment+border under zoom-in / on mobile
     while the daf kept its measured width — text ran naked past the page boundary. Narrower
     viewports get a horizontal scrollbar instead, with the frame intact. */
  padding: 14px 22px 16px;
  background: var(--parchment);
  border: 1px solid var(--rule);
}

/* ---- running head: [margin label | title·subtitle + daf number | margin label] -
   aligned with the body columns; a single rule beneath; daf number at the gilyon
   (inner) edge — מקורות + ב. on the left on עמוד א, mirrored on עמוד ב. */
.daf-head {
  /* LTR so the flex zones sit in physical [left | core | right] order, matching the
     absolutely-positioned body columns (the page itself is dir=rtl). */
  direction: ltr;
  display: flex;
  align-items: flex-end;
  gap: var(--gap, 12px);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.head-margin {
  flex: 0 0 var(--margin-w, 90px);
  direction: rtl; /* zones are ordered LTR by the flex row; their text is RTL */
  text-align: center;
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 12px;
}
.head-core {
  flex: 1;
  position: relative;
  direction: rtl; /* so "ב." / "ב:" and the title read right-to-left */
  text-align: center;
  line-height: 1.1;
}
/* The Vilna running head: one line of [perek name] · [perek ordinal] · [tractate], spaced evenly
   across the core (RTL), uniform size — no big title / small subtitle. */
.hc-titles {
  display: flex;
  justify-content: space-evenly;
  align-items: baseline;
  font-family: "Vilna", var(--serif-he);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.02em;
}
.hc-daf {
  position: absolute;
  bottom: 0;
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 28px;
}
.page.amud-a .hc-daf {
  left: 0;
}
.page.amud-b .hc-daf {
  right: 0;
}

/* ---- daf body (the engine mount) ----------------------------------------- */
.daf-body {
  width: var(--daf-w, 980px);
  margin: 0 auto;
}
.daf-body > div {
  margin-inline: auto;
}

/* ---- content INSIDE the engine columns ----------------------------------- */
.lead {
  font-weight: bold;
}
/* The illuminated opening word: a large word inside an ornamental frame, set as a
   FULL-WIDTH banner at the start of the main text — like a real Talmud incipit, with
   text only above/below it, none beside. It is a block formatting context (flow-root)
   with auto width, so it fills the gemara channel exactly between the engine's left/right
   float spacers (the Rashi/Tosafot carve) and the gemara flows beneath it. The frame is
   a border-image (assets/incipit-frame.svg). */
/* Outer block fills the gemara channel (flow-root → sits between the engine's float
   spacers; block → text only above/below, none beside). The inner frame is narrower
   and centred within it, so the incipit is a compact centred banner on its own line. */
.incipit {
  display: flow-root;
  width: auto;
}
.incipit-box {
  display: block;
  box-sizing: border-box;
  width: 58%; /* % of the channel-width outer, so it scales with the column */
  margin: 6px auto 9px;
  border: 16px solid transparent;
  border-image: url("/assets/incipit-frame.svg") 26 stretch;
}
.incipit-word {
  display: block;
  width: 100%;
  height: auto;
}
.incipit-word text {
  font-family: "Vilna", var(--serif-he);
  font-weight: 700;
  font-size: 60px; /* viewBox units — sets the glyph height; textLength sets the width */
  fill: currentColor;
}
/* A perek (chapter) opening (the enlarged first Mishnah word, which begins a new line) and the
   מתני׳/גמ׳ section markers: enlarged + bold INLINE, the Vilna convention. Like .lemma-lead, each
   overhangs via inline-block with a capped line-height, sized just under the gemara leading, so the
   oversized glyphs read clearly WITHOUT growing the measured line box the packer relies on. */
.perek-open,
.daf-rubric,
.hadran {
  font-family: "Vilna", var(--serif-he);
  font-weight: 700;
  line-height: 1em;
  display: inline-block;
  vertical-align: baseline;
}
.perek-open {
  font-size: 1.4em;
}
/* הדרן עלך … — the siyum line ends a perek, on its own line, enlarged but with a capped line-height
   so the bigger glyphs don't grow the gemara's measured line box. */
.hadran {
  font-size: 1.4em;
}
.daf-rubric {
  font-size: 1.3em; /* מתני׳ / גמ׳ */
}
/* dibur hamatchil (DH). The two commentaries' DHs are distinguished by SCRIPT, as in a real
   daf: Rashi's DH is RASHI script — it reads as the opening of its Rashi-script comment, set
   apart by weight, not a different face. Tosafot's DH is SQUARE (Vilna), standing out from its
   Rashi-script body, with an oversized first word. Capped line-height keeps any heavier/larger
   glyph overhanging WITHOUT spreading the small line box the engine measures. */
.lemma {
  font-weight: bold;
}
.lemma:not(.lemma-tos) {
  /* font-family is INHERITED from the commentary column, so the Rashi DH follows the script
     toggle: Rashi script normally, square (Vilna) when the column is set to square. A hair
     larger so it reads as a DH (bold has no effect in Rashi script); line-height:1em keeps its
     contribution under the column's fixed leading, so the line never grows. It stays inline
     (wraps), so a multi-word DH never overflows the strip. */
  font-size: calc(1em + 1px);
  line-height: 1em;
}
.lemma-tos {
  font-family: "Vilna", var(--serif-he);
  /* the whole Tosafot DH is 1px larger than the body; line-height:1em caps its contribution so
     the column's fixed leading is unchanged. It stays inline so a multi-word DH still wraps. */
  font-size: calc(1em + 1px);
  line-height: 1em;
}
/* its first word is larger again — an ADDITIONAL +1px on the DH size (calc is relative to the
   DH's own size), an oversized inline word that overhangs via inline-block + capped line-height
   so it never grows the measured line box. */
.lemma-tos .lemma-lead {
  font-size: calc(1em + 1px);
  display: inline-block;
  line-height: 1em;
  vertical-align: baseline;
}
/* In RASHI-script mode the square (Vilna) DH contrasts strongly with the Rashi-script body, so
   it is set larger to read as a DH: the body 2px larger again (= body +3px), and the first word
   keeps its +1px on top (= body +4px). Capped line-height keeps the leading unchanged. In square
   mode (column already Vilna) it stays at the smaller body +1 / +2. */
[data-font="rashi"] .lemma-tos {
  font-size: calc(1em + 3px);
}
.src {
  opacity: 0.72;
  font-size: 0.9em;
}
.sep {
  opacity: 0.5;
}
.to-ref {
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-inline-start: 1px;
}
/* מסורת הש״ס reference marks (the hebrew letters א) ב) …) are set in Rashi script — the
   conventional face for the מסורת letters — slightly larger to stay legible at superscript
   size, and unbolded (Rashi script has no bold). */
.to-ref-rashi {
  font-family: "Rashi", var(--serif-he);
  font-weight: normal;
  font-size: 0.78em;
}
/* When one comment cites two separate passages it carries two adjacent
   superscripts (e.g. ⁵⁶) — a comma keeps them from reading as one number. */
.to-ref + .to-ref::before {
  content: ",";
  margin-inline-end: 1px;
}

/* ---- reference margins (level-2 columns) --------------------------------- */
.app-title {
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 1.15em;
  text-align: center;
  margin-bottom: 4px;
  user-select: none; /* chrome, not content: a section title (incl. the "(המשך)" header) never selects */
}
/* Divider between sections of a margin (external) column: an ornamental flourish.
   The column's .daf-text box is wider than the page (the float-shaping trick); only
   INLINE content flows around the float into the visible text strip. So the divider is
   an inline-block image inside a text-align:center block — exactly like the section text
   — which lands it centred in the strip. It is sized by HEIGHT to stay compact. */
.app-div {
  text-align: center;
  margin: 5px 0 4px;
  line-height: 0;
  user-select: none; /* the ornamental section divider is chrome — never part of a text selection */
}
.app-sep {
  display: inline-block;
  height: 30px;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}
.app-body .item {
  text-align: start;
  padding: 0.5px 0;
}
/* רבינו חננאל / גליון flow as ONE continuous run: each comment is an inline span whose square DH
   (.gloss-dh) marks its start; the run justifies as a block (no block break per comment). */
.prose-run {
  text-align: justify;
  text-align-last: start;
}
/* a spillable prose commentary's continuation header in the other margin ("רבינו חננאל (המשך)") —
   set like a section title (.app-title) with a hair of separation from the apparatus above it. */
.spill-cont {
  margin-top: 3px;
}
/* A prose entry's leading דיבור־המתחיל (the phrase it glosses). The apparatus body line is 15px
   (10px × 1.5); pinning the DH's line box to that exact height lets it grow — RC +1px, גליון +3px —
   WITHOUT ever altering the column's leading, so every DH line is still one Rashi line. */
.gloss-dh {
  line-height: 15px;
}
/* Rabbeinu Chananel: emphasise the DH a hair larger + bold, in the same script as its body. */
.app-sec[data-kind="rabbeinuChananel"] .gloss-dh {
  font-size: calc(1em + 1px);
  font-weight: bold;
}
/* גליון הש״ס: the gloss BODY follows the commentary script (Rashi → square in square mode). Its DH
   is SQUARE (Vilna) so it stands out from the Rashi body, set +3px in Rashi mode; in square mode
   (body already square) the DH instead grows just +1px and bolds. Either way the 15px line above
   keeps the leading a Rashi line. */
.app-sec[data-kind="gilyon"] .app-body {
  font-family: "Rashi", var(--serif-he);
}
[data-font="vilna"] .app-sec[data-kind="gilyon"] .app-body {
  font-family: "Vilna", var(--serif-he);
}
.app-sec[data-kind="gilyon"] .gloss-dh {
  font-family: "Vilna", var(--serif-he);
  font-size: calc(1em + 3px);
}
[data-font="vilna"] .app-sec[data-kind="gilyon"] .gloss-dh {
  font-size: calc(1em + 1px);
  font-weight: bold;
}
.averse {
  text-align: justify;
  text-align-last: start;
  padding: 1px 0;
}
.averse .anum,
.app-body .anum {
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  margin-inline-end: 2px;
}
/* תורה אור flows as one continuous run; set each verse number off from the previous פסוק with a
   little extra leading space, so a new quote opens clearly (a plain space would collapse). */
.app-sec[data-kind="torahOr"] .anum {
  margin-inline-start: 0.55em;
}
/* the מסורת margin letter matches its inline mark: Rashi script, unbolded. */
.app-body .anum-rashi {
  font-family: "Rashi", var(--serif-he);
  font-weight: normal;
}
/* מסורת הש״ס / עין משפט: the classic compact gilyon columns — one justified Rashi-script
   paragraph of "א) ref, ב) ref, …" (inline .mref runs joined by commas, no brackets, no break). */
.app-sec[data-kind="masoret"] .app-body,
.app-sec[data-kind="einMishpat"] .app-body {
  font-family: "Rashi", var(--serif-he);
  text-align: justify;
  text-align-last: start;
}
.averse .aref {
  font-size: 0.85em;
  opacity: 0.7;
}
/* A linked citation (תורה אור → Sefaria, a source bracket → a news/Wikisource URL …)
   must not look like a link — no colour or underline change — but the cursor signals
   it is clickable. Covers every <a> in a margin section. */
.app-body a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.interp .lemma {
  font-size: 1.1em;
}

/* ---- the closing epigraph ------------------------------------------------ */
.scripture {
  width: var(--daf-w, 980px);
  margin: 14px auto 0;
  padding: 12px 2px 2px;
  border-top: 3px double var(--rule);
}
.scripture-cite {
  text-align: center;
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
}
.scripture-hebrew {
  font-size: 12px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: start;
  margin-bottom: 10px;
}
.bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.bilingual-head {
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 9.5px;
  text-align: center;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(107, 88, 54, 0.5);
}
.bv {
  font-size: 11px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: start;
}
.bv.heb {
  color: #4a3f30;
}
.vn {
  font-family: "Vilna", var(--serif-he);
  font-weight: bold;
  font-size: 0.62em;
  vertical-align: 0.35em;
  margin-inline-end: 0.3em;
  opacity: 0.7;
}

/* ---- print --------------------------------------------------------------- */
@media print {
  html,
  body {
    background: #fff;
  }
  #daf-pages {
    display: block;
    gap: 0;
    padding: 0;
  }
  :root {
    --ink: #000;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .page {
    margin: 0 auto;
    box-shadow: none;
    outline: none;
    border-color: #000;
    break-inside: avoid;
  }
  .page + .page {
    break-before: page;
    page-break-before: always;
  }
}

@page {
  size: A3 portrait;
  margin: 12mm;
}

/* ── Landing index (read.html opened with no ?set=) ─────────────────────────── */
.daf-picker {
  max-width: 34rem;
  margin: 12vh auto 4rem;
  padding: 0 1.5rem;
  text-align: center;
}
.daf-picker h1 {
  font-family: "Vilna", var(--serif-he);
  font-weight: normal;
  /* Sized to keep the full title on ONE line (clamped down on narrow screens). */
  font-size: clamp(1.15rem, 5vw, 1.9rem);
  white-space: nowrap;
  margin: 0 0 1.6rem;
}
.daf-picker ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: start;
}
.daf-picker li {
  border-top: 1px solid #e6e6e6;
}
.daf-picker li:last-child {
  border-bottom: 1px solid #e6e6e6;
}
.daf-picker a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.4rem;
}
.daf-picker a:hover {
  background: #f5f5f5;
}
.daf-picker a .n {
  font-size: 0.9rem;
  color: #888;
  font-variant-numeric: tabular-nums;
}
/* Beta disclaimer under the menu. */
.daf-picker .note {
  margin-top: 2.4rem;
  text-align: start;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #666;
}
.daf-picker .note p {
  margin: 0 0 0.7rem;
}
/* ברכות התורה — said before studying. */
.daf-picker .blessings {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e6e6e6;
  text-align: start;
}
.daf-picker .blessings h2 {
  font-family: "Vilna", var(--serif-he);
  font-weight: normal;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 1rem;
}
.daf-picker .blessings p {
  font-family: "Vilna", var(--serif-he);
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 0 0.9rem;
}
.daf-picker .blessings cite {
  font-style: normal;
  font-size: 0.8em;
  color: #888;
}
.daf-picker .blessings hr {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin: 1.4rem 0;
}
/* Contact footer. */
.daf-picker .contact {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e6e6e6;
  text-align: start;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #666;
}
.daf-picker .contact p {
  margin: 0 0 0.5rem;
}
.daf-picker .contact .email {
  font: inherit;
  color: inherit;
  text-align: start; /* dir=ltr on the element → flush left, its own line */
}