:root {
  /* Shared by both themes: the folder is a physical object, the same colour
     whichever way the lights are. */
  --folder-back: #b5763a;
  --folder-front: #e9a052;
  --paper: #efe7d8;
  /* Overshoot fallback; replaced by a real spring curve where linear() is supported. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Dark — warm graphite rather than near-black: it holds the amber without going harsh.
   Kept on the warm axis (not a neutral #18181a) so the accent stays in family.
   The plain :root selector is the fallback if the inline theme script never ran. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141311;
  --surface: #211e1a;
  --surface-2: #2a2622;
  --line: #2f2b26;
  --ink: #f2ede4;
  --muted: #9a9284;
  --accent: #f2a65a;
  --on-accent: #1a1206;
  --ring-track: #2a2621;
  /* Overlays: on a dark ground, light lifts a surface. */
  --hairline: rgba(255, 255, 255, 0.06);
  --well: rgba(255, 255, 255, 0.03);
  --well-focus: rgba(255, 255, 255, 0.045);
  --neutral-fill: rgba(255, 255, 255, 0.035);
  --neutral-ring: rgba(255, 255, 255, 0.07);
  --faint-ring: rgba(255, 255, 255, 0.05);
  --accent-fill: rgba(242, 166, 90, 0.07);
  --accent-ring: rgba(242, 166, 90, 0.22);
  /* Errors and deletion. Its own hue, not the accent: under a category the accent
     can be any of seven colours, and "wrong" must not change colour with the room. */
  --danger: #f28a7a;
  --panel-sheen: rgba(255, 255, 255, 0.03);
  --panel-shadow: rgba(0, 0, 0, 0.85);

  /* Category grounds. Each is the base surface re-pointed at its own hue with the
     lightness held exactly where it was: a category tints the room, it never turns
     the lights up. Generated in oklab, then checked — on every one of these grounds
     --ink clears 15:1, --muted clears 6:1, the accent clears 4.5:1 as text and 3:1
     as the ring against its own track. */
  --c-deep-work: #8b93f2; --c-deep-work-ink: #0e1024; --c-deep-work-bg: #121319;
  --c-deep-work-surface: #1d1e26; --c-deep-work-surface-2: #25262f; --c-deep-work-line: #292b36; --c-deep-work-track: #242631;
  --c-creative: #f28ab4; --c-creative-ink: #2a0a18; --c-creative-bg: #181113;
  --c-creative-surface: #251c1f; --c-creative-surface-2: #2e2327; --c-creative-line: #34282c; --c-creative-track: #2f2327;
  --c-learning: #5cbcd4; --c-learning-ink: #04191f; --c-learning-bg: #0d1517;
  --c-learning-surface: #172023; --c-learning-surface-2: #1d292c; --c-learning-line: #202e32; --c-learning-track: #1b292d;
  --c-admin: #93a9c4; --c-admin-ink: #0b1119; --c-admin-bg: #0f1419;
  --c-admin-surface: #1a1f26; --c-admin-surface-2: #21272f; --c-admin-line: #252c36; --c-admin-track: #202730;
  --c-communication: #f28a7a; --c-communication-ink: #2a0c06; --c-communication-bg: #191110;
  --c-communication-surface: #251c1a; --c-communication-surface-2: #2f2422; --c-communication-line: #352826; --c-communication-track: #302321;
  --c-personal: #bd8ef2; --c-personal-ink: #1c0a2e; --c-personal-bg: #141218;
  --c-personal-surface: #201d24; --c-personal-surface-2: #29252e; --c-personal-line: #2e2934; --c-personal-track: #29242f;
  --c-break: #7fc9a4; --c-break-ink: #041a10; --c-break-bg: #0e1511;
  --c-break-surface: #18211c; --c-break-surface-2: #202924; --c-break-line: #232f29; --c-break-track: #1e2a24;
}

/* Light — the same warm family lit from the other side: paper, not white.
   The accent has to darken: #f2a65a on cream is 1.8:1, unusable for text or a
   1.75px ring. Burnt amber keeps the hue and clears AA (5.4:1 on the ground). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f2ea;
  --surface: #fffdf8;
  --surface-2: #efeae0;
  --line: #e0d9cc;
  --ink: #2a251e;
  --muted: #6e6559;
  --accent: #9a530f;
  --on-accent: #fffdf8;
  --ring-track: #e5ded1;
  /* Overlays: on a light ground, shadow recedes a surface. */
  --hairline: rgba(0, 0, 0, 0.08);
  --well: rgba(0, 0, 0, 0.025);
  --well-focus: rgba(0, 0, 0, 0.04);
  --neutral-fill: rgba(0, 0, 0, 0.035);
  --neutral-ring: rgba(0, 0, 0, 0.08);
  --faint-ring: rgba(0, 0, 0, 0.06);
  --accent-fill: rgba(154, 83, 15, 0.08);
  --accent-ring: rgba(154, 83, 15, 0.28);
  --danger: #b0382a;
  --panel-sheen: rgba(255, 255, 255, 0.9);
  --panel-shadow: rgba(90, 70, 40, 0.18);

  /* The same seven, lit from the other side. Every accent had to darken to stay
     legible on paper — the pale indigo that works on graphite is 2:1 on cream —
     so these are the burnt versions, exactly as the amber default is. */
  --c-deep-work: #4a49b8; --c-deep-work-ink: #fffdf8; --c-deep-work-bg: #f1f2f8;
  --c-deep-work-surface: #fcfdff; --c-deep-work-surface-2: #e8eaf3; --c-deep-work-line: #d7d9e6; --c-deep-work-track: #dbdeec;
  --c-creative: #b03a6a; --c-creative-ink: #fffdf8; --c-creative-bg: #f7f0f2;
  --c-creative-surface: #fffbfd; --c-creative-surface-2: #f2e7ea; --c-creative-line: #e5d5d9; --c-creative-track: #ebdade;
  --c-learning: #0f6f88; --c-learning-ink: #fffdf8; --c-learning-bg: #edf4f6;
  --c-learning-surface: #f8feff; --c-learning-surface-2: #e2edf0; --c-learning-line: #cedde2; --c-learning-track: #d1e2e8;
  --c-admin: #4a6180; --c-admin-ink: #fffdf8; --c-admin-bg: #eff3f8;
  --c-admin-surface: #fafdff; --c-admin-surface-2: #e5ebf3; --c-admin-line: #d2dbe6; --c-admin-track: #d6e0ec;
  --c-communication: #b04430; --c-communication-ink: #fffdf8; --c-communication-bg: #f8f1ef;
  --c-communication-surface: #fffcfa; --c-communication-surface-2: #f2e8e5; --c-communication-line: #e5d6d2; --c-communication-track: #ecdad7;
  --c-personal: #6f3fa8; --c-personal-ink: #fffdf8; --c-personal-bg: #f3f1f7;
  --c-personal-surface: #fefcff; --c-personal-surface-2: #ece9f1; --c-personal-line: #dcd7e4; --c-personal-track: #e1dcea;
  --c-break: #296b4d; --c-break-ink: #fffdf8; --c-break-bg: #eef4f1;
  --c-break-surface: #f9fffc; --c-break-surface-2: #e4ede8; --c-break-line: #d0ded6; --c-break-track: #d4e3da;
}

/* ---- The ground follows the work -------------------------------------
   A category swaps the ground and the accent and nothing else. No size, weight,
   spacing or layout rule looks at it, so the page reads exactly the same and only
   *feels* different — which is the whole point: this is meant to be noticed by
   peripheral vision, not read.

   These carry the same specificity as the two theme blocks above (0,2,0), so it is
   source order that settles it. They must stay below them. They reference the
   --c-* names rather than hexes, and those names are what the theme blocks redefine,
   so one set of rules serves both themes. */
:root[data-category="deep-work"] {
  --accent: var(--c-deep-work); --on-accent: var(--c-deep-work-ink);
  --bg: var(--c-deep-work-bg); --surface: var(--c-deep-work-surface); --surface-2: var(--c-deep-work-surface-2);
  --line: var(--c-deep-work-line); --ring-track: var(--c-deep-work-track);
}
:root[data-category="creative"] {
  --accent: var(--c-creative); --on-accent: var(--c-creative-ink);
  --bg: var(--c-creative-bg); --surface: var(--c-creative-surface); --surface-2: var(--c-creative-surface-2);
  --line: var(--c-creative-line); --ring-track: var(--c-creative-track);
}
:root[data-category="learning"] {
  --accent: var(--c-learning); --on-accent: var(--c-learning-ink);
  --bg: var(--c-learning-bg); --surface: var(--c-learning-surface); --surface-2: var(--c-learning-surface-2);
  --line: var(--c-learning-line); --ring-track: var(--c-learning-track);
}
:root[data-category="admin"] {
  --accent: var(--c-admin); --on-accent: var(--c-admin-ink);
  --bg: var(--c-admin-bg); --surface: var(--c-admin-surface); --surface-2: var(--c-admin-surface-2);
  --line: var(--c-admin-line); --ring-track: var(--c-admin-track);
}
:root[data-category="communication"] {
  --accent: var(--c-communication); --on-accent: var(--c-communication-ink);
  --bg: var(--c-communication-bg); --surface: var(--c-communication-surface); --surface-2: var(--c-communication-surface-2);
  --line: var(--c-communication-line); --ring-track: var(--c-communication-track);
}
:root[data-category="personal"] {
  --accent: var(--c-personal); --on-accent: var(--c-personal-ink);
  --bg: var(--c-personal-bg); --surface: var(--c-personal-surface); --surface-2: var(--c-personal-surface-2);
  --line: var(--c-personal-line); --ring-track: var(--c-personal-track);
}
:root[data-category="break"] {
  --accent: var(--c-break); --on-accent: var(--c-break-ink);
  --bg: var(--c-break-bg); --surface: var(--c-break-surface); --surface-2: var(--c-break-surface-2);
  --line: var(--c-break-line); --ring-track: var(--c-break-track);
}

/* The accent's two tints are derived rather than listed, so adding a category stays
   a single row of hexes. An engine without color-mix drops these declarations and
   keeps the theme's amber tints: a little off-key beside the new accent, never
   unreadable, and the grounds above are plain hexes that always land. */
:root[data-category] {
  --accent-fill: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 25%, transparent);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(
      0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121,
      1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%,
      0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1
    );
  }
}

html, body {
  background: var(--bg); color: var(--ink);
  /* The ground eases across on a theme flip; everything on top swaps at once,
     which reads as the lights changing rather than a repaint. It is slow enough
     to carry a category change too: that shift is a few percent of chroma, and
     under about 400ms a change that small reads as a flicker, not as light. */
  transition: background-color 420ms ease, color 420ms ease;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Rain sits on the ground and under everything else. The page's own blocks are
   lifted one layer so the canvas never paints over text or controls. */
.rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The grove stands on the bottom edge and fades out towards its own canopy, so nothing
   it grows ever reaches far enough up the page to argue with the clock. */
.grove {
  position: fixed; inset: auto 0 0 0; width: 100%; height: min(42vh, 340px);
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* Big numerals: each glyph sits in a fixed-width cell so digits never jitter as they change. */
/* The clock is a readout, not text: it is rewritten every tick, so a stray click would
   leave a caret or selection blinking inside it. */
.digits {
  font-family: "Instrument Serif", Georgia, serif; line-height: 1; letter-spacing: -0.01em;
  -webkit-user-select: none; user-select: none; caret-color: transparent; cursor: default;
}
.digits .d { display: inline-block; width: 0.56em; text-align: center; }
.digits .c { display: inline-block; width: 0.28em; text-align: center; transform: translateY(-0.06em); }
.digits.is-hours { font-size: clamp(2.25rem, 11vw, 4.75rem); }
.digits:not(.is-hours) { font-size: clamp(3.25rem, 17vw, 6.75rem); }

/* While the intention is being asked the clock hasn't started, so the ring only has
   to show the length. A smaller one keeps the question, the step chips and Start on
   screen even with a resume line, notes and a long task above them. */
.ring-box { transition: width 250ms ease; }
[data-asking="true"] .ring-box { width: min(52vw, 14rem); }
[data-asking="true"] .digits:not(.is-hours) { font-size: clamp(2.5rem, 11vw, 4rem); }
[data-asking="true"] .digits.is-hours { font-size: clamp(1.75rem, 8vw, 2.75rem); }

/* Number inputs without native spinners; typed values stay tabular. */
input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Ring progress is driven per-frame by JS; no CSS transition on offset so it never double-smooths. */
.ring-progress { transition: stroke 400ms ease; }

/* Done state: one restrained pulse on the ring, then rest. */
@keyframes done-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}
[data-status="done"] .ring-progress { animation: done-pulse 1.6s ease-in-out 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation: none !important; }
}

kbd {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  color: var(--ink);
  background: var(--surface);
}

/* Fullscreen: hide chrome that competes with the numerals. */
:fullscreen .fs-hide { display: none; }

/* While a session runs, the only thing on screen is the session. The corner button is
   the exception, and only because its job changes: during a session it is the one place
   to put a stray thought, which is the difference between keeping the session and
   spending it carrying the thought. It fades back so it is findable, not noticeable. */
[data-status="running"] .hint-tasks { display: none; }
[data-status="running"] .tasks-fab {
  opacity: 0.45;
  transition: opacity 200ms ease, border-color 150ms ease, background-color 150ms ease, transform 250ms var(--spring);
}
[data-status="running"] .tasks-fab:hover,
[data-status="running"] .tasks-fab:focus-visible { opacity: 1; }

/* ---- Session quote ---------------------------------------------------
   Last in the column, after the ring and the buttons, so it is the thing you find
   when you look away from the numbers, never the thing you see first. It arrives in
   full ink to catch the eye once, then settles to muted and stays out of the way.
   Leaving is quicker than arriving, and a quote is fully gone before the next one
   comes in: two sentences crossfading read as neither. */
.quote {
  margin: 0; width: 100%; max-width: 30rem;
  /* Three lines plus the name, reserved up front: the column is centred, so a quote
     that grew a line would nudge the ring every time it changed. */
  min-height: 7rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  text-align: center;
  /* For the one thing that hides it: the capture bar, which lands on top of it. */
  transition: opacity 180ms ease;
}
.quote[hidden] { display: none; }
.quote-text {
  margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink); text-wrap: balance;
  opacity: 0; transform: translateY(0.375rem); filter: blur(3px);
  transition: opacity 450ms ease-in, transform 450ms ease-in, filter 450ms ease-in, color 1600ms ease;
}
.quote-by {
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted);
  opacity: 0; transform: translateY(0.25rem);
  transition: opacity 450ms ease-in, transform 450ms ease-in;
}
.quote.is-in .quote-text {
  opacity: 1; transform: none; filter: none;
  transition: opacity 900ms ease-out, transform 900ms cubic-bezier(.2, .8, .2, 1), filter 900ms ease-out, color 1600ms ease;
}
.quote.is-in .quote-by {
  opacity: 1; transform: none;
  transition: opacity 700ms ease-out 350ms, transform 700ms cubic-bezier(.2, .8, .2, 1) 350ms;
}
.quote.is-settled .quote-text { color: var(--muted); }
@media (max-width: 639px) { .quote-text { font-size: 1rem; } }

/* ---- Sound menu ------------------------------------------------------
   Drops from the note in the header. Built-in sounds play from nowhere; YouTube music
   brings up the player card below, because a YouTube player has to stay visible. */
.sound-menu {
  position: fixed; z-index: 30; width: 16.5rem; max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.375rem; border-radius: 0.875rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--panel-sheen) inset, 0 28px 48px -22px var(--panel-shadow);
  transform-origin: top right; animation: sound-menu-in 160ms ease-out;
}
.sound-menu[hidden] { display: none; }
@keyframes sound-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .sound-menu { animation: none; } }
.sound-menu-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin: 0.375rem 0.625rem 0.25rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.sound-menu-note { font-weight: 400; letter-spacing: 0; text-transform: none; }
.sound-sep { height: 1px; margin: 0.375rem 0.5rem; background: var(--hairline); }
.sound-item {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.5rem; padding: 0 0.625rem;
  border: 0; border-radius: 0.5rem; background: none; color: var(--ink); cursor: pointer; text-align: left;
  font-size: 0.875rem; transition: background-color 150ms ease, color 150ms ease;
}
.sound-item svg { height: 1.125rem; width: 1.125rem; flex-shrink: 0; color: var(--muted); transition: color 150ms ease; }
.sound-item:hover { background: var(--surface-2); }
.sound-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sound-item[aria-pressed="true"] { background: var(--accent-fill); color: var(--accent); font-weight: 600; }
.sound-item[aria-pressed="true"] svg { color: var(--accent); }
.sound-item-tag { margin-left: auto; font-size: 0.6875rem; font-weight: 500; color: var(--accent); white-space: nowrap; }
.sound-item-tag[hidden] { display: none; }
.sound-volume { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 0.625rem; color: var(--muted); }
.sound-volume[hidden] { display: none; }
.sound-volume svg { height: 1rem; width: 1rem; flex-shrink: 0; }
.sound-volume input { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.sound-menu .music-form { margin: 0.25rem 0.25rem 0.125rem; }
.sound-menu .music-form[hidden] { display: none; }
.music-form-msg { margin: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1.4; color: var(--danger); }
.music-form-msg:empty { display: none; }

/* ---- Music -----------------------------------------------------------
   The Tasks button's opposite corner, in the same panel language, and only while
   YouTube music is on. The player is never hidden, shrunk under 200px or covered:
   those are YouTube's embed terms, and they are why closing the card stops the music
   rather than tucking it away. */
.music-dot {
  position: absolute; top: 0.6rem; right: 0.6rem; height: 0.4rem; width: 0.4rem;
  border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
  transform: scale(0); transition: transform 300ms var(--spring);
}
#btn-music[data-playing="true"] { color: var(--ink); }
#btn-music[data-playing="true"] .music-dot { transform: scale(1); }

/* A quiet green dot is the difference between "signed in" and "not" at a glance;
   the photo swap next to it is the proof of who. */
.account-dot {
  position: absolute; top: 0.6rem; right: 0.6rem; height: 0.5rem; width: 0.5rem;
  border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 2px var(--bg);
  transform: scale(0); transition: transform 300ms var(--spring);
}
#btn-account[data-signed-in="true"] .account-dot { transform: scale(1); }

.music {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 20;
  width: 22.5rem; padding: 0.625rem 0.75rem 0.75rem; border-radius: 0.875rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--panel-sheen) inset, 0 28px 48px -22px var(--panel-shadow);
  transform-origin: bottom left;
  transform: translateY(1rem) scale(0.96);
  opacity: 0; visibility: hidden;
  transition: transform 300ms ease, opacity 180ms ease, visibility 0s linear 300ms;
}
.music[data-open="true"] {
  transform: none; opacity: 1; visibility: visible;
  transition: transform 500ms var(--spring), opacity 150ms ease, visibility 0s;
}
.music-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.music-title {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-title svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--accent); }
.music-close {
  height: 2rem; width: 2rem; flex-shrink: 0; margin-right: -0.375rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px; background: none; color: var(--muted); cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.music-close:hover { color: var(--ink); background: var(--surface-2); }
.music-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.music-form {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  padding: 0 0.25rem 0 0.75rem;
  border: 1px solid var(--line); border-radius: 0.625rem; background: var(--well);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.music-form:focus-within { border-color: var(--accent); background: var(--well-focus); }
.music-input {
  flex: 1 1 0; min-width: 0; padding: 0.5rem 0; font-size: 0.9375rem;
  color: var(--ink); background: none; border: 0; outline: none; caret-color: var(--accent);
}
.music-input::placeholder { color: var(--muted); opacity: 1; }
.music-go {
  height: 2.25rem; padding: 0 0.875rem; border: 0; border-radius: 0.5rem; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; font-weight: 600;
  transition: filter 150ms ease;
}
.music-go:hover { filter: brightness(1.1); }
.music-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.music-msg { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.music-msg:empty { display: none; }
.music-msg.is-error { color: var(--accent); }
/* 200px is YouTube's floor, not a design choice. */
.music-frame { margin-top: 0.5rem; height: 12.5rem; min-height: 200px; background: #000; border-radius: 0.375rem; }
.music-frame[hidden] { display: none; }
.music-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Phone: full width, stacked above the Tasks button so the two never collide. */
@media (max-width: 639px) {
  .music { left: 1rem; right: 1rem; bottom: calc(1rem + 2.75rem + 0.5rem); width: auto; }
}

/* Break sessions use the quiet colour so the ring itself says "not work". */
[data-mode="break"] .ring-progress { stroke: var(--muted); }

/* Onboarding tooltip */
.onboarding-tooltip {
  position: fixed; top: 4.5rem; right: 1.5rem; z-index: 50;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.8125rem; font-weight: 500;
  box-shadow: 0 4px 12px var(--panel-shadow);
  opacity: 0; transform: translateY(-0.5rem); pointer-events: none;
  transition: opacity 300ms ease, transform 300ms var(--spring);
}
.onboarding-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* The task line under the status is the way into the folder. */
.current-task {
  background: none; border: 0; padding: 0 0.1rem; color: var(--ink); cursor: pointer;
  border-bottom: 1px dotted transparent; border-radius: 0.25rem;
  transition: color 150ms ease, border-color 150ms ease;
}
.current-task:hover { color: var(--accent); border-bottom-color: var(--accent); }
.current-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.current-task.is-empty { color: var(--muted); }
.current-task.is-done { color: var(--muted); text-decoration: line-through; }
.current-task:disabled { cursor: default; color: var(--ink); border-bottom-color: transparent; }
.current-task[hidden] { display: none; }

.done-block { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.done-block[hidden], #done-ask[hidden], #done-next[hidden], #actions[hidden] { display: none; }

/* The session count under the task, when the task has an estimate. */
.current-meta { margin: -0.25rem 0 0; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.current-meta[hidden] { display: none; }

/* ---- Tasks button ------------------------------------------------------
   A pill in the corner in the header's own line-icon language. The word is there
   because a checklist glyph alone is one more icon to decode, and this is the one
   control on the page that holds your work. */
.tasks-fab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 0.625rem 0 1rem; border-radius: 9999px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--panel-sheen) inset, 0 14px 30px -16px var(--panel-shadow);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 250ms var(--spring);
}
.tasks-fab:hover { border-color: var(--muted); transform: translateY(-1px); }
.tasks-fab:active { transform: translateY(0) scale(0.98); }
.tasks-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tasks-fab svg { color: var(--accent); flex-shrink: 0; }
.tasks-fab:has(.tasks-fab-count[hidden]) { padding-right: 1.125rem; }
.tasks-fab-count {
  min-width: 1.625rem; height: 1.625rem; padding: 0 0.45rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tasks-fab-count[hidden] { display: none; }

/* ---- Dialogs, shared ------------------------------------------------------
   Both open with showModal(): the page behind goes inert, Escape closes the top one,
   and the browser keeps the keyboard inside. Entry and exit animate where
   @starting-style and allow-discrete exist; elsewhere they simply appear. */
.drawer, .composer, .review, .keys, .capture {
  padding: 0; border: 1px solid var(--line); color: var(--ink); background: var(--surface);
  box-shadow: 0 1px 0 var(--panel-sheen) inset, 0 40px 80px -30px var(--panel-shadow);
  overscroll-behavior: contain;
}
.drawer::backdrop, .composer::backdrop, .review::backdrop, .keys::backdrop {
  background: rgba(8, 7, 6, 0.55);
  opacity: 0;
  transition: opacity 220ms ease, overlay 220ms allow-discrete, display 220ms allow-discrete;
}
:root[data-theme="light"] .drawer::backdrop, :root[data-theme="light"] .composer::backdrop,
:root[data-theme="light"] .review::backdrop, :root[data-theme="light"] .keys::backdrop { background: rgba(60, 45, 25, 0.28); }
.drawer[open]::backdrop, .composer[open]::backdrop, .review[open]::backdrop, .keys[open]::backdrop { opacity: 1; }
@starting-style {
  .drawer[open]::backdrop, .composer[open]::backdrop, .review[open]::backdrop, .keys[open]::backdrop { opacity: 0; }
}

.icon-btn {
  height: 2.75rem; width: 2.75rem; flex-shrink: 0; margin: -0.5rem -0.625rem 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 9999px; color: var(--muted); cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---- Drawer ------------------------------------------------------------ */
.drawer {
  position: fixed; inset: 0.75rem 0.75rem 0.75rem auto; margin: 0;
  width: min(27rem, calc(100vw - 1.5rem)); height: auto; max-width: none; max-height: none;
  border-radius: 1rem;
  flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateX(2rem);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.4, 0, 1, 1),
              overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.drawer[open] {
  display: flex; opacity: 1; transform: none;
  transition: opacity 200ms ease, transform 380ms cubic-bezier(.16, 1, .3, 1),
              overlay 380ms allow-discrete, display 380ms allow-discrete;
}
@starting-style { .drawer[open] { opacity: 0; transform: translateX(2rem); } }

.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0.75rem; }
.drawer-title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.drawer-date { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--muted); }

.drawer-summary { padding: 0 1.25rem; }
.drawer-meta { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 0.25rem; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.progress span {
  display: block; height: 100%; border-radius: inherit; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}

.drawer-search { padding: 0.75rem 1.25rem 0; }
.search-box { position: relative; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); height: 1rem; width: 1rem; color: var(--muted); pointer-events: none; }
.search-input {
  width: 100%; height: 2.5rem; padding: 0 2.25rem; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 0.875rem; color: var(--ink);
  background: var(--well); border: 1px solid var(--line); border-radius: 0.625rem;
  outline: none; caret-color: var(--accent);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); }
.search-input:focus { border-color: var(--accent); background: var(--well-focus); box-shadow: 0 0 0 1px var(--accent); }
/* The custom clear button replaces the native one, in both engines. */
.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%);
  height: 1.75rem; width: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 9999px; color: var(--muted); cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.search-clear svg { height: 0.875rem; width: 0.875rem; }
.search-clear:hover { color: var(--ink); background: var(--surface-2); }
.search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

.drawer-new { padding: 1rem 1.25rem 0.5rem; display: flex; gap: 0.5rem; }
.task-new {
  flex: 1 1 auto; min-width: 0; min-height: 3rem; padding: 0 0.75rem 0 0.875rem;
  display: flex; align-items: center; gap: 0.625rem;
  border: 0; border-radius: 0.75rem; cursor: pointer;
  background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-ring);
  color: var(--accent); font-size: 0.9375rem; font-weight: 600;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.task-new:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.task-new:active { transform: scale(0.99); }
.task-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-new-kbd { margin-left: auto; color: var(--muted); }
.task-import {
  flex-shrink: 0; width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 0.75rem; background: var(--well);
  color: var(--ink); cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.task-import:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); }
.task-import:active { transform: scale(0.99); }
.task-import:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.25rem 0.75rem 1rem; overscroll-behavior: contain; }
.task-empty { margin: 1.5rem 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.task-empty[hidden] { display: none; }

.drawer-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem 1rem;
  padding: 0.75rem 1.25rem; border-top: 1px solid var(--hairline);
  font-size: 0.75rem; color: var(--muted);
}
.drawer-foot span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ---- Task rows --------------------------------------------------------------
   Three targets per row, each 44px: the checkbox, the task (tap it to focus on it),
   and edit. All three are always on screen — nothing important waits for a hover. */
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.task {
  --chip: var(--muted);
  position: relative; display: flex; align-items: flex-start; gap: 0.125rem;
  padding: 0.25rem; border-radius: 0.75rem;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.task:hover { background: var(--neutral-fill); }
.task[data-current="true"] { background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-ring); }
@keyframes task-arrive {
  from { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
}
.task.is-new { animation: task-arrive 1.4s ease-out; }

.task-check {
  flex-shrink: 0; height: 2.75rem; width: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 0.625rem; cursor: pointer;
}
.task-box {
  height: 1.25rem; width: 1.25rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--muted); color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 250ms var(--spring);
}
.task-box svg { height: 0.75rem; width: 0.75rem; }
.task-check:hover .task-box { border-color: var(--accent); color: var(--accent); }
.task-check:active .task-box { transform: scale(0.88); }
.task-check[aria-checked="true"] .task-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.task-check:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.task-main {
  flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0.625rem 0.25rem 0.625rem 0.125rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
  border: 0; background: none; border-radius: 0.5rem; cursor: pointer;
  text-align: left; color: var(--ink);
}
.task-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.task-line { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.task-title {
  min-width: 0; font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task[data-current="true"] .task-title { font-weight: 600; }
.task-flag {
  flex-shrink: 0; margin-left: auto; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent);
}
.task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.375rem;
  font-size: 0.75rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums;
}
.task-cat { display: inline-flex; align-items: center; gap: 0.25rem; }
.task-cat svg { height: 0.8125rem; width: 0.8125rem; color: var(--chip); }
.task-sep { opacity: 0.6; }
.task-notes {
  margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.task-edit {
  flex-shrink: 0; height: 2.75rem; width: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 0.625rem; color: var(--muted); cursor: pointer;
  opacity: 0.6; transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
}
.task-edit svg { height: 1rem; width: 1rem; }
.task:hover .task-edit { opacity: 1; }
.task-edit:hover { color: var(--ink); background: var(--surface-2); opacity: 1; }
.task-edit:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }

/* Done work steps back but stays readable: it can still be reopened or edited. */
.task[data-done="true"] .task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.task[data-done="true"] .task-cat svg { color: var(--muted); }

.done-group { margin-top: 0.75rem; border-top: 1px solid var(--hairline); padding-top: 0.25rem; }
.done-group[hidden] { display: none; }
.done-summary {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.5rem;
  list-style: none; cursor: pointer; border-radius: 0.5rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.done-summary::-webkit-details-marker { display: none; }
.done-summary:hover { color: var(--ink); }
.done-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.done-chevron { height: 0.875rem; width: 0.875rem; transition: transform 200ms ease; }
.done-group[open] .done-chevron { transform: rotate(90deg); }
.done-count {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 0.6875rem; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.clear-done {
  margin: 0.5rem 0 0 0.5rem; min-height: 2.75rem; padding: 0 0.75rem;
  border: 0; background: none; border-radius: 0.5rem; cursor: pointer;
  font-size: 0.8125rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.clear-done:hover { color: var(--danger); }
.clear-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* Undo sits at the foot of the drawer, inverted so it reads as a message about the
   list rather than part of it. */
.toast {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.375rem 0.375rem 1rem;
  border-radius: 0.75rem; background: var(--ink); color: var(--bg);
  box-shadow: 0 16px 32px -12px var(--panel-shadow);
  animation: toast-in 260ms cubic-bezier(.16, 1, .3, 1);
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
.toast-text { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-undo {
  flex-shrink: 0; min-height: 2.5rem; padding: 0 0.875rem; border: 0; border-radius: 0.5rem; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); font-size: 0.875rem; font-weight: 600;
}
.toast-undo:hover { background: color-mix(in srgb, var(--bg) 24%, transparent); }
.toast-undo:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }

/* ---- Composer ------------------------------------------------------------ */
.composer, .review, .keys {
  width: min(33rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  border-radius: 1rem; overflow-y: auto;
  opacity: 0; transform: translateY(0.75rem) scale(0.98);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(.4, 0, 1, 1),
              overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.composer[open], .review[open], .keys[open] {
  opacity: 1; transform: none;
  transition: opacity 200ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1),
              overlay 320ms allow-discrete, display 320ms allow-discrete;
}
@starting-style {
  .composer[open], .review[open], .keys[open] { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
}

.composer-form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1.5rem 1.5rem; }
.composer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.field-optional { margin-left: 0.25rem; font-weight: 400; color: var(--muted); }
.field-input {
  width: 100%; min-height: 2.75rem; padding: 0.625rem 0.75rem;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink);
  background: var(--well); border: 1px solid var(--line); border-radius: 0.625rem;
  outline: none; caret-color: var(--accent);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.field-input:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); }
.field-input:focus { border-color: var(--accent); background: var(--well-focus); box-shadow: 0 0 0 1px var(--accent); }
.field-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field-title { min-height: 3.25rem; font-size: 1.125rem; }
.field-notes { min-height: 5.5rem; resize: vertical; }
.code-input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8125rem; white-space: pre; }
.link-action {
  flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 0.75rem; font-weight: 500; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 150ms ease;
}
.link-action:hover { color: var(--accent); }
.link-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }
.field-hint code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75em;
  background: var(--surface-2); border-radius: 0.25rem; padding: 0.05rem 0.3rem;
}
.field-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.field-hint { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.field-hint-row { margin-top: -0.75rem; }
.field-count { flex-shrink: 0; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.field-count.is-near { color: var(--ink); }
.field-error {
  margin: 0; display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--danger);
}
.field-error svg { height: 1rem; width: 1rem; flex-shrink: 0; }
.field-error[hidden] { display: none; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.stepper {
  display: flex; align-items: stretch; height: 2.75rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: 0.625rem; background: var(--well);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.stepper-btn {
  flex-shrink: 0; width: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.stepper-btn svg { height: 1rem; width: 1rem; }
.stepper-btn:hover:not(:disabled) { background: var(--surface-2); }
.stepper-btn:disabled { color: var(--muted); opacity: 0.45; cursor: not-allowed; }
.stepper-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper-input {
  flex: 1 1 auto; min-width: 0; padding: 0; text-align: center;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; outline: none;
}

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; }
.select select option { background: var(--surface); color: var(--ink); }
.select svg { position: absolute; right: 0.75rem; top: 50%; height: 1rem; width: 1rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.length-custom { position: relative; margin-top: 0.5rem; }
.length-custom .field-input { padding-right: 2.75rem; font-variant-numeric: tabular-nums; }
.length-unit { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.875rem; color: var(--muted); pointer-events: none; }

/* Categories are real radio buttons, so arrow keys move between them for free. Every
   option says its name: in a form, a row of unlabelled glyphs is a quiz. */
.cat-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-option {
  --chip: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.5rem; padding: 0 0.875rem 0 0.6875rem; border-radius: 9999px; cursor: pointer;
  background: var(--neutral-fill); box-shadow: inset 0 0 0 1px var(--neutral-ring);
  color: var(--muted); font-size: 0.8125rem; font-weight: 500; user-select: none;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.cat-option svg { height: 1rem; width: 1rem; flex-shrink: 0; }
.cat-option:hover { color: var(--ink); }
.cat-option:hover svg { color: var(--chip); }
.cat-option:has(input:checked) {
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--chip) 55%, transparent);
}
.cat-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Held at two lines, so a longer hint never shoves the fields below while you're tapping. */
.cat-hint { margin-top: 0.125rem; min-height: 2.9em; }

.cat-option[data-cat="deep-work"],     .task-cat[data-cat="deep-work"]     { --chip: var(--c-deep-work); }
.cat-option[data-cat="creative"],      .task-cat[data-cat="creative"]      { --chip: var(--c-creative); }
.cat-option[data-cat="learning"],      .task-cat[data-cat="learning"]      { --chip: var(--c-learning); }
.cat-option[data-cat="admin"],         .task-cat[data-cat="admin"]         { --chip: var(--c-admin); }
.cat-option[data-cat="communication"], .task-cat[data-cat="communication"] { --chip: var(--c-communication); }
.cat-option[data-cat="personal"],      .task-cat[data-cat="personal"]      { --chip: var(--c-personal); }

.check-row {
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; margin-top: -0.25rem;
  font-size: 0.875rem; color: var(--ink); cursor: pointer;
}
.check-row[hidden] { display: none; }
.check-row input { height: 1.125rem; width: 1.125rem; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.check-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.composer-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 0.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline);
}
.composer-spacer { flex: 1 1 auto; }
.danger-btn {
  min-height: 2.75rem; padding: 0 0.875rem; border: 0; border-radius: 0.625rem; cursor: pointer;
  background: none; color: var(--danger); font-size: 0.875rem; font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
}
.danger-btn[hidden] { display: none; }
.danger-btn:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.danger-btn[data-confirm="true"] { background: var(--danger); color: var(--surface); font-weight: 600; }
.danger-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* ---- The note under the task ------------------------------------------- */
/* Where to start, or what "done" looks like. Two lines at most: any more and it stops
   being a nudge and starts being something to read instead of the work. */
.current-notes {
  margin: 0.125rem 0 0; max-width: 34rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.current-notes[hidden] { display: none; }

/* ---- The steps under the task ------------------------------------------- */
/* The board's checklist for this task, tickable mid-session. Kept short and
   scrollable so a long list never pushes the clock off the screen. */
.current-steps {
  list-style: none; margin: 0.375rem auto 0; padding: 0;
  width: 100%; max-width: 24rem; max-height: 9.5rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.125rem; text-align: left;
}
.current-steps[hidden] { display: none; }
.current-step {
  width: 100%; min-height: 2.75rem; padding: 0.375rem 0.625rem;
  display: flex; align-items: center; gap: 0.625rem;
  border: 0; border-radius: 0.625rem; background: none; cursor: pointer;
  color: var(--ink); font-size: 0.875rem; line-height: 1.35; text-align: left;
  transition: background-color 150ms ease;
}
.current-step:hover { background: var(--neutral-fill); }
.current-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.current-step-box {
  flex: none; height: 1.125rem; width: 1.125rem; border-radius: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--muted); color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.current-step-box svg { height: 0.7rem; width: 0.7rem; }
.current-step[aria-checked="true"] .current-step-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.current-step[aria-checked="true"] .current-step-title { color: var(--muted); text-decoration: line-through; }
.current-step-title { min-width: 0; overflow-wrap: anywhere; }
/* Title and the step's note (written on the board) stack; the note stays quiet. */
.current-step-text { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.current-step-note {
  font-size: 0.75rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.current-step[aria-checked="true"] .current-step-note { opacity: 0.6; }
.current-step-next {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
/* Collapsed: the next step and the "+N" toggle share one row. */
.current-steps-row { display: flex; align-items: center; gap: 0.25rem; }
.current-steps-row .current-step { flex: 1 1 auto; min-width: 0; }
.current-steps-foot { display: flex; justify-content: center; }
.current-steps-more {
  flex: none; min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: 9999px;
  background: none; color: var(--muted); font-size: 0.8125rem; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: color 150ms ease, background-color 150ms ease;
}
.current-steps-more:hover { color: var(--ink); background: var(--neutral-fill); }
.current-steps-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- The break that starts itself --------------------------------------- */
.done-auto {
  margin: 0; display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.4rem 0.4rem 0.4rem 0.875rem; border-radius: 9999px;
  border: 1px solid var(--faint-ring); background: var(--neutral-fill);
  font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.done-auto[hidden] { display: none; }
.done-auto .link-action { padding: 0.25rem 0.5rem; }

/* ---- Parking a thought --------------------------------------------------- */
/* Fixed low and centred, clear of the corner button that opens it. It is not modal, so
   nothing behind it moves or dims — that is the entire point of it. */
.capture {
  position: fixed; inset: auto 0 5.5rem 0; margin: 0 auto; z-index: 30;
  width: min(30rem, calc(100vw - 2rem)); max-width: none;
  border-radius: 0.875rem;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 140ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1),
              overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.capture[open] { opacity: 1; transform: none; }
@starting-style { .capture[open] { opacity: 0; transform: translateY(0.5rem); } }
.capture-form { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.625rem; }
.capture-row { display: flex; align-items: center; gap: 0.5rem; }
.capture-icon { height: 1.125rem; width: 1.125rem; flex-shrink: 0; margin-left: 0.25rem; color: var(--accent); }
.capture-input {
  flex: 1 1 auto; min-width: 0; min-height: 2.5rem; padding: 0.375rem 0.25rem;
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: none; border: 0; outline: none; caret-color: var(--accent);
}
.capture-input::placeholder { color: var(--muted); }
.capture-go {
  flex-shrink: 0; min-height: 2.25rem; padding: 0 0.875rem; border: 0; border-radius: 0.5rem;
  background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.capture-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The bar lands where the quote sits. The quote is the most disposable thing on the
   page and this is the least disposable moment, so the quote gets out of the way. */
body:has(#capture[open]) .quote { opacity: 0; }
.capture-msg { margin: 0; padding: 0 0.25rem 0.125rem 1.875rem; font-size: 0.75rem; color: var(--muted); }
/* No reserved gap under an empty bar: the card growing by a line is how the confirmation
   announces itself. */
.capture-msg:empty { display: none; }

/* The corner button changes job while a session runs; the tint says so before the label
   is read. */
.tasks-fab[data-mode="park"] { border-color: var(--accent-ring); background: var(--accent-fill); }

/* ---- The way into Review ------------------------------------------------- */
.drawer-review {
  width: 100%; margin: 0.625rem 0 0; padding: 0.5rem 0.625rem;
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: 0.625rem;
  background: none; color: var(--muted); font: inherit; font-size: 0.8125rem;
  text-align: left; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.drawer-review:hover { color: var(--ink); background: var(--well); border-color: var(--hairline); }
.drawer-review:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.drawer-review-icon { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--muted); }
/* A streak is the one thing here worth a colour. Nothing running, nothing to show. */
.drawer-review[data-streak="true"] .drawer-review-icon { color: var(--accent); }
.drawer-review[data-streak="true"] #drawer-review-text { color: var(--ink); font-weight: 500; }
#drawer-review-text { flex: 1 1 auto; min-width: 0; }
.drawer-review-go { height: 0.875rem; width: 0.875rem; flex-shrink: 0; opacity: 0.6; }

/* ---- Review -------------------------------------------------------------- */
.review-body { display: flex; flex-direction: column; gap: 1.5rem; padding: 0.25rem 1.5rem 1.5rem; }
.review .composer-head { padding: 1.25rem 1.5rem 0.75rem; }

.review-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.figure {
  display: flex; flex-direction: column; gap: 0.125rem;
  padding: 0.75rem 0.75rem 0.875rem; border: 1px solid var(--hairline); border-radius: 0.75rem;
  background: var(--well);
}
.figure-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.figure-label { font-size: 0.75rem; color: var(--ink); }
.figure-note { font-size: 0.6875rem; line-height: 1.4; color: var(--muted); }

.review-section { display: flex; flex-direction: column; gap: 0.625rem; }
.review-heading {
  margin: 0; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.review-note { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }

/* The week as a forest. The canvas draws the trees; the hairline under it is the ground
   they stand on, and the row of letters below that says which day is which. */
.forest { display: flex; flex-direction: column; }
.forest-canvas { display: block; width: 100%; height: 8.125rem; }
.forest-ground { height: 1px; background: var(--hairline); }
.forest-ticks { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 0.375rem; }
.forest-tick { font-size: 0.5625rem; line-height: 1; text-align: center; color: var(--muted); }
.forest-tick[data-today="true"] { color: var(--ink); font-weight: 600; }

/* Where the week went: the category colours, finally doing something other than tinting
   the room you worked in. */
.review-split { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.split-row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.split-name { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--ink); }
.split-dot { height: 0.5rem; width: 0.5rem; flex-shrink: 0; border-radius: 9999px; background: var(--muted); }
.split-bar { height: 0.4rem; border-radius: 9999px; background: var(--well); overflow: hidden; }
.split-bar span { display: block; height: 100%; border-radius: 9999px; background: var(--muted); }
.split-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.split-empty { font-size: 0.75rem; color: var(--muted); }
.split-dot[data-cat="deep-work"], .split-bar span[data-cat="deep-work"] { background: var(--c-deep-work); }
.split-dot[data-cat="creative"], .split-bar span[data-cat="creative"] { background: var(--c-creative); }
.split-dot[data-cat="learning"], .split-bar span[data-cat="learning"] { background: var(--c-learning); }
.split-dot[data-cat="admin"], .split-bar span[data-cat="admin"] { background: var(--c-admin); }
.split-dot[data-cat="communication"], .split-bar span[data-cat="communication"] { background: var(--c-communication); }
.split-dot[data-cat="personal"], .split-bar span[data-cat="personal"] { background: var(--c-personal); }
.split-row.is-unfiled .split-name { color: var(--muted); }

.review-toggle { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; }
.review-toggle input { height: 1.125rem; width: 1.125rem; flex-shrink: 0; margin-top: 0.0625rem; accent-color: var(--accent); cursor: pointer; }
.review-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-toggle-text { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--ink); }
.review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- The keys ------------------------------------------------------------ */
.keys-body { display: flex; flex-direction: column; gap: 1.5rem; padding: 0.25rem 1.5rem 1.5rem; }
.keys .composer-head { padding: 1.25rem 1.5rem 0.75rem; }
.keys-group { display: flex; flex-direction: column; gap: 0.625rem; }
.keys-list { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.5rem 0.875rem; }
.keys-list dt { display: flex; gap: 0.1875rem; }
.keys-list dd { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

.kbd-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.375rem; border: 0; border-radius: 0.375rem;
  background: none; color: inherit; font: inherit; font-size: 0.75rem; cursor: pointer;
  transition: color 150ms ease;
}
.kbd-more:hover { color: var(--ink); }
.kbd-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A restore is not an import, and the button that does it should not look like one. */
.field-warn {
  margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 0.75rem; line-height: 1.5; color: var(--ink);
}
.field-warn[hidden] { display: none; }
.btn-primary.is-danger { background: var(--danger); color: var(--surface); }

/* ---- Micro-intentions ---------------------------------------------------- */
.intent-ask {
  width: 100%; max-width: 30rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  text-align: center;
}
.intent-ask[hidden] { display: none; }
.intent-q { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.375rem; line-height: 1.3; color: var(--ink); }
.intent-task {
  margin: 0; max-width: 24rem; font-size: 0.75rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.intent-task:empty { display: none; }
.intent-form { width: 100%; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.intent-input {
  flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0.625rem 0.875rem;
  font: inherit; font-size: 1rem; color: var(--ink); text-align: center;
  background: var(--well); border: 1px solid var(--line); border-radius: 0.625rem;
  outline: none; caret-color: var(--accent);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.intent-input::placeholder { color: var(--muted); }
.intent-input:focus { border-color: var(--accent); background: var(--well-focus); box-shadow: 0 0 0 1px var(--accent); }
.intent-hint { margin: 0; font-size: 0.6875rem; color: var(--muted); }

/* During the session. It drifts — a few pixels over eight seconds, which is slow enough
   that you never catch it moving and just enough that the line stays alive on a screen
   where nothing else does. Killed with every other animation under reduced motion. */
.intent-live {
  margin: 0; width: 100%; max-width: 30rem; min-height: 7rem;
  display: flex; align-items: center; justify-content: center;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: clamp(1.125rem, 3.5vw, 1.375rem); line-height: 1.4;
  text-align: center; color: var(--muted); text-wrap: balance;
  animation: intent-drift 8s ease-in-out infinite alternate, intent-in 900ms ease both;
}
.intent-live[hidden] { display: none; }
@keyframes intent-drift { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes intent-in { from { opacity: 0; } to { opacity: 1; } }

/* The task's open steps as one-tap intentions. Wraps; never scrolls sideways. */
.intent-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; max-width: 34rem; }
.intent-steps[hidden] { display: none; }
.intent-step {
  min-height: 2.75rem; max-width: 100%; padding: 0.375rem 0.875rem; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--well); color: var(--ink);
  font: inherit; font-size: 0.8125rem; line-height: 1.3; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.intent-step:hover { border-color: var(--muted); }
.intent-step[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-fill); color: var(--accent); font-weight: 600; }
.intent-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* After an aim that didn't land: an optional where-I-stopped line. */
.resume-form { width: min(28rem, 100%); display: flex; align-items: center; gap: 0.5rem; }
.resume-form[hidden] { display: none; }
.resume-form .intent-input { flex: 1 1 auto; min-width: 0; }

/* "Pick up: …" above the notes, until the next session on the task ends. */
.current-resume {
  margin: 0.125rem 0 0; max-width: 34rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--accent); text-align: center;
}
.current-resume[hidden] { display: none; }

/* ---- Ending the day ------------------------------------------------------ */
.end-day {
  width: calc(100% - 0.5rem); margin: 1.25rem 0.25rem 0.25rem; padding: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px dashed var(--line); border-radius: 0.625rem;
  background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.end-day:hover { color: var(--ink); border-color: var(--muted); border-style: solid; background: var(--well); }
.end-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shutdown {
  width: min(34rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  border-radius: 1rem; overflow-y: auto;
  opacity: 0; transform: translateY(0.75rem) scale(0.98);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(.4, 0, 1, 1),
              background-color 700ms ease, border-color 700ms ease,
              overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.shutdown[open] {
  opacity: 1; transform: none;
  transition: opacity 200ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1),
              background-color 900ms ease, border-color 900ms ease,
              overlay 320ms allow-discrete, display 320ms allow-discrete;
}
@starting-style { .shutdown[open] { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }
.shutdown::backdrop {
  background: rgba(8, 7, 6, 0.55);
  opacity: 0;
  transition: opacity 220ms ease, background-color 900ms ease, overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.shutdown[open]::backdrop { opacity: 1; }
@starting-style { .shutdown[open]::backdrop { opacity: 0; } }
/* The last step is the only one that looks different, and it takes most of a second to
   get there: the panel and the room behind it both go down to nearly nothing. */
.shutdown[data-final="true"] { background: #0c0b0a; border-color: #17150f; color: #e8e2d6; }
.shutdown[data-final="true"]::backdrop { background: rgba(4, 4, 3, 0.9); }
.shutdown[data-final="true"] .sd-foot { border-top-color: rgba(255, 255, 255, 0.07); }
.shutdown[data-final="true"] .btn-primary { background: #e8e2d6; color: #17150f; }

.sd-inner { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1.5rem 1.5rem; }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.5rem; }
.sd-step { margin: 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.sd-step[hidden] { display: none; }
.shutdown[data-final="true"] .icon-btn { color: rgba(232, 226, 214, 0.5); }

.sd-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.sd-panel[hidden] { display: none; }
.sd-title { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.5rem; line-height: 1.25; color: inherit; }
.sd-lede { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.shutdown[data-final="true"] .sd-lede { color: rgba(232, 226, 214, 0.62); }
/* Nothing to do on the last step but read it, so it gets the room to be read in. */
.sd-final { padding: 2.5rem 0 2rem; text-align: center; gap: 1rem; }
.sd-final .sd-title { font-size: 2rem; }
.sd-final .sd-lede { max-width: 26rem; margin: 0 auto; }

.sd-summary { margin: 0.25rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sd-summary li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink); }
.sd-summary-value { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-summary-done { color: var(--muted); }

.sd-list { margin: 0.25rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.sd-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
  border: 1px solid var(--hairline); border-radius: 0.625rem; background: var(--well);
}
.sd-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.sd-row-title { font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere; }
.sd-row-cat { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--muted); }
/* Moved, and still on the list: the decision is visible and one press from reversed. */
.sd-row[data-moved="true"] { opacity: 0.55; }
.sd-row[data-moved="true"] .sd-row-title { text-decoration: line-through; }
.sd-row-btn {
  flex-shrink: 0; min-height: 2rem; padding: 0 0.625rem; border-radius: 0.5rem;
  border: 1px solid var(--line); background: none; color: var(--muted);
  font: inherit; font-size: 0.75rem; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.sd-row-btn:hover { color: var(--ink); border-color: var(--muted); }
.sd-row-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sd-dump { min-height: 8rem; resize: vertical; line-height: 1.6; }

.sd-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--hairline);
  transition: border-color 700ms ease;
}

/* ---- The curtain --------------------------------------------------------- */
/* Over everything, including the corner button and the header, because a day that is
   closed should not have a Tasks button on it. */
/* Dark in both themes, and the one place in the app that ignores the theme on purpose:
   it is the same near-black the ritual's last panel faded to, so the panel dissolves
   into a curtain that was already behind it. A screen whose whole job is "stop looking
   at this" cannot be the brightest thing in the room. */
.rest {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem;
  background: #0c0b0a; color: #e8e2d6;
  animation: rest-in 900ms ease both;
}
.rest[hidden] { display: none; }
@keyframes rest-in { from { opacity: 0; } to { opacity: 1; } }
.rest-inner { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; text-align: center; outline: none; }
.rest-date { margin: 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(232, 226, 214, 0.5); }
.rest-title { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; color: inherit; }
.rest-line { margin: 0; font-size: 0.875rem; color: rgba(232, 226, 214, 0.62); font-variant-numeric: tabular-nums; }
.rest-open {
  margin-top: 1.75rem; padding: 0.5rem 0.875rem; border: 0; border-radius: 0.5rem;
  background: none; color: rgba(232, 226, 214, 0.55); font: inherit; font-size: 0.75rem; cursor: pointer;
  transition: color 200ms ease;
}
.rest-open:hover { color: #e8e2d6; }
.rest-open:focus-visible { color: #e8e2d6; outline: 2px solid rgba(232, 226, 214, 0.6); outline-offset: 2px; }

/* Keyboard hints mean nothing without a keyboard. */
@media (hover: none) { .kbd-only { display: none; } }

/* Phone: both dialogs become sheets from the bottom, full width, within thumb reach. */
@media (max-width: 639px) {
  /* .tasks-fab removed from here as it's in the header */
  .drawer, .composer, .review, .keys, .shutdown {
    inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
    border-radius: 1.25rem 1.25rem 0 0; border-bottom: 0;
  }
  /* Read, not typed into: no keyboard to dodge, so these stay ordinary bottom sheets. */
  .review, .keys { max-height: 88dvh; }
  /* Step three does take the keyboard, so the ritual sits above it like the composer. */
  .shutdown { top: calc(var(--vv-top, 0px) + 0.5rem); bottom: auto; height: calc(var(--vvh, 100dvh) - 0.5rem); max-height: none; border-radius: 1rem; }
  .sd-inner { padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .sd-foot .btn-primary { flex: 1 1 auto; }
  /* --vv-top, --vvh and --kb come from app.js: how far the page has been panned, the
     space above the keyboard, and the keyboard itself. The list sits on the keyboard. */
  .drawer { bottom: var(--kb, 0px); }
  .drawer { height: auto; max-height: min(88dvh, calc(var(--vvh, 100dvh) - 0.75rem)); transform: translateY(100%); }
  .drawer[open] { transform: none; }
  @starting-style { .drawer[open] { transform: translateY(100%); } }
  .drawer-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .drawer-foot { display: none; }
  /* Writing a task brings the keyboard up at once, so on a phone the form hangs from the
     top of what's visible and fills exactly the space above the keyboard. It arrives
     almost where it ends up: a sheet sliding in from below the screen is a field Safari
     thinks is off-screen, and it pans the whole page to chase it. */
  .composer {
    top: calc(var(--vv-top, 0px) + 0.5rem); bottom: auto;
    height: calc(var(--vvh, 100dvh) - 0.5rem); max-height: none;
    transform: translateY(1.5rem);
  }
  .composer[open] { transform: none; }
  @starting-style { .composer[open] { transform: translateY(1.5rem); } }
  .composer-form { padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .composer-foot .btn-primary { flex: 1 1 auto; }
  .review-body, .keys-body { padding: 0.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .review .composer-head, .keys .composer-head { padding: 1.25rem 1rem 0.75rem; }
  .review-figures { gap: 0.375rem; }
  .figure { padding: 0.625rem 0.5rem 0.75rem; }
  .figure-value { font-size: 1.25rem; }
  /* The name and the number keep their room; the bar gives up whatever is left. */
  .split-row { grid-template-columns: 6.5rem 1fr auto; gap: 0.5rem; font-size: 0.75rem; }
  /* The field needs the whole width to be typed into; the button goes under it. */
  .intent-form { flex-direction: column; align-items: stretch; }
  .intent-live { min-height: 5.5rem; }
  /* Clear of the corner button, and above the on-screen keyboard when there is one. */
  .capture { inset: auto 0 calc(4.75rem + var(--kb, 0px)) 0; }
}
@media (max-width: 359px) { .field-row { grid-template-columns: 1fr; } }
/* iOS zooms the whole page in on any field under 16px the moment it's focused. */
@media (pointer: coarse) { .search-input, .music-input, .code-input { font-size: 1rem; } }

/* The page hints: kept clear of the Tasks button in the corner on both sides, so the
   row stays centred. */
@media (min-width: 640px) { footer.kbd-hints { padding-inline: 9rem; } }
@media (max-width: 639px) { footer.kbd-hints { padding-right: 8rem; } }

/* Keyboard hints mean nothing without a keyboard. */
@media (hover: none) { footer.kbd-hints { display: none; } }
/* With the hints gone, keep the content clear of the fixed folder chip. */
@media (max-width: 639px) and (hover: none) { body { padding-bottom: 4.25rem; } }