/* styles/me.css — v1443 (fine tune: the Duʿāʾ dial beside the list and sticky, compact tags, the parts grid, one-line
   heads, the scroll edge, the toast at the top). ME, the private section (modules/tools/me.js), inside the mode window (AL.8, .mw).
   Values: ONLY tokens — the window's --mw-* (colour, glass, hairlines), styles/ds.css (corners, the type ramp, weights,
   spacing, motion) and the hold windows' meaning colours (--mk-mixed / --mk-gold / --mk-st / --mk-dr for where an
   aspect stands). No colour, corner, size or curve of its own (verify/design-lock.js holds it to that).
   Light and dark follow the window; Plain (Settings › Colours) follows through --mw-on.
   SAFE TO DELETE: with modules/tools/me.js. */

.mw.me-win { --me-active:var(--mk-mixed); --me-improving:var(--mk-gold); --me-contained:var(--mk-st); --me-done:var(--mk-dr);
  --me-strong:var(--q-strong, var(--c-ink)); --me-strong-ink:var(--q-strong-ink, var(--c-page)); --me-ink2:var(--q-ink2, var(--mw-mut)); --me-sp:var(--q-sp, var(--sp-3)); }   /* audit D6-07 / D6-16: the main button is the dark capsule, icons grey, 12 between two controls */
.me-win .mw-pane { display:grid; gap:var(--sp-3); min-width:0; }
.me-win .ic { width:20px; height:20px; }
@media (max-width:480px) { .me-win .mw-tabs button .ic { display:none; } .me-win .mw-tabs button { padding:0 var(--sp-1); } }

/* text */
.me-win :where(h3, h4, p) { margin:0; }
.me-sub, .me-note, .me-date { color:var(--mw-mut); font-size:var(--fs-sub); line-height:1.45; }
.me-date { font-weight:var(--fw-med); }
.me-meta { color:var(--mw-mut); font-size:var(--fs-foot); line-height:1.4; }
.me-gl { color:var(--mw-mut); font-size:var(--fs-sub); }
.me-win .ar { font-family:var(--ds-font-ar); direction:rtl; unicode-bidi:isolate; font-size:var(--fs-t3); line-height:1.8; }
.me-cap { display:flex; align-items:baseline; gap:var(--sp-2); margin:0 var(--sp-4) 6px; font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--mw-mut); }
.me-cap span { font-weight:var(--fw-reg); }
.me-gap { margin-top:var(--sp-3); }
.me-foot { margin:6px var(--sp-4) 0; font:var(--fw-reg) var(--fs-foot)/1.4 var(--ds-font); color:var(--mw-mut); }
.me-warn { background:color-mix(in srgb, var(--me-active) 14%, transparent); border-radius:var(--r-ctl); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sub); }
.me-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.me-empty-line { color:var(--mw-mut); font-size:var(--fs-sub); padding:var(--sp-2) 0; }
.me-group:not(.pad) > .me-empty-line { padding:var(--sp-3) var(--sp-4); }   /* audit D6-18: inset like the group's rows, not on its edge */

/* groups and cards: the window's inset groups */
.me-group { border-radius:var(--r-grp); background:var(--mw-group); overflow:hidden; min-width:0; }
.me-group.pad { padding:var(--sp-3) var(--sp-4); }
.me-sec { display:grid; min-width:0; }
.me-card { background:var(--mw-group); border-radius:var(--r-grp); padding:var(--sp-4); display:grid; gap:var(--sp-2); min-width:0; }
.me-kick { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.me-an { font:var(--fw-bold) var(--fs-t3)/1.25 var(--ds-font); letter-spacing:var(--ds-track-title); }
.me-orig { color:var(--mw-mut); font-size:var(--fs-foot); }
.me-practice { font-size:var(--fs-head); line-height:1.5; }
.me-row { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; min-width:0; }
.me-trow { margin-top:var(--sp-1); }
.me-bgroup { display:grid; gap:var(--sp-2); }
.me-bgroup .me-cap { margin-bottom:0; }
.me-bgroup .me-sub { margin:calc(-1 * var(--sp-1)) var(--sp-4) var(--sp-1); }

/* chips: where an aspect stands carries its meaning colour; the rest are quiet */
.me-chip { display:inline-block; vertical-align:middle; max-width:100%; min-height:24px; padding:4px 10px; border-radius:var(--r-cap); background:var(--mw-fill); color:var(--mw-mut); font:var(--fw-med) var(--fs-cap)/1.3 var(--ds-font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-chip.for { max-width:min(100%, 22em); }   /* "For: …" — one line, the full name in its title */
.me-chip.b-active { background:color-mix(in srgb, var(--me-active) 15%, transparent); color:var(--me-active); }
.me-chip.b-improving { background:color-mix(in srgb, var(--me-improving) 16%, transparent); color:var(--me-improving); }
.me-chip.b-contained { background:color-mix(in srgb, var(--me-contained) 15%, transparent); color:var(--me-contained); }
.me-chip.b-done, .me-chip.s-yes { background:color-mix(in srgb, var(--me-done) 15%, transparent); color:var(--me-done); }
.me-chip.s-some { background:color-mix(in srgb, var(--me-improving) 16%, transparent); color:var(--me-improving); }
.me-chip.s-no { background:color-mix(in srgb, var(--me-active) 15%, transparent); color:var(--me-active); }
.me-chip.s-learn, .me-chip.lib { background:color-mix(in srgb, var(--me-contained) 15%, transparent); color:var(--me-contained); }
.me-chip.streak, .me-chip.s-new { background:var(--mw-soft); color:var(--mw-on); }
.me-chip.nowchip { background:var(--mw-on); color:var(--mw-on-ink); }

/* the tick: a capsule that fills with the area's colour */
.me-win .me-tick { display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); min-width:var(--tap); padding:0 var(--sp-4) 0 var(--sp-3); border-radius:var(--r-cap); background:var(--mw-fill); color:var(--mw-ink); font-weight:var(--fw-bold); }
.me-win .me-tick.sm { width:var(--tap); padding:0; justify-content:center; flex:none; }
.me-box { width:24px; height:24px; border-radius:var(--r-icon); box-shadow:inset 0 0 0 2px var(--mw-on); display:grid; place-items:center; color:transparent; flex:none; }
.me-box .ic { width:16px; height:16px; stroke-width:2.6; }
.me-win .me-tick[aria-pressed="true"] { background:var(--mw-on); color:var(--mw-on-ink); }
.me-win .me-tick[aria-pressed="true"] .me-box { box-shadow:inset 0 0 0 2px currentColor; color:inherit; }
.me-tick-sp { width:var(--tap); flex:none; }
.me-dots { display:inline-flex; gap:4px; align-items:center; }
.me-dots i { width:10px; height:10px; border-radius:var(--r-cap); background:var(--mw-fill2); }
.me-dots i.on { background:var(--mw-on); }
.me-dots i.today { box-shadow:0 0 0 2px var(--mw-group), 0 0 0 3.5px var(--mw-mut); }

/* practice rows */
.me-prow { display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) var(--sp-4); min-width:0; }
.me-prow + .me-prow { box-shadow:inset 0 .5px 0 var(--mw-sep); }
.me-pb { flex:1; min-width:0; display:grid; gap:4px; }
.me-pn { font-weight:var(--fw-med); }
.me-link { min-height:var(--tap); min-width:var(--tap); padding:0 var(--sp-1); color:var(--mw-on); font-weight:var(--fw-med); font-size:var(--fs-sub); justify-self:start; }
.me-links { gap:var(--me-sp); }
.me-dact + .me-links { margin-top:calc(var(--me-sp) - var(--sp-2)); }   /* the card's 8 to the said key, made 12 */

/* details */
.me-more > summary { list-style:none; display:flex; align-items:center; gap:6px; min-height:var(--tap); color:var(--mw-on); font-weight:var(--fw-med); cursor:pointer; }
.me-more > summary::-webkit-details-marker { display:none; }
.me-more > summary::before { content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform var(--dur-2) var(--ease-out); flex:none; }
.me-more[open] > summary::before { transform:rotate(45deg); }
.me-det { display:grid; gap:var(--sp-2); }
.me-det h4 { font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--mw-mut); margin-top:var(--sp-2); }
.me-det ul, .me-dua ul, .me-dbody { margin:0; padding-inline-start:20px; display:grid; gap:4px; }
.me-hist { box-shadow:inset 3px 0 0 var(--mw-fill2); padding-inline-start:var(--sp-3); display:grid; gap:6px; }
.me-hist b { color:var(--mw-mut); font-weight:var(--fw-med); font-size:var(--fs-foot); margin-inline-end:6px; }
.me-quote { box-shadow:inset 3px 0 0 var(--mw-on); padding:4px 0 4px var(--sp-3); font-style:italic; }
.me-gloss { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:6px var(--sp-4); margin:var(--sp-2) 0 0; }
.me-gloss dt { font-weight:var(--fw-med); } .me-gloss dd { margin:0; color:var(--mw-mut); }
.me-strengths { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-2); }

/* duʿāʾ text: the Arabic is the file's, the library's or Tanzil's, never typed */
.me-dua { background:var(--mw-fill); border-radius:var(--r-ctl); padding:var(--sp-3) var(--sp-4); display:grid; gap:4px; min-width:0; }
.me-dt { font:var(--fw-med) var(--fs-foot)/1.3 var(--ds-font); color:var(--mw-mut); }
.me-arline { font-family:var(--ds-font-ar); font-size:var(--fs-t2); line-height:2; direction:rtl; text-align:right; }
.me-arblock { background:var(--mw-fill); border-radius:var(--r-ctl); padding:var(--sp-2) var(--sp-4); min-width:0; }
.me-arblock.q .me-arline { font-family:var(--ds-font-quran); }
.me-duacard.att { box-shadow:inset 0 0 0 2px var(--me-improving); }
.me-duacard.att .me-arline { font-size:var(--fs-t1); }
.me-dtitle { font:var(--fw-bold) var(--fs-head)/1.3 var(--ds-font); }
.me-tr { color:var(--mw-mut); font:italic var(--fw-reg) var(--fs-sub)/1.45 var(--ds-font); }
.me-mean { line-height:1.5; }
.me-duacard .me-dbody { padding-inline-start:1.15em; gap:6px; line-height:1.45; }
.me-dbody li { padding-inline-start:2px; }
.me-dbody li::marker { color:var(--mw-mut); }
.me-src { overflow-wrap:anywhere; }
.me-dact { margin-top:var(--sp-1); }
.me-missing { background:color-mix(in srgb, var(--me-improving) 14%, transparent); border-radius:var(--r-ctl); padding:var(--sp-2) var(--sp-3); }
.me-dhead { display:flex; gap:var(--me-sp); align-items:flex-start; min-width:0; }
.me-dhl { flex:1; min-width:0; min-height:var(--tap); display:grid; gap:6px; align-content:center; }
.me-dhl .me-kick:empty { display:none; }
.me-win .me-ib { width:var(--tap); height:var(--tap); flex:none; display:grid; place-items:center; border-radius:var(--r-cap); background:var(--mw-fill); color:var(--mw-mut); }
.me-win .me-ib[aria-pressed="true"] { color:var(--me-improving); background:color-mix(in srgb, var(--me-improving) 16%, transparent); }
.me-win .me-ib[aria-pressed="true"] .ic { fill:currentColor; }
.me-win .me-ib.set { color:var(--mw-on); background:var(--mw-soft); }
.me-counter { display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.me-win .me-cbtn { min-width:var(--tap); min-height:var(--tap); border-radius:var(--r-cap); background:var(--mw-fill); font-weight:var(--fw-bold); font-size:var(--fs-head); }
.me-win .me-cbtn.plus { min-width:60px; background:var(--mw-soft); color:var(--mw-on); }
.me-cval { min-width:4.5em; text-align:center; font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); }
.me-cval.met { color:var(--me-done); }

/* buttons: prominent (the area's), plain fill; the one round button */
.me-win .me-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--tap); padding:0 var(--sp-4); border-radius:var(--r-cap); background:var(--mw-fill); color:var(--mw-ink); font-weight:var(--fw-bold); font-size:var(--fs-sub); }
.me-win .me-btn.pro { background:var(--me-strong); color:var(--me-strong-ink); }
.me-win .me-btn.danger { color:var(--c-danger); }
.me-win .me-btn[disabled] { opacity:.5; }
.me-win .me-round { width:var(--tap); height:var(--tap); flex:none; display:grid; place-items:center; border-radius:var(--r-cap); background:var(--mw-fill); color:var(--mw-ink); }
.me-win .me-addrow { width:100%; min-height:52px; border-radius:var(--r-grp); box-shadow:inset 0 0 0 1.5px var(--mw-on); color:var(--mw-on); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; gap:var(--sp-2); }

/* segmented + filters */
.me-seg { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border-radius:var(--r-cap); background:var(--mw-fill); max-width:100%; }
.me-seg.wrap { border-radius:var(--r-grp); }
.me-win .me-seg button { min-height:var(--tap); padding:0 var(--sp-4); border-radius:var(--r-cap); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.me-win .me-seg button[aria-pressed="true"] { background:var(--mw-group); font-weight:var(--fw-bold); box-shadow:var(--sh-thumb); }
.me-filters { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.me-win .me-filters button { min-height:var(--tap); padding:0 var(--sp-4); border-radius:var(--r-cap); background:var(--mw-fill); font-weight:var(--fw-med); font-size:var(--fs-sub); }
.me-win .me-filters button[aria-pressed="true"] { background:var(--mw-on); color:var(--mw-on-ink); }

/* week */
.me-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2); }
.me-stat { background:var(--mw-group); border-radius:var(--r-grp); padding:var(--sp-3); display:grid; gap:2px; min-width:0; }
.me-stat b { font:var(--fw-heavy) var(--fs-t1)/1.1 var(--ds-font); }
.me-stat span { color:var(--mw-mut); font-size:var(--fs-foot); }
.me-week { width:100%; border-collapse:collapse; table-layout:fixed; font-size:var(--fs-foot); }
.me-week th, .me-week td { padding:6px 1px; text-align:center; box-shadow:inset 0 -.5px 0 var(--mw-sep); overflow:hidden; text-overflow:ellipsis; }
.me-week th:first-child, .me-week td:first-child { text-align:start; width:38%; padding-inline-end:var(--sp-2); }
.me-week td.c span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:var(--r-cap); background:var(--mw-fill); }
.me-week td.c span.on { background:var(--mw-on); color:var(--mw-on-ink); }
.me-week td.c .ic { width:14px; height:14px; stroke-width:2.6; }
.me-week th.today { color:var(--mw-on); }
.me-week tr.tot td { font-weight:var(--fw-bold); box-shadow:none; }

/* your file, and the first-run choices: rows in the window's language */
.me-win .me-frow, .me-win .me-choice { position:relative; display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--row-h); padding:var(--sp-3) var(--sp-4); text-align:start; }
.me-win .me-frow + .me-frow::before, .me-win .me-choice + .me-choice::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(--mw-sep); }
.me-fi { width:30px; height:30px; flex:none; border-radius:var(--r-icon); background:var(--mw-on); color:var(--mw-on-ink); display:grid; place-items:center; }
.me-fi .ic { width:18px; height:18px; }
.me-frow.danger .me-fi { background:var(--c-danger); }
.me-frow.danger b { color:var(--c-danger); }
.me-ft { flex:1; min-width:0; display:grid; gap:2px; }
.me-ft b { font-weight:var(--fw-med); }
.me-ft small { color:var(--mw-mut); font-size:var(--fs-foot); line-height:1.35; }
.me-chev { width:15px; height:15px; color:var(--mw-mut); flex:none; }
.me-welcome { display:grid; gap:var(--sp-4); }
.me-lead { font:var(--fw-med) var(--fs-head)/1.45 var(--ds-font); }
.me-choices .me-fi { width:var(--tap); height:var(--tap); border-radius:var(--r-ctl); }
.me-choices .me-ft b { font-weight:var(--fw-bold); font-size:var(--fs-head); }
.me-empty { display:grid; justify-items:center; gap:6px; padding:var(--sp-5) var(--sp-4); text-align:center; background:var(--mw-group); border-radius:var(--r-grp); }
.me-eg { width:var(--tap); height:var(--tap); border-radius:var(--r-ctl); background:var(--mw-fill); color:var(--me-ink2); display:grid; place-items:center; }
.me-empty b { font:var(--fw-heavy) var(--fs-t3)/1.2 var(--ds-font); }
.me-empty small { color:var(--mw-mut); font-size:var(--fs-sub); max-width:34ch; }
.me-empty .me-btn { margin-top:var(--sp-2); }

/* the Dial */
.me-quick { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); }
.me-win .me-qb { min-height:60px; border-radius:var(--r-grp); background:color-mix(in srgb, var(--me-active) 12%, var(--mw-group)); box-shadow:inset 0 0 0 1.5px var(--me-active); display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); text-align:start; font-weight:var(--fw-bold); min-width:0; }
.me-qb .ic { color:var(--me-active); width:24px; height:24px; }
.me-qb .n { margin-inline-start:auto; color:var(--mw-mut); font-size:var(--fs-foot); }
.me-dgrid { display:grid; gap:var(--sp-4); min-width:0; }
.me-dialcol, .me-dlist { min-width:0; display:grid; gap:var(--sp-3); align-content:start; }
.me-dial { position:relative; width:min(100%, 360px); margin:0 auto; aspect-ratio:1; }
.me-dial svg { display:block; width:100%; height:100%; overflow:visible; }
/* the ring: 44 wide; each part a calm shade of the area colour in turn, thin gaps show the track between them */
.me-dial .track { fill:none; stroke:var(--mw-fill); stroke-width:44; }
.me-dial .arc { fill:none; stroke-width:44; cursor:pointer; stroke:color-mix(in srgb, var(--mw-on) 14%, var(--mk-page)); transition:stroke var(--dur-2) var(--ease-out); }
.me-dial .arc.t1 { stroke:color-mix(in srgb, var(--mw-on) 34%, var(--mk-page)); }
.me-dial .arc.t2 { stroke:color-mix(in srgb, var(--mw-on) 24%, var(--mk-page)); }
.me-dial .arc.t3 { stroke:color-mix(in srgb, var(--mw-on) 44%, var(--mk-page)); }
.me-dial .arc.now { stroke:color-mix(in srgb, var(--mw-on) 62%, var(--mk-page)); }
.me-dial .arc.sel { stroke:var(--mw-on); }
.me-dial .arc:focus { outline:none; } .me-dial .arc:focus-visible { stroke:var(--mw-ink); }
.me-dial .alab { fill:var(--mw-ink); font:var(--fw-bold) var(--fs-cap)/1 var(--ds-font); text-anchor:middle; }
.me-dial .alab.on { fill:var(--mw-on-ink); }
.me-dial .hr { fill:var(--mw-mut); font:var(--fw-med) var(--fs-cap)/1 var(--ds-font); font-variant-numeric:tabular-nums; text-anchor:middle; dominant-baseline:central; }
.me-dial .tk { stroke:var(--mw-fill2); stroke-width:2; stroke-linecap:round; }
.me-dial .hr, .me-dial .tk, .me-dial .handg, .me-dial .alab { pointer-events:none; }
.me-dial .hand { stroke:var(--me-active); stroke-width:4; stroke-linecap:round; }
.me-dial .knob { fill:var(--me-active); stroke:var(--mw-group); stroke-width:3; }
.me-ctr { position:absolute; inset:27%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; gap:2px; }
.me-ctr .k { font:var(--fw-bold) var(--fs-foot)/1.2 var(--ds-font); color:var(--mw-on); }
.me-ctr .k.hrs { color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.me-ctr .n { font:var(--fw-bold) var(--fs-call)/1.25 var(--ds-font); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.me-ctr .m { color:var(--mw-mut); font-size:var(--fs-foot); }
.me-dial.mini { width:min(100%, 280px); }
.me-caps, .me-fcaps { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }
.me-fcaps { justify-content:flex-start; margin:var(--sp-2) 0; }
.me-win .me-pc { min-height:var(--tap); padding:4px var(--sp-3); border-radius:var(--r-cap); background:var(--mw-group); box-shadow:inset 0 0 0 .5px var(--mw-sep); display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sub); text-align:start; }
.me-pc small { color:var(--mw-mut); font-size:var(--fs-cap); }
.me-pc.untimed { box-shadow:inset 0 0 0 1px var(--mw-fill2); background:var(--mw-fill); }
.me-pc.nowc { box-shadow:inset 0 0 0 1.5px var(--mw-on); }
.me-pc.nowc small { color:var(--mw-on); font-weight:var(--fw-bold); }
.me-win .me-pc[aria-pressed="true"] { background:var(--mw-on); color:var(--mw-on-ink); box-shadow:none; }
.me-win .me-pc[aria-pressed="true"] small { color:inherit; }
.me-pc .tickm { display:none; width:16px; height:16px; } .me-pc[aria-pressed="true"] .tickm { display:inline; }
/* the parts: a two-column grid of equal cells, the name leading, the hours trailing */
.me-pgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); }
.me-win .me-pgrid .me-pc { display:flex; width:100%; min-width:0; justify-content:space-between; gap:var(--sp-2); border-radius:var(--r-ctl); padding:4px var(--sp-3); line-height:1.25; }
.me-pgrid .me-pc .nm { flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; font-weight:var(--fw-med); }
.me-pgrid .me-pc small { flex:none; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:end; font-variant-numeric:tabular-nums; }
@media (max-width:480px), (min-width:1000px) {   /* a phone, and the iPad's narrow dial column (audit D6-10: '05:30–0…'): the hours under the name, so both keep their line */
  .me-win .me-pgrid .me-pc { flex-direction:column; align-items:flex-start; justify-content:center; gap:0; padding:6px var(--sp-3); }
  .me-pgrid .me-pc .nm { -webkit-line-clamp:1; width:100%; overflow-wrap:normal; white-space:nowrap; text-overflow:ellipsis; display:block; }
  .me-pgrid .me-pc small { max-width:100%; text-align:start; }
}
.me-dtools { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }
/* a list's head: the name on one line, a quiet second line (hours · now · said) */
.me-lhead, .me-dsub { display:grid; gap:2px; min-width:0; }
.me-lhead .t, .me-dsub .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-lhead .t { font:var(--fw-heavy) var(--fs-t3)/1.25 var(--ds-font); letter-spacing:var(--ds-track-title); }
.me-dsub { font:var(--fw-bold) var(--fs-head)/1.3 var(--ds-font); margin-top:var(--sp-3); padding-top:var(--sp-3); box-shadow:inset 0 .5px 0 var(--mw-sep); scroll-margin-top:var(--sp-3); }
.me-hmeta { font:var(--fw-reg) var(--fs-foot)/1.35 var(--ds-font); color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.me-nowtxt { color:var(--mw-on); font-weight:var(--fw-bold); }
#me-sitlist { display:grid; gap:var(--sp-3); scroll-margin-top:var(--sp-3); }
.me-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-2); }
.me-win .me-stile { min-height:76px; border-radius:var(--r-grp); background:var(--mw-group); padding:var(--sp-2) var(--sp-3); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:4px; text-align:start; font-weight:var(--fw-med); min-width:0; }
.me-stile .ic { color:var(--mw-on); }
.me-stile .m { color:var(--mw-mut); font-size:var(--fs-foot); font-weight:var(--fw-reg); }
.me-win .me-stile[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--mw-on); background:var(--mw-soft); }
.me-modes { justify-content:flex-start; }
@media (max-width:420px) { .me-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } .me-stats b { font-size:var(--fs-t2); } }
/* iPad 13" and up: a wider window, the dial beside the list; the dial's column stays in view while the list scrolls */
@media (min-width:1000px) {
  .mw.me-win { width:min(92vw, 980px); }
  .me-dgrid { grid-template-columns:minmax(300px, 360px) minmax(0,1fr); gap:var(--sp-5); align-items:start; }
  .me-dialcol { position:sticky; top:var(--sp-3); }
}
/* the scroll edge: the head's hairline, and the list fades in under it instead of being cut */
.me-win.me-sc .mw-head { box-shadow:inset 0 -.5px 0 var(--mw-sep); }
.me-win.me-sc .mw-body { -webkit-mask-image:linear-gradient(to bottom, transparent, black var(--sp-4)); mask-image:linear-gradient(to bottom, transparent, black var(--sp-4)); }
/* the toast while Me is open: at the top, off the list's buttons; a tap dismisses it */
.ds-toast.me-t { top:calc(var(--sp-4) + env(safe-area-inset-top, 0px)); bottom:auto; translate:-50% -220%; cursor:pointer; }
.ds-toast.me-t.show { translate:-50% 0; }

/* the overlay page: builder, reminder, Edit day, forms — it covers the window's body */
.me-over { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; background:var(--mk-page); color:var(--mw-ink); border-radius:inherit; }
.me-ohd { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); box-shadow:inset 0 -.5px 0 var(--mw-sep); }
.me-ohd h2 { margin:0; flex:1; min-width:0; font:var(--fw-heavy) var(--fs-t2)/1.2 var(--ds-font); letter-spacing:var(--ds-track-title); }
.me-obody { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:var(--sp-3) var(--sp-4); display:grid; gap:var(--sp-3); align-content:start; }
.me-ofoot { display:flex; flex-wrap:wrap; gap:var(--me-sp); justify-content:flex-end; padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); box-shadow:inset 0 .5px 0 var(--mw-sep); }
.me-fld { min-height:var(--tap); min-width:var(--tap); max-width:100%; border:0; border-radius:var(--r-ctl); background:var(--mw-fill); color:var(--mw-ink); padding:6px var(--sp-3); font:var(--fw-reg) var(--fs-call)/1.3 var(--ds-font); }
.me-fld.wide { width:100%; }
textarea.me-fld { resize:vertical; }
.me-lab { display:grid; gap:6px; }
.me-lab > span { display:grid; font-weight:var(--fw-med); }
.me-lab small, .me-frow2 small { color:var(--mw-mut); font-size:var(--fs-foot); font-weight:var(--fw-reg); }
.me-frow2 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-top:var(--sp-3); box-shadow:inset 0 .5px 0 var(--mw-sep); }
.me-frow2 > span:first-child { display:grid; font-weight:var(--fw-med); }
.me-win .me-sw { position:relative; width:60px; min-height:var(--tap); border-radius:var(--r-cap); background:var(--mw-fill2); flex:none; transition:background var(--dur-2) var(--ease-out); }
.me-sw::after { content:""; position:absolute; top:50%; left:6px; width:28px; height:28px; border-radius:var(--r-cap); background:var(--c-knob); box-shadow:var(--sh-knob); transform:translateY(-50%); transition:left var(--dur-2) var(--ease-out); }
.me-win .me-sw[aria-checked="true"] { background:var(--mw-on); }
.me-sw[aria-checked="true"]::after { left:26px; }
.me-hits { display:grid; gap:6px; }
.me-win .me-hit { min-height:56px; border-radius:var(--r-ctl); background:var(--mw-group); box-shadow:inset 0 0 0 .5px var(--mw-sep); text-align:start; padding:var(--sp-2) var(--sp-3); display:grid; gap:2px; min-width:0; }
.me-hit .t { font-weight:var(--fw-bold); } .me-hit .m { color:var(--mw-mut); font-size:var(--fs-foot); }
.me-minibox { display:grid; }
.me-prow2 { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--me-sp); align-items:center; padding:var(--sp-2) 0; box-shadow:inset 0 .5px 0 var(--mw-sep); }
.me-prow2 .nm { width:100%; }
.me-prow2 .me-btn { grid-column:1 / -1; justify-self:start; }
@media (max-width:520px) { .me-prow2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .me-prow2 .nm { grid-column:1 / -1; } .me-prow2 input[type=time] { width:100%; min-width:0; } }

/* the nudge: rises inside the window while Me is open */
.me-nudge { position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); z-index:6; display:flex; gap:var(--sp-2); align-items:center; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background:var(--mk-page); border-radius:var(--r-grp); box-shadow:inset 0 0 0 2px var(--mw-on), var(--sh-float); transform:translateY(160%); transition:transform var(--dur-3) var(--ease-back); }
.me-nudge.on { transform:none; }
.me-nudge > .ic { color:var(--mw-on); }
.me-nudge .tx { flex:1; min-width:0; display:grid; } .me-nudge .tx span { color:var(--mw-mut); font-size:var(--fs-foot); }