/* ───────────────────────────────────────────────
   THE CACHE — widget board + sidebar. Plain CSS.
   Widgets scale their contents with container queries.
   ─────────────────────────────────────────────── */

:root {
  /* Typography (2026-07-17): the DEFAULT is now an accessible system sans for readable
     body text; --font-mono is the fixed monospace kept for the brand ACCENT labels (dock,
     stats, section headers, numbers). System stacks = zero web-font, instant, no CDN. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ink-rgb: 28, 26, 18;
  --paper: #ece6d6;
  --panel: #e4ddca;
  --ink: rgb(var(--ink-rgb));
  --accent: #c9542e;
  --edge: rgba(var(--ink-rgb), 0.30);
  --edge-soft: rgba(var(--ink-rgb), 0.14);
  --board-glow: 130, 195, 240;   /* the colour of the living-water light that follows the pointer */
  /* ONE healthy-green for every status light — the dock triad and the connection panel's rows
     mean the same thing, so they must never drift to two different greens. */
  --dot-ok: #3f8f4e;
}
/* the living-water background canvas — sits BEHIND every widget, never eats a click */
#ambientFx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* iOS auto-zooms the whole page when a focused input's font-size is under 16px — the "tapping
   the report box zooms the UI slightly" bug. On touch devices every text input renders ≥16px;
   desktop keeps each control's designed size. (Mobile SOP: thumb-friendly inputs.) */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="number"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="date"], input[type="time"],
  input:not([type]), textarea, select { font-size: 16px; }
}
:root[data-theme="dark"] {        /* BEAST MODE — fully red, feral */
  --ink-rgb: 255, 211, 206;              /* light warm-red text */
  --paper: #1c0307;                      /* deep blood red */
  --panel: #320810;                      /* lifted red panel */
  --accent: #ff3a46;                     /* hot red */
  --edge: rgba(255, 80, 88, 0.45);       /* red-glowing borders */
  --edge-soft: rgba(255, 80, 88, 0.20);
  --widget-bg: rgba(255, 70, 80, 0.08);  /* widgets glow red, not white-washed */
}
:root[data-theme="dark"] body {          /* red room + red dot-grid */
  background-color: #160206;
  background-image: radial-gradient(rgba(255, 70, 80, 0.13) 1px, transparent 1px);
}
/* BEAST: a single red color-blend overlay → recolors EVERYTHING to a shade of red
   (hue/saturation from the red, brightness kept from each element, so contrast holds).
   Catches every stray green/amber/icon/chart with no per-color work. */
:root[data-theme="dark"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  z-index: 2147483000; background: #d11626; mix-blend-mode: color;
}
:root[data-theme="terminal"] {
  --ink-rgb: 143, 227, 136;
  --paper: #0c0f0a;
  --panel: #141a12;
  --accent: #e6b450;
}
:root[data-theme="blueprint"] {
  --ink-rgb: 195, 214, 245;
  --paper: #0e1830;
  --panel: #16223f;
  --accent: #6aa6ff;
}
:root[data-theme="mist"] {
  --ink-rgb: 42, 47, 56;
  --paper: #e8ecf0;
  --panel: #dde3ea;
  --accent: #4a6da7;
}
:root[data-theme="vapor"] {
  --ink-rgb: 244, 198, 255;
  --paper: #1a0e2e;
  --panel: #271544;
  --accent: #ff4fd8;
}
:root[data-theme="acid"] {
  --ink-rgb: 198, 255, 80;
  --paper: #0a0a06;
  --panel: #13160b;
  --accent: #aaff2b;
}
:root[data-theme="ember"] {
  --ink-rgb: 255, 206, 176;
  --paper: #1a0c08;
  --panel: #271310;
  --accent: #ff5a36;
}
:root[data-theme="cache"] {        /* the brand theme — warm dark with #FFD409 gold */
  --ink-rgb: 240, 233, 214;
  --paper: #16140c;
  --panel: #211e12;
  --accent: #FFD409;
}
:root[data-theme="mono"] {         /* "WATER" (internal key stays `mono`) — cool + elemental, fully in BLUE. Day water:
                                      deep ocean-blue ink, a clearly-blue water board, pale blue-white surface cards.
                                      Everything — text, borders, buttons (accent = ink), lights — lives in blue. */
  --ink-rgb: 18, 42, 80;            /* deep ocean blue — the darks */
  --paper: #cbddf1;                 /* soft water blue — the board */
  --panel: #dbe8f7;                 /* shallow water — inputs / inner surfaces */
  --widget-bg: #f3f9ff;             /* brighter surface cards — lifted toward white but still clearly blue */
  --board-glow: 96, 168, 236;       /* day-water light — a soft blue that reads on the pale board */
  --accent: rgb(var(--ink-rgb));    /* buttons + accents = the deep blue ink */
  --edge: rgba(var(--ink-rgb), 0.20);        /* blue hairline that draws every widget/input */
  --edge-soft: rgba(var(--ink-rgb), 0.11);   /* internal dividers (title-bar underline, rows) */
}
@media (prefers-color-scheme: dark) {   /* AUTO — DEEP water: deep ocean board, lifted teal cards, pale cyan text */
  :root[data-theme="mono"]:not([data-monomode="light"]):not([data-monomode="dark"]) {
    --ink-rgb: 208, 230, 238;
    --paper: #07161f;              /* deep ocean */
    --panel: #0d232c;
    --widget-bg: #0f2831;          /* cards lifted a clear step off the deep water */
    --board-glow: 78, 196, 224;    /* deep-water bioluminescence */
  }
}
:root[data-theme="mono"][data-monomode="dark"] {   /* DARK forced — deep water regardless of system */
  --ink-rgb: 208, 230, 238;
  --paper: #07161f;
  --panel: #0d232c;
  --widget-bg: #0f2831;
  --board-glow: 78, 196, 224;
}
:root[data-theme="mono"] body { background-image: none; }   /* drop the dotted paper texture — calmer, flatter, more minimal */
html { background: var(--paper); }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: var(--font-ui, var(--font-sans));
  overflow: hidden;
}

/* ── Accent labels stay MONO (the brand look Cozy wants kept) ─────────────────
   The body defaults to the accessible sans above; these are the small uppercase
   labels, section headers, and the numeric readouts (monospace keeps digits
   tabular/aligned). If a new widget adds a label that should be mono, add its
   class here. Purely presentational — nothing reads data. */
.dock-label, .stat-label, .stat-tile-lbl, .widget-title, .section-title, .lib-cat, .cp-title,
.base-eyebrow, .lg-eyebrow, .bal-head, .bal-total-label, .bal-line-label, .avg-label,
.bd-head, .bg-sec, .bs-head, .bs-sec, .bs-title, .cal-inf-sec, .cal-title, .cal-wday-head,
.cat-head, .char-sec, .deck-ci-head, .deck-ci-label, .deck-ci-sec, .deck-sec, .deck-title,
.fc-head, .fc-label, .fe-label, .ff-lbl, .ff-title, .health-lbl, .if-need-lbl, .if-now-lbl,
.king-head, .lg-bub-lbl, .lg-rw-lbl, .lg-title, .lib-label, .lp-label, .mm-flag, .mm-sec,
.mo-in-tag, .mo-label, .mo-out-tag, .mo-tag, .pg-head, .pl-pane-tag, .pl-subhead, .pm-label,
.rv-label, .set-sec, .sidebar-head, .src-title, .tree-head, .tree-subhead, .upd-sec, .wiz-tag,
.wk-projh, .wk-spot-lbl, .work-when-label, .tkt-when, .cov-note,
/* numeric readouts — tabular alignment */
.bal-total, .health-big, .pg-num, .pl-big, .wk-spot-num, .daily-big, .daily-num,
.deck-day-num, .cal-wday-num, .cloud-num, .stat-value, .stat-tile-val {
  font-family: var(--font-mono);
}

/* The native cursor is BACK (2026-07-17). The jelly ball used to be the ONLY cursor
   (native hidden) — but the ball is a JS-positioned decoration that can lag or drift from
   the true pointer, and when it does, every aim is a lie: hover lands on the neighbor,
   clicks select text across the screen, small targets feel cursed. The OS cursor is the
   one thing guaranteed to be exactly where clicks land, so it stays visible as the source
   of truth and the ball trails it as jelly. (Beauty pass later: an SVG blob as a CSS
   cursor image — brand look at OS-truth position. See BACKLOG.) */
/* hold space to pan: native hand cursor (open → grabs closed), jelly cursor hidden */
body.panning, body.panning * { cursor: grab !important; }
body.panning.grabbing, body.panning.grabbing * { cursor: grabbing !important; }

/* ── board ──────────────────────────────────────── */
.board { position: fixed; inset: 0; overflow: auto; overscroll-behavior: contain; }
.board-canvas { position: relative; width: 3200px; height: 2200px; transform-origin: 0 0; }

/* zoom control (bottom-left) */
.zoom-control {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.zoom-control button {
  border: none; background: none; cursor: pointer; font-family: inherit;
  color: rgba(var(--ink-rgb), 0.7); border-radius: 999px;
  padding: 4px 8px; font-size: 13px; line-height: 1; min-width: 28px;
}
.zoom-control button:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--accent); }
#zoomReset { font-size: 11px; font-variant-numeric: tabular-nums; min-width: 44px; }

/* ── widget ─────────────────────────────────────── */
.widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  /* Minimal: a widget is just a clean panel drawn by ONE delicate hairline. No drop shadow, no fill
     gradient — flat and quiet. The border (--edge) is intentionally faint; the only lift is a subtle
     shadow while dragging. */
  background: var(--widget-bg, var(--paper));
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  container-type: size;
  perspective: 1500px;
}
/* card flip: ? on the bar shows how the widget is calculated on the back */
.widget-flip { flex: 1; min-height: 0; position: relative;
  transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.widget.flipped .widget-flip { transform: rotateY(180deg); }
.widget-face { position: absolute; inset: 0; display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face-back { transform: rotateY(180deg); background: var(--paper); pointer-events: none; }
/* only the face you can see is interactive — so the hidden back never steals clicks */
.widget.flipped .face-front { pointer-events: none; }
.widget.flipped .face-back { pointer-events: auto; }
.back-bar { cursor: default; }
.widget-back-body { flex: 1; min-height: 0; overflow-y: auto; padding: 11px 14px 14px;
  font-size: 11.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.78); text-align: left; }
.widget-back-body p { margin: 0 0 8px; }
.widget-back-body p:last-child { margin-bottom: 0; }
.widget-back-body b { color: var(--ink); font-weight: 600; }
.widget-back-body code { font-size: 10.5px; background: rgba(var(--ink-rgb), 0.09);
  padding: 0 4px; border-radius: 4px; }
.widget-help { border: none; background: none; cursor: pointer; padding: 2px 6px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
  font-weight: 700; font-size: 12px; line-height: 1; color: rgba(var(--ink-rgb), 0.38); }
.widget-help:hover { color: var(--accent); background: rgba(var(--ink-rgb), 0.06); }
.flip-back { border: none; background: none; cursor: pointer; padding: 2px 7px; border-radius: 5px;
  font-size: 14px; line-height: 1; color: rgba(var(--ink-rgb), 0.5); }
.flip-back:hover { color: var(--accent); background: rgba(var(--ink-rgb), 0.06); }
.widget.dragging {   /* picked up — the one moment a widget lifts off the flat board */
  box-shadow: 0 14px 40px -12px rgba(var(--ink-rgb), 0.35);
}
.widget.tidying, .sticker.tidying { transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1), top 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1), height 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

/* bare mode — strip border, background, shadow down to just content */
.widget.bare { background: transparent; border-color: transparent; box-shadow: none; }   /* frameless widgets stay frameless — no debossed rim */
.widget.bare.dragging { box-shadow: none; }
.widget.bare .widget-bar { border-bottom-color: transparent; }

.widget-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--edge-soft);
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.widget-bar:active { cursor: grabbing; }
.bar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.widget-color {
  border: none; background: none; cursor: pointer;
  padding: 2px 4px; border-radius: 5px; display: inline-flex; align-items: center;
}
.widget-color:hover { background: rgba(var(--ink-rgb), 0.06); }
.color-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);   /* reflects this widget's color (its own --accent override) */
  border: 1px solid rgba(var(--ink-rgb), 0.25);
}
.widget-color:hover .color-dot { transform: scale(1.15); }
/* per-widget color popover */
.wcolor-back { position: fixed; inset: 0; z-index: 330; }
.wcolor-pop {
  position: fixed; z-index: 331; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding: 9px; background: var(--paper); border: 1px solid var(--edge); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}
.wc-sw {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  border: 1px solid var(--edge-soft); background: var(--panel);
  display: grid; place-items: center; font-size: 12px; color: rgba(var(--ink-rgb), 0.55);
}
.wc-sw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px rgba(var(--ink-rgb), 0.55); }
.bar-ico { display: inline-flex; }
.bar-ico:empty { display: none; }
.bar-ico svg { width: 14px; height: 14px; stroke-width: 2; color: var(--accent); }
.widget-title {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px;
  color: rgba(var(--ink-rgb), 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-close {
  border: none; background: none; cursor: pointer;
  color: rgba(var(--ink-rgb), 0.35); font-size: 12px; line-height: 1;
  padding: 2px 4px; border-radius: 5px; flex-shrink: 0;
}
.widget-close:hover { color: var(--accent); background: rgba(var(--ink-rgb), 0.06); }
.widget-magnet {
  border: none; background: none; cursor: pointer;
  padding: 2px 4px; border-radius: 5px; display: inline-flex; align-items: center;
  color: rgba(var(--ink-rgb), 0.22); opacity: 0.5;  /* snap OFF → clearly greyed out */
  transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.widget-magnet svg { width: 13px; height: 13px; stroke-width: 2; }
.widget-magnet:hover { color: var(--accent); opacity: 1; }
.widget-magnet.on { color: var(--accent); opacity: 1; }  /* snap ON → just the accent color, no background */

.widget-body {
  flex: 1; min-height: 0;
  display: grid; place-items: center; text-align: center;
  padding: clamp(8px, 6cqmin, 22px); overflow: hidden;
}
.big { font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-size: clamp(20px, 26cqmin, 80px); }
.sub {
  text-transform: uppercase; letter-spacing: 0.16em; margin-top: 8px;
  color: rgba(var(--ink-rgb), 0.45); font-size: clamp(8px, 4.5cqmin, 13px);
}

/* Statistics widget — grid of data-fact tiles */
.widget-body.is-stats { display: block; place-items: stretch; text-align: left; overflow-y: auto; padding: clamp(8px, 5cqmin, 14px); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.stat-tile { background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--edge-soft); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.stat-tile-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile-val.t-ok { color: #3f8f4e; }
.stat-tile-val.t-bad { color: #c9542e; }
.stat-tile-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--ink-rgb), 0.5); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-empty { color: rgba(var(--ink-rgb), 0.45); font-size: 12px; text-align: center; padding: 20px 10px; }

/* Dev Tree widget — collapsible code/build-status tree */
.widget-body.is-tree { display: block; place-items: stretch; text-align: left; overflow-y: auto; padding: clamp(8px, 4cqmin, 14px); }
.tree-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.tree-sum { font-size: 11px; color: rgba(var(--ink-rgb), 0.55); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree-cnt-bad { color: #c9542e; font-weight: 700; }
.tree-cnt-todo { color: #b9842c; font-weight: 700; }
.tree-grp { margin-bottom: 4px; }
.tree-grp > summary, .tree-file > summary { cursor: pointer; list-style: none; padding: 5px 7px; border-radius: 7px; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-grp > summary { font-weight: 700; }
.tree-grp > summary::-webkit-details-marker, .tree-file > summary::-webkit-details-marker { display: none; }
.tree-grp > summary:hover, .tree-file > summary:hover { background: rgba(var(--ink-rgb), 0.05); }
.tree-subhead { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(var(--ink-rgb), 0.4); padding: 6px 6px 2px 16px; }
.tree-leaf { padding: 3px 6px 3px 20px; font-size: 11.5px; color: rgba(var(--ink-rgb), 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-leaf.warn { color: #b9842c; }
.tree-leaf.dim { color: rgba(var(--ink-rgb), 0.42); }
.tree-file { margin-left: 12px; }
.tree-file > summary { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 500; }
.tree-mk { padding: 2px 6px 2px 28px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: rgba(var(--ink-rgb), 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-mk .mk-line { color: rgba(var(--ink-rgb), 0.38); }
.tree-mk .mk-kind { font-weight: 700; }
.tree-mk.sev-bad .mk-kind { color: #c9542e; }
.tree-mk.sev-todo .mk-kind { color: #b9842c; }
.tree-empty { color: rgba(var(--ink-rgb), 0.45); font-size: 12px; text-align: center; padding: 16px 10px; }
.widget-body.is-note { place-items: stretch; padding: 12px; }
.note-edit {
  width: 100%; height: 100%; outline: none;
  text-align: left; font-size: 13px; line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.8); overflow: auto;
}
.note-edit:empty::before { content: "write a note…"; color: rgba(var(--ink-rgb), 0.3); }

/* balance widget — total with a slide-down per-account breakdown */
.widget-body.is-balance {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: center; text-align: center; gap: 4px; overflow-y: auto;
}
.widget-body.is-balance.expanded { justify-content: flex-start; }
.bal-head { flex-shrink: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.bal-total-label {
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 2px;
  font-size: clamp(8px, 4cqmin, 11px); color: rgba(var(--ink-rgb), 0.4);
}
.bal-skull {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 4px; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(var(--ink-rgb), 0.5); cursor: pointer;
  transition: color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bal-skull svg { width: 20px; height: 20px; stroke-width: 1.5; }
.bal-skull:hover { color: var(--accent); }
.is-balance.expanded .bal-skull { color: var(--accent); transform: scale(1.12); }
/* checking / savings split — quick read of where the cash sits */
.bal-split {
  flex-shrink: 0; align-self: center; min-width: min(74%, 230px);
  display: flex; flex-direction: column; gap: 3px; margin-top: 12px;
}
.bal-line { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.bal-line-label {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(9px, 4cqmin, 11px); color: rgba(var(--ink-rgb), 0.5);
}
.bal-line-amt {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink);
  font-size: clamp(13px, 6cqmin, 18px);
}
.bal-cards-line { display: none; }
.is-balance.show-net .bal-cards-line { display: flex; }
.bal-cards-line .bal-line-amt { color: #c9542e; }  /* debt reads red */
.bal-net-toggle {
  align-self: center; margin-top: 9px; padding: 3px 11px;
  border: 1px solid var(--edge); border-radius: 999px; background: none; cursor: pointer;
  font-family: inherit; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--ink-rgb), 0.5); transition: all 0.15s ease;
}
.bal-net-toggle:hover { color: var(--ink); border-color: rgba(var(--ink-rgb), 0.4); }
.bal-net-toggle.on { color: var(--accent); border-color: var(--accent); }
.bal-accounts {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.is-balance.expanded .bal-accounts { grid-template-rows: 1fr; opacity: 1; }
.bal-accounts-inner {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 1px; padding-top: 10px;
}
.acct {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12px;
  opacity: 0; transform: translateX(-18px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* cascade out, one after another */
.is-balance.expanded .acct {
  opacity: 1; transform: translateX(0);
  transition-delay: calc(var(--i) * 0.06s);
}
.acct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acct-name {
  flex: 1; text-align: left; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.7);
}
.acct-bal { font-variant-numeric: tabular-nums; color: var(--ink); }

/* safe-to-spend — clean forecast */
.widget-body.is-forecast {
  display: flex; flex-direction: column;
  padding: clamp(8px, 5cqmin, 18px); gap: 6px; overflow: hidden; text-align: center;
}
.fc-head { flex-shrink: 0; }
.fc-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; color: rgba(var(--ink-rgb), 0.45); }
.is-forecast .big { font-size: clamp(26px, 20cqmin, 56px); line-height: 1; margin-top: 2px; transition: color 0.3s ease; }
.fc-sub { font-size: 10px; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.5); margin-top: 5px; }
.fc-chart { flex: 1; min-height: 38px; }
.fc-chart svg { width: 100%; height: 100%; display: block; }
.fc-meta { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fc-runway { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.work-detail {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 12px; line-height: 1.7; color: rgba(var(--ink-rgb), 0.6);
}
.work-when { flex-shrink: 0; text-align: center; font-size: 11px; margin: 4px 0 6px; color: rgba(var(--ink-rgb), 0.6); }
.work-when-label { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 9px; color: rgba(var(--ink-rgb), 0.4); margin-bottom: 2px; }
.work-when b { color: var(--accent); }
.toggl-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: rgba(var(--ink-rgb), 0.55); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.toggl-link:hover { color: var(--ink); }
.toggl-mark { width: 14px; height: 14px; display: inline-flex; }
.toggl-mark svg { width: 14px; height: 14px; }
.fc-line { stroke: var(--ink); }
.fc-dot { fill: var(--accent); }
.fc-floor { stroke: rgba(var(--ink-rgb), 0.22); }

/* spending breakdown */
.widget-body.is-breakdown {
  display: flex; flex-direction: column; padding: clamp(8px, 5cqmin, 18px); gap: 6px; overflow: hidden;
}
/* months: full-width flex column (no inherited centering) + generous side padding */
.widget-body.is-months {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: clamp(10px, 4cqmin, 16px) clamp(14px, 5cqmin, 20px);
}
.is-months .bd-head { padding: 0 2px; }
/* ── 🐷 Finances portal ─────────────────────────────────────────────────── */
.fin-scroll { padding: 14px clamp(14px, 4vw, 28px) 40px; }
/* ── the portal WINDOW: sidebar + one section (Asana-style), not a giant scroll ── */
.fin-shell { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.fin-nav { flex: 0 0 216px; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  border-right: 1px solid var(--edge-soft); overflow-y: auto; }
.fin-nav-i { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 11px; background: none; text-align: left;
  font-family: inherit; font-size: 13.5px; color: rgba(var(--ink-rgb), 0.75); cursor: pointer; }
.fin-nav-i:hover { background: rgba(var(--ink-rgb), 0.05); }
.fin-nav-i.on { background: var(--widget-bg, var(--paper)); border-color: var(--edge-soft);
  color: var(--ink); font-weight: 600; }
.fin-nav-em { font-size: 16px; flex: 0 0 auto; }
.fin-nav-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-nav-n { flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--cal-spend) 18%, transparent); color: var(--cal-spend); padding: 0 6px; }
.fin-main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px clamp(16px, 3vw, 32px) 44px; }
.fin-main .fin-sec:first-child { margin-top: 0; }
/* Accounts room */
.fin-accts { display: flex; flex-direction: column; gap: 8px; }
.fin-acct { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--edge-soft); border-radius: 12px; }
.fin-acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-acct-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-acct-sub { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.fin-acct-bal { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-acct-role { flex: 0 0 auto; max-width: 130px; min-height: 34px; font-family: inherit; font-size: 11px;
  padding: 4px 8px; border: 1px solid var(--edge-soft); border-radius: 9px; background: var(--panel); color: rgba(var(--ink-rgb), 0.7); }
/* Transactions room */
.fin-txns { display: flex; flex-direction: column; }
.fin-txn { display: flex; align-items: baseline; gap: 12px; padding: 9px 4px; font-size: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.05); }
.fin-txn-d { flex: 0 0 52px; font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.fin-txn-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-txn-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.fin-txn-amt.in { color: var(--dot-ok); }
/* Cash-flow room */
.fin-mos { display: flex; flex-direction: column; gap: 12px; }
.fin-mo { display: flex; flex-direction: column; gap: 4px; }
.fin-mo-l { font-size: 12px; font-weight: 600; }
.fin-mo-bars { display: flex; flex-direction: column; gap: 2px; }
.fin-mo-bar { height: 7px; border-radius: 4px; }
.fin-mo-bar.in { background: color-mix(in srgb, var(--dot-ok) 55%, transparent); }
.fin-mo-bar.out { background: color-mix(in srgb, var(--cal-spend) 55%, transparent); }
.fin-mo-nums { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.6); }
.fin-net-up { color: var(--dot-ok); } .fin-net-dn { color: var(--cal-spend); }
@media (hover: none) and (pointer: coarse) { .fin-acct-role { min-height: 44px; font-size: 12px; } }

@media (max-width: 760px) {   /* phone / narrow: the sidebar becomes a scrollable tab row */
  .fin-shell { flex-direction: column; }
  .fin-nav { flex: 0 0 auto; flex-direction: row; border-right: none; border-bottom: 1px solid var(--edge-soft);
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .fin-nav::-webkit-scrollbar { display: none; }
  .fin-nav-i { flex: 0 0 auto; }
  .fin-nav-l { max-width: 120px; }
}
.fin-timer { font-family: var(--font-mono); font-size: 13px; color: rgba(var(--ink-rgb), 0.6);
  padding: 6px 10px; border: 1px solid var(--edge-soft); border-radius: 999px; }
.fin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.fin-stat { border: 1px solid var(--edge-soft); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.fin-stat-l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.fin-stat-v { font-size: clamp(17px, 4vw, 22px); font-weight: 700; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-stat-s { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); margin-top: 2px; }
.fin-sec { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: rgba(var(--ink-rgb), 0.55); margin: 22px 0 8px; }
.fin-sec-note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; color: rgba(var(--ink-rgb), 0.4); margin-left: 6px; }
.fin-queue { display: flex; flex-direction: column; gap: 8px; }
.fin-q { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; text-align: left;
  border: 1px solid var(--edge-soft); border-radius: 12px; background: none; color: var(--ink);
  font-family: inherit; font-size: 13.5px; cursor: pointer; }
.fin-q:hover { border-color: var(--accent); }
.fin-q-info { cursor: default; color: rgba(var(--ink-rgb), 0.7); }
.fin-q-info:hover { border-color: var(--edge-soft); }
.fin-q-n { font-weight: 700; color: var(--accent); }
.fin-clear { font-size: 13px; color: rgba(var(--ink-rgb), 0.5); padding: 8px 2px; }
.fin-subs { display: flex; flex-direction: column; gap: 8px; }
.fin-sub { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--edge-soft); border-radius: 12px; }
.fin-sub.cancelled { opacity: 0.55; }
.fin-sub.until { border-style: dashed; }
.fin-sub-move { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.fin-sub-move button { min-width: 30px; min-height: 21px; padding: 0; border: 1px solid var(--edge-soft); border-radius: 6px;
  background: none; color: rgba(var(--ink-rgb), 0.6); font-size: 11px; cursor: pointer; }
.fin-sub-move button:hover { color: var(--accent); border-color: var(--accent); }
.fin-sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-sub-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-sub-ev { font-size: 11px; color: rgba(var(--ink-rgb), 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-sub-ctl { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: 0 0 auto; }
.fin-status, .fin-until { font-family: inherit; font-size: 12px; min-height: 34px; padding: 4px 8px;
  border: 1px solid var(--edge); border-radius: 9px; background: var(--panel); color: var(--ink); max-width: 130px; }
.fin-sub-note { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.5); }
.fin-foot { margin-top: 26px; font-size: 11.5px; color: rgba(var(--ink-rgb), 0.45); line-height: 1.5; }
@media (max-width: 560px) {   /* phone: the row stacks — evidence under name, controls full-width */
  .fin-sub { flex-wrap: wrap; }
  .fin-sub-ctl { flex-direction: row; width: 100%; justify-content: flex-end; }
}
@media (hover: none) and (pointer: coarse) {   /* touch: every portal control hits the 44px SOP */
  .fin-sub-move { flex-direction: row; }
  .fin-sub-move button { min-width: 44px; min-height: 44px; font-size: 15px; }
  .fin-status, .fin-until { min-height: 44px; }
}
.fin-q-warn { border-color: color-mix(in srgb, var(--cal-spend) 55%, transparent); color: var(--ink); cursor: default; }
.fin-q-warn:hover { border-color: color-mix(in srgb, var(--cal-spend) 55%, transparent); }
.fin-runway { margin: 2px 0 6px; padding: 10px 14px; border: 1px solid var(--edge-soft); border-radius: 12px;
  font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.8); }
/* regulars marked "not a bill" — visible + one-tap reversible, never silently vanished */
.fin-regulars { margin-top: 10px; }
.fin-reg-note { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.5); line-height: 2; }
.fin-reg { display: inline-block; font: inherit; font-size: 11.5px; padding: 4px 10px; min-height: 30px;
  border: 1px dashed var(--edge); border-radius: 999px; background: none; color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer; margin: 0 2px; }
.fin-reg:hover { border-color: var(--accent); color: var(--accent); }
@media (hover: none) and (pointer: coarse) { .fin-reg { min-height: 44px; padding: 8px 14px; } }
.fin-flag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 6px; background: color-mix(in srgb, var(--cal-spend) 14%, transparent); color: var(--cal-spend); }
/* your plan — the definition fields */
.fin-plan { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.fin-plan-f { display: flex; align-items: center; gap: 10px; }
.fin-plan-l { flex: 0 0 148px; font-size: 12.5px; color: rgba(var(--ink-rgb), 0.65); }
.fin-plan-f input, .fin-plan-f select { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 14px; box-sizing: border-box; }
.fin-plan-h { font-size: 11px; color: rgba(var(--ink-rgb), 0.45); margin: -2px 0 4px 158px; line-height: 1.4; }
.fin-plan-row { display: flex; gap: 8px; }
.fin-plan-row .fin-plan-f { flex: 1; }
.fin-plan-day .fin-plan-l { flex-basis: auto; }
@media (max-width: 560px) { .fin-plan-l { flex-basis: 118px; } .fin-plan-h { margin-left: 128px; } }

/* Money Map · expected ahead (annual predictions) — calm, display-only rows */
.mm-annual { align-items: baseline; gap: 8px; }
.mm-an-when { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--accent); }
.mm-an-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-an-maybe { font-size: 10px; color: rgba(var(--ink-rgb), 0.5); font-style: italic; }

/* Manual accounts — the editor rows + the badge on balance-widget rows */
.mn-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 2px; }
.mn-row { display: grid; grid-template-columns: 1fr 110px 44px 44px; gap: 6px; align-items: center; }
.mn-row .mn-sub { grid-column: 1 / -1; font-size: 11px; color: rgba(var(--ink-rgb), 0.5); padding-left: 2px; }
.mn-add { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mn-name, .mn-bal { min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box; min-width: 0; }
.mn-save, .mn-x { min-width: 44px; min-height: 44px; border: 1px solid var(--edge); border-radius: 10px;
  background: none; color: var(--ink); font-size: 15px; cursor: pointer; }
.mn-save:hover { border-color: var(--accent); color: var(--accent); }
.mn-x:hover { border-color: #c9542e; color: #c9542e; }
.mn-empty { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.45); margin: 8px 2px; }
.acct-manual { display: block; font-size: 10px; color: rgba(var(--ink-rgb), 0.5); }
.acct-manual.stale { color: var(--accent); }
/* the role chip on a balance-widget account row — small, quiet, 44px on touch */
.acct-role { flex: 0 0 auto; max-width: 118px; min-height: 30px; font-family: inherit; font-size: 10.5px;
  padding: 2px 6px; border: 1px solid var(--edge-soft); border-radius: 8px; background: var(--panel); color: rgba(var(--ink-rgb), 0.7); }
@media (hover: none) and (pointer: coarse) { .acct-role { min-height: 44px; font-size: 12px; } }

/* Debt cost — the pace line is the widget's point: readable, calm, room to breathe */
.widget-body.is-debt { display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: clamp(10px, 4cqmin, 16px) clamp(14px, 5cqmin, 20px); }
.is-debt .dbt-pace { margin-top: auto; font-size: clamp(12px, 5cqmin, 13.5px); line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.75); padding-top: 8px; border-top: 1px solid var(--edge-soft); }
.is-months .mo-list,
.is-months .mo-row,
.is-months .mo-top,
.is-months .mo-bar-row { width: 100%; }
.bd-head { flex-shrink: 0; }
.bd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bd-trend { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-breakdown .bd-avg { font-size: clamp(22px, 16cqmin, 40px); line-height: 1; margin-top: 2px; }
.bd-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.bd-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bd-cat {
  width: 88px; flex-shrink: 0; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.7);
}
.bd-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.bd-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bd-amt { width: 54px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Income bubbles — shared identity for income sources across widgets ── */
.inc-bubbles {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  align-items: flex-start; justify-content: center; padding: 6px 4px;
}
.inc-bubbles.compact { gap: 6px; padding: 2px; }
.inc-strip { flex-shrink: 0; }
.inc-b { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 120px; }
.inc-bubbles.compact .inc-b { gap: 2px; max-width: 92px; }
/* black knockout badge: ink fill, paper-colored icon + number (reads as cutout) */
.inc-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  transform: scale(0.6); opacity: 0;
  animation: incPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.inc-badge svg { width: 14px; height: 14px; stroke-width: 2; }
/* status pip: ✓ = you confirmed it, faint dot = auto-detected (click to confirm) */
.inc-status {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--paper);
  cursor: pointer; transition: transform 0.12s ease;
}
.inc-status:hover { transform: scale(1.25); }
.inc-bubbles.compact .inc-status { cursor: default; }
.inc-status.is-confirmed { background: #3f8f4e; color: #fff; }
.inc-status.is-confirmed svg { width: 9px; height: 9px; stroke-width: 3.2; }
.inc-status.is-auto {
  width: 9px; height: 9px; top: -3px; right: -3px;
  background: rgba(var(--ink-rgb), 0.32);
}
.inc-bubbles.compact .inc-status { display: none; }
.inc-b { cursor: default; }
.inc-val { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.inc-bubbles.compact .inc-badge { padding: 3px 8px 3px 6px; gap: 4px; }
.inc-bubbles.compact .inc-badge svg { width: 12px; height: 12px; }
.inc-bubbles.compact .inc-val { font-size: 11px; }
.inc-lab {
  font-size: 9px; font-weight: 500; text-align: center; line-height: 1.05; max-width: 100%;
  color: rgba(var(--ink-rgb), 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inc-bubbles.compact .inc-lab { display: none; }
@keyframes incPop { to { transform: scale(1); opacity: 1; } }
.bd-fix {
  flex-shrink: 0; margin-top: 8px; align-self: flex-start;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  transition: color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bd-fix:hover { color: var(--accent); }

/* core vs flex toggles */
.cf-list { gap: 6px; }
.cf-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cf-cat { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.7); }
.cf-amt { width: 52px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.cf-toggle {
  flex-shrink: 0; width: 70px; text-align: center; padding: 3px 0; border: 1px solid var(--edge-soft); border-radius: 999px;
  background: none; cursor: pointer; font-family: inherit; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.07em; transition: background 0.15s ease, color 0.15s ease;
}
.cf-toggle.is-core, .cf-toggle.is-income { background: #3f8f4e; color: #fff; border-color: #3f8f4e; }
.cf-toggle.is-flex, .cf-toggle.is-ignore { color: rgba(var(--ink-rgb), 0.5); }
/* cadence picker — quiet by default, a custom caret so it isn't a boxy native select */
.cf-cad-wrap { position: relative; flex-shrink: 0; width: 44px; }
.cf-cad-wrap::after { content: "▾"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  font-size: 7px; color: rgba(var(--ink-rgb), 0.4); pointer-events: none; }
.cf-cad { -webkit-appearance: none; appearance: none; width: 100%; padding: 2px 14px 2px 6px;
  border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer;
  font-family: inherit; font-size: 9.5px; color: rgba(var(--ink-rgb), 0.55); }
.cf-cad:hover { border-color: var(--edge-soft); color: var(--ink); }
/* new / changed / dropped flags from recurrence detection */
.mm-flag { flex-shrink: 0; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 1px 5px; border-radius: 999px; line-height: 1.5; }
.mm-flag-new { color: #3f8f4e; border: 1px solid rgba(63, 143, 78, 0.45); }
.mm-flag-changed { color: #b9842c; border: 1px solid rgba(185, 132, 44, 0.5); }
.mm-flag-dropped { color: #c9542e; border: 1px solid rgba(201, 84, 46, 0.5); }
.inc-toggle {
  flex-shrink: 0; width: 58px; padding: 4px 0; border: 1px solid var(--edge-soft); border-radius: 999px;
  background: none; cursor: pointer; font-family: inherit; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.15s ease, color 0.15s ease;
}
.inc-toggle.is-income { background: #3f8f4e; color: #fff; border-color: #3f8f4e; }
.inc-toggle.is-skip { color: rgba(var(--ink-rgb), 0.45); }

/* category editor modal */
.cat-backdrop { position: fixed; inset: 0; z-index: 100030; /* above every surface — a modal opened FROM the deck/detail must cover it, never hide under it */ background: rgba(0, 0, 0, 0.3); }
.cat-modal {
  /* centered via inset+auto margins (NOT transform) so hit-testing stays correct under
     the Accessibility text-size zoom — a transform here makes clicks land off-target */
  position: fixed; z-index: 100031; inset: 0; margin: auto;
  width: min(420px, 92vw); height: fit-content; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5);
}
.cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--edge-soft);
  font-size: 13px; letter-spacing: 0.04em;
}
.cat-close { border: none; background: none; cursor: pointer; color: rgba(var(--ink-rgb), 0.5); font-size: 14px; }
.cat-close:hover { color: var(--accent); }
.cat-hint { padding: 10px 16px 4px; font-size: 11px; font-style: italic; color: rgba(var(--ink-rgb), 0.5); }
.cat-list { overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.cat-empty { padding: 20px 4px; text-align: center; font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
/* user-resizable modal: top-left anchored (set by JS), drag the corner */
.cat-modal.resizable {
  transform: none; inset: auto; height: auto; resize: both; overflow: hidden;
  min-width: 320px; min-height: 260px; max-width: 94vw; max-height: 92vh;
}
.cat-modal.resizable .cat-list, .cat-modal.resizable .bug-list { flex: 1; }
/* auto-save feedback on a row */
.cat-row.saving { opacity: 0.55; }
.cat-row.saved { box-shadow: inset 3px 0 0 #3f8f4e; }
.cat-row.saving, .cat-row.saved { transition: opacity 0.2s ease, box-shadow 0.2s ease; }
/* roadmap (backlog) list */
.rm-tabs { display: flex; gap: 6px; padding: 10px 16px 2px; }
.rm-tab {
  border: 1px solid var(--edge-soft); background: none; cursor: pointer; font-family: inherit;
  font-size: 11px; padding: 4px 12px; border-radius: 999px; color: rgba(var(--ink-rgb), 0.6);
}
.rm-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rm-text strong { font-weight: 600; color: var(--ink); }
.rm-list { gap: 1px; min-height: 220px; }
.rm-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(var(--ink-rgb), 0.45); margin: 14px 0 4px;
}
.rm-section:first-child { margin-top: 0; }
.rm-item { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.4; padding: 2px 0; }
.rm-box { flex-shrink: 0; width: 12px; text-align: center; color: var(--accent); }
.rm-text { flex: 1; }
.rm-item.done { color: rgba(var(--ink-rgb), 0.4); }
.rm-item.done .rm-box { color: #3f8f4e; }
.rm-item.done .rm-text { text-decoration: line-through; }

/* 💛 Back the Cache — choose-to-pay: warm words + outbound sponsor links, nothing else */
.back-modal { width: min(400px, 92vw); }
.back-body { overflow-y: auto; padding: 20px 22px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.back-em { font-size: 40px; line-height: 1; }
.back-p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.75); }
.back-links { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.back-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--panel);
  color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.back-link:hover { border-color: var(--accent); color: var(--accent); }
.back-link:active { transform: scale(0.98); }
.back-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.back-soon { font-size: 12.5px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.55); padding: 6px 4px; }
.back-fine { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.45); }
@media (max-width: 480px) {   /* modals → bottom sheets on a phone (mobile SOP #7) */
  .back-modal, .bugfix-modal { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); }
}

/* import: toast + drag-drop overlay */
.toast {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(8px);
  z-index: 100060; background: var(--ink); color: var(--paper); /* flash feedback stays visible over full-screen surfaces */
  padding: 9px 16px; border-radius: 999px; font-size: 12px; max-width: 80vw; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* confirm-deletion gate — a mis-tapped ✕/🗑 must never silently destroy data (who we build for) */
.confirm-del { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 20px; } /* the delete confirmation opened UNDER the detail sheet (z 500 vs 100001) — the "dead" trashcan bug */
.cd-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.cd-card { position: relative; width: min(92vw, 320px); background: var(--panel); border: 1px solid var(--edge);
  border-radius: 18px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35); }
.cd-icon { font-size: 30px; margin-bottom: 8px; }
.cd-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 5px; word-break: break-word; }
.cd-sub { font-size: 13px; color: rgba(var(--ink-rgb), 0.6); margin-bottom: 18px; line-height: 1.45; }
.cd-row { display: flex; gap: 10px; }
.cd-cancel, .cd-go { flex: 1; min-height: 48px; border-radius: 13px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s; }
.cd-cancel { border: 1px solid var(--edge); background: none; color: var(--ink); }
.cd-go { border: none; background: #e5484d; color: #fff; }
.cd-cancel:active, .cd-go:active { transform: scale(0.97); }
.csv-drop {
  position: fixed; inset: 0; z-index: 380; display: none; pointer-events: none;
  align-items: center; justify-content: center; background: rgba(var(--ink-rgb), 0.16);
}
.csv-drop.show { display: flex; }
.csv-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 54px; border-radius: 18px; border: 2px dashed var(--accent);
  background: var(--panel); color: var(--ink); font-size: 14px; letter-spacing: 0.04em;
}
.csv-drop-inner svg { width: 30px; height: 30px; color: var(--accent); }
.cat-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--edge-soft);
  transition: opacity 0.25s ease;
}
.cat-row.done { opacity: 0.4; }
.cat-merch-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-merch { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-dates { font-size: 10px; color: rgba(var(--ink-rgb), 0.42); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-amt { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.6); }
.cat-select {
  flex-shrink: 0; font-family: inherit; font-size: 11px; padding: 4px 6px;
  border: 1px solid var(--edge); border-radius: 7px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}

/* ── Category Manager ── */
.cm-list { display: flex; flex-direction: column; gap: 2px; }
.cm-cat { border-bottom: 1px solid var(--edge-soft); }
.cm-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; }
.cm-name { flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-name:hover { color: var(--accent); }
.cm-count { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.5);
  min-width: 30px; text-align: right; }
.cm-act { flex-shrink: 0; border: none; background: none; cursor: pointer; font-size: 13px;
  padding: 2px 5px; border-radius: 6px; color: rgba(var(--ink-rgb), 0.55); }
.cm-act:hover { background: rgba(var(--ink-rgb), 0.08); color: var(--ink); }
.cm-merch { display: none; padding: 0 2px; }
.cm-merch.open { display: block; padding: 2px 2px 10px; }
.cm-m { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cm-mname { flex: 1; min-width: 0; font-size: 11px; color: rgba(var(--ink-rgb), 0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-mto, .cm-delto { font-family: inherit; font-size: 11px; padding: 3px 6px; border: 1px solid var(--edge);
  border-radius: 7px; background: var(--panel); color: var(--ink); cursor: pointer; }
.cm-delbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px;
  padding: 4px 0; color: rgba(var(--ink-rgb), 0.7); }
.cm-delgo, .cm-x { border: 1px solid var(--edge); background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 11px; padding: 3px 9px; border-radius: 7px; color: var(--ink); }
.cm-delgo { border-color: #c9542e; color: #c9542e; }
.cm-empty2 { font-size: 11px; color: rgba(var(--ink-rgb), 0.45); padding: 4px 0; }
.cm-new { margin: 10px 16px 14px; align-self: flex-start; border: 1px dashed var(--edge); background: none;
  cursor: pointer; font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 9px; color: var(--ink); }
.cm-new:hover { border-color: var(--accent); color: var(--accent); }

/* pin-to-top button (Time worked projects + Subscriptions) */
.pin-btn { flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
  font-size: 11px; color: rgba(var(--ink-rgb), 0.22); transition: color 0.15s ease, transform 0.15s ease; }
.pin-btn:hover { color: rgba(var(--ink-rgb), 0.55); }
.pin-btn.on { color: var(--accent); transform: scale(1.08); }
.avg-row.pinned, .sub-row.pinned { background: rgba(var(--ink-rgb), 0.03); border-radius: 7px; }
.wk-proj { gap: 6px; }

/* Time worked widget */
/* saved views */
.view-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.view-del { flex-shrink: 0; color: rgba(var(--ink-rgb), 0.35); font-size: 11px; padding: 0 2px; border-radius: 4px; }
.view-del:hover { color: #c9542e; background: rgba(var(--ink-rgb), 0.08); }

.wk-spots { display: flex; gap: 8px; margin-top: 6px; width: 100%; }
.wk-spot { flex: 1 1 0; min-width: 0; text-align: center; padding: 11px 6px 9px;
  border: 1px solid var(--edge-soft); border-radius: 13px; background: rgba(var(--ink-rgb), 0.035); }
.wk-spot-num { font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums; font-size: clamp(17px, 11cqmin, 32px);
  white-space: nowrap; }
.wk-hours { color: var(--ink); }
.wk-earned { color: #3f8f4e; }
.wk-spot-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(var(--ink-rgb), 0.5); margin-top: 7px; }
.wk-running { margin: 2px 0; }
.wk-run { font-size: 11px; color: #e9408f; background: rgba(233, 64, 143, 0.1);
  border-radius: 8px; padding: 5px 9px; display: inline-block; }
.wk-projh { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.42); padding: 9px 0 2px; border-top: 1px dashed var(--edge-soft); margin-top: 6px; }
.wk-list .avg-val { font-size: 12px; }

/* Budget waterfall — this month is the hero, next month a peek below */
.pl-hero-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.pl-pane-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.4); }
.pl-pane-mo { font-size: 12px; font-weight: 600; color: var(--ink); }
.pl-hero .pl-big { font-size: clamp(22px, 9cqmin, 34px); }
.pl-note { font-size: 9.5px; color: rgba(var(--ink-rgb), 0.5); margin-top: 4px; }
.pl-tier.paid .pl-note { color: #3f8f4e; }
.pl-pool { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.6); margin: 2px 0 10px; }
.pl-pool b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* next-month peek bar */
.pl-next { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 11px;
  border: 1px solid var(--edge-soft); border-radius: 11px; background: rgba(var(--ink-rgb), 0.03);
  cursor: pointer; font-family: inherit; text-align: left; }
.pl-next:hover { border-color: var(--edge); }
.pl-next-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.3); }
.pl-next-mo { font-size: 11px; font-weight: 600; color: var(--ink); }
.pl-next-sum { flex: 1; font-size: 11px; color: rgba(var(--ink-rgb), 0.62); font-variant-numeric: tabular-nums; }
.pl-next-sum b { color: var(--ink); }
.pl-next-caret { flex-shrink: 0; font-size: 10px; color: rgba(var(--ink-rgb), 0.4); transition: transform 0.2s ease; }
.pl-next.open .pl-next-caret { transform: rotate(180deg); }
.pl-next-body { margin-top: 10px; gap: 11px; opacity: 0.85; }
.pl-next-body[hidden] { display: none; }
.pl-list { gap: 11px; }
.pl-tier { cursor: grab; }
.pl-tier.pl-dragging { opacity: 0.4; }
.pl-grip { flex-shrink: 0; color: rgba(var(--ink-rgb), 0.28); font-size: 12px; letter-spacing: -2px; cursor: grab; }
.pl-tier:hover .pl-grip { color: rgba(var(--ink-rgb), 0.5); }
.pl-row { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; margin-bottom: 4px; }
.pl-ic { flex-shrink: 0; width: 13px; font-size: 11px; }
.pl-name { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-amt { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.6); }
.pl-track { height: 10px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.pl-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pl-tier.met .pl-fill { background: #3f8f4e; }
.pl-tier.met .pl-ic { color: #3f8f4e; }
.pl-tier.part .pl-fill { background: #d6920f; }
.pl-tier.part .pl-ic { color: #d6920f; }
.pl-tier.unmet .pl-fill { background: #c9542e; opacity: 0.5; }
.pl-tier.unmet .pl-ic { color: #c9542e; }
.pl-tier.unmet .pl-name, .pl-tier.unmet .pl-amt { opacity: 0.5; }
.pl-cut { font-size: 9.5px; color: #d6920f; text-align: center; margin-top: 6px; letter-spacing: 0.05em; }
/* choose-bills button + empty state */
.pl-pick { margin-left: auto; border: 1px solid var(--edge); background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 10px; color: rgba(var(--ink-rgb), 0.7); padding: 4px 9px; border-radius: 999px; }
.pl-pick:hover { border-color: var(--accent); color: var(--accent); }
.pl-empty { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); text-align: center; padding: 6px 0 10px; line-height: 1.7; }
.pl-pick-inline { border: 1px solid var(--accent); background: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.pl-subhead { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.38);
  margin: 4px 0 1px; padding-top: 8px; border-top: 1px dashed var(--edge-soft); }
/* estimated rows read softer than the exact bank-confirmed bills */
.pl-tier.est { cursor: default; opacity: 0.82; }
.pl-tier.est .pl-name { font-style: italic; }
.pl-tier.est .pl-note { font-style: italic; }
.pl-grip.ghost { cursor: default; opacity: 0.4; }

/* bills picker modal */
.bills-modal { width: min(440px, 92vw); }
.bills-intro { font-size: 11.5px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.62); padding: 2px 2px 12px; }
.bills-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.bills-empty { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); text-align: center; padding: 24px 8px; line-height: 1.6; }
.bill-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); padding: 9px 12px; font-family: inherit; }
.bill-row:hover { border-color: rgba(var(--ink-rgb), 0.3); }
.bill-row.on { border-color: var(--accent); background: rgba(var(--ink-rgb), 0.04); }
.bill-star { flex-shrink: 0; font-size: 16px; color: rgba(var(--ink-rgb), 0.3); width: 18px; }
.bill-row.on .bill-star { color: var(--accent); }
.bill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bill-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-meta { font-size: 10px; color: rgba(var(--ink-rgb), 0.5); text-transform: capitalize; }
.bill-amt { flex-shrink: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Budget widget: plan / build mode */
.bg-modes { margin-left: auto; display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }
.bg-mode { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 3px 11px; color: rgba(var(--ink-rgb), 0.5); }
.bg-mode.on { background: var(--accent); color: var(--paper); }
.bg-view[hidden] { display: none; }
/* build mode fills the remaining widget height and scrolls (was clipped before) */
.bg-build { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.bg-build-scroll { display: flex; flex-direction: column; gap: 7px; }
.bg-sec { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.42);
  margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--edge-soft); }
.bg-sec:first-child { margin-top: 0; }
.bg-sec-note { text-transform: none; letter-spacing: 0; font-size: 9.5px; color: rgba(var(--ink-rgb), 0.4); margin-left: 6px; }
.bg-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink); }
.bg-field span { color: rgba(var(--ink-rgb), 0.7); }
.bg-field input, .bg-field select { width: 130px; flex-shrink: 0; padding: 6px 9px; font-family: inherit; font-size: 12px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums; }
.bg-field input:focus, .bg-field select:focus { outline: none; border-color: var(--accent); }
.bg-hint { font-size: 9.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }
.bg-bills { max-height: none; margin-top: 2px; }
/* build mode: must-pays are read-only here (defined in the Money Map) */
.bg-mustpays { display: flex; flex-direction: column; gap: 4px; }
.bg-mp { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.bg-mp-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-mp-amt { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.62); }
.bg-open-map { margin-top: 6px; width: 100%; border: 1px solid var(--accent); background: none; color: var(--accent);
  cursor: pointer; font-family: inherit; font-size: 11px; padding: 7px 10px; border-radius: 9px; }
.bg-open-map:hover { background: rgba(var(--ink-rgb), 0.04); }

/* Money Map widget — money in / money out in one scroll */
.mm-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.mm-sec { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.42);
  margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--edge-soft); }
.mm-sec:first-child { margin-top: 0; }
.mm-sec-note { text-transform: none; letter-spacing: 0; font-size: 9.5px; color: rgba(var(--ink-rgb), 0.4); margin-left: 6px; }
.mm-in { display: flex; flex-direction: column; gap: 6px; }
.mm-row { gap: 8px; }
.mm-dir { flex-shrink: 0; width: 14px; text-align: center; font-weight: 700; }
.mm-dir.in { color: #3f8f4e; }
.mm-dir.off { color: rgba(var(--ink-rgb), 0.3); }
.mm-empty { font-size: 11px; color: rgba(var(--ink-rgb), 0.45); padding: 4px 0; }
/* income → Toggl project link */
.mm-link-wrap { flex-shrink: 0; position: relative; }
.mm-link { -webkit-appearance: none; appearance: none; max-width: 96px; padding: 2px 16px 2px 7px;
  border: 1px solid var(--edge-soft); border-radius: 7px; background: none; cursor: pointer;
  font-family: inherit; font-size: 9.5px; color: rgba(var(--ink-rgb), 0.6);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.mm-link:hover { color: var(--ink); border-color: var(--edge); }
.mm-link-wrap::after { content: "▾"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  font-size: 7px; color: rgba(var(--ink-rgb), 0.4); pointer-events: none; }
.mm-hrs { flex-shrink: 0; font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--accent); }

/* Money flow widget — cascade of accounts with connector lines + transfer bubbles */
.af-cards-toggle { margin-left: auto; border: 1px solid var(--edge); background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 10px; color: rgba(var(--ink-rgb), 0.7); padding: 4px 9px; border-radius: 999px; }
.af-cards-toggle:hover { border-color: var(--accent); color: var(--accent); }
.af-cards-toggle.on { border-color: var(--accent); color: var(--accent); }
.af-wrap { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 8px 6px 10px; }
.af-links { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.af-link { fill: none; stroke: rgba(var(--ink-rgb), 0.22); stroke-width: 1.5; }
.af-flow { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; min-width: min-content; }
.af-tier { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.af-node { min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 13px; border-radius: 11px; border: 1px solid var(--edge); background: var(--panel); }
.af-node-type { font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.4); }
.af-node-name { font-size: 11px; color: var(--ink); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.af-node-bal { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.af-node.af-checking { border-color: var(--accent); }
.af-node.af-savings { border-color: #3f8f4e; }
.af-node.af-credit { border-style: dashed; }
.af-node.af-credit .af-node-bal { color: #c9542e; }
.af-port { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.18em; padding: 4px 14px;
  border-radius: 999px; border: 1px dashed var(--edge-soft); color: rgba(var(--ink-rgb), 0.5); }
.af-port.af-in { color: #3f8f4e; border-color: rgba(63, 143, 78, 0.5); }
.af-port.af-out { color: #c9542e; border-color: rgba(201, 84, 46, 0.45); }
.af-bubble { position: absolute; transform: translate(-50%, -50%); z-index: 2; font-size: 9.5px; padding: 2px 7px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--edge); white-space: nowrap;
  font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.75); pointer-events: none; }

/* Income forecast — slider tilts a 6-month cushion projection */
.if-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fixed-height chart (never resizes as you slide) that lets the line bleed up over the head */
.if-chart { flex: 1 1 auto; min-height: 96px; margin: 6px 0 2px; overflow: visible; }
.if-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.if-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; transition: d 0.12s ease; }
.if-base { stroke: rgba(var(--ink-rgb), 0.28); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.if-zero { stroke: rgba(var(--ink-rgb), 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.if-mlabel { fill: rgba(var(--ink-rgb), 0.45); font-size: 9px; font-family: inherit; }
.if-grid { stroke: rgba(var(--ink-rgb), 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* goal chip + "+ source" button + the scrolling list of per-source sliders */
.if-goal { margin-left: auto; border: 1px solid var(--edge); background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 10px; color: rgba(var(--ink-rgb), 0.78); padding: 4px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-goal:hover { border-color: var(--accent); color: var(--accent); }
.if-add { margin-left: 6px; border: 1px solid var(--edge); background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 10px; color: rgba(var(--ink-rgb), 0.7); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.if-add:hover { border-color: var(--accent); color: var(--accent); }
/* the goal target line + label + crossing marker */
.if-goal-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0.65; }
.if-goal-label { fill: var(--accent); font-size: 8.5px; font-family: inherit; opacity: 0.9; }
.if-goal-hit { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
/* streams view: mode toggle, legend, stacked-area strokes + labels */
.if-modeseg { margin-left: auto; display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }
.if-modeopt { border: none; background: var(--panel); cursor: pointer; font-family: inherit; font-size: 10px;
  color: rgba(var(--ink-rgb), 0.6); padding: 4px 11px; white-space: nowrap; }
.if-modeopt:hover { color: var(--accent); }
.if-modeopt.on { background: var(--accent); color: var(--paper); font-weight: 600; }
.if-modeopt.on:hover { color: var(--paper); }
.if-goal { margin-left: 6px; }                /* mode button now holds margin-left:auto */
.if-mode-streams .if-goal { display: none; }  /* goal target is cushion-only */
.if-legend { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 12px 0; }
.if-legend:empty { display: none; }
.if-leg { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--edge-soft); background: var(--panel);
  cursor: pointer; font-family: inherit; font-size: 10px; color: rgba(var(--ink-rgb), 0.8); padding: 3px 8px; border-radius: 999px; }
.if-leg[data-off] { opacity: 0.4; }
.if-leg-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.if-ylabel { fill: rgba(var(--ink-rgb), 0.4); font-size: 8px; font-family: inherit; }
.if-need { stroke: rgb(var(--ink-rgb)); stroke-width: 1.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: 0.7; }
.if-need-lbl { fill: rgb(var(--ink-rgb)); font-size: 8.5px; font-family: inherit; opacity: 0.85; }
.if-now { stroke: rgba(var(--ink-rgb), 0.55); stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.if-now-lbl { fill: rgba(var(--ink-rgb), 0.6); font-size: 8.5px; font-family: inherit; }
.if-hatch { stroke: rgba(var(--ink-rgb), 0.35); }
.if-effort { fill: none; stroke: #0ea5e9; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.if-effort-proj { stroke-dasharray: 3 3; opacity: 0.8; }
.if-effort-dot { fill: #0ea5e9; stroke: var(--paper); stroke-width: 1; }
.if-src-link { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; padding: 0;
  color: rgba(var(--ink-rgb), 0.5); text-decoration: underline; text-decoration-color: var(--edge); }
.if-src-link:hover { color: var(--accent); }
.if-sources { flex: 0 0 auto; overflow: visible; margin-top: 4px; display: flex; flex-direction: column; gap: 14px; }
.if-src-top { display: flex; align-items: baseline; gap: 8px; }
.if-src-name { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-src-name:hover { color: var(--accent); }
.if-src-val { flex-shrink: 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.if-src-x { flex-shrink: 0; width: 16px; border: none; background: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: rgba(var(--ink-rgb), 0.3); padding: 0; }
.if-src-x:hover { color: #c9542e; }
.if-src-hint { font-size: 9.5px; color: rgba(var(--ink-rgb), 0.45); margin-top: 1px; font-variant-numeric: tabular-nums; }
.if-src-hint .if-src-hours { color: var(--accent); font-weight: 600; }
.if-src-rate { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; padding: 0;
  color: rgba(var(--ink-rgb), 0.55); text-decoration: underline dotted; text-underline-offset: 2px; }
.if-src-rate:hover { color: var(--accent); }
/* this widget runs its content a bit wider than the default body padding */
.widget-body.is-forecast { padding-left: clamp(7px, 3cqmin, 13px); padding-right: clamp(7px, 3cqmin, 13px); }
.if-sources, .if-src { min-width: 0; }
/* per-source sliders: full width, but pad by the thumb radius so the chunky thumb
   never pokes past the row edge (it stays inside the widget when resized small) */
.if-src-slider { height: 38px; width: 100%; padding: 0 17px; }
.if-src-slider::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -9px; border-width: 4px; }
.if-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; background: transparent;
  outline: none; cursor: pointer; }
/* WebKit: fat rounded track that fills with accent as you drag */
.if-slider::-webkit-slider-runnable-track { height: 20px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), rgba(var(--ink-rgb), 0.1) var(--fill, 0%));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15); }
.if-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 42px; height: 42px;
  margin-top: -11px; border-radius: 50%; background: var(--accent); border: 5px solid var(--paper);
  box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.35);
  cursor: grab; transition: transform 0.16s cubic-bezier(0.34, 1.75, 0.5, 1); }
.if-slider:hover::-webkit-slider-thumb { transform: scale(1.09); }
.if-slider:active::-webkit-slider-thumb { transform: scale(0.86); cursor: grabbing; }
/* Firefox */
.if-slider::-moz-range-track { height: 20px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.1);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15); }
.if-slider::-moz-range-progress { height: 20px; border-radius: 999px; background: var(--accent); }
.if-slider::-moz-range-thumb { width: 42px; height: 42px; border-radius: 50%; background: var(--accent);
  border: 5px solid var(--paper); box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.5); cursor: grab;
  transition: transform 0.16s cubic-bezier(0.34, 1.75, 0.5, 1); }
.if-slider:hover::-moz-range-thumb { transform: scale(1.09); }
.if-slider:active::-moz-range-thumb { transform: scale(0.86); cursor: grabbing; }
/* the wording changes as you slide → make it the flexible, scrolling part so it
   absorbs length changes WITHOUT nudging the slider above it */

/* What's next widget */
.wn-deadline { font-size: 12px; color: var(--ink); padding: 7px 10px; margin: 4px 0 4px;
  background: rgba(var(--ink-rgb), 0.045); border-radius: 9px; text-align: center; }
.wn-deadline b { color: var(--accent); }
.wn-say { font-size: 11px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.62);
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--edge-soft); }

/* Averages widget */
.avg-list { gap: 2px; }
.avg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 2px; border-bottom: 1px solid var(--edge-soft); font-size: 13px; }
.avg-row:last-child { border-bottom: none; }
.avg-label { color: rgba(var(--ink-rgb), 0.65); }
.avg-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* Subscriptions: detected-but-not-tracked section */
.sub-detected { margin-top: 4px; }
.sub-det-h { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.42); padding: 8px 0 3px; border-top: 1px dashed var(--edge-soft); margin-top: 6px; }
.sub-det-row { opacity: 0.92; }
.sub-track { flex-shrink: 0; border: 1px solid var(--accent); background: none; color: var(--accent);
  cursor: pointer; font-family: inherit; font-size: 10px; padding: 3px 8px; border-radius: 999px; }
.sub-track:hover { background: var(--accent); color: var(--paper); }
/* active / lapsed / paused status pip + manage controls */
.sub-row { gap: 7px; }
.sub-pip { flex-shrink: 0; width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer; }
.sub-pip.active { background: #3f8f4e; }
.sub-pip.lapsed { background: #d6920f; }
.sub-pip.paused { background: rgba(var(--ink-rgb), 0.25); }
.sub-row.paused .sub-name, .sub-row.paused .cf-amt { opacity: 0.45; text-decoration: line-through; }
.sub-x { flex-shrink: 0; width: 16px; text-align: center; border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: rgba(var(--ink-rgb), 0.35); padding: 0; }
.sub-x:hover { color: #c9542e; }
.sub-x-empty { display: inline-block; width: 16px; flex-shrink: 0; }  /* keep the column aligned when there's no × */
.sub-add { border: 1px solid var(--edge); background: none; cursor: pointer; font-family: inherit; font-size: 10px;
  padding: 2px 8px; border-radius: 999px; color: rgba(var(--ink-rgb), 0.6); margin-left: auto; }
.sub-add:hover { border-color: var(--accent); color: var(--accent); }

/* ── Review inbox (status panel) ── */
.rv-group { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.45); padding: 11px 0 4px; margin-top: 2px; }
.rv-item { padding: 7px 8px; margin: 3px 0; border: 1px solid var(--edge-soft); border-radius: 9px;
  background: rgba(var(--ink-rgb), 0.025); display: flex; flex-direction: column; gap: 5px; }
.rv-top { display: flex; align-items: baseline; gap: 6px; }
.rv-label { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-detail { font-size: 10px; color: rgba(var(--ink-rgb), 0.5); }
.rv-act { align-self: flex-start; border: 1px solid var(--accent); background: none; color: var(--accent);
  cursor: pointer; font-family: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.rv-act:hover { background: var(--accent); color: var(--paper); }
/* deleted transactions — the undo escape hatch. Quiet by default (a delete you meant
   to make shouldn't shout), but always reachable. */
.rv-gone-h { color: rgba(var(--ink-rgb), 0.38); }
.rv-gone-sub { text-transform: none; letter-spacing: 0; font-size: 9px; opacity: 0.8; }
.rv-gone { flex-direction: row; align-items: center; justify-content: space-between;
  gap: 8px; opacity: 0.62; background: none; border-style: dashed; }
.rv-gone:hover { opacity: 1; }
.rv-gone .rv-txt { font-size: 11px; color: rgba(var(--ink-rgb), 0.7); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; }
.rv-gone .rv-amt { color: rgba(var(--ink-rgb), 0.5); }
.rv-undel { align-self: center; flex: 0 0 auto; min-height: 44px; padding: 4px 12px;
  border-color: var(--edge); color: rgba(var(--ink-rgb), 0.65); }
.rv-undel:hover { background: none; border-color: var(--accent); color: var(--accent); }
.rv-cat { font-family: inherit; font-size: 11px; padding: 4px 6px; border: 1px solid var(--edge);
  border-radius: 7px; background: var(--panel); color: var(--ink); cursor: pointer; align-self: flex-start; }
.rv-more { font-size: 10px; color: rgba(var(--ink-rgb), 0.45); padding: 4px 2px; }
.rv-sync { width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--ink); padding: 6px 2px; display: flex; align-items: center; gap: 8px; }

/* ── Settings panel ── */
.set-body { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }

/* Connect-a-bank coaching modal */
.connect-body { padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.cn-status { font-size: 12px; padding: 8px 10px; border-radius: 9px; background: rgba(var(--ink-rgb), 0.05); }
.cn-ok { color: #3f8f4e; font-weight: 600; }
.cn-no, .cn-err { color: #c9542e; font-weight: 600; }
.cn-working { color: var(--accent); }
.cn-intro { font-size: 12.5px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.78); }
.cn-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.cn-steps a { color: var(--accent); }
.cn-dim { color: rgba(var(--ink-rgb), 0.5); }
.cn-token { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 12px;
  padding: 9px 11px; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); }
.cn-token:focus { outline: none; border-color: var(--accent); }
.cn-connect { border: 1px solid var(--accent); background: var(--accent); color: var(--paper); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px; border-radius: 10px; }
.cn-connect:hover { filter: brightness(1.06); }
.cn-connect:disabled { opacity: 0.6; cursor: default; filter: none; }
/* inline text-style action (disconnect / "import a CSV instead") — a REAL 44px hit area
   (inline-flex + min-height, not just padding, which alone left it ~28px) */
.cn-linkbtn { border: none; background: none; margin: 0; padding: 0 6px; min-height: 44px;
  display: inline-flex; align-items: center; font-family: inherit; font-size: inherit;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cn-linkbtn:hover { filter: brightness(1.1); }
.cn-linkbtn-danger { color: var(--danger, #c9542e); }
.cn-manage { display: block; }   /* each manage action on its own row — a mis-tap can't hit Disconnect */

/* "How your bank link works" — the in-app visual explainer (openSfExplainer) */
.sfx-body { gap: 0; }
.sfx-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(var(--ink-rgb), 0.45); margin: 14px 0 8px; }
.sfx-sec:first-child { margin-top: 4px; }
.sfx-step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.sfx-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--accent-rgb, var(--ink-rgb)), 0.12);
  display: flex; align-items: center; justify-content: center; color: var(--accent); }
.sfx-ic i { width: 17px; height: 17px; }
.sfx-txt { flex: 1; min-width: 0; }
.sfx-t { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.sfx-d { font-size: 12.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.7); }
.sfx-d b { color: var(--ink); font-weight: 600; }
.sfx-trustbox { margin-top: 14px; border-top: 1px solid var(--edge-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.sfx-trust { display: flex; gap: 11px; align-items: flex-start; }
.sfx-trust i { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.sfx-trust b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.sfx-trust span { display: block; font-size: 12px; color: rgba(var(--ink-rgb), 0.6); line-height: 1.45; }
.cn-or { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.4); }
.cn-alts { display: flex; gap: 8px; }
.cn-alts button { flex: 1; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 11.5px; padding: 9px; border-radius: 9px; }
.cn-alts button:hover { border-color: var(--accent); color: var(--accent); }
.cn-result { font-size: 12.5px; line-height: 1.5; min-height: 1.2em; }

/* Bank connection inside Settings */
.set-bank-status { font-size: 11.5px; padding: 2px 0; }
.set-token-wrap { position: relative; }
.set-bank-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px; padding: 8px 38px 8px 10px;
  border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: var(--ink); }
.set-bank-input:focus { outline: none; border-color: var(--accent); }
.set-token-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background: none;
  cursor: pointer; color: rgba(var(--ink-rgb), 0.5); padding: 5px; display: grid; place-items: center; }
.set-token-eye:hover { color: var(--ink); }
.set-token-eye i, .set-token-eye svg { width: 16px; height: 16px; }
.set-bank-row { display: flex; gap: 8px; margin-top: 6px; }
.set-bank-btn { flex: 1; border: 1px solid var(--accent); background: var(--accent); color: var(--paper); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px; border-radius: 9px; }
.set-bank-btn:hover { filter: brightness(1.06); }
.set-bank-help { flex: 0 0 auto; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 11.5px; padding: 8px 12px; border-radius: 9px; }
.set-bank-help:hover { border-color: var(--accent); color: var(--accent); }
.set-sec { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(var(--ink-rgb), 0.42);
  padding: 12px 0 2px; border-top: 1px solid var(--edge-soft); margin-top: 4px; }
.set-sec:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.set-row > span { color: rgba(var(--ink-rgb), 0.7); flex-shrink: 0; }
.set-row input { flex: 1; min-width: 0; max-width: 58%; font-family: inherit; font-size: 12px; text-align: right;
  padding: 6px 9px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); }
.set-row input:focus { outline: none; border-color: var(--accent); }
.set-select { flex: 1; min-width: 0; max-width: 58%; font-family: inherit; font-size: 12px; text-align: right;
  padding: 6px 9px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.set-hint { font-size: 10px; font-style: italic; color: rgba(var(--ink-rgb), 0.45); margin: 1px 0 2px; }
.set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 1px solid var(--edge); border-radius: 9px; background: var(--panel); cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--ink); padding: 8px 11px; }
.set-toggle .set-state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.5); }
.set-toggle.on { border-color: var(--accent); color: var(--accent); }
.set-toggle.on .set-state { color: var(--accent); }
.set-bk-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.set-btn { flex: 1 1 auto; min-width: 0; border: 1px solid var(--edge); border-radius: 9px; background: var(--panel);
  cursor: pointer; font-family: inherit; font-size: 12px; color: var(--ink); padding: 9px 12px; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease; }
.set-btn:hover { border-color: var(--accent); color: var(--accent); }
/* test-only reset button — a dashed border marks it as a throwaway/dev control */
.resettest-btn { border-style: dashed; color: rgba(var(--ink-rgb), 0.7); }
.resettest-btn:hover { border-color: var(--danger, #c9542e); color: var(--danger, #c9542e); }
/* Cache cloud — guided 3-step setup */
/* the "where am I / what next" banner */
.cloud-guide { margin: 8px 0 10px; padding: 10px 13px; border-radius: 11px; font-size: 12.5px;
  border: 1px solid var(--edge); background: var(--panel); border-left: 3px solid rgba(var(--ink-rgb), 0.35); }
.cloud-guide .cloud-sub { display: block; font-size: 11.5px; font-weight: 400; color: rgba(var(--ink-rgb), 0.6); margin-top: 3px; line-height: 1.45; }
.cloud-guide.mid { border-left-color: var(--accent); }
.cloud-guide.done { border-left-color: #2ec16b; background: rgba(46, 193, 107, 0.07); }
/* signed-in account row — leads the panel so log out / switch is never buried */
.cloud-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: space-between; margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--edge-soft); border-radius: 11px; background: var(--panel); }
.cloud-acct-who { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.6); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cloud-acct-who b { color: var(--ink); font-weight: 600; }
.cloud-acct-acts { display: flex; gap: 8px; flex: 0 0 auto; }
/* each numbered step card */
.cloud-step { border: 1px solid var(--edge-soft); border-radius: 11px; padding: 9px 11px 4px; margin: 0 0 8px;
  opacity: 0.62; transition: opacity 0.18s ease, border-color 0.18s ease; }
.cloud-step.active { opacity: 1; border-color: var(--accent); }
.cloud-step.done { opacity: 1; }
.cloud-step-h { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; }
.cloud-num { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: rgba(var(--ink-rgb), 0.1); color: rgba(var(--ink-rgb), 0.7); }
.cloud-step.active .cloud-num { background: var(--accent); color: var(--paper); }
.cloud-step.done .cloud-num { background: #2ec16b; color: #fff; }
.cloud-step-t { flex: 1 1 auto; min-width: 0; }
.cloud-chk { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #2ec16b; min-width: 16px; text-align: right; }
.cloud-btn-sub { flex: 0 0 auto; opacity: 0.7; }
.cloud-opt { font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(var(--ink-rgb), 0.4); border: 1px solid var(--edge-soft); border-radius: 999px; padding: 1px 7px; margin-left: 7px; vertical-align: 2px; }
/* ── Unlock & recovery (multi-wrap keybox) ─────────────────────────────────────── */
/* the two-way key choice: ZK ("Just me") vs escrow ("Keep a spare"). Big tap targets. */
.key-choice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; margin: 7px 0;
  border: 1px solid var(--edge-soft); border-radius: 12px; cursor: pointer; min-height: 44px;
  background: rgba(var(--ink-rgb), 0.015); transition: border-color 0.12s ease, background 0.12s ease; }
.key-choice:hover { border-color: rgba(var(--ink-rgb), 0.28); }
.key-choice.on { border-color: var(--accent); background: rgba(var(--accent-rgb, var(--ink-rgb)), 0.06); }
.key-radio { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2px solid rgba(var(--ink-rgb), 0.35); position: relative; }
.key-choice.on .key-radio { border-color: var(--accent); }
.key-choice.on .key-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.key-choice-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.key-rec { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: #2ec16b; border: 1px solid rgba(46, 193, 107, 0.5); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.key-pass { margin: 2px 0 8px; }
.key-code-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4;
  color: var(--ink); margin: 8px 2px 6px; cursor: pointer; }
.key-code-opt input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); }
.key-file-note { margin-top: 4px; }
.key-recover { margin-top: 10px; }
/* the unlock-methods manager (after first backup) */
.key-method { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 9px 11px; margin: 6px 0; border: 1px solid var(--edge-soft); border-radius: 11px; min-height: 44px; }
.key-method.on { border-color: rgba(46, 193, 107, 0.4); }
.key-method.key-esc.on { border-color: rgba(214, 141, 46, 0.5); }
.key-method-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.key-sub { font-size: 10.5px; font-weight: 400; color: rgba(var(--ink-rgb), 0.55); line-height: 1.35; }
.key-method-acts { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.status-pill[hidden] { display: none !important; }   /* the hidden attribute must win over the pill's display:inline-flex */
/* sync lives in the hamburger menu on phones only — desktop keeps its pill */
.menu-sync-row { display: none; }
@media (max-width: 640px) { .menu-sync-row { display: flex; } }
/* the deck! — THE primary CTA: one unmissable, unhideable, always-first button.
   External memory for the daily ritual: same spot, same look, every device. */
.ledger-pill.deck-cta {
  /* THE action button: a big circular ＋. Opens whatever it's set to (the deck by default). */
  background: var(--accent); border-color: var(--accent);
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* a real 3-D button: it stands proud of the page and SQUASHES when pressed */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.ledger-pill.deck-cta .deck-plus { color: var(--paper); font-size: 30px; font-weight: 300; line-height: 1; }
.ledger-pill.deck-cta:hover { transform: scale(1.06); filter: none; }
.ledger-pill.deck-cta:hover .deck-plus { animation: none; }
.ledger-pill.deck-cta:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), inset 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* the calendar button: the deck's PEER — same circular size + 3-D press, accent-filled so it's
   clearly visible on EVERY theme (a panel/outline fill went white-on-white on light themes and
   read as a ghost behind the ＋). Differentiated from the ＋ by its calendar glyph. */
.ledger-pill.cal-cta {
  background: var(--accent); border: 1px solid var(--accent); color: var(--paper);
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.ledger-pill.cal-cta svg { width: 24px; height: 24px; }
.ledger-pill.cal-cta:hover { transform: scale(1.06); filter: none; }
.ledger-pill.cal-cta:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), inset 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* the messages button: the deck's other PEER — same circular size + 3-D press + outlined
   look as the calendar. Pinned to the FAR LEFT of the trio ([msg][＋][cal]). */
.ledger-pill.msg-cta {
  position: relative;
  background: var(--panel); border: 1.5px solid var(--accent); color: var(--accent);
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.ledger-pill.msg-cta svg { width: 22px; height: 22px; }
.ledger-pill.msg-cta:hover { transform: scale(1.06); filter: none; }
.ledger-pill.msg-cta:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), inset 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* the finances button: the fourth day-anchor — same circular 3-D press as its peers,
   accent-filled like the calendar, told apart by the piggy bank. Opens the Finances portal. */
.ledger-pill.fin-cta {
  background: var(--accent); border: 1px solid var(--accent); color: var(--paper);
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
.ledger-pill.fin-cta svg { width: 24px; height: 24px; }
.ledger-pill.fin-cta:hover { transform: scale(1.06); filter: none; }
.ledger-pill.fin-cta:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), inset 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* unread badge — a small count bubble on the top-right of the messages button */
.ledger-pill.msg-cta .msg-unread {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper); box-sizing: border-box;
}
/* news badge — the OTHER corner (bottom-right): a quiet outlined square, deliberately a
   different shape + tone from the people-bubble above so a glance tells "a person is
   waiting" apart from "there's news". Ink on panel, never an alarm red. */
.ledger-pill.msg-cta .msg-news {
  position: absolute; bottom: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 5px; background: var(--panel); color: var(--ink);
  border: 1.5px solid rgba(var(--ink-rgb), 0.55);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper); box-sizing: border-box;
}
/* the one-time coaching card: anchored above the dock, plain words, one job */
.deck-coach {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 90;
  width: min(92vw, 360px); padding: 16px 16px 12px;
  background: var(--panel); border: 1.5px solid var(--accent); border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); text-align: center;
}
.deck-coach::after {
  /* --tail-x is set by showDeckCoach() to the deck button's center, relative to the
     card's left edge; the 50% fallback keeps the old behavior if anchoring bails. */
  content: ""; position: absolute; left: var(--tail-x, 50%); bottom: -8px; margin-left: -8px;
  width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--panel); border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
}
.deck-coach h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.deck-coach p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.7); }
.deck-coach .dc-row { display: flex; gap: 8px; }
.deck-coach .dc-open {
  flex: 1; min-height: 48px; border: none; border-radius: 12px; background: var(--accent);
  color: var(--paper); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.deck-coach .dc-open:active { transform: scale(0.97); }
.deck-coach .dc-later { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; background: none; color: rgba(var(--ink-rgb), 0.6); font-family: inherit; font-size: 13px; cursor: pointer; }
/* gentle pulse on the deck pill while the coach card is up (motion-gated in JS) */
@keyframes deckPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 201, 84, 46), 0.5); } 100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb, 201, 84, 46), 0); } }
.deck-cta.coaching { animation: deckPulse 1.6s ease-out infinite; }
/* pull-to-sync: a quiet bar parked above the screen that rides the pull down */
.ptr-bar {
  position: fixed; top: -54px; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; height: 46px;
  transition: transform 0.18s ease; pointer-events: none;
  padding-top: env(safe-area-inset-top);
}
.ptr-txt {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55); background: var(--panel);
  border: 1px solid var(--edge-soft); border-radius: 999px; padding: 9px 16px;
}
.ptr-bar.armed .ptr-txt { color: var(--accent); border-color: var(--accent); }
/* locked-by-default Cloud URL: dimmed until the explicit "change" unlock */
.set-row input[readonly] { opacity: 0.6; }
.cloud-url-edit {
  flex: 0 0 auto; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--ink-rgb), 0.45); padding: 8px 2px 8px 8px; min-height: 32px;
}
.cloud-url-edit:hover { color: var(--accent); }
.set-btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Loud, color-coded result line */
.cloud-msg { font-style: normal; font-size: 11px; padding: 2px 0; transition: color 0.15s ease; }
.cloud-msg.work { color: rgba(var(--ink-rgb), 0.55); }
.cloud-msg.ok { color: #2ec16b; font-weight: 600; }
.cloud-msg.err { color: #e0533d; font-weight: 600; }
.cloud-msg.flash { animation: cloudFlash 0.9s ease-out; }
@keyframes cloudFlash { 0% { background: rgba(46, 193, 107, 0.22); } 100% { background: transparent; } }
/* Forgot-password: a quiet link that unfolds an inline reset field */
.cloud-forgot { margin: 6px 0 2px; }
.cloud-forgot-panel { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge-soft); }
.cloud-forgot-msg { margin-top: 2px; }
#cloudForgotSend:disabled { opacity: 0.55; cursor: default; }
.set-themes { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.set-stats { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.set-stats .set-toggle { padding: 7px 10px; flex: 1; }
.set-stat-row { display: flex; align-items: center; gap: 6px; }
.cst-ctrls { display: inline-flex; gap: 4px; flex-shrink: 0; }
.cst-act { border: 1px solid var(--edge); background: var(--panel); cursor: pointer; font-family: inherit;
  font-size: 11px; min-width: 30px; padding: 6px 8px; border-radius: 8px; color: rgba(var(--ink-rgb), 0.75); }
.cst-act:hover { border-color: var(--accent); color: var(--accent); }
.cst-act.on { background: #3f8f4e; color: #fff; border-color: #3f8f4e; }
.cst-del { border: none; background: none; cursor: pointer; color: rgba(var(--ink-rgb), 0.35); font-size: 15px; padding: 0 4px; }
.cst-del:hover { color: #c9542e; }
.cst-add { margin-top: 8px; width: 100%; border: 1px dashed var(--edge); background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: rgba(var(--ink-rgb), 0.7); padding: 9px; border-radius: 9px; }
.cst-add:hover { border-color: var(--accent); color: var(--accent); }

/* greeting in the sidebar */
.sidebar-greeting { padding: 16px 16px 12px; font-size: 13px; color: var(--accent); letter-spacing: 0.01em; line-height: 1.5; }
.founder-compliment { display: block; font-size: 11px; color: rgba(var(--ink-rgb), 0.55); font-style: italic; margin-top: 8px; letter-spacing: 0; line-height: 1.5; }
.sidebar-xp { padding: 4px 16px 12px; font-size: 11px; color: rgba(var(--ink-rgb), 0.5); letter-spacing: 0.04em; }
.sidebar-xp b { color: var(--accent); font-variant-numeric: tabular-nums; }
/* your cache, as a character — name + level + title + XP toward the next level */
.cache-char { padding: 11px 13px; border: 1px solid var(--edge-soft); border-radius: 12px; background: var(--panel); }
.cc-top { display: flex; align-items: center; gap: 8px; }
.cc-emoji { font-size: 18px; line-height: 1; }
.cc-name { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); padding: 0; text-align: left; letter-spacing: 0.02em; }
.cc-name:hover { color: var(--accent); }
.cc-meta { font-size: 9.5px; color: rgba(var(--ink-rgb), 0.6); margin: 5px 0 6px; text-transform: uppercase; letter-spacing: 0.09em; }
.cc-meta b { color: var(--accent); }
.cc-bar { height: 6px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.12); overflow: hidden; }
.cc-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.cc-xp { font-size: 9.5px; color: rgba(var(--ink-rgb), 0.5); margin-top: 5px; font-variant-numeric: tabular-nums; }
.cc-xp b { color: rgba(var(--ink-rgb), 0.78); }

/* privacy blur — hide amounts until hovered (for screen-sharing) */
.privacy-on .big, .privacy-on .bal-line-amt, .privacy-on .acct-bal, .privacy-on .bd-amt,
.privacy-on .cf-amt, .privacy-on .mo-net, .privacy-on .mo-val, .privacy-on .mo-cat-amt,
.privacy-on .inc-val, .privacy-on .pm-net {
  filter: blur(7px); transition: filter 0.14s ease; cursor: default;
}
.privacy-on .big:hover, .privacy-on .bal-line-amt:hover, .privacy-on .acct-bal:hover,
.privacy-on .bd-amt:hover, .privacy-on .cf-amt:hover, .privacy-on .mo-net:hover,
.privacy-on .mo-val:hover, .privacy-on .mo-cat-amt:hover, .privacy-on .inc-val:hover,
.privacy-on .pm-net:hover { filter: none; }
.safe-reserve {
  border: none; background: none; cursor: pointer; flex-shrink: 0;
  font-family: inherit; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  transition: color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.safe-reserve:hover { color: var(--accent); }

/* clock widget + 12/24h toggle */
.widget-body.is-clock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
}
.is-clock .big { white-space: nowrap; }
.clock-toggle {
  display: inline-flex; gap: 2px; margin-top: 8px;
  border: 1px solid var(--edge-soft); border-radius: 999px; padding: 2px;
}
.clock-toggle button {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 9px; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px;
  color: rgba(var(--ink-rgb), 0.45);
  transition: background 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clock-toggle button.active { background: var(--ink); color: var(--paper); }

/* work/rest cycle timer */
.widget-body.is-timer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tm-main, .tm-form { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 3.5cqmin, 12px); width: 100%; min-width: 0; }
.tm-form { max-height: 100%; overflow-y: auto; }
.tm-main[hidden], .tm-form[hidden] { display: none; }
.tm-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tm-phase { text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(8px, 4.5cqmin, 13px); color: rgba(var(--ink-rgb), 0.45); }
.tm-pips { display: inline-flex; gap: 5px; }
.tm-pip { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.15); }
.tm-pip.done { background: var(--accent); }
.tm-pip.now { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.is-timer .tm-time { font-variant-numeric: tabular-nums; font-size: clamp(24px, 22cqmin, 64px); }
.tm-track { width: 100%; max-width: 240px; height: 8px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.tm-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.is-timer[data-phase="rest"] .tm-fill, .is-timer[data-phase="long"] .tm-fill { background: #2ec16b; }
.tm-controls { display: flex; gap: 8px; width: 100%; max-width: 240px; }
.tm-btn {
  flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--accent); border-radius: 12px;
  background: transparent; color: var(--ink); font-family: inherit; font-weight: 600;
  font-size: clamp(12px, 6cqmin, 14px); cursor: pointer;
}
.tm-btn:active { transform: scale(0.98); }
.tm-btn.tm-ghost { border-color: var(--edge); color: rgba(var(--ink-rgb), 0.6); font-weight: 500; }
.tm-foot { display: flex; gap: 14px; }
.tm-quiet {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.45);
  padding: 6px; min-height: 44px; min-width: 44px;
}
.tm-quiet:hover { color: var(--ink); }
.tm-form label.tm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; max-width: 240px; font-size: clamp(10px, 5cqmin, 12px); color: rgba(var(--ink-rgb), 0.7); }
.tm-row span { text-align: left; min-width: 0; }
.tm-row input {
  width: clamp(48px, 30cqi, 74px); flex-shrink: 0; min-height: 40px; padding: 0 10px; font-family: inherit; font-size: 14px;
  text-align: right; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel);
  color: var(--ink); font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.tm-row input:focus { outline: none; border-color: var(--accent); }
.tm-formnote { font-size: 9px; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.4); max-width: 240px; }
.tm-form .tm-btn { flex: none; width: 100%; max-width: 240px; }
/* squeezed small: shed the least-essential rows first so phase + time + controls
   always fit inside the overflow:hidden body (a narrow widget == a phone) */
@container (max-height: 252px) {
  .is-timer .tm-foot { display: none; }
  .is-timer .tm-main, .is-timer .tm-form { gap: 4px; }
}
@container (max-height: 190px) {
  .is-timer .tm-track { display: none; }
  .is-timer .tm-time { font-size: clamp(20px, 18cqmin, 44px); }
}

/* resize handle */
/* resize from any corner; handles sit above the bar but below its buttons */
.widget-resize { position: absolute; width: 18px; height: 18px; touch-action: none; z-index: 2; }
.r-nw { top: 0; left: 0; cursor: nwse-resize; }
.r-ne { top: 0; right: 0; cursor: nesw-resize; }
.r-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.r-se { bottom: 0; right: 0; cursor: nwse-resize; }
/* only the bottom-right shows the little corner indicator — rounded to match the widget */
.r-se::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
  border-right: 1.5px solid rgba(var(--ink-rgb), 0.4); border-bottom: 1.5px solid rgba(var(--ink-rgb), 0.4);
  border-bottom-right-radius: 7px;
}
.widget-bar { position: relative; z-index: 1; }
.bar-right { position: relative; z-index: 3; }

/* ── sticker (free-floating icon) ───────────────── */
.sticker {
  position: absolute;
  display: grid; place-items: center;
  container-type: size;
  cursor: grab; touch-action: none;
}
.sticker:active { cursor: grabbing; }
.sticker svg {
  width: clamp(20px, 72cqmin, 420px); height: auto;
  color: var(--ink); stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(var(--ink-rgb), 0.18));
}
.sticker-close {
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--paper);
  color: var(--ink); font-size: 10px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.sticker:hover .sticker-close { opacity: 1; }
.sticker-magnet {
  position: absolute; top: -8px; left: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--paper);
  color: rgba(var(--ink-rgb), 0.5); cursor: pointer; padding: 0;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.15s ease;
}
.sticker-magnet i, .sticker-magnet svg { width: 10px; height: 10px; }
.sticker:hover .sticker-magnet { opacity: 1; }
.sticker-magnet.on { color: var(--accent); border-color: var(--accent); opacity: 1; }
.sticker-resize { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; cursor: nwse-resize; opacity: 0; }
.sticker:hover .sticker-resize { opacity: 0.5; }
.sticker-resize::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}

/* drag ghost (follows the cursor while dragging an icon out) */
.drag-ghost { position: fixed; z-index: 300; pointer-events: none; transform: translate(-50%, -50%); }
.drag-ghost svg { width: 40px; height: 40px; color: var(--ink); filter: drop-shadow(0 3px 6px rgba(var(--ink-rgb), 0.3)); }

/* drop menu */
.drop-backdrop { position: fixed; inset: 0; z-index: 310; }
.drop-menu {
  position: fixed; z-index: 320;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 10px;
  padding: 5px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 16px 40px -12px rgba(var(--ink-rgb), 0.4);
}
.drop-menu button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: none; border-radius: 7px;
  background: none; color: var(--ink); font-family: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap; text-align: left;
}
.drop-menu button:hover { background: rgba(var(--ink-rgb), 0.07); }
.drop-menu svg { width: 15px; height: 15px; stroke-width: 1.75; }

/* ── sidebar toggle ─────────────────────────────── */
.sidebar-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  width: 38px; height: 38px;
  border: 1px solid var(--edge); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-size: 15px; cursor: pointer;
  transition: opacity 0.2s ease, background 0.15s ease;
}
.sidebar-toggle:hover { background: var(--panel); }
/* Pad the hit area to 44px (SOP) WITHOUT enlarging the visible box, and reach ~3px toward the
   corner so a fast flick to it (the jelly cursor lags + dents on press) still lands on the button. */
.sidebar-toggle::before { content: ""; position: absolute; inset: -3px; border-radius: 12px; }
body.sidebar-open .sidebar-toggle { opacity: 0; pointer-events: none; }

/* Pages button (top-left) + pages window */
.pages-toggle {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 38px; height: 38px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}
.pages-toggle:hover { background: var(--panel); }
.pages-toggle:active { transform: scale(0.94); }
.pages-toggle::before { content: ""; position: absolute; inset: -3px; border-radius: 12px; }   /* 44px hit area, visible box unchanged (matches the hamburger) */
.pages-toggle.pg-add-btn { font-size: 20px; font-weight: 400; line-height: 1; }
.pg-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pages-pop {
  position: fixed; top: 58px; left: 14px; z-index: 320; width: 212px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 12px; padding: 8px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}
.pg-head { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(var(--ink-rgb), 0.4); padding: 2px 4px 4px; }
.pg-item { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.pg-item:hover { background: rgba(var(--ink-rgb), 0.05); }
.pg-item.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pg-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rename, .pg-del { border: none; background: none; cursor: pointer; font-size: 11px; color: rgba(var(--ink-rgb), 0.45); padding: 3px 5px; border-radius: 6px; flex-shrink: 0; }
.pg-rename:hover, .pg-del:hover { background: rgba(var(--ink-rgb), 0.08); color: var(--accent); }
.pg-addrow { margin-top: 4px; border: 1px solid var(--edge); background: var(--panel); cursor: pointer; font-family: inherit; font-size: 12px; color: var(--ink); padding: 8px; border-radius: 8px; }
.pg-addrow:hover { border-color: var(--accent); color: var(--accent); }
.pg-max { margin-top: 4px; font-size: 10px; font-style: italic; color: rgba(var(--ink-rgb), 0.4); text-align: center; padding: 4px; }

/* theme toggle — top right */
.theme-toggle {
  position: fixed; top: 14px; right: 60px; z-index: 60;
  width: 38px; height: 38px;
  border: 1px solid var(--edge); border-radius: 10px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover { background: var(--panel); }
.theme-toggle svg { width: 17px; height: 17px; }
/* theme + background moved into the hamburger menu — one button owns the top
   right on every device. The elements stay (their handlers serve the menu rows). */
#themeToggle, #bgToggle { display: none; }

.theme-backdrop { position: fixed; inset: 0; z-index: 315; }

/* backgrounds picker (separate from theme) */
.bg-toggle { right: 106px; }
.bg-toggle svg { width: 18px; height: 18px; }
.bg-pop {
  position: fixed; top: 58px; right: 14px; z-index: 320; width: 224px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px; padding: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}
.bg-cat { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(var(--ink-rgb), 0.45); margin: 11px 2px 5px; }
.bg-cat:first-child { margin-top: 0; }
.bg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-swatch {
  flex: 1; min-width: 62px; height: 36px; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid var(--edge-soft); font-family: inherit; font-size: 9px; color: var(--ink); background: var(--panel);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
}
.bg-swatch span { position: relative; z-index: 1; background: var(--paper); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; }
.bg-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bg-swatch.motion-drift, .bg-swatch.motion-aurora, .bg-swatch.motion-pulse {
  background: radial-gradient(circle at 38% 40%, color-mix(in srgb, var(--accent) 40%, var(--panel)), var(--panel));
}
.bg-swatch.retro-grid {
  background-color: var(--panel);
  background-image: linear-gradient(rgba(var(--ink-rgb), 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.2) 1px, transparent 1px);
  background-size: 9px 9px;
}
.bg-swatch.retro-scan { background-color: var(--panel); background-image: repeating-linear-gradient(rgba(var(--ink-rgb), 0.22) 0 1px, transparent 1px 3px); }
.bg-swatch.retro-sun { background: radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--accent) 55%, var(--panel)), var(--panel) 65%); }
.bg-swatch.sticker-dots {
  background-color: var(--panel);
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.28) 1.5px, transparent 2px); background-size: 9px 9px;
}
.bg-swatch.sticker-confetti {
  background-color: var(--panel);
  background-image: radial-gradient(circle at 30% 30%, var(--accent) 0 2px, transparent 3px), radial-gradient(circle at 70% 65%, rgba(var(--ink-rgb), 0.45) 0 2px, transparent 3px);
  background-size: 17px 17px;
}

/* applied backgrounds (a layer behind the board) */
html[data-bg]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* let the bg layer (html::before, behind everything) actually show — the body's opaque
   paper fill was covering it. html keeps the paper base; body goes clear when a bg is on. */
html[data-bg] body { background-color: transparent; background-image: none; }
html[data-bg="retro-grid"]::before {
  background-image: linear-gradient(rgba(var(--ink-rgb), 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
}
html[data-bg="retro-scan"]::before { background-image: repeating-linear-gradient(rgba(var(--ink-rgb), 0.05) 0 2px, transparent 2px 5px); }
html[data-bg="retro-sun"]::before {
  background: radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 48%),
    repeating-linear-gradient(transparent 0 16px, rgba(var(--ink-rgb), 0.04) 16px 18px);
}
html[data-bg="motion-drift"]::before {
  background: radial-gradient(40% 40% at 30% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(45% 45% at 72% 68%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  animation: bgDrift 20s ease-in-out infinite alternate;
}
@keyframes bgDrift { from { background-position: 0 0, 0 0; } to { background-position: 7% 9%, -9% -7%; } }
html[data-bg="motion-aurora"]::before {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%, color-mix(in srgb, var(--accent) 12%, transparent) 68%, transparent);
  background-size: 220% 220%; animation: bgAurora 24s ease infinite;
}
@keyframes bgAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
html[data-bg="motion-pulse"]::before {
  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 58%);
  animation: bgPulse 7s ease-in-out infinite;
}
@keyframes bgPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
html[data-bg="sticker-dots"]::before { background-image: radial-gradient(rgba(var(--ink-rgb), 0.09) 2.5px, transparent 3px); background-size: 28px 28px; }
html[data-bg="sticker-confetti"]::before {
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 55%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 58%, rgba(var(--ink-rgb), 0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 82%, color-mix(in srgb, var(--accent) 38%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 26%, rgba(var(--ink-rgb), 0.3) 0 3px, transparent 4px);
  background-size: 130px 130px;
}
@media (prefers-reduced-motion: reduce) {
  html[data-bg="motion-drift"]::before, html[data-bg="motion-aurora"]::before, html[data-bg="motion-pulse"]::before { animation: none; }
}

/* ── Accessibility ─────────────────────────────────────────────────────────
   Driven by attributes on <html> set in applyA11y(). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Skip link — invisible until a keyboard user tabs to it */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 100001; background: var(--accent); color: #06040f;
  padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; transition: top 0.15s ease; }
.skip-link:focus { top: 12px; outline: 2px solid #06040f; outline-offset: 2px; }
#board:focus { outline: none; }  /* programmatic focus target only */
/* Reduce motion & flashing — neutralise every CSS animation/transition, kill the
   warp flash and any animated backgrounds. JS paths (warp, sparks) gate too. */
html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
html[data-reduce-motion="1"] .lg-flash { display: none !important; }
html[data-reduce-motion="1"][data-bg^="motion-"]::before { animation: none !important; }
/* High contrast — stronger borders + full-strength text. */
html[data-contrast="high"] { --edge: rgba(var(--ink-rgb), 0.6); --edge-soft: rgba(var(--ink-rgb), 0.42); }
html[data-contrast="high"] .menu-item, html[data-contrast="high"] .status-pill,
html[data-contrast="high"] .widget, html[data-contrast="high"] .a11y-seg { border-color: var(--edge); }
html[data-contrast="high"] :focus-visible { outline-width: 3px; }
/* Text & UI size — scale the whole interface. */
html[data-text="lg"] { zoom: 1.12; }
html[data-text="xl"] { zoom: 1.26; }
/* The Accessibility Hub — a calm, high-legibility surface that models the app's
   accessibility-first direction: generous spacing, one clear choice at a time. */
.a11y-modal { max-width: 460px; }
.a11y-modal .cat-head { padding: 15px 16px 15px 20px; font-size: 14px; }
/* Bigger, easier-to-hit close — this hub practises what it preaches */
.a11y-modal .cat-close { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -7px -6px -7px 0; border-radius: 11px; font-size: 17px; line-height: 1;
  transition: background 0.12s, color 0.12s; }
.a11y-modal .cat-close:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--accent); }
.a11y-body { padding: 4px 20px 20px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.a11y-intro { font-size: 13.5px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.82); margin: 6px 0 16px; }
.a11y-intro em { font-style: normal; color: var(--accent); font-weight: 700; }
.a11y-controls { display: flex; flex-direction: column; gap: 12px; }
.a11y-ctrl { padding: 15px 16px 16px; border: 1px solid var(--edge-soft); border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.025); }
.a11y-ctrl-head { margin-bottom: 12px; }
.a11y-ctrl-head b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.a11y-ctrl-head p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.6); }
.a11y-ctrl-head em { font-style: normal; color: var(--accent); font-weight: 600; }
/* Full-width segmented control — each option a real, thumb-sized target */
.a11y-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--edge-soft); border-radius: 11px; padding: 4px; }
.a11y-opt { display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 42px; padding: 8px 6px; font-family: inherit; font-size: 12.5px; border: none; border-radius: 8px;
  background: none; color: rgba(var(--ink-rgb), 0.72); cursor: pointer; transition: background 0.12s, color 0.12s; }
.a11y-opt:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.05); }
.a11y-opt.on, .a11y-opt.on:hover { background: var(--ink); color: var(--paper); font-weight: 700; }
.a11y-note { font-size: 12px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.55);
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--edge-soft); }
.theme-pop {
  position: fixed; top: 58px; right: 14px; z-index: 320; width: 196px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 12px;
  padding: 7px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}
/* date/time format popover (from the dock pill) */
.clock-pop { position: fixed; z-index: 320; width: 230px; background: var(--paper); border: 1px solid var(--edge);
  border-radius: 12px; padding: 9px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4); }
.cp-title { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(var(--ink-rgb), 0.4); padding: 0 2px 1px; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink); }
.cp-row > span:first-child { color: rgba(var(--ink-rgb), 0.7); }
.cp-row select { flex-shrink: 0; max-width: 124px; padding: 5px 8px; font-family: inherit; font-size: 11px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); color: var(--ink); }
.cp-seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }
.cp-h { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 10px; padding: 4px 11px; color: rgba(var(--ink-rgb), 0.5); }
.cp-h.on { background: var(--accent); color: var(--paper); }
.cp-toggle { border: 1px solid var(--edge-soft); background: none; cursor: pointer; font-family: inherit; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 999px; color: rgba(var(--ink-rgb), 0.5); }
.cp-toggle.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* Mono tier — Light / Auto / Dark as chunky 3D analog buttons that depress when engaged */
.mono-tier { margin-bottom: 4px; }
.mono-tier-top { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.mono-tier-name { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.mono-tier-sub { font-size: 9px; color: rgba(var(--ink-rgb), 0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.mono-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mono-btn {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 9px 0; border-radius: 9px; border: 1px solid var(--edge); cursor: pointer;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.22), 0 4px 7px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: transform 0.09s cubic-bezier(0.3, 0.7, 0.4, 1.2), box-shadow 0.09s ease, background 0.12s ease;
}
.mono-btn:hover { background: rgba(var(--ink-rgb), 0.06); }
.mono-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 2px 5px rgba(0, 0, 0, 0.28); }
.mono-btn.on {
  transform: translateY(3px);
  background: var(--accent); color: var(--paper); border-color: var(--accent);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.theme-chips-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }

/* named, starrable theme chips (settings + popover) */
.theme-chip { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px;
  border: 1px solid var(--edge-soft); background: var(--panel); cursor: pointer; }
.theme-chip:hover { border-color: var(--edge); }
.theme-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tc-swatch { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--edge-soft); }
.tc-dot { width: 8px; height: 8px; border-radius: 50%; }
.tc-name { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-star { flex-shrink: 0; border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1;
  color: rgba(var(--ink-rgb), 0.3); padding: 0 2px; }
.tc-star.on { color: var(--accent); }
.theme-swatch {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; padding: 0;
  border: 1px solid var(--edge-soft); display: grid; place-items: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-swatch .dot { width: 9px; height: 9px; border-radius: 50%; }
.theme-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── sidebar pane ───────────────────────────────── */
.sidebar-resize {
  position: absolute; top: 0; left: -3px; width: 8px; height: 100%; z-index: 72;
  cursor: ew-resize; touch-action: none;
}
.sidebar-resize:hover { background: linear-gradient(to left, transparent, rgba(var(--ink-rgb), 0.1)); }
body.sidebar-sizing, body.sidebar-sizing * { user-select: none; }
.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: 280px; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--edge);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
body.sidebar-open .sidebar { transform: none; }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  /* gap = a guaranteed buffer: a long cache name used to grow flush against the ✕, so a
     near-miss on close hit the (click-to-rename) name instead of closing the menu */
  gap: 12px;
  padding: 16px; border-bottom: 1px solid var(--edge-soft); flex-shrink: 0;
}
.brand { display: inline-flex; align-items: center; min-width: 0; }
/* the real logo, rendered as a CSS mask so it tints to the theme's ink — adapts
   light/dark automatically and takes any custom scheme color. (Switch the
   background-color to var(--accent) if you want it to pop in the accent hue.) */
.brand-logo {
  display: inline-block; flex-shrink: 0;
  height: 16px; width: 108px;   /* logo is 1500×222 → ~6.76:1 */
  background-color: var(--accent);   /* logo takes each theme's accent → yellow on the brand theme */
  -webkit-mask: url("av%20assets/THECACHE_LOGO_WHITE.png") left center / contain no-repeat;
          mask: url("av%20assets/THECACHE_LOGO_WHITE.png") left center / contain no-repeat;
  transition: background-color 0.2s ease;
}
.brand-name {
  font-family: "Special Gothic Expanded One", system-ui, sans-serif;
  font-size: 15px; letter-spacing: 0.02em; color: var(--ink); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
/* status dot — a plain circle, tinted by live/stale/down state */
.brand-dot { display: inline-block; width: 11px; height: 11px; margin-right: 9px; vertical-align: middle; flex-shrink: 0;
  border-radius: 50%; background-color: var(--accent); transition: background-color 0.2s ease; }
.brand-dot[data-state="live"] { background-color: #3f8f4e; }
.brand-dot[data-state="stale"] { background-color: #d6920f; }
.brand-dot[data-state="down"] { background-color: #c9542e; }
.sidebar-version {
  padding: 12px 16px; border-top: 1px solid var(--edge-soft); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}
.ver-url { font-size: 10px; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.4); }
/* flex-shrink:0 — the ✕ must never be squeezed by a long cache name; position+::before pad
   its hit area to 44px (SOP). The pad reaches into the 12px header gap, never onto the name,
   so closing the menu stays easy without stealing the rename button's clicks. */
.sidebar-close { border: none; background: none; cursor: pointer; color: rgba(var(--ink-rgb), 0.45); font-size: 13px; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; position: relative; }
.sidebar-close::before { content: ""; position: absolute; inset: -10px -11px; }
.sidebar-close:hover { color: var(--accent); background: rgba(var(--ink-rgb), 0.06); }

.sidebar-scroll { overflow-y: auto; flex: 1; }
.sidebar-section { padding: 16px; border-bottom: 1px solid var(--edge-soft); }
.section-title { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: rgba(var(--ink-rgb), 0.45); margin-bottom: 10px; }
.section-hint { font-size: 10px; color: rgba(var(--ink-rgb), 0.35); margin-top: 10px; font-style: italic; }

/* collapsible section */
.section-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0; margin-bottom: 10px; border: none; background: none; cursor: pointer;
  color: inherit; font-family: inherit;
}
.section-toggle .section-title { margin-bottom: 0; }
.section-caret { font-size: 10px; opacity: 0.5; transition: transform 0.3s ease; }
.sidebar-section.collapsed .section-caret { transform: rotate(-90deg); }
.sidebar-section.collapsed .section-toggle { margin-bottom: 0; }
.section-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sidebar-section.collapsed .section-body { grid-template-rows: 0fr; }
.section-body-inner { overflow: hidden; min-height: 0; }

.library { display: flex; flex-direction: column; gap: 6px; }
/* widget-library category heading — a quieter sibling of .section-title, so the groups read as
   dividers inside the list rather than competing with the panel's own header */
.lib-cat {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px;
  color: rgba(var(--ink-rgb), 0.38);
  margin: 6px 0 1px; padding-left: 2px;
}
.lib-cat:first-child { margin-top: 0; }
.lib-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; cursor: pointer;
  font-size: 12px; text-align: left; color: var(--ink); transition: background 0.14s ease;
}
.lib-item:hover { background: rgba(var(--ink-rgb), 0.07); }
.lib-item.active { background: rgba(var(--ink-rgb), 0.05); }
.lib-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--edge); flex-shrink: 0; }
.lib-item.active .lib-dot { background: var(--accent); border-color: var(--accent); }
.lib-star { flex-shrink: 0; cursor: pointer; font-size: 12px; line-height: 1; width: 14px; text-align: center;
  color: rgba(var(--ink-rgb), 0.3); transition: color 0.15s, transform 0.1s; }
.lib-star:hover { color: var(--accent); transform: scale(1.2); }
.lib-item.fav .lib-star { color: var(--accent); }
/* Minimalist = luxurious: roomy padding, airy letter-spacing, big calm targets */
:root[data-menutier="1"] .menu-item { font-size: 15px; padding: 14px 16px; border-radius: 13px; letter-spacing: 0.04em; line-height: 1.3; }
:root[data-menutier="1"] .lib-item { font-size: 14.5px; padding: 13px 14px; border-radius: 13px; letter-spacing: 0.02em; }
:root[data-menutier="1"] .section-title { font-size: 12px; letter-spacing: 0.18em; margin-bottom: 4px; }
:root[data-menutier="1"] .sidebar-section { margin-bottom: 12px; }
:root[data-menutier="1"] .cache-char { padding: 15px; }
:root[data-menutier="1"] .menu-item + .menu-item { margin-top: 3px; }
/* Legendary = packed: tight padding, dense, efficient — more on screen, more buttons */
:root[data-menutier="3"] .menu-item { font-size: 11.5px; padding: 5px 10px; letter-spacing: 0; }
:root[data-menutier="3"] .lib-item { font-size: 11.5px; padding: 5px 9px; }
:root[data-menutier="3"] .section-title { font-size: 9px; margin-bottom: 1px; }
:root[data-menutier="3"] .sidebar-section { margin-bottom: 4px; }
:root[data-menutier="3"] .section-hint { font-size: 8.5px; }
/* click sparks — rapid clicking shoots theme-colored EXP sparks from the cursor */
.exp-spark { position: fixed; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--accent); pointer-events: none; z-index: 99999; will-change: transform, opacity;
  animation: exp-spark-fly 0.68s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes exp-spark-fly {
  0% { transform: translate(0, 0) scale(var(--s, 1)); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); opacity: 0; }
}
/* BLESSED — cache health maxed → the cursor upgrades (Mario-style) + clicks erupt gold */
.exp-spark.blessed { width: 9px; height: 9px; background: radial-gradient(circle, #fff7cc, var(--accent) 70%); animation-duration: 0.8s; }
/* trust badge — live ledger-integrity proof in the menu pane */
.sidebar-trust { padding: 8px 16px 0; }
.sidebar-trust:empty { display: none; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between;
  font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer;
  border: 1px solid var(--edge); background: rgba(63, 143, 78, 0.08); border-radius: 10px; padding: 9px 13px; color: var(--ink); }
.trust-chip.ok { border-color: rgba(63, 143, 78, 0.5); }
.trust-chip.ok .trust-n { color: #3f8f4e; }
.trust-chip.warn { background: rgba(201, 84, 46, 0.08); border-color: rgba(201, 84, 46, 0.55); color: #c9542e; }
.trust-chip:hover { border-color: var(--accent); }
.trust-n { color: rgba(var(--ink-rgb), 0.45); font-variant-numeric: tabular-nums; font-weight: 700; }
.trust-body { padding: 12px 16px 16px; }
.trust-lead { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.7); line-height: 1.55; margin-bottom: 12px; }
.trust-row { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--edge-soft); font-size: 12px; }
.trust-row:last-of-type { border-bottom: none; }
.trust-pass { color: #3f8f4e; font-weight: 700; }
.trust-fail { color: #c9542e; font-weight: 700; }
.trust-name { color: var(--ink); flex-shrink: 0; }
.trust-detail { color: rgba(var(--ink-rgb), 0.5); margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.trust-foot { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); margin-top: 12px; font-variant-numeric: tabular-nums; }
/* cache health badge + modal */
.sidebar-health { padding: 6px 16px 0; }
.sidebar-health:empty { display: none; }
.health-chip { display: inline-flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; font-family: inherit; font-size: 11px;
  border: 1px solid var(--edge-soft); background: var(--panel); border-radius: 999px; padding: 6px 12px; color: var(--ink); }
.health-chip:hover { border-color: var(--accent); }
.health-ring { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), rgba(var(--ink-rgb), 0.15) 0); }
.health-lbl { flex: 1; text-align: left; }
.health-pct { font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.6); }
.health-chip.full { border-color: var(--accent); }
.health-chip.full .health-pct { color: var(--accent); font-weight: 600; }
.health-body { padding: 14px 16px 16px; }
.health-big { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.health-big span { display: block; font-size: 11px; font-weight: 400; color: rgba(var(--ink-rgb), 0.55); margin-top: 4px; }
.health-bonus { font-size: 12px; margin: 12px 0; color: var(--ink); }
.health-bonus.dim { color: rgba(var(--ink-rgb), 0.6); }
.health-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--edge-soft); font-size: 12.5px; }
.health-row:last-child { border-bottom: none; }
.health-mk { flex-shrink: 0; font-weight: 700; }
.health-row.ok .health-mk { color: #3f8f4e; }
.health-row.todo .health-mk { color: rgba(var(--ink-rgb), 0.4); }
.health-name { color: var(--ink); }
.health-row.ok .health-name { color: rgba(var(--ink-rgb), 0.55); }
.health-act { margin-left: auto; font-size: 10.5px; color: var(--accent); text-align: right; }
/* the one health item with a real trigger (Send verification email) */
.health-verify { margin-left: auto; min-height: 30px; padding: 4px 11px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--panel); color: var(--accent); font-family: inherit; font-size: 11px;
  cursor: pointer; white-space: nowrap; }
.health-verify:hover { background: var(--accent); color: var(--paper); }
.health-verify:disabled { opacity: 0.7; cursor: default; border-color: var(--edge); color: rgba(var(--ink-rgb), 0.55); background: var(--panel); }

/* Password-reset celebration — turn a chore into a tiny party */
.reset-cheer-back { position: fixed; inset: 0; z-index: 100058; background: rgba(0, 0, 0, 0.35); }
.reset-cheer-fx { position: fixed; inset: 0; z-index: 100060; pointer-events: none; overflow: hidden; }
.reset-cheer {
  position: fixed; inset: 0; margin: auto; z-index: 100061; width: min(400px, 92vw); height: fit-content; max-height: 84vh;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 30px 24px 24px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 20px; box-shadow: 0 24px 70px -18px rgba(0, 0, 0, 0.5);
}
.reset-cheer-face { font-size: 68px; line-height: 1; }
.reset-cheer-big { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); margin-top: 6px; }
.reset-cheer-sub { font-size: 15px; font-weight: 600; color: var(--ink); }
.reset-cheer-note { font-size: 12.5px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.6); margin: 8px 4px 4px; }
.reset-cheer-go {
  margin-top: 14px; min-height: 44px; padding: 10px 28px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--paper); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.reset-cheer-go:hover { filter: brightness(1.06); }
/* recovery-file heads-up — calm one-shot after a web unlock issues your first recovery file */
.reco-headsup {
  position: fixed; inset: 0; margin: auto; z-index: 100061; width: min(420px, 92vw); height: fit-content; max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 28px 26px 22px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 20px; box-shadow: 0 24px 70px -18px rgba(0, 0, 0, 0.5);
}
.reco-ic { font-size: 46px; line-height: 1; }
.reco-h { font-size: 19px; font-weight: 700; color: var(--ink); }
.reco-p { font-size: 13px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.68); margin: 2px 2px 4px; }
.reco-go {
  margin-top: 10px; width: 100%; min-height: 46px; padding: 12px 22px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--paper); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.reco-go:hover { filter: brightness(1.06); }
.reco-skip {
  min-height: 40px; padding: 8px 18px; border: none; border-radius: 10px; background: transparent;
  color: rgba(var(--ink-rgb), 0.55); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.reco-skip:hover { color: var(--ink); }
@media (max-width: 480px) {
  .reco-headsup { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)); max-height: 90vh; }
}
/* settings tiers — Smooth Brain / Big Brain / Galaxy Brain */
.set-tier { display: flex; gap: 6px; margin: 2px 0 2px; }
.set-tier-opt { flex: 1; font-family: inherit; font-size: 11px; cursor: pointer; padding: 8px 6px; border-radius: 8px;
  border: 1px solid var(--edge); background: var(--panel); color: rgba(var(--ink-rgb), 0.7); white-space: nowrap; }
.set-tier-opt:hover { border-color: var(--accent); color: var(--accent); }
.set-tier-opt.on { background: var(--accent); color: var(--paper); border-color: var(--accent); font-weight: 600; }
/* character ledger modal */
.char-body { padding: 14px 16px 16px; }
.char-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.char-stat { text-align: center; background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 10px; padding: 8px 4px; }
.char-stat b { display: block; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.char-stat span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(var(--ink-rgb), 0.5); }
.char-bar { height: 7px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.12); overflow: hidden; }
.char-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.char-since { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.5); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.char-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.5); margin: 12px 0 6px; }

/* Merit badges — flat duotone 8-bit pixel tiles (ink + paper). Earned: inked outline.
   One-of-one (mythic): inverted/filled. Locked: faint outline. No gradients, no glow. */
.badge-count { font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), 0.4); letter-spacing: 0; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 14px 8px; margin: 2px 0 4px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; }
.badge-disc {
  width: 50px; height: 50px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease;
}
.badge-disc svg { display: block; width: 30px; height: 30px; image-rendering: pixelated; }
.badge.got .badge-disc { border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.badge.got.tier-mythic .badge-disc { background: var(--ink); color: var(--paper); }  /* one-of-one: inverted */
.badge.got:hover .badge-disc { transform: translateY(-2px); }
.badge.lock .badge-disc { border: 3px solid var(--edge-soft); background: transparent; color: var(--edge-soft); }
.badge-name { font-size: 9.5px; line-height: 1.15; letter-spacing: 0.02em; color: rgba(var(--ink-rgb), 0.7); }
.badge.lock .badge-name { color: rgba(var(--ink-rgb), 0.38); }
.badge-caption { font-size: 11px; color: rgba(var(--ink-rgb), 0.55); min-height: 15px; margin: 7px 2px 2px; }
.char-ev { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--edge-soft); font-size: 12.5px; }
.char-ev:last-child { border-bottom: none; }
.char-ev-i { flex-shrink: 0; }
.char-ev-d { flex: 1; color: var(--ink); }
.char-ev-t { color: rgba(var(--ink-rgb), 0.45); font-size: 10.5px; white-space: nowrap; }
.char-empty { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.55); line-height: 1.6; padding: 8px 0; }
/* "Your activity" — folded to one row in the profile; the full log opens in .act-modal */
.prof-act {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 11px 13px; border-radius: 12px; font-family: inherit; font-size: 12.5px;
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); cursor: pointer;
  text-align: left;
}
.prof-act:hover { border-color: var(--accent); }
.prof-act-i { flex-shrink: 0; }
.prof-act-txt { flex: 1; min-width: 0; }
.prof-act-go { flex-shrink: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.prof-act:hover .prof-act-go { color: var(--accent); }
.act-list { gap: 0; }
/* Skills & unlocks — unleashable pills */
.sk-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.sk-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 11.5px;
  font-family: inherit; border: 1px solid var(--edge); background: var(--panel); color: rgba(var(--ink-rgb), 0.45); cursor: default; }
.sk-pill.got { background: var(--accent); color: var(--paper); border-color: var(--accent); cursor: pointer; }
.sk-pill.got:hover { filter: brightness(1.06); }
.sk-i { font-size: 11px; }
.sk-go { font-size: 8px; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.85; }
.sk-req { font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.sk-pill.unleash { animation: sk-unleash 0.55s ease-out; }
@keyframes sk-unleash { 0% { box-shadow: 0 0 0 0 rgba(255, 212, 9, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(255, 212, 9, 0); } }
/* Journey — StarCraft-style tech tree: a spine with node dots + branching feats */
.tt-tree { position: relative; padding-left: 16px; }
.tt-tree::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 12px; width: 2px; background: var(--edge); }
.tt-tier { position: relative; margin-bottom: 14px; }
.tt-tier::before { content: ""; position: absolute; left: -12px; top: 10px; width: 12px; height: 2px; background: var(--edge); }
.tt-tier::after { content: ""; position: absolute; left: -16px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--edge); }
.tt-tier.done::after { background: #3f8f4e; border-color: #3f8f4e; }
.tt-tier.now::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px var(--accent); }
.tt-node { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.tt-tier.lock .tt-node { color: rgba(var(--ink-rgb), 0.4); }
.tt-tier.done .tt-arc::after { content: " ✓"; color: #3f8f4e; font-weight: 700; }
.tt-lvl { font-weight: 400; font-size: 10px; color: rgba(var(--ink-rgb), 0.45); }
.tt-branch { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tt-feat { font-size: 10px; color: rgba(var(--ink-rgb), 0.65); border: 1px solid var(--edge-soft); border-radius: 6px; padding: 3px 8px; }
.tt-tier.now .tt-feat { border-color: rgba(255, 212, 9, 0.4); }
.tt-tier.lock .tt-feat { opacity: 0.5; }
/* King Cozy — founder-only retro-futuristic phosphor console */
.king-modal { background: #0b0e08; border: 1px solid rgba(143, 227, 136, 0.32);
  box-shadow: 0 0 44px rgba(143, 227, 136, 0.16), inset 0 0 70px rgba(0, 0, 0, 0.55); }
.king-head { background: linear-gradient(180deg, rgba(143, 227, 136, 0.12), transparent); border-bottom: 1px solid rgba(143, 227, 136, 0.25); }
.king-head span { color: #8fe388; letter-spacing: 0.16em; font-weight: 700; text-shadow: 0 0 9px rgba(143, 227, 136, 0.55); }
.king-head .cat-close { color: rgba(143, 227, 136, 0.7); }
.king-body { padding: 14px 16px 16px; position: relative; }
.king-body::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(143, 227, 136, 0.045) 0 1px, transparent 1px 3px); }
.king-sub { color: rgba(143, 227, 136, 0.6); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; position: relative; }
.king-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.king-tile { border: 1px solid rgba(143, 227, 136, 0.22); border-radius: 8px; padding: 13px 8px; text-align: center; background: rgba(143, 227, 136, 0.04); }
.king-tile b { display: block; font-size: 23px; color: #8fe388; font-variant-numeric: tabular-nums; text-shadow: 0 0 11px rgba(143, 227, 136, 0.4); line-height: 1.1; }
.king-tile span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(143, 227, 136, 0.55); }
.king-foot { margin-top: 14px; font-size: 10px; color: rgba(143, 227, 136, 0.45); position: relative; letter-spacing: 0.03em; }
.king-ph { position: relative; margin-top: 4px; }
.king-dim { font-size: 11px; color: rgba(143, 227, 136, 0.5); }
.king-phtop { font-size: 12px; color: rgba(143, 227, 136, 0.7); margin-bottom: 8px; }
.king-phtop b { color: #8fe388; text-shadow: 0 0 8px rgba(143, 227, 136, 0.4); }
.king-phrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(143, 227, 136, 0.12); }
.king-phrow span { color: rgba(143, 227, 136, 0.75); font-variant-numeric: tabular-nums; }
.king-phrow b { color: #8fe388; font-variant-numeric: tabular-nums; }
/* "built on THE CACHE" badge — bottom-right; becomes "Community Cache" later in the hub */
.built-on { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); background: var(--panel);
  border: 1px solid var(--edge-soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.built-logo { height: 11px; width: 74px; }
/* in-app help wiki */
.wiki-modal { max-width: 580px; }
.wk-body { padding: 10px 18px 18px; overflow-y: auto; }
.wk-h { color: var(--ink); margin: 18px 0 6px; }
.wk-body h2.wk-h { font-size: 16px; font-weight: 700; }
.wk-body h3.wk-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--ink-rgb), 0.55); margin-top: 14px; }
.wk-p { font-size: 13px; line-height: 1.65; color: rgba(var(--ink-rgb), 0.82); margin: 7px 0; }
.wk-ul { margin: 7px 0; padding-left: 18px; }
.wk-ul li { font-size: 13px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.82); margin-bottom: 4px; }
.wk-body code { background: rgba(var(--ink-rgb), 0.09); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.wk-body strong { color: var(--ink); font-weight: 700; }
.wk-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Enter the Ledger — skull CTA + full-screen hyperspace warp + cosmic ledger space */
.ledger-pill { display: inline-flex; align-items: center; font-size: 14px; line-height: 1; background: rgba(var(--ink-rgb), 0.06);
  border: 1px solid var(--edge-soft); border-radius: 999px; padding: 5px 11px; cursor: pointer; color: var(--ink);
  transition: transform 0.2s, filter 0.2s; animation: lg-bob 3.4s ease-in-out infinite; }
.ledger-pill .lp-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.62); }
.ledger-pill .lp-uni { display: inline-block; margin-right: 5px; font-size: 15px; line-height: 1; }
.ledger-pill:hover { transform: scale(1.1); filter: drop-shadow(0 0 9px var(--accent)); }
.ledger-pill:hover .lp-label { color: var(--accent); }
.ledger-pill:hover .lp-uni { animation: uniWiggle 0.6s ease-in-out infinite; }
@keyframes lg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes uniWiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
/* the visit unicorn: tie-dye hue-cycle + scale-pop as it "explodes" */
.lp-uni.tiedye { animation: uniTieDye 0.62s linear forwards; transform-origin: center; }
@keyframes uniTieDye {
  0% { filter: none; transform: scale(1); }
  25% { filter: hue-rotate(120deg) saturate(2.2) brightness(1.2); transform: scale(1.4) rotate(-12deg); }
  50% { filter: hue-rotate(250deg) saturate(2.6) brightness(1.3); transform: scale(1.7) rotate(10deg); }
  75% { filter: hue-rotate(380deg) saturate(2.2); transform: scale(1.2) rotate(-8deg); }
  100% { filter: hue-rotate(540deg) saturate(1); transform: scale(0.1) rotate(20deg); opacity: 0; }
}
/* rainbow confetti burst — sits above the warp (z 100000) */
.uni-burst { position: fixed; inset: 0; pointer-events: none; z-index: 2147483600; }
.uni-bit { position: fixed; pointer-events: none; will-change: transform, opacity; }
.uni-bit.dot { width: 9px; height: 9px; border-radius: 50%; }
.uni-bit.emoji { font-size: 19px; line-height: 1; }
/* ── THE BASE — full-screen base-builder view (Home Base v1) ── */
/* The Base is a peer view of the board: sits ABOVE the board (z 0) but BELOW the chrome
   (dock/stats/toggles at z 55–60), so the dock stays usable in both views. */
.base-space { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow: hidden;
  display: none; flex-direction: column; color: var(--ink); }
body.view-base .base-space { display: flex; }
body.view-base #board { display: none; }               /* board hides while the base is showing */
/* the single symbolic view toggle (icon = current view) + the view name by the dock label */
.view-toggle { padding: 5px 11px; }
.view-toggle i, .view-toggle svg { width: 17px; height: 17px; display: block; }
.dock-view { margin-left: 5px; color: var(--accent); }
.base-top { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; padding-top: calc(16px + env(safe-area-inset-top)); flex: 0 0 auto; }
.base-eyebrow { font-family: ui-monospace, "SF Mono", monospace; letter-spacing: 0.2em; font-size: 13px; color: rgba(var(--ink-rgb), 0.75); }
.base-close { border: 1px solid var(--edge); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 9px 16px; font-family: inherit; font-size: 13px; cursor: pointer; min-height: 40px; }
.base-close:hover { border-color: var(--accent); color: var(--accent); }
.base-ground { flex: 1 1 auto; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb, 255, 212, 9), 0.07), transparent 60%); }
/* the pannable world (WASD drives this) — big grid terrain so movement reads.
   Buildings are positioned absolutely inside it at 50%+x / 50%+y (center = world center). */
.base-world { position: absolute; top: 50%; left: 50%; width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px;
  will-change: transform;
  background-image: repeating-linear-gradient(0deg, transparent 0 47px, rgba(var(--ink-rgb), 0.05) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(var(--ink-rgb), 0.05) 47px 48px); }
/* place / remove tools */
.base-tools { position: absolute; top: 96px; left: 16px; z-index: 3; display: flex; gap: 8px; }
.base-tool { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--edge);
  border-radius: 999px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer; min-height: 40px; }
.base-tool:hover { border-color: var(--accent); color: var(--accent); }
.base-tool i, .base-tool svg { width: 15px; height: 15px; }
.base-ground.placing .base-tool { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.bs-del { margin-top: 12px; width: 100%; padding: 10px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--panel); color: #e0533d; cursor: pointer; font-family: inherit; font-size: 13px; }
.bs-del:hover { border-color: #e0533d; }
.base-bld { position: absolute; transform: translate(-50%, -50%); background: none; border: none; cursor: grab;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.16s ease; touch-action: none; }
.base-bld:active { cursor: grabbing; }
.bs-total { font-size: 13px; font-family: ui-monospace, monospace; font-weight: 600; color: var(--ink); }
.bs-logged { font-size: 12px; color: #2ec16b; margin: 6px 0 2px; }
.base-tool.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.base-tool.primary:hover { color: var(--paper); opacity: 0.9; }
/* ── Daily check-in — full-screen, mobile-first, chunky ── */
.daily-space { position: fixed; inset: 0; z-index: 100001; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; }
.daily-top { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); flex: 0 0 auto; }
.daily-icn { width: 42px; height: 42px; border: none; background: none; color: rgba(var(--ink-rgb), 0.6);
  font-size: 18px; cursor: pointer; border-radius: 11px; flex: 0 0 auto; }
.daily-icn:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
.daily-dots { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; }
/* dots are real buttons now (tap to revisit a seen step); reset the button chrome + pad for a
   bigger tap target while keeping the visible bar at 5px (background paints the content box only) */
.daily-dot { width: 22px; height: 5px; border: none; padding: 13px 3px; background-clip: content-box;
  border-radius: 3px; background-color: rgba(var(--ink-rgb), 0.16); transition: background-color 0.2s; cursor: pointer; }
.daily-dot.on { background-color: var(--accent); }
.daily-dot.done { background-color: #2ec16b; }
.daily-dot.future { cursor: default; opacity: 0.5; }
.daily-dot:disabled { cursor: default; }
/* quiet back link, bottom-left of the step body (mirrors the skip link, ≥44px hit area) */
.wiz-back { align-self: flex-start; margin: 18px 0 0; min-height: 44px; padding: 0 6px 0 0; border: none; background: none;
  font-family: inherit; font-size: 13px; color: rgba(var(--ink-rgb), 0.55); cursor: pointer; }
.wiz-back:hover { color: var(--accent); }
/* "Meet the deck" preview card — a non-interactive sample of a deck card */
.wiz-deckcard { margin: 6px auto 4px; max-width: 320px; width: 100%; box-sizing: border-box; padding: 16px 16px 14px;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--panel); text-align: center; }
.wiz-deckcard-q { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.wiz-deckcard-pips { display: flex; gap: 9px; justify-content: center; margin: 13px 0 10px; }
.wiz-pip { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(var(--ink-rgb), 0.28); box-sizing: border-box; }
.wiz-pip.on { background: var(--accent); border-color: var(--accent); }
.wiz-deckcard-note { font-size: 11px; color: rgba(var(--ink-rgb), 0.45); }
.daily-stage { flex: 1 1 auto; display: flex; overflow-y: auto; }
/* The DECK surface — the full-screen front door the action button opens. Reuses .daily-space
   (fixed, flex column). A scrollable body holds the check-in entry + the mounted Tasks widget. */
/* the top date is a SLIDER (swipe to change day) — overflow-hidden so the new date slides in cleanly */
.deck-sp-title { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.deck-hdr-inner { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.deck-hdr-date { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; white-space: nowrap; }
/* small blue "Today" under the date — blue blended toward ink so it reads on any theme's paper */
.deck-hdr-today { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #3b82f6 72%, var(--ink)); }
/* every other day gets a muted "N days ago" / "in N days" cue in its place */
.deck-hdr-rel { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); white-space: nowrap; }
/* the date slides in from the direction it moved — a tandem cue with the bottom wheel */
@keyframes deckDateInR { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes deckDateInL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes deckDateIn { from { opacity: 0.4; } to { opacity: 1; } }
.deck-sp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  padding: 4px 16px 80px; }   /* bottom room so the corner ＋ FAB never covers the last item; the day-wheel bar sits below and owns the safe-area */
.deck-ci { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 66px; padding: 13px 16px; margin: 4px 0 20px;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .12s, transform .1s; }
.deck-ci:hover { border-color: var(--accent); }
.deck-ci:active { transform: scale(0.99); }
.deck-ci-emoji { font-size: 26px; flex: 0 0 auto; }
.deck-ci-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deck-ci-txt b { font-size: 15px; }
.deck-ci-txt span { font-size: 12px; color: rgba(var(--ink-rgb), 0.55); }
.deck-ci-go { flex: 0 0 auto; color: var(--accent); font-size: 15px; }
.deck-sec-h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); margin: 0 0 10px 4px; font-weight: 600; }
.deck-sp-tasks { width: 100%; }
.deck-sec-h2 { margin-top: 22px; }
/* the deck's ＋ FAB + spring-up bubble menu (Add task / habit / note / event / Go-to routine) */
/* the FAB sits bottom-RIGHT, ABOVE the day-wheel bar (which owns the full-width bottom strip) */
.deck-fab { position: absolute; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30;
  width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--accent); color: var(--paper);
  font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.18); transition: transform 0.12s ease; }
.deck-fab.on { transform: rotate(45deg); }
.deck-fab:active { transform: scale(0.94); }
.deck-bubbles { position: absolute; right: 18px; bottom: calc(154px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; flex-direction: column; gap: 8px; width: min(78vw, 280px); max-height: 56vh; overflow-y: auto; padding: 2px; }
.deck-bub { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 14px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; cursor: pointer; text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transition: border-color .12s, transform .1s; }
.deck-bub:hover { border-color: var(--accent); }
.deck-bub:active { transform: scale(0.98); }
.deck-bub .db-i { flex: 0 0 auto; width: 22px; text-align: center; font-size: 18px; }
.deck-bub-sep { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--ink-rgb), 0.5); padding: 6px 6px 2px; }
.deck-bub-goto .db-i { font-size: 16px; }
/* deck Notes — synced quick thoughts (money.things type "note") */
.deck-notes { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.deck-note { display: flex; gap: 6px; align-items: flex-start; }
.deck-note-t { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.4; resize: none; box-sizing: border-box; overflow: hidden; }
.deck-note-t:focus { outline: none; border-color: var(--accent); }
.deck-note-x { flex: 0 0 auto; min-width: 40px; min-height: 40px; border: none; background: none; color: rgba(var(--ink-rgb), 0.42); font-size: 15px; cursor: pointer; }
.deck-note-x:hover { color: var(--accent); }
.deck-note-empty { padding: 4px 2px; }
/* Check-in question cards on the deck view: a run button + the questions as tappable cards. */
.deck-ci-run { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 56px; padding: 12px 16px; margin: 2px 0 10px;
  border: 1px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); cursor: pointer; font-family: inherit; text-align: left; transition: background .12s, transform .1s; }
.deck-ci-run:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.deck-ci-run:active { transform: scale(0.99); }
.deck-ci-run-t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; }
.deck-q-list { display: flex; flex-direction: column; gap: 6px; }
.deck-q { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); color: var(--ink); cursor: pointer; font-family: inherit; text-align: left; transition: border-color .12s, transform .1s; }
.deck-q:hover { border-color: var(--accent); }
.deck-q:active { transform: scale(0.99); }
.deck-q-emoji { font-size: 18px; flex: 0 0 auto; }
.deck-q-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink); }
.deck-q-kind { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); font-family: ui-monospace, Menlo, monospace; }
.deck-q-empty { padding: 6px 4px 14px; line-height: 1.5; }
/* collapsible "Today's check-in": tap the header to hide/show the question list at a glance */
.deck-ci-sec { margin-bottom: 4px; }
.deck-ci-head-row { display: flex; align-items: center; gap: 4px; margin: 2px 0 8px; }
.deck-ci-head { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 2px; border: none; background: none; cursor: pointer; font-family: inherit; }
.deck-ci-edit { flex: 0 0 auto; width: 40px; min-height: 40px; border: none; background: none; color: rgba(var(--ink-rgb), 0.45); font-size: 15px; cursor: pointer; border-radius: 9px; }
.deck-ci-edit:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
/* question detail sheet (rides the td-space shell): emoji + prompt row, answer-type select */
.qd-titlerow { display: flex; gap: 8px; margin-bottom: 18px; }
.qd-emoji { flex: 0 0 auto; width: 54px; text-align: center; box-sizing: border-box; min-height: 48px; padding: 0; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 22px; }
.qd-emoji:focus, .qd-input:focus { outline: none; border-color: var(--accent); }
.qd-titlerow .td-title { flex: 1 1 auto; margin-bottom: 0; }
.qd-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; }
.deck-ci-caret { flex: 0 0 auto; color: rgba(var(--ink-rgb), 0.45); font-size: 11px; transition: transform .15s; }
.deck-ci-sec.collapsed .deck-ci-caret { transform: rotate(-90deg); }
.deck-ci-label { flex: 1 1 auto; text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); font-weight: 600; }
.deck-ci-count { flex: 0 0 auto; font-size: 11px; color: rgba(var(--ink-rgb), 0.4); font-family: ui-monospace, Menlo, monospace; }
.deck-ci-sec.collapsed .deck-q-list { display: none; }
.daily-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 22px calc(28px + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.daily-in { animation: dailyIn 0.28s ease; }
@keyframes dailyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.daily-q { font-size: 26px; font-weight: 600; line-height: 1.22; margin: 18px 0 4px; }
.daily-hint { font-size: 14px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.62); margin: 0 0 12px; }
.daily-health { margin-top: 10px; font-size: 14px; font-weight: 600; color: rgba(var(--ink-rgb), 0.72); }
.deck-help { font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.6); padding: 0 18px 10px; }

/* ── Energy pattern widget (Health's first widget) ── */
.is-energy .en-of { font-size: 15px; opacity: 0.55; font-weight: 600; }
.is-energy .en-dim { opacity: 0.45; font-size: 22px; }
.en-chart { display: flex; align-items: flex-end; gap: 4px; height: 72px; margin: 10px 0 6px; }
.en-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.en-bar { width: 100%; min-height: 6px; border-radius: 4px 4px 2px 2px; background: var(--accent); opacity: 0.8; }
.en-none { width: 100%; height: 3px; border-radius: 2px; background: rgba(var(--ink-rgb), 0.12); }
.en-today .en-bar { opacity: 1; box-shadow: 0 0 0 1.5px rgba(var(--ink-rgb), 0.25); }
.en-foot { margin-top: 2px; }
.en-log { margin-top: 8px; min-height: 44px; width: 100%; border: 1.5px solid var(--accent); border-radius: 12px;
  background: transparent; color: var(--ink); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.en-log:active { transform: scale(0.98); }

/* ── Setup wizard (reuses the daily-space look; these are the wizard-only pieces) ── */
.wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.wiz-chip { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px;
  border: 1.5px solid var(--edge); border-radius: 14px; background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: transform 0.08s, border-color 0.12s; }
.wiz-chip .e { font-size: 20px; line-height: 1; }
.wiz-chip.on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.wiz-chip:active { transform: scale(0.97); }
.wiz-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.55; white-space: nowrap; }
.wiz-tag.now { color: #2ec16b; opacity: 1; }
.wiz-skip { display: block; margin: 14px auto 0; min-height: 44px; padding: 0 18px; border: none; background: none;
  color: rgba(var(--ink-rgb), 0.55); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Brain Bucket widget ── */
.is-bucket { display: flex; flex-direction: column; }
.bk-add { display: flex; gap: 8px; margin-bottom: 10px; }
.bk-in { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--edge); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; box-sizing: border-box; }
.bk-go { width: 44px; min-height: 44px; flex: 0 0 auto; border: 1.5px solid var(--accent); border-radius: 12px;
  background: transparent; color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.bk-go:active { transform: scale(0.94); }
.bk-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.bk-item { display: flex; align-items: center; gap: 6px; padding: 7px 6px 7px 10px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); }
.bk-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); word-break: break-word; text-decoration: none; }
a.bk-txt:hover, a.bk-txt:focus-visible { text-decoration: underline; }
.bk-x { min-width: 44px; min-height: 40px; flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.5);
  font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; }
.bk-x:active { transform: scale(0.9); }
.bk-empty { line-height: 1.5; }
.bk-retry { align-self: flex-start; min-height: 44px; padding: 10px 16px; margin-top: 8px;
  border: 1px solid var(--edge-soft); border-radius: 10px; background: none;
  color: rgba(var(--ink-rgb), 0.7); font-family: inherit; font-size: 12px; cursor: pointer; }
.bk-retry:hover { border-color: var(--accent); color: var(--ink); }
.bk-count { margin-top: auto; }

/* Tasks widget (money.things) — mirrors the Brain Bucket's add/list rhythm; 44px hit areas,
   fluid, theme-var colors only so it survives dark mode and a narrow phone-width widget. */
.is-tasks { display: flex; flex-direction: column; }
.tk-add { display: flex; gap: 8px; margin-bottom: 10px; }
.tk-in { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--edge); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; }
.tk-in:focus { outline: none; border-color: var(--accent); }
.tk-go { width: 44px; min-height: 44px; flex: 0 0 auto; border: 1.5px solid var(--accent); border-radius: 12px;
  background: none; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: transform .1s; }
.tk-go:active { transform: scale(0.94); }
.tk-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tk-item { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 4px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); }
/* checkbox: a 44px touch target with a 24px visual box (glyph small, hit area big — mobile SOP #1) */
.tk-check { flex: 0 0 auto; width: 40px; min-height: 40px; border: none; background: none; cursor: pointer; padding: 0; position: relative; }
.tk-check::before { content: ""; position: absolute; left: 50%; top: 50%; width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px;
  border: 1.8px solid rgba(var(--ink-rgb), 0.3); border-radius: 7px; transition: background .12s, border-color .12s, transform .1s; }
.tk-check.on::before { background: var(--accent); border-color: var(--accent); }
.tk-check.on::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink); }
.tk-check:active::before { transform: scale(0.86); }
.tk-title { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); word-break: break-word; }
.tk-item.done .tk-title { text-decoration: line-through; color: rgba(var(--ink-rgb), 0.4); }
/* Projects widget — an accordion of projects, each with a rolled-up task progress bar */
.is-projects { display: flex; flex-direction: column; }
.pj-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pj-htitle { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); font-weight: 600; }
.pj-count { font-size: 11px; color: rgba(var(--ink-rgb), 0.4); font-variant-numeric: tabular-nums; }
.pj-new { display: flex; gap: 8px; margin-bottom: 10px; }
.pj-newin { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; }
.pj-newin:focus { outline: none; border-color: var(--accent); }
.pj-newgo { width: 44px; min-height: 44px; flex: 0 0 auto; border: 1.5px solid var(--accent); border-radius: 12px; background: none; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: transform .1s; }
.pj-newgo:active { transform: scale(0.94); }
.pj-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pj-empty { padding: 4px 2px; }
.pj-proj { border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pj-prow { display: flex; align-items: center; gap: 4px; padding: 4px 6px; }
.pj-caret { flex: 0 0 auto; width: 28px; height: 40px; border: none; background: none; color: rgba(var(--ink-rgb), 0.5); font-size: 13px; cursor: pointer; transition: transform .12s; }
.pj-caret.col { transform: rotate(-90deg); }
.pj-emoji { flex: 0 0 auto; font-size: 15px; }
.pj-name { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: none; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; padding: 8px 6px; border-radius: 8px; }
.pj-name:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.pj-prog { flex: 0 0 auto; font-size: 11px; color: rgba(var(--ink-rgb), 0.5); font-variant-numeric: tabular-nums; }
.pj-addt, .pj-x { flex: 0 0 auto; width: 34px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: rgba(var(--ink-rgb), 0.45); font-size: 15px; cursor: pointer; border-radius: 8px; }
.pj-addt:hover, .pj-x:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.06); }
.pj-x:hover { color: #e0533d; }
.pj-bar { height: 4px; background: rgba(var(--ink-rgb), 0.09); }
.pj-bar-fill { height: 100%; background: var(--accent); transition: width .25s ease; }
.pj-body { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.pj-task { display: flex; align-items: center; gap: 4px; }
.pj-check { flex: 0 0 auto; width: 40px; min-height: 40px; border: none; background: none; cursor: pointer; padding: 0; position: relative; }
.pj-check::before { content: ""; position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; border: 1.8px solid rgba(var(--ink-rgb), 0.3); border-radius: 6px; transition: background .12s, border-color .12s, transform .1s; }
.pj-check.on::before { background: var(--accent); border-color: var(--accent); }
.pj-check.on::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--ink); }
.pj-check:active::before { transform: scale(0.86); }
.pj-ttitle { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: none; color: var(--ink); font-family: inherit; font-size: 13.5px; padding: 8px 6px; border-radius: 8px; }
.pj-ttitle:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.pj-task.done .pj-ttitle { text-decoration: line-through; color: rgba(var(--ink-rgb), 0.4); }
.pj-tx { flex: 0 0 auto; width: 34px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: rgba(var(--ink-rgb), 0.4); font-size: 13px; cursor: pointer; border-radius: 8px; }
.pj-tx:hover { color: #e0533d; background: rgba(var(--ink-rgb), 0.06); }
.pj-addrow { display: flex; gap: 6px; margin-top: 2px; }
.pj-taskin { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.pj-taskin:focus { outline: none; border-color: var(--accent); }
.pj-taskgo { flex: 0 0 auto; width: 40px; min-height: 40px; border: 1px solid var(--edge); border-radius: 9px; background: none; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.pj-taskgo:hover { border-color: var(--accent); }
/* Session surface — the timer + task checklist + custom stats you tap into from the calendar */
.sess-timerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sess-timenum { font-size: 22px; font-weight: 700; color: var(--ink); }
.sess-timeu { font-size: 12px; font-weight: 500; color: rgba(var(--ink-rgb), 0.5); }
.sess-focus { min-height: 40px; padding: 8px 14px; border: 1px solid var(--edge); border-radius: 20px; background: var(--panel); color: rgba(var(--ink-rgb), 0.7); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sess-focus.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.sess-bar { height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.09); overflow: hidden; margin-bottom: 10px; }
.sess-barfill { height: 100%; background: var(--accent); transition: width .3s ease; }
.sess-timerhost { container-type: size; min-height: 200px; border: 1px solid var(--edge); border-radius: 14px; padding: 10px; margin-bottom: 8px; overflow: hidden; }
.sess-hint { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); line-height: 1.45; }
.sess-tasks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.sess-taskin { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; }
.sess-taskin:focus { outline: none; border-color: var(--accent); }
.sess-taskgo { flex: 0 0 auto; width: 44px; min-height: 44px; border: 1px solid var(--accent); border-radius: 10px; background: none; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.sess-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sess-stat { display: flex; align-items: center; gap: 6px; }
.sess-statlabel { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: none; color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 6px; border-radius: 8px; }
.sess-statlabel:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.sess-statctl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.sess-statamt { width: 66px; min-height: 40px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; text-align: right; }
.sess-statamt:focus { outline: none; border-color: var(--accent); }
.sess-statunit { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.sess-statnote { width: 128px; min-height: 40px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; }
.sess-statnote:focus { outline: none; border-color: var(--accent); }
.sess-scale { display: inline-flex; gap: 3px; }
.sess-scalen { width: 30px; height: 40px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); color: rgba(var(--ink-rgb), 0.6); font-family: inherit; font-size: 13px; cursor: pointer; }
.sess-scalen.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.sess-addstatbtn { width: 100%; min-height: 40px; padding: 8px 14px; border: 1px dashed var(--edge); border-radius: 10px; background: none; color: rgba(var(--ink-rgb), 0.6); font-family: inherit; font-size: 13px; cursor: pointer; }
.sess-addstatbtn:hover { border-color: var(--accent); color: var(--ink); }
.sess-addstat { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); }
.sess-newstat, .sess-newunit { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; }
.sess-newstat:focus, .sess-newunit:focus { outline: none; border-color: var(--accent); }
.sess-trackpick { display: flex; gap: 4px; flex-wrap: wrap; }
.sess-trk { flex: 1 1 auto; min-height: 40px; padding: 6px 8px; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: rgba(var(--ink-rgb), 0.7); font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.sess-trk.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.sess-addrow2 { display: flex; gap: 8px; }
.sess-statcreate { flex: 1 1 auto; min-height: 44px; border: none; border-radius: 10px; background: var(--accent); color: var(--paper); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sess-statcancel { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 10px; background: none; color: rgba(var(--ink-rgb), 0.6); font-family: inherit; font-size: 13px; cursor: pointer; }
.tk-x { min-width: 44px; min-height: 40px; flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.42);
  font-size: 14px; cursor: pointer; transition: transform .1s, color .12s; }
.tk-x:hover { color: rgba(var(--ink-rgb), 0.75); }
.tk-x:active { transform: scale(0.9); }
.tk-empty { line-height: 1.5; }
.tk-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-bottom: 8px;
  border: 1px dashed var(--edge); border-radius: 10px; }
.tk-undo-t { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.6); min-width: 0; }
.tk-undo-go { min-height: 40px; flex: 0 0 auto; padding: 0 14px; border: 1px solid var(--accent); border-radius: 9px;
  background: none; color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer; transition: transform .1s; }
.tk-undo-go:active { transform: scale(0.96); }
.tk-count { flex: 0 0 auto; }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.tk-newroutine { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: none;
  color: rgba(var(--ink-rgb), 0.7); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s; }
.tk-newroutine:hover { border-color: var(--accent); color: var(--ink); }
/* routine card: a group with an emoji, today's progress, and a due-today dim when off-schedule */
.tk-routine { border-color: color-mix(in srgb, var(--accent) 35%, var(--edge)); }
.tk-remoji { flex: 0 0 auto; font-size: 17px; }
.tk-rprog { flex: 0 0 auto; font-size: 11px; font-family: ui-monospace, Menlo, monospace; color: rgba(var(--ink-rgb), 0.5); padding: 2px 7px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.05); }
.tk-rprog.done { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tk-routine.tk-notdue { opacity: 0.6; }
/* routine schedule picker (in the detail sheet) */
.rd-days { display: flex; gap: 6px; }
.rd-day { flex: 1 1 auto; min-height: 42px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; }
.rd-day.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }
.rd-every { display: flex; align-items: center; gap: 8px; }
.rd-everyin { width: 72px; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; }
.rd-everyin:focus { outline: none; border-color: var(--accent); }
.rd-everylbl { font-size: 13px; color: rgba(var(--ink-rgb), 0.6); }
.rd-pausefield > label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); margin: 0; }
.rd-pausefield input[type="checkbox"] { width: 20px; height: 20px; }
/* Mobile: the deck's tasks + routines get chunkier — bigger text, emojis, and 44px+ hit areas
   so habits are easy to read and tap on a phone (tester ask). Scoped to .is-tasks. */
@media (max-width: 640px) {
  .is-tasks .tk-item { gap: 9px; padding: 7px 6px; }
  .is-tasks .tk-title { font-size: 16px; line-height: 1.4; }
  .is-tasks .tk-check { width: 46px; min-height: 46px; }
  .is-tasks .tk-check::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .is-tasks .tk-check.on::after { font-size: 16px; }
  .is-tasks .tk-caret { width: 30px; min-height: 46px; font-size: 15px; }
  .is-tasks .tk-remoji { font-size: 24px; }
  .is-tasks .tk-hbadge { font-size: 16px; }
  .is-tasks .tk-rprog { font-size: 13px; padding: 3px 9px; }
  .is-tasks .tk-addsub, .is-tasks .tk-menu, .is-tasks .tk-x { min-width: 46px; min-height: 46px; font-size: 20px; }
  .is-tasks .tk-amt { min-height: 44px; font-size: 15px; padding: 0 12px; }
  .is-tasks .tk-scale-n { min-height: 44px; font-size: 16px; }
  .is-tasks .tk-notein { min-height: 44px; font-size: 15px; }
  .is-tasks .tk-in { min-height: 48px; }
  .is-tasks .tk-go { width: 48px; min-height: 48px; font-size: 22px; }
  .is-tasks .tk-newroutine { min-height: 44px; font-size: 14px; }
  .is-tasks .tk-mbtn { min-height: 44px; font-size: 14px; }
}
/* Subtasks (infinite depth): a collapse caret, a hover-revealed add-subtask +, and the inline add row. */
.tk-caret { flex: 0 0 auto; width: 22px; min-height: 40px; border: none; background: none; cursor: pointer; padding: 0;
  color: rgba(var(--ink-rgb), 0.45); font-size: 11px; line-height: 1; transition: transform .12s, color .12s; }
.tk-caret.col { transform: rotate(-90deg); }
.tk-caret:hover { color: var(--ink); }
.tk-caret-sp { flex: 0 0 auto; width: 22px; }
.tk-addsub { min-width: 34px; min-height: 40px; flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.4);
  font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: transform .1s, color .12s, opacity .12s; }
.tk-item:hover .tk-addsub { opacity: 1; }
.tk-addsub:hover { color: var(--accent); }
.tk-addsub:active { transform: scale(0.9); }
@media (hover: none) { .tk-addsub { opacity: 1; } }   /* touch has no hover — never hide an essential control (mobile SOP #2) */
.tk-subadd { display: flex; gap: 6px; padding: 2px 0 4px 30px; }
.tk-subin { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--accent); border-radius: 10px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; }
.tk-subin:focus { outline: none; }
.tk-subgo { width: 40px; min-height: 40px; flex: 0 0 auto; border: 1.5px solid var(--accent); border-radius: 10px;
  background: none; color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; transition: transform .1s; }
.tk-subgo:active { transform: scale(0.94); }
/* Habits: a ↻ badge on the title, a value chip for "amount" habits, a ⋯ options button + its inline menu row. */
.tk-hbadge { color: color-mix(in srgb, #1aa64c 62%, var(--ink)); font-size: 12px; margin-right: 4px; opacity: 0.9; }
/* a HABIT reads GREEN — green outline + green text, blended toward the theme's ink so it stays
   dark/readable on any paper (tester ask). Title greys only once done (falls through to .done). */
.tk-item.tk-habit { border-color: color-mix(in srgb, #1aa64c 50%, var(--ink)); }
.tk-item.tk-habit:not(.done) .tk-title { color: color-mix(in srgb, #1aa64c 62%, var(--ink)); font-weight: 500; }
.tk-amt { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0 9px; border: 1.5px solid rgba(var(--ink-rgb), 0.25); border-radius: 9px;
  background: none; color: rgba(var(--ink-rgb), 0.7); font-family: ui-monospace, Menlo, monospace; font-size: 12px; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.tk-amt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.tk-amt:active { transform: scale(0.95); }
.tk-menu { min-width: 34px; min-height: 40px; flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.4);
  font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: transform .1s, color .12s, opacity .12s; }
.tk-item:hover .tk-menu { opacity: 1; }
.tk-menu:hover { color: var(--ink); }
@media (hover: none) { .tk-menu { opacity: 1; } }   /* touch has no hover — never hide an essential control */
.tk-menu-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px 30px; }
.tk-mbtn { min-height: 38px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 9px; background: var(--panel);
  color: var(--ink); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, transform .1s; }
.tk-mbtn:hover { border-color: var(--accent); }
.tk-mbtn:active { transform: scale(0.96); }
.tk-mbtn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); font-weight: 600; }   /* the ⋯ menu's "tracked as" picker marks the current mode */
/* rating habits: the inline 1–5 row (thumb-friendly, each ≥40px; container query bumps to 44) */
.tk-scale { padding-right: 2px; }
.tk-scale-n { flex: 1 1 auto; min-width: 40px; min-height: 40px; border: 1.5px solid rgba(var(--ink-rgb), 0.25); border-radius: 10px;
  background: none; color: rgba(var(--ink-rgb), 0.7); font-family: ui-monospace, Menlo, monospace; font-size: 14px; cursor: pointer; transition: border-color .12s, background .12s, transform .1s; }
.tk-scale-n.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); font-weight: 700; }
.tk-scale-n:active { transform: scale(0.92); }
/* text habits: the day's few words, editable in place (same accent frame as the subtask input) */
.tk-notein { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--accent); border-radius: 10px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; }
.tk-notein:focus { outline: none; }
.tk-notechip { font-family: inherit; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a habit that isn't scheduled today — calm, dimmed, still tappable (bonus, never an error) */
.tk-habit.tk-notdue { opacity: 0.55; }
/* the tap-to-move routine picker — a readable column (each routine its own row), current one marked */
.tk-moverow { flex-direction: column; align-items: stretch; max-height: 240px; overflow-y: auto; }
.tk-moverow .tk-mbtn { justify-content: flex-start; text-align: left; }
.tk-movebtn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); font-weight: 600; }
.tk-movehint { padding: 4px 2px 6px; }
.tk-title[data-act="trail"] { cursor: pointer; }
.tk-title[data-act="trail"]:hover { text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), 0.3); text-underline-offset: 2px; }
/* Task activity-trail modal (rides the shared .cat-modal shell) */
.tkt-modal { max-width: 420px; }
.tkt-body { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.tkt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; }
.tkt-row:nth-child(odd) { background: rgba(var(--ink-rgb), 0.035); }
.tkt-what { font-size: 13.5px; color: var(--ink); min-width: 0; line-height: 1.4; }
.tkt-what b { color: var(--accent); font-weight: 700; }
.tkt-when { flex: 0 0 auto; font-size: 11.5px; color: rgba(var(--ink-rgb), 0.5); font-variant-numeric: tabular-nums; }
.tkt-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: rgba(var(--ink-rgb), 0.55); line-height: 1.5; }
/* Task / habit DETAIL surface — the full editor a task's bar opens (reuses .daily-space). */
.td-htitle { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.td-del:hover { color: #c9542e !important; }
.td-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); }
.td-title { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; margin-bottom: 18px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; }
.td-title:focus { outline: none; border-color: var(--accent); }
.td-field { margin-bottom: 18px; }
.td-field > label { display: block; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); font-weight: 600; margin: 0 0 8px 2px; }
.td-seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; max-width: 100%; }
.td-seg button { min-height: 44px; padding: 0 16px; border: none; background: none; color: rgba(var(--ink-rgb), 0.62); font-family: inherit; font-size: 13.5px; cursor: pointer; transition: background .12s, color .12s; }
.td-seg button.on { background: var(--accent); color: var(--paper); font-weight: 600; }   /* text must CONTRAST the accent fill (var(--ink) went black-on-black on the mono theme) */
/* a 4-way seg (the habit "how it's tracked" picker) can't fit one row on a phone — let it wrap
   into rounded pills instead of clipping options off the edge (mobile SOP #3: never overflow) */
.td-seg-wrap { flex-wrap: wrap; border: none; border-radius: 0; overflow: visible; gap: 6px; }
.td-seg-wrap button { border: 1px solid var(--edge); border-radius: 11px; }
.td-seg-wrap button.on { border-color: var(--accent); }
.td-unit { display: block; margin-top: 8px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; }
.td-unit:focus, .td-due:focus { outline: none; border-color: var(--accent); }
.td-due-row { display: flex; gap: 8px; flex-wrap: wrap; }
.td-due { flex: 1 1 130px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; }
.td-areas { display: flex; flex-wrap: wrap; gap: 7px; }
.td-area, .td-rt { min-height: 40px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 20px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s; }
.td-area.on, .td-rt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.td-area-clear { color: rgba(var(--ink-rgb), 0.5); }
.td-notes { width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.td-notes:focus { outline: none; border-color: var(--accent); }
.td-soon .td-soon-txt { font-size: 13px; color: rgba(var(--ink-rgb), 0.45); padding: 11px 12px; border: 1px dashed var(--edge); border-radius: 12px; }
/* routine-detail steps editor — add / rename / reorder / delete a routine's steps in place */
.rd-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rd-empty { font-size: 13px; color: rgba(var(--ink-rgb), 0.45); padding: 11px 12px; border: 1px dashed var(--edge); border-radius: 12px; }
.rd-step { display: flex; align-items: center; gap: 4px; }
.rd-ord { flex: 0 0 auto; width: 18px; text-align: center; font-size: 11px; color: rgba(var(--ink-rgb), 0.4); font-variant-numeric: tabular-nums; }
.rd-stitle { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; box-sizing: border-box; }
.rd-stitle:focus { outline: none; border-color: var(--accent); }
.rd-mv, .rd-sx { flex: 0 0 auto; width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: rgba(var(--ink-rgb), 0.5); font-size: 15px; cursor: pointer; border-radius: 8px; }
.rd-mv:hover, .rd-sx:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.06); }
.rd-mv:disabled { opacity: 0.25; cursor: default; }
.rd-sx:hover { color: #e0533d; }
.rd-addstep { display: flex; gap: 6px; }
.rd-stepin { flex: 1 1 auto; min-width: 0; padding: 11px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 14px; box-sizing: border-box; }
.rd-stepin:focus { outline: none; border-color: var(--accent); }
.rd-stepgo { flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 10px; background: var(--accent); color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; }
.rd-stepgo:hover { filter: brightness(1.06); }
.td-trail { display: flex; flex-direction: column; gap: 2px; }

.daily-input { margin-top: auto; }
.daily-opts { display: flex; flex-direction: column; gap: 11px; }
.daily-btn { display: flex; align-items: center; gap: 15px; width: 100%; box-sizing: border-box; min-height: 66px;
  padding: 0 20px; border: 1.5px solid var(--edge); border-radius: 18px; background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-align: left; transition: transform 0.08s, border-color 0.12s; }
.daily-btn:active { transform: scale(0.97); }
.daily-btn:hover { border-color: var(--accent); }
.daily-btn .e { font-size: 28px; line-height: 1; }
.daily-chips { display: flex; flex-wrap: wrap; gap: 11px; }
.daily-chip { flex: 1 1 27%; min-height: 60px; border: 1.5px solid var(--edge); border-radius: 16px; background: var(--panel);
  color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: transform 0.08s; }
.daily-chip:active { transform: scale(0.95); }
.daily-none { width: 100%; min-height: 62px; margin-bottom: 12px; border: 1.5px solid #2ec16b; border-radius: 18px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.daily-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 16px; }
.daily-step { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--panel);
  color: var(--ink); font-size: 30px; cursor: pointer; }
.daily-num { font-size: 40px; font-weight: 600; font-family: ui-monospace, monospace; min-width: 60px; text-align: center; }
.daily-note { width: 100%; box-sizing: border-box; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--edge);
  border-radius: 16px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 17px; margin-bottom: 12px; }
.daily-note:focus { outline: none; border-color: var(--accent); }
.daily-cta { width: 100%; min-height: 60px; border: none; border-radius: 18px; background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.daily-cta.ghost { background: var(--panel); color: var(--ink); border: 1.5px solid var(--edge); }
.daily-cta.sm { width: auto; min-height: 40px; padding: 0 18px; font-size: 14px; flex: 0 0 auto; }
.daily-done { align-items: center; justify-content: center; text-align: center; }
.daily-emoji { font-size: 78px; line-height: 1; }
.daily-big { font-size: 28px; font-weight: 600; margin-top: 6px; }
.daily-exp { font-size: 36px; font-weight: 600; font-family: ui-monospace, monospace; color: #2ec16b; margin: 4px 0; }
.daily-funny { font-size: 15px; color: rgba(var(--ink-rgb), 0.55); }
.daily-done .daily-cta { max-width: 240px; margin-top: 28px; }
/* deck editor (customize) */
.deck-title { font-size: 16px; font-weight: 600; flex: 1 1 auto; }
.deck-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; max-width: 620px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.deck-row { border: 1px solid var(--edge-soft); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--panel); }
.deck-row-top { display: flex; gap: 8px; align-items: center; }
.deck-emoji { width: 46px; flex: 0 0 auto; text-align: center; }
.deck-prompt { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.deck-row input, .deck-row select { padding: 9px 10px; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper);
  color: var(--ink); font-family: inherit; font-size: 14px; min-height: 40px; box-sizing: border-box; }
.deck-grip { width: 44px; height: 44px; flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.38);
  cursor: grab; font-size: 20px; line-height: 1; padding: 0; touch-action: none; }
.deck-grip:active { cursor: grabbing; }
.deck-del { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper);
  color: rgba(var(--ink-rgb), 0.55); cursor: pointer; font-size: 15px; padding: 0; }
.deck-del:hover { border-color: #e0533d; color: #e0533d; }
.deck-row.dragging { opacity: 0.94; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); border-color: var(--accent); position: relative; z-index: 5; }
.deck-row-cfg { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.deck-row-cfg label { flex: 1 1 30%; min-width: 104px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: rgba(var(--ink-rgb), 0.55); }
.deck-row-cfg .deck-target, .deck-optlbl { flex: 1 1 100% !important; }
.deck-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto; width: 100%; box-sizing: border-box; border-top: 1px solid var(--edge-soft); }
.base-bld:hover { transform: translate(-50%, calc(-50% - 7px)); }
.base-bld:active { transform: translate(-50%, calc(-50% - 2px)); }
.bh-art { transform: scale(var(--bld-scale, 1)); transform-origin: 50% 76%; transition: transform 0.18s ease; }
.bh-art svg { width: clamp(150px, 42vw, 210px); height: auto; display: block; }
.bs-combine { display: flex; gap: 8px; align-items: center; }
.bs-combine select { flex: 1 1 auto; min-width: 0; }
.bs-combine .bs-add { flex: 0 0 auto; }
.bh-name { color: var(--ink); font-size: 15px; font-weight: 600; }
.bh-badge { font-family: ui-monospace, monospace; font-size: 12px; color: rgba(var(--ink-rgb), 0.55); }
.base-hint { position: absolute; bottom: calc(84px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  color: rgba(var(--ink-rgb), 0.5); font-size: 13px; transition: opacity 0.2s; padding: 0 16px; }
/* config bottom sheet — floats ABOVE the dock (own high z, appended to body) */
.base-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; background: var(--paper); color: var(--ink);
  border-radius: 20px 20px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.45); max-height: 74%;
  display: flex; flex-direction: column; transition: transform 0.28s ease; }
.base-sheet.base-hidden { transform: translateY(101%); }
.bs-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; flex: 0 0 auto;
  border-bottom: 1px solid var(--edge-soft); }
.bs-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.bs-close { border: none; background: none; color: rgba(var(--ink-rgb), 0.55); font-size: 17px; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px; }
.bs-close:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
.bs-scroll { overflow-y: auto; padding: 12px 18px calc(20px + env(safe-area-inset-bottom)); }
.bs-sec { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); margin: 4px 0 2px; }
.bs-add { border: 1px solid var(--edge); background: var(--panel); border-radius: 8px; padding: 6px 11px;
  cursor: pointer; color: var(--ink); font-family: inherit; font-size: 12px; min-height: 34px; }
.bs-add:hover { border-color: var(--accent); color: var(--accent); }
.bs-hint { font-size: 11px; font-style: italic; color: rgba(var(--ink-rgb), 0.5); margin-bottom: 8px; }
.bs-namerow { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.bs-namelbl { font-size: 11px; color: rgba(var(--ink-rgb), 0.55); }
.bs-name-in { padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel);
  color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; min-height: 42px; width: 100%; box-sizing: border-box; }
.bs-name-in:focus { outline: none; border-color: var(--accent); }
.bs-list { display: flex; flex-direction: column; gap: 7px; }
.bs-row { display: flex; gap: 6px; align-items: center; }
.bs-row input, .bs-row select { padding: 9px 10px; border: 1px solid var(--edge); border-radius: 9px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; min-width: 0; min-height: 40px; }
.bs-name { flex: 1 1 auto; }
.bs-type { flex: 0 0 auto; width: 84px; }
.bs-cost { flex: 0 0 auto; width: 84px; text-align: right; }
.bs-x { flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.45); cursor: pointer;
  font-size: 13px; width: 40px; height: 40px; border-radius: 9px; }
.bs-x:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
.bs-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.bs-stat { border: 1px solid var(--edge-soft); border-radius: 11px; padding: 9px 11px; background: var(--panel); min-width: 0; }
.bs-k { font-size: 11px; color: rgba(var(--ink-rgb), 0.55); }
.bs-v { font-size: 19px; font-weight: 600; font-family: ui-monospace, monospace; color: var(--ink); margin-top: 1px; }
.bs-note { font-size: 10px; color: rgba(var(--ink-rgb), 0.4); margin-top: 1px; }
.bs-coh { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.55); border-top: 1px solid var(--edge-soft); padding-top: 10px; margin-top: 12px; line-height: 1.5; }
/* The ledger surface owns its own ink scale. It always sits on deep space, so its text
   can't inherit --ink (that's the board's, and it flips with the theme) — but every mark
   in the Visualizer reads THESE, so there is still exactly one place to retune contrast
   and nothing hardcodes a color in JS. --accent still comes from the live theme. */
.lg-space { position: fixed; inset: 0; z-index: 100000; background: #06040f; overflow: hidden;
  --lg-ink: #eef0ff; --lg-dim: rgba(238, 240, 255, 0.58); --lg-faint: rgba(238, 240, 255, 0.2); --lg-grid: rgba(238, 240, 255, 0.1);
  /* The surface background is a FIXED near-black regardless of theme, so its accent must be
     fixed-legible too — NOT the theme's --accent, which in the default Water (mono) theme is a
     deep ocean blue (~1.4:1 on #06040f: invisible). Cosmic gold reads ~14:1 here and matches the
     ledger's identity. Every Visualizer mark reads --lg-accent (via vizInk), never --accent. */
  --lg-accent: #ffd409;
  font-family: ui-monospace, Menlo, monospace; animation: lg-in 0.3s ease; }
html[data-contrast="high"] .lg-space { --lg-dim: rgba(238, 240, 255, 0.82); --lg-faint: rgba(238, 240, 255, 0.34); --lg-grid: rgba(238, 240, 255, 0.2); }
.lg-space, .lg-space * { cursor: auto !important; }
.lg-space .lg-back, .lg-space .lg-book, .lg-space .lg-cancel, .lg-space .lg-mute, .lg-space .lg-bubble { cursor: pointer !important; }
.lg-space .lg-ledger { cursor: grab !important; }
.lg-space .lg-ledger.lg-dragging { cursor: grabbing !important; }
@keyframes lg-in { from { opacity: 0; } to { opacity: 1; } }
.lg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; transition: opacity 0.5s ease, transform 0.5s ease; padding: 24px; }
.lg-hidden { opacity: 0; pointer-events: none; }
.lg-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); opacity: 0.8; }
.lg-gold { color: var(--accent); opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.lg-cta { font-size: 24px; font-weight: 700; letter-spacing: 0.16em; color: #eef0ff; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, #788cff); }
.lg-title { font-family: "Special Gothic Expanded One", ui-monospace, sans-serif; font-size: 30px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, #b478ff); }
.lg-headline { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0; }
.lg-headline b { font-size: 34px; color: var(--accent); text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); font-variant-numeric: tabular-nums; }
.lg-headline span { font-size: 11px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); }
/* Consolation for a negative cache on arrival — flowers + a solution-facing line. The
   number above stays exactly as honest as ever; this just keeps someone company in the red. */
.lg-consol { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 14px; max-width: 380px; }
.lg-consol-flowers { font-size: 26px; letter-spacing: 0.16em; filter: drop-shadow(0 0 14px rgba(255, 176, 206, 0.4)); animation: lgBloom 0.9s ease-out both; }
.lg-consol-quip { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); font-style: italic; text-wrap: balance; }
@keyframes lgBloom { from { opacity: 0; transform: translateY(7px) scale(0.82); } to { opacity: 1; transform: none; } }
[data-reduce-motion="reduce"] .lg-consol-flowers { animation: none; }
/* The Ledger stacks a centered hero over an IN-FLOW dashboard so the Return button and the
   data-source count can't overlap at any window size. (The dash used to be absolutely pinned
   to the bottom while the button sat in the centered column — on a short window the two
   collided and the count covered the button. Reported by a tester, 2026-07-14.) */
.lg-ledger { justify-content: flex-start; }
.lg-hero { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; }
.lg-const { width: 92%; max-width: 1000px; height: auto; min-height: 0; max-height: 42vh; margin: 4px 0; }
/* ── The Visualizer (D3 scenes) ──────────────────────────────────────────────
   Exactly one of #lgViz / #lgConst is ever shown: .lg-off takes the other out of
   layout entirely, so a failed D3 load can't leave a ghost box behind. */
.lg-off { display: none !important; }
.lg-viz { flex: 1 1 auto; min-height: 0; width: 96%; max-width: 1040px; display: flex; flex-direction: column;
  align-items: stretch; gap: 8px; margin: 2px 0; }
.lg-scenes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lg-scene-btn { font-family: inherit; font-size: 12px; letter-spacing: 0.04em; color: var(--lg-dim);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  /* ≥44px tall on touch without a giant pill on desktop: the padding IS the hit area */
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
.lg-scene-btn:hover { color: var(--lg-ink); background: rgba(255, 255, 255, 0.1); }
.lg-scene-btn.on { color: #06040f; background: var(--lg-accent); border-color: var(--lg-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lg-accent) 45%, transparent); }
.lg-stage { flex: 1 1 auto; min-height: 120px; max-height: 54vh; width: 100%;
  container-type: size; touch-action: manipulation; }
.lg-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The caption is the scene in words — it is filled in BEFORE anyone touches anything,
   so nothing essential is ever hover-only, and it doubles as the aria-live readout. */
.lg-cap { flex: 0 0 auto; min-height: 30px; font-size: 12px; line-height: 1.35; color: var(--lg-dim);
  text-align: center; padding: 0 8px; }
/* the transient hover/tap readout — sits under the stable summary, never in the live region */
.lg-scrub { flex: 0 0 auto; min-height: 16px; font-size: 12px; line-height: 1.3; color: var(--lg-accent);
  text-align: center; padding: 0 8px; opacity: 0.92; }
@media (max-width: 560px) {
  .lg-viz { width: 100%; }
  .lg-scenes { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none;
    padding: 0 4px 2px; -webkit-overflow-scrolling: touch; }
  .lg-scenes::-webkit-scrollbar { display: none; }
  .lg-scene-btn { flex: 0 0 auto; }
  .lg-stage { max-height: 48vh; }
}
/* Reduced motion: the scenes settle statically in JS (reduceMotion() pre-ticks the force
   layout), and nothing here may fade or slide it in afterwards. */
html[data-reduce-motion="1"] .lg-scene-btn { transition: none; }
.lg-back { margin-top: 8px; font-family: inherit; font-size: 13px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 999px; padding: 9px 18px; }
.lg-back:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lg-reward { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px 0 4px;
  opacity: 0; transform: translateY(8px) scale(0.9); }
.lg-reward.lg-rw-show { animation: lg-rw-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes lg-rw-pop { to { opacity: 1; transform: translateY(0) scale(1); } }
.lg-rw-amt { font-size: 26px; font-weight: 800; color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lg-rw-lbl { font-size: 11px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.62); }
.lg-rw-lbl b { color: var(--accent); }
.lg-rw-star { position: absolute; top: -2px; font-size: 20px; opacity: 0; animation: lg-rw-star 1.1s ease-out 0.15s forwards; }
@keyframes lg-rw-star { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 28% { opacity: 1; } 100% { opacity: 0; transform: translateY(-48px) scale(1.15); } }
/* Spaceship-cockpit dashboard bubbles along the bottom of the cache */
.lg-dash { flex: 0 0 auto; width: 100%; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 0 24px 2px;
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; }
.lg-dash.lg-dash-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lg-bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 96px;
  padding: 14px 18px 9px; border-radius: 18px; font-family: ui-monospace, Menlo, monospace; color: #eef0ff;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--c) 28%, transparent), rgba(10, 12, 26, 0.74));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 32%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent);
  transition: transform 0.15s ease, box-shadow 0.2s ease; }
.lg-bubble::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px;
  border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lg-bubble:hover { transform: translateY(-2px); box-shadow: 0 0 32px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 16%, transparent); }
.lg-bub-ico { font-size: 17px; }
.lg-bub-val { font-size: 21px; font-weight: 800; color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lg-bub-lbl { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.lg-board-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); max-width: 340px; line-height: 1.5; }
/* The Ledger is ALWAYS a near-black cosmic space, so the primary CTA can't take its
   brightness from --accent (dim in the Water theme → a dark pill on black that vanishes).
   The fill is self-luminous (near-white → light-accent, always bright enough for the dark
   text), lifted off the black with a white ring + a strong accent glow, and it breathes so
   the eye finds it. */
.lg-book { margin-top: 18px; font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; color: #06040f;
  background: linear-gradient(180deg, #f4f8ff, color-mix(in srgb, var(--accent) 52%, #d3e2ff)); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 15px 34px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 48px 6px color-mix(in srgb, var(--accent) 70%, #8fa6ff), 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.2s ease; animation: lgBookPulse 2.8s ease-in-out infinite; }
.lg-book:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 64px 10px color-mix(in srgb, var(--accent) 85%, #8fa6ff), 0 8px 30px rgba(0, 0, 0, 0.5); }
@keyframes lgBookPulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 42px 4px color-mix(in srgb, var(--accent) 62%, #8fa6ff), 0 8px 30px rgba(0, 0, 0, 0.5); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 64px 11px color-mix(in srgb, var(--accent) 82%, #8fa6ff), 0 8px 30px rgba(0, 0, 0, 0.5); }
}
[data-reduce-motion="reduce"] .lg-book { animation: none; }
.lg-cancel { font-family: inherit; font-size: 12px; color: rgba(255, 255, 255, 0.45); background: none; border: none; padding: 6px; }
.lg-cancel:hover { color: rgba(255, 255, 255, 0.8); }
.lg-mute { position: absolute; top: 18px; right: 18px; z-index: 5; width: 40px; height: 40px; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%;
  transition: background 0.18s ease, opacity 0.4s ease; }
.lg-mute:hover { background: rgba(255, 255, 255, 0.16); }
.lg-mute.lg-muted { opacity: 0.55; }
.lg-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, rgba(255, 255, 255, 0) 60%); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.lg-flash.on { opacity: 1; }
/* font packs — each chip previews in its own typeface */
.set-fonts { display: flex; flex-wrap: wrap; gap: 6px; }
.font-chip { font-size: 13px; cursor: pointer; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); }
.font-chip:hover { border-color: var(--accent); }
.font-chip.active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.lib-label { flex: 1; }
.lib-state { text-transform: uppercase; letter-spacing: 0.12em; font-size: 9px; color: rgba(var(--ink-rgb), 0.4); }

.icon-search {
  width: 100%; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--edge-soft); border-radius: 8px;
  background: rgba(255, 255, 255, 0.25); color: var(--ink);
  font-family: inherit; font-size: 12px; outline: none;
}
.icon-search:focus { border-color: var(--edge); }
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.icon-cell {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 1px solid var(--edge-soft); border-radius: 8px;
  background: rgba(255, 255, 255, 0.16); cursor: grab; color: var(--ink);
  touch-action: none; transition: background 0.12s ease, transform 0.08s ease;
}
.icon-cell:hover { background: rgba(255, 255, 255, 0.5); }
.icon-cell:active { cursor: grabbing; }
.icon-cell svg { width: 18px; height: 18px; stroke-width: 1.5; pointer-events: none; }
.icon-cell.hidden { display: none; }

.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 12px; cursor: pointer; transition: background 0.14s ease;
}
.menu-item:hover { background: rgba(var(--ink-rgb), 0.07); }

/* ── bottom-right status: sources + sync ─────────── */
.status-bar { position: fixed; bottom: 24px; right: 24px; z-index: 55; display: flex; gap: 11px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--paper); cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6);
  transition: background 0.15s ease;
}
/* every icon inside a dock pill renders at one size so heights match */
.status-pill svg, .status-pill i { width: 15px; height: 15px; flex-shrink: 0; }
.status-pill:hover { background: var(--panel); }
.src-count { font-weight: 600; color: var(--ink); }
.snd-note { font-size: 12px; line-height: 1; display: inline-block; }
.status-pill.playing { color: var(--accent); border-color: var(--accent); }
.status-pill.playing .snd-note { animation: snd-pulse 0.9s ease-in-out infinite; }
@keyframes snd-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
.yt-hidden { position: fixed; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f8f4e; flex-shrink: 0; }
.status-pill.syncing .sync-dot { animation: syncblink 1s steps(1) infinite; }
@keyframes syncblink { 50% { opacity: 0.2; } }
/* ── The cloud chip is a fixed-footprint status LIGHT, not a label ──────────────
   Its box is identical in every signed-in state, so a sync can never resize it and
   shove the dock sideways. State reads as colour + SHAPE (never colour alone — the
   BEAST theme recolours everything, and colour-blind users get nothing from hue);
   the words live on for screen readers, the tooltip and the account menu. */
#cloudHealth.cloud-light {
  position: relative;
  width: 34px; min-width: 34px; max-width: 34px;
  padding: 0; gap: 0; justify-content: center; flex: 0 0 auto;
}
/* readable by assistive tech, zero layout width (never display:none — that drops it
   out of the accessibility tree entirely) */
#cloudHealth.cloud-light .sync-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ≥44px hit target without growing the visible pill (mobile SOP #1) */
#cloudHealth.cloud-light::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
#cloudHealth.cloud-light .sync-dot {
  width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.55); border: 0;
}
/* Every state a DISTINCT SHAPE, so it reads without colour (the mono theme makes --accent ==
   ink, and BEAST recolours everything): filled dot / haloed dot / square / solid ring / dashed
   ring. No two share geometry. */
#cloudHealth[data-cloud="ok"] .sync-dot { background: var(--dot-ok); }                    /* synced — the SAME green as its panel row + its triad siblings */
/* SYNCING is an overlay: the dots KEEP their real colours; a soft accent ring pulses around the
   cloud dot and the whole dyad/triad slowly turns. (The dot used to repaint accent-dark — a
   mystery colour that answered nothing. Same status, currently refreshing.) */
#cloudHealth[data-syncing="1"] .sync-dot { animation: ringpulse 1.4s ease-in-out infinite; }
#cloudHealth[data-syncing="1"] .dt-spin { animation: dockorbit 3.2s linear infinite; }
@keyframes ringpulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.38); }
  50%      { box-shadow: 0 0 0 4.5px rgba(var(--ink-rgb), 0.10); }
}
@keyframes dockorbit { to { transform: rotate(360deg); } }
/* reduce-motion: no orbit, no pulse — a steady ring still says "refreshing" without motion */
@media (prefers-reduced-motion: reduce) {
  #cloudHealth[data-syncing="1"] .sync-dot { animation: none; box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.3); }
  #cloudHealth[data-syncing="1"] .dt-spin { animation: none; }
}
html[data-reduce-motion="1"] #cloudHealth[data-syncing="1"] .sync-dot { animation: none; box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.3); }
html[data-reduce-motion="1"] #cloudHealth[data-syncing="1"] .dt-spin { animation: none; }
#cloudHealth[data-cloud="err"] .sync-dot { background: var(--accent); border-radius: 2px; box-shadow: none; }   /* needs you — a SQUARE */
#cloudHealth[data-cloud="warn"] .sync-dot { background: transparent; border: 2px solid var(--accent); box-shadow: none; }   /* not done yet — SOLID ring */
#cloudHealth[data-cloud="off"] .sync-dot { background: transparent; border: 2px dashed rgba(var(--ink-rgb), 0.4); box-shadow: none; }   /* off by choice — DASHED ring (distinct from warn's solid) */
@keyframes cloudbreathe { 50% { opacity: 0.28; transform: scale(0.82); } }

/* ── The dock light is a TRIAD — three status dots (cloud apex · bank + server base) in a little
      triangle, right in the dock. The cloud dot is the existing .sync-dot (all its data-cloud shapes
      still apply); bank + server are .dt-dot siblings. Tapping spins them around the centre (WAAPI,
      reduce-motion-gated) then they settle back — a still triad that always shows all three states. */
#cloudHealth.cloud-light { width: 40px; min-width: 40px; max-width: 40px; }   /* room for the triad */
.dock-triad { position: relative; width: 26px; height: 22px; margin: 0 auto; flex: 0 0 auto; }
/* spin around the triangle's CENTROID (13, 12.5), not the box middle — otherwise the triad
   wobbles off-axis on the way round instead of turning cleanly in place */
.dt-spin { position: absolute; inset: 0; transform-origin: 50% 12.5px; }
#cloudHealth .dock-triad .sync-dot, .dock-triad .dt-dot {
  position: absolute; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; margin: 0;
}
/* A TRUE equilateral triad. Dot CENTRES: apex (13, 4.5) · base (6, 16.5) and (20, 16.5) —
   base 14px, legs 13.9px, so all three sides match within a tenth of a pixel and the shape
   sits centred in its box (so the spin rotates around the real middle, not a lopsided one).
   Positioned with calc(), never margin: the sizing rule above carries an #id and would win
   the specificity fight against a margin-based centring and shove the apex off-centre. */
.dock-triad .t-cloud  { top: 0;    left: calc(50% - 4.5px); }   /* apex */
.dock-triad .t-bank   { top: 12px; left: 1.5px; }               /* base-left */
.dock-triad .t-server { top: 12px; right: 1.5px; }              /* base-right */
/* DYAD — hosted web / demo have no desktop server, so the light is just cloud + bank side by
   side (vertically centred; dot centres at y=11 = the box middle, so the spin stays true). */
.dock-triad.dyad .t-server { display: none; }
.dock-triad.dyad .t-cloud  { top: 6.5px; left: 2.5px; }
.dock-triad.dyad .t-bank   { top: 6.5px; left: auto; right: 2.5px; }
.dock-triad.dyad .dt-spin  { transform-origin: 50% 50%; }
/* bank + server dots speak the SAME shape language as the cloud dot + the panel rows */
.dt-dot { background: rgba(var(--ink-rgb), 0.28); }
.dt-dot[data-s="ok"]   { background: var(--dot-ok); }                             /* healthy — filled */
/* unreachable today (bank/server never report "syncing") but kept so the triad speaks the FULL
   status language — a future in-progress bank pull lights up correctly instead of going blank */
.dt-dot[data-s="sync"] { background: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.22); animation: cloudbreathe 1.2s ease-in-out infinite; }
.dt-dot[data-s="warn"] { background: transparent; border: 2px solid var(--accent); }   /* attention — ring */
.dt-dot[data-s="err"]  { background: var(--accent); border-radius: 2px; }        /* needs you — square */
.dt-dot[data-s="off"]  { background: transparent; border: 2px dashed rgba(var(--ink-rgb), 0.4); }
.dt-dot[data-s="na"]   { background: rgba(var(--ink-rgb), 0.28); }               /* n/a — muted */
/* signed-out cloud dot: clearly muted, so it never looks like a healthy "synced" dot */
#cloudHealth[data-cloud="na"] .sync-dot { background: rgba(var(--ink-rgb), 0.28); box-shadow: none; }

/* ── The Dock (one cohesive bottom bar) ───────────────── */
.dock-bar {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 55;
  display: flex; justify-content: center; align-items: center; gap: 9px;
  padding: 0 8px; pointer-events: none;  /* full-width so nothing gets squeezed; clicks pass through the gaps */
}
.dock-bar > * { pointer-events: auto; }
/* sync sits in the bottom-right corner but stays vertically centered against the
   dock (same height/alignment as before) — absolute + margin:auto, no transform
   so the arcade press still works. The dock keeps centering on its own. */
.dock-bar > #syncHealth { position: absolute; right: 16px; top: 0; bottom: 0; margin: auto 0; z-index: 56; }
.dock-label {
  position: absolute; top: -15px; left: 4px;
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.26em; color: rgba(var(--ink-rgb), 0.32);
}
.dock {
  position: relative;
  display: flex; align-items: center; gap: 9px; padding: 9px 12px 11px;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--edge-soft);
  border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  flex: 0 0 auto; overflow: visible; flex-wrap: nowrap;
}
.dock-item { flex-shrink: 0; }
.dock-item.dock-dragging { opacity: 0.4; }
.dock .zoom-control { position: static; left: auto; bottom: auto; box-shadow: none; height: 32px; box-sizing: border-box; padding: 0 4px; }
#datetimeBtn { gap: 6px; }
#datetimeBtn .dt-time { font-weight: 600; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink); }
#datetimeBtn .dt-date { font-size: 10px; color: rgba(var(--ink-rgb), 0.55); text-transform: none; letter-spacing: 0; }
#periodBtn { gap: 6px; }
#periodBtn .period-text { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink); }
#periodBtn[aria-busy] { color: var(--accent); }

/* top stats bar — a HUD of live numbers, mirrors the dock's glass pill */
.stats-bar {
  position: fixed; left: 0; right: 0; top: 14px; z-index: 55;
  display: flex; justify-content: center; align-items: center;
  padding: 0 64px; pointer-events: none;  /* clear the corner toggles; clicks pass through gaps */
}
.stats-bar > * { pointer-events: auto; }
.stats {
  display: flex; align-items: stretch; gap: 2px; padding: 6px 8px;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--edge-soft);
  border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.stats::-webkit-scrollbar { display: none; }
.stat-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 3px 13px; border-radius: 11px; cursor: grab; flex: 0 0 auto;
  min-width: 58px;
}
.stat-chip + .stat-chip { border-left: 1px solid var(--edge-soft); border-radius: 0; }
.stat-chip:hover { background: rgba(var(--ink-rgb), 0.05); }
.stat-chip.stat-dragging { opacity: 0.4; }
.stat-val {
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap; line-height: 1.1;
}
.stat-val.t-exp { color: var(--accent); }
.stat-val.t-ok { color: #3f8f4e; }
.stat-val.t-warn { color: #b9842c; }
.stat-val.t-bad { color: #c9542e; }
.stat-label {
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.45); white-space: nowrap;
}

/* King Cozy bar — founder-only second stats layer: a minimalist gold-tinted pill,
   stacked just below the personal pill. (No cartridge/slot/plug — kept simple.) */
.king-bar { top: 60px; z-index: 56; }
.king-stats {
  cursor: pointer; align-items: center;
  border-color: rgba(201, 162, 39, 0.6);
  background: rgba(201, 162, 39, 0.16);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15), 0 3px 16px rgba(201, 162, 39, 0.16);  /* soft gold halo */
}
.king-stats:hover { border-color: rgba(201, 162, 39, 0.9); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25), 0 4px 20px rgba(201, 162, 39, 0.22); }
.king-crown { font-size: 13px; padding: 0 6px 0 4px; line-height: 1; align-self: center; }
.king-stats .stat-chip { cursor: pointer; }
.king-stats .stat-val { color: #c9a227; }
.king-stats .stat-chip + .stat-chip { border-left-color: rgba(201, 162, 39, 0.28); }
.king-stats .stat-chip:hover { background: rgba(201, 162, 39, 0.13); }

/* period chip on each span widget's title bar */
.w-period {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(var(--ink-rgb), 0.07); color: rgba(var(--ink-rgb), 0.5);
  white-space: nowrap; flex-shrink: 0;
}

/* period selector popover (opens above the dock) */
/* ── the connection panel — the cloud dot's tap menu (sync / bank / server + account) ── */
.acct-menu {
  /* Above the full-screen profile/settings surfaces (.daily-space is 100001) so
     "Switch account" opens IN FRONT of the profile, not hidden behind it. */
  position: fixed; z-index: 100050; min-width: 248px; max-width: min(330px, calc(100vw - 16px));
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.am-who {
  font-size: 11px; color: rgba(var(--ink-rgb), 0.6); padding: 8px 10px 9px;
  border-bottom: 1px solid var(--edge-soft); margin-bottom: 5px; overflow-wrap: anywhere;
}
.am-who b { color: var(--ink); font-weight: 600; }
/* the three status rows — each a colour+SHAPE light + a plain-English line */
.cs-rows { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.cs-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 6px 10px; border-radius: 9px; text-align: left;
}
button.cs-row { border: 1px solid transparent; background: none; cursor: pointer; font-family: inherit; color: var(--ink); }
button.cs-row:hover { background: rgba(var(--ink-rgb), 0.06); }
.cs-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cs-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.cs-sub { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.55); line-height: 1.3; overflow-wrap: anywhere; }
.cs-go { width: 14px; height: 14px; opacity: 0.4; flex: none; }
/* the status light — mirrors the cloud dot's shape language so colour is never the only signal:
   filled dot / haloed dot / square / solid ring / dashed ring / muted dot. No two share geometry. */
.cs-dot { width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; flex: none; background: rgba(var(--ink-rgb), 0.3); }
.cs-dot[data-s="ok"] { background: var(--dot-ok); }                                                 /* healthy — green filled dot */
.cs-dot[data-s="sync"] { background: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.22); animation: cloudbreathe 1.2s ease-in-out infinite; }  /* working — haloed + breathing */
.cs-dot[data-s="err"] { background: var(--accent); border-radius: 2px; }                            /* needs you — a SQUARE */
.cs-dot[data-s="warn"] { background: transparent; border: 2px solid var(--accent); }                /* attention — SOLID ring */
.cs-dot[data-s="off"] { background: transparent; border: 2px dashed rgba(var(--ink-rgb), 0.4); }    /* off by choice — DASHED ring */
.cs-dot[data-s="na"] { background: rgba(var(--ink-rgb), 0.28); }                                    /* not applicable — muted dot */
.am-sep { height: 1px; background: var(--edge-soft); margin: 5px 2px; }
.am-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 44px; text-align: left; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 9px; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
}
.am-item:hover { background: rgba(var(--ink-rgb), 0.06); }
.am-item svg { width: 15px; height: 15px; opacity: 0.75; flex: none; }
.am-out { color: #c9542e; }
.am-out svg { opacity: 0.9; }

.period-menu {
  position: fixed; z-index: 80; width: 232px; max-height: 60vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); padding: 8px;
}
.pm-group { display: flex; flex-direction: column; gap: 3px; }
.pm-label {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(var(--ink-rgb), 0.34); padding: 9px 6px 4px;
}
.pm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 7px 10px; border: 1px solid transparent;
  border-radius: 9px; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--ink);
}
.pm-item:hover { background: rgba(var(--ink-rgb), 0.06); }
.pm-item.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pm-net { font-size: 10px; font-variant-numeric: tabular-nums; }
.pm-net.pos { color: #3f8f4e; }
.pm-net.neg { color: #c9542e; }
.pm-empty { font-size: 11px; color: rgba(var(--ink-rgb), 0.45); padding: 6px 8px; }
.pm-custom { display: flex; align-items: center; gap: 5px; padding: 2px 4px 6px; }
.pm-custom input[type="date"] { flex: 1; min-width: 0; font-family: inherit; font-size: 10.5px; padding: 4px 5px;
  border: 1px solid var(--edge); border-radius: 7px; background: var(--paper); color: var(--ink); }
.pm-custom input[type="date"]:focus { outline: none; border-color: var(--accent); }
.pm-dash { color: rgba(var(--ink-rgb), 0.4); flex-shrink: 0; }
.pm-apply { flex-shrink: 0; border: 1px solid var(--accent); background: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: 10px; padding: 4px 9px; border-radius: 999px; }
.pm-apply:hover { background: var(--accent); color: var(--paper); }

.sources-panel {
  position: fixed; bottom: 80px; left: 50%; right: auto; margin-left: -130px; z-index: 56; width: 260px;
  max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px; padding: 14px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
  transform: translateY(10px); opacity: 0; pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.sources-panel.open { transform: none; opacity: 1; pointer-events: auto; }
a.src-link { text-decoration: none; color: inherit; }
a.src-link:hover .src-bankname { color: var(--accent); }
.src-subtitle {
  margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--edge-soft);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(var(--ink-rgb), 0.4);
}
.src-log { font-size: 10px; color: rgba(var(--ink-rgb), 0.55); padding: 2px 0; font-variant-numeric: tabular-nums; }

/* ── jogger: goofy jointed cowboy hovering above the pills ── */
.jogger {
  position: fixed; bottom: 60px; right: 62px; z-index: 54;
  width: 70px; height: 76px; pointer-events: none; opacity: 0.96;
  animation: jog-hover 3.6s ease-in-out infinite;
}
@keyframes jog-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.src-title { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); margin-bottom: 10px; }
.src-bank { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.src-bankdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 4px; flex-shrink: 0; }
.src-bankname { font-size: 12px; color: var(--ink); }
.src-accts { font-size: 10px; color: rgba(var(--ink-rgb), 0.5); margin-top: 2px; line-height: 1.4; }
.src-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--edge-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.45); }
.src-auto { display: inline-block; margin-top: 4px; text-transform: none; letter-spacing: 0; color: #3f8f4e; }

/* status pill + next-actions panel */
.status-main { max-width: 240px; }
.status-main .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f8f4e; flex-shrink: 0; }
.status-main[data-sev="1"] .status-dot { background: #d6920f; }
.status-main[data-sev="2"] .status-dot { background: #c9542e; }
.status-main .status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-panel { z-index: 57; }
.status-action {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--ink); padding: 7px 4px; border-radius: 8px;
  border-bottom: 1px solid var(--edge-soft);
}
.status-action:last-child { border-bottom: none; }
.status-action:hover { background: rgba(var(--ink-rgb), 0.05); }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #8a8f73; }
.sa-dot.sev1 { background: #d6920f; }
.sa-dot.sev2 { background: #c9542e; }
.status-clear { font-size: 12px; color: rgba(var(--ink-rgb), 0.55); padding: 6px 2px; }

/* sync = chunky green arcade button: cutout text, 3D side, depresses on press */
#syncHealth {
  background: #34b85a; border: none; color: var(--paper); font-weight: 800; letter-spacing: 0.03em;
  box-shadow: 0 3px 0 #1d7d39, 0 4px 7px rgba(0, 0, 0, 0.2);
  transition: transform 0.07s ease, box-shadow 0.07s ease, background 0.15s ease;
}
#syncHealth:hover { background: #3ac463; }
#syncHealth:active { transform: translateY(3px); box-shadow: 0 0 0 #1d7d39, 0 1px 3px rgba(0, 0, 0, 0.2); }
#syncHealth .sync-text { color: var(--paper); }

/* backend heartbeat — a plain dot: steady when live, dimmed accent when not */
.server-pill .server-dot {
  width: 9px; height: 9px; margin-right: 6px; flex-shrink: 0; display: inline-block;
  border-radius: 50%; background-color: var(--ink);
}
.server-pill[data-state="live"] .server-dot { background-color: #3f8f4e; }
.server-pill[data-state="down"], .server-pill[data-state="stale"] { color: var(--accent); }
.server-pill[data-state="down"] .server-dot, .server-pill[data-state="stale"] .server-dot {
  background-color: var(--accent); opacity: 0.6;
}

/* subscription detail / rename */
.subd-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.subd-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: rgba(var(--ink-rgb), 0.55); text-transform: uppercase; letter-spacing: 0.08em; }
.subd-input {
  font-family: inherit; font-size: 15px; color: var(--ink); padding: 8px 10px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--paper);
  text-transform: none; letter-spacing: normal;
}
.subd-input:focus { outline: none; border-color: var(--accent); }
.subd-note { font-size: 11px; font-style: italic; color: rgba(var(--ink-rgb), 0.5); }
.subd-meta { font-size: 12px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.subd-k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.4); min-width: 72px; flex-shrink: 0; }
.subd-meta code { font-size: 11px; background: rgba(var(--ink-rgb), 0.06); padding: 1px 6px; border-radius: 5px; }
.subd-descs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.subd-descs li { font-size: 11px; color: rgba(var(--ink-rgb), 0.6); }
.subd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.subd-save, .subd-reset { font-family: inherit; font-size: 12px; padding: 7px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--edge); background: none; color: var(--ink); }
.subd-save { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.subd-reset { color: rgba(var(--ink-rgb), 0.5); }

/* bug reports */
.bug-new { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--edge-soft); }
.bug-input {
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 56px; line-height: 1.4;
}
.bug-input:focus { outline: none; border-color: var(--accent); }
.bug-types { display: flex; gap: 6px; }
.bug-type {
  font-family: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--paper);
  color: rgba(var(--ink-rgb), 0.7);
}
.bug-type.on { background: var(--accent); color: var(--paper); border-color: var(--accent); font-weight: 600; }
.bug-email {
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px;
}
.bug-email:focus { outline: none; border-color: var(--accent); }
.bug-msg { font-size: 12px; min-height: 16px; color: rgba(var(--ink-rgb), 0.55); }
.bug-msg.ok { color: #3f8f4e; }
.bug-msg.err { color: #c9542e; }
/* transparent "update available" preview modal */
.upd-body { padding: 12px 16px 16px; }
.upd-lead { font-size: 13px; color: var(--ink); margin-bottom: 10px; line-height: 1.5; }
.upd-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.5); margin: 8px 0 4px; }
.upd-changes { margin: 0 0 12px; padding-left: 18px; }
.upd-changes li { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.85); line-height: 1.5; margin-bottom: 3px; }
.upd-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: rgba(var(--ink-rgb), 0.6); margin-bottom: 6px; }
.upd-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.upd-stat { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.upd-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.upd-actions button { font-family: inherit; font-size: 12px; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); }
.upd-go { background: var(--accent); color: var(--paper); border-color: var(--accent); font-weight: 600; }
.upd-skip { color: rgba(var(--ink-rgb), 0.6); }
.upd-skip:hover { border-color: #c9542e; color: #c9542e; }
.upd-note { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.45); margin-top: 10px; line-height: 1.5; }
.bug-submit {
  align-self: flex-end; font-family: inherit; font-size: 12px; padding: 7px 16px;
  border-radius: 8px; cursor: pointer; background: var(--ink); color: var(--paper); border: none;
}
.bug-list { gap: 2px; }
.bug-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--edge-soft); }
.bug-row:last-child { border-bottom: none; }
.bug-check { border: none; background: none; cursor: pointer; color: var(--accent); font-size: 14px; line-height: 1.3; flex-shrink: 0; padding: 0; }
.bug-text { flex: 1; color: var(--ink); line-height: 1.45; word-break: break-word; }
.bug-del { border: none; background: none; cursor: pointer; color: rgba(var(--ink-rgb), 0.3); font-size: 11px; flex-shrink: 0; padding: 0 2px; }
.bug-del:hover { color: #c9542e; }
.bug-row.solved .bug-text { text-decoration: line-through; color: rgba(var(--ink-rgb), 0.4); }
.bug-row.solved .bug-check { color: #3f8f4e; }
/* per-report "credit this to my cache" opt-in — whole row is the tap target (≥44px) */
.bug-credit {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: 11.5px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.65);
  padding: 6px 2px; min-height: 44px; box-sizing: border-box;
}
.bug-credit b { color: var(--ink); font-weight: 600; }
.bug-credit input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
/* "fixed — thanks to you" celebration card (calm, never a red alert) */
.bugfix-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.bugfix-lead { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.bugfix-row { border: 1px solid var(--edge-soft); border-radius: 10px; padding: 10px 12px; background: rgba(var(--ink-rgb), 0.03); }
.bugfix-what { font-size: 12.5px; color: var(--ink); line-height: 1.5; word-break: break-word; }
.bugfix-note { font-size: 12px; color: rgba(var(--ink-rgb), 0.6); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--edge-soft); word-break: break-word; }
.bugfix-exp { font-size: 12px; color: var(--accent); font-weight: 600; line-height: 1.5; }

/* "What's changed" — the news that opens itself on login / when an update lands */
.wcn-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 70vh; }
.wcn-lead { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.wcn-row { border: 1px solid var(--edge-soft); border-radius: 10px; padding: 10px 12px; background: rgba(var(--ink-rgb), 0.03); }
.wcn-row-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; word-break: break-word; }
.wcn-row-body { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.72); line-height: 1.55; margin-top: 5px; word-break: break-word; }
.wcn-row-date { font-size: 10.5px; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.45); margin-top: 7px; }
.wcn-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.wcn-ok {
  font-family: inherit; font-size: 12.5px; min-height: 44px; padding: 8px 20px;
  border-radius: 10px; cursor: pointer; border: 1px solid var(--edge);
  background: var(--ink); color: var(--paper);
}
.wcn-ok:hover { border-color: var(--accent); }

/* subscription name as a clickable button */
button.cf-cat { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; text-align: left; }
button.cf-cat:hover { color: var(--accent); text-decoration: underline; }

/* months history */
.mo-list { gap: 20px; scrollbar-gutter: stable; padding-right: 4px; }
/* thin, subtle scrollbar so it never crowds the numbers */
.bd-list::-webkit-scrollbar { width: 7px; }
.bd-list::-webkit-scrollbar-track { background: transparent; }
.bd-list::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.2); border-radius: 999px; }
.bd-list { scrollbar-width: thin; scrollbar-color: rgba(var(--ink-rgb), 0.2) transparent; }
.mo-row { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--edge-soft); }
.mo-row:last-child { border-bottom: none; padding-bottom: 0; }
.mo-top { display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; }
.mo-top:hover .mo-label { color: var(--accent); }
.mo-label { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.mo-net { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mo-bar-row { display: flex; align-items: center; gap: 9px; }
.mo-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; width: 24px; flex-shrink: 0; }
.mo-in-tag { color: #3f8f4e; }
.mo-out-tag { color: #c9542e; }
.mo-track { flex: 1; height: 18px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.07); overflow: hidden; min-width: 0; }
.mo-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.mo-fill.mo-in { background: #3f8f4e; }
.mo-fill.mo-out { background: #c9542e; }
.mo-val { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); width: 66px; text-align: right; flex-shrink: 0; }
.mo-detail { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.mo-detail:empty { display: none; }
.mo-cat { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.mo-cat-name { width: 72px; flex-shrink: 0; color: rgba(var(--ink-rgb), 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-cat-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.08); overflow: hidden; }
.mo-cat-fill { display: block; height: 100%; border-radius: 999px; }
.mo-cat-amt { width: 52px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.mo-empty { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.mo-src { font-size: 9.5px; color: rgba(var(--ink-rgb), 0.4); letter-spacing: 0.04em; }

/* data coverage (in the sources panel) */
.cov-live { font-size: 11px; color: var(--ink); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.cov-note { font-size: 10px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.5); margin: 0 0 10px; }
.cov-note b { color: rgba(var(--ink-rgb), 0.8); font-weight: 600; }
.cov-row { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; }
.cov-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: #3f8f4e; }
.cov-dot.cov-imported { background: #d6920f; }
.cov-dot.cov-mixed { background: #6a4bc4; }
.cov-name { font-size: 12px; color: var(--ink); }
.cov-meta { font-size: 10px; color: rgba(var(--ink-rgb), 0.5); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* ── footer ─────────────────────────────────────── */
.foot {
  position: fixed; bottom: 16px; left: 0; right: 0; text-align: center;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px;
  color: rgba(var(--ink-rgb), 0.3); pointer-events: none;
}

/* The custom "jelly ball" cursor was REMOVED 2026-07-17. It was drawn by JS at a position
   that ignored the board's zoom/transform, so it drifted further from the real pointer the
   further you moved from the origin — every aim was a lie — and it dented buttons inward on
   press, shrinking already-small targets. The OS cursor is the only thing guaranteed to be
   where clicks land, and it is what screen readers, switch access, magnifiers and pointer
   utilities expect. Standard cursors only from here (pointer/grab/text). */
.lib-item, .menu-item, .icon-cell, .widget-close, .widget-color,
.sticker-close, .sidebar-toggle, .sidebar-close {
  transition: background 0.14s ease, color 0.14s ease;
}

/* ════════════ Mobile: the freeform board becomes one scroll of full-width widgets ════════════ */
@media (max-width: 640px) {
  /* iOS Safari zooms the whole viewport when you focus an input whose font-size is under
     16px. We're already in mobile layout — that auto-zoom is just jarring. Force every
     text field to 16px at phone width so tapping one never zooms. (Range/checkbox/radio
     are excluded — font-size is irrelevant there — and pinch-zoom stays available, so
     this doesn't cost accessibility.) */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
  .board { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }   /* our pull-to-sync owns the top edge, not the browser's reload */
  .board-canvas {
    position: static !important; transform: none !important;
    width: 100% !important; height: auto !important; min-height: 100%;
    display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
    padding: calc(58px + env(safe-area-inset-top)) 10px calc(94px + env(safe-area-inset-bottom));
  }
  /* every widget: full width, natural height, no absolute positioning or transforms */
  .widget {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; min-height: 88px;
    transform: none !important; flex: 0 0 auto;
    container-type: inline-size !important;   /* width-based container queries keep working with auto height */
  }
  /* the help-card faces are absolute for the 3-D flip, which zeroes intrinsic
     height — in the stack, put the front face back in flow so every widget gets
     its natural height, and show "how this is calculated" as an overlay instead
     of a flip (the flip's rotate would mirror a static face) */
  .widget-flip { transform: none !important; transform-style: flat; }
  .widget-face.face-front { position: static; }
  .widget-face.face-back { transform: none; display: none; }
  .widget.flipped .widget-face.face-back { display: flex; position: absolute; inset: 0; z-index: 3; }
  .widget-resize { display: none !important; }   /* no resizing on touch */
  .sticker { display: none !important; }          /* hide free-floating decor in a stack */
  .zoom-control { display: none !important; }     /* no zoom in stack mode */
  /* SVG-chart widgets need an explicit height (height:100% collapses inside an auto-height stack) */
  .if-chart { height: 150px !important; flex: none !important; }
  .af-wrap  { height: 300px !important; flex: none !important; }

  /* floating chrome: keep it, fit the narrow screen, scroll if crowded */
  /* one grid line across the top: [+] · stats strip · [☰] — the strip sits
     BETWEEN the corner buttons instead of sliding under them */
  .stats-bar { top: 0; padding: calc(6px + env(safe-area-inset-top)) 56px 0; }
  /* one cohesive top row: the ＋, the stats strip, and the ☰ share a height so they
     read as separate pieces of the same row (the strip is two-line, so match UP to it —
     also a chunkier 44px touch target, per the mobile SOP). */
  .sidebar-toggle, .pages-toggle { top: calc(6px + env(safe-area-inset-top)); width: 44px; height: 44px; }
  .king-bar { top: calc(34px + env(safe-area-inset-top)); padding-top: 0; }   /* cartridge tucks into the slot on phones too */
  .stats { max-width: 100%; }
  .dock-bar { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  /* the dock SHRINKS and scrolls beside the sync pill — together they always fit
     the screen (before, the dock alone could take 100vw and push sync off-edge) */
  .dock { flex: 0 1 auto; min-width: 0; max-width: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  /* ── Mobile: the deck is THE button. Everything else steps back — the dock's
     pills hide by default, sync lives in the hamburger menu (pull-down-to-sync
     covers the quick case), and the bottom of the screen holds exactly one thing
     to remember. Settings → "Show the dock on this phone" (data-dockmobile on
     <html>, per-device) brings the pills + status chips back. ── */
  /* hide every dock pill EXCEPT the deck button. (Was two rules where the hide rule
     out-specified the show rule — 0,3,1 vs 0,3,0 — so the deck button, the ONE thing
     that must survive on mobile, was itself hidden. Excluding it from the hide selector
     removes the specificity fight entirely.) */
  html:not([data-dockmobile]) .dock .dock-item:not([data-dock="daily"]):not([data-dock="cal"]):not([data-dock="msg"]):not([data-dock="fin"]) { display: none !important; }
  .dock .dock-item[data-dock="daily"], .dock .dock-item[data-dock="cal"], .dock .dock-item[data-dock="msg"], .dock .dock-item[data-dock="fin"] { display: inline-flex !important; }
  html:not([data-dockmobile]) .dock { background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; overflow: visible; }
  .dock-label { display: none; }
  .dock-bar { justify-content: center; }
  /* #cloudHealth is a normal dock item now, so the generic non-pinned rule above already
     hides it on phones unless dockMobile is opted in — only sync is still a .dock-bar child */
  html:not([data-dockmobile]) .dock-bar > #syncHealth { display: none !important; }
  /* the ＋ action button: big, and center-bottom (the dock-bar already centers it on mobile) */
  .ledger-pill.deck-cta { width: 64px; height: 64px; min-height: 64px; }
  .ledger-pill.deck-cta .deck-plus { font-size: 42px; }
  .ledger-pill.cal-cta { width: 64px; height: 64px; min-height: 64px; }   /* the calendar peer matches the ＋ size on mobile */
  .ledger-pill.cal-cta svg { width: 30px; height: 30px; }
  .ledger-pill.msg-cta { width: 64px; height: 64px; min-height: 64px; }   /* the messages peer matches the ＋ size on mobile */
  .ledger-pill.msg-cta svg { width: 30px; height: 30px; }
  .ledger-pill.fin-cta { width: 64px; height: 64px; min-height: 64px; }   /* the finances peer matches too */
  .ledger-pill.fin-cta svg { width: 30px; height: 30px; }
  .sidebar { width: min(92vw, 360px); }
  /* the closed sidebar is transform-parked past the right edge; iOS Safari treats
     that off-canvas chrome as zoomable dead space (the "loads zoomed in" bug) —
     hide it fully when closed, flip visible the instant it opens */
  .sidebar { visibility: hidden; transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.34s; }
  body.sidebar-open .sidebar { visibility: visible; transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  /* width-based container sizing loses the height brake on cqmin type — cap the
     hero numbers so a nowrap clock can't inflate past the widget edge */
  .widget-body .big { font-size: clamp(20px, 9vw, 40px); }
}

/* the connection panel becomes a full-width bottom sheet on phones (mobile SOP #7). JS sets
   inline left/bottom/top against the dot, so override with !important. Tap-outside still dismisses. */
@media (max-width: 480px) {
  .acct-menu {
    left: 8px !important; right: 8px !important; top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    min-width: 0; max-width: none; width: auto; border-radius: 16px; padding: 10px;
  }
}

/* touch devices of any size: reveal controls desktop only shows on hover */
@media (hover: none) {
  .sticker-close, .sticker-magnet, .widget-resize { opacity: 1; }
}

/* ── THE CALENDAR surface (Brick 1) — a full-screen lens over your dated life. Reuses
   .daily-space (fixed, flex column) + .daily-top + .daily-icn + .td-seg. Own a query
   container so a narrow surface (a phone) collapses month cells to calm dots. ── */
.cal-space { container: cal / inline-size; }
.cal-titlewrap { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.cal-nav { width: 44px; height: 44px; min-width: 44px; border: none; background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 11px; flex: 0 0 auto; }
.cal-nav:hover { background: rgba(var(--ink-rgb), 0.07); }
.cal-title { font-size: 16px; font-weight: 600; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-today { flex: 0 0 auto; height: 40px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 20px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.cal-today:hover { border-color: var(--accent); }
.cal-viewbar { display: flex; justify-content: center; padding: 4px 14px 8px; flex: 0 0 auto; }
.cal-seg { max-width: 100%; }
.cal-headright { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cal-gear { font-size: 17px; }
.cal-gear.on { color: var(--accent); background: rgba(var(--ink-rgb), 0.06); }
.cal-settings { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto 4px; padding: 8px 14px 12px; box-sizing: border-box; }
.cal-setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-setlbl { font-size: 13px; color: rgba(var(--ink-rgb), 0.7); }
.cal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 940px; margin: 0 auto; box-sizing: border-box; padding: 2px 10px calc(16px + env(safe-area-inset-bottom)); }
/* endless-scroll (∞) mode: stacked period sections, each with a sticky label */
.cal-inf-btn { font-size: 20px; line-height: 1; }
.cal-inf-btn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 10px; }
/* the $ layer toggle — a plain bold dollar sign, dim when off, tinted accent when on */
.cal-fin-btn { font-size: 17px; font-weight: 700; line-height: 1; opacity: 0.55; }
.cal-fin-btn.on { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 10px; }
.cal-body-inf .cal-month { min-height: 0; }
.cal-body-inf .cal-day, .cal-body-inf .cal-week { padding-top: 0; }
.cal-inf-sec + .cal-inf-sec { border-top: 1px solid var(--edge-soft); }
.cal-inf-h { position: sticky; top: 0; z-index: 3; background: var(--paper); padding: 9px 2px 6px; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }

/* month grid */
.cal-month { min-height: 100%; display: flex; flex-direction: column; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 2px 6px; }
.cal-dow span { text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.cal-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(58px, 1fr); gap: 4px; }
.cal-cell { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; min-width: 0; min-height: 58px; padding: 4px 4px 5px; border: 1px solid var(--edge-soft); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; cursor: pointer; overflow: hidden; transition: border-color 0.12s; }
.cal-cell:hover { border-color: var(--edge); }
.cal-cell.other { opacity: 0.42; }
.cal-daynum { font-size: 12.5px; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
.cal-cell.today .cal-daynum { background: var(--accent); color: var(--paper); }
.cal-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 11px; line-height: 1.35; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 15%, transparent); white-space: nowrap; overflow: hidden; }
.cal-chip.event { background: color-mix(in srgb, var(--cal-event) 16%, transparent); }
.cal-chip.session { background: color-mix(in srgb, var(--cal-session) 22%, transparent); font-weight: 600; }
.cal-chip.spend { background: color-mix(in srgb, var(--cal-spend) 16%, transparent); }
.cal-chip.task { background: color-mix(in srgb, var(--cal-task) 15%, transparent); }
.cal-chip.routine { background: color-mix(in srgb, var(--cal-routine) 14%, transparent); }
.cal-chip.habit { background: color-mix(in srgb, var(--cal-habit) 15%, transparent); }
.cal-chip.done { opacity: 0.5; text-decoration: line-through; }
.cal-chip .ci-em { flex: 0 0 auto; }
.cal-chip .ci-tx { overflow: hidden; text-overflow: ellipsis; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.75; flex: 0 0 auto; }
.cal-dot-i { background: rgba(var(--ink-rgb), 0.55); opacity: 1; }
.cal-more { font-size: 10.5px; color: rgba(var(--ink-rgb), 0.55); padding-left: 2px; }
.cal-dotsrow { display: none; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }

/* day agenda */
.cal-day { width: 100%; max-width: 560px; margin: 0 auto; padding-top: 4px; }
.cal-addevent { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 2px 0 10px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 22px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font-family: inherit; font-size: 13.5px; cursor: pointer; }
.cal-addevent:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cal-addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cal-addsession { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 2px 0 10px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 22px; background: var(--accent); color: var(--paper); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cal-addsession:hover { filter: brightness(1.06); }
.cal-agenda { display: flex; flex-direction: column; gap: 6px; }
.cal-arow { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 8px 14px; border: 1px solid var(--edge-soft); border-radius: 13px; background: var(--panel); color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s; }
.cal-arow:hover { border-color: var(--accent); }
.cal-arow.done { opacity: 0.6; }
.cal-arow.done .cal-arow-tx { text-decoration: line-through; }
.cal-arow-em { flex: 0 0 auto; font-size: 20px; }
.cal-arow-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; }
.cal-arow-sub { font-size: 11.5px; color: rgba(var(--ink-rgb), 0.55); }
.cal-arow-go { flex: 0 0 auto; color: var(--accent); font-size: 18px; }
/* Calendar item TYPES — one colour + a text label per kind (fixed hues so they read on every theme) */
:root { --cal-event: #4a86c9; --cal-session: #d18b2c; --cal-task: #4fa05e; --cal-routine: #8a6fc9; --cal-habit: #3fa79b; --cal-spend: #c0566b; }
.cal-type { flex: 0 0 auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.cal-type[data-type="event"]   { background: color-mix(in srgb, var(--cal-event) 16%, transparent);   color: var(--cal-event); }
.cal-type[data-type="session"] { background: color-mix(in srgb, var(--cal-session) 18%, transparent); color: var(--cal-session); }
.cal-type[data-type="task"]    { background: color-mix(in srgb, var(--cal-task) 16%, transparent);    color: var(--cal-task); }
.cal-type[data-type="routine"] { background: color-mix(in srgb, var(--cal-routine) 16%, transparent); color: var(--cal-routine); }
.cal-type[data-type="habit"]   { background: color-mix(in srgb, var(--cal-habit) 16%, transparent);   color: var(--cal-habit); }
.cal-type[data-type="spend"]   { background: color-mix(in srgb, var(--cal-spend) 16%, transparent);   color: var(--cal-spend); }
.cal-arow[data-type="event"]   { box-shadow: inset 3px 0 0 var(--cal-event); }
.cal-arow[data-type="session"] { box-shadow: inset 3px 0 0 var(--cal-session); }
.cal-arow[data-type="task"]    { box-shadow: inset 3px 0 0 var(--cal-task); }
.cal-arow[data-type="routine"] { box-shadow: inset 3px 0 0 var(--cal-routine); }
.cal-arow[data-type="habit"]   { box-shadow: inset 3px 0 0 var(--cal-habit); }
.cal-arow[data-type="spend"]   { box-shadow: inset 3px 0 0 var(--cal-spend); }
.cal-empty { padding: 40px 16px; text-align: center; }
/* check a task off in place (day + week agendas) — a 40px tap target around a 22px circle */
.cal-check { position: relative; width: 40px; height: 40px; min-width: 40px; border: none; background: none; cursor: pointer; flex: 0 0 auto; padding: 0; }
.cal-check::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border: 2px solid var(--edge); border-radius: 50%; box-sizing: border-box; transition: background 0.12s, border-color 0.12s; }
.cal-check.on::before { background: var(--accent); border-color: var(--accent); }
.cal-check.on::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: var(--paper); }
/* week view — a calm stacked 7-day agenda (same on desktop + phone; no cramped columns) */
.cal-week { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.cal-wday { border-top: 1px solid var(--edge-soft); padding-top: 6px; }
.cal-wday.today { border-top-color: var(--accent); }
.cal-wday-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; border: none; background: none; color: var(--ink); font-family: inherit; cursor: pointer; padding: 0 2px 4px; text-align: left; }
.cal-wday-head:hover .cal-wday-dow { color: var(--accent); }
.cal-wday-dow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.55); }
.cal-wday-num { font-size: 15px; font-weight: 600; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0 5px; }
.cal-wday.today .cal-wday-num { background: var(--accent); color: var(--paper); }
/* the day's projected money, on its header: bills out (red), paydays in (green). Wraps
   rather than squeezing the date, so a narrow column never overflows its own box. */
.cal-wfin { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; min-width: 0; }
.cal-wfin b { font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; padding: 1px 6px; border-radius: 7px; }
.cal-wfin b.neg { color: var(--cal-spend); background: color-mix(in srgb, var(--cal-spend) 13%, transparent); }
.cal-wfin b.pos { color: var(--dot-ok); background: color-mix(in srgb, var(--dot-ok) 15%, transparent); }
.cal-wrows { display: flex; flex-direction: column; gap: 6px; }
.cal-wempty { color: rgba(var(--ink-rgb), 0.3); font-size: 20px; line-height: 1; padding: 0 6px 4px; }

/* narrow (a phone, or a shrunk surface): month cells become calm dots — tap a day for the list */
@container cal (max-width: 560px) {
  .cal-body { padding-left: 6px; padding-right: 6px; }
  .cal-grid { gap: 3px; grid-auto-rows: minmax(50px, 1fr); }
  .cal-cell { align-items: center; gap: 4px; padding: 4px 2px; }
  .cal-items { display: none; }
  .cal-dotsrow { display: flex; }
  .cal-dow span { font-size: 10px; }
}

/* ── The DECK's date scrollwheel — the deck is a date-dependent scroller (Cozy 2026-07-15).
   A snap-centered horizontal wheel of days at the bottom; the centered day is selected.
   Yesterday / today / tomorrow are the primary three. Browsing a non-today day greys the
   body (still fully editable) so it's unmistakable. ── */
.deck-daybar { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge-soft); background: var(--paper); }
.deck-wheel-nav { flex: 0 0 auto; width: 40px; height: 44px; border: none; background: none; color: rgba(var(--ink-rgb), 0.5); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 10px; }
.deck-wheel-nav:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
.deck-wheel { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2px calc(50% - 30px); scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.deck-wheel::-webkit-scrollbar { display: none; }
.deck-day { flex: 0 0 auto; scroll-snap-align: center; width: 60px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; border-radius: 13px; background: none; color: rgba(var(--ink-rgb), 0.5); font-family: inherit; cursor: pointer; transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), color 0.14s, background 0.14s, border-color 0.14s; }
.deck-day-rel { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; }
.deck-day-num { font-size: 20px; font-weight: 600; line-height: 1.05; }
.deck-day-mon { font-size: 9.5px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.03em; }
.deck-day.on { color: var(--ink); background: var(--panel); border-color: var(--edge); transform: scale(1.12); }
.deck-day.on .deck-day-num { color: var(--accent); }
.deck-day.istoday:not(.on) .deck-day-rel { color: var(--accent); }
.deck-today-jump { position: absolute; top: -34px; right: 12px; height: 30px; padding: 0 13px; border: 1px solid var(--accent); border-radius: 16px; background: var(--paper); color: var(--accent); font-family: inherit; font-size: 12px; cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.16s, transform 0.16s; box-shadow: 0 3px 12px rgba(var(--ink-rgb), 0.16); }
.deck-today-jump.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.deck-space.deck-not-today .deck-sp-scroll { opacity: 0.6; filter: grayscale(0.4); transition: opacity 0.18s, filter 0.18s; }
/* ─────────────────────────────────────────────────────────────────────────
   FORMS — build-your-own data-intake templates + their submissions.
   Widget (library), full-screen home, designer, filler, document import.
   Theme vars only; ≥44px touch targets; container-fluid (mobile SOP).
   ───────────────────────────────────────────────────────────────────────── */
.is-forms { display: flex; flex-direction: column; }
.frm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.frm-row { display: flex; align-items: stretch; gap: 6px; }
.frm-fill { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 46px; padding: 8px 12px; border: 1px solid var(--edge-soft); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.frm-fill:hover { border-color: var(--accent); }
.frm-emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.frm-nm { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.frm-nm-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frm-meta { font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.frm-ic { width: 44px; flex: 0 0 auto; border: 1px solid var(--edge-soft); border-radius: 12px; background: var(--panel);
  color: rgba(var(--ink-rgb), 0.55); font-size: 15px; cursor: pointer; transition: border-color .12s, color .12s; }
.frm-ic:hover { border-color: var(--accent); color: var(--ink); }
.frm-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px 14px; font-size: 12.5px; line-height: 1.5; }
.frm-foot { flex: 0 0 auto; display: flex; gap: 8px; margin-top: 6px; }
.frm-btn { flex: 1 1 auto; min-height: 44px; border: none; border-radius: 12px; background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.frm-btn.ghost { background: var(--panel); color: var(--ink); border: 1.5px solid var(--edge); }

/* full-screen forms home (deck / phone path) */
.forms-home .frm-list { max-width: 560px; margin: 0 auto; width: 100%; }
.forms-home .frm-foot { max-width: 560px; margin: 14px auto 0; width: 100%; }
.forms-home .frm-btn { min-height: 52px; font-size: 15px; }
.forms-home .frm-empty { min-height: 120px; }

/* the deck front-door → forms entry */
.deck-forms-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 22px;
  min-height: 52px; padding: 0 16px; border: 1.5px solid var(--edge-soft); border-radius: 14px; background: var(--panel);
  color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .12s; }
.deck-forms-link:hover { border-color: var(--accent); }
.deck-fl-go { color: rgba(var(--ink-rgb), 0.4); font-size: 18px; }

/* the DESIGNER (inherits .deck-editor / .deck-scroll / .deck-foot) */
.fe-meta { display: flex; gap: 8px; padding: 4px 18px 0; max-width: 620px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.fe-emoji { width: 52px; flex: 0 0 auto; text-align: center; font-size: 20px; padding: 11px 6px; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; }
.fe-name { flex: 1 1 auto; min-width: 0; padding: 11px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; }
.fe-dated { display: flex; align-items: center; gap: 9px; max-width: 620px; margin: 12px auto 0; width: 100%; padding: 0 20px; box-sizing: border-box; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.fe-dated input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.fe-dated .sub { color: rgba(var(--ink-rgb), 0.5); font-size: 12px; }
.fe-list { padding-top: 4px; }
.fe-row { border: 1px solid var(--edge-soft); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--panel); }
.fe-row.dragging { opacity: 0.94; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); border-color: var(--accent); position: relative; z-index: 5; }
.fe-row-top { display: flex; gap: 8px; align-items: center; }
.fe-label { flex: 1 1 auto; min-width: 0; padding: 10px 11px; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; }
.fe-del { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: rgba(var(--ink-rgb), 0.5); cursor: pointer; }
.fe-del:hover { border-color: #e0533d; color: #e0533d; }
.fe-row-cfg { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.fe-row-cfg label { flex: 1 1 40%; min-width: 120px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: rgba(var(--ink-rgb), 0.55); }
.fe-row-cfg .fe-tgt-l, .fe-row-cfg .fe-opt-l { flex: 1 1 100%; }
.fe-row-cfg input, .fe-row-cfg select { padding: 9px 10px; border: 1px solid var(--edge); border-radius: 9px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; }

/* the FILLER — a single scrollable form */
.ff-title { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }
.ff-datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ff-datebar label { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); font-weight: 600; }
.ff-datebar input { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; }
.ff-editing { font-size: 11px; color: var(--accent); font-weight: 600; }
.ff-fields { display: flex; flex-direction: column; gap: 18px; }
.ff-field { display: flex; flex-direction: column; gap: 8px; }
.ff-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ff-area { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); border: 1px solid var(--edge-soft); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.ff-in { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 13px; border: 1px solid var(--edge); border-radius: 12px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 15px; }
textarea.ff-in { min-height: 88px; resize: vertical; line-height: 1.5; }
.ff-dollar { display: flex; align-items: center; gap: 6px; border: 1px solid var(--edge); border-radius: 12px; background: var(--paper); padding-left: 12px; }
.ff-dollar span { font-size: 16px; color: rgba(var(--ink-rgb), 0.55); flex: 0 0 auto; }
.ff-dollar .ff-in { border: none; padding-left: 0; background: transparent; }
.ff-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-chip { flex: 1 1 auto; min-width: 56px; min-height: 48px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.ff-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* the DOCUMENT importer */
.fd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }
.fd-card { border: 1px solid var(--edge-soft); border-radius: 16px; background: var(--panel); padding: 16px; margin-bottom: 14px; }
.fd-h { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.fd-p { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.fd-paste { width: 100%; box-sizing: border-box; min-height: 116px; padding: 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; margin-bottom: 12px; }
.fd-note { text-align: center; font-size: 12px; padding: 4px 0 8px; }

/* modals → bottom sheets on a phone (mobile SOP #7) */
@media (max-width: 480px) {
  .fe-meta, .fe-dated { padding-left: 14px; padding-right: 14px; }
  .frm-foot { flex-direction: column; }
}

/* ── THE MESSAGES surface — full-screen E2E DMs. Reuses .daily-space + .daily-top + .daily-icn.
   Own a query container so a narrow surface (a phone) still reads well. All colours via vars. ── */
.msg-space { container: msg / inline-size; }
.msg-headright { display: flex; gap: 2px; align-items: center; flex: 0 0 auto; }
.msg-hbtn { font-size: 17px; position: relative; }
/* the bell's quiet news dot (mirrors the button badge — same square, tiny) */
.msg-hbtn.has-news::after {
  content: ""; position: absolute; top: 6px; right: 4px; width: 8px; height: 8px;
  border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
}
.msg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 4px 0 calc(16px + env(safe-area-inset-bottom)); }
/* onboarding — connect cloud / claim a handle */
.msg-onboard { max-width: 420px; margin: 0 auto; padding: 34px 22px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.msg-onboard-em { font-size: 46px; line-height: 1; }
.msg-onboard h2 { margin: 0; font-size: 22px; color: var(--ink); }
.msg-onboard p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(var(--ink-rgb), 0.7); }
.msg-fine { font-size: 12px !important; color: rgba(var(--ink-rgb), 0.5) !important; }
.msg-err { font-size: 13px; color: #e0533d; margin: 2px 0 0; }
.msg-claimrow, .msg-findbar { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; }
.msg-findbar { padding: 12px 16px 4px; }
.msg-at { font-size: 18px; color: rgba(var(--ink-rgb), 0.5); flex: 0 0 auto; }
.msg-claim-in { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 16px; box-sizing: border-box; }
.msg-claim-in:focus { outline: none; border-color: var(--accent); }
.msg-find-go { flex: 0 0 auto; min-height: 48px; padding: 0 16px; border: none; border-radius: 12px; background: var(--accent); color: var(--paper); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.msg-cta-btn { min-height: 48px; padding: 0 22px; border: none; border-radius: 14px; background: var(--accent); color: var(--paper); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.msg-cta-btn:active { transform: scale(0.97); }
/* account strip — switch / log out, on every logged-in Messages view (calm, not alarming) */
.msg-account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin: 18px 16px calc(4px + env(safe-area-inset-bottom)); padding: 12px 14px; border: 1px solid var(--edge-soft); border-radius: 14px; }
.msg-acct-who { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.55); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.msg-acct-who b { color: rgba(var(--ink-rgb), 0.8); font-weight: 600; }
.msg-acct-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.msg-acct-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--edge-soft); border-radius: 11px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-acct-btn:hover { background: rgba(var(--ink-rgb), 0.05); }
.msg-acct-btn:active { transform: scale(0.97); }
/* conversations list */
.msg-list { display: flex; flex-direction: column; }
.msg-conv { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 16px; border: none; border-bottom: 1px solid var(--edge-soft); background: none; color: var(--ink); cursor: pointer; text-align: left; }
.msg-conv:hover { background: rgba(var(--ink-rgb), 0.04); }
.msg-ava { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, var(--panel)); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.msg-conv-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-conv-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-prev { font-size: 13px; color: rgba(var(--ink-rgb), 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--paper); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
/* empty states */
.msg-empty { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.msg-empty-em { font-size: 42px; line-height: 1; }
.msg-empty p { margin: 0; font-size: 15px; color: var(--ink); }
.msg-empty .sub { font-size: 13px; color: rgba(var(--ink-rgb), 0.5); }
.msg-empty .msg-cta-btn { margin-top: 12px; }
.msg-empty2 { text-align: center; padding: 32px 20px; font-size: 13.5px; color: rgba(var(--ink-rgb), 0.5); }
/* the thread — a scroll of bubbles + a bottom composer */
.msg-thread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; }
.msg-thread-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; }
.msg-b { max-width: 80cqw; align-self: flex-start; background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 16px; padding: 8px 12px; }
.msg-b.me { align-self: flex-end; background: var(--accent); border-color: var(--accent); color: var(--paper); }
.msg-b-tx { display: block; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.4; }
.msg-b-ts { display: block; font-size: 10px; opacity: 0.6; margin-top: 3px; text-align: right; }
.msg-composer { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge-soft); }
.msg-ta { flex: 1 1 auto; min-width: 0; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--edge); border-radius: 18px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.4; box-sizing: border-box; }
.msg-ta:focus { outline: none; border-color: var(--accent); }
.msg-send { flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--accent); color: var(--paper); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msg-send:active { transform: scale(0.94); }
/* ── What's new — the notification center: quiet news rows, never alarms ── */
.msg-notif { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 8px 14px 16px; border-bottom: 1px solid var(--edge-soft); }
.msg-notif:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.msg-notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px; margin-top: 7px; background: var(--accent); opacity: 0; transition: opacity 0.4s ease; }
.msg-notif.unread .msg-notif-dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .msg-notif-dot { transition: none; } }
.msg-notif-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msg-notif-title { font-size: 14.5px; font-weight: 600; color: rgba(var(--ink-rgb), 0.72); }
.msg-notif.unread .msg-notif-title { color: var(--ink); }
.msg-notif-body { font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.58); margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.msg-notif-date { font-size: 11px; color: rgba(var(--ink-rgb), 0.42); margin-top: 5px; }
/* the visible per-row control (mobile SOP: 44px hit target, never gesture-only) */
.msg-notif-more { flex: 0 0 auto; width: 44px; height: 44px; margin-top: -10px; border: none; border-radius: 12px; background: none; color: rgba(var(--ink-rgb), 0.45); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msg-notif-more:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--ink); }
.msg-notif-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the row menu — anchored popover on a wide surface… */
.msg-notif-menu { position: fixed; z-index: 40; min-width: 180px; background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 6px; }
.msg-notif-menu button { display: block; width: 100%; min-height: 44px; padding: 0 14px; border: none; border-radius: 10px; background: none; color: var(--ink); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.msg-notif-menu button:hover { background: rgba(var(--ink-rgb), 0.05); }
/* …and a full-width bottom sheet on a narrow one (mobile SOP #7) */
@container msg (max-width: 480px) {
  .msg-notif-menu {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0;
    min-width: 0; border-radius: 16px 16px 0 0; border-bottom: none;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
}
/* find-friends results + friend requests */
.msg-result, .msg-req { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--edge-soft); }
.msg-add { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: none; border-radius: 20px; background: var(--accent); color: var(--paper); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.msg-add:disabled { opacity: 0.5; }
.msg-ign { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 20px; background: none; color: rgba(var(--ink-rgb), 0.6); font-family: inherit; font-size: 13px; cursor: pointer; }

/* ── EDIT PROFILE surface — the character view, full-screen (reuses .daily-space +
   .daily-top + .daily-icn + the char-* / badge-* / tt-* blocks). Everything themed
   via vars; every control is a 44px+ touch target; nothing hover-only. ── */
.prof-space { container: prof / inline-size; }
.prof-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 640px; margin: 0 auto;
  box-sizing: border-box; padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }
.prof-hero { text-align: center; padding: 6px 0 2px; }
.prof-emoji { font-size: 44px; line-height: 1; margin-bottom: 4px; }
.prof-name-in { display: block; width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid transparent;
  border-radius: 12px; background: none; color: var(--ink); font-family: inherit; font-size: 22px; font-weight: 700;
  text-align: center; padding: 6px 10px; }
.prof-name-in:hover, .prof-name-in:focus { border-color: var(--edge); background: var(--panel); outline: none; }
.prof-name-in:focus { border-color: var(--accent); }
@media (hover: none) { .prof-name-in { border-color: var(--edge-soft); } }  /* touch: the field must LOOK editable without hover */
.prof-hero .char-stats { margin-top: 10px; }
.prof-tag { text-transform: none; letter-spacing: 0; font-size: 10px; color: rgba(var(--ink-rgb), 0.55); }
.prof-hint { font-size: 12px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.6); margin: 2px 0 8px; }
.prof-hint b { color: var(--ink); }
.prof-fields { display: flex; flex-direction: column; gap: 8px; }
.prof-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prof-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.55); }
.prof-field input, .prof-field textarea { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 14px; }
.prof-field textarea { resize: vertical; line-height: 1.5; }
.prof-field input:focus, .prof-field textarea:focus { outline: none; border-color: var(--accent); }
.prof-field input:disabled { opacity: 0.5; }
.prof-saved { min-height: 16px; font-size: 11px; color: var(--accent); margin: 4px 0 2px; }
.prof-btnrow { display: flex; gap: 8px; margin: 4px 0 8px; }
.prof-btnrow .set-btn { min-height: 44px; }
.prof-handle { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 16px; margin: 2px 0 8px; }
.prof-at { color: rgba(var(--ink-rgb), 0.5); font-weight: 700; }
.prof-handle b { color: var(--ink); overflow-wrap: anywhere; }
.prof-handle-note { flex-basis: 100%; font-size: 11px; color: rgba(var(--ink-rgb), 0.5); }
.prof-share-tgl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 8px 12px; margin: 0 0 8px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel);
  color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.prof-share-tgl:disabled { opacity: 0.55; cursor: default; }
.prof-share-knob { flex-shrink: 0; width: 34px; height: 20px; border-radius: 10px; background: rgba(var(--ink-rgb), 0.18);
  position: relative; transition: background 0.15s; }
.prof-share-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--paper); transition: left 0.15s; }
.prof-share-tgl.on .prof-share-knob { background: var(--accent); }
.prof-share-tgl.on .prof-share-knob::after { left: 16px; }
.prof-share-lbl { min-width: 0; }
.prof-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding: 12px 0 4px; border-top: 1px solid var(--edge-soft); font-size: 12px;
  color: rgba(var(--ink-rgb), 0.65); }
.prof-acct-who { min-width: 0; overflow-wrap: anywhere; }
.prof-acct-who b { color: var(--ink); }
.prof-acct .set-btn { flex: 0 1 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.prof-acct .set-btn svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .prof-share-knob, .prof-share-knob::after { transition: none; } }
.prof-space .daily-icn { width: 44px; height: 44px; }  /* the close ✕ is this surface's only dismiss — full 44px target here */

/* ─── The Cache Brand Kit (founder-only widget) ─────────────────────────────
   Theme-aware CSS vars only. Mobile SOP: ≥44px hit areas, fluid widths,
   no hover-only reveals; the widget adapts to its OWN width (container query). */
.is-brandkit { padding: 0; overflow: hidden; }
.bkit-wrap { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
.bkit-locked { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(var(--ink-rgb), 0.55); text-align: center; padding: 20px; }
.bkit-locked svg { width: 22px; height: 22px; opacity: 0.7; }
.bkit-locked p { font-size: 12.5px; margin: 0; }
.bkit-status { align-self: flex-start; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--edge-soft); color: rgba(var(--ink-rgb), 0.55); }
.bkit-status.on { color: var(--accent); border-color: var(--accent); }
.bkit-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); font-family: var(--font-mono); }
.bkit-add { flex: 0 0 auto; min-width: 28px; height: 28px; border: 1px solid var(--edge); background: transparent; color: var(--ink); border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.bkit-add::before { content: ""; position: absolute; inset: -9px; }   /* pad the hit area to ~44px without growing the glyph (mobile SOP) */
.bkit-add:hover { border-color: var(--accent); color: var(--accent); }
.bkit-upload { overflow: hidden; }
.bkit-tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bkit-token { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.bkit-token > span { flex: 0 0 auto; color: rgba(var(--ink-rgb), 0.7); }
.bkit-token input[type="color"] { flex: 0 0 auto; width: 36px; height: 30px; padding: 0; border: 1px solid var(--edge); border-radius: 8px; background: transparent; cursor: pointer; }
.bkit-token select { flex: 1; min-width: 0; }
.bkit-token-font { grid-column: 1 / -1; }
.bkit-apply { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink); cursor: pointer; padding: 6px 0; min-height: 34px; }
.bkit-apply input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.bkit-list { display: flex; flex-direction: column; gap: 6px; }
.bkit-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bkit-row input[type="color"], .bkit-color { flex: 0 0 auto; width: 34px; height: 30px; padding: 0; border: 1px solid var(--edge); border-radius: 8px; background: transparent; cursor: pointer; }
.bkit-txt, .bkit-notes { width: 100%; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink); background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--edge-soft); border-radius: 8px; padding: 7px 9px; }
.bkit-txt { flex: 1; }
.bkit-txt-wide { flex: 2; }
.bkit-txt:focus, .bkit-notes:focus { outline: none; border-color: var(--accent); }
.bkit-del { flex: 0 0 auto; border: none; background: none; color: rgba(var(--ink-rgb), 0.4); font-size: 13px; cursor: pointer; position: relative; width: 22px; height: 22px; line-height: 1; border-radius: 6px; }
.bkit-del::before { content: ""; position: absolute; inset: -11px; }   /* ~44px hit area around a 22px glyph */
.bkit-del:hover { color: var(--accent); }
.bkit-empty { font-size: 11.5px; font-style: italic; color: rgba(var(--ink-rgb), 0.45); padding: 2px 0; }
.bkit-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.bkit-logo { position: relative; border: 1px solid var(--edge-soft); border-radius: 10px; padding: 8px 6px 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(var(--ink-rgb), 0.03); }
.bkit-logo img { max-width: 100%; max-height: 46px; object-fit: contain; }
.bkit-logo-name { font-size: 10px; color: rgba(var(--ink-rgb), 0.55); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkit-logo .bkit-del { position: absolute; top: 2px; right: 2px; }
.bkit-notes { resize: vertical; min-height: 60px; }
.bkit-roster { display: flex; flex-direction: column; gap: 4px; }
.bkit-founder { font-size: 12.5px; color: var(--ink); padding: 3px 0; }
.bkit-founder-h { color: rgba(var(--ink-rgb), 0.5); font-family: var(--font-mono); font-size: 11px; }
.bkit-addf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bkit-addf .bkit-txt { flex: 1 1 120px; }
.bkit-addf-msg { flex-basis: 100%; font-size: 11px; color: rgba(var(--ink-rgb), 0.55); }
.bkit-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--edge-soft); }
.bkit-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; color: var(--ink); background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--edge-soft); border-radius: 8px; padding: 8px 10px; min-height: 34px; cursor: pointer; }
.bkit-btn:hover { border-color: var(--accent); color: var(--accent); }
.bkit-btn.ghost { background: none; }
.bkit-btn svg { width: 14px; height: 14px; }
/* the resizable, attributed activity dialog (reuses .cat-modal.resizable) */
.bkit-act-modal .bkit-act-list { padding: 6px 16px 16px; }
.bkit-ev { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--edge-soft); font-size: 12.5px; }
.bkit-ev:last-child { border-bottom: none; }
.bkit-ev-d { flex: 1; color: var(--ink); line-height: 1.45; }
.bkit-ev-d b { color: var(--accent); font-weight: 600; }
.bkit-ev-t { flex: 0 0 auto; color: rgba(var(--ink-rgb), 0.45); font-size: 10.5px; white-space: nowrap; }
/* narrow widget → stack the wide type row so nothing overflows its own box */
@container (max-width: 300px) {
  .bkit-row { flex-wrap: wrap; }
  .bkit-txt-wide { flex-basis: 100%; }
}