/* Shared visual system. Kept separate from feature styles while features evolve. */
:root {
  --paper: #ffffff;
  --paper-deep: #efefed;
  --sidebar: #f5f5f4;
  --surface: #fafaf9;
  --surface-solid: #ffffff;
  --ink: #24282d;
  --muted: #686c73;
  --line: #e3e4e5;
  --accent: #303b46;
  --accent-soft: #e8ebee;
  --on-accent: #ffffff;
  --green: var(--accent);
  --green-bright: #4c876c;
  --danger: #b03935;
  --shadow: 0 16px 60px #0000001a;
  --radius: 12px;
  --sidebar-width: 212px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  color-scheme: light;
  font-family: var(--font-sans);
}
:root[data-palette="sage"] {
  --paper: #fcfdfb; --paper-deep: #e7ece3; --sidebar: #f0f3ed; --surface: #f5f7f2;
  --surface-solid: #fcfdfb; --ink: #25332a; --muted: #637067; --line: #dce3d8;
  --accent: #35634a; --accent-soft: #e1ebdf;
}
:root[data-palette="ocean"] {
  --paper: #fbfcff; --paper-deep: #e4eaf3; --sidebar: #eef2f8; --surface: #f3f6fb;
  --surface-solid: #fbfcff; --ink: #253044; --muted: #626f82; --line: #dce3ed;
  --accent: #315e9e; --accent-soft: #e0e9f7;
}
:root[data-palette="clay"] {
  --paper: #fdfbf8; --paper-deep: #eee4d9; --sidebar: #f4eee7; --surface: #f8f3ed;
  --surface-solid: #fdfbf8; --ink: #382f2a; --muted: #77685d; --line: #e5dbd1;
  --accent: #965132; --accent-soft: #f1e3d8;
}
:root[data-palette="plum"] {
  --paper: #fdfbfe; --paper-deep: #eae2ed; --sidebar: #f3eef5; --surface: #f8f4fa;
  --surface-solid: #fdfbfe; --ink: #352b3b; --muted: #74667b; --line: #e4dce8;
  --accent: #79518b; --accent-soft: #eadeef;
}
:root[data-palette="midnight"] {
  color-scheme: dark;
  --paper: #1b1e23; --paper-deep: #30353e; --sidebar: #15171b; --surface: #22262d;
  --surface-solid: #22262d; --ink: #e6e8ed; --muted: #a2a9b6; --line: #363c46;
  --accent: #a2bce3; --accent-soft: #2b3648; --on-accent: #172334;
  --green-bright: #8fcba9; --danger: #f0948d; --shadow: 0 16px 60px #00000055;
}
:root[data-palette="vivid"] {
  --paper: #fffafd; --paper-deep: #e9dfff; --sidebar: #eee6ff; --surface: #f5f0ff;
  --surface-solid: #ffffff; --ink: #2b174b; --muted: #6b527e; --line: #dcccfa;
  --accent: #6933e6; --accent-soft: #e9dfff; --on-accent: #ffffff;
  --green-bright: #009b72; --danger: #c52649; --shadow: 0 16px 60px #6933e624;
  --pop-pink: #b81c69; --pop-blue: #245cc5; --pop-green: #087b58;
  --pop-cyan: #077988; --pop-amber: #996000;
}
:root[data-palette="solstice"] {
  --paper: #fffaf3; --paper-deep: #ffdfba; --sidebar: #ffe9cc; --surface: #fff0e2;
  --surface-solid: #ffffff; --ink: #422317; --muted: #80553f; --line: #edcfb5;
  --accent: #bb3e23; --accent-soft: #ffe4d8; --on-accent: #ffffff;
  --green-bright: #099b70; --danger: #b82147; --shadow: 0 16px 60px #bb3e2324;
  --pop-pink: #b71e64; --pop-blue: #315bb9; --pop-green: #09774f;
  --pop-cyan: #067780; --pop-amber: #976008; --pop-logo-pink: #ef4e72;
  --pop-body: radial-gradient(ellipse at 95% 5%, #ffebba 0, transparent 48%), radial-gradient(ellipse at 25% 80%, #ffdce5 0, transparent 58%), var(--paper);
  --pop-header: linear-gradient(165deg, #ffe9cc, #ffdbdc 70%, #fff0bd);
  --pop-primary: linear-gradient(120deg, #bb3e23, #c4256c);
  --pop-primary-hover: linear-gradient(120deg, #a63019, #a91a59);
  --pop-light: #ffe8d8; --pop-light-border: #ecb899; --pop-light-hover: #ffdbc4;
  --pop-budget: linear-gradient(110deg, #e5f9dd, #fff2c9 60%, #ffe1cc); --pop-budget-border: #c8dfac;
  --pop-learning: linear-gradient(120deg, #ffedc4, #ffe0da 65%, #ffe0ef); --pop-learning-border: #eabd9a;
  --pop-blue-soft: #fff3dd; --pop-blue-border: #e8c995;
  --pop-tasks: linear-gradient(110deg, #ffe0e9, #ffecd1); --pop-pink-soft: #ffe4ec; --pop-pink-border: #eeb3c3;
  --pop-assistant: linear-gradient(110deg, #fff0d3, #ffe0e7);
}
:root[data-palette="lagoon"] {
  --paper: #f5fffd; --paper-deep: #cdeeea; --sidebar: #d8f7ef; --surface: #e8f9f5;
  --surface-solid: #ffffff; --ink: #123c43; --muted: #436d73; --line: #b8ddd9;
  --accent: #007b80; --accent-soft: #cff4ed; --on-accent: #ffffff;
  --green-bright: #009c80; --danger: #be2754; --shadow: 0 16px 60px #007b8024;
  --pop-pink: #b32382; --pop-blue: #295cbe; --pop-green: #087755;
  --pop-cyan: #067786; --pop-amber: #876405; --pop-logo-pink: #754bf2;
  --pop-body: radial-gradient(ellipse at 95% 5%, #d6edff 0, transparent 48%), radial-gradient(ellipse at 25% 80%, #dcf7d1 0, transparent 58%), var(--paper);
  --pop-header: linear-gradient(165deg, #d8f7ef, #d7edff 70%, #ecdfff);
  --pop-primary: linear-gradient(120deg, #007b80, #365bc8);
  --pop-primary-hover: linear-gradient(120deg, #00686d, #2b47b0);
  --pop-light: #d9f5ef; --pop-light-border: #97d6cc; --pop-light-hover: #c2eee5;
  --pop-budget: linear-gradient(110deg, #d5f7eb, #eaf6cb 60%, #dcefff); --pop-budget-border: #a8ddc7;
  --pop-learning: linear-gradient(120deg, #d9f7ed, #e2eaff 65%, #efddff); --pop-learning-border: #b4cfe8;
  --pop-blue-soft: #e5f2ff; --pop-blue-border: #b4d4ed;
  --pop-tasks: linear-gradient(110deg, #f4ddf7, #e1eeff); --pop-pink-soft: #f5e3f8; --pop-pink-border: #dab8e6;
  --pop-assistant: linear-gradient(110deg, #def6f0, #eadeff);
}

body { background: var(--paper); font-size: 14px; -webkit-font-smoothing: antialiased; }
.ambient { display: none; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
::selection { color: var(--ink); background: var(--accent-soft); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 18px; border-radius: 6px; color: var(--on-accent); background: var(--accent); }
.skip-link:focus { top: 12px; }
.brand-wordmark { font-size: 15px; font-weight: 650; letter-spacing: -.5px; text-transform: none; gap: .24em; }
.brand-mark { width: 30px; height: 30px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 550; letter-spacing: .025em; text-transform: none; }
.button { min-height: 38px; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: none; transition: background .15s, border-color .15s; }
.button:hover, .button:active { transform: none; box-shadow: none; }
.button-primary, .button-dark { color: var(--on-accent); background: var(--accent); }
.button-primary:hover, .button-dark:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.button-light { color: var(--ink); border: 1px solid var(--line); background: var(--surface-solid); }
.button-quiet { background: transparent; }
.button-quiet:hover, .button-light:hover { background: var(--paper-deep); }
.button-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }
.button-small { min-height: 34px; border-radius: 6px; font-size: 11px; }
.icon-button { border-radius: 6px; }
.icon-button:hover { background: var(--paper-deep); }
.avatar { color: var(--on-accent); font-weight: 600; }

/* Navigation is available on demand; pinning is an explicit desktop preference. */
.app-view { margin-left: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.app-view[data-navigation="pinned"] { margin-left: var(--sidebar-width); }
.app-header {
  position: fixed; inset: 0 auto 0 0; width: min(280px, calc(100vw - 32px)); min-height: 0; height: 100dvh; z-index: 80;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0; padding: calc(58px + env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); border: 0; border-right: 1px solid var(--line);
  background: var(--sidebar); backdrop-filter: none; overflow-y: auto; overscroll-behavior: contain;
}
.app-view[data-navigation="pinned"] .app-header { width: var(--sidebar-width); }
.app-header[hidden], .navigation-backdrop[hidden] { display: none !important; }
.navigation-is-modal { overflow: hidden; }
.navigation-backdrop { position: fixed; inset: 0; z-index: 79; padding: 0; border: 0; background: #10182033; cursor: default; }
.navigation-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px; }
.navigation-toggle { display: inline-flex; align-items: center; justify-self: start; min-width: 0; max-width: 100%; gap: 10px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.navigation-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.navigation-toggle:hover { color: var(--ink); background: var(--surface); }
.navigation-pin { flex-shrink: 0; min-height: 40px; margin-top: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.navigation-pin[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.app-header > .brand { flex-shrink: 0; margin: 0 8px 30px; }
.header-center { display: block; width: 100%; flex-shrink: 0; }
.navigation-label { margin: 0 10px 9px; color: var(--muted); font-size: 10px; font-weight: 600; }
.mode-switch { display: flex; flex-direction: column; width: 100%; gap: 4px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.mode-switch button, .header-actions .stats-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 6px;
  color: var(--muted); background: transparent; font-size: 12px; font-weight: 550; text-align: left;
}
.mode-switch button:hover, .header-actions .stats-button:hover { color: var(--ink); background: var(--paper-deep); }
.mode-switch button.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: none; font-weight: 650; }
.mode-switch button svg, .profile-settings-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header-actions { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 30px; }
.header-actions > button { flex-shrink: 0; }
.header-actions .navigation-label { margin-bottom: 5px; }
.header-actions .stats-button svg { width: 18px; height: 18px; }
.header-actions .stats-button { justify-content: flex-start; }
.header-actions .stats-button span { display: inline; }
.profile-button { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: auto; padding: 14px 7px 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; }
.profile-button .avatar { width: 31px; height: 31px; box-shadow: none; font-size: 11px; border-radius: 8px; }
.profile-button-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.profile-button-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.profile-button-copy small { color: var(--muted); font-size: 10px; }
.profile-settings-icon { width: 16px; color: var(--muted); }

.dashboard { width: auto; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 3.4vw, 56px); }
.workspace-toolbar { position: sticky; top: 0; z-index: 30; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; border: 0; background: transparent; }
.workspace-toolbar > .day-nav { grid-column: 2; grid-row: 1; margin-top: 0; }
.toolbar-profile { grid-column: 3; grid-row: 1; justify-self: end; width: auto; max-width: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 5px 7px; border: 0; border-radius: 8px; }
.toolbar-profile:hover { background: var(--surface); }
.toolbar-profile .avatar { flex-shrink: 0; }
.toolbar-profile .profile-button-copy { max-width: 140px; }
.workspace-toolbar.is-scrolled > :is(.navigation-toggle, .day-nav, .toolbar-profile) { border-radius: 8px; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.workspace-label { flex: 1; color: var(--muted); font-size: 11px; white-space: nowrap; }
.workspace-label > span { margin: 0 9px; color: var(--line); }
.day-nav { display: grid; grid-template-columns: 30px minmax(124px, auto) 30px; gap: 2px; }
.day-nav .icon-button { width: 30px; height: 32px; }
.app-view:is([data-view="audio"], [data-view="tasks"]) .day-nav { display: none; }
.date-button { padding: 3px 6px; }
.date-button span { font-size: 11px; font-weight: 600; }
.date-button small { font-size: 10px; }
.dashboard-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: none; margin: 34px 0 24px; text-align: left; }
.dashboard-heading > h1 { flex: 1; min-width: 0; }
.dashboard-heading > .button { flex-shrink: 0; }
.dashboard-heading > p:last-child { flex-basis: 100%; margin: 0; }
.dashboard-heading h1 { margin: 7px 0 9px; font-family: var(--font-sans); font-size: clamp(27px, 2.7vw, 36px); font-weight: 650; letter-spacing: -.045em; line-height: 1.15; }
.dashboard-heading > p:last-child { color: var(--muted); font-size: 12px; }
.dashboard-heading > p:empty { display: none; }
.time-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 30px; min-height: 530px; }
.time-workspace:has(.project-index.hidden) { grid-template-columns: 1fr; }
.app-view[data-project-list="hidden"] .project-index { display: none; }
.app-view[data-project-list="hidden"] .time-workspace { grid-template-columns: minmax(0, 1fr); }
.project-list-toggle { min-height: 44px; margin-left: auto; padding: 8px 0 8px 12px; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.project-list-toggle:hover { color: var(--ink); }
.time-grouping-controls { grid-column: 1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; align-self:start; }
.time-grouping-controls > span { min-width:0; color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.time-grouping-choice { display:flex; flex-shrink:0; border:1px solid var(--line); border-radius:8px; padding:3px; background:var(--surface-solid); }
.time-grouping-choice button { min-height:36px; padding:8px 12px; border:0; border-radius:5px; font:inherit; font-size:12px; color:var(--muted); background:transparent; cursor:pointer; }
.time-grouping-choice button[aria-pressed="true"] { color:var(--ink); background:var(--paper-deep); }
.core-group-hint { display:block; max-width:190px; margin:10px auto 0; color:var(--muted); font-size:10px; line-height:1.5; }
.core-actions:has([data-open-time-group]) { display:flex; justify-content:center; }
#bookProjectFields .manual-metadata { min-width:0; display:grid; gap:12px; margin:12px 0 0; padding:14px; border:1px solid var(--line); border-radius:8px; }
#bookProjectFields .manual-metadata legend { padding:0 5px; font-size:12px; font-weight:600; }
#bookProjectFields .manual-metadata p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
#bookProjectFields .manual-metadata a { color:var(--accent); }
#bookProjectFields .manual-metadata > button { justify-self:start; }
.manual-reading-settings { margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.manual-reading-settings summary { cursor:pointer; font-weight:600; font-size:12px; }
.manual-reading-settings p { margin:12px 0; font-size:12px; line-height:1.6; color:var(--muted); }
.manual-reading-settings label { display:grid; gap:8px; font-size:12px; }
.manual-speed-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ring-stage { min-width: 0; }
.rings-orbit { width: min(100%, 580px); min-height: 0; height: auto; aspect-ratio: 1; margin: 0 auto; }
.rings-orbit::before { box-shadow: none; background: transparent; }
.rings-core { padding: 18px; }
.core-idle strong, .core-percent, .core-money { font-family: var(--font-sans); font-weight: 550; font-variant-numeric: tabular-nums; }
.core-idle strong { font-size: 27px; }
.core-idle-mark { display: none; }
.core-idle small { font-size: 11px; }
.orbit-instruction { color: var(--muted); font-size: 10px; letter-spacing: 0; text-transform: none; }
/* Matte strokes, separate generous hit areas, and palette-aware project colours. */
.project-ring { --ring-ink: var(--ring-color); }
.project-ring .orbit-hit { fill: none; stroke: transparent; pointer-events: stroke; }
.project-ring .orbit-track { stroke: color-mix(in srgb, var(--ring-color) 22%, var(--line)); pointer-events: none; }
.project-ring .orbit-progress { stroke: var(--ring-ink); filter: none; pointer-events: none; }
.orbit-progress-mask { transition: stroke-dashoffset .8s cubic-bezier(.2,.75,.25,1); }
.project-ring .orbit-end { opacity: var(--end-opacity, 1); fill: var(--ring-ink); stroke: none; filter: none; }
.project-ring.is-selected .orbit-end { r: var(--ring-end-radius); }
.project-ring .orbit-particle { fill: var(--ring-ink); filter: none; }
.project-ring .orbit-particles { opacity: .55; }
.project-ring.is-selected .orbit-particles { filter: none; }
.project-ring.is-selected .orbit-track { stroke: color-mix(in srgb, var(--ring-color) 38%, var(--line)); }
.project-ring:focus-visible .orbit-hit { stroke: var(--accent-soft); }
.project-ring:focus-visible .orbit-track { stroke: var(--accent); }
.rings-orbit.has-selection .project-ring:not(.is-selected) > circle,
.rings-orbit.has-selection .project-ring:not(.is-selected) > path { opacity: .72; filter: none; }
.rings-orbit.has-selection .project-ring:not(.is-selected) > .orbit-end { opacity: calc(var(--end-opacity, 1) * .72); }
.rings-orbit.has-selection .project-ring.is-completed:not(.is-selected) .completion-layer { opacity: .72; filter: none; }
.project-ring .orbit-completion-edge { stroke: var(--ring-ink); stroke-width: 1; opacity: .25; filter: none; }
.project-ring .orbit-facet { fill: var(--paper); stroke: none; opacity: .12; mix-blend-mode: normal; }
.project-ring .orbit-crack { stroke: var(--paper); stroke-width: .9; opacity: .65; filter: none; }
.project-ring .orbit-overflow { stroke: var(--ring-ink); stroke-width: 2; filter: none; }
.project-ring .completion-spark { fill: var(--ring-ink); filter: none; }
.project-ring .completion-ray { stroke: var(--ring-ink); stroke-width: 1.2; }
.project-ring.is-celebrating .completion-burst { opacity: .5; }
.project-ring.is-running .orbit-progress { animation: ring-breathe 3s ease-in-out infinite; }
.project-ring.is-celebrating .orbit-progress,
.project-ring.is-running.is-celebrating .orbit-progress { animation: ring-breathe 1.2s ease-in-out 1; }
.rings-orbit.has-selection .rings-core { transform: none; }
.core-project-label { color: var(--muted); font-weight: 550; letter-spacing: .04em; }
.core-project-label::before { width: 5px; height: 5px; background: var(--selected-color); box-shadow: none; }
.rings-core.is-completed .core-percent { text-shadow: none; }
:root[data-ring-style="dotted"] .project-ring :is(.orbit-progress, .orbit-track) { stroke-dasharray: .1 13; stroke-linecap: round; }
:root[data-ring-style="dotted"] .project-ring .orbit-end { display: none; }
:root[data-ring-style="ribbon"] .project-ring .orbit-track { stroke: color-mix(in srgb, var(--ring-color) 14%, var(--paper-deep)); }
:root[data-ring-style="ribbon"] .project-ring.is-selected .orbit-track { stroke: color-mix(in srgb, var(--ring-color) 25%, var(--paper-deep)); }
@keyframes ring-breathe { 50% { opacity: .88; } }

.ring-style-preview { display: block; width: 100%; height: 78px; margin-bottom: 7px; }
.ring-style-preview circle { fill: none; stroke-linecap: round; }
.style-preview-track { stroke: var(--line); stroke-width: 1; }
.style-preview-progress { stroke: var(--accent); stroke-width: 2.5; }
.ring-style-preview[data-style="ribbon"] circle { stroke-width: 5; }
.ring-style-preview[data-style="dotted"] .style-preview-track { stroke-width: 2; stroke-dasharray: .1 4; }
.ring-style-preview[data-style="dotted"] .style-preview-progress { stroke-width: 2; }
.project-index { align-self: center; min-width: 0; padding: 4px 0 8px 22px; border-left: 1px solid var(--line); }
.project-index-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.project-index-heading h2 { margin: 0; font-size: 13px; font-weight: 650; }
.project-index-heading > span { color: var(--muted); font-size: 11px; }
.project-index-list { display: grid; gap: 3px; }
.project-index-item { position: relative; width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px 10px; padding: 14px 10px; border: 1px solid transparent; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.project-index-item:hover { background: var(--surface); }
.project-index-item[aria-pressed="true"] { border-color: color-mix(in srgb, var(--project-color) 35%, var(--line)); background: color-mix(in srgb, var(--project-color) 5%, var(--surface)); }
.project-index-item > i { width: 7px; height: 7px; border-radius: 50%; background: var(--project-color); }
.project-index-item > span { min-width: 0; display: grid; gap: 5px; }
.project-index-item strong { overflow-wrap: anywhere; font-size: 12px; font-weight: 550; line-height: 1.35; }
.project-index-item small { color: var(--muted); font-size: 10px; }
.project-index-item > b { align-self: start; padding-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.project-index-track { height: 3px; margin-top: 4px; border-radius: 3px; background: var(--paper-deep); overflow: hidden; }
.project-index-track > i { display: block; height: 100%; background: var(--project-color); }
.project-index-summary { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11px; }
.project-index-summary span { color: var(--muted); }
.project-index-summary strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.project-index-hint { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.empty-state { margin: 35px auto; background: transparent; border-radius: 8px; }
.empty-state h2 { font-family: var(--font-sans); font-size: 23px; font-weight: 600; }
.empty-state p { font-size: 13px; }
.timer-dock { left: 50%; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-solid); box-shadow: var(--shadow); backdrop-filter: none; }
.app-view[data-navigation="pinned"] .timer-dock { left: calc(50% + var(--sidebar-width) / 2); }
.timer-project small { color: var(--muted); }
.timer-dock .button-quiet { color: var(--muted); }
.timer-dock .button-light { color: var(--on-accent); background: var(--accent); border-color: transparent; }

/* The timer is the primary action; occasional corrections have their own sheet. */
.core-actions.core-primary-action { display: flex; justify-content: center; }
.core-actions.core-primary-action .play-button { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; min-height: 44px; border-radius: 8px; font-size: 12px; }
.core-primary-action .play-button:has(.active-dot) { opacity: 1; filter: none; }
.core-tools [data-ring-actions] { justify-content: center; min-width: 80px; min-height: 36px; font-size: 11px; }
.ring-actions-content { display: grid; gap: 12px; }
.ring-actions-label { margin: 0; color: var(--muted); font-size: 12px; }
.ring-actions-quick { display: flex; gap: 12px; margin-bottom: 12px; }
.ring-actions-quick > button { flex: 1; }
.orbit-instruction { display: none; }

/* Consistent reading sizes and quiet surfaces across feature screens. */
.modal { color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); box-shadow: var(--shadow); }
.modal::backdrop { background: #10182066; backdrop-filter: blur(3px); }
.modal h2, .auth-heading h2, .budget-section-heading h2, .audio-library-heading h2, .todo-group-heading h3, .stats-section-heading h3, .treasury-panel-heading h2, .tasks-all-clear h3, .audio-empty h3 { font-family: var(--font-sans); font-size: 21px; font-weight: 620; letter-spacing: -.025em; }
.modal-header { margin-bottom: 24px; }
.modal-actions { border-color: var(--line); }
.form-stack { gap: 16px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--paper); font-size: 13px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--paper); box-shadow: 0 0 0 2px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.field-note { font-size: 11px; line-height: 1.6; }
.avatar-picker { border-color: var(--line); border-radius: 8px; }
.avatar-picker:hover { background: var(--surface); }
.form-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }
.finance-overview, .audio-overview, .tasks-overview { width: 100%; margin: 0 auto 40px; }
.budget-panel, .audio-recording-card, .todo-group, .todo-completed, .tasks-summary, .stats-chart-card, .stats-list-card, .stats-summary > div, .reading-projection, .reading-library, .capture-section, .capture-summary > div, .bank-transaction-summary {
  border-color: var(--line); border-radius: 8px; background: var(--surface-solid); box-shadow: none; backdrop-filter: none;
}
.budget-panel { padding: 22px; }
.budget-section-heading h2, .audio-library-heading h2 { font-size: 19px; }
.budget-envelope { border-color: var(--line); border-radius: 6px; background: var(--paper); box-shadow: none; }
.budget-envelope:hover { transform: none; box-shadow: none; }
.budget-envelope.is-over { background: color-mix(in srgb, var(--danger) 5%, var(--paper)); }
.budget-envelope-daily, .budget-envelope-dynamic-note, .budget-point-low, .budget-liquidity-cards > span, .budget-setup-callout, .budget-history-note, .budget-source-note, .audio-transcript, .security-note, .treasury-method-note, .treasury-kpi, .book-project-fields, .specialized-category, .capture-onboarding, .ios-renewal-card {
  color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--surface);
}
.budget-point-low strong, .budget-envelope-available b, .budget-envelope-daily > span strong, .budget-liquidity-cards strong, .tasks-summary strong, .stats-summary strong { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.04em; }
.budget-entry-row, .budget-upcoming-list > button, .todo-card, .finance-accounts { border-color: var(--line); }
.budget-entry-row > span small, .budget-upcoming-list small, .budget-envelope-heading small, .budget-envelope-daily > small, .budget-source-note, .budget-liquidity-cards em { font-size: 11px; }
.budget-hero, .budget-hero.is-incomplete, .audio-hero, .tasks-capture {
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none;
}
.budget-hero { padding: 26px; gap: 24px; }
.budget-hero::after, .audio-hero::after, .tasks-capture::after { display: none; }
.budget-confidence { margin-bottom: 16px; padding: 0; color: var(--muted); border: 0; background: transparent; font-size: 10px; font-weight: 550; letter-spacing: .02em; text-transform: none; }
.budget-confidence::before { background: var(--green-bright); box-shadow: none; }
.budget-hero-copy > p, .budget-hero-copy > small, .audio-hero-copy > p:not(.eyebrow), .audio-hero-copy label, .audio-hero-actions small, .tasks-capture-copy > p:last-child, .todo-quick-form label > span { color: var(--muted); }
.budget-hero-copy > strong { font-family: var(--font-sans); font-weight: 600; font-size: clamp(36px, 4.5vw, 60px); letter-spacing: -.055em; }
.button-ghost-light { color: var(--ink); border: 1px solid var(--line); background: var(--surface-solid); }
.button-ghost-light:hover { background: var(--paper-deep); }
.budget-constraints { background: transparent; border-color: var(--line); border-radius: 6px; }
.budget-constraints > span { border-color: var(--line); padding: 14px 12px; }
.budget-constraints small, .budget-constraints > span.is-cash small { color: var(--muted); }
.budget-constraints > span.is-cash { background: var(--accent-soft); }
.budget-constraints > span.is-cash strong { color: var(--ink); }
.budget-constraints .is-negative { color: var(--danger); }
.budget-plan-gap { color: var(--ink); border-color: var(--line); background: var(--paper-deep); }
.budget-plan-gap small, .budget-plan-gap em { color: var(--muted); }
.audio-hero { padding: 24px; gap: 24px; }
.audio-hero-copy h2, .tasks-capture-copy h2 { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.audio-hero-copy > p:not(.eyebrow) { font-size: 12px; }
.audio-hero-copy input, .todo-quick-form input, .todo-quick-form select { color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--paper); font-size: 13px; }
.audio-hero-copy input:focus, .todo-quick-form input:focus, .todo-quick-form select:focus { border-color: var(--accent); background: var(--paper); box-shadow: 0 0 0 2px var(--accent-soft); }
.audio-hero-actions .button { min-height: 44px; border-radius: 6px; }
.audio-start-button, .todo-quick-form .button { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.audio-stop-button { color: white; background: #a33832; box-shadow: none; }
.audio-hero.is-recording { color: var(--ink); border-color: var(--danger); background: var(--surface); }
.audio-reliability-grid { gap: 0; border-bottom: 1px solid var(--line); }
.audio-reliability-grid article { padding: 12px 16px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.audio-reliability-grid article:first-child { border-left: 0; }
.audio-reliability-grid p, .audio-processing-note, .audio-error, .audio-empty p { font-size: 11px; }
.audio-recording-heading small, .audio-transcript summary { font-size: 11px; }
.audio-transcript > div { color: var(--ink); font-family: var(--font-sans); font-size: 14px; }
.audio-empty, .tasks-all-clear { border-color: var(--line); border-radius: 8px; background: transparent; }
.tasks-capture { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
.tasks-capture-copy { display: none; }
.todo-quick-form { grid-template-columns: minmax(0,1fr) 145px 160px auto; }
.todo-quick-title { grid-column: auto; }
.todo-quick-form input::placeholder { color: var(--muted); }
.todo-quick-form input::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
.tasks-summary { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.tasks-summary > span { padding: 16px 18px; }
.tasks-summary .is-active, .tasks-summary .is-alert { background: transparent; }
.tasks-board { grid-template-columns: 1fr; gap: 20px; }
.todo-group { padding: 0; border: 0; }
.todo-group-heading { padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.todo-group-heading h3 { font-size: 14px; }
.todo-group-heading small, .todo-meta small { font-size: 11px; }
.todo-group-heading b { border-radius: 4px; background: var(--accent-soft); }
.todo-card { padding: 16px 8px; gap: 13px; }
.todo-card:hover { background: var(--surface); }
.todo-card-body > strong { font-size: 13px; font-weight: 550; }
.todo-card-body > p { font-size: 12px; }
.todo-check { border-color: var(--muted); border-radius: 5px; }
.todo-card.is-completed .todo-check { color: var(--on-accent); }
.todo-more:hover { background: var(--paper-deep); }
.todo-completed { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; }

/* Settings: real previews and native radio keyboard behavior. */
#profileDialog { width: min(570px, calc(100% - 32px)); }
.appearance-fieldset { margin: 4px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.appearance-fieldset legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.appearance-note { clear: both; margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.appearance-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.palette-choice { position: relative; min-width: 0; cursor: pointer; }
.palette-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.palette-card { display: block; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.palette-choice input:checked + .palette-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.palette-choice input:focus-visible + .palette-card { outline: 2px solid var(--accent); outline-offset: 4px; }
.palette-preview { display: flex; height: 48px; margin-bottom: 8px; overflow: hidden; border: 1px solid #88888826; border-radius: 3px; background: var(--preview-paper); }
.palette-preview > i { width: 28%; border-right: 1px solid #88888822; background: var(--preview-side); }
.palette-preview > span { flex: 1; display: grid; align-content: center; gap: 5px; padding: 8px; }
.palette-preview b { display: block; height: 3px; border-radius: 1px; background: var(--preview-accent); opacity: .22; }
.palette-preview b:first-child { width: 48%; height: 5px; opacity: 1; }
.palette-preview b:last-child { width: 70%; }
.palette-name { display: flex; align-items: center; justify-content: space-between; gap: 3px; font-size: 12px; font-weight: 600; }
.palette-card > small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.palette-check { color: var(--accent); opacity: 0; }
.palette-choice input:checked + .palette-card .palette-check { opacity: 1; }
.appearance-status { min-height: 16px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.profile-account-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.profile-account-actions .button { font-size: 11px; min-height: 34px; padding-inline: 12px; }
.profile-account-actions #logoutButton { margin-left: auto; }
.profile-modal-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-block: 12px 0; background: var(--surface-solid); }
.profile-modal-actions > .button { flex: 0 0 auto; }
#profileForm input[type="text"], #profileForm input[type="email"] { height: 44px; }
#profileForm .avatar-large { width: 42px; height: 42px; font-size: 15px; }
#profileForm .avatar-picker { padding: 10px; }
#profileForm .form-stack { gap: 14px; }
#profileForm .modal-header { margin-bottom: 20px; }
#profileForm .appearance-fieldset { padding-top: 16px; }
#profileForm .palette-preview { height: 40px; }

/* The same vocabulary carries through sign-in. */
.startup-view { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; text-align: center; }
.startup-view strong { font-size: 18px; font-weight: 600; }
.startup-view p { max-width: 340px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.auth-view { padding: 0; grid-template-columns: 1fr 1fr; }
.auth-intro { min-height: 100dvh; padding: 40px 12%; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--sidebar); }
.auth-intro::after { display: none; }
.auth-message { margin: auto 0 55px; }
.auth-message h1 { font-family: var(--font-sans); font-size: clamp(38px, 4.6vw, 68px); font-weight: 600; line-height: 1.08; letter-spacing: -.06em; }
.auth-message > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-tabs { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 18px; background: transparent; }
.auth-tab { border-radius: 0; border-bottom: 2px solid transparent; padding: 10px 0; font-size: 12px; }
.auth-tab.is-active { border-color: var(--accent); background: transparent; box-shadow: none; }
.auth-heading h2 { font-size: 26px; }
.sample-rings { margin-bottom: 35px; gap: 24px; }
.sample-ring { width: 84px; height: 84px; border-width: 7px; font-size: 10px; background: transparent; }
.sample-ring-two { width: 108px; height: 108px; }
.sample-ring-three { width: 65px; height: 65px; }

/* Legacy components use theme tokens too, including the dark palette. */
.segmented-choice label > span, .budget-mode-choices label > span, .quick-button, .core-book-status, .capture-device-row, .capture-source-row, .capture-link-row, .finance-account-row, .bank-institution, .category-row, .reading-sample-row { background: var(--surface); border-color: var(--line); }
.segmented-choice input:checked + span, .budget-mode-choices input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.checkbox-row, .cashflow-rule-row, .cashflow-direction-choices span, .finance-connections > span,
.treasury-forecast-panel, .treasury-timeline, .treasury-upcoming > span {
  color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: none;
}
.cashflow-direction-choices input:checked + span, .budget-entry-kind label:last-child input:checked + span {
  color: var(--on-accent); border-color: var(--accent); background: var(--accent);
}
.cashflow-rule-row > span strong { font-size: 12px; font-weight: 550; }
.cashflow-rule-row > span small { color: var(--muted); font-size: 10px; }
.cashflow-rule-row > b { font-size: 12px; }
.cashflow-rule-row > i, .bank-review-row > i { color: var(--on-accent); }
.checkbox-row small { color: var(--muted); }
.cashflow-direction-choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.quick-button:hover, .category-row button:hover, .bank-institution:hover { background: var(--paper-deep); }
.learning-page-preview img { background: var(--surface); }
.stats-periods { background: var(--surface); border-color: var(--line); }
.stats-periods button.is-active { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.audio-recording-heading em, .audio-recording-icon { color: var(--accent); background: var(--accent-soft); }
.audio-error { color: var(--danger); }
.audio-pending-notice { color: var(--ink); background: var(--accent-soft); border-color: var(--line); }
.toast { color: var(--on-accent); background: var(--accent); border-radius: 8px; }

.stat-summary-card, .capture-guide, .capture-guide-step, .capture-setup-card, .reading-library-book, .reading-process li, .reading-profile-card, .reading-stopwatch, .book-size-form, .book-session-estimate, .install-web-app-browser {
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none;
}
.stat-summary-card strong, .stats-donut-ring strong, .stats-donut-empty span, .reading-profile-card strong, .reading-library-summary strong, .reading-projection-value strong { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-summary-card > span { font-size: 10px; }
.stats-donut-ring > div, .stats-donut-empty { color: var(--ink); background: var(--surface-solid); box-shadow: none; }
.stats-donut-ring { box-shadow: none; }
.stat-bar-track, .stat-weekday > div, .budget-envelope-track { background: var(--paper-deep); }
.stat-weekday > div i { background: var(--accent); }
.capture-guide-step small, .capture-link-row small, .capture-source-copy small, .capture-device-row small, .capture-guide-heading p { font-size: 10px; line-height: 1.5; }
.capture-guide-step strong { font-size: 11px; }
.capture-guide-badge, .capture-guide-badge.is-warning, .capture-source-icon { color: var(--accent); background: var(--accent-soft); }
.capture-guide-step.is-done::before, .capture-guide-step.is-current::before { color: var(--on-accent); background: var(--accent); }
.capture-inline-form select, .capture-add-source input, .capture-add-source select, .capture-device-form input, .capture-device-form select {
  color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--paper);
}
.capture-setup-card .stats-section-heading p, .capture-onboarding small, .capture-device-row small, .capture-device-row button, .reading-profile-card :is(small, span, p), .book-session-estimate :is(small, p), .reading-projection-copy > small, .reading-projection-copy p, .reading-projection-value span { color: var(--muted); }
.capture-onboarding code, .capture-token-panel, .capture-token-panel code, .capture-token-panel small, .capture-advanced-help summary { color: var(--ink); background: var(--surface); border-color: var(--line); }
.capture-advanced-help, .capture-onboarding { border-color: var(--line); }
.reading-projection { color: var(--ink); background: var(--surface); }
.reading-projection::after { display: none; }
.reading-projection .button { color: var(--on-accent); background: var(--accent); }
.color-choices span { border-color: var(--surface-solid); }
.budget-liquidity-cards > span.is-cash { border-color: var(--line); background: var(--accent-soft); }
.budget-liquidity-cards > span.is-cash small { color: var(--accent); }
.budget-setup-callout > span, .specialized-category-icon, .finance-account-row > i, .budget-upcoming-list i.income { color: var(--on-accent); }
.budget-upcoming-list i { color: var(--paper); }
.todo-priority { color: var(--muted); }

/* The learning workspace shares the same surfaces; its data pipeline is separate. */
.learning-sidebar, .learning-material, .learning-panel, .learning-dialog, .learning-page-preview {
  color: var(--ink); border-color: var(--line); border-radius: 8px; background: var(--surface-solid);
}
.learning-project { border-radius: 6px; }
.learning-project.is-selected { color: var(--accent); border-color: var(--line); background: var(--accent-soft); }
.learning-material:hover { background: var(--surface); }
.learning-material-icon, .learning-upload-status { color: var(--accent); }
.learning-material progress, .learning-form input[type=checkbox] { accent-color: var(--accent); }
.learning-project-heading h2, .learning-welcome h2, .learning-material-head h2, .learning-dialog-heading h2, .learning-material strong { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.025em; }
.learning-project-heading h2, .learning-welcome h2, .learning-material-head h2 { font-size: 25px; }
.learning-material strong { font-size: 19px; }
.learning-welcome { color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.learning-welcome .eyebrow { color: var(--muted); }
.learning-welcome .button { color: var(--on-accent); background: var(--accent); }
.learning-form input:not([type=checkbox]), .learning-form textarea, .learning-form select, .learning-recording-order button {
  color: var(--ink); border-color: var(--line); border-radius: 6px; background: var(--paper);
}
.learning-form fieldset, .learning-sections article, .learning-artifacts article, .learning-jobs > div { border-color: var(--line); }
.learning-citations, .learning-page-preview > span { color: var(--ink); background: var(--surface); }
.learning-warnings, .learning-form-error { color: var(--danger); }
.learning-citations blockquote { border-color: var(--accent); }

@media (min-width: 1600px) { .time-workspace { grid-template-columns: minmax(0,1fr) 330px; min-height: 620px; } }
@media (max-width: 1150px) and (min-width: 761px) {
  :root { --sidebar-width: 184px; }
  .dashboard { padding-inline: 26px; }
  .app-header { padding-inline: 10px; }
  .app-header > .brand { margin-inline: 5px; }
  .time-workspace { grid-template-columns: minmax(0,1fr) 235px; gap: 10px; min-height: 430px; }
  .project-index { padding-left: 12px; }
  .workspace-toolbar { gap: 12px; }
  .workspace-label { font-size: 10px; }
  .workspace-label > span { margin-inline: 5px; }
  .budget-dashboard-grid { grid-template-columns: 1fr; }
  .todo-quick-form { grid-template-columns: 1fr 1fr auto; }
  .todo-quick-title { grid-column: 1 / -1; }
  .budget-constraints { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .time-workspace { grid-template-columns: 1fr; gap: 15px; }
  .rings-orbit { width: min(100%, 560px); }
  .project-index { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .project-index-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .project-index-hint { display: none; }
  .workspace-label { display: none; }
  .workspace-toolbar { justify-content: space-between; }
}
@media (max-width: 760px) {
  .app-view { margin-left: 0; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .app-header .brand-compact > .brand-wordmark { display: inline-flex; font-size: 15px; }
  .navigation-pin { display: none; }
  .mode-switch button, .header-actions .stats-button { min-height: 44px; font-size: 13px; }
  .navigation-toggle { gap: 6px; padding-inline: 0; font-size: 11px; }
  .toolbar-profile { padding: 5px; }
  .toolbar-profile .profile-button-copy { display: none; }
  .dashboard-heading > .button { min-height: 44px; padding-inline: 10px; font-size: 11px; }
  .dashboard { width: 100%; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
  .workspace-toolbar { min-height: calc(65px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); gap: 8px; }
  .workspace-toolbar > .button { font-size: 11px; min-height: 44px; padding-inline: 10px; }
  .day-nav { grid-template-columns: 30px minmax(85px, auto) 30px; gap: 0; }
  .day-nav .icon-button { width: 30px; height: 44px; }
  .date-button { min-width: 0; }
  .dashboard-heading { margin: 26px 0 16px; }
  .dashboard-heading h1 { font-size: 29px; }
  .dashboard-heading > p:last-child { font-size: 12px; line-height: 1.65; }
  .time-workspace { min-height: 0; gap: 10px; }
  .project-index { padding-top: 20px; }
  .rings-orbit { width: min(100%, 510px); }
  .orbit-instruction { display: none; }
  .project-index-list { grid-template-columns: 1fr; }
  .project-index-item { padding: 13px 6px; }
  .project-index-item strong { font-size: 13px; }
  .project-index-item small { font-size: 11px; }
  .project-index-heading { margin-bottom: 6px; }
  .timer-dock { left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); border-radius: 9px; }
  .budget-hero { padding: 20px; gap: 20px; }
  .budget-panel { padding: 18px; }
  .budget-section-heading { flex-wrap: wrap; }
  .budget-hero-actions { justify-content: flex-start; }
  .budget-constraints { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .budget-constraints > span { border-bottom: 1px solid var(--line); }
  .budget-envelope-list { grid-template-columns: 1fr; }
  .budget-envelope { padding: 14px; }
  .budget-liquidity-cards { grid-template-columns: 1fr; }
  .budget-liquidity-cards > span { grid-template-columns: 1fr auto; align-items: baseline; }
  .budget-liquidity-cards em { grid-column: 1 / -1; }
  .budget-entry-row { gap: 7px; }
  .budget-entry-row > span small { font-size: 10px; }
  .audio-hero { grid-template-columns: 1fr; padding: 20px; }
  .audio-hero-actions small { font-size: 11px; }
  .audio-reliability-grid { grid-template-columns: 1fr; }
  .audio-reliability-grid article { padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); }
  .audio-recording-card { padding: 16px; }
  .audio-recording-heading { grid-template-columns: auto minmax(0,1fr); }
  .audio-recording-heading em { grid-column: 2; justify-self: start; }
  .audio-recording-actions { flex-wrap: wrap; }
  .tasks-capture { padding: 16px; }
  .todo-quick-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .todo-quick-title { grid-column: 1 / -1; }
  .todo-quick-form .button { grid-column: 1 / -1; min-height: 40px; }
  .todo-quick-form input, .todo-quick-form select { width: 100%; }
  .tasks-summary > span { flex-direction: column; gap: 5px; padding-inline: 12px; }
  .tasks-summary small { font-size: 9px; }
  .modal h2 { font-size: 22px; }
  .modal > form, .modal-content { padding: 22px; }
  .profile-modal-actions { padding-bottom: 12px; }
  .appearance-choices { gap: 9px; }
  .auth-view { grid-template-columns: 1fr; }
  .auth-intro { min-height: 0; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-message { margin: 26px 0 6px; }
  .auth-message h1 { font-size: 36px; }
  .auth-message > p:last-child { font-size: 12px; }
  .sample-rings { display: none; }
  .auth-panel-wrap { padding: 30px 24px 50px; }
  .auth-tabs { margin-bottom: 28px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea, .todo-quick-form input, .todo-quick-form select, .audio-hero-copy input { font-size: 16px; }
}
@media (max-width: 380px) {
  .dashboard { padding-inline: 14px; }
  .app-view:is([data-view="time"], [data-view="finance"]) .navigation-toggle > span { display: none; }
  .appearance-choices { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modal > form, .modal-content { padding: 18px; }
}

/* Budget: one summary, a ledger, and separate views for records and cash flow. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-view[data-view="finance"] .dashboard-heading { margin: 26px 0 18px; }
.app-view[data-view="finance"] .dashboard-heading > p { display: none; }
.budget-ledger { display: block; }
.budget-summary { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(130px, .8fr) minmax(130px, .8fr) auto; align-items: center; gap: 24px; padding: 14px 0 22px; }
.budget-summary-main, .budget-summary-secondary { display: grid; gap: 8px; }
.budget-summary span, .budget-summary small { color: var(--muted); font-size: 11px; }
.budget-summary strong { font-size: 21px; font-weight: 550; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.budget-summary-main > strong { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.budget-summary .is-negative, .budget-table .is-negative { color: var(--danger); }
.budget-summary-actions { display: grid; gap: 8px; }
.budget-calculation { margin-bottom: 24px; color: var(--muted); font-size: 11px; }
.budget-calculation summary { width: fit-content; cursor: pointer; }
.budget-calculation p { max-width: 660px; margin: 14px 0; line-height: 1.65; }
.budget-calculation dl { max-width: 540px; padding-left: 16px; border-left: 2px solid var(--line); }
.budget-calculation dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; }
.budget-calculation dd { flex-shrink: 0; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget-notice { display: block; width: 100%; margin: 0 0 16px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; font-size: 12px; line-height: 1.5; }
button.budget-notice { color: var(--accent); cursor: pointer; }
.budget-notice.is-alert { color: var(--danger); }
.budget-review-notice span { margin-left: 8px; }
.budget-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.budget-tabs button { padding: 15px 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 550; cursor: pointer; }
.budget-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.budget-tabs button:hover { color: var(--ink); }
.budget-tab-panel { padding-top: 24px; }
.budget-tab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.budget-ledger .budget-section { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.budget-ledger .budget-section-heading { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 18px; }
.budget-ledger .budget-section-heading h2 { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.budget-ledger .budget-section-heading > .button { margin-left: auto; }
.budget-section-count { color: var(--muted); font-size: 11px; }
.budget-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.budget-table thead th { padding: 10px 12px; color: var(--muted); font-size: 10px; font-weight: 500; text-align: right; border-bottom: 1px solid var(--line); background: var(--surface); }
.budget-table thead th:first-child { width: 30%; padding-left: 0; text-align: left; }
.budget-table thead th:last-child { width: 44px; }
.budget-table td { padding: 18px 12px; border-bottom: 1px solid var(--line); text-align: right; }
.budget-table tbody > tr:hover { background: var(--surface); }
.budget-table-name { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.budget-table-name > i { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; vertical-align: top; margin-top: 5px; background: var(--budget-color); }
.budget-table-name > span { display: inline-grid; width: calc(100% - 20px); gap: 5px; vertical-align: top; }
.budget-table-name button { width: fit-content; max-width: 100%; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; font-weight: 550; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.budget-table-name button:hover { text-decoration: underline; text-underline-offset: 3px; }
.budget-table-name small:empty { display: none; }
.budget-table-name small { color: var(--muted); font-size: 10px; font-weight: 400; }
.budget-table-track { display: block; width: 100%; max-width: 140px; height: 2px; margin-top: 3px; overflow: hidden; background: var(--line); }
.budget-table-track i { display: block; height: 100%; background: var(--budget-color); }
.budget-table .is-over .budget-table-track i { background: var(--danger); }
.budget-table .is-over .budget-table-name small { color: var(--danger); }
.budget-table .is-archived { opacity: .6; }
.budget-table-available { font-weight: 650; }
.budget-unset { color: var(--muted); font-weight: 400; }
.budget-table .budget-table-actions { padding-right: 0; }
.budget-table-actions .icon-button { width: 32px; height: 32px; font-size: 20px; font-weight: 400; }
.budget-cell-label { display: none; }
.budget-summary-secondary small { line-height: 1.6; }
.budget-salary-recognition { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; margin-bottom: 16px; border-block: 1px solid var(--line); font-size: 12px; }
.budget-tool-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.budget-search-form { display: grid; gap: 12px; }
.budget-search-form label, .budget-detail-search { display: grid; gap: 7px; font-size: 12px; }
.budget-search-form input, .budget-search-form select, .budget-detail-search input { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-solid); font: inherit; }
.budget-search-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.budget-search-filters label { flex: 1 1 145px; }
.budget-search-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.budget-search-row > div { flex: 1; min-width: 0; display: grid; gap: 5px; }
.budget-search-row strong { font-weight: 550; overflow-wrap: anywhere; }
.budget-search-row small { color: var(--muted); line-height: 1.6; }
.budget-search-row > b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.budget-search-row .button { flex-shrink: 0; }
.budget-tools-dialog { width: min(760px, calc(100vw - 24px)); }
.budget-tools-dialog h2 { font-size: 20px; }
.budget-tools-dialog .modal-body { padding-bottom: 22px; }
.budget-recurring { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 15px 0 24px; }
.budget-recurring .budget-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; font-size: 12px; }
.budget-recurring h3 { margin: 0; font-size: 14px; }
.budget-recurring .budget-tool-actions { margin-top: 16px; }
.budget-rules { margin-top: 26px; font-size: 12px; }
.budget-rules summary { cursor: pointer; color: var(--accent); }
.budget-transfer-candidate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; font-size: 12px; line-height: 1.6; }
.budget-source-note { padding: 12px; border-left: 2px solid var(--accent); overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
@media (max-width: 520px) {
  .budget-search-row { flex-wrap: wrap; gap: 8px; }
  .budget-search-row > div { flex-basis: calc(100% - 90px); }
  .budget-search-row .button { margin-left: auto; }
  .budget-recurring { padding: 12px; }
  .budget-tools-dialog { padding: 18px; }
}
.budget-table-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-ledger .budget-list-empty { justify-items: start; padding: 24px 0; border: 0; border-radius: 0; text-align: left; }
.budget-ledger .budget-list-empty strong { font-weight: 550; }
.budget-ledger .budget-list-empty p { margin: 0 0 10px; }
.budget-ledger .budget-entry-row { padding: 14px 0; }
.budget-ledger .budget-entry-row > span strong { font-weight: 550; }
.budget-ledger .budget-entry-row > b { font-weight: 550; }
.budget-more-entries { margin-top: 18px; }
.budget-ledger .bank-review-panel { margin-bottom: 28px; }
.budget-ledger .bank-review-panel .budget-section-heading small { display: block; max-width: 640px; margin-top: 10px; font-size: 11px; line-height: 1.5; }
.budget-treasury-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.budget-ledger .budget-liquidity-cards { display: grid; grid-template-columns: 1fr; gap: 0; }
.budget-ledger .budget-liquidity-cards > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.budget-ledger .budget-liquidity-cards small { color: var(--muted); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.budget-ledger .budget-liquidity-cards strong { color: var(--ink); font-size: 16px; font-weight: 550; }
.budget-ledger .budget-liquidity-cards em { display: none; }
.budget-ledger .budget-source-heading { margin-top: 16px; }
.budget-balance-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-ledger .budget-source-note { padding: 0; border: 0; background: transparent; font-size: 11px; line-height: 1.6; }
.budget-ledger .budget-panel-actions { gap: 8px; margin-top: 14px; }
.budget-ledger .budget-panel-actions .button { border: 0; padding-inline: 0; margin-right: 12px; }
.budget-ledger .budget-point-low { gap: 8px; padding: 0 0 18px; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.budget-ledger .budget-point-low > span { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.budget-ledger .budget-point-low strong { font-size: 24px; font-weight: 550; }
.budget-ledger .budget-point-low small { font-size: 11px; line-height: 1.5; }
.budget-ledger .budget-upcoming-list > button { padding: 14px 0; }
.budget-ledger .budget-upcoming-list i { color: var(--muted); background: transparent; }
.budget-ledger .budget-upcoming-list strong { font-size: 12px; font-weight: 550; }
.budget-ledger .budget-upcoming-list b { font-size: 12px; font-weight: 550; }
.budget-ledger .budget-setup-callout { display: block; padding: 0; border: 0; background: transparent; }
.budget-ledger .budget-setup-callout > span { display: none; }
.budget-ledger .budget-setup-callout p { margin-bottom: 12px; font-size: 11px; }
.budget-ledger .treasury-empty-note { padding: 8px 0; border: 0; color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) {
  .budget-summary { grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
  .budget-summary-actions { grid-column: 1 / -1; display: flex; }
  .budget-table { font-size: 11px; }
  .budget-table td, .budget-table thead th { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .budget-summary { grid-template-columns: 1.2fr 1fr; padding-top: 0; gap: 14px 20px; }
  .budget-summary-main { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .budget-summary-secondary { grid-column: 2; gap: 4px; }
  .budget-summary-actions { flex-wrap: wrap; }
  .budget-summary-actions .button { flex: 1; }
  .budget-summary-secondary strong { font-size: 17px; }
  .budget-tabs { justify-content: space-between; gap: 12px; }
  .budget-tabs button { font-size: 12px; }
  .budget-treasury-layout { grid-template-columns: 1fr; gap: 36px; }
  .budget-table, .budget-table tbody { display: block; }
  .budget-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .budget-table tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) 32px; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .budget-table .budget-table-name { grid-column: 1 / 3; padding: 0; border: 0; }
  .budget-table-name button { font-size: 13px; }
  .budget-table .budget-table-actions { grid-column: 3; grid-row: 1; padding: 0; }
  .budget-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0 0 0 16px; border: 0; text-align: left; font-size: 13px; }
  .budget-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .budget-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .budget-table td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .budget-table td:nth-child(5):not(.budget-table-actions) { grid-column: 2; grid-row: 3; }
  .budget-cell-label { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
  .budget-calculation dl > div { align-items: baseline; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

#colorChoices { display: flex; flex-wrap: wrap; gap: 8px; }
#colorChoices label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
#colorChoices input:disabled + span { opacity: .2; cursor: not-allowed; }
#colorChoices input:disabled + span::after { content: ""; position: absolute; inset: 50% 6px auto; height: 1px; background: var(--ink); transform: rotate(-45deg); }
#colorChoices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.core-actions .play-button { color: var(--on-accent); }


.ring-learning-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 12px 12px 30px;
  color: var(--muted);
  font-size: 11px;
}
.ring-learning-links button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ring-learning-links button:hover { color: var(--accent); }

/* The three colourful themes share components; each has its own accents and surfaces. */
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) body { background: var(--pop-body, radial-gradient(ellipse at 95% 5%, #dff9f2 0, transparent 45%), radial-gradient(ellipse at 25% 80%, #ffe4f2 0, transparent 55%), var(--paper)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .app-header { background: var(--pop-header, linear-gradient(165deg, #eee6ff, #fce5f2 70%, #e0f7f3)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .brand-wordmark { color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .logo-contour-outer { stroke: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .logo-contour-middle { stroke: var(--pop-logo-pink, #e53882); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .logo-contour-inner { stroke: var(--green-bright); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #timeModeButton { --nav-color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #financeModeButton { --nav-color: var(--pop-green); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #audioModeButton { --nav-color: var(--pop-blue); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #tasksModeButton { --nav-color: var(--pop-pink); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #sportModeButton { --nav-color: var(--pop-cyan); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #assistantButton { --nav-color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #statsButton { --nav-color: var(--pop-amber); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) #screenTimeButton { --nav-color: var(--pop-cyan); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.mode-switch button, .header-actions .stats-button) { color: var(--nav-color); background: color-mix(in srgb, var(--nav-color) 6%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.mode-switch button, .header-actions .stats-button):hover { background: color-mix(in srgb, var(--nav-color) 15%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .mode-switch button:is(.is-active, .is-active:hover) { color: #fff; background: var(--nav-color); box-shadow: 0 4px 12px color-mix(in srgb, var(--nav-color) 20%, transparent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.dashboard-heading h1, .modal h2, .learning-dialog-heading h2, .assistant-heading h2) { color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.button-primary, .button-dark, .audio-start-button, .todo-quick-form .button) { background: var(--pop-primary, linear-gradient(120deg, #6933e6, #a526bf)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 13%, transparent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.button-primary, .button-dark, .audio-start-button, .todo-quick-form .button):hover { background: var(--pop-primary-hover, linear-gradient(120deg, #5824cc, #891da5)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .button-light { color: var(--accent); background: var(--pop-light, #f0e8ff); border-color: var(--pop-light-border, #cbb4fa); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .button-light:hover { background: var(--pop-light-hover, #e6d7ff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.quick-button, .core-book-status) { background: var(--pop-light, #f1e8ff); border-color: var(--pop-light-border, #d2bafc); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .quick-button { color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .project-index-item { background: color-mix(in srgb, var(--project-color) 7%, #fff); border-color: color-mix(in srgb, var(--project-color) 22%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .project-index-item[aria-pressed="true"] { background: color-mix(in srgb, var(--project-color) 14%, #fff); border-color: var(--project-color); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .project-index-item > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-color) 15%, transparent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .project-ring .orbit-progress { filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ring-color) 20%, transparent)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .timer-dock { border-color: color-mix(in srgb, var(--timer-color) 40%, #fff); background: color-mix(in srgb, var(--timer-color) 8%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-summary { padding: 20px; border: 1px solid var(--pop-budget-border, #b8e6d6); border-radius: 12px; background: var(--pop-budget, linear-gradient(110deg, #dff8ec, #eff8ff 60%, #f1e8ff)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-summary-main > strong:not(.is-negative) { color: var(--pop-green); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-summary-secondary > strong:not(.is-negative) { color: var(--pop-blue); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-summary-secondary:nth-child(3) > strong:not(.is-negative) { color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-tabs button[aria-selected="true"] { color: var(--accent); background: var(--pop-light, #f0e8ff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-table thead th { background: var(--pop-light, #ede7ff); color: var(--accent); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .budget-table tbody tr:nth-child(odd) { background: #ffffffb3; }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-welcome, .audio-hero) { background: var(--pop-learning, linear-gradient(120deg, #e4efff, #f2e5ff 65%, #ffe5f1)); border-color: var(--pop-learning-border, #c6b2f3); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .learning-sidebar { background: var(--pop-blue-soft, #eff4ff); border-color: var(--pop-blue-border, #c6d8fa); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-material, .stat-summary-card, .capture-guide-step) { --card-color: var(--pop-blue); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-material, .stat-summary-card, .capture-guide-step):nth-child(3n+2) { --card-color: var(--pop-pink); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-material, .stat-summary-card, .capture-guide-step):nth-child(3n) { --card-color: var(--pop-green); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-material, .stat-summary-card, .capture-guide-step) { background: color-mix(in srgb, var(--card-color) 7%, #fff); border-color: color-mix(in srgb, var(--card-color) 30%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.learning-material-icon, .learning-material strong) { color: var(--card-color); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .learning-material progress { accent-color: var(--card-color); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .learning-material:hover { background: color-mix(in srgb, var(--card-color) 13%, #fff); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .tasks-capture { background: var(--pop-tasks, linear-gradient(110deg, #ffe4f0, #f0e7ff)); border-color: var(--pop-pink-border, #efb7d3); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .todo-group-heading h3 { color: var(--pop-pink); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .todo-group-heading b { color: var(--pop-pink); background: var(--pop-pink-soft, #ffe1ef); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .todo-card { background: var(--paper); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .todo-card:hover { background: var(--pop-pink-soft, #fff0f7); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .todo-card.is-completed .todo-check { color: #fff; background: var(--pop-green); border-color: var(--pop-green); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) :is(.assistant-heading, .assistant-compose) { background: var(--pop-assistant, linear-gradient(110deg, #f0e7ff, #ffe7f2)); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .assistant-suggestions button { color: var(--pop-blue); background: var(--pop-blue-soft, #edf4ff); border-color: var(--pop-blue-border, #c6d8fa); }
:root:is([data-palette="vivid"], [data-palette="solstice"], [data-palette="lagoon"]) .assistant-suggestions button:nth-child(even) { color: var(--pop-pink); background: var(--pop-pink-soft, #fff0f7); border-color: var(--pop-pink-border, #efb7d3); }
/* Preview remains truthful even when another theme is active. */
.palette-choice input[value="vivid"] + .palette-card .palette-preview { background: linear-gradient(110deg, #e3f9ef, #f1e6ff, #ffe3f1); }
.palette-choice input[value="vivid"] + .palette-card .palette-preview > i { background: linear-gradient(#8652f5, #e53882); }
.palette-choice input[value="vivid"] + .palette-card .palette-preview b { opacity: 1; }
.palette-choice input[value="vivid"] + .palette-card .palette-preview b:nth-child(2) { background: #009b72; }
.palette-choice input[value="vivid"] + .palette-card .palette-preview b:nth-child(3) { background: #e53882; }
.palette-choice input:is([value="solstice"], [value="lagoon"]) + .palette-card .palette-preview b { opacity: 1; }
.palette-choice input[value="solstice"] + .palette-card .palette-preview { background: linear-gradient(110deg, #fff0bd, #ffe4ce, #ffdae5); }
.palette-choice input[value="solstice"] + .palette-card .palette-preview > i { background: linear-gradient(#e87c19, #ef4e72); }
.palette-choice input[value="solstice"] + .palette-card .palette-preview b:nth-child(2) { background: #d87b06; }
.palette-choice input[value="solstice"] + .palette-card .palette-preview b:nth-child(3) { background: #ef4e72; }
.palette-choice input[value="lagoon"] + .palette-card .palette-preview { background: linear-gradient(110deg, #dcf7d1, #d9f5ef, #eadeff); }
.palette-choice input[value="lagoon"] + .palette-card .palette-preview > i { background: linear-gradient(#009eae, #754bf2); }
.palette-choice input[value="lagoon"] + .palette-card .palette-preview b:nth-child(2) { background: #754bf2; }
.palette-choice input[value="lagoon"] + .palette-card .palette-preview b:nth-child(3) { background: #e2369c; }

/* Card rings share the dial while keeping long deck paths readable. */
.core-anki-info { display: grid; gap: 5px; margin: 8px 0 12px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; }

.anki-ring-picker { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; margin-top: 10px; padding: 3px; }
.anki-ring-picker[hidden] { display: none; }
.anki-ring-option { display: grid; gap: 4px; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.anki-ring-option[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 3px 0 currentColor; }
.anki-ring-option small { color: var(--muted); font-size: 12px; }
.anki-ring-option:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
#projectAnkiSelection { overflow-wrap: anywhere; }
#projectAnkiFields > label { display: grid; gap: 8px; margin-bottom: 6px; }
#projectAnkiSearch { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); font: inherit; font-size: 16px; }
#projectAnkiSearch:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }

/* Salary planning uses the same theme tokens as the monthly ledger. */
.budget-planning { margin: 0 0 30px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.budget-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.budget-plan-heading h2 { margin: 7px 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 550; letter-spacing: -.05em; }
.budget-plan-heading p:not(.eyebrow), .budget-plan-help, .budget-plan-empty { color: var(--muted); font-size: 12px; line-height: 1.7; }
.budget-salary-form { width: min(100%, 330px); flex-shrink: 0; }
.budget-salary-form > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.budget-salary-form > div { display: flex; gap: 8px; }
.budget-salary-form .input-with-suffix { min-width: 0; flex: 1; }
.budget-salary-form input { min-width: 0; width: 100%; }
.budget-salary-form > small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.budget-plan-layout { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 38px; align-items: center; margin: 30px 0 20px; }
.budget-pie-wrap { text-align: center; }
.budget-pie { display: block; width: 100%; max-width: 280px; margin: auto; overflow: visible; }
.budget-pie path { stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.budget-pie path[data-budget-details] { cursor: pointer; transition: opacity .15s; }
.budget-pie path[data-budget-details]:hover { opacity: .8; }
.budget-pie-wrap p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.budget-plan-total { display: grid; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.budget-plan-total > span { font-size: 11px; color: var(--muted); }
.budget-plan-total > strong { font-size: 32px; letter-spacing: -.05em; font-weight: 550; }
.budget-plan-total.is-over > strong { color: var(--danger); }
.budget-plan-total > small { color: var(--muted); font-size: 11px; }
.budget-plan-legend { display: grid; margin-top: 12px; }
.budget-plan-legend > button, .budget-plan-legend > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-align: left; }
.budget-plan-legend > button { cursor: pointer; }
.budget-plan-legend > button:hover { background: var(--surface); }
.budget-plan-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--budget-color); }
.budget-plan-legend i.budget-unallocated-dot { background: var(--line); }
.budget-plan-legend > button > span { overflow-wrap: anywhere; }
.budget-plan-legend small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.budget-plan-legend b { font-weight: 550; font-variant-numeric: tabular-nums; }
.budget-plan-legend > :is(button, div) > span:last-child { min-width: 85px; text-align: right; font-variant-numeric: tabular-nums; }
.budget-plan-help { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.budget-salary-share { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); }
.budget-details-modal [hidden] { display: none; }
.budget-details-modal { width: min(760px, calc(100vw - 24px)); padding: 24px; }
.budget-details-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.budget-details-toolbar label { display: grid; gap: 8px; font-size: 12px; }
.budget-details-modal .budget-entry-row { grid-template-columns: 8px minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  .budget-planning { padding: 18px; }
  .budget-plan-heading { flex-direction: column; gap: 18px; }
  .budget-salary-form { width: 100%; }
  .budget-plan-layout { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .budget-pie { max-width: 220px; }
  .budget-plan-legend > button, .budget-plan-legend > div { gap: 8px; font-size: 11px; }
  .budget-plan-legend > :is(button, div) > span:last-child { min-width: 70px; }
  .budget-details-toolbar { flex-wrap: wrap; }
  .budget-details-modal { padding: 18px; }
}

/* Budget: named swatches wrap on small screens; any saved hex remains editable. */
.budget-color-choices { flex-wrap: wrap; gap: 10px; }
.budget-color-choices label { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.budget-custom-color { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.budget-custom-color input[type="color"] { width: 64px; height: 44px; padding: 3px; cursor: pointer; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 8px; }
.budget-color-choices input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 4px; }