/* Awqōt /clock — 1:1 square display.

   SIZING: every dimension is `calc(N * var(--u))`, where --u is 1/1080 of the shorter viewport side (vmin). N is
   the pixel value from the approved 1080 x 1080 design, so the layout scales to any square screen. Landscape and
   desktop layouts are out of scope.

   TOKENS: the same ones css/styles.css defines for the kiosk (--panel-bg, --text-muted, --divider, --font-display,
   --font-body), derived from the three theme colours. clock-config.js calls theme.js applyTheme(), which rewrites
   --color-primary / --color-secondary / --color-accent at runtime (including the dark Kaabah palette), so nothing
   here is a literal colour. The system colours below are only the pre-theme fallback. */
:root {
  --color-primary: CanvasText;
  --color-secondary: Canvas;
  --color-accent: CanvasText;
  --theme-transition-ms: 400ms;
  --panel-bg: color-mix(in srgb, var(--color-secondary) 92%, var(--color-primary) 8%);
  --text-muted: color-mix(in srgb, var(--color-primary) 75%, var(--color-secondary) 25%);
  --divider: color-mix(in srgb, var(--color-secondary) 80%, var(--color-primary) 20%);
  --font-display: "Amiri", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --u: calc(100vmin / 1080);
  font-family: var(--font-body);
  background: var(--color-secondary);
  color: var(--color-primary);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--color-secondary); }
button { font: inherit; color: inherit; }
h1, p { margin: 0; }
.hidden { display: none !important; }
.clock-app, .clock-app * {
  transition: background-color var(--theme-transition-ms) ease, color var(--theme-transition-ms) ease,
    border-color var(--theme-transition-ms) ease;
}

.clock-app { position: fixed; inset: 0; overflow: hidden; background: var(--color-secondary); touch-action: pan-y; }
.panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(48 * var(--u)) calc(96 * var(--u)) calc(116 * var(--u));
}

/* ---- 1. Analogue: only the clock, ~98vmin ---- */
.panel-analogue { padding: 0; }
.panel-analogue svg { flex: none; width: 98vmin; height: 98vmin; }

/* ---- shared panel language (names match the kiosk's panel in css/styles.css) ---- */
.eyebrow {
  font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: calc(2 * var(--u));
  text-transform: uppercase; color: var(--color-accent);
}
.divider { height: 1px; width: 100%; margin: 0; border: 0; background: var(--divider); }

.weekday {
  align-self: stretch; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  padding: calc(2 * var(--u)) calc(16 * var(--u)); border-radius: calc(5 * var(--u));
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-family: var(--font-display); font-size: calc(44 * var(--u)); font-weight: 700; line-height: 1.3;
  letter-spacing: calc(2 * var(--u)); text-transform: uppercase;
}
.weekday-flank { flex: none; width: calc(54 * var(--u)); height: calc(7 * var(--u)); }
.weekday-flank-left { transform: scaleX(-1); }

.date-row {
  display: flex; align-items: baseline; font-family: var(--font-display); font-size: calc(34 * var(--u));
  font-weight: 700; line-height: 1.1;
}
.date-row .gregorian { color: var(--color-accent); }
.date-row .hijri {
  margin-left: calc(16 * var(--u)); padding-left: calc(16 * var(--u)); border-left: 1px solid var(--divider);
  color: var(--text-muted);
}

.next-prayer {
  display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
  text-align: center; border-radius: calc(5 * var(--u));
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.next-prayer .label {
  font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase;
  color: var(--color-accent);
}
.next-prayer .name { font-family: var(--font-display); font-size: calc(64 * var(--u)); line-height: .95; }
.next-prayer .countdown { font-size: calc(48 * var(--u)); font-variant-numeric: tabular-nums; }

/* ---- 2. Digital ---- */
.digital-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(36 * var(--u)); }
.date-block { width: calc(720 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.digital-time {
  font-family: var(--font-display); font-size: calc(210 * var(--u)); letter-spacing: calc(-6 * var(--u));
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
}
.panel-digital .next-prayer { width: calc(720 * var(--u)); }

/* ---- 3. Prayer times: fills the square, footer pinned to the bottom ---- */
.panel-table { align-items: stretch; justify-content: flex-start; gap: calc(20 * var(--u)); padding-top: calc(48 * var(--u)); }
.timetable { display: flex; flex-direction: column; }
.timetable .row {
  display: flex; justify-content: space-between; align-items: center; padding: calc(13 * var(--u)) calc(16 * var(--u));
  font-size: calc(44 * var(--u));
}
.timetable .prayer-name { color: var(--text-muted); }
.timetable .prayer-time { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Active = the current prayer window (the most recent entry at or before now), not the next prayer. */
.timetable .row.active { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.timetable .row.active .prayer-name, .timetable .row.active .prayer-time { color: var(--color-accent); font-weight: 700; }
.prayer-attribution { margin-top: calc(8 * var(--u)); font-size: calc(16 * var(--u)); color: var(--text-muted); }
.panel-powered-by {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--divider); font-size: calc(15 * var(--u)); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.panel-powered-by-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.panel-powered-by-logo { display: block; height: calc(24 * var(--u)); width: auto; }
.panel-powered-by-link { color: inherit; text-decoration: none; }

/* ---- 4. Settings ---- */
.panel-settings { align-items: stretch; }
.settings-body { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.settings-body h1 {
  margin-top: calc(-16 * var(--u)); font-family: var(--font-display); font-size: calc(72 * var(--u)); font-weight: 700; line-height: 1;
}
.settings-card { display: flex; flex-direction: column; border-radius: calc(5 * var(--u)); background: var(--panel-bg); border: 1px solid var(--divider); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)); }
.setting-row + .setting-row { border-top: 1px solid var(--divider); }
.setting-text { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.setting-title { font-size: calc(30 * var(--u)); font-weight: 600; }
.setting-sub { font-size: calc(20 * var(--u)); color: var(--text-muted); }
.segmented {
  display: flex; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(5 * var(--u));
  background: var(--color-secondary); border: 1px solid var(--divider);
}
.segmented button {
  min-width: calc(88 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border: 0; border-radius: calc(3 * var(--u));
  font-size: calc(22 * var(--u)); font-weight: 600; cursor: pointer; background: transparent; color: var(--text-muted);
}
.segmented button[aria-checked="true"] { background: var(--color-primary); color: var(--color-secondary); }
.pill-button {
  display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(24 * var(--u));
  border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-secondary);
  font-size: calc(20 * var(--u)); font-weight: 600; cursor: pointer;
}
.pill-button svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.settings-hint { font-size: calc(20 * var(--u)); line-height: 1.5; color: var(--text-muted); }

/* ---- 5. Notifications: empty state ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); text-align: center; }
.empty-icon {
  display: flex; align-items: center; justify-content: center; width: calc(120 * var(--u)); height: calc(120 * var(--u));
  border-radius: 999px; color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.empty-icon svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.empty-state .eyebrow { margin-top: calc(10 * var(--u)); }
.empty-state h1 { font-family: var(--font-display); font-size: calc(60 * var(--u)); font-weight: 700; line-height: 1; }
.empty-state p { max-width: calc(620 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.5; color: var(--text-muted); }

/* ---- page dots: house (analogue) first, active = 28x10 accent pill, inactive = 10px divider circle.
        Swipe / arrow keys navigate; there are no home or previous/next buttons. Hidden on the analogue panel. ---- */
.controls {
  position: absolute; z-index: 4; left: 50%; bottom: calc(48 * var(--u)); transform: translateX(-50%);
  transition: opacity .3s ease;
}
.clock-app[data-panel="analogue"] .controls { display: none; }
.dots { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.dot {
  display: flex; align-items: center; justify-content: center; width: calc(30 * var(--u)); height: calc(44 * var(--u));
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.dot::before { content: ""; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 999px; background: var(--divider); }
.dot.active { width: calc(44 * var(--u)); }
.dot.active::before { width: calc(28 * var(--u)); background: var(--color-accent); }
.dot-home { width: calc(44 * var(--u)); border-radius: 999px; color: var(--text-muted); }
.dot-home::before { content: none; }
.dot-home svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.controls-hidden .controls { opacity: 0; pointer-events: none; }
.cursor-hidden, .cursor-hidden * { cursor: none !important; }

/* ---- status banners (kept inside the inscribed circle) ---- */
.error-status, .sync-status {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(5 * var(--u)); background: var(--panel-bg); border: 1px solid var(--divider); color: var(--text-muted);
  font-size: calc(20 * var(--u)); text-align: center;
}
.sync-status { top: calc(48 * var(--u)); }
.error-status { bottom: calc(120 * var(--u)); color: var(--color-primary); border-color: var(--color-accent); }
/* Prayer Override Card: the kiosk's .prayer-override-card look (panel-bg fill, Amiri 700 name in the ink colour, accent
   tabular-nums time, 0.9 s opacity fade; clock-override.js sets the fade state), covering the whole square above every
   panel and the dot row. Sized for the square: name ~18vmin, time ~9vmin. */
.prayer-override-card {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: calc(16 * var(--u)); background: var(--panel-bg);
  opacity: 0; pointer-events: none; transition: opacity .9s ease;
}
.prayer-override-card.is-visible { opacity: 1; pointer-events: auto; }
.prayer-override-card-name, .prayer-override-card-time { font-family: var(--font-display); line-height: 1; text-align: center; }
.prayer-override-card-name { font-size: 18vmin; font-weight: 700; color: var(--color-primary); }
.prayer-override-card-time { font-size: 9vmin; font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ---- "Mosque not found": the host name matched no active mosque. Full surface, centred, default theme. ---- */
.not-found-screen {
  position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(28 * var(--u)); padding: calc(96 * var(--u)); text-align: center; background: var(--color-secondary);
}
.not-found-screen h1 { font-family: var(--font-display); font-size: calc(72 * var(--u)); font-weight: 700; line-height: 1; }
.not-found-screen p { max-width: calc(720 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.5; color: var(--text-muted); }
a.pill-button { text-decoration: none; }
.clock-app[data-state="not-found"] .panel, .clock-app[data-state="not-found"] .controls { display: none; }

/* ---- Cold boot: until the first server-sourced time arrives, only the textmark and a muted line. Above everything
        (dots, banners, the override card, "Mosque not found"); inside #clockApp, so it rotates with the layout. The
        0.9 s fade matches the override card's. ---- */
.boot-screen {
  position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(28 * var(--u)); background: var(--color-secondary); opacity: 1; transition: opacity .9s ease;
}
.boot-screen.is-leaving { opacity: 0; }
.boot-mark { display: block; width: calc(302 * var(--u)); height: auto; } /* about 28% of the square's width */
.boot-status { font-size: calc(22 * var(--u)); color: var(--text-muted); }

/* ---- rotation override (?rotate= / Settings): swap the axes, then rotate the whole layout ---- */
.clock-app[data-rotation="90"] { inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
.clock-app[data-rotation="270"] { inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(270deg); }