/* styles/settings-grow.css — v1383. SETTINGS, GROW (DESIGN-LANGUAGE AL.9 and §10).
   The owner's design B of the round-2 study ("Grow"), ported 1:1: a solid card that grows out of the key that opened
   it; six tiles; a tile grows into its area's page, drawn as the Mutashābihāt window draws a page (the area's pale
   wash, a solid tile beside a tinted title, captions over ivory cards, differing words as solid blocks).
   BUILT BY: modules/tools/settings.js (the motion is modules/shared/motion.js; every transform is set from there).
   Palette: the card carries class `mw`, so al.css gives it the hold windows' --mk-* and mode-win.css the glass
   --mw-* and the area tints (data-area → --mw-on / --mw-soft / --mw-on-ink). No hex here (rule A2).
   Knobs: type × --k-type, spacing × --k-density, radii × --k-radius (as mode-win.css). Taps ≥44 (H3).
   Class map to the mock (rule B2): .grp → .sg-grp · .row → .sg-row · .rt → .sg-rt · .rv → .sg-rv · .chips → .sg-chips ·
   .seg → .sg-seg · .sw → .sg-sw · .stp → .sg-stp · .xp → .sg-xp · .opt → .sg-opt · .tile → .sg-tile ·
   .mh/.mtile/.mtt → .sg-mh/.sg-mtile/.sg-mtt · .pp → .sg-pp · .pcard → .sg-pcard · .cap → .mw-cap (the mode window's).
   SAFE TO DELETE: only with settings.js. */

/* ── the scrim (under the dock, so the Settings key stays in reach: tap it mid-way and the card turns round) ── */
#settings-scrim.sg-scrim { position:fixed; inset:0; z-index:47; background:color-mix(in srgb, var(--al-ink) 16%, transparent);
  opacity:0; pointer-events:none; -webkit-tap-highlight-color:transparent; }
body.theme-dark #settings-scrim.sg-scrim { background:rgba(0,0,0,.42); }
/* the dock stays above the dim while Settings is open (its key is where the card came from; tap it to send it back) */
body.sg-open #dock-bar.al-dock { z-index:48; }

/* ── the card: the mode window's glass, positioned and sized by settings.js ── */
#settings-sheet.sg { position:fixed; z-index:49; left:0; bottom:0; top:auto; margin:0; padding:0; display:block;
  width:auto; max-width:none; max-height:none; animation:none; transform-origin:0 0; visibility:hidden; pointer-events:none;
  --sg-r34:calc(34px * var(--k-radius) / 1.1429); border-radius:var(--sg-r34); overflow:hidden; will-change:transform;
  /* v1394, owner: "too liquid glossy — make it regular". A plain solid card: no see-through glass, no blur, no sheen,
     no white rim. (It was the mode window's glass; the motion is unchanged.) */
  background:var(--mk-page); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 0 0 .5px var(--mk-line), 0 18px 48px -20px rgba(0,0,0,.28); }
#settings-sheet.sg::before { content:none; }
#settings-sheet.sg.rm { transition:opacity .15s ease; }
#settings-sheet .ic { width:20px; height:20px; }

/* round buttons: a plain fill */
#settings-sheet .sg-gb { width:44px; height:44px; flex:none; border-radius:var(--mk-r999); display:grid; place-items:center; color:var(--mw-ink); background:var(--mw-fill);
  transition:transform .2s; }
#settings-sheet .sg-gb:active { transform:scale(.94); }
#settings-sheet .sg-gb .ic { width:18px; height:18px; stroke-width:2.2; }

/* ── the home: title, Theme, Paper, Text size, six tiles ── */
#settings-sheet .sg-home { display:grid; gap:calc(12px * var(--k-density)); padding:calc(14px * var(--k-density)) calc(16px * var(--k-density)) calc(16px * var(--k-density)); transform-origin:50% 100%; }
#settings-sheet .sg-bh, #settings-sheet .sg-mh { -webkit-user-select:none; user-select:none; }
#settings-sheet .sg-bh { display:flex; align-items:center; justify-content:space-between; gap:calc(8px * var(--k-density)); touch-action:none; cursor:grab; }
#settings-sheet .sg-bh b { display:flex; align-items:center; gap:8px; font:800 calc(22px * var(--k-type))/1.1 var(--mk-ui); letter-spacing:-.02em; color:var(--mw-ink); }
#settings-sheet .sg-bh b .ic { width:22px; height:22px; color:var(--mw-on); stroke-width:2; }
#settings-sheet .mw-cap { gap:calc(10px * var(--k-density)); }
#settings-sheet .sg-home .mw-cap { margin:0 calc(4px * var(--k-density)) calc(-4px * var(--k-density)); }
#settings-sheet .sg-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(10px * var(--k-density)); }
#settings-sheet .sg-tile { position:relative; display:grid; gap:3px; align-content:start; min-height:calc(86px * var(--k-density)); padding:calc(12px * var(--k-density)) calc(12px * var(--k-density)) calc(10px * var(--k-density));
  border-radius:var(--mk-r20); background:var(--ts); text-align:left; color:var(--mw-ink); transition:transform .3s cubic-bezier(.3,1.3,.5,1); }
#settings-sheet .sg-tile:active { transform:scale(.96); }
#settings-sheet .sg-tile .ic { width:21px; height:21px; color:var(--tc); stroke-width:2; margin-bottom:4px; }
#settings-sheet .sg-tile b { font:700 calc(15.5px * var(--k-type))/1.2 var(--mk-ui); }
#settings-sheet .sg-tile small { display:block; min-width:0; font:500 calc(12px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* numbers and short values roll when they change */
#settings-sheet .sg-roll { display:inline-grid; max-width:100%; }
#settings-sheet .sg-roll span, #settings-sheet .sg-stp output span { grid-area:1/1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:transform .34s cubic-bezier(.2,.9,.3,1), opacity .26s; }
#settings-sheet .sg-roll span.up, #settings-sheet .sg-stp output span.up { transform:translateY(-75%); opacity:0; }
#settings-sheet .sg-roll span.dn, #settings-sheet .sg-stp output span.dn { transform:translateY(75%); opacity:0; }

/* ── an area's page: the Mutashābihāt window's dialect ── */
#settings-sheet .sg-pnl { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column; transform-origin:0 0; visibility:hidden; overflow:hidden; isolation:isolate; }
#settings-sheet .sg-wash { position:absolute; inset:0; z-index:-1; background:var(--mw-soft); }
#settings-sheet .sg-pc { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; }
#settings-sheet .sg-mh { display:flex; align-items:center; gap:calc(12px * var(--k-density)); flex:none; padding:calc(14px * var(--k-density)) calc(14px * var(--k-density)) calc(14px * var(--k-density)) calc(16px * var(--k-density)); touch-action:none; cursor:grab; }
#settings-sheet .sg-mh .sg-gb { background:var(--mk-card); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 .5px var(--mk-line); }
#settings-sheet .sg-mtile { width:44px; height:44px; flex:none; border-radius:var(--mk-r12); display:grid; place-items:center;
  background:var(--mw-on); color:var(--mw-on-ink); }
#settings-sheet .sg-mtile .ic { width:22px; height:22px; stroke-width:2; }
#settings-sheet .sg-mtt { flex:1; min-width:0; display:grid; gap:1px; }
#settings-sheet .sg-mtt b { font:750 calc(24px * var(--k-type))/1.15 var(--mk-ui); letter-spacing:-.015em; color:var(--mw-on); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#settings-sheet .sg-mtt small { font:500 calc(14.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#settings-sheet .sg-stack { position:relative; flex:1; min-height:0; overflow:hidden; }
#settings-sheet .sg-pin { display:flow-root; }
#settings-sheet .sg-pb { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:2px calc(16px * var(--k-density)) calc(24px * var(--k-density)); background:transparent; }

/* sections: a caption over an ivory card */
#settings-sheet .sg-sec { margin-bottom:calc(20px * var(--k-density)); }
#settings-sheet .sg-grp { border-radius:var(--mk-r18); background:var(--mk-card); overflow:hidden; box-shadow:0 0 0 .5px var(--mk-line); }
#settings-sheet .sg-grp.pad { padding:calc(12px * var(--k-density)); }
#settings-sheet .sg-grp > * { position:relative; }
#settings-sheet .sg-grp > * + *::before { content:''; position:absolute; z-index:1; top:0; right:0; left:calc(16px * var(--k-density)); height:.5px; background:var(--mw-sep); }
#settings-sheet .sg-fn { margin:calc(7px * var(--k-density)) calc(16px * var(--k-density)) 0; font:500 calc(13px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); }

/* rows */
#settings-sheet .sg-row { display:flex; align-items:center; gap:calc(12px * var(--k-density)); width:100%; min-height:calc(52px * var(--k-density)); padding:calc(8px * var(--k-density)) calc(16px * var(--k-density));
  text-align:left; color:var(--mw-ink); transition:background .35s; }
#settings-sheet .sg-row.tap { cursor:pointer; }
#settings-sheet .sg-row.tap:active { background:var(--mw-fill); transition:background 0s; }
#settings-sheet .sg-rt { flex:1; min-width:0; display:grid; gap:1px; }
#settings-sheet .sg-rt b { font:500 calc(16.5px * var(--k-type))/1.25 var(--mk-ui); }
#settings-sheet .sg-rt small { font:400 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); }
#settings-sheet .sg-rv { position:relative; display:flex; align-items:center; gap:6px; min-width:0; max-width:62%; font:400 calc(16px * var(--k-type))/1.2 var(--mk-ui);
  color:var(--mw-mut); white-space:nowrap; }
#settings-sheet .sg-val { display:grid; min-width:0; overflow:hidden; }
#settings-sheet .sg-val span { grid-area:1/1; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1); }
#settings-sheet .sg-val span.gone { opacity:0; transform:translateY(-8px); }
#settings-sheet .sg-chev { width:15px; height:15px; flex:none; color:rgba(60,60,67,.3); stroke-width:2.4; }
body.theme-dark #settings-sheet .sg-chev { color:rgba(235,235,245,.3); }
#settings-sheet .sg-row.lead b { color:var(--mw-on); font-weight:600; }
#settings-sheet .sg-row.danger b { color:var(--mk-mixed); }
#settings-sheet .sg-row.quiet b { color:var(--mw-mut); }
#settings-sheet .sg-row.wide { flex-wrap:wrap; row-gap:calc(8px * var(--k-density)); }
/* a hub row (v1395): an area's topic — its glyph on the area's colour, its name, where it stands, a chevron; the line
   between two topics starts after the glyph, as iOS draws it */
#settings-sheet .sg-hi { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:var(--mk-r8); background:var(--mw-on); color:var(--mw-on-ink); }
#settings-sheet .sg-hi .ic { width:18px; height:18px; stroke-width:2; }
#settings-sheet .sg-grp > .sg-hub + .sg-hub::before { left:calc(16px * var(--k-density) + 30px + 12px * var(--k-density)); }
#settings-sheet .sg-hub .sg-rv { max-width:48%; }

/* a list, a planner, a colour table: opens under its own row */
#settings-sheet .sg-xp { height:0; overflow:hidden; }
#settings-sheet .sg-opts > * + * { box-shadow:inset 0 .5px 0 var(--mw-sep); }
#settings-sheet .sg-opt { display:flex; align-items:center; gap:calc(12px * var(--k-density)); width:100%; min-height:calc(48px * var(--k-density)); padding:calc(6px * var(--k-density)) calc(16px * var(--k-density)) calc(6px * var(--k-density)) calc(28px * var(--k-density)); text-align:left;
  font:500 calc(15.5px * var(--k-type))/1.25 var(--mk-ui); color:var(--mw-ink); }
#settings-sheet .sg-opt small { display:block; font-weight:400; font-size:.84em; color:var(--mw-mut); }
#settings-sheet .sg-opt .sg-dot { width:22px; height:22px; flex:none; border-radius:var(--r-cap); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mw-ink, currentColor) 12%, transparent); }   /* v1490: an accent choice shows its colour */
#settings-sheet .sg-opt:active { background:var(--mw-fill); }
#settings-sheet .sg-opt .sg-ck { margin-left:auto; color:var(--mw-on); opacity:0; transform:scale(.5); transition:opacity .2s, transform .35s cubic-bezier(.3,1.3,.5,1); }
#settings-sheet .sg-opt .sg-ck .ic { width:18px; height:18px; stroke-width:2.6; }
#settings-sheet .sg-opt.on .sg-ck { opacity:1; transform:none; }
#settings-sheet .sg-opt.on { color:var(--mw-on); font-weight:600; }
#settings-sheet .sg-in-rows > * + * { box-shadow:inset 0 .5px 0 var(--mw-sep); }
#settings-sheet .sg-in-rows .sg-row { padding-left:calc(28px * var(--k-density)); }

/* chips */
#settings-sheet .sg-chips { display:grid; gap:calc(8px * var(--k-density)); grid-template-columns:repeat(var(--c,3), minmax(0,1fr)); }
#settings-sheet .sg-chips button { display:flex; align-items:center; justify-content:center; gap:calc(7px * var(--k-density)); min-height:44px; padding:0 calc(10px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mw-fill);
  font:600 calc(15px * var(--k-type))/1.15 var(--mk-ui); color:var(--mw-ink); transition:background .3s, color .3s, box-shadow .3s, transform .25s cubic-bezier(.3,1.3,.5,1); }
#settings-sheet .sg-chips button .ic { width:17px; height:17px; }
#settings-sheet .sg-chips button:active { transform:scale(.95); }
#settings-sheet .sg-chips button.on { background:var(--mw-on); color:var(--mw-on-ink); }

/* the segmented capsule: its thumb slides (motion.js) */
#settings-sheet .sg-segrow { display:grid; gap:calc(8px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)) calc(12px * var(--k-density)) calc(16px * var(--k-density)); }
#settings-sheet .sg-segrow > span { font:500 calc(14px * var(--k-type))/1.2 var(--mk-ui); color:var(--mw-mut); }
#settings-sheet .sg-seg { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:calc(3px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mw-fill); }
#settings-sheet .sg-seg .sg-th { position:absolute; top:calc(3px * var(--k-density)); bottom:calc(3px * var(--k-density)); left:calc(3px * var(--k-density)); width:calc((100% - 6px * var(--k-density)) / var(--n)); border-radius:var(--mk-r999); background:var(--mk-card);
  box-shadow:0 1px 3px rgba(0,0,0,.14); will-change:transform; }
body.theme-dark #settings-sheet .sg-seg .sg-th { background:rgba(99,99,102,.7); box-shadow:0 1px 3px rgba(0,0,0,.3); }
#settings-sheet .sg-seg button { position:relative; z-index:1; min-height:44px; border-radius:var(--mk-r999); padding:0 calc(4px * var(--k-density)); font:600 calc(14px * var(--k-type))/1.1 var(--mk-ui);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--mw-ink); transition:color .25s; }
#settings-sheet .sg-seg button[aria-checked="true"] { color:var(--mw-on); }

/* the switch: the whole row is the target; the knob widens while held */
#settings-sheet .sg-sw { flex:none; position:relative; width:51px; height:31px; border-radius:var(--mk-r999); background:var(--mw-fill2); transition:background .3s; }
#settings-sheet .sg-sw::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:var(--mk-r999); background:rgba(255,255,255,1);
  box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition:transform .32s cubic-bezier(.3,1.3,.5,1), width .22s cubic-bezier(.3,1.3,.5,1); }
#settings-sheet .sg-sw[aria-checked="true"] { background:var(--mw-on); }
#settings-sheet .sg-sw[aria-checked="true"]::after { transform:translateX(20px); }
#settings-sheet .sg-row.tap:active .sg-sw::after { width:33px; }
#settings-sheet .sg-row.tap:active .sg-sw[aria-checked="true"]::after { transform:translateX(14px); }

/* the stepper: − value + in one capsule; the value rolls */
#settings-sheet .sg-stp { display:inline-flex; align-items:center; flex:none; border-radius:var(--mk-r999); background:var(--mw-fill); }
#settings-sheet .sg-stp button { width:44px; height:44px; border-radius:var(--mk-r999); font:500 calc(22px * var(--k-type))/1 var(--mk-ui); color:var(--mw-ink); }
#settings-sheet .sg-stp button:active { background:var(--mw-fill); }
#settings-sheet .sg-stp output { position:relative; display:grid; place-items:center; min-width:88px; height:44px; overflow:hidden; padding:0 4px;
  font:600 calc(16px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; box-shadow:inset .5px 0 0 var(--mw-sep), inset -.5px 0 0 var(--mw-sep); }

/* fields: a slider, a text box, a small capsule button */
#settings-sheet .sg-rng { width:100%; height:28px; margin:0; accent-color:var(--mw-on); }
#settings-sheet .sg-in { width:100%; min-height:44px; border:0; border-radius:var(--mk-r12); background:var(--mw-fill); padding:0 calc(12px * var(--k-density));
  font:400 calc(16px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-ink); outline:none; -webkit-user-select:text; user-select:text; }
#settings-sheet textarea.sg-in { min-height:104px; padding:10px 12px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:calc(13px * var(--k-type)); }
#settings-sheet .sg-in:focus-visible { box-shadow:0 0 0 2px var(--mw-on); }
#settings-sheet .sg-field { display:flex; gap:calc(8px * var(--k-density)); width:100%; }
#settings-sheet .sg-sbtn { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:var(--mk-r999); background:var(--mw-fill);
  font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mw-on); }
#settings-sheet .sg-sbtn.danger { color:var(--mk-mixed); }   /* audit D2-18: Remove, red like .sg-row.danger (the Lab's old look) */
#settings-sheet .sg-sbtn .ic { width:16px; height:16px; stroke-width:2.2; }
#settings-sheet .sg-sbtn.spin .ic { animation:sg-spin .8s linear infinite; }
@keyframes sg-spin { to { transform:rotate(360deg); } }
#settings-sheet input[type="color"].sg-swatch { flex:none; width:44px; height:32px; padding:0; border:0; border-radius:var(--mk-r10); background:none; cursor:pointer; }

/* paper swatches: a strip on the card, a grid on the Page page */
#settings-sheet .sg-strip { display:flex; gap:calc(10px * var(--k-density)); overflow-x:auto; padding:calc(4px * var(--k-density)) calc(2px * var(--k-density)) calc(6px * var(--k-density)); scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,1) 88%, transparent); mask-image:linear-gradient(90deg, rgba(0,0,0,1) 88%, transparent); transition:opacity .25s; }
#settings-sheet .sg-strip::-webkit-scrollbar { display:none; }
#settings-sheet .sg-papers { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:calc(12px * var(--k-density)) calc(4px * var(--k-density)); padding:calc(14px * var(--k-density)) calc(8px * var(--k-density)); transition:opacity .25s; }
#settings-sheet .sg-fade { opacity:0; }
#settings-sheet .sg-pp { display:grid; justify-items:center; gap:calc(6px * var(--k-density)); min-height:44px; font:500 calc(12.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mw-mut); }
#settings-sheet .sg-strip .sg-pp { flex:none; width:52px; }
#settings-sheet .sg-pp i { width:40px; height:40px; border-radius:var(--mk-r999); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2); transition:transform .4s cubic-bezier(.3,1.3,.5,1), box-shadow .3s; }
#settings-sheet .sg-strip .sg-pp i { width:34px; height:34px; }
body.theme-dark #settings-sheet .sg-pp i { box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2); }
#settings-sheet .sg-pp:active i { transform:scale(.9); }
#settings-sheet .sg-pp[aria-pressed="true"] i { box-shadow:0 0 0 2px var(--mw-group), 0 0 0 4px var(--mw-on); transform:scale(1.06); }
#settings-sheet .sg-pp[aria-pressed="true"] { color:var(--mw-ink); font-weight:600; }

/* the look-alike pair on the Page page: differing words as solid blocks (the Mutashābihāt window's) */
#settings-sheet .sg-pcard { padding:calc(6px * var(--k-density)) calc(18px * var(--k-density)) calc(12px * var(--k-density)); }
#settings-sheet .sg-ref { margin-top:8px; font:600 calc(12.5px * var(--k-type))/1 var(--mk-ui); letter-spacing:.02em; text-align:center; color:var(--mw-mut); }
#settings-sheet .sg-ay { font:calc(22px * var(--k-type))/2.05 var(--mk-q); direction:rtl; text-align:center; word-spacing:.05em; color:var(--mw-ink); }
#settings-sheet .sg-ay .d { background:var(--c-accent-soft); color:var(--c-ink); border-radius:var(--r-icon); padding:0 5px; }   /* v1571 (design sweep): the difference is marked in the accent, on the 8 corner */

/* sync, the storage meter */
#settings-sheet .sg-sync { display:flex; align-items:center; gap:calc(12px * var(--k-density)); min-height:calc(60px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)) calc(10px * var(--k-density)) calc(16px * var(--k-density)); }
#settings-sheet .sg-dot { width:10px; height:10px; flex:none; border-radius:var(--mk-r999); background:var(--mk-dr); box-shadow:0 0 0 4px color-mix(in srgb, var(--mk-dr) 18%, transparent); }
#settings-sheet .sg-dot.off { background:var(--mw-mut); box-shadow:0 0 0 4px var(--mw-fill); }
#settings-sheet .sg-meter { display:flex; width:100%; height:8px; overflow:hidden; border-radius:var(--mk-r999); background:var(--mw-fill); }
#settings-sheet .sg-meter i { display:block; height:100%; transition:width .6s cubic-bezier(.2,.9,.3,1); }
#settings-sheet .sg-meter .a { background:var(--mk-gold); }
#settings-sheet .sg-meter .b { background:var(--mw-on); }

/* a page inside a page (a reciter's offline audio) slides in within the card */
#settings-sheet .sg-inner { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:2px calc(16px * var(--k-density)) calc(24px * var(--k-density)); }

/* the jump to a row, and the toast with Undo */
#settings-sheet .sg-hit { animation:sg-hit 1.6s ease forwards; }
@keyframes sg-hit { 0%, 30% { background:color-mix(in srgb, var(--mw-on) 16%, transparent); } 100% { background:transparent; } }
#settings-sheet .sg-toast { position:absolute; left:50%; bottom:14px; z-index:5; display:flex; align-items:center; gap:14px; max-width:calc(100% - 24px); padding:8px 8px 8px 18px;
  border-radius:var(--mk-r999); background:var(--mw-ink); color:var(--mk-page); font:600 calc(14px * var(--k-type))/1.2 var(--mk-ui);
  transform:translate(-50%, 16px) scale(.96); opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.3,1.3,.5,1), opacity .25s; }
#settings-sheet .sg-toast.show { transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
#settings-sheet .sg-toast.plain { padding-right:18px; }
#settings-sheet .sg-toast button { min-height:36px; padding:0 14px; border-radius:var(--mk-r999); background:rgba(255,255,255,.2); font-weight:700; color:inherit; }
body.theme-dark #settings-sheet .sg-toast button { background:rgba(0,0,0,.14); }

/* the app itself is ink: in the dark the ink is light, so its tile's glyph is dark */
body.theme-dark #settings-sheet.sg:not([data-area]) { --mw-on-ink:var(--mk-page); }

@media (prefers-reduced-motion:reduce) { #settings-sheet .sg-sbtn.spin .ic { animation:none; } }