/* torah.gripe: one stylesheet for every page. gripe tokens, light/dark (system, or the toggle via [data-theme]). */
@font-face { font-family:"Noto Serif Hebrew"; src:url("/fonts/NotoSerifHebrew-2004.woff2") format("woff2"); font-weight:400 700; font-display:swap;
  unicode-range:U+0591-05F4, U+FB1D-FB4F, U+034F, U+200C-200F, U+25CC }
:root { --bg:#faf8f5; --fg:#1a1a1a; --muted:#7c7c7c; --line:#e4e0da; --hover:#efebe5; --panel:#f3efe9; --accent:#e5484d; --link:#b8383c;
  --paper:#fffdf9; --mark-y:#fff1b8; --mark-g:#d9f2d0; --mark-b:#d6e6ff; --mark-p:#f6dcef; --fs:1; color-scheme:light;
  --he:"Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Taamey Frank CLM", "Times New Roman", serif;
  --serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#111; --fg:#ededed; --muted:#8c8c8c; --line:#2a2a2a; --hover:#1d1d1d;
  --panel:#171717; --link:#ff7b7f; --paper:#141414; --mark-y:#4d4200; --mark-g:#1f3d1a; --mark-b:#1a2d4d; --mark-p:#45203b; color-scheme:dark } }
:root[data-theme="dark"] { --bg:#111; --fg:#ededed; --muted:#8c8c8c; --line:#2a2a2a; --hover:#1d1d1d; --panel:#171717; --link:#ff7b7f;
  --paper:#141414; --mark-y:#4d4200; --mark-g:#1f3d1a; --mark-b:#1a2d4d; --mark-p:#45203b; color-scheme:dark }
* { box-sizing:border-box; margin:0 }
html { -webkit-text-size-adjust:100%; text-size-adjust:100% }
body { background:var(--bg); color:var(--fg); font:16px/1.5 var(--sans); display:flex; flex-direction:column; min-height:100vh; min-height:100dvh }
a { color:var(--link) }
button, input, select, textarea { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.hidden { display:none !important }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(16px,3vw,32px) }
main { flex:1 1 auto; width:100%; padding-bottom:24px }
[lang="he"], .he { font-family:var(--he) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* top bar */
.top { border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:30 }
.top .wrap { display:flex; align-items:center; gap:6px 14px; min-height:52px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px }
.brand { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:var(--fg); text-decoration:none; margin-right:auto }
.brand span, h1.home span { color:var(--accent) }
.top nav { display:flex; gap:2px; flex-wrap:wrap }
.top nav a, .ibtn { color:var(--fg); text-decoration:none; font-size:.92rem; padding:6px 10px; border-radius:8px; background:none; border:0; cursor:pointer; white-space:nowrap }
.top nav a:hover, .ibtn:hover { background:var(--hover) }
.top nav a[aria-current="page"] { background:var(--panel) }
.ibtn { display:inline-flex; align-items:center; gap:6px }
.ibtn kbd { font:11px/1 var(--sans); border:1px solid var(--line); border-radius:4px; padding:2px 5px; color:var(--muted) }
@media (max-width:640px) { .top nav a.opt { display:none } .ibtn kbd { display:none } }

h1 { font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:-.02em; line-height:1.2 }
h1 .he { font-weight:600; letter-spacing:0; margin-inline-start:.35em; font-size:.95em }
h2 { font-size:1.15rem; letter-spacing:-.01em }
.sub { color:var(--muted); margin-top:4px }
.crumbs { font-size:.85rem; color:var(--muted); margin:18px 0 6px }
.crumbs a { color:var(--muted) }
.lede { margin:18px 0 6px }

/* reader toolbar */
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 10px; position:sticky; top:53px; z-index:20; background:var(--bg);
  padding:8px 0; border-bottom:1px solid var(--line) }
.bar .grow { flex:1 1 auto }
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:5px 11px; font-size:.9rem;
  color:var(--fg); text-decoration:none; cursor:pointer; white-space:nowrap }
.btn:hover { background:var(--hover) }
.btn[aria-disabled="true"] { opacity:.4; pointer-events:none }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px; background:var(--bg); flex-wrap:wrap }
.seg button { border:0; background:none; border-radius:7px; padding:4px 10px; font-size:.86rem; cursor:pointer; color:var(--muted) }
.seg button:hover { color:var(--fg) }
.seg button[aria-pressed="true"] { background:var(--fg); color:var(--bg) }
.pop { position:absolute; z-index:40; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:14px }
.settings { right:0; top:calc(100% + 6px); width:min(340px, calc(100vw - 32px)); display:grid; gap:12px }
.settings .row { display:grid; gap:5px }
.settings .lbl { font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }
.settings .hint { font-size:.8rem; color:var(--muted) }
.rel { position:relative }
select.btn { padding-right:8px }

/* text */
.note { font-size:.86rem; color:var(--muted); border-left:3px solid var(--line); padding:4px 0 4px 10px; margin:10px 0 }
.text { --he-size:calc(1.62rem * var(--fs)); --en-size:calc(1.06rem * var(--fs)); margin-top:8px }
.v { display:grid; grid-template-columns:2.4em minmax(0,1fr) minmax(0,1.08fr); grid-template-areas:"n en he"; column-gap:22px; padding:7px 6px; border-radius:8px;
  scroll-margin-top:120px }
.v + .v { border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent) }
.v .n { grid-area:n; color:var(--muted); font:.78rem/2.1 var(--sans); text-decoration:none; text-align:right; cursor:pointer; user-select:none; padding-top:2px }
.v .n:hover { color:var(--accent) }
.v .en { grid-area:en; font:var(--en-size)/1.62 var(--serif) }
.v .he { grid-area:he; direction:rtl; text-align:right; font-size:var(--he-size); line-height:1.9; font-feature-settings:"kern", "mark", "mkmk" }
.v.pe { margin-bottom:14px }
.v:target, .v.flash { background:color-mix(in srgb, var(--accent) 9%, transparent) }
.v[data-c="y"] { background:var(--mark-y) } .v[data-c="g"] { background:var(--mark-g) } .v[data-c="b"] { background:var(--mark-b) } .v[data-c="p"] { background:var(--mark-p) }
.v .bm { color:var(--accent); font-size:.8rem; margin-inline-start:4px }
.v .vn { display:block; font:.85rem/1.4 var(--sans); color:var(--muted); background:var(--panel); border-radius:6px; padding:4px 8px; margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere }
.he .hn { font:600 .55em/1 var(--sans); color:var(--muted); margin-inline-end:.35em; vertical-align:.25em }
.he .k { color:var(--muted) } .he .k::before { content:"(" } .he .k::after { content:")" }
.he .q::before { content:"[" } .he .q::after { content:"]" }
.he .ps { font:600 .7em var(--he); color:var(--muted); margin-inline-start:.5em; vertical-align:.15em }
.he .lg { font-size:1.45em; line-height:1 } .he .sm { font-size:.7em } .he .sus { vertical-align:.45em; font-size:.8em }
.en .jn { font:.72rem var(--sans); color:var(--muted); margin-inline-start:4px; white-space:nowrap }
.en small { font-size:.88em; color:var(--muted) }
.en .empty { color:var(--muted); font:italic .9rem var(--sans) }
.par { margin:26px 0 8px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline }
.par a { font-weight:600; text-decoration:none }
.par .he { font-size:1.2rem }
.aliyah { margin:22px 0 6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap }
.aliyah b { color:var(--fg); letter-spacing:.06em }
/* layouts: body[data-layout] side (default) | inter | he | en */
body[data-layout="inter"] .v, body[data-layout="he"] .v, body[data-layout="en"] .v { grid-template-columns:2.4em minmax(0,1fr); grid-template-areas:"n he" "n en" }
body[data-layout="he"] .v .en, body[data-layout="en"] .v .he { display:none }
body[data-layout="he"] .v { grid-template-areas:"n he" }
body[data-layout="en"] .v { grid-template-areas:"n en" }
body[data-layout="inter"] .v .en { margin-top:2px }
body[data-nums="off"] .v .n, body[data-nums="off"] .he .hn { visibility:hidden }
body[data-nums="off"] .v .n { width:0 }
@media (max-width:760px) {
  .v { grid-template-columns:1.9em minmax(0,1fr); grid-template-areas:"n he" "n en"; column-gap:10px; padding:8px 2px }
  body[data-layout="side"] .v .en, .v .en { margin-top:2px }
  .text { --he-size:calc(1.42rem * var(--fs)); --en-size:calc(1rem * var(--fs)) }
}
.pager { display:flex; justify-content:space-between; gap:10px; margin:24px 0 8px; flex-wrap:wrap }
.src { font-size:.8rem; color:var(--muted); margin-top:18px }
.src a { color:var(--muted) }

/* lists, cards */
.section { margin-top:30px }
.section > h2 { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px }
.section > h2 .he { font-weight:600; color:var(--muted) }
.section > h2 small { font:400 .85rem var(--sans); color:var(--muted) }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px }
.grid.torah { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) }
.bk { display:flex; justify-content:space-between; align-items:baseline; gap:8px; border:1px solid var(--line); border-radius:10px; padding:9px 12px; text-decoration:none;
  color:var(--fg); background:var(--bg) }
.bk:hover { background:var(--hover); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)) }
.bk .t { font-weight:600 } .bk .t small { display:block; font-weight:400; color:var(--muted); font-size:.8rem }
.bk .he { font-size:1.15rem; white-space:nowrap }
.grid.torah .bk { padding:14px 16px } .grid.torah .bk .he { font-size:1.45rem }
.chapters { display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:6px; margin-top:12px }
.chapters a { text-align:center; padding:9px 0; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--fg) }
.chapters a:hover { background:var(--hover) }
.chapters a small { display:block; font:.75rem var(--he); color:var(--muted) }
.subhead { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:18px 0 8px }

/* weekly parashah */
.week { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:18px clamp(14px,3vw,24px); margin-top:18px }
.week .head { display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; align-items:center }
.week .when { color:var(--muted); font-size:.9rem }
.week .name { font-size:clamp(1.5rem,4.5vw,2.2rem); font-weight:700; letter-spacing:-.02em; margin:6px 0 2px; display:flex; gap:6px 16px; flex-wrap:wrap; align-items:baseline }
.week .name a { color:var(--fg); text-decoration:none }
.week .name .he { font-weight:600 }
.week .tag { display:inline-block; font-size:.8rem; border:1px solid var(--accent); color:var(--accent); border-radius:999px; padding:1px 9px; margin:4px 6px 0 0 }
.cols { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; margin-top:14px }
@media (max-width:760px) { .cols { grid-template-columns:minmax(0,1fr) } }
.tbl { width:100%; border-collapse:collapse; font-size:.92rem }
.tbl th, .tbl td { text-align:left; padding:5px 8px 5px 0; border-bottom:1px solid var(--line); vertical-align:top }
.tbl th { font-weight:500; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em }
.tbl td.he, .tbl th.he { text-align:right }
.tbl tr.now td { font-weight:600 }
.tbl .muted, .muted { color:var(--muted) }
.scroll-x { overflow-x:auto }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; font-size:.93rem }
.kv dt { color:var(--muted) }
.today { margin-top:12px; color:var(--muted); font-size:.95rem }
.today b { color:var(--fg) }

/* search */
.searchbox { display:flex; gap:8px; margin-top:18px }
.searchbox input { flex:1 1 auto; min-width:0; border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:10px 12px; font-size:1rem }
dialog.search { width:min(760px, calc(100vw - 24px)); max-height:min(80vh, 760px); border:1px solid var(--line); border-radius:14px; padding:0; background:var(--bg); color:var(--fg);
  margin:8vh auto auto }
dialog.search::backdrop { background:rgba(0,0,0,.35) }
.search .q { display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg) }
.search .q input { flex:1 1 auto; min-width:0; border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 12px; font-size:1rem }
.search .res { padding:6px 12px 14px; overflow:auto; max-height:calc(min(80vh, 760px) - 70px) }
.search .hit { display:block; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--fg) }
.search .hit:hover, .search .hit[aria-selected="true"] { background:var(--hover) }
.search .hit .r { font-weight:600; font-size:.88rem; margin-bottom:2px }
.search .hit .t { font:.95rem/1.5 var(--serif) }
.search .hit .t.he { font:1.15rem/1.6 var(--he); direction:rtl; text-align:right }
.search mark { background:var(--mark-y); color:inherit; border-radius:3px }
.search .meta { color:var(--muted); font-size:.85rem; padding:8px 10px }
.search .go { background:var(--panel) }

/* verse menu */
.vmenu { width:min(300px, calc(100vw - 24px)); display:grid; gap:8px; padding:12px }
.vmenu .ref { font-weight:600 }
.vmenu .acts { display:flex; flex-wrap:wrap; gap:6px }
.vmenu .sw { display:flex; gap:6px; align-items:center }
.vmenu .sw button { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer }
.vmenu .sw button[data-c="y"] { background:var(--mark-y) } .vmenu .sw button[data-c="g"] { background:var(--mark-g) }
.vmenu .sw button[data-c="b"] { background:var(--mark-b) } .vmenu .sw button[data-c="p"] { background:var(--mark-p) }
.vmenu .sw button[data-c=""] { background:var(--bg) }
.vmenu .sw button[aria-pressed="true"] { outline:2px solid var(--fg); outline-offset:1px }
.vmenu textarea { width:100%; min-height:4em; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--bg); font-size:.9rem; resize:vertical }
#toast { position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:10px;
  font-size:.9rem; z-index:60; max-width:calc(100vw - 32px) }

/* forms (Hebrew date) */
.card { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:16px; margin-top:16px }
.card h2 { margin-bottom:10px }
.fields { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end }
.fields label { display:grid; gap:4px; font-size:.82rem; color:var(--muted) }
.fields input, .fields select { border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:7px 9px; font-size:.95rem; color:var(--fg); min-width:0 }
.out { font-size:1.25rem; margin-top:12px; font-weight:600 }
.out .he { font-weight:600; margin-inline-start:.4em }
.check { display:inline-flex; gap:6px; align-items:center; font-size:.9rem; cursor:pointer }

.faq { margin-top:36px; max-width:46em }
.faq h2 { margin:22px 0 6px }
.faq p { font-size:.95rem; margin-top:8px; opacity:.9 }
.prose { max-width:50em }
.prose p, .prose ul { margin-top:10px }
.prose ul { padding-left:1.3em }
.prose h2 { margin-top:26px }
pre.lic { white-space:pre-wrap; font:.8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:10px; overflow-wrap:anywhere }

/* gripe network badge (same on every site) */
footer { margin-top:20px }
.gn-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px 22px }
.gn-terms { color:var(--muted,#8a8a8a); font:.8rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration:none; text-align:center }
.gn-terms:hover { color:var(--accent,#e5484d); text-decoration:underline }
.gn { display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; border:1px solid var(--line,#e4e0da); border-radius:999px;
      background:var(--panel,var(--hover,#f3efe9)); color:var(--fg,#1a1a1a); text-decoration:none;
      font:500 .9rem/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; transition:border-color .15s, transform .15s }
.gn:hover { border-color:var(--accent,#e5484d); transform:translateY(-1px) }
.gn:focus-visible { outline:2px solid var(--accent,#e5484d); outline-offset:2px }
.gn-dot { width:8px; height:8px; border-radius:50%; background:var(--accent,#e5484d); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#e5484d) 22%, transparent) }
.gn b { color:var(--accent,#e5484d); font-weight:700 }
.gn-more { padding:5px 11px; border-radius:999px; background:var(--accent,#e5484d); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap }
@media (prefers-reduced-motion: reduce) { .gn { transition:none } .gn:hover { transform:none } }

/* pasuk of the day / today's aliyah */
.pasuk { margin:14px 0 6px; padding:0 }
.pasuk .he { font-size:clamp(1.45rem, 3.6vw, 1.95rem); line-height:1.9; direction:rtl; text-align:right }
.pasuk .en { font:clamp(1.02rem, 2.4vw, 1.15rem)/1.6 var(--serif); margin-top:8px }
.pasuk .en .jn { font:.72rem var(--sans); color:var(--muted) }
.pasuk .ref { margin-top:10px; font-size:.92rem; color:var(--muted) }
.pasuk .ref a { font-weight:600 }
body[data-marks="cons"] .pasuk .he .q { display:inline }
.daily-aliyah { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:.95rem }
.daynav { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px }

@media print {
  .top, .bar, .pager, footer, .gn-wrap, [role="navigation"], .noprint, #toast, dialog { display:none !important }
  body { background:#fff; color:#000 }
  .v { break-inside:avoid; background:none !important; border-color:#ddd !important }
  .v .n { color:#555 }
  .text { --he-size:16pt; --en-size:11pt }
  a { color:#000; text-decoration:none }
  .crumbs { display:none }
}