/* Layout: blue header band like the shul's board; below it a two-column grid (schedule right, zmanim + notices left) that stacks on phones. */
:root {
  --bg: #ece2cf; --panel: #fbf7ef; --panel-2: #f3ecdd; --ink: #2a1a1d; --muted: #6f5c60; --line: #d8cab2;
  --band: #223b68; --band-2: #2d4b82; --band-ink: #f6f1e7;
  --tile: #7a1d2a; --tile-2: #641622; --tile-ink: #fff3e3; --next: #1e7a3a; --next-2: #176430; --now: #b85c00;
  --accent: #8a2537; --count: #b3261e; --focus: #2d4b82; --gold: #b8963f; --gold-2: #e3cf8a;
  --font-display: 'Frank Ruhl Libre', 'David', 'Times New Roman', serif;
  --font-ui: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151011; --panel: #211819; --panel-2: #2a1f20; --ink: #f1e7d8; --muted: #b7a69f; --line: #3d2f30;
    --band: #16284a; --band-2: #1e3661; --band-ink: #f1e7d8;
    --tile: #6a1823; --tile-2: #52121b; --tile-ink: #ffe8d4; --next: #237a3f; --next-2: #1b6233; --now: #d07a1f;
    --accent: #e09aa6; --count: #ff7b72; --focus: #8fb0ea; --gold: #d2b25a; --gold-2: #6b5a2a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151011; --panel: #211819; --panel-2: #2a1f20; --ink: #f1e7d8; --muted: #b7a69f; --line: #3d2f30;
  --band: #16284a; --band-2: #1e3661; --band-ink: #f1e7d8;
  --tile: #6a1823; --tile-2: #52121b; --tile-ink: #ffe8d4; --next: #237a3f; --next-2: #1b6233; --now: #d07a1f;
  --accent: #e09aa6; --count: #ff7b72; --focus: #8fb0ea; --gold: #d2b25a; --gold-2: #6b5a2a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; margin: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--band); }
#app { min-height: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* Header band */
.top { background: linear-gradient(180deg, var(--band-2), var(--band)); color: var(--band-ink); }
.top .inner { max-width: 1120px; margin: 0 auto; padding-block: 18px 20px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.top .shul { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .01em; opacity: .95; display: flex; align-items: center; gap: 10px; }
.top .logo { height: 46px; width: auto; max-width: 170px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.08); }
.top .dayline { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; }
.top .dates { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .95rem; opacity: .9; }
.top .chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); font-size: .85rem; }

/* Temporary banner */
.banner { background: #b8963f; color: #1d1708; }
.banner-inner { max-width: 1120px; margin: 0 auto; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-weight: 700; font-size: 1.1rem; text-align: center; }
.push-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.push-lbl { min-width: 5em; }
.push-row select, .push-row input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }

/* Sponsor boxes under the header */
.sponsors { max-width: 1120px; margin: 0 auto; padding-block: 18px 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sponsors-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.sponsor { position: relative; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 3px double var(--gold); border-radius: 8px; padding: 16px 22px 18px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.06); min-width: 0; }
.sponsor .frame { position: absolute; inset: 6px; border: 1px solid var(--gold); border-radius: 4px; opacity: .75; pointer-events: none; }
.sponsor .frame::before, .sponsor .frame::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
.sponsor .frame::before { top: -6px; inset-inline-start: -6px; }
.sponsor .frame::after { bottom: -6px; inset-inline-end: -6px; }
.sponsor .t { font-size: 1.4rem; color: var(--accent); letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sponsor .t::before, .sponsor .t::after { content: ""; flex: 0 0 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.sponsor .t::after { background: linear-gradient(90deg, var(--gold), transparent); }
.sponsor .b { white-space: pre-wrap; font-size: 1.2rem; line-height: 1.5; margin-top: 8px; font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
.sponsor:first-child .b { font-size: 1.35rem; }
.sponsor .b:first-line { font-size: 1.05em; }

/* Main grid */
main { max-width: 1120px; margin: 0 auto; padding-block: 20px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 820px) { main { grid-template-columns: minmax(0, 1fr); } }
.col { min-width: 0; display: grid; gap: 18px; }

/* Next minyan panel */
.next { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px 20px 18px; text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.next h2 { font-size: 1.6rem; color: var(--accent); }
.next .what { font-size: 1.15rem; margin-top: 4px; color: var(--muted); }
.next .time { font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.next .ms { font-size: 1rem; color: var(--muted); margin-top: 4px; }
.next .count { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--count); font-weight: 700; margin-top: 8px; letter-spacing: .04em; }
.next .when { font-size: .95rem; color: var(--muted); margin-top: 6px; }
.next .empty { color: var(--muted); padding: 10px 0; }

/* Tefilla sections */
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.day-head h2 { font-size: 1.3rem; }
.day-head .sub { color: var(--muted); font-size: .95rem; }
.tefilla { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; }
.tefilla h3 { font-size: 1.35rem; text-align: center; color: var(--accent); margin-bottom: 10px; }
.tefilla h3 .n { font-family: var(--font-ui); font-weight: 500; font-size: .85rem; color: var(--muted); margin-inline-start: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile { position: relative; background: linear-gradient(180deg, var(--tile), var(--tile-2)); color: var(--tile-ink); border-radius: 10px; padding: 8px 6px 7px; text-align: center; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.tile .room { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .time { font-size: 1.75rem; line-height: 1.1; font-weight: 700; margin-top: 2px; }
.tile .ms { font-size: .75rem; opacity: .85; margin-top: 2px; }
.tile .note { font-size: .72rem; opacity: .85; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.past { opacity: .42; filter: saturate(.4); }
.tile.next { background: linear-gradient(180deg, var(--next), var(--next-2)); box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--next); }
.tile.event { background: linear-gradient(180deg, var(--band-2), var(--band)); }
.tile.next::after { content: "הבא"; position: absolute; top: -9px; inset-inline-start: 8px; background: var(--next-2); color: #fff; font-size: .68rem; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); }
.tile.now::after { content: "עכשיו"; position: absolute; top: -9px; inset-inline-start: 8px; background: var(--now); color: #fff; font-size: .68rem; padding: 1px 7px; border-radius: 999px; }
.none { color: var(--muted); text-align: center; padding: 8px; font-size: .95rem; }

/* Sidebar */
.side { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.side h3 { font-size: 1.15rem; color: var(--accent); margin-bottom: 8px; }
.zlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.zlist li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.zlist li:last-child { border-bottom: 0; }
.zlist .z { font-weight: 700; }
.zlist li.hi { color: var(--accent); }
.notice { border: 2px double var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.notice + .notice { margin-top: 10px; }
.notice .t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--accent); }
.notice .b { white-space: pre-wrap; margin-top: 2px; }
.notice .b:empty::before { content: "—"; color: var(--muted); }

.sms-text { margin: 0 0 4px; }
.sms-num { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; user-select: all; }
.side .btn { display: inline-block; text-decoration: none; }
footer { max-width: 1120px; margin: 0 auto; padding-block: 0 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.btn { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--band-2); color: var(--band-ink); border-color: var(--band-2); }
.btn.danger { color: var(--count); }
.btn.small { padding: 3px 9px; font-size: .85rem; }

/* Admin overlay */
.overlay { position: fixed; inset: 0; background: rgba(20,10,12,.55); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-block: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); overflow: auto; }
.panel { background: var(--panel); color: var(--ink); width: min(960px, 100%); border-radius: 14px; border: 1px solid var(--line); padding: 16px 18px 20px; display: grid; gap: 14px; }
.panel h2 { font-size: 1.4rem; color: var(--accent); }
.panel .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
.tabs button[aria-selected="true"] { background: var(--band-2); color: var(--band-ink); border-color: var(--band-2); }
.tabs button.has { font-weight: 700; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: .85rem; color: var(--muted); unicode-bidi: plaintext; }
.field input, .field select, .field textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; width: 100%; }
.field textarea { min-height: 150px; font-family: var(--font-ui); line-height: 1.5; resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: start; }
.field, .editor, .rows { align-content: start; }
.fields.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hint { font-size: .82rem; color: var(--muted); }
.hint code { background: var(--panel-2); padding: 0 4px; border-radius: 4px; }
.preview span { unicode-bidi: plaintext; }
.preview { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; min-height: 1.2em; }
.preview .bad { color: var(--count); }
.editor { display: grid; gap: 8px; }
.field label.same { font-size: .95rem; color: var(--ink); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.same-info { margin-top: -2px; }
.rows { display: grid; gap: 6px; }
.mrow { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 6px; background: var(--panel-2); }
.mrow-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mrow input, .mrow select, .series input { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; min-width: 0; font-size: .92rem; }
.mrow select { width: auto; flex: 1 1 auto; max-width: 100%; }
.mrow input[type="time"] { width: 7.5em; }
.mrow .mins, .series .mins { width: 4.2em; }
.mrow .room { flex: 1 1 140px; }
.mrow .grow, .series .grow { flex: 1 1 160px; }
.mrow .small { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.mrow .pv { font-size: .82rem; color: var(--muted); margin-inline-start: auto; }
.mrow .bad { color: var(--count); font-size: .85rem; }
.mrow.series { border-color: var(--gold); background: color-mix(in srgb, var(--panel-2) 85%, var(--gold) 15%); }
.mrow .tag { background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; }
.mrow .k { font-size: .85rem; color: var(--muted); }
.mrow .inl { display: contents; }
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rchip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 6px 2px 10px; font-size: .9rem; }
.rchip .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: .8rem; }
.rchip .x:hover { color: var(--count); }
.rchip .n { color: var(--muted); font-size: .8rem; }
.editor-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editor-bar select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: .85rem; }
.series { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; font-size: .9rem; }
.editor textarea { min-height: 150px; width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-family: var(--font-ui); line-height: 1.5; resize: vertical; }
.fields.three > .field { min-width: 0; }
.ovr { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.toast { position: fixed; bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; z-index: 60; font-size: .95rem; max-width: calc(100% - 32px); }
.pin { display: grid; gap: 10px; max-width: 320px; }
details.help { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
details.help summary { cursor: pointer; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .tile { transition: opacity .3s, transform .2s; } }

/* Lobby screen (?view=display / #display) and door display (?room=… / #room1): larger, no controls, no scrollbars */
#app.display { font-size: 1.3rem; cursor: none; }
#app.display .top .dayline { font-size: 2.8rem; }
#app.display .next .time { font-size: 6rem; }
#app.display .next .count { font-size: 3rem; }
#app.display .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#app.display .tile .time { font-size: 2.3rem; }
#app.display .tile .room { font-size: 1.1rem; }
#app.display main { grid-template-columns: minmax(0, 1fr) 340px; }
#app.display .tile.past { display: none; }
#app.display.room main { grid-template-columns: minmax(0, 1fr); }
#app.display.room .side { display: none; }
#app.display.room .next .time { font-size: 8rem; }
#app.display.room .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 820px) { #app.display main { grid-template-columns: minmax(0, 1fr); } }

/* Weekly sheet */
.week-main { max-width: 1120px; margin: 0 auto; padding-block: 16px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 22px; }
.week-block { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.week-block h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: 8px; border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.wday { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.wday:last-child { border-bottom: 0; }
.wday.today { background: var(--panel-2); border-radius: 8px; padding-inline: 8px; }
.whead { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.whead strong { font-family: var(--font-display); font-size: 1.15rem; }
.wlabels { color: var(--accent); font-weight: 700; }
.wz { color: var(--muted); font-size: .9rem; }
.wline { font-size: .98rem; margin-top: 2px; }
.week-bar { max-width: 1120px; margin: 0 auto 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 8px; }
@media print {
  body { background: #fff; color: #000; }
  #app.week .top { background: none; color: #000; border-bottom: 2px solid #000; }
  .week-bar, .banner { display: none; }
  .week-block { border: 0; padding: 0; break-inside: avoid; page-break-inside: avoid; }
  .week-block + .week-block { break-before: page; page-break-before: always; }
  .wday.today { background: none; }
}

/* Lobby screen: sponsors take turns in one spot, fading between them */
.sponsors-inner.rotating { display: grid; grid-template-columns: 1fr; }
.sponsors-inner.rotating > .sponsor { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.sponsors-inner.rotating > .sponsor.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sponsors-inner.rotating > .sponsor { transition: none; } }

/* Big clock on the lobby and door screens */
.top .clock { width: 100%; direction: ltr; text-align: center; font-weight: 700; line-height: 1; letter-spacing: .02em; display: flex; justify-content: center; align-items: baseline; gap: .15em; margin-top: 4px; }
.top .clock .hm { font-size: clamp(3.5rem, 11vw, 7.5rem); }
.top .clock .ss { font-size: clamp(1.4rem, 4vw, 2.6rem); opacity: .8; }
#app.display.room .top .clock .hm { font-size: clamp(4rem, 14vw, 9rem); }

/* reminders: tappable tiles, the "remind me" box and the reminder rows */
.tile.tap { cursor: pointer; }
.tile.tap:hover, .tile.tap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.panel.small { width: min(460px, 100%); }
.rem-what { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.rem-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rem-row select, .rem-row input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; color: inherit; max-width: 100%; }
.rem-lead { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ltr { direction: ltr; text-align: left; }