/* Muttasil wall display — modern flat.
 *
 * Design intent (vs the orthodox boxy boards): no filled boxes, no borders
 * around everything — hierarchy comes from TYPE. Thin oversized numerals
 * (Outfit 200/300), one warm accent, hairline separators, generous air.
 * Everything is sized in vh/vw so a 32" TV and an 85" TV both fill the
 * frame proportionally — no scale caps, no wasted real estate.
 *
 * Layout: slim header (identity · dates · brand) → hero row (giant clock + NEXT
 * block | events panel) → full-width prayer strip (5 columns, adhan over
 * iqamah) → Jummah lines (one per congregation) → announcement ticker.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The hidden attribute must always win — several elements set display:flex. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  cursor: none; /* a wall display shows no pointer; JS re-enables on use */
}

/* Palettes — design-guide/brand-tokens.json: dome green, brass, marble cream.
   A single canvas per theme, the events side separated by a hairline and a
   4% tint only. */
body[data-theme="dark"] {
  --bg: #07361F; --text: #F7F3E9; --sub: rgba(247,243,233,0.66);
  --faint: rgba(247,243,233,0.38); --line: rgba(247,243,233,0.14);
  --accent: #E3C87A; --accent-dim: rgba(227,200,122,0.55);
  --panel-tint: rgba(227,200,122,0.05);
  --star: rgba(247,243,233,0.045);
}
body[data-theme="light"] {
  --bg: #F7F3E9; --text: #07361F; --sub: rgba(7,54,31,0.66);
  --faint: rgba(7,54,31,0.4); --line: rgba(7,54,31,0.14);
  --accent: #C69239; --accent-dim: rgba(198,146,57,0.6);
  --panel-tint: rgba(198,146,57,0.045);
  --star: rgba(7,54,31,0.05);
}
body { background: var(--bg); color: var(--text); }

#lattice { position: fixed; inset: 0; pointer-events: none; }

#canvas {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: 3.2vh 3.2vw 0;
  transition: transform 1.5s ease; /* anti burn-in drift glides */
}

/* ---- Header: identity left · dates centre · brand right ---- */
/* The two outer zones take equal flex so the dates land on the true centre
   line whatever the mosque name's length; a long name ellipsizes. */
#header { display: flex; align-items: center; gap: 1.4vw; }
.head-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.4vw; }
#logo { width: 6.4vh; height: 6.4vh; border-radius: 1.4vh; object-fit: cover; flex: none; }
#mosque-name {
  font-size: 3.6vh; font-weight: 500; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head-dates { text-align: center; white-space: nowrap; }
.date { font-size: 2.6vh; font-weight: 400; color: var(--sub); letter-spacing: 0.06em; }
.date.hijri { color: var(--accent); font-weight: 300; }
.date + .date { margin-top: 0.4vh; }
.head-right { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }

/* ---- Hero row: clock + next | events ---- */
#hero { flex: 1; display: flex; min-height: 0; margin-top: 1vh; }

#hero-left {
  flex: 1.12; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-right: 2.6vw;
}
#clock-wrap { display: flex; align-items: baseline; gap: 1vw; line-height: 0.95; }
#clock {
  font-size: 18vh; font-weight: 200; letter-spacing: -0.02em; /* was 21vh; trimmed to make room for stacked Jummah lines */
  font-variant-numeric: tabular-nums;
}
#clock-half { font-size: 4.4vh; font-weight: 300; color: var(--sub); letter-spacing: 0.08em; }

#next-block { margin-top: 3.6vh; }
.next-label {
  font-size: 1.9vh; font-weight: 600; letter-spacing: 0.34em;
  color: var(--faint); text-transform: uppercase;
}
#next-value { font-size: 8vh; font-weight: 200; margin-top: 0.8vh; line-height: 1.05; }
#next-value .nx-time { color: var(--accent); font-weight: 300; }
#next-countdown { font-size: 2.7vh; font-weight: 300; color: var(--sub); margin-top: 0.6vh; letter-spacing: 0.04em; }

/* ---- Events: hairline + faint tint, typography only — no card boxes ---- */
#events {
  flex: 0.88; min-width: 0;
  border-left: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel-tint), transparent 60%);
  padding: 1vh 0 1vh 2.4vw;
  display: flex; flex-direction: column;
}
#event-page { flex: 1; min-height: 0; animation: pageIn 0.5s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(1.6vh); } to { opacity: 1; transform: none; } }

.events-label {
  font-size: 1.9vh; font-weight: 600; letter-spacing: 0.34em;
  color: var(--faint); text-transform: uppercase; margin-bottom: 2.2vh;
}
.event-item { padding: 1.6vh 0; border-bottom: 1px solid var(--line); }
.event-item:last-of-type { border-bottom: none; }
.event-title {
  font-size: 3vh; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-when { font-size: 2.1vh; font-weight: 300; color: var(--sub); margin-top: 0.4vh; letter-spacing: 0.03em; }
.more-events { font-size: 2vh; font-weight: 300; color: var(--faint); margin-top: 1.4vh; }
.events-empty {
  height: 70%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6vh; color: var(--faint); font-size: 2.4vh; font-weight: 300;
}
.events-empty svg { width: 6vh; height: 6vh; opacity: 0.7; }

.detail-kicker {
  font-size: 1.9vh; font-weight: 600; letter-spacing: 0.34em;
  color: var(--accent-dim); text-transform: uppercase; margin-bottom: 2vh;
}
.detail-title { font-size: 5.2vh; font-weight: 300; line-height: 1.12; }
.detail-when { font-size: 2.7vh; font-weight: 300; color: var(--text); margin-top: 2vh; }
.detail-place { font-size: 2.2vh; font-weight: 300; color: var(--sub); margin-top: 0.8vh; }
.detail-desc {
  font-size: 2.2vh; font-weight: 300; color: var(--sub); margin-top: 2vh; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.detail-recur { font-size: 2vh; font-weight: 400; color: var(--accent-dim); margin-top: 2vh; letter-spacing: 0.04em; }
#page-dots { color: var(--faint); font-size: 1.5vh; letter-spacing: 0.6em; padding-top: 1vh; }

/* ---- Prayer strip: five columns, the day at a glance ---- */
#strip { border-top: 1px solid var(--line); margin-top: 1.5vh; }
.strip-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6vh 0 0.4vh;
}
.strip-title { font-size: 1.9vh; font-weight: 600; letter-spacing: 0.34em; color: var(--faint); text-transform: uppercase; }
.strip-legend { font-size: 1.8vh; font-weight: 300; color: var(--faint); letter-spacing: 0.06em; }
.strip-legend .lg-iq { color: var(--accent-dim); }

#prayer-rows { display: flex; }
.pcol {
  flex: 1; text-align: center; padding: 1.6vh 0 2.2vh;
  border-top: 2px solid transparent; /* the next-prayer marker slot */
}
.pcol + .pcol { border-left: 1px solid var(--line); }
.pcol.next { border-top-color: var(--accent); }
.pcol svg { width: 3.6vh; height: 3.6vh; color: var(--sub); stroke-width: 1.4; }
.pcol.next svg { color: var(--accent); }
.pname {
  font-size: 2.3vh; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sub); margin-top: 0.8vh;
}
.pcol.next .pname { color: var(--accent); }
.padhan { font-size: 3.4vh; font-weight: 300; color: var(--sub); margin-top: 1.2vh; font-variant-numeric: tabular-nums; }
.padhan .half, .piqamah .half { font-size: 0.55em; font-weight: 300; letter-spacing: 0.06em; margin-left: 0.25em; }
.piqamah { font-size: 5.4vh; font-weight: 400; color: var(--accent); margin-top: 0.4vh; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- Jummah: one line per congregation ---- */
/* A centred three-column grid — label · khutbah · iqamah — so the times of
   the 1st, 2nd (…) Jummah line up under each other and read as a table,
   not a sentence. The hero row above is the flex spring: each extra line
   here takes ~3.3vh from it, which the trimmed clock covers. */
#jummah {
  border-top: 1px solid var(--line);
  padding: 1.3vh 0 1.4vh;
  display: grid; grid-template-columns: auto auto auto;
  justify-content: center; align-items: baseline;
  column-gap: 2.4vw; row-gap: 0.5vh;
  overflow: hidden;
}
.jummah-line { display: contents; }
.jummah-label { font-size: 2.2vh; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.jummah-sub { font-size: 2.2vh; font-weight: 300; color: var(--sub); letter-spacing: 0.04em; white-space: nowrap; }
.jummah-iqamah { font-size: 2.6vh; font-weight: 400; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Brand: the header's right zone ---- */
/* Theme picks the cream or green artwork. The mark matches the mosque
   logo's size. */
#brand { display: flex; align-items: center; gap: 0.9vw; opacity: 0.9; }
#brand img.mark { height: 6.4vh; width: 6.4vh; }
#brand img.word { height: 2.2vh; }
body[data-theme="dark"] #brand .light, body[data-theme="light"] #brand .dark { display: none; }

/* ---- Ticker ---- */
#ticker {
  margin: 0 -3.2vw; border-top: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  display: flex; align-items: center;
}
#ticker-text {
  display: inline-block; padding-left: 100vw; will-change: transform;
  font-weight: 300; color: var(--sub); letter-spacing: 0.02em;
}

/* ---- Status (loading / error) ---- */
#status {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.8vh;
}
#status-icon svg { width: 8vh; height: 8vh; color: var(--faint); }
#status-text { font-size: 3.2vh; font-weight: 300; }
#status-sub { font-size: 2.1vh; font-weight: 300; color: var(--sub); max-width: 70%; text-align: center; line-height: 1.5; }
/* Chooser (/tv/<zip>): one big tappable row per mosque, scrolls if a ZIP is busy. */
#choices { display: flex; flex-direction: column; gap: 1.2vh; margin-top: 1.5vh; width: min(72vw, 90vh); max-height: 52vh; overflow-y: auto; }
.choice { display: flex; flex-direction: column; gap: 0.3vh; padding: 1.8vh 2.6vh; border-radius: 1.6vh; text-decoration: none; color: var(--text); background: var(--accent-soft, var(--panel-tint)); border: 1px solid var(--line); }
.choice:hover, .choice:focus { border-color: var(--accent); outline: none; }
.choice-name { font-size: 2.9vh; font-weight: 400; }
.choice-sub { font-size: 1.9vh; font-weight: 300; color: var(--sub); letter-spacing: 0.04em; }

/* ---- Overlays ---- */
#night-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.62); pointer-events: none; }

#fs-prompt {
  position: fixed; left: 3.2vw; bottom: 3vh;
  padding: 1.6vh 3.4vh; font-size: 2.2vh; font-weight: 400; font-family: inherit;
  color: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; cursor: pointer; letter-spacing: 0.04em;
}
#chips { position: fixed; top: 2.4vh; right: 2vw; display: flex; gap: 1vw; }
#chips button {
  padding: 1.2vh 2.6vh; font-size: 2vh; font-weight: 500; font-family: inherit;
  color: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; cursor: pointer;
}

/* Small preview windows (a phone, a dev pane): tuck the clock in a little so
   nothing collides — real TVs never hit this. */
@media (max-height: 420px) {
  #clock { font-size: 15.5vh; }
  #next-value { font-size: 7vh; }
}

/* =====================================================================
   CLASSIC look — the in-app TVDisplayScreen's two-tone poster, ported.
   The prayer side and the events panel sit on CONTRASTING surfaces (deep
   green against warm ivory, inverted in the light theme) over the khatam
   lattice. Every size is the app's pt value on a 700pt short side turned
   into vh (n pt → n/7 vh), so a 32" and an 85" TV both match the tablet.
   Palette = TVDisplayScreen.TV_PALETTES; keep the two in step.
   app.js re-parents a few blocks for this look (see arrange()).
   ===================================================================== */
body[data-style="classic"][data-theme="dark"] {
  --bg: #081C16; --text: #FFFFFF; --sub: rgba(255,255,255,0.72);
  --faint: rgba(255,255,255,0.5); --line: rgba(255,255,255,0.16);
  --accent: #E2B15C; --accent-soft: rgba(226,177,92,0.16); --accent-border: rgba(226,177,92,0.5);
  --star: rgba(255,255,255,0.045); --star-stroke: rgba(255,255,255,0.09);
  --panel-bg: #F4ECDC; --panel-text: #14261F; --panel-sub: rgba(20,38,31,0.68);
  --panel-faint: rgba(20,38,31,0.45); --panel-line: rgba(20,38,31,0.14);
  --panel-accent: #96690D; --panel-card: rgba(20,38,31,0.07);
  --ticker-bg: rgba(226,177,92,0.12);
}
body[data-style="classic"][data-theme="light"] {
  --bg: #F6F0E3; --text: #14261F; --sub: rgba(20,38,31,0.72);
  --faint: rgba(20,38,31,0.5); --line: rgba(20,38,31,0.16);
  --accent: #96690D; --accent-soft: rgba(150,105,13,0.12); --accent-border: rgba(150,105,13,0.45);
  --star: rgba(20,38,31,0.05); --star-stroke: rgba(20,38,31,0.11);
  --panel-bg: #0E2A21; --panel-text: #FFFFFF; --panel-sub: rgba(255,255,255,0.72);
  --panel-faint: rgba(255,255,255,0.5); --panel-line: rgba(255,255,255,0.16);
  --panel-accent: #E2B15C; --panel-card: rgba(255,255,255,0.08);
  --ticker-bg: rgba(150,105,13,0.1);
}

/* Scope every classic rule under .c so the modern sheet above is untouched. */
body[data-style="classic"] #canvas { padding: 2.6vh 5.1vh 0.9vh; }

/* Header: logo · name + two dates · big clock · NEXT ADHAN (right) */
body[data-style="classic"] #header {
  gap: 2.9vh; border-bottom: 1px solid var(--line); padding-bottom: 1.4vh;
}
/* Name side wider than the NEXT side: a mosque name is the longer text. */
body[data-style="classic"] .head-left { flex: 1.5; gap: 2.9vh; }
body[data-style="classic"] #logo { width: 12vh; height: 12vh; border-radius: 1.7vh; margin-right: 0.6vh; }
body[data-style="classic"] .head-id { min-width: 0; }
body[data-style="classic"] #mosque-name { font-size: 4.4vh; font-weight: 500; letter-spacing: 0; text-overflow: clip; }
body[data-style="classic"] .head-dates { text-align: left; }
body[data-style="classic"] .date, body[data-style="classic"] .date.hijri {
  font-size: 2.1vh; font-weight: 400; color: var(--sub); letter-spacing: 0; margin-top: 0.4vh;
}
body[data-style="classic"] #clock-wrap { gap: 1.2vh; line-height: 1; }
body[data-style="classic"] #clock { font-size: 8.9vh; font-weight: 200; letter-spacing: 0.02em; }
body[data-style="classic"] #clock-half { font-size: 2.6vh; font-weight: 300; letter-spacing: 0.06em; }
body[data-style="classic"] #next-block { flex: 1; margin-top: 0; text-align: right; min-width: 0; }
body[data-style="classic"] .next-label {
  font-size: 1.9vh; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase;
}
body[data-style="classic"] #next-value {
  font-size: 4vh; font-weight: 400; margin-top: 0.3vh; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-style="classic"] #next-value .nx-time { color: inherit; font-weight: 400; }
body[data-style="classic"] #next-value .half { font-size: 0.7em; }
body[data-style="classic"] #next-countdown { font-size: 2vh; font-weight: 400; color: var(--faint); margin-top: 0.15vh; letter-spacing: 0; }

/* Body: prayer column | events panel */
body[data-style="classic"] #hero { gap: 3.4vh; margin-top: 0; padding-top: 1.7vh; }
body[data-style="classic"] #hero-left {
  flex: 1.15; justify-content: flex-start; padding-right: 0;
}
body[data-style="classic"] #strip { border-top: none; margin-top: 0; }
body[data-style="classic"] .strip-head { display: none; }
body[data-style="classic"] #prayer-rows { display: flex; flex-direction: column; }
body[data-style="classic"] .trow {
  display: flex; align-items: center;
  padding: 1.6vh 1.7vh; border-radius: 1.4vh; border: 1px solid transparent;
}
body[data-style="classic"] .trow.thead { padding: 0 1.4vh 0.6vh; }
body[data-style="classic"] .thead span { font-size: 2.3vh; font-weight: 500; letter-spacing: 0.06em; color: var(--faint); }
body[data-style="classic"] .trow.next { background: var(--accent-soft); border-color: var(--accent-border); }
body[data-style="classic"] .ticon { width: 7.1vh; flex: none; display: flex; }
body[data-style="classic"] .ticon svg { width: 4.9vh; height: 4.9vh; color: var(--sub); stroke-width: 1.5; }
body[data-style="classic"] .trow.next .ticon svg { color: var(--accent); }
body[data-style="classic"] .tname { flex: 1; min-width: 0; font-size: 4.4vh; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-style="classic"] .thead .tname { padding-left: 0; }
body[data-style="classic"] .tnext { white-space: pre; }
body[data-style="classic"] .trow.next .tname { font-weight: 500; }
body[data-style="classic"] .tadhan, body[data-style="classic"] .tiqamah {
  width: 21.4vh; flex: none; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body[data-style="classic"] .tadhan { font-size: 3.9vh; font-weight: 400; color: var(--sub); }
body[data-style="classic"] .trow.next .tadhan { color: var(--text); font-weight: 500; }
body[data-style="classic"] .tiqamah { margin-left: 4vh; font-size: 4.7vh; font-weight: 500; color: var(--accent); }

/* Jummah lines sit right under the table, left-aligned like the app. */
body[data-style="classic"] #jummah {
  justify-content: start; margin-top: 1.4vh; padding: 1.1vh 1.7vh 0;
  column-gap: 1.2vh; row-gap: 0.6vh;
}
body[data-style="classic"] .jummah-label { font-size: 3.1vh; font-weight: 400; letter-spacing: 0; text-transform: none; }
body[data-style="classic"] .jummah-sub { font-size: 2.7vh; color: var(--faint); }
body[data-style="classic"] .jummah-iqamah { font-size: 3.1vh; font-weight: 500; text-align: left; }

/* Brand: pushed to the bottom of the prayer column, muted. */
body[data-style="classic"] .head-right { flex: none; justify-content: flex-start; margin-top: auto; padding-top: 2.3vh; }
body[data-style="classic"] #brand { gap: 1.4vh; opacity: 0.75; }
body[data-style="classic"] #brand img.mark { width: 6.6vh; height: 6.6vh; }
body[data-style="classic"] #brand img.word { height: 2.1vh; }

/* The contrast panel. */
body[data-style="classic"] #events {
  flex: 1; border-left: none; border-radius: 2.3vh;
  background: var(--panel-bg); color: var(--panel-text);
  padding: 2vh 2.6vh 1.1vh;
}
body[data-style="classic"] .events-label { font-size: 2.1vh; font-weight: 600; letter-spacing: 0.06em; color: var(--panel-faint); margin-bottom: 1.1vh; }
body[data-style="classic"] .event-item {
  background: var(--panel-card); border-radius: 1.1vh; border-bottom: none;
  padding: 1vh 1.7vh; margin-bottom: 1vh;
}
body[data-style="classic"] .event-title { font-size: 3.1vh; font-weight: 500; color: var(--panel-text); }
body[data-style="classic"] .event-when { font-size: 2.6vh; font-weight: 400; color: var(--panel-sub); margin-top: 0.15vh; letter-spacing: 0; }
body[data-style="classic"] .more-events { font-size: 1.9vh; font-weight: 500; color: var(--panel-faint); margin-top: 0.3vh; padding: 0 0.3vh; }
body[data-style="classic"] .events-empty { color: var(--panel-faint); font-size: 2.3vh; font-weight: 400; gap: 1.1vh; }
body[data-style="classic"] .events-empty svg { width: 4.9vh; height: 4.9vh; }
body[data-style="classic"] #page-dots { color: var(--panel-faint); font-size: 1.6vh; text-align: center; letter-spacing: 0.3em; padding: 0.4vh 0; }
body[data-style="classic"] .detail-kicker { font-size: 2.1vh; font-weight: 600; letter-spacing: 0.06em; color: var(--panel-faint); margin-bottom: 1.1vh; }
body[data-style="classic"] .detail-title { font-size: 5.4vh; font-weight: 600; color: var(--panel-text); line-height: 1.1; margin-bottom: 1.7vh; }
body[data-style="classic"] .detail-row { display: flex; align-items: center; gap: 1.4vh; margin-bottom: 1vh; font-size: 3.1vh; font-weight: 400; color: var(--panel-sub); }
body[data-style="classic"] .detail-row svg { width: 2.9vh; height: 2.9vh; flex: none; color: var(--panel-accent); }
body[data-style="classic"] .detail-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-style="classic"] .detail-recur { font-size: 2vh; font-weight: 600; color: var(--panel-accent); margin-top: 0.3vh; letter-spacing: 0; }
body[data-style="classic"] .detail-desc { font-size: 2.7vh; font-weight: 400; color: var(--panel-sub); margin-top: 1.7vh; line-height: 1.3; }

/* Ticker: tinted band, bullhorn badge, accent text. */
body[data-style="classic"] #ticker {
  margin: 0 -5.1vh; padding-left: 5.1vh; background: var(--ticker-bg);
}
#ticker-badge { display: none; }
body[data-style="classic"] #ticker-badge { display: flex; flex: none; margin-right: 2vh; color: var(--accent); }
body[data-style="classic"] #ticker-badge svg { width: 2.4vh; height: 2.4vh; }
body[data-style="classic"] #ticker-text { font-weight: 500; color: var(--accent); letter-spacing: 0; }

/* The brand sits bottom-left in classic; keep the fullscreen hint off it. */
body[data-style="classic"] #fs-prompt { left: 50%; transform: translateX(-50%); }

/* =====================================================================
   PHONE — someone opened the link on a phone (or any portrait screen).
   The board above assumes a wide 16:9 frame and sizes everything in vh;
   on a tall narrow screen that clips and cannot scroll. Here the same DOM
   becomes a scrolling page: header, clock + NEXT, prayer list, Jummah,
   events, with the ticker stuck to the bottom edge. Sizes are rem-based
   (a phone's vh is a poor type unit); the biggest lines clamp against vw.
   Every rule lives inside this one query — TVs and desktops never match
   it, so their rendering is untouched. app.js mirrors the query (PHONE)
   to skip fullscreen + wake lock, which are wall-display concerns.
   ===================================================================== */
@media (orientation: portrait), (max-width: 600px) {
  html, body { height: auto; min-height: 100%; overflow: visible; cursor: auto; }
  html { overflow-x: hidden; }
  #canvas {
    height: auto; min-height: 100vh; min-height: 100dvh;
    padding: 1rem 1.25rem 0;
  }

  /* Header → logo · name (wraps to two lines) · small brand mark; dates under. */
  #header, body[data-style="classic"] #header {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.9rem;
  }
  .head-left, body[data-style="classic"] .head-left { flex: none; gap: 0.75rem; grid-column: 1; grid-row: 1; }
  #logo, body[data-style="classic"] #logo { width: 2.75rem; height: 2.75rem; border-radius: 0.6rem; margin: 0; }
  #mosque-name, body[data-style="classic"] #mosque-name {
    font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.01em; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .head-dates { grid-column: 1 / -1; grid-row: 2; text-align: left; white-space: normal; }
  .date, .date.hijri, body[data-style="classic"] .date, body[data-style="classic"] .date.hijri {
    display: inline; font-size: 0.85rem; letter-spacing: 0.02em; margin: 0;
  }
  .date + .date::before { content: ' · '; color: var(--faint); }
  .head-right { grid-column: 2; grid-row: 1; }
  #brand { gap: 0.4rem; }
  #brand img.mark { width: 2rem; height: 2rem; }
  /* Modern keeps the mark only (theme rules still pick cream/green art). */
  body:not([data-style="classic"]) #brand img.word { display: none; }

  /* The hero row dissolves (display: contents) so its two halves join the
     canvas column and the page can run header → clock + NEXT → prayers →
     Jummah → events → ticker. (Classic already keeps the prayer table
     inside the left half, so the same order falls out.) */
  #hero, body[data-style="classic"] #hero { display: contents; }
  #hero-left, body[data-style="classic"] #hero-left { flex: none; padding: 0; order: 1; }
  #strip { order: 2; }
  #jummah { order: 3; }
  #events { order: 4; }
  #ticker { order: 5; }

  /* Modern: the clock and NEXT block as the page's headline. */
  #clock-wrap { margin-top: 1rem; gap: 0.5rem; }
  #clock { font-size: clamp(3.4rem, 19vw, 6rem); }
  #clock-half { font-size: 1.1rem; }
  #next-block { margin-top: 0.9rem; }
  .next-label { font-size: 0.7rem; letter-spacing: 0.3em; }
  #next-value { font-size: clamp(1.5rem, 7.5vw, 2.4rem); margin-top: 0.2rem; }
  #next-countdown { font-size: 1rem; margin-top: 0.2rem; }

  /* Modern prayer strip: the five columns become five rows —
     icon · name · adhan · iqamah — the next prayer marked by a left bar. */
  #strip { margin-top: 1.25rem; }
  .strip-head { padding: 0.9rem 0 0.4rem; }
  .strip-title { font-size: 0.7rem; letter-spacing: 0.3em; }
  .strip-legend { font-size: 0.75rem; }
  #prayer-rows { display: flex; flex-direction: column; }
  .pcol {
    display: flex; align-items: center; gap: 0.75rem; text-align: left;
    padding: 0.6rem 0.75rem; border: 0; border-radius: 0.6rem;
  }
  .pcol + .pcol { border-left: 0; margin-top: 0.1rem; }
  .pcol.next { background: var(--panel-tint); box-shadow: inset 3px 0 0 var(--accent); }
  .pcol svg { width: 1.4rem; height: 1.4rem; flex: none; }
  .pname { flex: 1; min-width: 0; margin: 0; font-size: 0.95rem; letter-spacing: 0.14em; }
  .padhan { margin: 0; font-size: 1.05rem; min-width: 5rem; text-align: right; }
  .piqamah { margin: 0; font-size: 1.35rem; min-width: 5.6rem; text-align: right; }

  /* Jummah lines: same three-column table, phone type. The label column
     takes what the two times leave and wraps if it must ("Jummah 2"
     beside "khutbah 12:30 PM" is wider than a phone). */
  #jummah, body[data-style="classic"] #jummah {
    margin-top: 0.75rem; padding: 0.9rem 0; column-gap: 0.6rem; row-gap: 0.5rem;
    grid-template-columns: 1fr auto auto; justify-content: stretch;
  }
  .jummah-label, body[data-style="classic"] .jummah-label { font-size: 0.8rem; letter-spacing: 0.04em; white-space: normal; }
  .jummah-sub, body[data-style="classic"] .jummah-sub { font-size: 0.8rem; }
  .jummah-iqamah, body[data-style="classic"] .jummah-iqamah { font-size: 1rem; text-align: right; }

  /* Events: a section under the prayers, not a side panel. The slideshow
     keeps turning; a floor on its height stops the page jumping. */
  #events {
    flex: none; border-left: 0; border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel-tint), transparent 60%);
    margin-top: 1rem; padding: 1rem 0 0.75rem;
  }
  #event-page { flex: none; min-height: 11rem; }
  .events-label, .detail-kicker { font-size: 0.7rem; letter-spacing: 0.3em; margin-bottom: 0.6rem; }
  .event-item { padding: 0.65rem 0; }
  .event-title { font-size: 1.05rem; white-space: normal; }
  .event-when { font-size: 0.85rem; margin-top: 0.15rem; }
  .more-events { font-size: 0.85rem; margin-top: 0.6rem; }
  .events-empty { height: auto; padding: 1.5rem 0; font-size: 0.95rem; gap: 0.6rem; }
  .events-empty svg { width: 2rem; height: 2rem; }
  .detail-title { font-size: 1.6rem; }
  .detail-when { font-size: 1rem; margin-top: 0.6rem; }
  .detail-place { font-size: 0.9rem; margin-top: 0.3rem; }
  .detail-desc { font-size: 0.9rem; margin-top: 0.6rem; }
  .detail-recur { font-size: 0.8rem; margin-top: 0.6rem; }
  #page-dots { font-size: 0.6rem; padding-top: 0.5rem; text-align: center; }

  /* Ticker: stuck to the bottom edge while the page scrolls. Height and
     text size stay the admin's vh values — a portrait phone's vh is about
     the height a TV's is, so they read the same. */
  #ticker, body[data-style="classic"] #ticker {
    position: sticky; bottom: 0; margin: auto -1.25rem 0; padding-left: 0;
    background: var(--bg);
  }
  body[data-style="classic"] #ticker { background: var(--bg); padding-left: 1.25rem; }
  body[data-style="classic"] #ticker::before {
    content: ''; position: absolute; inset: 0; background: var(--ticker-bg); pointer-events: none;
  }
  body[data-style="classic"] #ticker-badge, body[data-style="classic"] #ticker-text { position: relative; }

  /* Chrome: no fullscreen pill (phones can't), small chips. */
  #fs-prompt { display: none !important; }
  #chips { top: 0.75rem; right: 0.75rem; gap: 0.4rem; }
  #chips button { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
  #status-sub { max-width: 85%; font-size: 0.95rem; }
  #status-text { font-size: 1.3rem; }
  #choices { width: 90vw; max-height: 60vh; gap: 0.6rem; }
  .choice { padding: 0.85rem 1rem; border-radius: 0.9rem; }
  .choice-name { font-size: 1.05rem; }
  .choice-sub { font-size: 0.8rem; }

  /* ---- Classic on a phone: the poster stacked. ---- */
  body[data-style="classic"] #canvas { padding: 1rem 1.25rem 0; }
  /* The brand has moved to the prayer column and the dates sit under the
     name, so the identity spans the whole first row. */
  body[data-style="classic"] .head-left { grid-column: 1 / -1; }
  body[data-style="classic"] .head-id { min-width: 0; }
  body[data-style="classic"] .head-dates { margin-top: 0.15rem; }
  /* Clock + NEXT share one row under the identity. */
  body[data-style="classic"] #clock-wrap {
    grid-column: 1; grid-row: 2; margin-top: 0.5rem; gap: 0.4rem; align-self: end;
  }
  body[data-style="classic"] #clock { font-size: clamp(2.6rem, 13vw, 4rem); }
  body[data-style="classic"] #clock-half { font-size: 0.95rem; }
  body[data-style="classic"] #next-block {
    grid-column: 2; grid-row: 2; margin-top: 0.5rem; align-self: end;
  }
  body[data-style="classic"] .next-label { font-size: 0.7rem; }
  body[data-style="classic"] #next-value { font-size: 1.15rem; white-space: normal; }
  body[data-style="classic"] #next-countdown { font-size: 0.85rem; }

  body[data-style="classic"] #strip { margin-top: 0.75rem; }
  body[data-style="classic"] .trow { padding: 0.6rem 0.6rem; border-radius: 0.6rem; }
  body[data-style="classic"] .trow.thead { padding: 0 0.6rem 0.3rem; }
  body[data-style="classic"] .thead span { font-size: 0.7rem; }
  body[data-style="classic"] .ticon { width: 2rem; }
  body[data-style="classic"] .ticon svg { width: 1.3rem; height: 1.3rem; }
  body[data-style="classic"] .tname { font-size: 1.1rem; }
  body[data-style="classic"] .tnext { display: none; } /* the boxed row already says it */
  body[data-style="classic"] .tadhan, body[data-style="classic"] .tiqamah { width: auto; min-width: 4.6rem; }
  body[data-style="classic"] .tadhan { font-size: 1rem; }
  body[data-style="classic"] .tiqamah { margin-left: 0.75rem; font-size: 1.2rem; }

  body[data-style="classic"] .head-right { order: 4; margin-top: 1rem; padding-top: 0; justify-content: center; }
  body[data-style="classic"] #brand img.mark { width: 1.6rem; height: 1.6rem; }
  /* No display: here — it would outrank the theme rule that hides the off-theme copy. */
  body[data-style="classic"] #brand img.word { height: 0.6rem; }

  body[data-style="classic"] #events {
    flex: none; margin-top: 1rem; margin-bottom: 1rem; border-top: 0; border-radius: 0.9rem;
    background: var(--panel-bg); padding: 0.9rem 1rem 0.5rem;
  }
  body[data-style="classic"] .events-label, body[data-style="classic"] .detail-kicker { font-size: 0.75rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
  body[data-style="classic"] .event-item { padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; border-radius: 0.5rem; }
  body[data-style="classic"] .event-title { font-size: 1rem; }
  body[data-style="classic"] .event-when { font-size: 0.85rem; }
  body[data-style="classic"] .more-events { font-size: 0.8rem; }
  body[data-style="classic"] .events-empty { font-size: 0.95rem; }
  body[data-style="classic"] .events-empty svg { width: 2rem; height: 2rem; }
  body[data-style="classic"] .detail-title { font-size: 1.5rem; margin-bottom: 0.6rem; }
  body[data-style="classic"] .detail-row { font-size: 0.95rem; gap: 0.5rem; margin-bottom: 0.35rem; }
  body[data-style="classic"] .detail-row svg { width: 1rem; height: 1rem; }
  body[data-style="classic"] .detail-row span { white-space: normal; }
  body[data-style="classic"] .detail-desc { font-size: 0.9rem; margin-top: 0.6rem; }
  body[data-style="classic"] .detail-recur { font-size: 0.75rem; }
  body[data-style="classic"] #page-dots { font-size: 0.6rem; padding: 0.3rem 0; }
  body[data-style="classic"] #ticker-badge svg { width: 1rem; height: 1rem; }
  body[data-style="classic"] #ticker-badge { margin-right: 0.6rem; }
}