/* ============================================================
   TT Siddur — davening layout
   Loads AFTER gang.css (which supplies the design tokens, fonts,
   and the sign-in gate styles) and restyles the app area as a
   siddur page: one centered column, large nikud Hebrew, rubric
   instructions, quiet chrome.
   ============================================================ */

:root { --sd-scale: 1; }

/* ── Top bar ─────────────────────────────────────────────────── */
.sd-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 6px;
  padding: 10px clamp(12px, 4vw, 28px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.sd-brand { display: flex; flex-direction: column; line-height: 1.15; }
.sd-brand > span:last-child { font: 600 .95rem/1.2 var(--font-display); color: var(--ink); }
.sd-kicker { font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.sd-spacer { flex: 1; }
.sd-icon {
  appearance: none; cursor: pointer; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font: 600 .82rem/1 var(--font-body);
  padding: 8px 10px; transition: background .15s, transform .1s;
}
.sd-icon:hover { background: var(--surface-2); transform: translateY(-1px); }
.sd-icon:active { transform: translateY(0); }
.sd-toggle.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.sd-size { display: flex; gap: 4px; }

/* ── TOC drawer ──────────────────────────────────────────────── */
.sd-toc {
  position: fixed; top: 54px; left: clamp(8px, 3vw, 24px); z-index: 45;
  min-width: 230px; max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 10px; display: none;
}
.sd-toc.open { display: block; }
.sd-toc-head { font: 700 .66rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); padding: 6px 10px 8px; }
.sd-toc a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--ink);
  font-family: var(--font-hebrew); font-size: 1.05rem;
}
.sd-toc a:hover { background: var(--surface-2); }
.sd-toc-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
.sd-toc-dot.rev-approved { background: var(--good); border-color: var(--good); }
.sd-toc-dot.rev-declined { background: var(--bad); border-color: var(--bad); }

/* ── The page ────────────────────────────────────────────────── */
.sd-page { max-width: 660px; margin: 0 auto; padding: 26px clamp(16px, 5vw, 28px) 90px; }
.sd-hero { text-align: center; padding: 26px 0 8px; }
.sd-title { font-family: var(--font-hebrew); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.4rem); color: var(--ink); margin: 8px 0 2px; }
.sd-subtitle { color: var(--muted); font-size: .92rem; }
.sd-rule { width: 72px; height: 2px; background: var(--gold); margin: 16px auto; border-radius: 2px; }
.sd-end { text-align: center; padding: 30px 0 10px; color: var(--muted); font-family: var(--font-hebrew); font-size: 1.1rem; }

/* ── Pieces ──────────────────────────────────────────────────── */
.sd-piece { margin: 34px 0; }
.sd-piece-head { text-align: center; margin-bottom: 14px; position: relative; }
.sd-piece-he { font-family: var(--font-hebrew); font-weight: 600; font-size: clamp(1.6rem, 6vw, 2.1rem); color: var(--ink); margin: 0; }
.sd-piece-en { font: 700 .66rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-top: 4px; }
.sd-piece-about { font-size: .85rem; color: var(--muted); max-width: 48ch; margin: 8px auto 0; line-height: 1.55; }
.sd-jazz-btn {
  appearance: none; cursor: pointer; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--gold-deep); font: 600 .78rem/1 var(--font-body); padding: 7px 13px;
  transition: background .15s, transform .1s;
}
.sd-jazz-btn:hover { background: var(--surface-2); transform: translateY(-1px); }

/* ── Text: Hebrew first, English interlinear ─────────────────── */
.sd-stanza { margin: 0 0 20px; }
.sd-line { margin: 0 0 calc(10px * var(--sd-scale)); }
.sd-he {
  font-family: var(--font-hebrew); direction: rtl; text-align: right;
  font-size: calc(1.5rem * var(--sd-scale)); line-height: 1.85; color: var(--ink);
}
.sd-en { font-size: calc(.86rem * var(--sd-scale)); line-height: 1.5; color: var(--muted); margin-top: 1px; }
body.sd-no-en .sd-en, body.sd-no-en .sd-rubric-en { display: none; }
body.sd-no-en .sd-he { line-height: 2.05; }

/* Rubrics: instructions, styled like a siddur's small red print */
.sd-rubric { margin: 14px 0 10px; text-align: center; }
.sd-rubric-he { display: block; direction: rtl; font-family: var(--font-hebrew); font-size: calc(.95rem * var(--sd-scale)); color: var(--gold-deep); }
.sd-rubric-en { display: block; font-size: calc(.78rem * var(--sd-scale)); color: var(--muted); font-style: italic; margin-top: 1px; }

/* ── Rav review (compact) ────────────────────────────────────── */
.sd-rev { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--surface); }
.sd-rev.is-approved { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 5%, var(--surface)); }
.sd-rev.is-declined { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.sd-rev-hero { margin: 6px 0 26px; }
.sd-rev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-rev-tip { font-size: .85rem; color: var(--muted); margin: 6px 0 8px; }
.sd-rev-counts { font: 600 .76rem/1 var(--font-body); color: var(--muted); margin-left: auto; }
.sd-rev-status { font: 700 .64rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sd-rev-status.approved { color: #fff; background: var(--good); border-color: var(--good); }
.sd-rev-status.declined { color: #fff; background: var(--bad); border-color: var(--bad); }
.sd-rev-btn { appearance: none; cursor: pointer; font: 600 .78rem/1 var(--font-body); padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); transition: filter .15s, transform .1s; }
.sd-rev-btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.sd-rev-btn.ok.on { background: var(--good); border-color: var(--good); color: #fff; }
.sd-rev-btn.no.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.sd-rev-saved { font-size: .74rem; color: var(--muted); margin-left: auto; }
.sd-rev-notes { width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .86rem; resize: vertical; }
.sd-rev-notes:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }

/* ── Drawer: sparks + notes ──────────────────────────────────── */
.sd-drawer { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(20,16,8,.45); }
.sd-drawer.open { display: flex; align-items: flex-end; justify-content: center; }
.sd-drawer-card {
  width: min(660px, 100%); max-height: 78vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 0 0;
  padding: 16px clamp(14px, 4vw, 22px) 26px;
  animation: sd-up .22s ease;
}
@keyframes sd-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sd-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sd-drawer-title { font: 600 1.05rem/1.3 var(--font-display); color: var(--ink); }
.sd-drawer-sub { font-family: var(--font-hebrew); color: var(--muted); }
.sd-drawer-label { font: 700 .64rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 14px 0 8px; }
.sd-drawer-empty { color: var(--muted); font-size: .88rem; }
.sd-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.sd-card-kind { font: 700 .72rem/1 var(--font-body); color: var(--gold-deep); margin-bottom: 5px; }
.sd-card-body { font-size: .9rem; line-height: 1.55; color: var(--ink); }
.sd-drawer-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sd-link { font-size: .82rem; color: var(--gold-deep); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
.sd-note { border-bottom: 1px solid var(--line); padding: 8px 2px; font-size: .9rem; }
.sd-note b { font-size: .8rem; color: var(--gold-deep); }
.sd-note-form textarea { width: 100%; margin-top: 10px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .88rem; resize: vertical; }
.sd-note-row { display: flex; gap: 8px; margin-top: 8px; }
.sd-note-row select { flex: 1; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .84rem; }
.sd-post { appearance: none; cursor: pointer; font: 600 .84rem/1 var(--font-body); padding: 9px 16px; border-radius: 9px; border: 1px solid var(--gold); background: var(--gold); color: #fff; }

/* ── Small screens ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .sd-brand > span:last-child { font-size: .85rem; }
  .sd-size { display: none; } /* pinch-zoom + the א/A toggle carry small screens */
  .sd-page { padding-top: 14px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .sd-bar, .sd-toc, .sd-jazz-btn, .sd-rev, .sd-drawer { display: none !important; }
  .sd-page { max-width: none; padding: 0; }
  .sd-he { font-size: 14pt; line-height: 1.8; }
  .sd-en { font-size: 8.5pt; color: #555; }
  .sd-piece { break-inside: avoid-page; margin: 18pt 0; }
}

/* ── Day index ───────────────────────────────────────────────── */
.sd-days-tip { text-align: center; color: var(--muted); font-size: .9rem; max-width: 44ch; margin: 0 auto 20px; line-height: 1.55; }
.sd-days-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sd-day-card {
  appearance: none; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 16px 12px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); font: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sd-day-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.09); border-color: var(--gold); }
.sd-day-card.today { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.sd-day-card.unused { opacity: .5; }
.sd-day-he { font-family: var(--font-hebrew); font-size: 1.25rem; direction: rtl; }
.sd-day-en { font: 700 .62rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.sd-day-meta { font-size: .74rem; color: var(--muted); }

/* ── Day nav (inside a day) ──────────────────────────────────── */
.sd-daynav {
  display: flex; align-items: stretch; gap: 8px; margin: 0 0 22px;
}
.sd-daynav-mid {
  appearance: none; cursor: pointer; flex: 1; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: inherit; padding: 8px 10px; transition: background .15s;
}
.sd-daynav-mid:hover { background: var(--surface-2); }
.sd-daynav-he { display: block; font-family: var(--font-hebrew); font-size: 1.15rem; }
.sd-daynav-sub { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.sd-toc-back .sd-toc-he { font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--gold-deep); }