/* Studio component: a screen of the Sabeel app (inbox #17). Every place is a real screen with its own head and Back.
   Reads tokens only (color-*, font-*, space-*, radius-*, size-*, elevation-*, motion-*); no raw colours.
   Markup:
     <main class="screen has-dock">
       <header class="shead"><a class="back" href="…" aria-label="Back to Today"><svg>…</svg><span>Today</span></a>
         <h1>Adhkar</h1><span class="acts"><button class="ib" aria-label="Search">…</button></span></header>
       <div class="sbody"> … sections, .group lists, .card … </div>
     </main>
   The brand head (Today only): <header class="bhead"><span class="brand"><img class="mark">Sabeel</span><span class="acts">…</span></header> */

.screen { min-height: 100dvh; background: var(--color-bg); color: var(--color-fg); font: var(--font-weight-regular) var(--font-size-body)/var(--font-line-height-normal) var(--font-family-body); }
.sbody { width: 100%; max-width: 640px; margin-inline: auto; padding: 0 var(--space-4) var(--space-8); display: grid; gap: var(--space-5); align-content: start; }
.sbody.wide { max-width: var(--size-page); }

/* the screen head: Back, title, actions. Sticky, quiet until the page scrolls under it */
.shead {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(var(--size-tap), auto) 1fr auto; align-items: center; gap: var(--space-2);
  min-height: var(--size-head); padding-block: env(safe-area-inset-top, 0px) 0; padding-inline: var(--space-2);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--motion-duration-move) var(--motion-easing-out);
}
.shead.under { border-bottom-color: var(--color-line); }
.shead h1 { margin: 0; min-width: 0; font: var(--font-weight-semibold) var(--font-size-title)/1.2 var(--font-family-name); color: var(--color-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shead .acts { display: flex; gap: var(--space-1); }
.back {
  display: inline-flex; align-items: center; gap: 2px; min-height: var(--size-tap); min-width: var(--size-tap); padding-block: 0; padding-inline: var(--space-1) var(--space-2);
  border-radius: var(--radius-chip); color: var(--color-accent); text-decoration: none; font: var(--font-weight-medium) var(--font-size-body)/1 var(--font-family-body);
}
.back svg { width: var(--space-6); height: var(--space-6); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .back svg, [dir="rtl"] .chev { transform: scaleX(-1); }
.back:hover { background: var(--color-raise); }
.ib {
  display: inline-grid; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: var(--radius-chip);
  background: none; color: var(--color-fg); cursor: pointer; text-decoration: none;
}
.ib svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ib:hover { background: var(--color-raise); }
.ib[aria-pressed="true"] { color: var(--color-accent); }
.back:focus-visible, .ib:focus-visible, .row:focus-visible, .card:focus-visible, .btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* the brand head (Today): mark A at 30 px, 9 px gap, the name at 25 px (brand/sabeel/a/README.md) */
.bhead { display: flex; align-items: center; justify-content: space-between; min-height: var(--size-dock); padding-block: env(safe-area-inset-top, 0px) 0; padding-inline: var(--space-4) var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--color-accent); font: var(--font-weight-semibold) var(--font-size-brand)/1 var(--font-family-name); }
.brand .mark { width: var(--size-mark); height: var(--size-mark); flex: none; }
.brand .mark.mono { color: var(--color-accent); }

/* the date and place line under the brand */
.dayline { display: grid; gap: 2px; padding-inline: var(--space-1); }
.dayline .hijri { font: var(--font-weight-semibold) var(--font-size-title)/1.25 var(--font-family-name); color: var(--color-fg); }
.dayline .greg { font-size: var(--font-size-label); color: var(--color-muted); }
.place { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: var(--size-tap); margin-inline-start: calc(-1 * var(--space-2)); padding: 0 var(--space-2); border-radius: var(--radius-chip); color: var(--color-muted); font-size: var(--font-size-label); text-decoration: none; }
.place svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.8; }
.place:hover { background: var(--color-raise); color: var(--color-fg); }

/* section label */
.cap { margin: 0; padding: 0 var(--space-1); font: var(--font-weight-semibold) var(--font-size-caption)/1.2 var(--font-family-body); letter-spacing: var(--font-tracking-caps, .08em); text-transform: uppercase; color: var(--color-gold-ink); }
:lang(ar) .cap { letter-spacing: 0; font-size: var(--font-size-label); }
.sec { display: grid; gap: var(--space-2); }
.note { margin: 0; padding: 0 var(--space-1); font-size: var(--font-size-label); color: var(--color-muted); }

/* a card that leads somewhere (Today: continue reading, the adhkar of this time) */
.card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  min-height: 72px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sheet);
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--elevation-sheet);
  color: var(--color-fg); text-decoration: none;
}
.card .ico { display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); border-radius: var(--radius-row); background: var(--color-raise); color: var(--color-accent); }
.card .ico svg { width: var(--space-6); height: var(--space-6); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .t { display: grid; gap: 2px; min-width: 0; }
.card .t b { font: var(--font-weight-semibold) var(--font-size-body)/1.3 var(--font-family-body); }
.card .t span { font-size: var(--font-size-label); color: var(--color-muted); }
.card .meter { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--color-raise); overflow: hidden; }
.card .meter i { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
.card:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line)); }
.chev { width: var(--space-5); height: var(--space-5); color: var(--color-muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a list of rows (More, Settings, the adhkar sets) */
.group { display: grid; padding: 4px; border-radius: var(--radius-sheet); background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--elevation-sheet); }
.row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  min-height: var(--size-head); padding: var(--space-2) var(--space-3); border-radius: var(--radius-row);
  color: var(--color-fg); text-decoration: none; background: none; border: 0; width: 100%; text-align: start; font: inherit; cursor: pointer;
}
.row.noico { grid-template-columns: 1fr auto; }
.row + .row::before { content: ""; position: absolute; top: 0; inset-inline: var(--space-3); height: 1px; background: var(--color-line); }
.row.noico + .row::before, .row + .row.noico::before { inset-inline-start: var(--space-3); }
.row .ri { display: grid; place-items: center; width: var(--size-icon-row); height: var(--size-icon-row); border-radius: var(--space-3); background: var(--color-raise); color: var(--color-accent); }
.row .ri svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row .rt { display: grid; gap: 1px; min-width: 0; }
.row .rt b { font: var(--font-weight-medium) var(--font-size-body)/1.3 var(--font-family-body); }
.row .rt span { font-size: var(--font-size-label); line-height: 1.35; color: var(--color-muted); }
.row .rv { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: var(--font-size-label); font-variant-numeric: tabular-nums; }
a.row:hover, button.row:hover { background: var(--color-raise); }

/* controls inside rows */
.sw { position: relative; width: var(--size-switch-w); height: var(--size-switch-h); flex: none; }
.sw input { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: var(--radius-chip); background: var(--color-line); transition: background var(--motion-duration-move) var(--motion-easing-out); }
.sw i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: calc(var(--size-switch-h) - 6px); height: calc(var(--size-switch-h) - 6px); border-radius: 50%; background: var(--color-surface); box-shadow: var(--elevation-sheet); transition: inset-inline-start var(--motion-duration-move) var(--motion-easing-out); }
.sw input:checked + i { background: var(--color-accent); }
.sw input:checked + i::after { inset-inline-start: calc(var(--size-switch-w) - 27px); }
.sw input:focus-visible + i { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--radius-chip); background: var(--color-raise); }
.seg button { min-height: var(--size-tap); min-width: var(--size-tap); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-chip); background: none; color: var(--color-muted); font: var(--font-weight-semibold) var(--font-size-label)/1 var(--font-family-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-accent); box-shadow: var(--elevation-sheet); }

.step { display: inline-grid; grid-template-columns: var(--size-tap) 3.2em var(--size-tap); align-items: center; border-radius: var(--radius-chip); background: var(--color-raise); }
.step button { height: var(--size-tap); border: 0; background: none; color: var(--color-accent); font: var(--font-weight-semibold) var(--font-size-title)/1 var(--font-family-body); border-radius: var(--radius-chip); cursor: pointer; }
.step output { text-align: center; font: var(--font-weight-semibold) var(--font-size-body)/1 var(--font-family-name); font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-tap); padding: 0 var(--space-5); border-radius: var(--radius-chip); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); font: var(--font-weight-semibold) var(--font-size-body)/1 var(--font-family-body); text-decoration: none; cursor: pointer; }
.btn.solid { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* search field */
.search { display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--size-tap) + 4px); padding: 0 var(--space-4); border-radius: var(--radius-chip); background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-muted); }
.search svg { width: var(--space-5); height: var(--space-5); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: var(--size-tap); border: 0; background: none; color: var(--color-fg); font: inherit; outline: none; }

/* Today on a computer: the arch beside the times and cards */
@media (min-width: 1024px) {
  .shead { padding-inline: var(--space-4); }
  .sbody { padding-inline: var(--space-6); }
  .bhead { padding-inline: var(--space-6); }
}

/* a choice in a list (Settings: method, location): the row is the control; a check marks the chosen one */
.row[role="radio"] .tick, .row[aria-pressed] .tick { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); color: var(--color-accent); }
.row[role="radio"] .tick svg, .row[aria-pressed] .tick svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.row[role="radio"][aria-checked="true"] .rt b { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.search input::placeholder { color: var(--color-muted); opacity: 1; }