/* Mellow's stylesheet, SCOPED to its own domain.
 *
 * GENERATED by tools/scope-focus-css.py - not a verbatim lift, unlike
 * sleep.css and still.css. Re-lift from Mellow and re-run that script rather
 * than hand-editing selectors here; its header explains every rule applied.
 *
 * The short version: Mellow was never built on the family shell, so its CSS
 * reached the whole document - the entire token palette, body, button, h1-h3,
 * *::before, and nine class names the family also uses. Loaded unscoped it won,
 * and the golden masters caught it within seconds: Sleep's two buttons stopped
 * sharing a line, because Mellow's `.btn { display:flex; width:100% }` beat the
 * family's `inline-flex`. Everything else it was quietly changing - colours,
 * radii, shadows - no test could have seen.
 *
 * Mellow's own comments are preserved verbatim below.
 */
/* ============================================================================
   MELLOW — FOCUS COMPANION
   Built for iPhone. One screen at a time, one task at a time.
   ----------------------------------------------------------------------------
   ⭐ THE SWAP POINT ⭐
   Every colour, radius and shadow comes from the semantic tokens in the three
   :root blocks below. Nothing below them names a colour literal. To re-skin
   Mellow to match another app in the family (Workout Log), change ONLY those
   three blocks and the two font stacks. That is the whole migration.
   ========================================================================== */
.dom-focus {color-scheme: light dark; /* Warm-grey neutrals — the fixed, considered base (Workout Log family). */
  --canvas:        #f0efec; /* The focus room — dark in BOTH themes. It fills the whole screen. */
  --room:           #141311; --room-lift:      #242422; --room-ink:       #ffffff; --room-ink-muted: #c3c2b7; --room-edge:      rgba(255,255,255,.13); /* ── THE ACCENT ── the one hue that moves. Default: ember. ─────────────── */
  --accent:      #c43f0b; /* darker, for the accent used as small text */
  --accent-hi:   #ca4c0b; /* top of a button gradient */
  --accent-lo:   #c43f0b; /* bottom of that gradient */
  --accent-ink:  #ffffff; /* text/glyph ON the accent */
  --accent-wash: rgba(196,63,11,.10); --accent-on-dark: #f97b22; /* what the dark theme uses; the room borrows it in both themes */

  /* Splash / icon ground — follows the accent, NOT the theme (not redefined in the dark blocks). */
  --icon-hi:   #c43f0b; /* Mellow's warm / primary / ring now READ from the accent, so one choice moves them all.
     These routes live only here — they re-resolve per theme via the in-scope --accent. */
  --primary:     var(--accent); --primary-ink: var(--accent-ink); --warm:          var(--accent); --warm-strong:   var(--accent); --warm-on-room:  var(--accent-on-dark); /* the room is dark in BOTH themes, so it needs the lifted accent */
  --warm-text:     var(--accent-text); /* Used by exactly one control: deleting everything. */
  --danger:     #d03b3b; --danger-ink: #ffffff; --ring: var(--accent); --shadow-up:   0 -6px 28px -10px rgba(20,20,18,.20); --scrim:       rgba(20,19,17,.5); --r-lg:   20px; --r-md:   14px; --r-sm:   10px; --r-pill: 999px; --font-instrument: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --tap: 48px; --pad: 1.25rem; --track-fill: var(--accent);}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dom-focus {--room:           #141311; --room-lift:      #242422; --room-ink:       #ffffff; --room-ink-muted: #c3c2b7; --room-edge:      rgba(255,255,255,.13); /* accent: ember, lifted for dark. warm/primary/ring re-resolve to this via the base routes. */
    --accent:      #f97b22; --danger-ink: #1a0f0d; --shadow-up:   0 -6px 28px -10px rgba(0,0,0,.55);}
}
:root[data-theme="dark"] .dom-focus {--room:           #141311; --room-lift:      #242422; --room-ink:       #ffffff; --room-ink-muted: #c3c2b7; --room-edge:      rgba(255,255,255,.13); --danger-ink: #1a0f0d; --shadow-up:   0 -6px 28px -10px rgba(0,0,0,.55);}/* ============================================================================
   ACCENT ALTERNATES — nine pickable hues. Neutrals never move; only these do.
   Light values (each also sets --icon-hi/-lo, which drive the splash ground).
   ========================================================================== */
html[data-accent="ocean"] .dom-focus {--accent-on-dark: #3aa6e0;}
html[data-accent="forest"] .dom-focus {--accent-on-dark: #54b96e;}
html[data-accent="plum"] .dom-focus {--accent-on-dark: #c176c6;}
html[data-accent="crimson"] .dom-focus {--accent-on-dark: #ef6274;}
html[data-accent="slate"] .dom-focus {--accent-on-dark: #8ea4bf;}
html[data-accent="gold"] .dom-focus {--accent-on-dark: #d9a63c;}
html[data-accent="teal"] .dom-focus {--accent-on-dark: #3fbdb4;}
html[data-accent="pink"] .dom-focus {--accent-on-dark: #f07aa6;}
html[data-accent="black"] .dom-focus {--accent-on-dark: #f2f2ef;}/* Dark counterparts. NOTE selector is :not([data-theme="light"]) (0,2,1) not
   :where(...) — it must out-specify the ember base at :root:not([data-theme="light"]).
   --icon-hi/-lo are absent on purpose: the splash ground follows the accent, not the theme. */
@media (prefers-color-scheme: dark) {
}/* Manual Dark toggle wins in both directions (0,2,1). *//* ============================================================================
   BASE
   ========================================================================== */
.dom-focus *, .dom-focus *::before, .dom-focus *::after { box-sizing: border-box; }
.dom-focus [hidden] { display: none !important; }
.dom-focus {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;              /* iOS body size */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  transition: background-color .45s ease;
}
.dom-focus.in-room { background: var(--room); }
.dom-focus h1, .dom-focus h2, .dom-focus h3, .dom-focus p, .dom-focus ul, .dom-focus ol, .dom-focus fieldset { margin: 0; }
.dom-focus ul, .dom-focus ol { padding: 0; list-style: none; }
.dom-focus fieldset { border: 0; padding: 0; min-width: 0; }
.dom-focus button, .dom-focus input, .dom-focus textarea { font: inherit; color: inherit; }
.dom-focus :where(h1, .dom-focus h2) { text-wrap: balance; }
.dom-focus :where(button, .dom-focus input, .dom-focus textarea, .dom-focus summary, .dom-focus [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.dom-focus [tabindex="-1"]:focus { outline: none; }
.dom-focus .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dom-focus .num { font-family: var(--font-instrument); font-variant-numeric: tabular-nums; }/* ============================================================================
   SCREENS — one at a time, phone width, safe-area aware
   ========================================================================== */
.dom-focus .stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.dom-focus .screen {
  flex: 1;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 1.25rem)
    calc(env(safe-area-inset-right) + var(--pad))
    calc(env(safe-area-inset-bottom) + 1.25rem)
    calc(env(safe-area-inset-left) + var(--pad));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.dom-focus .screen--room { color: var(--room-ink); }
.dom-focus .grow { flex: 1; }
.dom-focus .eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dom-focus .screen--room .eyebrow { color: var(--room-ink-muted); }
.dom-focus .h1 {
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 640;
  letter-spacing: -.022em;
}
.dom-focus .sub { color: var(--ink-muted); font-size: .9375rem; }
.dom-focus .screen--room .sub { color: var(--room-ink-muted); }
.dom-focus .tiny { color: var(--ink-muted); font-size: .8125rem; line-height: 1.45; }
.dom-focus .screen--room .tiny { color: var(--room-ink-muted); }/* ============================================================================
   BUTTONS
   ========================================================================== */
.dom-focus .btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-edge: var(--edge-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: var(--tap);
  padding: .7rem 1.1rem;
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1.0625rem;
  font-weight: 560;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, transform .1s ease, opacity .16s ease;
}
.dom-focus .btn:active { transform: scale(.985); }
.dom-focus .btn[disabled] { opacity: .4; cursor: not-allowed; }
.dom-focus .btn--primary { --btn-bg: var(--accent-lo); background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); --btn-fg: var(--accent-ink); --btn-edge: var(--accent-lo); font-weight: 620; }/* Quiet = the least emphasis, but STILL a button. With a transparent edge and
   muted text these read as a sentence - people did not know they could tap
   "Connect AI" at all. A hairline edge and a slight fill keep the hierarchy
   (filled primary > outlined default > hairline quiet) while making every one
   of them unmistakably tappable. */
.dom-focus .btn--quiet { --btn-edge: var(--edge-strong); --btn-bg: var(--surface); --btn-fg: var(--ink-muted); font-size: .9375rem; font-weight: 540; }
.dom-focus .btn--danger { --btn-bg: var(--danger); --btn-fg: var(--danger-ink); --btn-edge: var(--danger); font-weight: 620; }
.dom-focus .screen--room .btn { --btn-fg: var(--room-ink); --btn-edge: var(--room-edge); }
.dom-focus .screen--room .btn--primary { background: var(--room-ink); --btn-bg: var(--room-ink); --btn-fg: var(--room); --btn-edge: var(--room-ink); }
.dom-focus .screen--room .btn--quiet { --btn-fg: var(--room-ink-muted); --btn-edge: var(--room-edge); --btn-bg: var(--room-lift); }
.dom-focus .btn--choice {
  justify-content: flex-start;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-weight: 540;
  padding: .85rem 1.1rem;
}
.dom-focus .stack { display: flex; flex-direction: column; gap: .55rem; }
.dom-focus .foot { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: 1rem; }/* ============================================================================
   CAPTURE
   ========================================================================== */
.dom-focus .brand { display: flex; align-items: center; gap: .5rem; }
.dom-focus .brand__mark { width: 24px; height: 24px; display: block; flex: none; }
.dom-focus .brand__name { font-size: 1rem; font-weight: 640; letter-spacing: -.01em; }
.dom-focus textarea.dump {
  width: 100%;
  flex: 1;
  min-height: 42vh;
  resize: none;
  padding: 1rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  box-shadow: var(--shadow-card);
}
.dom-focus .inline-error {
  padding: .7rem .85rem;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--warm-strong);
  border-radius: var(--r-sm);
  background: var(--surface-quiet);
  font-size: .875rem;
  color: var(--ink);
}/* ============================================================================
   CLARIFY
   ========================================================================== */
.dom-focus .qprogress { display: flex; gap: .35rem; }
.dom-focus .qprogress i {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--edge);
  display: block;
}
.dom-focus .qprogress i[data-state="done"] { background: var(--warm-strong); }
.dom-focus .qprogress i[data-state="current"] { background: var(--ink); }
.dom-focus .quote {
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  border: 1px solid var(--edge);
  font-size: .9375rem;
  overflow-wrap: anywhere;
}/* ============================================================================
   THE ORDERED LIST
   ========================================================================== */
.dom-focus .tasklist { display: flex; flex-direction: column; gap: .4rem; }
.dom-focus .task {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
}
.dom-focus .task--done { opacity: .55; }/* --- reorder + swipe ------------------------------------------------------
   The row sits on a red "Delete" bed. Swiping left slides .task__row across to
   reveal it; letting go past the threshold deletes (undoably). The rank number
   doubles as the drag handle - it IS the order, so it is the honest thing to
   grab. touch-action: pan-y keeps the page scrolling normally under both. */
.dom-focus .task { position: relative; overflow: hidden; touch-action: pan-y; }
.dom-focus .task__row {
  display: flex; align-items: stretch; gap: .25rem; width: 100%;
  background: var(--surface);
  will-change: transform;
}
.dom-focus .task--sliding .task__row { transition: none; }
.dom-focus .task__row { transition: transform .18s ease; }
.dom-focus .task__wipe {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 1.1rem;
  background: var(--danger); color: var(--danger-ink);
  font-size: .875rem; font-weight: 640; letter-spacing: .02em;
}
.dom-focus .task__handle {
  flex: none; width: 46px; min-height: var(--tap);
  display: grid; place-items: center;
  border: 0; border-right: 1px solid var(--edge);
  background: none; color: var(--ink-muted);
  cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.dom-focus .task__handle:active { cursor: grabbing; }/* Lifted while being dragged, so it is obvious which row is moving. */
.dom-focus .task--dragging { z-index: 5; }
.dom-focus .task--dragging .task__row {
  transition: none;
  box-shadow: var(--shadow-card);
  transform: scale(1.02);
}
.dom-focus .task--dragging .task__handle { color: var(--accent-text); }/* A hand-placed task is marked, so the list shows at a glance what you chose. */
.dom-focus .task--pinned .task__rank { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dom-focus .task--done .task__title { text-decoration: line-through; }
.dom-focus .task__pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .3rem .8rem .9rem;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dom-focus .task__pick:disabled { cursor: default; }
.dom-focus .task__del {
  flex: none;
  width: 46px;
  border: 0;
  border-left: 1px solid var(--edge);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.dom-focus .task__del:active { color: var(--ink); background: var(--surface-quiet); }
.dom-focus .task__rank {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-quiet);
  border: 1px solid var(--edge);
  font-family: var(--font-instrument);
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink);            /* the rank carries the order, so it reads at AA */
}
.dom-focus .task:first-child .task__rank { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dom-focus .task--done .task__rank { background: var(--warm-text); border-color: var(--warm-text); color: var(--surface); }
.dom-focus .task__body { min-width: 0; flex: 1; }
.dom-focus .task__title { font-size: .9375rem; font-weight: 540; overflow-wrap: anywhere; }
.dom-focus .task__why { font-size: .75rem; color: var(--ink-muted); margin-top: .1rem; overflow-wrap: anywhere; }
.dom-focus .task__time {
  flex: none;
  font-family: var(--font-instrument);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}
.dom-focus .rowlink {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .9rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: .9375rem;
}
.dom-focus .rowlink__val { margin-left: auto; color: var(--ink-muted); font-size: .875rem; white-space: nowrap; }/* Craig went looking for "how do I add something / get back" twice and did not
   find it, because it was one grey row among six. Give it the accent and a +. */
.dom-focus .rowlink--add { border-color: var(--accent); color: var(--ink); font-weight: 560; }/* Widening the day's shortlist is an ordinary action, so it stays quiet - it
   must not compete with the tasks above it. */
.dom-focus .rowlink--today { color: var(--ink-muted); }/* The check-in is an invitation once a week, not a badge or a nag: an accent
   edge and nothing else - no count, no dot, no red. */
.dom-focus .rowlink--checkin { border-color: var(--accent); color: var(--ink); font-weight: 560; }
.dom-focus .rowlink__plus { font-size: 1.25rem; line-height: 1; color: var(--accent-text); font-weight: 600; }/* ============================================================================
   CHECK-IN
   ========================================================================== */
.dom-focus .seg {
  display: flex;
  gap: .4rem;
  background: var(--surface-quiet);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: .3rem;
}
.dom-focus .seg__opt {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .3rem .2rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-muted);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.dom-focus .seg__val { font-family: var(--font-instrument); font-variant-numeric: tabular-nums; font-size: .9375rem; font-weight: 600; line-height: 1.15; }
.dom-focus .seg__unit { font-size: .625rem; letter-spacing: .07em; text-transform: uppercase; }/* Selection carries fill + border + weight + a tick — never fill alone. */
.dom-focus .seg input:checked + .seg__opt {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 660;
}
.dom-focus .seg input:checked + .seg__opt .seg__mark { opacity: 1; }
.dom-focus .seg input:focus-visible + .seg__opt { outline: 2px solid var(--ring); outline-offset: 2px; }
.dom-focus .seg__mark { width: 11px; height: 11px; opacity: 0; margin-bottom: .12rem; transition: opacity .14s ease; }
.dom-focus .meter { display: flex; align-items: flex-end; gap: 2px; height: 11px; margin-bottom: .16rem; }
.dom-focus .meter i { display: block; width: 3px; background: currentColor; border-radius: 1px; opacity: .3; }
.dom-focus .meter i:nth-child(1) { height: 5px; }
.dom-focus .meter i:nth-child(2) { height: 8px; }
.dom-focus .meter i:nth-child(3) { height: 11px; }
.dom-focus .meter[data-level="1"] i:nth-child(-n+1), .dom-focus .meter[data-level="2"] i:nth-child(-n+2), .dom-focus .meter[data-level="3"] i:nth-child(-n+3) { opacity: 1; }/* ============================================================================
   THE ROOM — the focus screen. One task, nothing else.
   ========================================================================== */
.dom-focus .roombar {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
}
.dom-focus .roombar__left { margin-right: auto; }
.dom-focus .roombar__edit { margin-left: .25rem; margin-right: -.6rem; }
.dom-focus .iconbtn {
  width: var(--tap); height: var(--tap);
  margin-left: -.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: var(--room-ink-muted);
  -webkit-tap-highlight-color: transparent;
}
.dom-focus .screen--room .iconbtn:active { color: var(--room-ink); }/* white-on-dark: right in the room only */
.dom-focus .brand__look:active { color: var(--ink); }/* on the light canvas, darken instead of vanish */
.dom-focus .move {
  font-size: 2rem;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--room-ink);
  overflow-wrap: anywhere;
}
.dom-focus .movefrom { font-size: .9375rem; color: var(--room-ink-muted); overflow-wrap: anywhere; }
.dom-focus .movefrom b { color: var(--room-ink); font-weight: 540; }/* The clock is the pause control — a big target instead of another button. */
.dom-focus .clock {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.dom-focus .clock__digits {
  font-family: var(--font-instrument);
  font-variant-numeric: tabular-nums;
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 460;
  letter-spacing: -.03em;
  color: var(--room-ink);
}
.dom-focus .clock__digits[data-state="expired"] { color: var(--warm-on-room); }
.dom-focus .clock__note { margin-left: auto; text-align: right; font-size: .75rem; color: var(--room-ink-muted); }
.dom-focus .track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--room-lift);
  overflow: hidden;
}
.dom-focus .track > span {
  display: block; height: 100%; width: 0%;
  background: var(--warm-on-room);
  border-radius: var(--r-pill);
  transition: width .5s linear;
}
.dom-focus .whyline {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: .5rem 0;
  min-height: var(--tap);
  color: var(--room-ink-muted);
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}/* the gentle pulse that says "this is running" */
.dom-focus .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warm-on-room);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }/* ============================================================================
   SHEETS
   ========================================================================== */
.dom-focus dialog {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  max-width: 100vw; max-height: 100dvh;
}/* A CLOSED sheet must not exist on the page. The browser hides it with
   `dialog:not([open]) { display: none }`, but that is a USER-AGENT rule and any
   author rule beats it - `.sheet { display: flex }` below silently turned every
   closed sheet back on. Measured before this rule: the capture screen scrolled
   850px into ghost sheets, 12 controls inside closed sheets were keyboard
   focusable (including the API key field and Delete everything), and scrolling
   down actually revealed the storage sheet on screen. Same trap as [hidden]
   above, which is why that one needs !important too. */
.dom-focus dialog:not([open]) { display: none !important; }
.dom-focus dialog::backdrop { background: var(--scrim); }
.dom-focus .sheet {
  width: 100vw;
  max-width: 430px;
  max-height: 88dvh;
  margin: auto auto 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--ink);
  box-shadow: var(--shadow-up);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 560px) {
.dom-focus .sheet { border-radius: var(--r-lg); margin: auto; width: calc(100vw - 3rem); }
}
.dom-focus .sheet__head {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem var(--pad) .65rem;
  border-bottom: 1px solid var(--edge);
}
.dom-focus .sheet__title { font-size: 1.0625rem; font-weight: 640; margin-right: auto; letter-spacing: -.012em; }
.dom-focus .sheet__body {
  padding: 1rem var(--pad);
  overflow-y: auto;
  overflow-x: hidden;   /* stated, not left to the cascade: an overflow-y scroller computes overflow-x:auto too, which pans the sheet diagonally on a narrow phone */
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 0;
}
.dom-focus .sheet__foot { padding: .5rem var(--pad) calc(env(safe-area-inset-bottom) + 1rem); display: flex; flex-direction: column; gap: .5rem; }/* Installed to the Home Screen there is no Safari toolbar, so a sheet that
   ends at the bottom edge would sit under the home indicator. */
.dom-focus .sheet__body:last-child { padding-bottom: calc(env(safe-area-inset-bottom) + 1rem); }
.dom-focus .keyfield {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .75rem;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  color: var(--ink);
  font-family: var(--font-instrument);
  font-size: .9375rem;
  letter-spacing: .02em;
}/* A selectable row: the model picker and the set-aside list. */
.dom-focus .pick {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.dom-focus .pick[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.dom-focus .pick__mark {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .15rem;
  border: 1.5px solid var(--edge-strong);
  border-radius: 50%;
  display: grid; place-items: center;
}
.dom-focus .pick[aria-pressed="true"] .pick__mark { border-color: var(--ink); }
.dom-focus .pick[aria-pressed="true"] .pick__mark::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.dom-focus .pick__body { min-width: 0; flex: 1; }
.dom-focus .pick__name { font-size: .9375rem; font-weight: 560; }
.dom-focus .pick__note { font-size: .8125rem; color: var(--ink-muted); margin-top: .1rem; }/* A bucket item: acknowledged, not completed - so it gets a card to read, not
   a checkbox to tick. Actions sit below the text, quiet on purpose. */
.dom-focus .bucket-item {
  padding: .7rem .8rem;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--edge-strong);
  border-radius: var(--r-sm);
  background: var(--surface-quiet);
  display: flex; flex-direction: column; gap: .5rem;
}
.dom-focus .bucket-item__text { font-size: .9375rem; overflow-wrap: anywhere; }
.dom-focus .bucket-item__actions { display: flex; gap: .5rem; }
.dom-focus .bucket-item__actions .btn { width: auto; min-height: 40px; padding: .45rem .9rem; font-size: .8125rem; }
.dom-focus .closebtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--surface-quiet);
  color: var(--ink-muted);
  cursor: pointer;
}
.dom-focus .reasons { display: flex; flex-direction: column; gap: .5rem; }
.dom-focus .reasons li {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-muted);
  padding-left: 1rem;
  position: relative;
}
.dom-focus .reasons li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--warm-strong);
}
.dom-focus .win {
  display: flex; gap: .6rem; padding: .5rem 0;
  border-top: 1px solid var(--edge);
}
.dom-focus .win:first-child { border-top: 0; padding-top: 0; }
.dom-focus .win__dot { flex: none; width: 8px; height: 8px; margin-top: .5rem; border-radius: 50%; background: var(--warm-strong); }
.dom-focus .win__title { font-size: .9375rem; font-weight: 540; overflow-wrap: anywhere; }
.dom-focus .win__note { font-size: .8125rem; color: var(--ink-muted); overflow-wrap: anywhere; }/* ============================================================================
   TOAST
   ========================================================================== */
.dom-focus .toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 1rem);
  transform: translate(-50%, 1rem);
  z-index: 60;
  max-width: min(390px, calc(100vw - 2rem));
  padding: .7rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--warm-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: .875rem;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: opacity .22s ease, transform .22s ease;
}
.dom-focus .toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }/* The toast is fixed to the bottom and .foot is pinned there too, so an undo
   toast landed exactly on the last button and swallowed taps meant for it
   (measured: elementFromPoint at the button's centre returned the toast).
   Give the active screen room while a toast is up. */
.dom-focus[data-toast="true"] .screen { padding-bottom: calc(env(safe-area-inset-bottom) + 5.5rem); }
.dom-focus .toast[data-interactive="true"] { pointer-events: auto; }
.dom-focus .toast__msg { flex: 1; min-width: 0; }
.dom-focus .toast__action {
  flex: none;
  min-height: 44px;
  padding: .3rem .2rem;
  border: 0;
  background: none;
  color: var(--warm-text);
  font-size: .875rem;
  font-weight: 640;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}/* ============================================================================
   TESTS (?test=1)
   ========================================================================== */
.dom-focus .tests__row { display: flex; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--edge); align-items: baseline; font-size: .8125rem; }
.dom-focus .tests__row:first-child { border-top: 0; }
.dom-focus .tests__tag { font-family: var(--font-instrument); font-size: .6875rem; font-weight: 700; flex: none; }
.dom-focus .tests__tag[data-ok="true"] { color: var(--warm-text); }
.dom-focus .tests__tag[data-ok="false"] { color: var(--ink); background: var(--warm-text); color: var(--surface); padding: 0 .25rem; border-radius: 3px; }/* ============================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
.dom-focus *, .dom-focus *::before, .dom-focus *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
.dom-focus .pulse { animation: none; opacity: 1; }
}/* ============================================================================
   SPLASH — Mellow's ranked-list mark (top task lit, the rest recede), cream on a
   gradient of the chosen accent. Builds top-first, then fades out on a pure-CSS
   animation so it clears even if the app never boots. Skipped on a quick reopen
   via html.no-splash. The ground reads --icon-hi/-lo (accent, not theme).
   ========================================================================== */
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }/* top bar draws in first, stays lit */
@keyframes sm-draw { to { transform: scaleX(1); } }/* the two below rise + fade, receding */
@keyframes sm-rise { to { opacity: .58; transform: none; } }
@keyframes sm-rise-low { to { opacity: .40; transform: none; } }/* Full cream, not a dimmed one. Workout Log carries the finding: at 14.5px this
   counts as body text for the contrast rules, and cream at 88% over the accent
   lands under the 4.5 line. The size and weight already say it is secondary. */
@keyframes splash-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
}/* ============================================================================
   APPEARANCE — the accent swatches + theme toggle (in the Appearance sheet).
   Swatch background + tick colours are set in JS from each accent's live token
   value, so no colour literal is named here.
   ========================================================================== */
.dom-focus .brand__look { margin-left: auto; color: var(--ink-muted); }
.dom-focus .seg__txt { font-size: .9375rem; font-weight: 600; line-height: 1.15; }
.dom-focus .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin-top: .1rem; }
.dom-focus .swatch {
  position: relative; aspect-ratio: 1 / 1; min-height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid var(--edge-strong); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.dom-focus .swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.dom-focus .swatch:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.dom-focus .swatch__tick { position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; opacity: 0; }
.dom-focus .swatch[aria-pressed="true"] .swatch__tick { opacity: 1; }