* { box-sizing: border-box; }
html,body { height: 100%; }
body { margin: 0; background: var(--color-bg-base); color: var(--color-text-main); font: var(--font-size-body)/1.6 system-ui, sans-serif; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1,h2,h3,p { margin: 0 0 var(--space-md); }
.eyebrow,.muted,small { color: var(--color-text-muted); }
small { font-size: var(--font-size-caption); }
svg { display: block; width: 100%; height: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- Splash ---- */
#splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--color-bg-base); z-index: 90; transition: opacity .5s ease; }
#splash.is-gone { opacity: 0; pointer-events: none; }
#splash img { width: 148px; height: auto; }

/* ============================================================
   Lobby — mirrors 30Flow: content sits at the bottom of the
   screen, brand and clock share a bottom-aligned row, four
   square pods, memo capsule pinned to the bottom edge.
   ============================================================ */
.lobby { height: 100svh; display: flex; flex-direction: column; padding: var(--space-lg); position: relative; overflow: hidden; }
/* The tile is a backing plate, not a button the eye should land on first:
   36px around a 28px glyph instead of 44px, so it stops competing with the pods. */
.lobby-icon { position: absolute; top: var(--space-lg); width: 36px; height: 36px; padding: var(--space-xs); background: var(--color-tile); border: 1px solid var(--color-tile-edge); border-radius: var(--radius-sm); }
.lobby-help { color: var(--color-brand); }
.lobby-gear { color: var(--pod-record); }
.lobby-icon:active { background: var(--color-tile-down); }
.lobby-help { left: var(--space-lg); }
.lobby-gear { right: var(--space-lg); }
.cockpit { margin-top: auto; margin-bottom: var(--reserve-memo); }
.brand { text-align: center; width: 50%; margin: 0 0 var(--space-lg) auto; }
.brand { text-align: center; }
.clock-slot { width: 85%; margin: 0 auto; }
.wordmark { font-size: var(--font-size-brand); font-weight: 800; letter-spacing: .02em; margin: 0; line-height: 1.1; }
.wordmark-mark { color: var(--color-brand); font-style: italic; font-weight: 900; }
.brand-version { display: block; font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .18em; color: var(--color-text-faint); margin-top: var(--space-xs); }

/* ---- Analog clock (ported from 30Flow v8.33) ---- */
.clock { width: 100%; aspect-ratio: 1; position: relative; }
.clock svg { overflow: visible; }
.clock-tick { stroke: var(--color-clock-tick); stroke-width: 1; stroke-linecap: round; }
.clock-twelve { fill: var(--color-clock-twelve); }
/* Monospace read like a terminal on a watch face; the dial numerals use the
   app font, larger, with a shade copy behind them for relief. */
.clock-numeral { fill: var(--color-clock-face); font-family: system-ui, sans-serif; font-size: 13.2px; font-weight: 800; letter-spacing: -.5px; }
.clock-numeral.is-shade { fill: var(--color-clock-relief); }
.clock-date { font-family: ui-monospace, monospace; font-size: 7.4px; letter-spacing: .4px; }
.clock-date-month { fill: var(--color-clock-sub); }
.clock-date-day { fill: var(--color-clock-datenum); }
.clock-hand { fill: var(--color-clock-face); }
.clock-hand-second { fill: var(--color-clock-second); }
.clock-pivot { fill: var(--color-clock-face); }
/* The core dot is the second layer of the pivot. */
.clock-core { fill: var(--color-clock-core); }
.clock-second { transform-origin: 50px 50px; transform-box: view-box; animation: clock-sweep 60s linear infinite; }
@keyframes clock-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .clock-second { animation: none; } }

/* ---- Dive bezel (clock page) ---- */
.clock-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding-top: var(--space-xl); }
.dive { width: min(84vw, 360px); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
/* No transform-origin here: the rotate() attribute already carries its own
   centre, and setting both rotates about the wrong point and flings the ring
   off screen. .clock-second needs an origin because its rotation comes from a
   keyframe with no centre of its own. */
.bezel-edge { fill: var(--bezel-edge); }
.bezel-groove { fill: var(--bezel-tooth); }
.bezel-face { fill: var(--bezel-face); }
.bezel-bar { stroke: var(--bezel-mark); stroke-width: 2.1; }
.bezel-hash { stroke: var(--bezel-mark); stroke-width: .8; stroke-linecap: round; }
/* paint-order puts the stroke behind the fill, which fattens the glyph. .6 closed
   the gap between the two digits and they read as one blob; .22 is the weight
   that survives at this size without merging. */
.bezel-num { fill: var(--bezel-mark); stroke: var(--bezel-mark); stroke-width: .22; paint-order: stroke;
  font-family: system-ui, sans-serif; font-size: 7.2px; font-weight: 700; letter-spacing: .35px; }
.bezel-num.is-hot { fill: var(--bezel-hot); stroke: var(--bezel-hot); }
.bezel-zero { fill: var(--bezel-zero); }
.dive-face { fill: var(--color-bg-surface); }
.is-running .bezel { opacity: .92; }
/* An instrument readout, not a headline: smaller, monospaced and spaced out so
   it reads as a measurement and stops competing with the watch above it. */
.clock-readout { font-family: ui-monospace, monospace; font-size: var(--font-size-brand); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .14em; color: var(--color-readout); margin: 0; }
.clock-colon { color: var(--color-readout-mark); }
.pips { display: flex; gap: var(--space-sm); align-items: center; }
.pips[hidden] { display: none; }
.pip { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-pip); transition: background .25s linear; }
.pip.is-out { background: var(--color-pip-out); }
.is-finished .clock-readout, .is-finished .clock-colon { color: var(--color-timer); }
.clock-note { font-size: var(--font-size-caption); color: var(--color-text-muted); text-align: center; margin: 0; max-width: 30ch; }
.clock-actions { justify-content: center; }

/* ---- Pods ---- */
.pods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.pod { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; background: var(--color-bg-card); border: 1px solid var(--color-bg-card-active); border-radius: var(--radius-lg);
  padding: var(--space-md); color: var(--color-oncard-main); overflow: hidden; transition: transform .15s ease; }
.pod:active { transform: scale(.96); }
.pod-icon { width: 36px; height: 36px; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-bg-card-active); display: grid; place-items: center; }
.pod-foot { width: 100%; }
.pod-sub { display: block; font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-oncard-muted); }
.pod-line { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); }
.pod-title { font-size: var(--font-size-body); font-weight: 700; }
.pod-add { width: 16px; height: 16px; flex: none; }
.pod-hint { display: block; font-size: var(--font-size-micro); color: var(--color-oncard-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-today .pod-icon { color: var(--pod-today); } .pod-today .pod-add { color: var(--pod-today); }
.pod-record .pod-icon { color: var(--pod-record); }
.pod-remind .pod-icon { color: var(--color-timer); } .pod-remind .pod-add { color: var(--color-timer); }
.pod-clock { display: grid; place-items: center; background: none; border: 0; padding: 0; }
.pod-clock .clock { width: 100%; }
.pod-clock { position: relative; min-width: 0; min-height: 0; }
/* The way into the timer is the twelve o'clock marker, not the whole face — the
   face is most of a quadrant and would be far too easy to hit by accident.
   The marker itself is only about ten pixels here, so the target is widened to
   a thumb while the visible affordance stays the triangle. */
.clock-key { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px;
  padding: 0; border: 0; background: none; }
.pod-commit .pod-icon { color: var(--pod-commit); } .pod-commit .pod-add { color: var(--pod-commit); }
.pod-setup .pod-icon { color: var(--pod-setup); }

/* ---- Memo capsule ---- */
.memo-bar { position: fixed; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg); z-index: 60; }
.memo { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: var(--space-sm); background: var(--color-bg-bar); border: 1px solid var(--color-bg-card-active); border-radius: var(--radius-bar); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); margin: 0; }
.memo-field { min-width: 0; display: grid; }
.memo-label { font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; color: var(--color-timer); }
.memo-mic { width: 18px; height: 18px; color: var(--color-timer); }
.memo input { width: 100%; min-width: 0; background: none; border: 0; color: var(--color-oncard-main); padding: 0; }
.memo input::placeholder { color: var(--color-oncard-muted); }
.memo-time { width: 68px; min-width: 0; background: none; border: 0; color: var(--color-oncard-muted); font-size: var(--font-size-caption); padding: 0; }

.reminder-time { flex: none; font-size: var(--font-size-caption); font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.memo-ai { width: 100%; text-align: left; cursor: pointer; }
.memo-ai .memo-mic, .memo-ai .memo-label { color: var(--color-brand); }
.memo-ai { grid-template-columns: minmax(0,1fr) auto; padding-right: var(--space-md); }
.memo-ai .memo-field { grid-auto-flow: column; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
/* Reminders: three separate pills on one row rather than a single bar. */
.rem-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
.page-body .rem-pill { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); color: var(--color-text-main); }
.page-body .rem-time { width: 104px; text-align: center; color: var(--color-text-muted); }
.page-body .rem-add { width: 44px; min-height: 44px; padding: var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-timer); color: var(--color-oncard-main); }
/* The memo capsule keeps its own look inside pages, where form controls are otherwise boxed. */
.page-body .memo input { background: none; border: 0; padding: 0; color: var(--color-oncard-main); border-radius: 0; }
.page-body .memo input::placeholder { color: var(--color-oncard-muted); }
.page-body .memo .memo-time { color: var(--color-oncard-muted); }
.page-body .memo .memo-add { background: var(--color-timer); border: 0; color: var(--color-oncard-main); min-height: 36px; padding: var(--space-sm); border-radius: var(--radius-pill); }
.page-body .memo label { margin: 0; }
.memo-ai-text { font-size: var(--font-size-body); color: var(--color-oncard-muted); }
.memo-add { width: 36px; height: 36px; padding: var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-timer); color: var(--color-oncard-main); }
.memo-count { font-size: var(--font-size-micro); font-weight: 700; color: var(--color-text-faint); margin: var(--space-sm) 0 0 var(--space-md); }

/* ============================================================
   Inner pages — 30Flow PageContainer: centred title, back row,
   sticky header with a hairline separator.
   ============================================================ */
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-head { position: sticky; top: 0; z-index: 50; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); padding-top: var(--space-sm); }
.page-title { text-align: center; margin-bottom: var(--space-xs); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: .08em; color: var(--color-text-main); margin: 0 0 var(--space-xs); }
.page-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-sm) var(--space-sm); }
.page-back { display: flex; align-items: center; gap: var(--space-xs); border: 0; background: none; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 700; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
.page-back svg { width: 14px; height: 14px; }
.page-body { flex: 1; padding: var(--space-md) var(--space-lg) var(--space-lg); }
.lead { font-size: var(--font-size-title); font-weight: 700; }

/* ---- Buttons inside pages ---- */
.page input,.page select,.page textarea,.page-body button { color: var(--color-text-main); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }
.page-body button { min-height: 44px; }
.page-body .primary { color: var(--color-bg-surface); background: var(--color-accent); border-color: var(--color-accent); font-weight: 700; }

/* ---- Commitment cards ---- */
#commitments { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); }
.commitment { background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); color: var(--color-oncard-main);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 60px; }
.page-body .commitment-main { min-width: 0; display: grid; text-align: left; background: none;
  border: 0; padding: 0; min-height: 0; color: inherit; }
.commitment-title { font-size: var(--font-size-body); font-weight: 700; overflow-wrap: anywhere; }
.commitment-detail { color: var(--color-oncard-muted); font-weight: 400; font-size: var(--font-size-caption); margin-left: var(--space-sm); }
.commitment-side { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.commitment.running { background: var(--color-bg-card-active); }
.commitment.done { background: var(--color-bg-card-done); color: var(--color-oncard-done); }
.commitment.done .commitment-title { text-decoration: line-through; color: var(--color-oncard-done); }
.commitment.done .pod-sub { color: var(--color-oncard-done); }
.page-body .commitment button { background: none; color: var(--color-oncard-main); border-color: var(--color-oncard-muted); min-height: 36px; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-caption); }
.page-body .commitment .round { width: 36px; padding: 0; border-radius: var(--radius-pill); font-size: var(--font-size-body); }
.page-body .commitment .primary { background: var(--color-brand); color: var(--color-bg-card); border-color: var(--color-brand); }
.pod-timer { font-size: var(--font-size-body); font-variant-numeric: tabular-nums; color: var(--color-brand); font-weight: 700; }
.pod-count { font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; color: var(--color-oncard-muted); }

/* ---- Timer stage ---- */
.stage { text-align: center; }
.stage-title { font-size: var(--font-size-title); }
.ring { position: relative; width: 260px; max-width: 78vw; margin: var(--space-xl) auto; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--color-border); stroke-width: 4; }
.ring-value { fill: none; stroke: var(--color-text-main); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring.urgent .ring-value { stroke: var(--color-timer); }
.ring.urgent .ring-text { color: var(--color-timer); }
.ring-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--font-size-clock); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stage .actions { justify-content: center; }

/* ---- Forms ---- */
label { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.page-body input,.page-body select,.page-body textarea { width: 100%; min-width: 0; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-xs); }
.day { margin: 0; display: block; position: relative; }
.day input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.day span { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-bg-surface);
  color: var(--color-text-muted); font-size: var(--font-size-caption); }
.day input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-surface); font-weight: 700; }
.day input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.day-0 span, .day-6 span { color: var(--color-timer); }
.day-0 input:checked + span, .day-6 input:checked + span { background: var(--color-timer); border-color: var(--color-timer); color: var(--color-bg-surface); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip { margin: 0; position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span, .chip-add { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-bg-surface); color: var(--color-text-main); font-size: var(--font-size-caption); }
/* Selected keeps its own light tint and gains a dark ring instead of being
   flooded with accent blue, which buried the colour coding under one dark slab. */
.chip input:checked + span { border-color: var(--color-text-main); box-shadow: inset 0 0 0 1px var(--color-text-main); font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chip-add { color: var(--color-text-muted); border-style: dashed; min-height: 0; }
.chip-1 span { background: var(--chip-1); } .chip-2 span { background: var(--chip-2); }
.chip-3 span { background: var(--chip-3); } .chip-4 span { background: var(--chip-4); }
.chip-5 span { background: var(--chip-5); } .chip-6 span { background: var(--chip-6); }
.chip-custom span { background: var(--chip-custom); }
/* Held long enough to delete; the callout and text selection would otherwise
   fire first on touch and eat the gesture. */
.chip-custom { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.page-body input[type=checkbox] { width: auto; accent-color: var(--color-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.amount { display: flex; align-items: center; gap: var(--space-sm); }
.quick-block { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.quick-block summary { font-size: var(--font-size-caption); font-weight: 700; color: var(--color-accent); padding: var(--space-xs) 0; }
.quick-block form { margin-top: 0; }
.or-line { display: flex; align-items: center; gap: var(--space-md); color: var(--color-text-muted); font-size: var(--font-size-caption); margin: var(--space-md) 0 0; }
.hint { font-size: var(--font-size-micro); color: var(--color-text-muted); margin: var(--space-sm) 0 0; }
.or-line::before,.or-line::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.secondary .capsule { margin-bottom: var(--space-md); }
form { margin-top: var(--space-md); }

/* ---- Misc ---- */
.notice { padding: var(--space-md); border-left: 3px solid var(--color-accent); background: var(--color-bg-surface); border-radius: var(--radius-sm); margin-bottom: var(--space-md); }
.notice:empty { display: none; }
.toast { position: fixed; pointer-events: none; left: var(--space-md); right: var(--space-md); top: var(--space-md); z-index: 80;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-bg-card);
  color: var(--color-oncard-main); font-size: var(--font-size-caption); }
.toast:empty { display: none; }
.stat-card { background: var(--color-bg-card); color: var(--color-oncard-main); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); }
.stat-main { font-size: var(--font-size-title); font-weight: 800; color: var(--color-brand); margin: 0; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--color-oncard-muted); margin: 0; font-size: var(--font-size-caption); margin-left: auto; }
.cal-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-md); }
.cal-head { font-size: var(--font-size-caption); font-weight: 700; letter-spacing: .12em; color: var(--color-text-muted); margin: 0 0 var(--space-sm); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-xs); }
.cal-dow { font-size: var(--font-size-micro); color: var(--color-text-faint); text-align: center; padding: var(--space-xs) 0; }
.cal-dow.is-weekend { color: var(--color-timer); font-weight: 700; }
.cal-cell.is-weekend { color: var(--color-timer); }
.cal-cell.is-weekend.is-future { color: var(--color-timer); opacity: .45; }
.cal-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; border-radius: var(--radius-pill); color: var(--color-text-main); }
.cal-cell.is-blank { visibility: hidden; }
.cal-cell.is-future { color: var(--color-text-faint); }
/* Four states, because "did nothing" and "did some" are not the same day.
   A day with nothing scheduled stays plain. */
.page-body .cal-cell { border: 0; background: none; padding: 0; min-height: 0; }
.cal-cell.is-open { box-shadow: inset 0 0 0 1px var(--color-border); }
.cal-cell.is-part { background: var(--color-accent-soft); font-weight: 700; }
.cal-cell.is-done, .cal-cell.is-weekend.is-done { background: var(--color-accent); color: var(--color-bg-surface); font-weight: 700; }
.cal-cell.is-today { text-decoration: underline; text-underline-offset: 3px; }
.cal-cell.is-picked { outline: 2px solid var(--color-text-main); outline-offset: -2px; }
.cal-legend { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-micro); color: var(--color-text-muted); margin: var(--space-md) 0 0; }
.cal-key { width: 12px; height: 12px; border-radius: var(--radius-pill); flex: none; margin-left: var(--space-sm); }
.cal-key.is-part { background: var(--color-accent-soft); }
.cal-key.is-done { background: var(--color-accent); }

/* Record page pins its own height so the month never scrolls away. */
.page.is-fixed { height: 100svh; }
.page.is-fixed .page-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.page.is-fixed .stat-card, .page.is-fixed .cal-card { flex: none; }
.day-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.day-head { font-size: var(--font-size-caption); font-weight: 700; letter-spacing: .08em; color: var(--color-text-muted); margin: 0 0 var(--space-sm); }
.day-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.day-mark { flex: none; width: 20px; text-align: center; color: var(--color-text-faint); font-weight: 700; }
/* A tint alone is too pale to read at this size, so the dot keeps a hairline ring. */
.day-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.day-dot.tone-1 { background: var(--chip-1); } .day-dot.tone-2 { background: var(--chip-2); }
.day-dot.tone-3 { background: var(--chip-3); } .day-dot.tone-4 { background: var(--chip-4); }
.day-dot.tone-5 { background: var(--chip-5); } .day-dot.tone-6 { background: var(--chip-6); }
.day-row.is-done .day-mark { color: var(--color-accent); }
.day-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.day-row.is-done .day-name { color: var(--color-text-muted); text-decoration: line-through; }
.day-kind { flex: none; font-size: var(--font-size-caption); color: var(--color-text-muted); }
.help-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.help-card h2 { font-size: var(--font-size-body); font-weight: 700; margin: 0 0 var(--space-xs); }
.help-card p { color: var(--color-text-muted); font-size: var(--font-size-caption); margin: 0; }
.secondary { border-top: 1px solid var(--color-border); margin-top: var(--space-xl); padding-top: var(--space-lg); }
.manage-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.reminder-list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.reminder { display: flex; align-items: center; gap: var(--space-sm); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); overflow-wrap: anywhere; }
.reminder-dot { width: 7px; height: 7px; flex: none; border-radius: var(--radius-pill); background: var(--color-brand); }
/* Done is the brand mark, delete is neutral until pressed. A green tick beside a
   red cross reads as a traffic light and was rejected. */
.page-body .rem-act { flex: none; width: 32px; min-height: 32px; padding: 0; border-radius: var(--radius-pill); line-height: 1; }
.page-body .rem-act.is-done { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-surface); font-weight: 700; }
.page-body .rem-act.is-drop { background: none; border-color: var(--color-border); color: var(--color-text-muted); }
.page-body .rem-act.is-drop:active { background: var(--color-timer); border-color: var(--color-timer); color: var(--color-bg-surface); }
.reminder.is-archived { opacity: var(--opacity-done); }
.reminder.is-archived .reminder-text { font-weight: 400; }
.reminder-text { flex: 1; min-width: 0; font-size: var(--font-size-body); font-weight: 700; color: var(--color-text-main); line-height: 1.35; }
footer { padding: 0 var(--space-lg) var(--space-lg); display: grid; gap: var(--space-xs); }
[hidden] { display: none !important; }
@media (max-width: 360px) { .pod { padding: var(--space-sm); } }