/* Hallmark · shape: Day Book on separate sheets over a daf · genre: editorial · theme: Vellum (deal 1/3, seed hebrew-people-register-which-abd7-ce1d6834-2026-11-01-r0) · job: sign up · draw: manual
 * hero: poster, headline at the margin over the scanned daf · nav: masthead, a wordmark over a double rule · footer: colophon, one line and a quiet admin entry · imagery: a scan of the Vilna daf, Berakhot 2a, tinted and set behind the sheet · signature: the 43-row day book filling with real names · vellum: parchment, Hebrew faces
 * axes: light/blackletter/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, separate paper sheets could read as stacked cards; let the scanned daf show between them and kept one border weight */
/* Hallmark · waive 77 · the about section is a display-size statement of two sentences beside a note, as wide as the sheet · the explanation of the חלוקה is the one fact the page must say in words, so it stays short */
/* Hallmark · answered F13 · Noto Rashi Hebrew carries only the quoted source line in Rashi script, and the hero figure uses the display weight */
/* theme faces swapped: Grenze Gotisch and Hanken Grotesk carry no Hebrew, so Frank Ruhl Libre (display) and Heebo (body) take their roles */
@import url("./tokens.css");
@import url("./base.css");

html { background: var(--color-paper-3); }
body { background: var(--color-paper-3); min-height: 100dvh; position: relative; isolation: isolate; }
/* the scanned daf behind the whole site, tinted to parchment: Vilna edition, Berakhot 2a, public domain */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("daf.jpg") center top / cover no-repeat; filter: sepia(0.85) saturate(1.1) brightness(1.02); opacity: 0.16; pointer-events: none; }
h1 { max-width: none; font-size: clamp(4.25rem, 13vw, 9rem); line-height: 0.95; }
h3 { font-family: var(--font-body); font-weight: 700; }

/* the three logos, each in its own cell at the head of the page */
.logos { max-width: var(--container); margin-block: var(--space-md) 0; padding-block: var(--space-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; gap: var(--space-lg); background: radial-gradient(ellipse 60% 100% at 50% 50%, color-mix(in oklab, var(--color-paper) 92%, transparent) 40%, transparent 100%); }
.logos img { width: auto; height: auto; max-width: 100%; max-height: 7rem; }

/* masthead */
.mast { padding-block: var(--space-md) var(--space-sm); }
.mast__in { max-width: 1200px; }
.mast__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-decoration: none; }
.mast__in { border-bottom: var(--rule-double) double var(--color-ink); padding-bottom: var(--space-sm); }

/* the printed sheet */
.sheet { position: relative; max-width: var(--container); margin: var(--space-md) auto var(--space-2xl); display: grid; gap: var(--space-xl); }
.sheet .container { max-width: none; }
.section { display: grid; gap: var(--space-lg); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; padding-block: var(--space-2xl) var(--space-xl); min-height: 70dvh; }
.hero__text { display: grid; gap: var(--space-lg); align-content: end; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tally { display: grid; gap: var(--space-xs); border-top: 1px solid var(--color-ink); padding-top: var(--space-md); }
.tally__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 8vw, 6.5rem); line-height: 1; color: var(--color-ink); }
.tally__of { font-size: var(--text-md); color: var(--color-ink-2); }

/* about and merits */
.about { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; padding-block: var(--space-lg) var(--space-xl); gap: var(--gap-columns); border-top: 1px solid var(--color-ink); padding-top: var(--space-lg); }
.about p { font-size: var(--text-lg); line-height: 1.6; max-width: none; }
.about p:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.25; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.index li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.index h3 { font-size: var(--text-title); }
.index p { max-width: 60ch; font-size: var(--text-lg); }
.index li { padding-block: var(--space-lg); }

/* the quoted source on the pigment field */
.field { background: var(--color-field); color: var(--color-accent-ink); padding-block: var(--space-3xl); }
.field__in { display: grid; gap: var(--space-md); }
.statement { margin: 0; font-family: var(--font-outlier); font-weight: 400; font-size: var(--text-display-s); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.source { font-size: var(--text-md); opacity: 0.9; }

/* the day book */
.listhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.listhead__text { display: grid; gap: var(--space-md); flex: 1 1 24rem; }
.listhead .adminring { flex: 0 1 auto; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.filter { display: flex; gap: var(--space-xs); }
.chip { border: 1px solid var(--color-ink); background: transparent; color: var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); font-weight: 500; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.chip:hover { background: var(--color-accent-soft); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.adminbar { display: flex; align-items: center; gap: var(--space-sm); font-weight: 500; color: var(--color-accent-deep); }
.ledger { width: 100%; border-collapse: collapse; border-top: var(--rule-double) double var(--color-ink); }
.ledger thead th { text-align: start; font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-ink); }
.ledger tbody th, .ledger tbody td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-rule); text-align: start; vertical-align: middle; }
.ledger tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.ledger tbody tr:hover { background: var(--color-accent-soft); }
.ledger tbody th { font-weight: 400; white-space: nowrap; }
.num { display: inline-block; min-width: 2.5ch; margin-inline-end: var(--space-md); color: var(--color-accent); font-weight: 500; font-size: var(--text-md); }
.tname { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); }
.who { font-weight: 500; }
.who--free { font-weight: 400; color: var(--color-muted); }
.act { text-align: end !important; white-space: nowrap; }
.act .btn + .btn { margin-inline-start: var(--space-xs); }
.empty { padding: var(--space-xl) 0 !important; color: var(--color-muted); }
.note { color: var(--color-muted); min-height: 1lh; }

/* controls */
.btn { display: inline-block; border: 1px solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-lg); font-weight: 500; color: inherit; background: transparent; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--small { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.linkbtn { min-height: 44px; background: none; border: 0; padding: 0; color: var(--color-muted); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.linkbtn:hover { color: var(--color-accent); }

/* each part of the page sits on its own sheet of paper, with the daf showing between them */
.sheet > .section { background: color-mix(in oklab, var(--color-paper) 94%, transparent); border: 1px solid var(--color-ink); border-radius: var(--radius-card); padding-block: var(--space-xl); }
.sheet > .section:last-child { padding-bottom: var(--space-xl); }
.sheet > .hero { padding-block: var(--space-3xl) var(--space-xl); background: radial-gradient(ellipse 75% 70% at 70% 60%, color-mix(in oklab, var(--color-paper) 96%, transparent) 35%, transparent 100%); }
.sheet > .field { margin-top: 0; border-radius: var(--radius-card); }

.contact { flex: 1 1 100%; text-align: center; }
.contact a { font-weight: 500; text-decoration: underline; }
.contact a:hover { color: var(--color-accent); }

/* colophon */
.colophon { background: color-mix(in oklab, var(--color-paper) 94%, transparent); border-top: var(--rule-double) double var(--color-ink); padding-block: var(--space-lg); }
.dedication { flex: 1 1 100%; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.3; color: var(--color-accent-deep); }
.credit { flex: 1 1 100%; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; text-align: center; }
.credit strong { font-weight: 700; color: var(--color-accent); }
.colophon__in { max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; }

/* dialogs */
dialog { border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); padding: var(--space-xl); width: 92%; max-width: 28rem; }
dialog::backdrop { background: color-mix(in oklab, var(--color-ink) 55%, transparent); }
dialog form { display: grid; gap: var(--space-md); }
dialog h2 { font-size: var(--text-2xl); max-width: none; }
label { font-weight: 500; }
input { border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); padding: var(--space-sm) var(--space-md); }
.err { color: var(--color-error); min-height: 1lh; }

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding-block: var(--space-xl); }
  .index li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .sheet { margin-inline: var(--space-sm); }
}
@media (max-width: 40rem) {
  .ledger thead { display: none; }
  .ledger tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
  .ledger tbody th, .ledger tbody td { border-bottom: 0; padding-block: var(--space-2xs); }
  .ledger tbody th { grid-column: 1; }
  .who { grid-column: 1; padding-inline-start: calc(2.5ch + var(--space-md)) !important; font-size: var(--text-sm); }
  .act { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* phones: the daf is enlarged so its lines show, and the sheets are a little more transparent */
@media (max-width: 40rem) {
  body::before { background-size: 230% auto; background-position: 70% 0; opacity: 0.26; }
  .sheet > .section { background: color-mix(in oklab, var(--color-paper) 88%, transparent); }
  .sheet { gap: var(--space-lg); }
  .logos { gap: var(--space-sm); padding-block: var(--space-md); width: auto; margin-inline: var(--space-sm); }
  .mast { padding-inline: var(--space-sm); }
  .mast__in { text-align: center; }
  .hero__text { justify-items: center; text-align: center; }
  .hero h1, .hero .lead { margin-inline: auto; }
  .actions { justify-content: center; }
  .logos img { max-height: 4.75rem; }
}

.printonly { display: none; }

/* progress ring (everyone) and mail line (admin only) */
.hint { font-size: var(--text-sm); color: var(--color-muted); }
.adminring { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-paper-2) 70%, transparent); }
.ring { position: relative; width: 7.5rem; height: 7.5rem; flex: none; }
.ring svg { width: 100%; height: 100%; }
.ring__bg { fill: none; stroke: var(--color-rule); stroke-width: 10; }
.ring__fg { fill: none; stroke: var(--color-accent); stroke-width: 10; stroke-linecap: butt; }
.ring__pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); }
.ring__text { font-size: var(--text-lg); line-height: 1.5; }
.holder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-2xs); }
.holder + .holder { border-top: 1px dashed var(--color-rule); }
.hname { font-weight: 500; }
.hbtns { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); margin-inline-start: auto; }
.mail { flex-basis: 100%; display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); text-align: start; }

/* print: the report page, logos on top, a burgundy-headed table of tractates and who took them */
@media print {
  @page { size: A4; margin: 14mm 12mm 20mm; @bottom-center { content: "הלימוד לרפואת מורינו הרב חיים אליהו יוחנן שליט״א בן שיינא טעמא"; font-family: var(--font-body); font-weight: 700; font-size: 11pt; color: var(--color-print); direction: rtl; } }
  html, body { background: none; }
  body::before, .mast, .hero, #about, #merit, .field, .bar, .listhead, .act, .hbtns, .ledger thead th:last-child, .note, dialog { display: none !important; }
  .printonly { display: block; }
  .colophon { display: none; }
  .logos { display: flex; justify-content: center; align-items: center; width: auto; margin: 0; padding: 0 0 var(--space-md); border: 0; background: none; gap: var(--space-xl); }
  .logos img { max-height: 22mm; }
  .printhead { text-align: center; padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-print); margin-bottom: var(--space-lg); }
  .printtitle { font-family: var(--font-body); font-weight: 700; font-size: var(--text-3xl); color: var(--color-print); line-height: 1.2; max-width: none; }
  .printsub { font-size: var(--text-xl); color: var(--color-muted); }
  .printdate { font-size: var(--text-sm); color: var(--color-muted); }
  .sheet { margin: 0; gap: 0; max-width: none; display: block; }
  .sheet > .section { background: none; border: 0; padding: 0; display: block; }
  .container { padding-inline: 0; max-width: none; }
  .ledger { border: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule); }
  .ledger thead th { background: var(--color-print); color: var(--color-paper); font-weight: 700; font-size: var(--text-md); padding: var(--space-sm) var(--space-md); border: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ledger tbody tr:nth-child(even) { background: color-mix(in oklab, var(--color-ink) 4%, transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ledger tbody tr:hover { background: none; }
  .ledger tbody th, .ledger tbody td { padding: var(--space-xs) var(--space-md); font-size: var(--text-md); border-bottom: 1px solid var(--color-rule); }
  .ledger tbody th { width: 38%; border-inline-end: 1px solid var(--color-rule); }
  .num, .mail, .adminring { display: none !important; }
  .tname { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--color-print); }
  .who--free { color: var(--color-muted); }
  .ledger tr { break-inside: avoid; }
  .ledger thead { display: table-header-group; }
}