/* Base for this page: fonts, reset and headings. The page no longer borrows the portfolio's stylesheet. */
:root {
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --paper: #E7EDF0; --surface: #F5F8F9; --ink: #0B2A33; --muted: #48626C; --line: #BFCCD2; --risk: #BE1E5A; --clear: #0B7F69;
}
/* Petrol, the default look; the other palettes below override these */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #07212A; --surface: #0D2E38; --ink: #E3EDEF; --muted: #9BB3BA; --line: #235058; --risk: #FF7AA5; --clear: #55D3B7; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #07212A; --surface: #0D2E38; --ink: #E3EDEF; --muted: #9BB3BA; --line: #235058; --risk: #FF7AA5; --clear: #55D3B7; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h2 { font: 650 clamp(2rem, 4.6vw, 3.5rem)/1.02 var(--display); font-stretch: 82%; letter-spacing: -.02em; text-wrap: balance; max-width: 20ch; }
h3 { font: 600 1.3rem/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; }
section { padding-block: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--line); }

/* Iqama Times: tokens, type and buttons come from ../style.css; this file is only the page's own layout.
   Layout: a one-screen app. Tabs sit in a side rail on desktop and a bottom bar on phones; only a tab's own content scrolls. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { overflow: hidden; }

/* Weather backdrop: a tint fading into the page plus the canvas drawn by sky.js.
   Light-theme sky colours stay light and dark-theme ones stay dark, so muted text keeps AA contrast on them. */
:root {
  --sky-l: #E7EDF0; --sky-d: #07212A; --sky-base: var(--sky-l); --night: #D6D9EA;
  --sky-rain: 11,42,51,.22; --sky-flake: 80,110,130,.45; --sky-cloud: 255,255,255,.7; --sky-star: 70,80,140,.5; --sky-sun: 255,205,110,.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-base: var(--sky-d); --night: #0B1430;
    --sky-rain: 200,225,235,.2; --sky-flake: 235,242,245,.55; --sky-cloud: 150,180,195,.1; --sky-star: 235,242,245,.7; --sky-sun: 255,200,110,.1;
  }
}
:root[data-theme="dark"] {
  --sky-base: var(--sky-d); --night: #0B1430;
  --sky-rain: 200,225,235,.2; --sky-flake: 235,242,245,.55; --sky-cloud: 150,180,195,.1; --sky-star: 235,242,245,.7; --sky-sun: 255,200,110,.1;
}
:root[data-sky="clear"] { --sky-l: #D3E6F6; --sky-d: #1B4460; }
:root[data-sky="cloudy"] { --sky-l: #DCE4EA; --sky-d: #22343F; }
:root[data-sky="overcast"] { --sky-l: #D3DAE0; --sky-d: #26323A; }
:root[data-sky="fog"] { --sky-l: #E0E4E6; --sky-d: #2A3539; }
:root[data-sky="rain"] { --sky-l: #CFDAE3; --sky-d: #1A2C3A; }
:root[data-sky="storm"] { --sky-l: #D2D8E0; --sky-d: #141C28; }
:root[data-sky="snow"] { --sky-l: #EAF1F6; --sky-d: #2A3F52; }

/* Themes. Each was contrast-checked (4.5:1 for text) on its paper, its surfaces and every weather tint. */
:root[data-palette="petrol"][data-theme="light"] { --clear: #08604F; }
:root[data-palette="green"][data-theme="light"] { --paper: #E8EFE9; --surface: #F6F9F6; --ink: #0E2A1F; --muted: #4A6356; --line: #C2D1C6; --clear: #6B500B; --risk: #B3243F; }
:root[data-palette="green"][data-theme="dark"] { --paper: #0B2219; --surface: #11301F; --ink: #E6EFE8; --muted: #9DB5A6; --line: #24493A; --clear: #D9B657; --risk: #FF8A9B; }
:root[data-palette="dusk"][data-theme="light"] { --paper: #EFE7DC; --surface: #F8F3EC; --ink: #231F45; --muted: #5A5470; --line: #D6CABB; --clear: #08605E; --risk: #B0244F; }
:root[data-palette="dusk"][data-theme="dark"] { --paper: #1A1830; --surface: #23203E; --ink: #EDE7F2; --muted: #B4AECB; --line: #3A3560; --clear: #5ED6D0; --risk: #FF8FB0; }
:root[data-palette="night"] {
  --paper: #000000; --surface: #0E0B07; --ink: #D9A04A; --muted: #8C7A5B; --line: #2B2418; --clear: #E8A33D; --risk: #E3735A;
  --sky-base: var(--paper); --night: var(--paper);
  --sky-rain: 217,160,74,.14; --sky-flake: 217,160,74,.3; --sky-cloud: 140,122,91,.06; --sky-star: 217,160,74,.5; --sky-sun: 232,163,61,.06;
}
:root[data-palette="contrast"][data-theme="light"] { --paper: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #262626; --line: #595959; --clear: #0037B3; --risk: #A4001D; }
:root[data-palette="contrast"][data-theme="dark"] { --paper: #000000; --surface: #000000; --ink: #FFFFFF; --muted: #E0E0E0; --line: #9E9E9E; --clear: #FFE14D; --risk: #FF6B6B; }
:root[data-palette="contrast"] .sky-tint, :root[data-palette="contrast"] #sky { display: none; }

:root { --sky: var(--sky-base); --board-bg: var(--ink); --board-fg: var(--paper); }

/* daisyUI components (daisy.css, prefixed d-) take their colours from the app's own tokens */
:root {
  --color-base-100: var(--surface); --color-base-200: var(--paper); --color-base-300: var(--line); --color-base-content: var(--ink);
  --color-primary: var(--ink); --color-primary-content: var(--paper);
  --color-secondary: var(--clear); --color-secondary-content: var(--paper);
  --color-accent: var(--clear); --color-accent-content: var(--paper);
  --color-neutral: var(--ink); --color-neutral-content: var(--paper);
  --color-info: var(--clear); --color-info-content: var(--paper);
  --color-success: var(--clear); --color-success-content: var(--paper);
  --color-warning: var(--clear); --color-warning-content: var(--paper);
  --color-error: var(--risk); --color-error-content: var(--paper);
  --radius-selector: 2rem; --radius-field: .5rem; --radius-box: .75rem;
  --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 0; --noise: 0;
}
.d-select, .d-input { --input-color: color-mix(in srgb, var(--ink) 45%, var(--surface)); font-family: var(--body); }
.d-btn { font-family: var(--body); }
.d-btn:not(.d-btn-primary, .d-btn-soft, .d-btn-ghost, [aria-pressed="true"]) { border-color: color-mix(in srgb, var(--ink) 35%, var(--surface)); }
.d-btn[aria-pressed="true"] { background-color: var(--clear); border-color: var(--clear); color: var(--paper); }
:root[data-night] { --sky: color-mix(in srgb, var(--sky-base) 45%, var(--night)); }
:root[data-palette="night"] { --board-bg: var(--surface); --board-fg: var(--ink); }
.sky-tint { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(var(--sky), var(--paper) 85vh); transition: background 1s; }
#sky {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 95%); mask-image: linear-gradient(#000 35%, transparent 95%);
}

/* App shell */
.app { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); height: 100vh; height: 100dvh; }
.tabbar {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: 0;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) .5rem 1rem max(.5rem, env(safe-area-inset-left, 0px));
  background: var(--surface); border-right: 1px solid var(--line);
}
.brand { width: 2.1rem; height: 2.1rem; margin-bottom: 1rem; }
.tabbar .d-menu { width: 5.5rem; padding: 0; gap: .3rem; }
.tabbar .d-menu a { flex-direction: column; align-items: center; gap: .25rem; padding: .6rem 0; font-size: .78rem; font-weight: 600; }
.tabbar a, .dockbar a { text-decoration: none; }
.tabbar .d-menu a { display: grid; grid-auto-flow: row; justify-items: center; justify-content: center; color: var(--ink); } /* the portfolio's a { color: inherit } outranks daisyUI's layered colours */
.tabbar .d-menu a.d-menu-active { color: var(--paper); }
.tabbar svg, .dockbar svg, .tb-btn svg { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dockbar { display: none; position: static; }
.dockbar .d-dock-label { font-size: .75rem; } /* daisyUI's small dock sets 10px */
.brand-bg { fill: var(--ink); } .brand-sq { fill: var(--paper); } .brand-accent { fill: var(--clear); }
.view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.25rem;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-right, 0px)) 1rem clamp(1rem, 3vw, 2.5rem);
}
.topbar-title { display: grid; gap: .3rem; min-width: 0; }
.topbar h1 { font: 750 clamp(1.7rem, 3.4vw, 2.3rem)/1 var(--display); font-stretch: 80%; letter-spacing: -.02em; }
.topbar-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; font-size: .95rem; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tb-btn { height: 2.6rem; padding-inline: 1rem; border-radius: 99px; }
.tb-btn svg { width: 1.15rem; height: 1.15rem; }
.tab {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 1.25rem; align-content: start;
  padding: .25rem max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-right, 0px)) 2rem clamp(1rem, 3vw, 2.5rem);
}
.tab-fill { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.month-top { margin-top: 0; justify-content: space-between; }
.month-top .iq-note { margin: 0; }
.month-scroll { margin-top: 0; min-height: 0; overflow-y: auto; }
#month thead th { position: sticky; top: 0; background: var(--paper); }
.al-top { margin-top: 0; }
.al-top .iq-note { margin: 0; }
.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: min(34rem, calc(100vw - 2rem));
  margin: 0; padding: .75rem 1.1rem; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: .95rem;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sub-pane { display: grid; gap: .25rem; align-content: start; padding: 0; border: 0; } /* the portfolio pads every <section> */
.seg { justify-self: start; max-width: 100%; min-height: 3rem; font-family: var(--body); } /* min-height: a scroll-container grid item would otherwise be squeezed to a sliver by a tall pane */
.seg .d-tab { font-weight: 600; color: var(--muted); background-color: transparent; border: 0; } /* these are <button>s, which daisyUI does not reset */
.seg .d-tab[aria-selected="true"] { color: var(--ink); background-color: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent); }
.check { display: inline-flex; align-items: center; gap: .65rem; min-width: 0 !important; }
.set-group { display: grid; gap: .5rem; justify-items: start; margin: .9rem 0 0; padding: 0; border: 0; }
.set-group .iq-label { padding: 0; font-weight: 500; }
.ck-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; width: min(100%, 32rem); }
.ck-picker .d-btn[aria-checked="true"] { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }
.sw-picker { display: flex; flex-wrap: wrap; gap: .85rem; padding: 4px; }
.swatch { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px var(--line); }
.swatch[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.swatch:focus-visible, .ck-picker .d-btn:focus-visible { outline: 3px solid var(--clear); outline-offset: 3px; }
#set-arsize { width: min(100%, 16rem); }
.range-ends { display: flex; justify-content: space-between; width: min(100%, 16rem); font-size: .8rem; color: var(--muted); }
.al-switch { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; cursor: pointer; }
.wx-units .d-btn { min-width: 3rem; }

/* Header details */
.back-link { color: var(--muted); font-size: .95rem; text-underline-offset: .25em; }
.back-link:hover { color: var(--ink); }
.iq-date { font: 600 1.05rem/1.2 var(--display); color: var(--clear); }
.iq-place { color: var(--muted); }
.link-btn { border: 0; background: none; padding: 0; margin-left: .35rem; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.link-btn:hover { color: var(--clear); }
.iq-time { font: 700 1.05rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.iq-weather { margin: 0; color: var(--muted); }
.iq-ask { display: grid; gap: .25rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.iq-ask .iq-fields { margin-top: .4rem; }

/* Today: clock, table and adhkar. Board and timeline list every time, so they replace the table. */
.today-grid {
  display: grid; gap: 1.25rem 2rem; align-items: start;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  grid-template-areas: "clock table" "clock adhkar" "actions actions";
}
:root[data-clock="board"] .today-grid, :root[data-clock="timeline"] .today-grid {
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); grid-template-areas: "clock adhkar" "actions actions";
}
#clock { grid-area: clock; }
.iq-today { grid-area: table; min-width: 0; }
#adhkar { grid-area: adhkar; }
.iq-actions { grid-area: actions; }
:root[data-clock="board"] .iq-today, :root[data-clock="timeline"] .iq-today { grid-area: actions; }
:root[data-clock="board"] .iq-actions, :root[data-clock="timeline"] .iq-actions { grid-area: auto; }

/* Clock styles (clocks.js) */
.ck-area { width: 100%; max-width: 26rem; margin-inline: auto; }
:root[data-clock="board"] .ck-area, :root[data-clock="timeline"] .ck-area { max-width: none; }
:root[data-clock="board"] #today, :root[data-clock="timeline"] #today { display: none; }
:root[data-clock="board"] #source, :root[data-clock="timeline"] #source { margin-top: 0; }
:root[data-clock="bedside"] .ck-area { max-width: 30rem; }
:root[data-clock="board"] #now, :root[data-clock="bedside"] #now { display: none; }

.ck-area svg { display: block; width: 100%; height: auto; overflow: visible; }
.ck-area svg text { fill: var(--muted); font: 500 13px var(--body); text-anchor: middle; dominant-baseline: middle; }
.ck-area svg text.ck-strong { fill: var(--ink); font-weight: 600; }
.ck-area svg text.ck-end { text-anchor: end; }
.ck-area svg text.ck-start { text-anchor: start; }
.ck-dial { position: relative; }
.ck-ring { fill: none; stroke: var(--line); stroke-width: 10; }
.ck-day { fill: none; stroke: var(--muted); stroke-width: 10; opacity: .45; }
.ck-iqama { fill: none; stroke: var(--clear); stroke-width: 10; }
.ck-tick { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ck-now { fill: var(--risk); stroke: var(--paper); stroke-width: 3; }
.ck-center { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .15rem; text-align: center; pointer-events: none; }
.ck-below { display: grid; justify-items: center; gap: .2rem; margin-top: .75rem; text-align: center; }
.ck-center p, .ck-below p, .ck-tl-head p { color: var(--muted); font-size: clamp(.85rem, 2.4vw, 1rem); }
.ck-center .ck-count, .ck-below .ck-count, .ck-tl-head .ck-count { color: var(--ink); font: 700 clamp(1.9rem, 7.5vw, 3.1rem)/1 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums; }

.ck-face { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.ck-wedge { fill: var(--clear); opacity: .16; }
.ck-ticks { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.ck-mark { fill: var(--clear); stroke: var(--surface); stroke-width: 2; }
.ck-h, .ck-m, .ck-s { stroke-linecap: round; }
.ck-h { stroke: var(--ink); stroke-width: 7; }
.ck-m { stroke: var(--ink); stroke-width: 4; }
.ck-s { stroke: var(--risk); stroke-width: 1.5; }
.ck-pin { fill: var(--risk); }

.ck-sky-top { stop-color: color-mix(in srgb, #6FA8DC 35%, var(--paper)); }
.ck-sky-bottom { stop-color: var(--paper); }
.ck-ground { fill: color-mix(in srgb, var(--line) 45%, var(--paper)); }
.ck-arc { fill: none; stroke: var(--muted); stroke-width: 2; opacity: .6; }
.ck-dash { stroke-dasharray: 4 6; }
.ck-horizon { stroke: var(--muted); stroke-width: 1.5; }
.ck-mark-ink { fill: var(--ink); }
.ck-sunball { fill: #E3A21A; stroke: var(--paper); stroke-width: 3; }
.ck-moon { fill: var(--muted); stroke: var(--paper); stroke-width: 3; }

.ck-board { --b-muted: color-mix(in srgb, var(--board-fg) 78%, var(--board-bg)); display: grid; gap: 1.25rem; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 10px; background: var(--board-bg); color: var(--board-fg); }
.ck-board-time { display: flex; align-items: center; justify-content: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.ck-board-hm { font: 800 clamp(4rem, 15vw, 6.5rem)/.9 var(--display); font-stretch: 80%; letter-spacing: -.02em; }
.ck-board-side { display: grid; gap: .3rem; font: 600 1.25rem/1 var(--display); color: var(--b-muted); }
.ck-board-date { margin-top: -.6rem; text-align: center; color: var(--b-muted); }
.ck-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ck-tiles li { display: grid; justify-items: center; gap: .35rem; padding: .9rem .25rem; border-radius: 6px; background: color-mix(in srgb, var(--board-fg) 8%, var(--board-bg)); text-align: center; }
.ck-tiles span { font-size: .85rem; font-weight: 500; }
.ck-tiles strong { font: 700 clamp(1.05rem, 3.4vw, 1.3rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.ck-tiles small { font-size: .72rem; color: var(--b-muted); }
.ck-tiles em { font: 600 clamp(.9rem, 2.8vw, 1rem)/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.ck-tiles li.is-next { background: var(--board-fg); color: var(--board-bg); }
.ck-tiles li.is-next small { color: inherit; }
.ck-board-next { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--b-muted); }
.ck-board-next strong { color: var(--board-fg); font: 700 1.8rem/1 var(--display); font-variant-numeric: tabular-nums; }
.ck-bar { height: 8px; margin-top: -.6rem; border-radius: 4px; background: color-mix(in srgb, var(--board-fg) 20%, var(--board-bg)); overflow: hidden; }
.ck-bar span { display: block; height: 100%; border-radius: 4px; background: var(--board-fg); }
.ck-board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--board-fg) 20%, var(--board-bg)); font-size: .9rem; color: var(--b-muted); }

.ck-timeline { display: grid; gap: 1.25rem; }
.ck-tl-head { display: grid; gap: .35rem; }
.ck-rail { position: relative; }
.ck-rail::before { content: ""; position: absolute; left: 9px; top: 0; width: 4px; height: 336px; border-radius: 2px; background: var(--line); }
.ck-rail-fill { position: absolute; left: 9px; top: 0; width: 4px; border-radius: 2px; background: var(--clear); }
.ck-rail-dot { position: absolute; left: 2px; z-index: 1; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--risk); border: 3px solid var(--paper); }
.ck-rail ol { margin: 0; padding: 0; list-style: none; }
.ck-rail li { position: relative; height: 56px; box-sizing: border-box; padding-left: 40px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.ck-node { position: absolute; left: 4px; top: 21px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--clear); background: var(--paper); }
.ck-rail li.is-reached .ck-node { background: var(--clear); }
.ck-rail li strong { font: 600 1.15rem/1 var(--display); }
.ck-rail li.is-done { color: var(--muted); }
.ck-tl-times { display: flex; gap: 1rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.ck-tl-times b { font: 600 1.1rem/1 var(--display); }
.ck-tl-times span { min-width: 7.5rem; text-align: right; font-size: .9rem; color: var(--muted); }
.ck-tl-foot { color: var(--muted); font-size: .9rem; }

/* Bedside keeps its own low-glare colours in every theme */
.ck-bedside { display: grid; justify-items: center; gap: 1.5rem; padding: 2.5rem 1.5rem; border-radius: 10px; background: #000; color: #D9A04A; text-align: center; }
.ck-bed-time { display: flex; align-items: flex-start; gap: .4rem; font-variant-numeric: tabular-nums; }
.ck-bed-time span { font: 300 clamp(5rem, 22vw, 8rem)/.85 var(--display); font-stretch: 78%; letter-spacing: -.03em; }
.ck-bed-time small { margin-top: .5rem; font: 500 1.35rem/1 var(--display); color: #8C7A5B; }
.ck-bed-date, .ck-bed-in { color: #8C7A5B; }
.ck-bed-next { font: 500 1.35rem/1.3 var(--display); }
.ck-bed-dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; width: 100%; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: #8C7A5B; }
.ck-bed-dots li { display: grid; justify-items: center; gap: .5rem; }
.ck-bed-dots span { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid #6B5836; }
.ck-bed-dots li.is-done span { background: #8C7A5B; border-color: #8C7A5B; }
.ck-bed-dots li.is-next span { border-color: #E8A33D; }

/* Tables */
.iqama table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.iqama th, .iqama td { padding: .7rem .75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.iqama thead th { font-size: .88rem; font-weight: 500; color: var(--muted); }
.iqama tbody th { font-weight: 500; }
#today td { font: 600 clamp(1.1rem, 2.2vw, 1.4rem)/1.2 var(--display); }
#today tbody th { font: 600 clamp(1.1rem, 2.2vw, 1.4rem)/1.2 var(--display); }
#today tr.minor th, #today tr.minor td { font: 400 .95rem/1.3 var(--body); color: var(--muted); padding-block: .45rem; }
#today tr.friday th, #today tr.friday td { color: var(--ink); font-weight: 600; }
#today tr.next { background: color-mix(in srgb, var(--clear) 14%, transparent); }
.iq-note { margin-top: .75rem; font-size: .9rem; color: var(--muted); max-width: 60ch; }
.table-scroll { width: 100%; overflow-x: auto; margin-top: .75rem; }
#month tr.today { font-weight: 600; background: color-mix(in srgb, var(--clear) 14%, transparent); }

/* Duas and adhkar card */
.dk { display: grid; gap: .8rem; align-content: start; min-width: 0; padding: 1.4rem 1.6rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.dk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dk h2 { font: 650 1.35rem/1.15 var(--display); font-stretch: 85%; max-width: none; }
.dk-when, .dk-pos, .dk-src { font-size: .88rem; color: var(--muted); }
.dk-pos { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-ar { font: 400 1.9rem/1.85 "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif; text-align: right; }
.dk[data-size="s"] .dk-ar { font-size: 1.5rem; }
.dk[data-size="l"] .dk-ar { font-size: 2.4rem; }
.dk-tr { font-size: .95rem; line-height: 1.55; font-style: italic; color: var(--muted); }
.dk-en { line-height: 1.55; }
.dk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .3rem; }
.dk-src { flex: 1 1 8rem; }
.dk-count {
  --size: 5.25rem; --thickness: 6px; flex: none; border: 0; cursor: pointer; justify-items: center; gap: .1rem; font: inherit;
  color: var(--clear); background-color: color-mix(in srgb, var(--line) 55%, var(--paper)); transition: transform .12s var(--ease);
}
.dk-count:active { transform: scale(.94); }
.dk-count strong, .dk-count span { color: var(--ink); }
.dk-count strong { font: 700 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.dk-count span { font-size: .75rem; }
.dk-count:focus-visible { outline: 3px solid var(--clear); outline-offset: 3px; }
.dk-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; }
.dk-links .link-btn { margin: 0; }

/* Full screen display */
.display {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(clamp(1rem, 4vw, 3.5rem), env(safe-area-inset-left, 0px));
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.display.idle, .display.idle * { cursor: none; }
.dx-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.dx-meta { display: flex; flex-wrap: wrap; gap: .1rem 1rem; min-width: 0; color: var(--muted); font-size: 1.05rem; }
.dx-meta span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-actions { display: flex; align-items: center; gap: .75rem; }
.dx-awake { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 99px; background: var(--surface); color: var(--muted); font-size: .9rem; }
.dx-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--clear); }
.dx-main { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; }
.dx-clock { width: 26rem; margin: 0; }
#dx-clock { max-width: 100%; } /* beats the board and timeline's own max-width: none */
:root[data-clock="board"] .dx-clock { width: 44rem; }
:root[data-clock="timeline"] .dx-clock { width: 36rem; }
:root[data-clock="bedside"] .dx-clock { width: 30rem; }
.dx-dhikr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.5rem; text-align: center; }
.dx-ar { font: 400 clamp(1.5rem, 3vw, 2.4rem)/1.5 "Amiri", "Noto Naskh Arabic", serif; }
.dx-en { max-width: 50ch; color: var(--muted); font-size: clamp(.95rem, 1.5vw, 1.2rem); }

/* Actions and panels */
.iq-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tab h3 { margin: 1.6rem 0 .6rem; font: 600 1.05rem/1.3 var(--display); }
.iq-rule, .iq-fields { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; }
.iq-rule label { width: 5.5rem; font-weight: 500; }
.iq-fields label, .iq-label { min-width: 6.5rem; font-weight: 500; }
.iqama input[type="number"] { width: 6rem; }
#search { width: min(100%, 18rem); }
.iq-results { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.iq-results:empty { display: none; }
#iqama-reset { margin-top: 1.1rem; }
.iq-credits { display: grid; gap: .3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* Alert cards */
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.al-grid { align-items: start; }
.al-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.al-card:has(.al-open:focus-visible) { outline: 3px solid var(--clear); outline-offset: 2px; }
.al-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .1rem; }
.al-title .d-toggle { position: relative; z-index: 2; grid-row: 1 / 3; }
.al-name { grid-column: 2; font: 600 1.1rem/1.2 var(--display); }
.al-sum { grid-column: 2; font-size: .82rem; color: var(--muted); }
.al-card.is-off .al-name { color: var(--muted); }
.al-body { display: grid; gap: .65rem; }
.al-card.is-off .al-body { opacity: .6; }
.al-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.al-row > label { min-width: 6.75rem; font-size: .92rem; }
.al-row select { flex: 1 1 8rem; min-width: 0; }
.al-min { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .9rem; color: var(--muted); }
.iqama .al-row input[type="number"] { width: 4.25rem; }
.al-copy { justify-self: start; margin: .2rem 0 0; }
.al-note { font-size: .85rem; color: var(--muted); }

/* Weather panel */
.wx-units { display: flex; gap: .4rem; margin-top: 1rem; }
.wx-now { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.1rem; }
.wx-now svg { width: 3rem; height: 3rem; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wx-temp { font: 700 3.2rem/1 var(--display); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.wx-cond { font: 600 1.25rem/1.2 var(--display); }
.wx-sub { color: var(--muted); }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .9rem 1.25rem; margin: 1.1rem 0 0; }
.wx-grid dt { font-size: .85rem; color: var(--muted); }
.wx-grid dd { margin: .15rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-aqi { display: flex; align-items: center; gap: .5rem; }
.wx-aqi strong { font: 700 1.6rem/1 var(--display); }
.wx-aqi-dot { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--ink); }
.wx-aqi-dot[data-level="0"] { background: #00E400; }
.wx-aqi-dot[data-level="1"] { background: #FFFF00; }
.wx-aqi-dot[data-level="2"] { background: #FF7E00; }
.wx-aqi-dot[data-level="3"] { background: #FF0000; }
.wx-aqi-dot[data-level="4"] { background: #8F3F97; }
.wx-aqi-dot[data-level="5"] { background: #7E0023; }
.wx-hours { overflow-x: auto; }
.wx-hours ol { display: flex; gap: .3rem; margin: 0; padding: 0 0 .5rem; list-style: none; }
.wx-hours li { flex: none; width: 3.7rem; display: grid; justify-items: center; align-content: start; gap: .3rem; padding: .65rem .2rem; border-radius: 6px; font-variant-numeric: tabular-nums; }
.wx-hours li.has-prayer { background: color-mix(in srgb, var(--clear) 12%, var(--paper)); }
.wx-hours li.has-prayer .wx-h, .wx-hours li.has-prayer .wx-p { color: var(--ink); }
.wx-hours svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-h, .wx-p { font-size: .8rem; color: var(--muted); }
.wx-t { font-weight: 600; }
.wx-prayer { font-size: .75rem; font-weight: 600; color: var(--ink); }
.wx-prayers th { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .ck-area { animation: fade .8s var(--ease) both; }
  #today tr.next { transition: background .4s; }
}

@media (max-width: 64rem) {
  .today-grid, :root[data-clock="board"] .today-grid, :root[data-clock="timeline"] .today-grid {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "clock" "adhkar" "table" "actions";
  }
  :root[data-clock="board"] .iq-today, :root[data-clock="timeline"] .iq-today { grid-area: table; }
  .ck-area { max-width: 34rem; }
}
/* Phones: tabs move to a bottom bar, the top bar tightens and the action buttons become icons */
@media (max-width: 48rem) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .view { grid-row: 1; }
  .tabbar { display: none; }
  .dockbar { display: flex; grid-row: 2; height: auto; min-height: 4rem; padding-inline: max(.25rem, env(safe-area-inset-left, 0px)) max(.25rem, env(safe-area-inset-right, 0px)); border-top: 1px solid var(--line); font-family: var(--body); }
  .topbar { flex-wrap: nowrap; padding-top: max(1rem, env(safe-area-inset-top, 0px)); padding-bottom: .6rem; }
  .topbar-meta { font-size: .85rem; gap: .15rem .7rem; }
  .topbar-actions { flex-wrap: nowrap; }
  .tb-btn span, #install { display: none; }
  .tb-btn { width: 2.75rem; height: 2.75rem; padding: 0; }
  .tb-btn svg { width: 1.3rem; height: 1.3rem; }
  .toast { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .seg { flex-wrap: nowrap; overflow-x: auto; }
  .seg .d-tab { flex: none; padding-inline: .75rem; }
  .dk { padding: 1rem 1.1rem; }
  .dk-ar { font-size: 1.55rem; }
  .dk[data-size="s"] .dk-ar { font-size: 1.3rem; }
  .dk[data-size="l"] .dk-ar { font-size: 1.95rem; }
  .dk-count { --size: 4.5rem; }
}

/* Full screen, times only (small screens): time, weather, current prayer, iqama and the countdown */
.dx-small { display: none; }
.display[data-layout="times"] { grid-template-rows: auto minmax(0, 1fr); }
.display[data-layout="times"] .dx-main, .display[data-layout="times"] .dx-dhikr { display: none; }
.display[data-layout="times"] .dx-small { display: block; container-type: size; min-height: 0; }
.display[data-layout="times"] .dx-meta { font-size: max(1rem, 1.3vw); }
.tm { --u: min(1cqw, 2cqh); height: 100cqh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 3); }
.tm p { margin: 0; }
.tm-time { display: flex; align-items: baseline; gap: calc(var(--u) * 1); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tm-hm { font-size: calc(var(--u) * 17); letter-spacing: -.02em; }
.tm-side { display: grid; font-size: max(1.25rem, calc(var(--u) * 4.5)); color: var(--muted); font-weight: 600; }
.tm-right { display: grid; gap: calc(var(--u) * 2.5); min-width: 0; }
.tm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); display: grid; gap: calc(var(--u) * .8); }
.tm-label { color: var(--muted); font-size: max(1rem, calc(var(--u) * 2.6)); }
.tm-name { font-size: max(1.75rem, calc(var(--u) * 6)); font-weight: 700; line-height: 1.1; }
.tm-pt { display: flex; gap: calc(var(--u) * 4); font-size: max(1.25rem, calc(var(--u) * 4)); }
.tm-pt > span { display: grid; }
.tm-k { color: var(--muted); font-size: max(1rem, calc(var(--u) * 2.4)); }
.tm-hl { color: var(--clear); }
.tm-cnt { font-size: max(2.25rem, calc(var(--u) * 9)); font-weight: 700; line-height: 1.05; color: var(--clear); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-sub { color: var(--muted); font-size: max(1rem, calc(var(--u) * 2.6)); }
.tm-bar { height: calc(var(--u) * 1.2); min-height: .5rem; background: var(--line); border-radius: 99px; overflow: hidden; }
.tm-bar span { display: block; height: 100%; background: var(--clear); border-radius: inherit; }
@media (orientation: portrait) {
  .tm { --u: min(1cqw, .65cqh); grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: stretch; gap: calc(var(--u) * 3); }
  .tm-time { justify-content: center; }
  .tm-hm { font-size: calc(var(--u) * 24); }
}

/* Full screen night mode: dim amber on black, whatever look is chosen for the day */
.display[data-night="on"] { --paper: #000; --surface: #0C0905; --ink: #C48A3A; --muted: #9A8057; --line: #2A2216; --clear: #D9973A; }
.tm-left { display: grid; gap: calc(var(--u) * 3); min-width: 0; }
.tm-wx { display: grid; gap: calc(var(--u) * 1.5); }
.tm-temp { display: flex; align-items: baseline; gap: calc(var(--u) * 1.5); font-size: max(2rem, calc(var(--u) * 6)); font-weight: 700; line-height: 1; }
.tm-temp span { font-size: max(1.25rem, calc(var(--u) * 3)); font-weight: 500; color: var(--muted); }
.tm-out { font-size: max(1.125rem, calc(var(--u) * 2.4)); font-weight: 500; line-height: 1.3; }
.tm-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.2) calc(var(--u) * 1.2); }
.tm-st { display: grid; font-size: max(1.125rem, calc(var(--u) * 1.8)); white-space: nowrap; }
.tm-st .tm-k { font-size: max(1rem, calc(var(--u) * 1.5)); }
@container (max-width: 520px) { .tm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tm-lh { display: flex; justify-content: space-between; gap: 1rem; }
.tm-ar { font: 400 max(1.25rem, calc(var(--u) * 2.3)) / 1.7 "Amiri", "Noto Naskh Arabic", serif; text-align: right; }
.tm-en { font-size: max(1rem, calc(var(--u) * 1.7)); line-height: 1.35; color: var(--muted); }
.tm-src { font-size: max(1rem, calc(var(--u) * 1.5)); color: var(--muted); }
.tm-card[data-dua] { cursor: pointer; }
.tm-rest { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .3); font-size: max(1.125rem, calc(var(--u) * 2.3)); font-variant-numeric: tabular-nums; }
.tm-rest li { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: .5rem; }
.tm-rh { color: var(--muted); font-size: max(1rem, calc(var(--u) * 2)); }

/* Countdown in its last 15 minutes: bright for the first half of each second, dim for the second half */
@keyframes ck-blink { 0% { opacity: 1; } 50% { opacity: .25; } }
.ck-blink { animation: ck-blink 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) { :root .ck-blink { animation: none; color: var(--risk); } }

/* Weather tab: the next 7 days */
.wx-outlook { margin: 0 0 .75rem; color: var(--muted); }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.wx-days li { display: grid; grid-template-columns: 3.5rem 1.6rem minmax(0, 1fr) auto 3rem; align-items: center; gap: .6rem; padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; }
.wx-days svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-dn { font-weight: 600; }
.wx-dc { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-dt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-days .wx-p { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (orientation: portrait) { .tm-left { gap: calc(var(--u) * 2); } .tm { gap: calc(var(--u) * 2.5); } }
@container (max-height: 620px) and (max-width: 520px) { .tm-out, .tm-src { display: none; } }
/* Very small phones (about 360 x 640): a little less room for the time, no bar, tighter edges */
@media (max-height: 680px) and (max-width: 420px) and (orientation: portrait) {
  .display[data-layout="times"] { padding-block: .5rem; gap: .5rem; }
  .tm-hm { font-size: calc(var(--u) * 18); }
  .tm-bar { display: none; }
  .tm-cnt { font-size: 2.25rem; }
  .tm-sub { display: none; }
  .tm-ar { line-height: 1.45; }
  .tm-temp { font-size: 1.75rem; }
  .tm-wx { gap: .25rem; }
  .tm-stats { gap: .15rem .75rem; }
  .display[data-layout="times"] #dx-place { display: none; }
}
/* the weather body is a grid item: without this the wide hourly strip stretches the whole page */
#wx-body { min-width: 0; }