/* styles/dua-dial.css — v1443. DUʿĀʾ in Design Language II (the owner-approved preview, artifact "Duʿāʾ, Design II").
   Drawn by modules/tools/dua-dial.js. The page, its stack and the sheet chrome are Salah / Tasbīḥ's own (styles/worship2.css:
   .wr-app · .wr-pg · .wr-inner · .wr-sh · .wr-shw · .wr-grab · .wr-chk), the pieces are ds-ui's (.ds-head · .ds-group · .ds-row
   · .ds-btn · .ds-round · .ds-seg · .ds-sw · .ds-stp · .ds-empty · .ds-toast); this file draws only what is Duʿāʾ's own: the
   Dial, the one-tap and situation tiles, a duʿāʾ in your day, the reading sheet, the builder and the Edit day rows.
   Every value comes from styles/ds.css (the weak / disputed tag reads al.css's warn pair, a MEANING colour). Meant for the
   design lock's converted list. SAFE TO DELETE: only with modules/tools/dua-dial.js and its tag. */

/* ── the page: Salah's, one width wider from 1024 so the Dial can stand beside the day ─────────────────────────── */
#dua-app .wr-inner { padding-bottom:var(--sp-5); }
.du-cols { display:grid; gap:var(--sp-3); min-width:0; }
.du-col { display:grid; gap:var(--sp-3); align-content:start; min-width:0; }
.du-hide { display:none !important; }

/* ── the Dial: a declared instrument; its arcs are thick enough to be real targets ─────────────────────────────── */
.du-dialg { display:grid; justify-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-3); }
.du-dial { position:relative; width:min(100%, 330px); aspect-ratio:1; }
.du-dial svg { display:block; width:100%; height:100%; overflow:visible; }
.du-dial .face { fill:var(--c-card); }
.du-dial .tk { stroke:var(--c-hair); stroke-width:2; stroke-linecap:round; }
.du-dial .tk.q { stroke:var(--c-mut); }
.du-dial .hr { font:var(--fw-bold) var(--fs-foot) var(--ds-font); fill:var(--c-mut); text-anchor:middle; dominant-baseline:central; }
.du-dial path.arc { fill:none; stroke:color-mix(in srgb, var(--c-on) 12%, var(--c-card)); stroke-width:53; cursor:pointer; transition:stroke var(--dur-2) var(--ease-out); }
.du-dial path.arc.now { stroke:color-mix(in srgb, var(--c-on) 36%, var(--c-card)); }
.du-dial path.arc.sel { stroke:var(--c-on); }
.du-dial path.arc:focus-visible { outline:none; stroke:var(--c-ink); }
.du-dial .alab { font:var(--fw-heavy) var(--fs-foot) var(--ds-font); fill:var(--c-on-ink); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.du-dial .hand { stroke:var(--c-ink); stroke-width:3; stroke-linecap:round; pointer-events:none; }
.du-dial .pin { fill:var(--c-card); stroke:var(--c-ink); stroke-width:3; pointer-events:none; }
.du-ctr { position:absolute; left:50%; top:50%; width:50%; aspect-ratio:1; translate:-50% -50%; border:0; border-radius:var(--r-cap); background:none; color:var(--c-ink);
  display:grid; place-content:center; justify-items:center; gap:2px; text-align:center; cursor:pointer; padding:var(--sp-2); }
.du-ctr .k { font:var(--fw-heavy) var(--fs-foot)/1.2 var(--ds-font); color:var(--c-on); }
.du-ctr .n { font:var(--fw-heavy) var(--fs-head)/1.2 var(--ds-font); letter-spacing:var(--ds-track-title); text-wrap:balance; }
.du-ctr .m { font:var(--fw-med) var(--fs-foot)/1.2 var(--ds-font); color:var(--c-mut); font-variant-numeric:tabular-nums; }
.du-ctr[aria-pressed="true"] .n { color:var(--c-on); }
.du-dial.mini { width:min(100%, 260px); }
.du-dial.mini path.arc { stroke-width:56; }
.du-dial.mini .du-ctr { width:52%; }
.du-dial.mini .du-ctr .n { font-size:var(--fs-sub); }

/* capsules: the parts of the day, the situations, the categories — every one a 44px target (the readings are the list's .wl-caps) */
.du-caps { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); }
.du-caps.start { justify-content:flex-start; }
.du-caps button { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding:0 var(--sp-3); border:0; border-radius:var(--r-cap); background:var(--c-card);
  box-shadow:0 0 0 .5px var(--c-hair); color:var(--c-ink); font:var(--fw-bold) var(--fs-foot)/1.1 var(--ds-font); cursor:pointer; }
.du-caps button .ic { width:16px; height:16px; flex:none; }
.du-caps button.is-now { box-shadow:inset 0 0 0 2px var(--c-on); }
.du-caps button[aria-pressed="true"] { background:var(--c-on); color:var(--c-on-ink); box-shadow:none; }
.du-tools { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); }   /* audit D6-15: 12 between two keys */

/* ── one tap, and when it happens ──────────────────────────────────────────────────────────────────────────── */
.du-quick, .du-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
.du-tile { display:grid; align-content:start; justify-items:start; gap:var(--sp-2); min-height:96px; padding:var(--sp-3) var(--sp-4) var(--sp-4); border:0; border-radius:var(--r-grp);
  background:var(--c-card); box-shadow:0 0 0 .5px var(--c-hair); color:var(--c-ink); text-align:start; cursor:pointer; min-width:0; }
.du-tile .t { font:var(--fw-bold) var(--fs-head)/1.2 var(--ds-font); overflow-wrap:anywhere; }
.du-tile small { font:var(--fw-reg) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); }
.du-quick .du-tile { background:var(--c-on); color:var(--c-on-ink); box-shadow:none; }
.du-quick .du-tile .ds-gl { background:color-mix(in srgb, var(--c-on-ink) 22%, transparent); color:var(--c-on-ink); }
.du-quick .du-tile small { color:inherit; opacity:.85; }

/* ── a duʿāʾ in your day ───────────────────────────────────────────────────────────────────────────────────── */
.du-it { position:relative; display:grid; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); min-width:0; }
.du-it + .du-it::before, .du-it + .ds-row::before, .ds-row + .du-it::before, .du-part + .du-part::before, .ds-row + .du-part::before, .du-it + .ds-empty::before {
  content:""; position:absolute; top:0; inset-inline:var(--sp-4) 0; height:.5px; background:var(--c-hair); }
.ds-group > .ds-row, .ds-group > .ds-empty { position:relative; }
.du-it .hd { display:flex; align-items:center; gap:var(--sp-1); min-width:0; }
.du-t { flex:1; min-width:0; min-height:var(--tap); border:0; background:none; padding:0; text-align:start; cursor:pointer; color:var(--c-ink);
  font:var(--fw-bold) var(--fs-head)/1.25 var(--ds-font); display:flex; align-items:center; gap:6px; }
.du-t .ic { color:var(--c-mut); width:14px; height:14px; flex:none; }
.du-star { width:var(--tap); height:var(--tap); flex:none; border:0; border-radius:var(--r-cap); background:none; color:var(--c-mut); display:grid; place-items:center; cursor:pointer; }
.du-star[aria-pressed="true"] { color:var(--c-on); }
.du-star[aria-pressed="true"] .ic { fill:currentColor; }
.du-it .hd .ds-round { background:none; color:var(--c-mut); }
.du-it .hd .ds-round.set { color:var(--c-on); }
.du-ar { margin:0; font:var(--fw-reg) var(--fs-t2)/1.9 var(--ds-font-ar); color:var(--c-ink); text-align:right; direction:rtl; white-space:pre-line; overflow-wrap:anywhere; }
.du-it.att .du-ar { font-size:var(--fs-t1); }
.du-ar[data-q] { font-family:var(--f-quran); }   /* v1565: an āyah (Tanzil) in the Qurʾān face */
.du-it .tr { margin:0; font:var(--fw-reg) var(--fs-sub)/1.45 var(--ds-font); color:var(--c-ink2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* v1505: the Meaning folds under its chip on Your day's cards; opened, it reads whole */
.du-it .wl-caps + .tr { display:block; -webkit-line-clamp:unset; overflow:visible; }
.du-it .wl-caps + .tr[hidden] { display:none; }
.du-it > .wl-caps { margin-bottom:4px; }   /* 8 + 4: the Meaning chip keeps 12 from Say it under it (design floor) */
.du-it .rm { font:var(--fw-med) var(--fs-foot)/1.2 var(--ds-font); color:var(--c-on); display:flex; align-items:center; gap:6px; }
.du-it .rm .ic { width:14px; height:14px; }
.du-it.said .du-t { color:var(--c-mut); }
.du-acts { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.du-acts .ds-stp button { min-height:var(--tap); }
.du-say { display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); padding:0 var(--sp-4) 0 7px; border:0; border-radius:var(--r-cap); background:var(--c-fill);
  color:var(--c-ink); font:var(--fw-bold) var(--fs-sub)/1 var(--ds-font); cursor:pointer; }
.du-say[aria-pressed="true"] { color:var(--c-good); }
.du-say[aria-pressed="true"] > .wr-chk { background:var(--c-good); border-color:var(--c-good); color:var(--c-on-ink); }
.du-week { margin-inline-start:auto; display:flex; gap:4px; align-items:center; }
.du-week i { width:7px; height:7px; border-radius:var(--r-cap); background:var(--c-hair); }
.du-week i.on { background:var(--c-good); }

/* what the report is: its grade, whose words, a practice */
.du-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--sp-2); min-width:0; }
.du-tag, .du-prac { display:inline-flex; align-items:center; padding:4px 8px; border-radius:var(--r-cap); font:var(--fw-bold) var(--fs-cap)/1.1 var(--ds-font); white-space:nowrap; flex:none; }
.du-tag { background:var(--al-warn-bg); color:var(--al-warn-ink); }
.du-tag[data-status="unverified"] { background:var(--c-fill); color:var(--c-ink2); }   /* not a verdict, so not the warn pair */
.du-prac { background:var(--c-fill); color:var(--c-ink2); }
.du-mq { margin:0; font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); }
.du-q { font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); }
.ds-row .du-tag, .ds-row .du-prac { margin-inline-start:auto; }

/* ── sheets: Tasbīḥ's sheet (worship2.css), stacked, with a head that pulls ────────────────────────────────── */
.du-shost { position:absolute; inset:0; z-index:3; pointer-events:none; }
.du-shost .wr-sh { pointer-events:auto; display:flex; flex-direction:column; overflow:hidden; max-height:88%; padding:0; }
.du-shost .wr-sh.du-drag { transition:none; }
.du-sh-hd { flex:none; display:grid; gap:var(--sp-1); padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); touch-action:none; cursor:grab; }
.du-sh-hd .wr-grab { margin:0 auto; }
.du-sh-row { display:flex; align-items:center; gap:var(--sp-3); }
.du-sh-hd h2 { flex:1; min-width:0; margin:0; font:var(--fw-heavy) var(--fs-t3)/1.2 var(--ds-font); letter-spacing:var(--ds-track-title); text-wrap:balance; }
.du-sh-bd { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 var(--sp-4) var(--sp-4); display:grid; gap:var(--sp-3); align-content:start; }
.du-sh-bd .ds-group { background:var(--c-page); }
.du-sh-ft { flex:none; display:grid; gap:var(--sp-1); padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-top:.5px solid var(--c-hair); }
.du-sh-ft .ds-btn.pro:disabled { opacity:.4; cursor:default; }
.du-p { margin:0; font:var(--fw-reg) var(--fs-sub)/1.45 var(--ds-font); color:var(--c-mut); }

/* the reading sheet: one reading at a time, chosen above the Arabic */
.du-read { margin:0; font:var(--fw-reg) var(--fs-call)/1.5 var(--ds-font); color:var(--c-ink2); white-space:pre-line; overflow-wrap:anywhere; }
.du-read.src { font-size:var(--fs-sub); }
.du-wbw { display:flex; flex-wrap:wrap; direction:rtl; gap:var(--sp-2); }
.du-wbw span { display:grid; justify-items:center; gap:2px; padding:6px 8px; border-radius:var(--r-ctl); background:var(--c-fill); max-width:100%; }
.du-wbw b { font:var(--fw-reg) var(--fs-t3)/1.5 var(--ds-font-ar); }
.du-wbw i { font:var(--fw-reg) var(--fs-cap)/1.2 var(--ds-font); font-style:normal; color:var(--c-mut); direction:ltr; text-align:center; }

/* fields: 16px and up so iOS never zooms */
.du-in, .du-time { min-height:var(--tap); border:0; border-radius:var(--r-ctl); background:var(--c-fill); color:var(--c-ink); padding:0 var(--sp-3); font:var(--fw-reg) var(--fs-body)/1 var(--ds-font); min-width:0; }
.du-in { width:100%; }
.du-time { font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.du-row-in { display:flex; align-items:center; gap:var(--sp-3); min-height:var(--row-h); padding:var(--sp-2) var(--sp-4); position:relative; }
.du-row-in .ds-rt small { font:var(--fw-reg) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); }
.du-row-in + .du-row-in::before { content:""; position:absolute; top:0; inset-inline:var(--sp-4) 0; height:.5px; background:var(--c-hair); }
.du-row-in .ds-stp button { min-height:var(--tap); }

/* Edit day: every part's name and hours */
.du-part { display:grid; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); position:relative; }
.du-part .tm { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font:var(--fw-med) var(--fs-foot)/1 var(--ds-font); color:var(--c-mut); }
.du-part .tm .ds-btn.plain { margin-inline-start:auto; font-size:var(--fs-sub); }
/* v1492 audit #65: From [time] to [time] stays together; the two inputs share what room there is */
.du-part .tm .du-ft { display:flex; align-items:center; gap:var(--sp-2); flex:0 1 auto; min-width:0; }
.du-part .tm .du-ft .du-time { flex:0 1 auto; min-width:0; }
.du-ics { margin:0; padding:var(--sp-3); border-radius:var(--r-ctl); background:var(--c-fill); font:var(--fw-reg) var(--fs-cap)/1.4 var(--ds-font); color:var(--c-ink2); white-space:pre-wrap;
  overflow-wrap:anywhere; max-height:160px; overflow:auto; -webkit-user-select:text; user-select:text; }

/* ── depth becomes width ───────────────────────────────────────────────────────────────────────────────────── */
@media (min-width:744px) { .du-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px) {
  #dua-app .wr-inner.du-wide { max-width:1040px; }
  .du-cols { grid-template-columns:400px minmax(0,1fr); align-items:start; gap:var(--sp-5); }
  .du-cols > .du-col:first-child { position:sticky; top:0; }
  .du-dial { width:min(100%, 360px); }
  .du-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1440px) { .du-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }