/* ═══════════════════════════════════════════════════════════════════
   MyAthan / MuslimHub — TV prayer display stylesheet
   Shared by MyAthan.WASM and MyAthan.Offline (and the Kiosk, which
   bundles the Offline app). Served from the MyAthan.Display.Shared RCL:
   _content/MyAthan.Display.Shared/display.css

   Tokens are derived 1:1 from design/styles/app.css (the mobile design
   system). The oklch values there are pre-converted to hex so the CSS
   also renders on older smart-TV/embedded Chromium engines; each hex
   carries its source token in a comment. One green accent, no second
   hue — same rule as the app.

   Scope: everything hangs off .display-shell, the class each display
   page puts on its outermost element. Admin pages and MudBlazor chrome
   outside the shell are untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── self-hosted type — IBM Plex Sans Arabic (Latin subset only) ──────
   Latin/digits come from the self-hosted IBM Plex Latin subsets (tabular
   figures, no CDN for the Offline PWA). Arabic script deliberately does
   NOT use IBM Plex (owner preference, 2026-08-30): the Arabic subsets were
   removed, so Arabic glyphs fall through to the Roboto / Helvetica / Arial
   stack that the old display used. Kiosks ship only Arial (installer purges
   DejaVu), so on a kiosk Arabic renders in Arial's Arabic — same as before
   the redesign. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ── theme palettes ─────────────────────────────────────────────────
   One block per theme × mode (spec §5.2). A theme changes colour ONLY.
   Contrast pre-verified: --fg ≥ 7:1 on --bg, --muted ≥ 4.5:1. */
.display-shell.theme-masjid-green {
  --bg:#F4F7F5; --hdr:#0F4423; --acc:#177532; --band:#DCEBE1; --band-lbl:#3F6B4E;
  --band-fg:#0F4423; --card:#ffffff; --fg:#16211A; --sub:#3A473F; --muted:#67736B;
  --rule:#CFDBD3; --ft:#E7EDE9; --hdr-sub:#A9CDB5; --bloom:rgba(106,192,118,.30);
}
.display-shell.theme-masjid-green.night {
  --bg:#0E1510; --hdr:#0B2E1B; --acc:#6AC076; --band:rgba(23,117,50,.15); --band-lbl:#8FB89B;
  --band-fg:#DDEBE1; --card:#18201B; --fg:#EDF1EE; --sub:#A9BCAF; --muted:#7C8C82;
  --rule:#2A3D31; --ft:#131A15; --hdr-sub:#8FB89B; --bloom:rgba(106,192,118,.16);
}
.display-shell.theme-ivory-navy {
  --bg:#F7F6F2; --hdr:#16305C; --acc:#1E4B8F; --band:#DCE4F2; --band-lbl:#42618F;
  --band-fg:#16305C; --card:#ffffff; --fg:#1A1F2A; --sub:#3B4453; --muted:#687080;
  --rule:#D2D7E0; --ft:#EAECF1; --hdr-sub:#AFC0DE; --bloom:rgba(127,168,232,.28);
}
.display-shell.theme-ivory-navy.night {
  --bg:#0D111A; --hdr:#101C33; --acc:#7FA8E8; --band:rgba(30,75,143,.20); --band-lbl:#93A8C9;
  --band-fg:#DDE6F5; --card:#171E2B; --fg:#EDF0F5; --sub:#A9B4C6; --muted:#7C8698;
  --rule:#283243; --ft:#111722; --hdr-sub:#93A8C9; --bloom:rgba(127,168,232,.15);
}
.display-shell.theme-sand-umber {
  --bg:#FAF7F1; --hdr:#4A3722; --acc:#8A6236; --band:#EDE2D2; --band-lbl:#7A6144;
  --band-fg:#4A3722; --card:#ffffff; --fg:#241C12; --sub:#463829; --muted:#7A6D5C;
  --rule:#DED3C1; --ft:#EFEAE1; --hdr-sub:#D5C3A8; --bloom:rgba(201,165,117,.30);
}
.display-shell.theme-sand-umber.night {
  --bg:#14100B; --hdr:#2A2015; --acc:#C9A575; --band:rgba(138,98,54,.22); --band-lbl:#B4A088;
  --band-fg:#F0E6D8; --card:#1F1913; --fg:#F2EDE5; --sub:#C0B3A1; --muted:#8B8071;
  --rule:#3A3025; --ft:#181309; --hdr-sub:#B4A088; --bloom:rgba(201,165,117,.15);
}
.display-shell.theme-slate-teal {
  --bg:#F4F6F7; --hdr:#163A40; --acc:#16706E; --band:#D6E7E7; --band-lbl:#3E6C6E;
  --band-fg:#163A40; --card:#ffffff; --fg:#131C1E; --sub:#334042; --muted:#647375;
  --rule:#CBD8D9; --ft:#E7ECED; --hdr-sub:#A5C8C7; --bloom:rgba(94,196,190,.28);
}
.display-shell.theme-slate-teal.night {
  --bg:#0B1315; --hdr:#10282B; --acc:#5EC4BE; --band:rgba(22,112,110,.20); --band-lbl:#8FB0B0;
  --band-fg:#DCEDEC; --card:#162124; --fg:#E9F0F1; --sub:#A6B7B8; --muted:#78898A;
  --rule:#25373A; --ft:#0E181A; --hdr-sub:#8FB0B0; --bloom:rgba(94,196,190,.15);
}
.display-shell.theme-maroon-cream {
  --bg:#FAF6F5; --hdr:#4E1A21; --acc:#8C2733; --band:#F0DDDE; --band-lbl:#7C4E53;
  --band-fg:#4E1A21; --card:#ffffff; --fg:#221618; --sub:#443033; --muted:#7B6669;
  --rule:#E0CFD0; --ft:#EFE8E7; --hdr-sub:#D9B3B7; --bloom:rgba(217,138,147,.26);
}
.display-shell.theme-maroon-cream.night {
  --bg:#150C0E; --hdr:#2C1418; --acc:#D98A93; --band:rgba(140,39,51,.22); --band-lbl:#BC9599;
  --band-fg:#F5E4E6; --card:#201517; --fg:#F3EAEB; --sub:#C4B0B2; --muted:#8B7679;
  --rule:#3A2529; --ft:#190F11; --hdr-sub:#BC9599; --bloom:rgba(217,138,147,.15);
}
/* Brass lamp on cut stone — the only neutral-hued theme; the accent is the
   metal, so the display reads as fixtures rather than colour. */
.display-shell.theme-charcoal-brass {
  --bg:#F6F5F3; --hdr:#2B2E33; --acc:#8A6B22; --band:#EDE7D9; --band-lbl:#6B5730;
  --band-fg:#2B2E33; --card:#ffffff; --fg:#1C1E22; --sub:#3C4046; --muted:#6B7077;
  --rule:#D6D5D1; --ft:#EBEAE7; --hdr-sub:#C8B98E; --bloom:rgba(212,181,106,.26);
}
.display-shell.theme-charcoal-brass.night {
  --bg:#0F1113; --hdr:#1C1F23; --acc:#D4B56A; --band:rgba(138,107,34,.20); --band-lbl:#B0A88F;
  --band-fg:#EFEAE0; --card:#191C1F; --fg:#EFF0F1; --sub:#B3B7BC; --muted:#848A91;
  --rule:#2C3136; --ft:#121517; --hdr-sub:#B0A88F; --bloom:rgba(212,181,106,.15);
}
.display-shell.theme-plum-ivory {
  --bg:#F9F6F8; --hdr:#3D1F46; --acc:#6E3480; --band:#E9DCEE; --band-lbl:#674A73;
  --band-fg:#3D1F46; --card:#ffffff; --fg:#1F1622; --sub:#3F3145; --muted:#6E6175;
  --rule:#DCD0E0; --ft:#EFE9F1; --hdr-sub:#C9A9D6; --bloom:rgba(190,140,208,.28);
}
.display-shell.theme-plum-ivory.night {
  --bg:#120C15; --hdr:#251530; --acc:#BE8CD0; --band:rgba(110,52,128,.22); --band-lbl:#AE94B8;
  --band-fg:#F0E4F4; --card:#1C1420; --fg:#F1EAF3; --sub:#BCAFC2; --muted:#8D8092;
  --rule:#33253A; --ft:#150F18; --hdr-sub:#AE94B8; --bloom:rgba(190,140,208,.15);
}
/* Night sky over lantern light — the one theme whose accent is warm while the
   header stays cold, so the highlighted row reads as a lit lamp. The header is
   near-black midnight, not navy: value is what separates it from ivory-navy,
   and the ember accent is what separates it from charcoal-brass's gold. */
.display-shell.theme-midnight-amber {
  --bg:#F6F6F8; --hdr:#0B0F26; --acc:#A8480C; --band:#F5E0CE; --band-lbl:#7A5334;
  --band-fg:#0B0F26; --card:#ffffff; --fg:#161720; --sub:#383B4A; --muted:#63677A;
  --rule:#D5D6DE; --ft:#EAEAF0; --hdr-sub:#A9AECF; --bloom:rgba(240,154,74,.26);
}
.display-shell.theme-midnight-amber.night {
  --bg:#08090F; --hdr:#10132C; --acc:#F09A4A; --band:rgba(168,72,12,.24); --band-lbl:#B4A08C;
  --band-fg:#F7E7D6; --card:#14161F; --fg:#EFEFF4; --sub:#ADAFBE; --muted:#83869B;
  --rule:#24273A; --ft:#0C0D16; --hdr-sub:#B4A08C; --bloom:rgba(240,154,74,.15);
}
.display-shell.theme-olive-sage {
  --bg:#F7F7F0; --hdr:#3B4222; --acc:#5A6A23; --band:#E4E8D2; --band-lbl:#59643C;
  --band-fg:#3B4222; --card:#ffffff; --fg:#1D2013; --sub:#3D432C; --muted:#6B715D;
  --rule:#D8DCC7; --ft:#ECEEE1; --hdr-sub:#BFCE96; --bloom:rgba(168,190,104,.28);
}
.display-shell.theme-olive-sage.night {
  --bg:#10120A; --hdr:#212713; --acc:#A8BE68; --band:rgba(90,106,35,.22); --band-lbl:#A4AE87;
  --band-fg:#E9EEDA; --card:#1A1D12; --fg:#EFF1E7; --sub:#B4BAA4; --muted:#89917A;
  --rule:#2E3320; --ft:#131610; --hdr-sub:#A4AE87; --bloom:rgba(168,190,104,.15);
}
/* Damask rose — the one warm-pink palette, and the only hue family the other
   nine leave untouched. Kept vivid and light where maroon-cream is dark and
   deep, so the two reds separate on value as well as hue. */
.display-shell.theme-damask-rose {
  --bg:#FCF6F8; --hdr:#9C1F5C; --acc:#A82463; --band:#F7DDE9; --band-lbl:#7C4460;
  --band-fg:#9C1F5C; --card:#ffffff; --fg:#201520; --sub:#453142; --muted:#746070;
  --rule:#E6D2DC; --ft:#F2E7EC; --hdr-sub:#F0B8D2; --bloom:rgba(240,140,190,.28);
}
.display-shell.theme-damask-rose.night {
  --bg:#140A10; --hdr:#480A35; --acc:#FF6FC4; --band:rgba(168,36,99,.24); --band-lbl:#C68FB2;
  --band-fg:#F8E2EC; --card:#201420; --fg:#F4EAF0; --sub:#C6B0BC; --muted:#90788A;
  --rule:#3A2434; --ft:#180C14; --hdr-sub:#C68FB2; --bloom:rgba(255,111,196,.16);
}

/* ── mode-derived tokens (shared across themes) ─────────────────── */
.display-shell {           /* day */
  --hi-bg:var(--acc); --hi-fg:#ffffff;
  --pill-wait-bg:rgba(255,255,255,.16); --pill-wait-fg:#ffffff;
  --pill-active-bg:#ffffff; --pill-active-fg:var(--hdr);
  --track:rgba(255,255,255,.18);
  --hero-fg:#ffffff; --hero-sub:var(--hdr-sub);
}
.display-shell.night {
  --hi-bg:var(--band); --hi-fg:var(--acc);
  --pill-wait-bg:rgba(255,255,255,.10); --pill-wait-fg:var(--fg);
  --pill-active-bg:var(--acc); --pill-active-fg:var(--bg);
  --track:rgba(255,255,255,.12);
  --hero-fg:var(--fg); --hero-sub:var(--band-lbl);
}

/* ── base + type scale (spec §4.2) ──────────────────────────────── */
.display-shell {
  --u: 1vh;               /* fallback */
  --u: 1dvh;
  --ts: var(--text-scale, 1);

  --fs-clock:        calc(var(--u) * 3.9 * var(--ts) * var(--nudge-time, 1));
  --fs-title:        calc(var(--u) * 3.2 * var(--ts) * var(--nudge-title, 1));
  --fs-date:         calc(var(--u) * 2.1 * var(--ts) * var(--nudge-month, 1));
  --fs-hero-name:    calc(var(--u) * 3.9 * var(--ts));
  --fs-hero-count:   calc(var(--u) * 3.2 * var(--ts));
  --fs-pill:         calc(var(--u) * 1.7 * var(--ts));
  --fs-th:           calc(var(--u) * 1.55 * var(--ts));
  /* --w-announcements folded into the font: with the announcement region now
     taking the layout slack (see .display-stack), the admin's announcement
     weight no longer buys *space* via the pager budget, so it scales the type
     directly instead. */
  --fs-ann-primary:  calc(var(--u) * 2.2 * var(--ts) * var(--w-announcements, 1));
  --fs-ann-secondary:calc(var(--u) * 1.9 * var(--ts) * var(--w-announcements, 1));
  --fs-poweredby:    calc(var(--u) * 1.25);
  --row-min:         calc(var(--u) * 4.56);
  --row-max:         calc(var(--u) * 6.56);
  --ann-gap:         calc(var(--u) * 1.04);

  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display-shell {
  --font-body: 'IBM Plex Sans Arabic', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua',
                  Charter, Georgia, 'IBM Plex Sans Arabic',
                  Roboto, 'Helvetica Neue', Helvetica, Arial, serif;
}
.display-shell.arabic-first {
  --font-display: 'IBM Plex Sans Arabic', Roboto, 'Helvetica Neue', Helvetica, Arial,
                  'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}
.custom-arabic {
  font-family: 'IBM Plex Sans Arabic', Roboto, 'Helvetica Neue', Helvetica, Arial,
               system-ui, 'Segoe UI', 'Geeza Pro', 'Traditional Arabic', sans-serif;
}
.display-shell,
.display-shell .PrayerTable,
.display-shell .hero-panel {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── frame: content decides height, table absorbs slack (spec §4.1) ── */
.display-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.display-shell.horizontal {
  grid-template-columns: minmax(0, 5fr) minmax(0, var(--col-media, 7fr));
}
.display-stack {
  display: grid;
  min-height: 0; min-width: 0;
  /* Announcements, not prayers, is the flexible region: prayer rows sit at a
     fixed compact height and the hadith/announcement block centers itself in
     the remaining space (product decision 2026-08-23). Screens without
     announcements fall back to the stretched table via .no-announcements. */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.display-shell.no-announcements .display-stack {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.display-region { min-height: 0; min-width: 0; }   /* NO overflow:hidden */

/* ── masthead: the solid header block ───────────────────────────── */
.region-masthead {
  background: var(--hdr);
  color: #fff;
  text-align: center;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 1.6) calc(var(--u) * 1.4);
  position: relative;
  overflow: hidden;          /* clips only the bloom, content sizes the box */
}
.display-shell.night .region-masthead { border-bottom: 1px solid var(--rule); }
.region-masthead::after {
  content: '';
  position: absolute; inset: -40% -10% auto auto;
  width: calc(var(--u) * 23); height: calc(var(--u) * 23);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bloom) 0%, transparent 68%);
  pointer-events: none;
}
.region-masthead > * { position: relative; z-index: 1; }
.region-masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: #fff;
}
.display-shell .t-time {
  font-size: var(--fs-clock);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-top: calc(var(--u) * 0.7);
}
.display-shell .t-month { font-size: var(--fs-date); color: var(--hdr-sub); }
.region-masthead .mud-icon-button { color: var(--hdr-sub); }

/* ── hero (Task 7 renders these classes) ────────────────────────── */
.region-hero { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6) 0; }
.hero-panel {
  background: var(--hdr);
  border-radius: calc(var(--u) * 0.73);
  padding: calc(var(--u) * 1.15) calc(var(--u) * 1.5);
  position: relative;
  overflow: hidden;
  color: var(--hero-fg);
}
.display-shell.night .hero-panel {
  background: var(--band);
  border: 1px solid var(--rule);
}
.hero-panel::after {
  content: '';
  position: absolute; inset: -55% -15% auto auto;
  width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bloom) 0%, transparent 68%);
  pointer-events: none;
}
.display-shell.night .hero-panel::after { content: none; }
.hero-panel > * { position: relative; z-index: 1; }
.hero-row { display: flex; align-items: center; gap: calc(var(--u) * 1.15); }
.hero-pill {
  background: var(--pill-wait-bg);
  color: var(--pill-wait-fg);
  font-size: var(--fs-pill);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: calc(var(--u) * 0.47) calc(var(--u) * 1.15);
  border-radius: 999px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.hero-pill--active { background: var(--pill-active-bg); color: var(--pill-active-fg); }
.hero-name {
  font-family: var(--font-display);
  font-size: var(--fs-hero-name);
  line-height: 1.05;
}
.hero-count {
  margin-inline-start: auto;
  font-size: var(--fs-hero-count);
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
}
.hero-count--urgent { font-size: var(--fs-hero-name); font-weight: 700; }
.hero-progress {
  margin-top: calc(var(--u) * 0.68);
  height: calc(var(--u) * 0.36);
  border-radius: calc(var(--u) * 0.18);
  background: var(--track);
  overflow: hidden;
}
.hero-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--acc);
}
.display-shell.night .hero-progress-fill { background: var(--acc); }

/* ── prayer table: rows stretch to fill the 1fr region ──────────── */
.region-prayers {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.15) 0;
  display: flex; flex-direction: column;
}
.display-shell .mud-table,
.display-shell .mud-simple-table,
.display-shell .mud-table-container {
  background-color: transparent !important;
  color: var(--fg) !important;
}
.mud-main-content { padding: 0 !important; }
.display-shell tr:nth-child(odd),
.display-shell tr:nth-child(even) { background-color: transparent; }
.display-shell .PrayerTable { box-shadow: none; flex: 1; display: flex; flex-direction: column; }
.display-shell .PrayerTable .mud-table-container {
  overflow: visible !important;
  flex: 1; display: flex; flex-direction: column;
}
.display-shell .PrayerTable table {
  width: 100%;
  /* separate (not collapse): border-radius on cells is ignored under
     border-collapse: collapse, and the highlight row needs rounded ends.
     Visually identical here — cells only draw bottom borders. */
  display: table; border-collapse: separate; border-spacing: 0;
}
/* No announcements → the table is the slack absorber again (stretched rows). */
.display-shell.no-announcements .PrayerTable table { flex: 1; height: 100%; }
.display-shell thead th {
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-th) !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--rule);
  padding: 0 calc(var(--u) * 0.8) calc(var(--u) * 0.3) !important;
}
.display-shell .PrayerTable td,
.display-shell .PrayerTable th {
  /* Auto-fit against the row count, bounded by the row band, then scaled by
     the global text scale and the admin's prayer weight (FontSizePrayer %).
     The scale factors multiply the floor and ceiling as well as the preferred
     value: with ~7 rows the preferred size (~6vh) always exceeds the ceiling
     (~2.8vh), so a ceiling that did not scale silently pinned every display
     to the same size and "Prayer rows %" had no effect (owner report,
     2026-09-01). The line box still wins over the fixed row height below, so
     a large weight grows the rows into the flexible announcement region
     rather than clipping. Fallback 1 guards paths where
     DisplayLayout.ShellStyle omits the variable. */
  font-size: clamp(calc(var(--row-min) * 0.42 * var(--ts) * var(--w-prayers, 1)),
                   calc((100vh * 0.42 / var(--prayer-rows, 8)) * var(--ts) * var(--w-prayers, 1)),
                   calc(var(--row-max) * 0.42 * var(--ts) * var(--w-prayers, 1)));
  font-weight: 500;
  line-height: 1.25 !important;
  /* Compact fixed row height (cell height = min-height in table layout); the
     line box still wins if an admin pushes the prayer font past it. Rows only
     stretch beyond this when .no-announcements re-enables table stretching. */
  height: calc(var(--u) * 5.5);
  padding: calc(var(--u) * 0.15) calc(var(--u) * 0.8) !important;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body) !important;
}
.display-shell .PrayerTable .small,
.display-shell .PrayerTable sup,
.display-shell .PrayerTable sub { font-size: 0.48em; color: var(--muted); }

/* current prayer */
.display-shell .highlightPrayer,
.display-shell tr.highlightPrayer > th,
.display-shell tr.highlightPrayer > td {
  background-color: var(--hi-bg) !important;
  color: var(--hi-fg) !important;
}
/* rounded ends on the highlight band; logical corners follow [dir="rtl"].
   Bare child selectors, not th/td: PrayerDisplay.razor renders every cell
   (name and times alike) as <th>. */
.display-shell tr.highlightPrayer > :first-child {
  border-start-start-radius: calc(var(--u) * 0.6);
  border-end-start-radius: calc(var(--u) * 0.6);
}
.display-shell tr.highlightPrayer > :last-child {
  border-start-end-radius: calc(var(--u) * 0.6);
  border-end-end-radius: calc(var(--u) * 0.6);
}
.display-shell.night tr.highlightPrayer > th:first-child {
  box-shadow: inset 3px 0 0 var(--acc);
}
[dir="rtl"] .display-shell.night tr.highlightPrayer > th:first-child,
.display-shell.night [dir="rtl"] tr.highlightPrayer > th:first-child {
  box-shadow: inset -3px 0 0 var(--acc);
}
/* Rows whose prayer has passed keep the normal colour and weight (owner
   request, 2026-09-01 — the dimmed look read as "faint"). The pastPrayer
   class stays on the row as a state hook but is intentionally unstyled. */
.display-shell .specialPrayer,
.display-shell tr.specialPrayer > th { color: var(--acc); }

/* ── announcements (Task 7/8 render these classes) ──────────────── */
.region-announcements {
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6) 0;
  /* The region owns the layout slack (see .display-stack); the block centers
     in it and grows toward the table/footer as the text gets longer. */
  display: flex; flex-direction: column; justify-content: center;
}
.ann-block { border-top: 2px solid var(--rule); padding-top: calc(var(--u) * 0.73); }
.ann-item + .ann-item {
  margin-top: var(--ann-gap);
  padding-top: var(--ann-gap);
  border-top: 1px solid var(--rule);
}
.ann-item { font-size: calc(var(--fs-ann-primary) * var(--ann-scale, 1)); }
.ann-heading { font-weight: 700; color: var(--band-fg); line-height: 1.26; }
.ann-body {
  font-size: calc(var(--fs-ann-secondary) * var(--ann-scale, 1));
  color: var(--sub); line-height: 1.32;
  margin-top: calc(var(--u) * 0.3);
}
.ann-plain { line-height: 1.26; color: var(--fg); }
.ann-pair-primary { line-height: 1.55; color: var(--fg); }
.ann-pair-primary[dir="rtl"] { text-align: right; }
.ann-pair-divider { height: 1px; background: var(--rule); margin: calc(var(--u) * 0.55) 0; }
.ann-pair-secondary {
  font-size: calc(var(--fs-ann-secondary) * var(--ann-scale, 1));
  color: var(--sub); line-height: 1.4;
}
.ann-dots { margin-top: calc(var(--u) * 0.6); display: flex; gap: calc(var(--u) * 0.28); }
.ann-dot {
  width: calc(var(--u) * 0.44); height: calc(var(--u) * 0.44);
  border-radius: 999px; background: var(--rule);
}
.ann-dot--active { width: calc(var(--u) * 0.83); background: var(--acc); }
.ann-measure {
  /* In normal flow (not positioned) so it inherits the real announcement-region
     width for shrink-to-fit measurement (Critical 2, review round 1) — an
     absolutely-positioned block with no positioned ancestor resolves against the
     initial containing block (full viewport width) instead, which measures pages
     as if they were much wider than they render and over-packs them. height:0 +
     overflow:hidden keeps it from taking up space or painting.

     This element also carries .ann-block (class="ann-block ann-measure" in
     AnnouncementsPager.razor), which sets border-top: 2px and padding-top:
     0.73u (display.css:384). height:0 only zeroes the content box — border
     and padding still add to the border-box height (~10px at 1080p) between
     the countdown banner and the visible page, invisible to the JS budget
     calc (announcementPager.js measures masthead/hero/footer/countdown only)
     and capable of causing a page that just fits to spill (round-2 review,
     Important 1). padding:0/border:0 here override .ann-block's for this
     element so the border box collapses to exactly 0. No margin is set on
     either .ann-block or .ann-measure, so none needs zeroing. */
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.display-shell .countdown-banner { color: var(--acc); font-weight: 700; font-size: var(--fs-ann-primary); }
.display-shell .Annoucement td,
.display-shell .Annoucement th {
  font-size: var(--fs-ann-primary) !important;
  line-height: 1.4 !important; height: auto;
  padding: 0 !important; border: 0;
  color: var(--fg);
  font-family: var(--font-body) !important;
  background: transparent !important;
}

/* ── footer ─────────────────────────────────────────────────────── */
.region-footer {
  background: var(--ft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1vmin;
  padding: calc(var(--u) * 0.73) calc(var(--u) * 1.6);
}
.region-footer img { height: calc(var(--u) * 3.3); width: auto; }
.display-shell .PoweredBy {
  font-size: var(--fs-poweredby) !important;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.display-shell .PoweredBy a { color: var(--acc); }
/* Footer groups: QR + optional action (FooterAction — the Offline app's update button,
   kept away from the bottom-right corner where the fixed version stamp lives; owner
   report 2026-09-03) on the left, optional status badge (FooterBadge) + logo on the right. */
.display-shell .footer-left,
.display-shell .footer-right { display: flex; align-items: center; gap: calc(var(--u) * 1.1); }
/* The Offline app's online/offline and update pills, sized like the footer logos
   (--u units) instead of the old fixed px overlays that covered the QR on TVs. */
.display-shell .footer-status {
  display: inline-flex; align-items: center;
  gap: calc(var(--u) * 0.45);
  font-size: var(--fs-poweredby);
}
.display-shell .footer-status .mud-icon-root {
  /* SVGs size by width/height, not font-size (auto would fall back to the
     300x150 intrinsic default and inflate the pill). */
  width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7);
}
/* Online/offline: coloured text, not a pill — a filled pill read as a button and
   got clicked (owner report 2026-09-03). */
.display-shell .footer-status.online { color: #43a047; }
.display-shell .footer-status.offline { color: #fb8c00; }
/* Update: the one thing here that IS a button, so it alone is a filled pill. The old
   banner read as a group whose "Update now" half alone was clickable (same report). */
.display-shell button.footer-status.update {
  background: #2196f3; color: #fff; border: 0; cursor: pointer;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.45);
  font: inherit; font-size: var(--fs-poweredby);
}
.display-shell.night img { opacity: 0.72; }

/* ── media column (horizontal) ──────────────────────────────────── */
.display-media {
  min-width: 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.display-media img { width: 100%; height: 100%; object-fit: contain; }

/* ── Blackout screen: Friday (Jumu'ah) + daily iqama (owner request, 2026-09-04) ── */
/* Rendered inside .display-shell, so it inherits --u and the font stacks and
   scales with the screen. Above the athan/iqama overlays (z-index 9999). */
.blackout-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 4);
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-body);
}
.blackout-title {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 6);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.015em;
  text-wrap: balance;
}
.blackout-clock {
  font-size: calc(var(--u) * 12);
  font-weight: 300; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.blackout-message {
  font-size: calc(var(--u) * 3.2);
  opacity: .85;
  text-wrap: balance;
}