/* Sabeel. Copyright (c) 2026 Marsa. All rights reserved.
   The page's glue only. The screens are drawn by the Design Studio's parts (look/parts/*.css, copied unchanged by
   tools/copy-studio.mjs; inbox #17) on its Sabeel tokens (look/sabeel.css). What is here: the fonts Sabeel ships
   itself, the Today grid and the rail's head and foot as in the studio's working page, the one dialog and the toast,
   and a few rules for Sabeel's own rows. Tokens only; no raw colours. Logical properties, so Arabic mirrors. */
@font-face { font-family: "Marsa Name"; src: url(fonts/readexpro-600.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Amiri Quran"; src: url(fonts/amiri-quran.ttf) format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); }
body { -webkit-text-size-adjust: 100%; font-family: var(--font-family-body); }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--space-2); top: -60px; background: var(--color-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-row); z-index: 40; }
.skip:focus { top: var(--space-2); }
h1:focus, #h-today:focus { outline: none; }
.pad { padding: var(--space-4); }

/* Today (the studio's working page) */
.today-grid { display: grid; gap: var(--space-5); }
.today-grid .arch { margin-top: var(--space-1); }
.today-grid > .col { display: grid; gap: var(--space-5); align-content: start; }
.foot-next { display: grid; gap: 2px; }
.foot-next small { color: var(--color-muted); font-size: var(--font-size-caption); }
.foot-next b { font: 600 22px/1.1 var(--font-family-name); font-variant-numeric: tabular-nums; }
.askplace { gap: var(--space-3); padding: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.times .head span:empty { visibility: hidden; }
@media (min-width: 1024px) {
  .today-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; gap: var(--space-7); }
  .dock-name { display: flex !important; align-items: center; gap: 10px; font-size: 24px !important; }
  .bhead .brand { visibility: hidden; }
}
.dock .dock-name .mark { width: var(--size-mark-rail); height: var(--size-mark-rail); }
.dock-foot:empty { display: none !important; }
/* the page is a layer of its own: on a phone the bar is not drawn under it (a computer keeps the rail, studio screen 2); on a phone neither under an adhkar set, whose counter
   sits where the thumb is (the studio's working page) */
@media (max-width: 1023px) { body.reading .dock { display: none; } }
@media (max-width: 1023px) { body.inset .dock { display: none; } body.inset .has-dock { padding-bottom: 0; } }

/* Adhkar: a set's title is the set's own Arabic name */
.catrow .rt b { font-family: "Amiri Quran", var(--font-family-body); font-size: var(--font-size-title); font-weight: 400; line-height: 1.8; }
#scr-adhkar .shead h1[lang="ar"] { font-family: "Amiri Quran", var(--font-family-name); font-weight: 400; }
.dfoot .ib:disabled { opacity: .35; cursor: default; }
.dial .kaaba { color: var(--color-accent); }

/* Settings */
.row.iq { grid-template-columns: 1fr auto; }
label.row { cursor: pointer; }
.seg { flex-wrap: wrap; }

/* About */
.about { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) 0 var(--space-2); text-align: center; }
.about b { font: 600 var(--font-size-brand)/1.1 var(--font-family-name); color: var(--color-accent); }
.about span { color: var(--color-muted); font-size: var(--font-size-label); }
.prose { padding: var(--space-3) var(--space-4); }
.prose p { margin: 0; }
.credits { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--font-size-label); color: var(--color-muted); }

/* the one dialog (a question, or a list of choices) and the toast */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-fg) 35%, transparent); z-index: 30; }
.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 31; display: grid; gap: var(--space-3); max-height: 86vh; overflow: auto; background: var(--color-surface); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; box-shadow: var(--elevation-dock); }
.sheet h2 { margin: 0; font: 600 var(--font-size-title)/1.2 var(--font-family-name); }
.askinput { min-height: var(--size-tap); padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-row); background: var(--color-bg); }
.askl .row small { display: block; color: var(--color-muted); font-size: var(--font-size-label); }
.askl .row.on { color: var(--color-accent); font-weight: 600; }
.askl .row { grid-template-columns: 1fr; }
.toast { position: fixed; inset-inline: var(--space-4); bottom: calc(var(--size-dock) + var(--size-dock-gap) + var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: 35; background: var(--color-fg); color: var(--color-surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius-row); display: flex; gap: var(--space-3); align-items: center; max-width: 560px; margin: 0 auto; }
.toastbtn { border: 0; background: none; color: var(--color-hero-gold); font-weight: 600; cursor: pointer; }
@media (min-width: 1024px) { .toast { bottom: var(--space-4); } }
/* the qibla's allowed range (interim, studio tokens only; the studio's design is asked in design-studio #22) */
.qrange .qr { padding-block: var(--space-2); border-block-start: 1px solid var(--color-line); }
.qrange .qrh { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin: 0; }
.qrange .qrv { font-size: var(--font-size-label); color: var(--color-muted); white-space: nowrap; }
.qrange .qrv.in { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.qrange .qrv.out { color: var(--color-gold-ink); font-weight: var(--font-weight-semibold); }