/* styles/me-day.css — v1494. YOUR DAY inside Me (modules/tools/me-day.js): the owner's pick "A · The line".
   One vertical line with dots and times, parts that fold, a now line, items that open in place, the inline composer and
   the duʿāʾ picker. Drawn inside the mode window (.mw, AL.8) like Me itself (styles/me.css).
   VALUES: tokens only — the window's --mw-* (surfaces, ink, hairlines; the Quiet Glass --q-* reach them through
   styles/ql/ql.css), styles/ds.css (corners --r-*, the type ramp --fs-*, weights, spacing, motion), and the owner's ACCENT
   (--q-acc → --c-accent: clay by default, Settings › Appearance › Accent) — no Worship rose. "From Me" wears the Learn
   hue (--q-learn / --c-learn) so a nudge reads apart from a prayer. No colour, corner, size or curve of its own.
   Light and dark follow the window. SAFE TO DELETE: with modules/tools/me-day.js. */

.mw.md-win {
  --md-acc:var(--q-acc, var(--c-accent)); --md-acc-soft:var(--q-acc-soft, var(--c-accent-soft)); --md-acc-ink:var(--q-acc-ink, var(--c-accent-ink));
  --md-me:var(--q-learn, var(--c-learn)); --md-me-soft:color-mix(in srgb, var(--md-me) 14%, transparent);
  --md-strong:var(--q-strong, var(--c-ink)); --md-strong-ink:var(--q-strong-ink, var(--c-page));
  --md-page:var(--q-page, var(--c-page)); --md-ink2:var(--q-ink2, var(--c-ink2));
}
@media (min-width:900px) { .mw.md-win { width:min(92vw, 720px); } }
.md-win .mw-pane { min-width:0; position:relative; }   /* M4-R1: the list's moving rows leave their ghosts in a layer here */
.md { display:grid; gap:var(--sp-2); min-width:0; padding-top:var(--sp-1); }
.md :where(p) { margin:0; }
.md button { font:inherit; color:inherit; cursor:pointer; }
.md button:focus-visible, .md :is(input, select, textarea):focus-visible { outline:2px solid var(--md-acc); outline-offset:2px; }

/* the two calm rows: no location · no Me file */
.md-calm { display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap); width:100%; padding:var(--sp-2) var(--sp-4); border:0; border-radius:var(--r-grp);
  background:var(--mw-group); color:var(--mw-ink); text-align:left; font-size:var(--fs-sub); }
.md-calm span { flex:1; min-width:0; }
.md-calm .ic { flex:none; color:var(--mw-mut); }
.md-calm.quiet { background:none; color:var(--mw-mut); padding-top:0; padding-bottom:0; }
.md-quiet { color:var(--mw-mut); font-size:var(--fs-sub); }
.md-quiet.pad { padding:var(--sp-3); }
.md-cap { color:var(--mw-mut); font-size:var(--fs-sub); }

/* a part of the day: its head folds it */
.md-part { display:flex; flex-direction:column; min-width:0; }
.md-ph { display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); width:100%; padding:var(--sp-1) var(--sp-1); border:0; background:none; text-align:left; }
.md-ph b { font-weight:var(--fw-med); font-size:var(--fs-sub); }
.md-ph span { color:var(--mw-mut); font-size:var(--fs-sub); font-variant-numeric:tabular-nums; min-width:0; }
.md-ph .ic { margin-left:auto; flex:none; color:var(--mw-mut); transition:transform var(--dur-2) var(--ease-out); }
.md-part.shut .md-ph .ic { transform:rotate(-90deg); }
.md-list { position:relative; display:flex; flex-direction:column; min-width:0; }

/* the line: time · dot · item */
.md-it { position:relative; display:grid; grid-template-columns:52px 22px minmax(0,1fr); column-gap:6px; }
.md-it::before { content:""; position:absolute; left:68px; top:0; bottom:0; width:2px; background:var(--mw-sep); }
.md-it:first-child::before { top:22px; }
.md-it:last-child::before { bottom:calc(100% - 22px); }
.md-it:only-child::before { display:none; }
.md-tm { padding-top:12px; text-align:right; color:var(--mw-mut); font-size:var(--fs-sub); line-height:1.3; font-variant-numeric:tabular-nums; }
.md-dot { position:relative; z-index:1; width:14px; height:14px; margin:15px 4px 0; border-radius:var(--r-cap); background:var(--md-page); box-shadow:inset 0 0 0 2px var(--mw-mut); }
.md-it.pr .md-dot { width:16px; height:16px; margin:14px 3px 0; box-shadow:inset 0 0 0 3px var(--md-acc); }
.md-it.me .md-dot { box-shadow:inset 0 0 0 2px var(--md-me); }
.md-it.blk .md-dot { width:10px; height:auto; margin:12px 6px 6px; border-radius:var(--r-cap); background:var(--md-strong); box-shadow:none; }
.md-it.done .md-dot { background:var(--md-acc); box-shadow:none; }
.md-it.now .md-dot { box-shadow:inset 0 0 0 3px var(--md-acc), 0 0 0 5px var(--md-acc-soft); }
.md-it.now.done .md-dot { box-shadow:0 0 0 5px var(--md-acc-soft); }
.md-body { min-width:0; padding:var(--sp-3) 0 4px; }   /* 12 under the part's header (the floor between two controls) */
.md-hd { display:flex; align-items:center; flex-wrap:wrap; gap:4px var(--sp-2); width:100%; min-height:var(--tap); padding:6px var(--sp-2); border:0; border-radius:var(--r-ctl); background:none; text-align:left; }
.md-hd b { flex:1 1 8em; min-width:0; font-weight:var(--fw-reg); font-size:var(--fs-call); line-height:1.3; }
.md-it.done .md-hd b { color:var(--mw-mut); }
.md-it.open .md-hd { background:var(--mw-group); border-radius:var(--r-ctl) var(--r-ctl) 0 0; }
.md-x { background:var(--mw-group); border-radius:0 0 var(--r-ctl) var(--r-ctl); padding:2px var(--sp-2) var(--sp-3); min-width:0; }
.md-cnt { color:var(--mw-mut); font-size:var(--fs-sub); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* the tag: what kind of thing it is */
.md-tag { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:var(--r-cap); font-size:var(--fs-cap); font-weight:var(--fw-med); white-space:nowrap;
  background:var(--mw-fill); color:var(--md-ink2); }
.md-tag.pr { background:var(--md-acc-soft); color:var(--md-acc); }
.md-tag.me { background:var(--md-me-soft); color:var(--md-me); }
.md-tag.blk { background:var(--md-strong); color:var(--md-strong-ink); }

/* now */
.md-now { display:grid; grid-template-columns:52px 22px minmax(0,1fr); column-gap:6px; align-items:center; min-height:20px; color:var(--md-acc); font-size:var(--fs-cap); font-weight:var(--fw-med); }
.md-now i { font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.md-now span { grid-column:2 / 4; height:2px; border-radius:var(--r-cap); background:var(--md-acc); }

/* an open item: the nudge, the duʿāʾ, the steps */
.md-nudge { display:flex; gap:var(--sp-2); margin-top:var(--sp-1); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-ctl); background:var(--md-me-soft); font-size:var(--fs-sub); line-height:1.45; }
.md-nudge b { color:var(--md-me); font-weight:var(--fw-med); }
.md-dua { display:grid; gap:6px; padding:var(--sp-2) var(--sp-1) 0; min-width:0; }
.md-ar { font-family:var(--ds-font-ar); font-size:var(--fs-t2); line-height:2; direction:rtl; text-align:right; unicode-bidi:isolate; overflow-wrap:anywhere; }
.md-ar[data-q] { font-family:var(--f-quran); }   /* v1565: an āyah (Tanzil) in the Qurʾān face */
.md-ref { color:var(--mw-mut); font-size:var(--fs-sub); }
.md-mean { color:var(--md-ink2); font-size:var(--fs-sub); line-height:1.45; }
.md-sel .md-mean { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.md-steps { display:flex; flex-direction:column; gap:var(--q-sp, var(--sp-3)); padding:var(--sp-1) 0 2px; }
.md-x > .md-steps:first-child { padding-top:calc(var(--q-sp, var(--sp-3)) - 2px); }   /* audit D6-16: with .md-x's 2, 12 from the item's header to its first step */
.md-phase { padding:var(--sp-2) var(--sp-1) 0; color:var(--mw-mut); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.md-step { display:flex; align-items:center; gap:var(--q-sp, var(--sp-3)); min-width:0; }   /* audit D6-16: 12 between two controls */
.md-tr { flex:1; min-width:0; display:flex; align-items:flex-start; gap:var(--sp-3); min-height:var(--tap); padding:var(--sp-2) var(--sp-1); border:0; border-radius:var(--r-ctl); background:none; text-align:left; }
.md-tick { flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:1px; border-radius:var(--r-cap); box-shadow:inset 0 0 0 1.6px var(--mw-mut); color:transparent; }
.md-tick .ic { width:14px; height:14px; stroke-width:3; }
.md-step.done .md-tick { background:var(--md-acc); box-shadow:none; color:var(--md-acc-ink); }
.md-sx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.md-sx b { font-weight:var(--fw-reg); font-size:var(--fs-sub); line-height:1.35; overflow-wrap:anywhere; }
.md-sx i { font-style:normal; color:var(--mw-mut); font-size:var(--fs-sub); line-height:1.35; }
.md-step.done .md-sx b { color:var(--mw-mut); text-decoration:line-through; text-decoration-color:var(--mw-sep); }
.md-open { flex:none; min-height:var(--tap); min-width:var(--tap); padding:0 var(--sp-3); border:0; border-radius:var(--r-cap); background:var(--mw-fill); color:var(--md-acc); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.md-acts { display:flex; flex-wrap:wrap; gap:var(--q-sp, var(--sp-3)); padding-top:calc(var(--q-sp, var(--sp-3)) - 2px); }   /* audit D6-16: with .md-steps' 2, 12 from the last step */

/* pills and the one dark button */
.md-pill { min-height:var(--tap); padding:0 var(--sp-4); border:0; border-radius:var(--r-cap); background:var(--mw-fill); font-size:var(--fs-sub); font-weight:var(--fw-reg); }
.md-pill.on { background:var(--md-acc-soft); color:var(--md-acc); font-weight:var(--fw-med); }
.md-go { min-height:var(--tap); padding:0 var(--sp-5); border:0; border-radius:var(--r-cap); background:var(--md-strong); color:var(--md-strong-ink); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.md .md-go { color:var(--md-strong-ink); }

/* the composer */
.md-cmp { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-grp); background:var(--mw-group); box-shadow:inset 0 0 0 1.5px var(--md-acc); min-width:0; }
.md-kinds { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.md-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); min-width:0; }
.md-row > * { flex:1 1 140px; min-width:0; }
.md-row.md-end { justify-content:flex-end; }
.md-row.md-end > * { flex:0 1 auto; }
.md-lab { display:flex; flex-direction:column; gap:4px; color:var(--mw-mut); font-size:var(--fs-sub); min-width:0; }
.md-lab[hidden] { display:none; }
.md-cmp :is(input, select, textarea) { width:100%; min-width:0; min-height:var(--tap); padding:0 var(--sp-3); border:0; border-radius:var(--r-ctl); background:var(--mw-fill); color:var(--mw-ink);
  font-family:var(--ds-font); font-size:var(--fs-call); box-sizing:border-box; }
.md-cmp textarea { min-height:104px; padding:var(--sp-2) var(--sp-3); line-height:1.4; resize:vertical; }
.md-cmp input::placeholder, .md-cmp textarea::placeholder { color:var(--mw-mut); }

/* the duʿāʾ picker: search, then the shelves */
#md-pick { display:grid; gap:var(--sp-2); min-width:0; }
.md-pl { display:flex; flex-direction:column; max-height:340px; overflow-y:auto; overscroll-behavior:contain; border-radius:var(--r-ctl); background:var(--mw-fill); }
.md-pr { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:52px; padding:var(--sp-2) var(--sp-3); border:0; border-top:1px solid var(--mw-sep); background:none; text-align:left; }
.md-pr:first-child { border-top:0; }
.md-pr .md-sx { flex:1; }
.md-pr .md-sx i { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.md-crumb { display:flex; align-items:center; flex-wrap:wrap; gap:4px var(--sp-2); color:var(--mw-mut); font-size:var(--fs-sub); }
.md-crumb button { min-height:var(--tap); padding:0 2px; border:0; background:none; color:var(--md-acc); font-weight:var(--fw-med); }
.md-sel { display:grid; gap:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-ctl); background:var(--mw-fill); min-width:0; }
.md-selh { display:flex; align-items:center; gap:var(--sp-2); }
.md-sel .md-pill { background:var(--mw-group); }
.md-selh b { flex:1; min-width:0; font-weight:var(--fw-med); font-size:var(--fs-call); }

/* Me's entry row (me.js): a little air above it */
.me-win .me-dayentry { margin-top:var(--sp-2); }

@media (prefers-reduced-motion:reduce) { .md-ph .ic { transition:none; } }

/* the To-do tab (owner 2026-10-03: "like the one from Microsoft To Do"): add row, round ticks, stars, Completed, a task's page,
   swipe to delete, hold to drag. Today only. */
.md-todo { gap:var(--sp-2); }
.td-add { display:flex; align-items:center; gap:var(--q-sp, var(--sp-3)); min-height:52px; padding:0 var(--sp-2) 0 var(--sp-1); border-radius:var(--r-grp); background:var(--mw-group); min-width:0; }
.td-add.sm { min-height:var(--tap); background:none; padding:0; }
.td-plus { flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border:0; border-radius:var(--r-cap); background:none; color:var(--md-acc); }
.td-add input { flex:1; min-width:0; min-height:var(--tap); padding:0 var(--sp-1); border:0; background:transparent; color:var(--mw-ink); font:inherit; font-size:var(--fs-body, 17px); -webkit-appearance:none; appearance:none; }
.td-add.sm input { font-size:var(--fs-sub); }
.td-add input::placeholder { color:var(--md-acc); opacity:1; }
.td-add input:focus::placeholder { color:var(--mw-mut); }
.md .td-add input:focus-visible { outline:0; }
.td-add:focus-within { box-shadow:inset 0 0 0 1.5px var(--md-acc); }
.td-add.sm:focus-within { box-shadow:none; }
.md-tdnone { padding:var(--sp-4) var(--sp-1); }
.td-list { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }   /* audit D6-16: with the 6 above and below a 44 key in its 56 row, a tick sits 14 from the next row */
.td-row { position:relative; border-radius:var(--r-ctl); overflow:hidden; min-width:0; }
.td-bin { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); padding-right:var(--sp-5); border-radius:var(--r-ctl);
  background:color-mix(in srgb, var(--q-danger, var(--warn-amber)) 70%, var(--mw-group)); color:var(--q-white); font-size:var(--fs-sub); font-weight:var(--fw-med); opacity:0; }
.td-row.swiping .td-bin { opacity:1; }
.td-row.arm .td-bin { background:var(--q-danger, var(--warn-amber)); }
.td-fg { position:relative; display:flex; align-items:center; gap:2px; min-height:56px; padding:0 var(--sp-1); border-radius:var(--r-ctl); background:var(--mw-group);
  touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:transform var(--dur-2, .28s) var(--ease-out); }
.td-row.swiping .td-fg { transition:none; }
.td-row.lift { z-index:2; overflow:visible; transition:none; }
.td-row.lift .td-fg { box-shadow:0 10px 28px var(--q-k-0-22); transform:scale(1.02); }
.td-dragging .td-row:not(.lift) { transition:transform var(--dur-2, .28s) var(--ease-out); }
.md .td-ck { flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border:0; background:none; color:transparent; position:relative; }
.td-ck::before { content:""; position:absolute; width:22px; height:22px; border-radius:var(--r-cap); box-shadow:inset 0 0 0 1.6px var(--mw-mut); }
.td-ck .ic { position:relative; width:13px; height:13px; stroke-width:3; }
.td-ck[aria-pressed="true"]::before { background:var(--md-acc); box-shadow:none; }
.td-ck[aria-pressed="true"] .ic { color:var(--md-acc-ink); }
.td-ck.sm::before { width:18px; height:18px; }
.td-open { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:56px; padding:var(--sp-2) var(--sp-1); border:0; background:none; text-align:left; }
.td-open b { font-weight:var(--fw-reg); font-size:var(--fs-body, 17px); line-height:1.3; overflow-wrap:anywhere; }
.td-open i { display:flex; align-items:center; gap:4px; font-style:normal; color:var(--mw-mut); font-size:var(--fs-cap, 13px); }
.td-row.done .td-open b { color:var(--mw-mut); text-decoration:line-through; }
.td-star { flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border:0; background:none; color:var(--mw-mut); }
.td-star.on { color:var(--md-acc); }
.td-star.on svg path { fill:currentColor; }
.td-donehd { display:flex; align-items:center; gap:var(--sp-2); justify-self:start; min-height:var(--tap); margin-top:var(--sp-2); padding:0 var(--sp-3); border:0; border-radius:var(--r-ctl); background:var(--mw-group); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.td-donehd svg { transition:transform var(--dur-2, .28s) var(--ease-out); }
.td-donehd.on svg { transform:rotate(90deg); }
.td-back { display:flex; align-items:center; gap:4px; justify-self:start; min-height:var(--tap); padding:0 var(--sp-3) 0 var(--sp-1); border:0; border-radius:var(--r-cap); background:none; color:var(--md-acc); font-size:var(--fs-sub); font-weight:var(--fw-med); }
.td-dh { display:flex; align-items:center; gap:2px; min-height:60px; padding:0 var(--sp-1); border-radius:var(--r-grp); background:var(--mw-group); min-width:0; }
.td-dh input { flex:1; min-width:0; min-height:var(--tap); padding:0 var(--sp-1); border:0; border-radius:var(--r-ctl); background:transparent; color:var(--mw-ink); font:inherit; font-size:var(--fs-title, 20px); font-weight:var(--fw-med); -webkit-appearance:none; appearance:none; }
.td-dh.done input { text-decoration:line-through; color:var(--mw-mut); }
.td-steps { display:flex; flex-direction:column; padding:var(--sp-1) var(--sp-1); border-radius:var(--r-grp); background:var(--mw-group); min-width:0; }
.td-step { display:flex; align-items:center; gap:2px; min-height:var(--tap); border-bottom:1px solid var(--mw-sep); min-width:0; }
.td-step span { flex:1; min-width:0; font-size:var(--fs-sub); overflow-wrap:anywhere; }
.td-step.done span { color:var(--mw-mut); text-decoration:line-through; }
.td-sx { flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); border:0; border-radius:var(--r-cap); background:none; color:var(--mw-mut); }
.td-note { display:flex; flex-direction:column; gap:4px; padding:var(--sp-2) var(--sp-3) var(--sp-3); border-radius:var(--r-grp); background:var(--mw-group); color:var(--mw-mut); font-size:var(--fs-sub); min-width:0; }
.td-note textarea { width:100%; min-width:0; min-height:96px; padding:0; border:0; background:transparent; color:var(--mw-ink); font:inherit; font-size:var(--fs-sub); line-height:1.45; resize:vertical; }
.md .td-note textarea:focus-visible, .md .td-dh input:focus-visible { outline:0; }
.td-note:focus-within, .td-dh:focus-within { box-shadow:inset 0 0 0 1.5px var(--md-acc); }
.td-dfoot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-1) var(--sp-1) 0; }
.td-delb { display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); padding:0 var(--sp-4); border:0; border-radius:var(--r-cap); background:var(--mw-fill); color:var(--q-danger, var(--warn-amber)); font-size:var(--fs-sub); font-weight:var(--fw-med); }
@media (prefers-reduced-motion:reduce) { .td-fg, .td-dragging .td-row, .td-donehd svg { transition:none; } }