/* Daf Yomi — one stylesheet for every page.
   Previously inlined into each daf, so 2,700 pages meant 2,700 copies. Served
   once and cached, the per-daf HTML is only the daf. */

:root{
  --paper:#fbf7ee; --page-top:#f4ecd8; --ink:#2c261d; --ink-soft:#6a5a3d;
  --muted:#7a6a4d; --faint:#9a8a6d;
  --accent:#8a5a2b; --accent2:#6b3f1d;
  --gold:#c9a86a; --gold-soft:#ead9b3; --panel:#fffdf8; --line:#e2d3b3;
  --quote-bg:#faf3e3; --code-bg:#f0e6ce; --stripe:#fbf7ee;
  --good:#3f8f5b; --good-bg:#e7f4ec; --bad:#c0453b; --bad-bg:#fbe9e7;
  --shadow:0 6px 24px rgba(80,55,20,.10);
  --shadow-sm:0 3px 12px rgba(80,55,20,.12);
  color-scheme:light dark;
}

/* Reading at night is the common case for a daily daf. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#16130f; --page-top:#1e1a14; --ink:#e8e0d0; --ink-soft:#c3b8a2;
    --muted:#a3957a; --faint:#8a7d66;
    --accent:#d9a566; --accent2:#e8c78d;
    --gold:#8a6f3f; --gold-soft:#3a3025; --panel:#1f1b15; --line:#3a3227;
    --quote-bg:#241f18; --code-bg:#2b2419; --stripe:#1b1712;
    --good:#6cbf87; --good-bg:#1d2f23; --bad:#e0776c; --bad-bg:#331f1c;
    --shadow:0 6px 24px rgba(0,0,0,.45);
    --shadow-sm:0 3px 12px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--page-top) 0,var(--paper) 220px) fixed;
  background-color:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* Hebrew and Aramaic. The old build declared these rules but never emitted
   lang="he" on anything, so every quotation rendered in the Latin serif and
   mixed-direction lines could reorder around punctuation. */
[lang="he"],.he{
  font-family:"Frank Ruhl Libre","Taamey Frank CLM","SBL Hebrew","Times New Roman",Georgia,serif;
  line-height:1.75;
}
/* The 6% is optical, so that a Hebrew phrase set inside a Latin line does not
   read small beside it. Written as "a Hebrew element whose parent is not
   Hebrew" rather than on [lang="he"] itself, because with Hebrew as a site
   language the marker now nests — <html lang="he"> around a Hebrew sheet
   around a Hebrew quotation — and applied at every level it would compound. */
:not([lang="he"]) > [lang="he"],.he{font-size:1.06em}

.wrap{max-width:820px;margin:0 auto;padding:0 18px 80px}

/* ---- multilingual content ----
   Every translated string is rendered in every language at once and switched
   by CSS on the root <html lang>, which lang.js sets in <head> before the
   first paint — so no version ever flashes. data-lang="en he" marks one block
   that stands in for both (a daf with no Hebrew sheet yet). */
[data-lang]{display:none}
html[lang="en"] [data-lang~="en"],
html[lang="es"] [data-lang~="es"],
html[lang="he"] [data-lang~="he"]{display:revert}
.untranslated{margin-bottom:14px;font-size:.92rem;color:var(--muted);
  padding:14px 18px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px}

/* ---- provenance notice ----
   Rendered twice per daf: once above the tabs, so it is visible on both views,
   and once at the foot. Deliberately not hidden in print — a printed sheet
   travels further than the page it came from. */
.disclaimer{font-size:.86rem;line-height:1.5;color:var(--muted);
  padding:11px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px}
.disclaimer.top{margin:10px 0 4px;text-align:center}
.disclaimer.foot{margin-top:26px;border-style:dashed;background:none}

/* ---- feedback ----
   The counterpart to the notice above it: the sheet can be wrong, and this is
   how you say so. Quiet by design — a reader who has no correction should not
   have to read past a button, and one who does is looking for it. */
.feedback{margin:12px 0 0;text-align:center;font-size:.86rem;color:var(--muted)}
.feedback a{color:var(--muted);text-decoration:none;
  border-bottom:1px dashed var(--line);padding-bottom:1px}
.feedback a:hover,.feedback a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- site nav ---- */
#site-nav{position:fixed;top:12px;inset-inline-end:14px;z-index:50;display:flex;gap:8px}
#site-nav a,#lang-btn{
  font-family:Georgia,serif;font-size:.85rem;text-decoration:none;
  background:var(--panel);color:var(--accent2);border:1px solid var(--gold);
  border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-sm);
}
#site-nav a:hover,#lang-btn:hover{background:var(--accent2);color:var(--paper)}
#lang-btn{cursor:pointer;line-height:inherit;font-size:.85rem;
  display:inline-flex;align-items:center;gap:5px}
/* Held down while the menu is open, so on a touch screen — where there is no
   hover — it is still clear which pill the menu belongs to. */
#lang-btn[aria-expanded="true"]{background:var(--accent2);color:var(--paper)}
#lang-btn .caret{font-size:.68em;opacity:.8;transition:transform .15s}
#lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* The language menu. Anchored to the button rather than to the nav, so it opens
   under it on either side of the page; min-width keeps it from being narrower
   than what opened it. Hidden with the `hidden` attribute, which lang.js
   toggles — display:none here would fight the attribute's own default. */
#lang-picker{position:relative}
#lang-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:100%;
  display:flex;flex-direction:column;gap:2px;padding:5px;z-index:1;
  background:var(--panel);border:1px solid var(--gold);border-radius:14px;
  box-shadow:var(--shadow);
}
#lang-menu[hidden]{display:none}
#lang-menu button{
  display:flex;align-items:center;gap:7px;white-space:nowrap;text-align:start;
  font-family:Georgia,serif;font-size:.9rem;cursor:pointer;
  background:none;border:0;border-radius:999px;color:var(--accent2);padding:7px 12px;
}
/* The tick is always in the line, invisible when it does not apply, so the names
   sit on one edge and the menu does not resize as the choice moves. */
#lang-menu button::before{content:"✓";width:1em;flex:none;opacity:0}
#lang-menu button[aria-checked="true"]::before{opacity:1}
#lang-menu button[aria-checked="true"]{font-weight:700}
/* :focus, not :focus-visible — an item is only ever focused by the arrow keys or
   by the tap that is about to close the menu. */
#lang-menu button:hover,#lang-menu button:focus{background:var(--gold-soft);outline:none}

/* Read by a screen reader, never shown: kept in the layout at zero size, since
   display:none would take it out of the button's accessible name as well. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ---- header ---- */
header.top{text-align:center;padding:34px 18px 22px;margin-bottom:8px}
header.top h1{font-size:2.05rem;line-height:1.2;margin:0 0 6px;color:var(--accent2);letter-spacing:.2px}
header.top .sub{color:var(--muted);font-size:1rem;font-style:italic}

/* ---- tabs ---- */
.tabs{
  display:flex;gap:8px;justify-content:center;position:sticky;top:0;z-index:20;
  padding:12px 0;margin-bottom:10px;
  /* solid behind the pills, fading only at the very bottom — a fixed fade
     rather than a percentage, so a wrapped second row is not see-through */
  background:linear-gradient(180deg,var(--paper) calc(100% - 16px),transparent);
}
/* The nav pills are fixed in the top corner — right, or left in Hebrew, since
   they sit at the end of the line either way — and always paint above this
   bar. On a wide
   screen the two never meet; narrower than this they do, and the nav silently
   swallows the taps meant for a tab. Parking the stuck bar below the pills
   costs nothing at rest — it is an offset, not extra height. */
@media(max-width:900px){
  .tabs{top:56px}
}
.tab{
  border:1px solid var(--gold);background:var(--panel);color:var(--accent2);
  padding:9px 22px;border-radius:999px;cursor:pointer;font-size:1rem;font-weight:600;
  box-shadow:var(--shadow);transition:.18s;font-family:inherit;
}
.tab:hover{transform:translateY(-1px)}
.tab.active{background:var(--accent2);color:var(--paper);border-color:var(--accent2)}
.view{display:none;animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Learn ---- */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 30px;box-shadow:var(--shadow)}
.sheet h2{font-size:1.4rem;color:var(--accent2);border-bottom:2px solid var(--gold-soft);
  padding-bottom:6px;margin:26px 0 10px}
.sheet h2:first-child{margin-top:0}
.sheet h3{font-size:1.12rem;color:var(--accent);margin:18px 0 6px}
.sheet blockquote{margin:14px 0;padding:12px 18px;background:var(--quote-bg);
  border-inline-start:4px solid var(--gold);border-radius:6px;font-style:italic}
.sheet table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.95rem}
.sheet th,.sheet td{border:1px solid var(--line);padding:7px 10px;text-align:start;vertical-align:top}
.sheet th{background:var(--gold-soft);color:var(--accent2)}
.sheet tr:nth-child(even) td{background:var(--stripe)}
.sheet code{background:var(--code-bg);padding:1px 5px;border-radius:4px;font-size:.9em}
.sheet hr{border:none;border-top:1px solid var(--line);margin:22px 0}
.sheet ul{padding-inline-start:22px}
.sheet li{margin:5px 0}
.sheet strong{color:var(--accent2)}
.table-scroll{overflow-x:auto}

/* ---- read aloud ----
   speak.js hangs one of these inside every heading in the sheet. Inside, not
   floated beside it, so a heading that wraps keeps its button with the last
   line instead of parked over the rule. Quiet until wanted; a phone has no
   hover, so it is never fully invisible. */
.speak{
  font:inherit;font-size:.72em;line-height:1;vertical-align:middle;
  margin-inline-start:9px;padding:4px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--accent);
  opacity:.55;transition:.18s;
}
.speak:hover,.speak:focus-visible{opacity:1;background:var(--gold-soft)}
.speak.on{opacity:1;background:var(--accent2);color:var(--paper);border-color:var(--accent2)}
/* the paragraph, quote, item or row being spoken right now */
.speaking{background:var(--gold-soft);border-radius:6px;box-shadow:0 0 0 3px var(--gold-soft)}
/* a row cannot take the ring, and it has the zebra stripe to outrank */
.sheet tr.speaking{background:none;box-shadow:none}
.sheet tr.speaking td{background:var(--gold-soft)}

/* Each prose tab is a stack of cards now — the sheet, the deck it is made of,
   the next stretch of sheet — where it used to be one block, so the space
   between them belongs to the panel rather than to any one thing in it.
   A gap rather than margins between siblings: every language's copy of the
   sheet is in the panel and all but one are display:none, and a hidden block
   is not a flex item, so no gap is left where it would have been. */
#intro.active,#chazara.active{display:flex;flex-direction:column;gap:22px}
/* The deck under the glossary, and the test at the end of the review: neither
   is a tab of its own any more, so each says what it is where it sits. */
.deck-inline > h2,.quiz-inline > h2{font-size:1.4rem;color:var(--accent2);
  text-align:center;margin:0 0 14px}
.tomorrow{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-style:italic;font-size:.96rem}

/* ---- Quiz ---- */
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;box-shadow:var(--shadow)}
.qbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:6px;font-size:.92rem;color:var(--muted)}
.prog{height:9px;background:var(--gold-soft);border-radius:999px;overflow:hidden;margin:8px 0 22px}
.prog>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));
  border-radius:999px;transition:width .4s ease}
.qnum{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.qtext{font-size:1.28rem;line-height:1.45;margin:8px 0 20px;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:flex-start;gap:12px;text-align:start;width:100%;
  border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:14px 16px;
  cursor:pointer;font-size:1.05rem;font-family:inherit;color:var(--ink);transition:.15s}
.opt:hover:not(.locked){border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt .key{flex:0 0 28px;height:28px;border-radius:50%;background:var(--gold-soft);
  color:var(--accent2);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .key{background:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .key{background:var(--bad);color:#fff}
.opt.locked{cursor:default}
.opt.dim{opacity:.55}
.why{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--quote-bg);
  border-inline-start:4px solid var(--gold);font-size:1rem;display:none;animation:fade .3s}
.why.show{display:block}
.why b{color:var(--accent2)}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
.btn{border:none;border-radius:999px;padding:12px 26px;font-size:1.02rem;font-weight:700;
  cursor:pointer;font-family:inherit;background:var(--accent2);color:var(--paper);
  box-shadow:var(--shadow);transition:.16s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.ghost{background:var(--panel);color:var(--accent2);border:1px solid var(--gold)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.pill{background:var(--gold-soft);color:var(--accent2);border-radius:999px;padding:4px 12px;font-weight:700}
.streak{color:var(--accent)}
.end{text-align:center;padding:14px 6px}
.end .big{font-size:3.4rem;margin:6px 0}
.end .score{font-size:1.6rem;color:var(--accent2);font-weight:700;margin:4px 0}
.end .msg{font-size:1.1rem;color:var(--ink-soft);margin:8px 0 20px}
.review{text-align:start;margin-top:20px}
.review h3{color:var(--accent2)}
.review .r{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--panel)}
.review .r .rq{font-weight:700;color:var(--ink);margin-bottom:6px}
.review .r .ra{font-size:.96rem;margin:2px 0}
.review .ok{color:var(--good)} .review .no{color:var(--bad)}
.hint{color:var(--faint);font-size:.82rem;text-align:center;margin-top:14px}

/* ---- Flashcards ----
   Both faces occupy the same grid cell, so the card is as tall as the longer
   of the two and neither side jumps when it turns. */
/* What the deck is, above the deck — the keyboard tip below it says how to
   drive it, which is no use to someone who does not yet know what it is for. */
.deck-intro{max-width:62ch;margin:0 auto 16px;text-align:center;
  color:var(--muted);font-size:.95rem;line-height:1.55;font-style:italic}
.deck{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;box-shadow:var(--shadow)}
.dbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:6px;font-size:.92rem;color:var(--muted)}
.dnum{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.flashcard{display:block;width:100%;padding:0;border:none;background:none;cursor:pointer;
  font-family:inherit;color:var(--ink);perspective:1400px;-webkit-tap-highlight-color:transparent}
.flashcard .inner{display:grid;min-height:210px;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.75,.3,1)}
.flashcard.flipped .inner{transform:rotateY(180deg)}
.flashcard .face{grid-area:1/1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px 26px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--panel);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:box-shadow .15s}
.flashcard .face.front{background:var(--quote-bg);border-color:var(--gold)}
.flashcard .face.back{transform:rotateY(180deg);background:var(--paper);border-color:var(--gold-soft);
  font-size:1.08rem;line-height:1.6;color:var(--ink-soft)}
.flashcard:hover .face{box-shadow:var(--shadow-sm)}
.flashcard:focus-visible .face{outline:2px solid var(--accent);outline-offset:3px}
/* Sheets write a term either as "**hebrew** *(translit)*" or as one bold run;
   the first splits over two lines here, the second simply stays on one. */
.flashcard .term{font-size:1.45rem;color:var(--accent2)}
.flashcard .term strong{display:block;font-weight:600}
.flashcard .term em{display:block;margin-top:8px;font-size:.62em;color:var(--muted)}
.deck .nav{flex-wrap:wrap}
.deck .rate{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ---- The Daf — tzurat hadaf ----
   Gemara down the middle on its own tinted block, Rashi and Tosafot in the
   margins in smaller type. A right-to-left flex row, so the template can put
   the three cells in reading order and each amud can swap its margins: Rashi
   goes on the inner side, which is the left on a recto (amud alef) and the
   right on its verso (amud bet). Flex rather than grid because hiding a column
   then redistributes the width by itself — the Gemara keeps the middle whether
   it has two neighbours, one or none. */
.daf-intro{max-width:62ch;margin:0 auto 16px;text-align:center;
  color:var(--muted);font-size:.95rem;line-height:1.55;font-style:italic}

/* ---- the printed page ----
   The scan is the daf; the text layout above is a reading of it. Which one is
   showing is a class on #daf, so everything that belongs to a mode is hidden by
   one rule rather than by each panel knowing about the other. */
.daf-modes{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
.chip.mode{padding:8px 18px;font-size:.95rem}
#daf.mode-scan .daf-text,#daf.mode-scan .daf-credit.for-text,
#daf.mode-text .daf-scan,#daf.mode-text .daf-intro.for-scan,
#daf.mode-text .daf-credit.for-scan{display:none}

figure.scan{margin:0 0 22px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:14px;box-shadow:var(--shadow)}
figure.scan figcaption{display:flex;align-items:baseline;justify-content:center;gap:14px;
  margin-bottom:10px;font-size:1.35rem;color:var(--accent2);font-weight:600}
figure.scan figcaption a{font-size:.7rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px dotted var(--gold)}
figure.scan figcaption a:hover{color:var(--accent2)}
/* The PDF page is A3 with the daf printed across its top three quarters, so at
   fit-to-width this is the height that shows the whole daf and clips only the
   blank tail below it. White, always: it is a page of a book, and a dark frame
   around it looks like a mistake. */
figure.scan iframe{display:block;width:100%;aspect-ratio:1/1.15;border:0;
  border-radius:8px;background:#fff}
/* ---- line by line, under the page ----
   The passages of the amud in printed order, each one's Hebrew clamped to a
   single line until it is tapped, when it unwraps and its English follows. The
   Hebrew is written once and lives in the head, so opening a passage adds the
   translation rather than repeating the text. */
.daf-lines{margin:0 0 22px;padding:16px 18px 6px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
/* Tucked under its own page where :has() is understood, and merely a card
   below it where it is not — nothing depends on this. */
figure.scan:has(+ .daf-lines){margin-bottom:10px}
.lines-head{margin:0 0 10px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:center}
.line{border-top:1px dotted var(--line)}
.line:first-of-type{border-top:0}
/* Right to left, so the number sits at the start of the line it numbers and any
   ellipsis falls at the end of it. Laid out the other way the two drift to
   opposite edges of the card and a short passage reads as a number alone. */
.line-head{display:flex;align-items:baseline;gap:10px;width:100%;direction:rtl;
  padding:9px 2px;border:0;background:none;font-family:inherit;color:var(--ink);
  font-size:1rem;cursor:pointer}
.line.bare>.line-head{cursor:default}
.line-head:hover{color:var(--accent2)}
/* ---- the translation is English, and only English ----
   There is one translation of the daf and it is the Davidson Talmud's, so to a
   reader who asked for Spanish or Hebrew it is not a translation at all — it is
   a third language dropped into the middle of the daf. Outside the English view
   it is not shown, and neither is the chip that would ask for it.

   Keyed on the root language, like the data-lang switch at the top of this file
   and hardcoding "en" for the same reason: this is the one place the stylesheet
   says which language the translation is in. Stated here rather than left to
   daf.js so that it holds whether or not daf.js ran. */
html:not([lang="en"]) .line-body,
html:not([lang="en"]) #daf .g-en,
html:not([lang="en"]) #daf .chip[data-daf="en"]{display:none}
/* Closed, a passage is one clamped line that opens onto its English. With no
   English to open onto there is nothing to clamp it for: every passage stays
   open and its head is inert — daf.js takes the button semantics off it, and
   these two rules are the same thing said to a browser that never ran it. */
html:not([lang="en"]) .line.collapsed .line-he{white-space:normal;overflow:visible}
html:not([lang="en"]) .line-head{cursor:default;color:var(--ink)}
.line-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.line-head i{flex:0 0 auto;font-style:normal;font-size:.72rem;color:var(--faint);
  min-width:1.4em}
.line-he{min-width:0;line-height:1.8}
/* Closed, a passage is one line of Hebrew with an ellipsis; open, it unwraps. */
.line.collapsed .line-he{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line.collapsed .line-head{color:var(--ink-soft)}
/* The English reads the other way, so it is marked as the translation rather
   than indented to a Hebrew edge it does not share. */
.line-body{margin:0 0 14px;padding:2px 0;padding-inline-start:14px;
  border-inline-start:2px solid var(--gold-soft);
  font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.line.collapsed .line-body{display:none}
.line-body b,.line-body strong{color:var(--accent2);font-weight:600}

/* Where Sefaria prints a bare §, this says what it means: the passage starts a
   new sugya. A quiet badge rather than running text — it is a mark on the text,
   not part of it, and it should be skippable at a glance. */
.sugya{display:inline-block;margin-inline-end:9px;padding:1px 9px;
  border:1px solid var(--gold);border-radius:999px;background:var(--gold-soft);
  color:var(--accent2);font-size:.68rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;vertical-align:.1em}

/* A whole daf at a phone's width is legible to nobody, and no amount of frame
   height fixes that — zooming inside a small frame is worse than the browser's
   own full-screen PDF view. So the frame stays exactly as tall as the daf needs
   (a taller one would only add white space), and the way out becomes a button
   instead of a caption aside. The Text mode is the other way out, one tap up. */
@media(max-width:700px){
  figure.scan{padding:10px}
  figure.scan figcaption{flex-direction:column;gap:8px;font-size:1.15rem}
  figure.scan figcaption a{border:1px solid var(--gold);border-radius:999px;
    padding:7px 16px;font-size:.8rem;background:var(--panel)}
}
.daf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin:0 0 18px}
/* daf.js hides the bar when every chip in it is: a daf Sefaria has no margins
   for, read outside the English view, would otherwise show "Show" and nothing
   after it. An author display always beats the UA's [hidden], so say it here. */
.daf-bar[hidden]{display:none}
.daf-bar-label{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:999px;padding:6px 15px;font-family:inherit;font-size:.92rem;
  cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--gold)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--accent2);font-weight:600}

.amud{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;box-shadow:var(--shadow);margin-bottom:22px}
/* The tractate and daf in the head margin, the way a printed page carries it. */
.amud-head{display:flex;align-items:baseline;justify-content:center;gap:14px;
  margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--gold-soft);
  font-size:1.5rem;color:var(--accent2);font-weight:600}
.amud-src{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--gold)}
.amud-src:hover{color:var(--accent2)}

.seg{display:flex;direction:rtl;gap:14px;align-items:flex-start;
  padding:14px 0;border-top:1px dotted var(--line)}
.seg:first-of-type{border-top:0;padding-top:2px}
.col{min-width:0}
/* Where a passage drew no comment, its margin is given back to the text rather
   than held open as a void — which is also what the printed page does, the
   Gemara block widening wherever the commentary around it runs out. */
.col.empty{flex:0 0 0}
.col.gemara{flex:1.7 1 0;background:var(--quote-bg);border-radius:10px;padding:12px 16px}
.col.rashi,.col.tosafot{flex:1 1 0;font-size:.9rem;color:var(--ink-soft)}
.col.rashi p,.col.tosafot p{margin:0 0 10px}
.col.rashi p:last-child,.col.tosafot p:last-child{margin-bottom:0}
.col.rashi b,.col.tosafot b{color:var(--accent2);font-weight:600}
.g-he{margin:0;font-size:1.18rem;line-height:1.9}
.g-he big{font-size:1em;color:var(--accent2);letter-spacing:.04em}
/* The translation is off by default and sits under the Aramaic it renders, not
   beside it — the eye should not have to choose a column. */
.g-en{display:none;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--gold-soft);
  font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
#daf.show-en .g-en{display:block}
#daf.hide-rashi .col.rashi,#daf.hide-tosafot .col.tosafot{display:none}
/* Wide enough for three columns, so the heading that folds a commentary away
   has nothing to do; below the breakpoint it becomes the control. */
.col-head{display:none}

/* Which of the two notices above the tabs is true depends on the open tab:
   this text is the Vilna daf, not our writing. daf.js sets the body class.
   The footer disclaimer goes with them — it is about the sheet, and saying "this
   was written by AI" directly under the Gemara would be worse than saying
   nothing. What replaces it is the credit line the licence requires. */
.disclaimer.top.source{display:none}
body.view-daf .disclaimer.top.ai,body.view-daf .disclaimer.foot{display:none}
body.view-daf .disclaimer.top.source{display:block}
.daf-credit{max-width:70ch;margin:18px auto 0;text-align:center;
  color:var(--faint);font-size:.78rem;line-height:1.55}
.daf-credit a{color:var(--muted)}

@media(max-width:860px){
  /* The columns stack, so the margins become sections under the text and each
     one folds. Order matters here in a way it does not across a row: a margin
     read before the passage it comments on is no use, so the Gemara goes first
     and the two commentaries follow it in the order they are named. */
  .seg{flex-direction:column;gap:10px}
  .col.gemara{order:1}
  .col.rashi{order:2}
  .col.tosafot{order:3}
  .col.rashi,.col.tosafot{width:100%}
  .col.empty{display:none}
  .col-head{display:flex;align-items:center;gap:8px;width:100%;direction:rtl;
    border:1px solid var(--line);background:var(--panel);border-radius:10px;
    padding:8px 12px;font-family:inherit;font-size:.95rem;color:var(--accent2);
    cursor:pointer}
  /* The row reads right to left, so the closed marker points that way too. */
  .col-head::before{content:"▾";font-size:.7em;color:var(--faint)}
  .col.collapsed .col-head::before{content:"◂"}
  .col-head i{font-style:normal;font-size:.78rem;color:var(--faint)}
  .col.collapsed .col-body{display:none}
  .col-body{padding:10px 12px 2px}
}
@media(max-width:560px){
  .amud{padding:18px 14px}
  .col.gemara{padding:10px 12px}
  .g-he{font-size:1.1rem}
  .amud-head{font-size:1.28rem;flex-wrap:wrap;gap:8px}
}

/* ---- archive ---- */
.archive{max-width:640px;margin:0 auto;padding:40px 22px 80px}
.archive h1{color:var(--accent2);text-align:center;font-size:1.9rem;margin-bottom:4px}
.archive .lede{text-align:center;color:var(--muted);font-style:italic;margin-bottom:28px}
.archive ul{list-style:none;padding:0}
.archive li{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  margin:10px 0;padding:14px 18px;box-shadow:var(--shadow)}
.archive li a{color:var(--accent);text-decoration:none;font-weight:700;font-size:1.1rem}
.archive li a:hover{text-decoration:underline}
.archive li .when{color:var(--faint);font-size:.9rem}
.archive li.today{border-color:var(--gold);box-shadow:0 4px 18px rgba(140,100,40,.18)}
.archive li.today .badge{background:var(--accent2);color:var(--paper);border-radius:999px;
  padding:2px 10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-inline-start:8px}
.archive li.future{opacity:.6}
.archive .zman{text-align:center;color:var(--faint);font-size:.8rem;margin-top:18px}
.archive .home{display:block;text-align:center;margin-top:26px}
.archive .home a{color:var(--accent2)}

@media(max-width:560px){
  .sheet,.quiz,.deck{padding:20px 16px}
  .qtext{font-size:1.14rem}
  header.top h1{font-size:1.6rem}
  /* three pills rarely fit a phone on one line; wrapping beats a cramped row */
  .tabs{flex-wrap:wrap;gap:6px}
  .tab{padding:8px 14px;font-size:.92rem}
  .flashcard .face{padding:24px 18px}
  .flashcard .term{font-size:1.25rem}
  /* Back stays a compact pill on the left; whatever action the card is asking
     for takes the rest of the row, rather than wrapping onto its own line. */
  .deck .nav{display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:8px}
  .deck .rate{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .deck .btn{padding:11px 12px;font-size:.94rem}
}
/* ---- Hebrew as a page language ----
   Kept together and kept last, because each of these overrides a rule set
   above for text that is not Hebrew.

   Hebrew has no italic. The browser fakes one by slanting the upright letters,
   and a whole slanted paragraph reads as a rendering fault rather than as a
   change of voice — it also flattens the <em> inside a pulled quotation, which
   then has nothing left to be emphatic with. So the places that use italic as
   a texture stand upright in Hebrew; inline emphasis keeps its slant, because
   that is the only mark it has.

   :lang() rather than [lang="he"], so each of these follows the language of
   the text in it: on a Hebrew page an untranslated daf still shows an English
   sheet, and that block keeps its italics. */
.sub :lang(he),.lede:lang(he),.deck-intro:lang(he),.daf-intro:lang(he),
.tomorrow:lang(he),blockquote:lang(he){font-style:normal}

@media print{
  /* Paper has no tabs, so it gets the whole sheet in the order it was written:
     both prose panels, whichever one happened to be open. What goes is what
     cannot be printed — the daf's own iframes, the two things you drive rather
     than read, and a mailto nobody can click (the footer notice above it
     survives into print on its own). */
  .view{display:block!important}
  #site-nav,.tabs,#daf,.deck-inline,.quiz-inline,.hint,.speak,
  .feedback{display:none!important}
  /* the panels' gap goes with their flex layout, so paper sets its own */
  .sheet + .sheet,#chazara{margin-top:18px}
  body{background:#fff;color:#000}
  .sheet{border:none;box-shadow:none;padding:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}