/* Today's Daf. Warm paper, brown ink, oxblood and a little gold: the desk of an old scholar, not a dashboard.
   One palette only: Joe found the dark variant too dark, and parchment reads right at night too. */
:root {
  --paper: #f3ead7;
  --paper-2: #e8dcc2;
  --ink: #2b2118;
  --ink-2: #66563f;
  --ink-3: #98876c;
  --rule: #d3c2a0;
  --accent: #8b2e1f;
  --accent-soft: #efd9cf;
  --gold: #a9812f;
  --note-bg: #f8f0dc;
  --shadow: rgba(60, 40, 10, .12);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hebrew: "Frank Ruhl Libre", "Noto Serif Hebrew", "David", serif;
  --measure: 42rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  position: relative;
}
/* Paper grain: a faint noise layer over the whole page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .5rem 1rem; }
.skip:focus { left: 1rem; z-index: 10; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.right { text-align: right; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--paper-2); padding: .05em .3em; border-radius: 3px; }
.ornament { text-align: center; color: var(--gold); letter-spacing: .6em; margin: 1.6rem 0 1.2rem; font-size: .85rem; user-select: none; }

header.site, footer.site, main { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 16px; }
header.site { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.brand { font-weight: 600; text-decoration: none; color: var(--ink); letter-spacing: .01em; font-size: 1.1rem; }
.brand-mark { color: var(--gold); margin-right: .45rem; font-size: .8em; }
header.site nav { display: flex; gap: 1.1rem; font-size: .95rem; }
header.site nav a { color: var(--ink-2); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }
footer.site { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: .4rem; padding-bottom: 2.5rem; color: var(--ink-2); font-size: .92rem; }

.daf-head { margin: 1.8rem 0 1.2rem; }
.daf-head .date { margin: 0 0 .35rem; color: var(--ink-2); font-size: .95rem; letter-spacing: .01em; }
h1 { font-weight: 700; font-size: clamp(1.8rem, 4.8vw, 2.5rem); line-height: 1.12; margin: 0 0 .55rem; letter-spacing: -.012em; }
h2 { font-weight: 600; font-size: 1.25rem; margin: 2rem 0 .6rem; }
.he-title { font-family: var(--hebrew); font-weight: 400; color: var(--ink-2); font-size: .8em; margin-inline-start: .35em; }
.he-inline { font-family: var(--hebrew); color: var(--ink-3); }
.lede { font-size: 1.15rem; margin: .6rem 0; }
.position { margin: .2rem 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.sep { margin: 0 .45em; color: var(--gold); }
.cycle { margin: .45rem 0 0; font-size: .92rem; }

/* The note: a card laid on the page. */
.note {
  background: var(--note-bg); border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  padding: 1rem 1.2rem 1.05rem; margin: 1.5rem 0 .4rem; border-radius: 3px;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px -18px var(--shadow);
}
.note-label { margin: 0 0 .6rem; font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.note-label .ai { display: inline-block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; color: var(--accent); margin-right: .4rem; }
.note-summary { margin: 0 0 .55rem; font-size: 1.08rem; }
.note-question { margin: 0; font-style: italic; color: var(--ink); }
.note-question::before { content: "✦ "; color: var(--gold); font-style: normal; font-size: .75em; }
.note-pending .note-summary { font-size: .95rem; }

/* Tools */
.tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 1.2rem; }
.toggle {
  font: inherit; font-size: .88rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; padding: .32rem .9rem; cursor: pointer; box-shadow: 0 1px 0 var(--shadow);
}
.toggle:hover { border-color: var(--ink-3); }
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.legend { flex-basis: 100%; margin: .1rem 0 0; font-size: .88rem; }

/* Text */
.amud { margin: 1.6rem 0 2.2rem; }
.amud-title { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.amud-title::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.segments { list-style: none; margin: 0; padding: 0; }
.seg { position: relative; margin: 0 0 1.1rem; padding-left: 2.1rem; }
.segno { position: absolute; left: 0; top: .42rem; font-size: .7rem; color: var(--ink-3); text-decoration: none; font-variant-numeric: tabular-nums; }
.segno:hover { color: var(--accent); }
.seg:target { background: var(--accent-soft); outline: .5rem solid var(--accent-soft); border-radius: 2px; }
.seg p { margin: 0; }
.seg .en b, .seg .en strong { font-weight: 600; color: var(--ink); }
.seg .en .elu { color: color-mix(in srgb, var(--ink) 82%, var(--ink-2)); }
.seg .he { display: none; font-family: var(--hebrew); font-size: 1.2rem; line-height: 1.75; margin-top: .5rem; color: var(--ink); }
.seg .he b, .seg .he strong { font-weight: 700; }
html.show-he .seg .he { display: block; }
html.talmud-only .elu { display: none; }
/* With the explanation hidden, put a space back between neighbouring bold runs. */
html.talmud-only .seg .en .elu + b::before, html.talmud-only .seg .en .elu + strong::before { content: " "; }
a.ref { color: inherit; text-decoration: underline dotted var(--ink-3); }
.credit { font-size: .8rem; color: var(--ink-3); margin: 1rem 0 0; }

@media (min-width: 64rem) {
  html.show-he main { max-width: 68rem; }
  html.show-he .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: start; }
  html.show-he .seg .he { margin-top: 0; }
}

.prevnext { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; flex-wrap: wrap; }
.prevnext a { text-decoration: none; }
.prevnext a:hover { text-decoration: underline; }
.deeper-wrap h2 { margin-top: 2rem; }
.deeper { list-style: none; padding: 0; margin: .3rem 0 0; }
.deeper li { margin: .35rem 0; }

/* Tractate page */
.chapters { padding-left: 1.3rem; margin: 0; }
.chapters li { margin: .25rem 0; }
.intro { margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: 3px; padding: .6rem .9rem; background: var(--paper-2); }
.intro summary { cursor: pointer; font-weight: 600; }
.intro-body p { margin: .7rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .4rem; margin: .8rem 0 1.5rem; }
.cell { display: flex; flex-direction: column; align-items: center; padding: .45rem .3rem; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; color: var(--ink); background: var(--paper-2); position: relative; }
.cell .n { font-weight: 600; font-size: 1.05rem; }
.cell .d { font-size: .68rem; color: var(--ink-3); }
.cell.future { opacity: .55; }
.cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cell.noted::after { content: ""; position: absolute; top: .3rem; right: .3rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold); }
.tractate-list { list-style: none; padding: 0; margin: 0; }
.tractate-list li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.tractate-list li.past, .tractate-list li.future { color: var(--ink-2); }
.now { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 600; margin-left: .4rem; }

.prose p, .prose li { max-width: 40rem; }
.prose ul { padding-left: 1.2rem; }

@media print {
  header.site nav, .tools, .deeper-wrap, .prevnext, footer.site, body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* How Daf Yomi works (About page). Ordinal ramp for the six Orders: one hue, darkening in canonical order. */
:root { --s1: #b9893a; --s2: #a4702f; --s3: #8c5828; --s4: #734322; --s5: #5b311c; --s6: #432116; --seg-ink: #fff7e6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dy-diagram { margin: 1.4rem 0 2rem; overflow-x: clip; }
.dy-stats { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 0 0 1.4rem; }
.dy-stats div { display: flex; flex-direction: column; }
.dy-stats .num { font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--accent); }
.dy-stats .what { color: var(--ink-2); font-size: .92rem; }
.dy-page { display: flex; gap: 1.1rem; align-items: flex-start; margin: 0 0 1.6rem; }
.dy-page svg { flex: none; }
.dy-page p { margin: 0; font-size: .98rem; }
.dy-label { margin: 1rem 0 .3rem; font-size: .9rem; color: var(--ink-2); }
.dy-bar { display: flex; width: 100%; }
/* Widths sum to exactly 100%; the 2px paper-coloured right border is the gap between fills. */
.dy-bar .dseg { display: block; box-sizing: border-box; min-width: 3px; height: 2rem; overflow: hidden; border-radius: 2px; color: var(--seg-ink); text-decoration: none; position: relative; border-right: 2px solid var(--paper); }
.dy-bar .dseg:last-child { border-right: 0; }
.dy-bar .dseg .lbl { position: absolute; left: .4rem; top: 50%; transform: translateY(-50%); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: calc(100% - .5rem); }
.dy-tractates .seg { height: 1.4rem; }
.dy-bar .dseg.narrow .lbl { display: none; }
.dy-bar .dseg.now { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
.dy-bar a.dseg:hover { filter: brightness(1.12); }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); } .s4 { background: var(--s4); } .s5 { background: var(--s5); } .s6 { background: var(--s6); }
.dy-axis { position: relative; height: 3.4rem; margin-top: .3rem; border-top: 1px solid var(--rule); }
.dy-axis .tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .75rem; color: var(--ink-3); padding-top: .55rem; }
.dy-axis .tick i { position: absolute; left: 50%; top: 0; height: .4rem; border-left: 1px solid var(--rule); }
.dy-axis .today { position: absolute; top: 0; transform: translateX(-50%); }
.dy-axis .today i { display: block; margin: -1px auto 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--accent); }
.dy-axis .today .you { position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; color: var(--accent); font-weight: 600; }
.dy-axis .today.late .you { left: auto; right: 0; transform: none; }
.dy-axis .today.early .you { left: 0; transform: none; }
.dy-legend { list-style: none; padding: 0; margin: .8rem 0 .6rem; }
.dy-legend li { margin: .35rem 0; font-size: .95rem; }
.dy-legend .chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -.1rem; margin-right: .45rem; }
@media (max-width: 40rem) {
  .dy-bar .dseg .lbl { display: none; }
  .dy-axis .today .you { position: static; display: block; transform: none; margin-top: .2rem; text-align: right; }
  .dy-axis .today { position: static; transform: none; }
  .dy-axis .today i { display: none; }
  .dy-axis { height: auto; padding-bottom: .2rem; }
  .dy-axis .tick { display: none; }
  .dy-page { flex-direction: column; }
}

/* Where today sits: one bar that zooms (see src/render/positionMini.ts and app.js). */
.zoom { margin: .9rem 0 .5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; font-size: .82rem; color: var(--ink-2); cursor: zoom-in; outline: none; }
.zoom.max { cursor: zoom-out; }
.zoom:focus-visible .zoom-stage { outline: 2px solid var(--accent); outline-offset: 3px; }
.zoom .mini-cap, .zoom .mini-val { white-space: nowrap; }
.zoom .mini-val { font-variant-numeric: tabular-nums; }
.zoom-hint { grid-column: 2; font-size: .72rem; margin-top: -.15rem; letter-spacing: .02em; }
.zoom-stage { position: relative; height: 16px; overflow: hidden; border-radius: 2px; }
.zl { position: absolute; inset: 0; transform-origin: 0 50%; opacity: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .45s ease; will-change: transform, opacity; pointer-events: none; }
.zl.on { opacity: 1; pointer-events: auto; }
.zl .geo { display: flex; height: 100%; }
.zl .labels { position: absolute; inset: 0; pointer-events: none; }
.zl .labels span { position: absolute; top: 0; height: 100%; box-sizing: border-box; padding-left: 4px; overflow: hidden; white-space: nowrap; font-size: .64rem; line-height: 16px; color: var(--seg-ink); letter-spacing: .02em; }
.ms { box-sizing: border-box; height: 100%; border-right: 1px solid var(--paper); opacity: .45; border-radius: 1px; text-decoration: none; }
.ms:last-child { border-right: 0; }
.ms.cur { opacity: 1; }
.ms.plain { background: var(--s4); opacity: .5; }
.geo.dapim .dc { box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 100%; margin-right: 1px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 1px; }
.geo.dapim .dc.past { background: var(--ink-3); border-color: var(--ink-3); }
.geo.dapim .dc.today { background: var(--accent); border-color: var(--accent); }
.geo.dapim .dc.chapter-start { margin-left: 2px; }
.geo.dapim .dc:last-child { margin-right: 0; }
.zmark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 1px; transition: left .7s cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .zl, .zmark { transition: none; } }
@media (max-width: 40rem) { .zoom { grid-template-columns: auto minmax(0, 1fr); } .zoom .mini-val { grid-column: 2; justify-self: end; margin-top: -.2rem; } .zl .labels span { font-size: .6rem; } }