/* styles/ds-ui.css — v1431. DESIGN LANGUAGE II · THE COMPONENTS. Every surface builds from these; none draws its own
   window, row, button, switch, segmented control, stepper, empty state, confirm sheet or toast.
   Values: ONLY styles/ds.css tokens (verify/design-lock.js holds this file to that — it is on the lock's list).
   Built by: modules/shared/ds-ui.js (Mithlayn.ui2) or by markup with these classes. Area: data-area="learn|mem|wor|lis".
   The press (AL.10) and the pull reach every piece here without anything added. SAFE TO DELETE: never. */

/* ── a window: the area's wash, a large title with its glyph tile, inset groups ─────────────────────────────── */
.ds-win { background:var(--c-soft); color:var(--c-ink); border-radius:var(--r-win); box-shadow:var(--sh-win); padding:var(--sp-3) var(--sp-3) var(--sp-4); display:grid; gap:var(--sp-3); font:var(--fw-reg) var(--fs-body)/1.45 var(--ds-font); min-width:0; }
.ds-head { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.ds-tile { width:var(--tap); height:var(--tap); flex:none; border-radius:var(--r-ctl); background:var(--c-on); color:var(--c-on-ink); display:grid; place-items:center; }
.ds-tile .ic { width:22px; height:22px; stroke-width:2; }
.ds-title { flex:1; min-width:0; display:grid; gap:1px; }
.ds-title b { font:var(--fw-heavy) var(--fs-t1)/1.1 var(--ds-font); letter-spacing:var(--ds-track-title); color:var(--c-on); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-title small { font:var(--fw-reg) var(--fs-sub)/1.3 var(--ds-font); color:var(--c-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-large { margin:0; font:var(--fw-heavy) var(--fs-large)/1.1 var(--ds-font); letter-spacing:var(--ds-track-title); text-wrap:balance; }

/* ── inset grouped lists: caption → group → footnote; hairlines start after the glyph ─────────────────────── */
.ds-sec { display:grid; min-width:0; }
.ds-cap { font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); padding:0 var(--sp-4) 6px; }
.ds-foot { font:var(--fw-reg) var(--fs-foot)/1.35 var(--ds-font); color:var(--c-mut); padding:6px var(--sp-4) 0; }
.ds-group { background:var(--c-card); border-radius:var(--r-grp); box-shadow:0 0 0 .5px var(--c-hair); overflow:hidden; }
.ds-row { position:relative; display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--row-h); padding:var(--sp-2) var(--sp-4); border:0; background:none; color:var(--c-ink); font:var(--fw-reg) var(--fs-body)/1.25 var(--ds-font); text-align:start; cursor:pointer; }
div.ds-row { cursor:default; }
.ds-row + .ds-row::before { content:""; position:absolute; top:0; inset-inline-end:0; inset-inline-start:calc(var(--sp-4) + 30px + var(--sp-3)); height:.5px; background:var(--c-hair); }
.ds-row.noicon + .ds-row::before, .ds-row + .ds-row.noicon::before { inset-inline-start:var(--sp-4); }
.ds-gl { width:30px; height:30px; flex:none; border-radius:var(--r-icon); background:var(--c-on); color:var(--c-on-ink); display:grid; place-items:center; }
.ds-gl .ic { width:18px; height:18px; stroke-width:2; }
.ds-rt { flex:1; min-width:0; display:grid; gap:1px; }
.ds-rt small { font:var(--fw-reg) var(--fs-foot)/1.3 var(--ds-font); color:var(--c-mut); }
.ds-rv { color:var(--c-mut); font-size:var(--fs-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.ds-chev { width:14px; height:14px; flex:none; color:var(--c-mut); opacity:.6; }
.ds-row.danger { color:var(--c-danger); }

/* ── buttons: prominent (the area's), glass, plain; one round button for Back and Close ─────────────────────── */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); border:0; cursor:pointer; font-family:var(--ds-font); }
.ds-btn.pro { min-height:54px; padding:0 var(--sp-5); border-radius:var(--r-cap); background:var(--c-on); color:var(--c-on-ink); font-weight:var(--fw-bold); font-size:var(--fs-head); }
.ds-btn.pro.wide { width:100%; }
.ds-btn.glass { min-height:var(--tap); padding:0 var(--sp-4); border-radius:var(--r-cap); background:var(--mat-chrome); -webkit-backdrop-filter:var(--mat-blur); backdrop-filter:var(--mat-blur); box-shadow:0 0 0 .5px var(--c-hair); color:var(--c-ink); font-weight:var(--fw-bold); font-size:var(--fs-sub); }
.ds-btn.plain { min-height:var(--tap); padding:0 var(--sp-2); background:none; color:var(--c-on); font-weight:var(--fw-med); font-size:var(--fs-body); }
.ds-round { width:var(--tap); height:var(--tap); flex:none; border:0; border-radius:var(--r-cap); background:var(--c-fill); color:var(--c-ink); display:grid; place-items:center; cursor:pointer; }
.ds-round .ic { width:18px; height:18px; stroke-width:2.2; }

/* ── controls: one segmented control, one switch, one stepper ──────────────────────────────────────────────── */
.ds-seg { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:3px; border-radius:var(--r-cap); background:var(--c-fill); min-width:0; }
.ds-seg button { position:relative; z-index:1; border:0; background:none; min-height:40px; padding:0 var(--sp-1); border-radius:var(--r-cap); color:var(--c-ink); font:var(--fw-med) var(--fs-sub)/1.1 var(--ds-font); cursor:pointer; }
.ds-seg button[aria-checked="true"] { font-weight:var(--fw-bold); }
.ds-seg .ds-th { position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--n)); border-radius:var(--r-cap); background:var(--c-card); box-shadow:var(--sh-thumb); will-change:transform; }   /* M4-R4: moved by the thumb spring (ds-ui.js seg), not a CSS curve */
.ds-sw { position:relative; width:51px; height:31px; flex:none; border:0; border-radius:var(--r-cap); background:var(--c-fill); cursor:pointer; transition:background var(--q-d-300) var(--ease-out); }   /* M4-R4: Settings' 0.3 s track fade */
.ds-sw::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:var(--r-cap); background:var(--c-knob); box-shadow:var(--sh-knob); transform-origin:left center; transition:transform var(--q-knob) var(--q-ease-knob), scale var(--dur-2) var(--ease-out); }   /* M4-R4: AL.9's knob (Settings' switch) */
.ds-sw[aria-checked="true"] { background:var(--c-on); }
.ds-sw[aria-checked="true"]::after { transform:translateX(20px); transform-origin:right center; }
.ds-sw.is-press::after { scale:1.22 1; }
.ds-stp { display:inline-grid; grid-template-columns:var(--tap) minmax(56px,auto) var(--tap); border-radius:var(--r-cap); background:var(--c-fill); overflow:hidden; flex:none; }
.ds-stp button { border:0; background:none; min-height:40px; color:var(--c-ink); font:var(--fw-med) var(--fs-t3)/1 var(--ds-font); cursor:pointer; }
.ds-stp output { display:grid; place-items:center; padding:0 var(--sp-2); font:var(--fw-bold) var(--fs-sub)/1 var(--ds-font); font-variant-numeric:tabular-nums; }

/* ── the empty state ────────────────────────────────────────────────────────────────────────────────────────── */
.ds-empty { display:grid; justify-items:center; gap:6px; padding:var(--sp-5) var(--sp-4); text-align:center; }
.ds-empty .ds-gl { width:var(--tap); height:var(--tap); border-radius:var(--r-ctl); }
.ds-empty .ds-gl .ic { width:24px; height:24px; }
.ds-empty b { font:var(--fw-heavy) var(--fs-t3)/1.2 var(--ds-font); }
.ds-empty small { color:var(--c-mut); font-size:var(--fs-sub); max-width:34ch; }

/* ── asking before something can't be undone: an action sheet (never alert / confirm / prompt) ─────────────── */
.ds-scrim { position:fixed; inset:0; z-index:95; background:var(--c-scrim); opacity:0; transition:opacity var(--dur-2) var(--ease-out); }
.ds-scrim.show { opacity:1; }
.ds-sheet { position:fixed; z-index:96; left:var(--sp-2); right:var(--sp-2); bottom:calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); margin:0 auto; max-width:520px; display:grid; gap:var(--sp-2); transform:translateY(120%); transition:transform var(--dur-3) var(--ease-back); }
.ds-sheet.show { transform:none; }
.ds-sheet .ds-group { background:var(--mat-chrome); -webkit-backdrop-filter:var(--mat-blur); backdrop-filter:var(--mat-blur); }
.ds-sheet .ds-msg { padding:var(--sp-3) var(--sp-4); text-align:center; font:var(--fw-reg) var(--fs-foot)/1.4 var(--ds-font); color:var(--c-mut); }
/* v15xx (owner, on the Flow sheet: "Should be different colors"): the title is the quiet label and the action is the
   accent, as on iOS — with any accent, black included, the two never match; a hairline parts the title from the first action */
.ds-sheet .ds-msg b { display:block; color:var(--c-mut); font-weight:var(--fw-bold); font-size:var(--fs-sub); margin-bottom:2px; }
.ds-sheet .ds-row { justify-content:center; font-weight:var(--fw-med); color:var(--c-accent); }
.ds-sheet .ds-msg + .ds-row::before { content:""; position:absolute; top:0; inset-inline:0; height:.5px; background:var(--c-hair); }
.ds-sheet .ds-row.danger { color:var(--c-danger); }
.ds-sheet .ds-row.cancel { font-weight:var(--fw-heavy); }
.ds-sheet .ds-row + .ds-row::before { inset-inline-start:0; }

/* ── the toast (with Undo) ──────────────────────────────────────────────────────────────────────────────────── */
.ds-toast { position:fixed; z-index:97; left:50%; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); translate:-50% 180%; display:flex; align-items:center; gap:var(--sp-3); max-width:calc(100vw - 32px); padding:6px 6px 6px var(--sp-4); border-radius:var(--r-cap); background:var(--c-ink); color:var(--c-page); font:var(--fw-med) var(--fs-sub)/1.2 var(--ds-font); box-shadow:var(--sh-float); opacity:0; visibility:hidden; transition:translate var(--dur-3) var(--ease-back), opacity var(--dur-2) var(--ease-out), visibility var(--dur-3) step-end; }
.ds-toast.show { translate:-50% 0; opacity:1; visibility:visible; transition:translate var(--dur-3) var(--ease-back), opacity var(--dur-2) var(--ease-out), visibility var(--dur-3) step-start; }   /* hidden means gone: it no longer sits 180% down over a docked bar */
.ds-toast.plain { padding-inline-end:var(--sp-4); min-height:var(--tap); }
.ds-toast button { border:0; min-height:36px; padding:0 var(--sp-3); border-radius:var(--r-cap); background:color-mix(in srgb, var(--c-page) 18%, transparent); color:inherit; font:var(--fw-bold) var(--fs-sub)/1 var(--ds-font); cursor:pointer; }