/* ============================================================
   TT Siddur — bentching + al hamichya additions
   Loads AFTER gang.css and siddur.css and only adds what the
   davening layout doesn't have: the day banner + picker, the
   day-conditional blocks (Retzei / Ya'aleh V'Yavo / Al HaNissim),
   the Ashkenaz/Sefard toggle, and the Al Hamichya composer.
   ============================================================ */

/* ── Day banner ──────────────────────────────────────────────── */
.bn-daybar { margin: 6px 0 0; }
.bn-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 14px; padding: 12px 14px;
}
.bn-banner .bn-icon { font-size: 1.05rem; margin-top: 1px; }
.bn-main { flex: 1; min-width: 0; }
.bn-hdate { font: 600 .7rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bn-line { font: 600 .86rem/1.45 var(--font-body); color: var(--ink); }
.bn-note { font-size: .76rem; color: var(--muted); margin-top: 3px; }
.bn-sunset { font-size: .76rem; color: var(--gold-deep); margin-top: 4px; }
.bn-pick {
  appearance: none; cursor: pointer; white-space: nowrap; align-self: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--gold-deep); font: 700 .74rem/1 var(--font-body); padding: 8px 11px;
  transition: background .15s, transform .1s;
}
.bn-pick:hover { background: var(--surface-2); transform: translateY(-1px); }

/* ── Day picker sheet ────────────────────────────────────────── */
.bn-scrim { position: fixed; inset: 0; background: rgba(20, 16, 8, .45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bn-scrim.show { opacity: 1; pointer-events: auto; }
.bn-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 78vh; overflow: auto;
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  padding: 18px clamp(14px, 4vw, 22px) calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .25s ease;
}
.bn-sheet.show { transform: none; }
.bn-sheet h3 { font: 600 1rem/1.3 var(--font-display); color: var(--ink); margin: 0 0 2px; }
.bn-sheet .bn-sheet-sub { font-size: .78rem; color: var(--muted); margin: 0 0 12px; }
.bn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .bn-opts { grid-template-columns: repeat(3, 1fr); } }
.bn-opt {
  appearance: none; cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  color: var(--ink); font: 600 .8rem/1.35 var(--font-body); padding: 10px 8px;
  transition: border-color .15s, background .15s, color .15s;
}
.bn-opt:hover { border-color: var(--gold); }
.bn-opt.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.bn-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.bn-set .lab { font-size: .82rem; color: var(--ink); font-weight: 600; }
.bn-set .sub { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }

/* ── Day-conditional blocks ──────────────────────────────────── */
.bn-cond { margin: 14px 0; }
.bn-cond.on {
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  border-radius: 12px; padding: 8px 14px 4px;
}
.bn-cond-label { font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.bn-cond.off > .bn-cond-body { display: none; }
.bn-cond.off.peek > .bn-cond-body { display: block; padding: 10px 12px 4px; }
.bn-cond-toggle {
  appearance: none; cursor: pointer; width: 100%; text-align: start;
  border: 1px dashed var(--line); border-radius: 10px; background: transparent;
  color: var(--muted); font: 600 .78rem/1.4 var(--font-body); padding: 9px 12px;
  transition: border-color .15s, color .15s;
}
.bn-cond-toggle:hover { border-color: var(--gold); color: var(--ink); }
.bn-cond.on > .bn-cond-toggle { display: none; }
.bn-cond.off.peek > .bn-cond-toggle { border-style: solid; color: var(--ink); }

/* ── Nusach + view controls row ──────────────────────────────── */
.bn-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 12px 0 0; }
.bn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.bn-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font: 600 .78rem/1 var(--font-body); padding: 9px 13px;
  transition: background .15s, color .15s;
}
.bn-seg button:hover { color: var(--ink); }
.bn-seg button.on { background: var(--gold); color: #fff; }

/* Nusach visibility (Ashkenaz vs chassidic Sefard, inline variant lines).
   Edot HaMizrach is a separate document swapped in wholesale, not CSS-hidden. */
body[data-nusach="a"] .nu-s { display: none; }
body[data-nusach="s"] .nu-a { display: none; }

/* ── Collapsible sections (zimun, forgot-it) ─────────────────── */
.bn-fold-toggle {
  appearance: none; cursor: pointer; width: 100%; background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0 10px;
  color: var(--muted); font: 600 .78rem/1 var(--font-body);
}
.bn-fold-toggle:hover { color: var(--ink); }
.bn-fold-toggle .chev { transition: transform .2s; }
.bn-folded .bn-fold-body { display: none; }
.bn-folded .bn-fold-toggle .chev { transform: rotate(-90deg); }

.bn-draft {
  display: inline-block; vertical-align: 2px; margin-inline-start: 8px;
  font: 700 .6rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  border-radius: 6px; padding: 3px 7px;
}

/* ── Al Hamichya composer ────────────────────────────────────── */
.bn-composer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.bn-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font: 600 .84rem/1 var(--font-body); padding: 10px 16px;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.bn-chip:hover { border-color: var(--gold); transform: translateY(-1px); }
.bn-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.bn-chip input { display: none; }
.bn-compose-note { text-align: center; font-size: .76rem; color: var(--muted); margin-bottom: 12px; }

/* ── Cross-link + skeleton ───────────────────────────────────── */
.bn-crosslink {
  display: block; text-align: center; margin: 30px auto 0; max-width: 400px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--gold-deep); text-decoration: none; font: 700 .88rem/1.4 var(--font-body);
  padding: 14px 16px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.bn-crosslink:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.bn-crosslink .he { font-family: var(--font-hebrew); font-size: 1.05rem; margin-inline-start: 8px; }

.bn-skel { border-radius: 10px; height: 15px; margin: 9px 0; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: bn-shimmer 1.3s infinite; }
@keyframes bn-shimmer { to { background-position: -200% 0; } }
.bn-skel.w90 { width: 90%; } .bn-skel.w70 { width: 70%; } .bn-skel.w50 { width: 50%; }

.bn-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.bn-reveal.in { opacity: 1; transform: none; }

.bn-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 70;
  transform: translateX(-50%) translateY(90px);
  background: var(--ink); color: var(--surface); font: 600 .8rem/1 var(--font-body);
  padding: 10px 16px; border-radius: 999px; transition: transform .25s ease;
}
.bn-toast.show { transform: translateX(-50%) translateY(0); }

@media print {
  .bn-daybar .bn-pick, .bn-controls, .bn-cond.off, .bn-crosslink, .bn-sheet, .bn-scrim { display: none !important; }
  .bn-cond.on { border: 0; padding: 0; background: transparent; }
}