/* main.css — layered as: reset/base → :root tokens → tab modules → polish/overlay. Keep new component colors on `var(--*)`; see docs/DESIGN_SYSTEM.md. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Kill the default mobile tap overlay (a black rectangle that ignores border-radius) so press feedback follows each component's own shape. */ /* Reserve scrollbar space at all times so locking body scroll (when a modal opens) does NOT cause the page to shift horizontally as the scrollbar disappears. Paired with body.modal-locked below. */ html{-webkit-tap-highlight-color:transparent;scrollbar-gutter:stable} /* Soft-keyboard inset variables live in `:root` with design tokens below; utils.js keeps them in sync via VisualViewport. */ /* M5: 100vh on mobile Safari reports the *maximum* visible area including the address bar, which pushes content behind the toolbar. Prefer 100dvh (dynamic viewport) and fall back to 100vh for browsers that don't support dvh. */ body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 88px;background:var(--bg-0);color:var(--text-1);font-family:var(--font-sans);font-size:var(--fs-14);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* Modal-open body lock — set by Modal.open() in js/modal.js. position:fixed is the iOS-safe pattern (overflow:hidden alone doesn't stop scroll on iOS Safari). The Modal utility writes top:-scrollY inline so the page visually stays put; on unlock it restores scrollY via window.scrollTo. */ body.modal-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden} button{cursor:pointer;font-family:inherit;border:none;-webkit-tap-highlight-color:transparent}button:hover{filter:brightness(1.12)} .task-item .ta-btn:hover,.task-item .task-checkbox:hover,.task-item .task-chevron:hover{filter:none} /* Keyboard-focus outline. Modern browsers render `outline` so it follows the focused element's own `border-radius` automatically — no need (or correctness) in setting `border-radius:inherit` here, which would override each rounded control's own corners with the parent's (usually zero) value, producing a sharp rectangle on focused chips/pills. */ *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .task-checkbox:focus-visible{border-radius:50%} .toggle:focus-visible{border-radius:10px} input,select,textarea{font-family:inherit} ::selection{background:rgba(26,140,255,.25);color:var(--text-1)} /* Scrollbar — themed via tokens; light-theme override at body.light-theme below. A second hardcoded ::-webkit-scrollbar rule used to live below this and silently shadowed it at equal specificity (4px wide, hex color); removed so this wins. */ *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px} *::-webkit-scrollbar-thumb:hover{background:var(--border-strong)} input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}} @keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}} /* Task-card insertion: slides in when window._lastAddedTaskId matches. Two stacked animations: slideIn (transform/opacity) AND a backdrop halo (taskJustAdded) that pulses --accent-bg, then decays to default. The halo gives the eye a clear target after the slide settles, especially on long lists where the new card lands offscreen-bottom and the scrollIntoView only just got us there. */ .task-item--enter{animation:slideIn .24s ease-out both,taskJustAdded 1.4s ease-out .24s both} @keyframes taskJustAdded{ 0% {box-shadow:0 0 0 0 var(--accent-bg),inset 0 0 0 2px var(--accent-border);background:var(--accent-bg)} 35% {box-shadow:0 0 0 6px transparent, inset 0 0 0 2px var(--accent-border);background:var(--accent-bg)} 100% {box-shadow:0 0 0 0 transparent, inset 0 0 0 0 transparent; background:var(--bg-1)} } @media (prefers-reduced-motion:reduce){ .task-item--enter{animation:none} } :root{ --kb-inset:0px;--vv-height:100dvh; /* Typography */ --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace; /* Surface colors — cool graphite/slate canvas for an Intel "Pentium" tech feel. --bg-0 matches index.html theme-color + manifest theme/background (#0a1019). Tuned to preserve AA text contrast against the cool base. */ --bg-0:#0a1019; --bg-1:#111a27; --bg-2:#182536; --bg-3:#213348; /* --border lifted off --bg-3 so card edges stay visible in active states. --border-subtle keeps a near-invisible divider where intended. */ --border:#2a3c52; --border-subtle:#1d2c3e; --border-strong:#38506b; /* Text — cool off-white, high-contrast on the slate --bg-0. --text-3 holds AA (~4.7:1 on #0a1019); --text-4 is non-text use (dividers, dots). */ --text-1:#e9eff7; --text-2:#aab8cc; --text-3:#8593a8; --text-4:#647285; /* Accents — brand primary is electric Intel blue, paired with a cyan to form the iconic blue→cyan "Pentium" gradient. */ --accent:#1a8cff; --accent-bg:rgba(26,140,255,.14); --accent-border:rgba(26,140,255,.34); /* Brand gradient — primary "+ Add", FAB, active nav, header mark. */ --brand-grad:linear-gradient(135deg,#1a8cff 0%,#14b4e0 50%,#18d4e6 100%); --brand-grad-soft:linear-gradient(135deg,rgba(26,140,255,.18),rgba(24,212,230,.16)); --text-on-brand:#04121f; --success:#2ecf73; --success-bg:rgba(46,207,115,.13); --success-border:rgba(46,207,115,.32); --warning:#ffb02e; --warning-bg:rgba(255,176,46,.14); --warning-border:rgba(255,176,46,.32); --danger:#ff5247; --danger-bg:rgba(255,82,71,.14); --danger-border:rgba(255,82,71,.34); --purple:#9b7bff; --purple-bg:rgba(155,123,255,.14); --purple-border:rgba(155,123,255,.32); --pink:#ff4d8d; /* Aliases — priority chips, hovers, semantic dots (see DESIGN_SYSTEM.md). Hues stay distinct (red / amber / blue / slate) for fast scanning. */ --prio-urgent:var(--danger); --prio-high:var(--warning); --prio-normal:var(--accent); --prio-low:var(--text-3); --accent-hover:#3d9eff; /* Subtle theme-adaptive hover wash for low-emphasis controls (icon buttons, chip removers, menu cells) — replaces scattered hardcoded rgba(255,255,255,…) overlays so light theme behaves too. */ --hover-soft:rgba(255,255,255,.06); /* Text/icon on saturated brand/success/warning fills (dark navy reads better on the bright blue/cyan/green/amber than white). */ --text-on-accent:#04121f; --text-on-inverse:#fff; --starred:var(--warning); --panel-dot-tasks:var(--pink); --quick-accent:var(--accent); /* Phase colors (back-compat) — cool, tech tints. */ --work:var(--accent);--work-glow:rgba(26,140,255,.4);--work-bg:#0d1c30;--work-border:#1c3a5a; --short:var(--success);--short-glow:rgba(46,207,115,.4);--short-bg:#0c241a;--short-border:#1a4a32; --long:var(--warning);--long-glow:rgba(255,176,46,.4);--long-bg:#241c0b;--long-border:#4a3a18; /* Life-area category accents — cool/tech variants for cohesion. */ --cat-bodyMindSpirit:#9b7bff; --cat-relationships:#ff6b6b; --cat-community:#ffb02e; --cat-jobLearningFinances:#2ecf73; --cat-interests:#18d4e6; --cat-personalCare:#ff66b3; --cat-general:#8a9bb5; /* Radii */ --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px; /* Surface gradients — soften flat fills so panels/sidebar read as rounded, lightly-lit cards rather than hard boxes. A faint top→bottom wash plus a hairline top highlight gives depth without heavy borders. */ --surface-grad:linear-gradient(180deg,#16212f,#0f1825); /* Faded dividers — fade out at both ends and stay translucent through the middle so a panel/sidebar edge reads as a soft seam, not a hard box line. `-h` is the horizontal twin for the top bar's lower edge. Use as `border-image: var(--divider-fade) 1`. */ --divider-fade:linear-gradient(180deg,transparent,color-mix(in srgb,var(--border-subtle) 70%,transparent) 14%,color-mix(in srgb,var(--border) 55%,transparent) 50%,color-mix(in srgb,var(--border-subtle) 70%,transparent) 86%,transparent); --divider-fade-h:linear-gradient(90deg,transparent,color-mix(in srgb,var(--border-subtle) 70%,transparent) 8%,color-mix(in srgb,var(--border) 50%,transparent) 50%,color-mix(in srgb,var(--border-subtle) 70%,transparent) 92%,transparent); /* Spacing — 4-pt baseline. Migrate components incrementally; literals in legacy rules continue to work. */ --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:10px;--space-6:12px;--space-7:14px;--space-8:16px; --space-9:24px; /* Fluid type ramp — clamp() so phones see the floor, big screens scale up, no value drops below 11px (the smallest accessible body text). */ --fs-12:clamp(11px,0.4vw + 10px,12px); --fs-13:clamp(12px,0.5vw + 11px,13px); --fs-14:clamp(13px,0.6vw + 12px,15px); --fs-16:clamp(14px,0.8vw + 12px,16px); --fs-20:clamp(18px,1.5vw + 14px,22px); --fs-48:clamp(36px,6vw + 12px,52px); /* Animation easing language — unified across all transitions */ --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.45,0,0.55,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; /* Modal/overlay open transition — sits between base UI feedback and slow emphasis. Used by .modal-overlay (and .cmdk-overlay for its faster fade via --dur-fast). One token = one place to retune all modal motion. */ --dur-modal:240ms; /* Elevation shadow language — one shadow depth per surface tier */ --shadow-card:0 1px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12); --shadow-raised:0 4px 16px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.14); --shadow-overlay:0 16px 48px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.22); /* Z-index stratification. Migrate hardcoded values as surfaces are touched. Dialog sits above modal so app-confirm/prompt overlays render over a task detail modal. Toast sits above dialog so destructive-action toasts remain visible. Cmdk sits above toast so the palette never gets occluded. */ --z-sticky:5; --z-popover:100; --z-fab:500; --z-modal:1000; --z-dialog:9200; --z-toast:1200; --z-overlay:1450; --z-cmdk:1500; --z-skip-link:9999; /* Ring-time warn/done — token-driven so light-theme can override them. Amber + red clear AA against the dark --work-bg. */ --ring-warn-color:#ffb02e; --ring-done-color:#ff5247; color-scheme:dark; } /* Life-area chip/stripe tokens via data-cat-id — no inline style= (CSP). */ [data-cat-id="bodyMindSpirit"]{--sv-cat:var(--cat-bodyMindSpirit);--md-cat:var(--cat-bodyMindSpirit);--ui-chip-dot:var(--cat-bodyMindSpirit);--cat-stripe:var(--cat-bodyMindSpirit)} [data-cat-id="relationships"]{--sv-cat:var(--cat-relationships);--md-cat:var(--cat-relationships);--ui-chip-dot:var(--cat-relationships);--cat-stripe:var(--cat-relationships)} [data-cat-id="community"]{--sv-cat:var(--cat-community);--md-cat:var(--cat-community);--ui-chip-dot:var(--cat-community);--cat-stripe:var(--cat-community)} [data-cat-id="jobLearningFinances"]{--sv-cat:var(--cat-jobLearningFinances);--md-cat:var(--cat-jobLearningFinances);--ui-chip-dot:var(--cat-jobLearningFinances);--cat-stripe:var(--cat-jobLearningFinances)} [data-cat-id="interests"]{--sv-cat:var(--cat-interests);--md-cat:var(--cat-interests);--ui-chip-dot:var(--cat-interests);--cat-stripe:var(--cat-interests)} [data-cat-id="personalCare"]{--sv-cat:var(--cat-personalCare);--md-cat:var(--cat-personalCare);--ui-chip-dot:var(--cat-personalCare);--cat-stripe:var(--cat-personalCare)} [data-cat-id="general"]{--sv-cat:var(--cat-general);--md-cat:var(--cat-general);--ui-chip-dot:var(--cat-general);--cat-stripe:var(--cat-general)} body.light-theme{ color-scheme:light; /* Cool silver/white canvas — clean tech surface with a faint blue tint. */ --bg-0:#eef2f8;--bg-1:#ffffff;--bg-2:#f5f8fc;--bg-3:#dde5f0; /* Light-theme border lifted off --bg-3 to keep card edges visible. */ --border:#cdd8e6;--border-subtle:#dde5f0;--border-strong:#bcc9da; /* Light surface gradients — keep panels bright, just a whisper of cool wash. */ --surface-grad:linear-gradient(180deg,#ffffff,#f7faff); /* Brand on light: a deeper Intel blue so accent text/fills clear AA on white. */ --accent:#0a6fd6; --accent-bg:rgba(10,111,214,.10); --accent-border:rgba(10,111,214,.30); --brand-grad:linear-gradient(135deg,#0a6fd6 0%,#0a9bcf 50%,#0aa6c4 100%); --brand-grad-soft:linear-gradient(135deg,rgba(10,111,214,.10),rgba(10,166,196,.10)); /* Cool-grey text tuned to clear AA on the silver --bg-0. */ --text-1:#0e1726;--text-2:#46566b;--text-3:#46566b;--text-4:#6a7a90; --work-bg:#eaf3fd;--work-border:#cbe1f7; --short-bg:#eafaf1;--short-border:#cdeedc; --long-bg:#fff6e6;--long-border:#fbe4ba; --success:#1f9d57; --success-bg:rgba(31,157,87,.12); --success-border:rgba(31,157,87,.30); --warning:#b5781a; --warning-bg:rgba(181,120,26,.13); --warning-border:rgba(181,120,26,.30); --danger:#cf3b34; --danger-bg:rgba(207,59,52,.12); --danger-border:rgba(207,59,52,.30); --purple:#6b4ed6; --purple-bg:rgba(107,78,214,.12); --purple-border:rgba(107,78,214,.30); --pink:#c43d72; --text-on-brand:#fff; --text-on-accent:#fff; --cat-bodyMindSpirit:#6b4ed6; --cat-relationships:#cf3b34; --cat-community:#b5781a; --cat-jobLearningFinances:#1f9d57; --cat-interests:#0a8ba6; --cat-personalCare:#bd3a78; --cat-general:#5a6b80; /* Ring-time on light --work-bg needs deeper hues to clear AA at large-text thresholds (3:1). Burnt amber + brick red both pass. */ --ring-warn-color:#b5781a; --ring-done-color:#bf322b; --accent-hover:#0860bb; --hover-soft:rgba(14,23,38,.06); --prio-low:var(--text-4); } .shdr{display:flex;align-items:center;gap:8px;margin-bottom:12px} .sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0} /* Sdot color semantic variants */ .sdot--quick{background:var(--quick-accent)} .sdot--sw{background:var(--purple)} .sdot--chimes{background:var(--accent)} .sdot--accent{background:var(--accent)} .sdot--history{background:var(--purple)} .sdot--long{background:var(--long)} .sdot--work{background:var(--work)} .sdot--short{background:var(--short)} /* ── Utility/semantic classes used to retire HTML inline style="..." ── */ /* Layout */ .row-flex{display:flex;align-items:center;gap:6px} .row-flex--gap-5{display:flex;gap:5px} .row-flex--gap-8{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between} .row-flex--end{display:flex;gap:6px;align-items:flex-end} .col-stretch{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0 14px} .col-stretch--top{border-top:1px solid var(--border);margin-top:6px} .col-stretch--bot{border-bottom:1px solid var(--border)} .grow-120{flex:1 1 120px} .grow-100{flex:1 1 100px} .full-w{width:100%} .qa-fields-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:4px} /* Typography */ .text-hint{font-size:11px;color:var(--text-3);line-height:1.5;max-width:100%} .text-hint--block{font-size:11px;color:var(--text-3);line-height:1.5;margin:0 0 10px} .text-status{font-size:11px;font-weight:600;color:var(--text-3)} .text-italic-hint{font-size:11px;color:var(--text-3);margin-top:4px;font-style:italic} /* Phase colors (initial render — JS may swap on phase change) */ .text-work{color:var(--work)} .text-short{color:var(--short)} .text-long{color:var(--long)} /* Cards */ .card--work-phase{background:var(--work-bg);border:1px solid var(--work-border);margin-top:12px} .card--short-phase{background:var(--short-bg);border:1px solid var(--short-border);margin-top:12px} .card--long-phase{background:var(--long-bg);border:1px solid var(--long-border);margin-top:12px} .panel--timer-sub{padding:var(--space-8)} /* Modal field utilities */ .mdName-input{flex:1;font-size:14px;font-weight:700} .app-dlg-msg--p{margin:0;font-size:14px;line-height:1.5} .app-dlg-msg--label{display:block;margin:0 0 10px;font-size:13px;white-space:pre-wrap;line-height:1.45} .app-prompt-textarea{width:100%;min-height:88px} .text-12-muted{color:var(--text-3);font-size:12px} .text-danger{color:var(--danger)} .text-3{color:var(--text-3)} .text-4{color:var(--text-4)} .mt-0{margin-top:0} .calfeed-worker-list{font-size:11px;line-height:1.6;padding-left:18px;color:var(--text-3)} .calfeed-worker-note{font-size:11px;color:var(--text-3)} .progress-bar{width:0%} .ts-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle} /* Stopwatch layout classes (replaces inline styles) */ .sw-body{text-align:center} .sw-display{font-size:42px;font-weight:800;color:var(--text-1);letter-spacing:3px;font-variant-numeric:tabular-nums;margin-bottom:12px} .sw-buttons{display:flex;gap:10px;justify-content:center} .sw-laps{margin-top:10px;display:flex;flex-direction:column;gap:3px;max-height:120px;overflow-y:auto} /* margin:0 defends against browser default h2/h3 margins — section labels are now real headings (h2.slbl) but visually identical. */ .slbl{margin:0;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--text-3)} .scnt{font-size:10px;color:var(--text-4);margin-left:auto} .small-btn{background:transparent;color:var(--text-4);font-size:9px;letter-spacing:1px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);padding:4px 10px;margin-left:6px} .stitle{display:flex;align-items:center;gap:8px;margin-bottom:12px;cursor:pointer;user-select:none} .stitle.stitle-static{cursor:default} .sarrow{margin-left:auto;color:var(--text-4);font-size:12px;transition:transform var(--dur-base) var(--ease-out)} .sbody{overflow:hidden;transition:max-height .35s ease} /* Settings tab uses a static (non-collapsing) body — the tab itself is the toggle, so the legacy max-height accordion is opted out via this class. */ .sbody.sbody-static{overflow:visible;max-height:none!important;transition:none} /* Settings body acts as a query container so the section grid + spacing adapt to the *panel* width rather than the viewport. The .container at line 850 caps app width at 960px, so on a 1920px monitor the panel is ~928px regardless; @container avoids a hard breakpoint here. */ #settingsBody{container-type:inline-size;container-name:settings} .srow{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap} .srow--full{display:block} .notif-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:var(--r-sm);font-size:var(--fs-12);line-height:1.45} .notif-status--ok{background:color-mix(in srgb, var(--success) 12%, transparent);border:1px solid color-mix(in srgb, var(--success) 30%, transparent);color:var(--text-1)} .notif-status--warn{background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 30%, transparent);color:var(--text-1)} .notif-status--err{background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);color:var(--text-1)} .notif-status-btn{flex-shrink:0;padding:4px 10px;border-radius:6px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:600;cursor:pointer} .notif-status-btn:hover{background:var(--accent);color:var(--text-on-accent)} .sr-lbl{font-size:10px;color:var(--text-3);letter-spacing:1px;min-width:120px} .sinput{width:56px;padding:6px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:var(--fs-13);font-family:inherit;text-align:center;outline:0} .sinput:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} select.sinput{width:auto;min-width:140px;text-align:left;padding-right:24px} .sunit{font-size:10px;color:var(--text-3)} .toggle{width:44px;height:26px;border-radius:13px;background:var(--bg-3);position:relative;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);border:1px solid var(--border-strong)} .toggle.on{background:var(--accent-bg);border-color:var(--accent-border)} .tknob{width:18px;height:18px;border-radius:50%;background:var(--text-2);position:absolute;top:3px;left:3px;transition:left var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)} .toggle.on .tknob{left:calc(100% - 21px);background:var(--accent)} .fl{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:6px} .fi{padding:7px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:12px;font-family:inherit;outline:0} .fi:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} .fi-w{width:100%}.fi-n{width:48px}.fi-s{min-width:110px;width:auto;cursor:pointer;padding-right:24px} .iform{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;padding:var(--space-6);background:var(--bg-1);border-radius:var(--r-md);border:1px solid var(--border-subtle);margin-bottom:10px} .iadd{padding:7px 14px;background:var(--success);border:none;border-radius:var(--r-sm);color:var(--text-on-accent);font-size:11px;font-weight:700;letter-spacing:1px} .iadd:hover{filter:brightness(1.08)} .iprev{padding:7px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-3);font-size:14px} .ilist{display:flex;flex-direction:column;gap:5px} .iitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--border-subtle);transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)} .iitem.flash{background:var(--accent-bg);border-color:var(--accent-border)} .idot{width:7px;height:7px;border-radius:50%;background:var(--text-4);flex-shrink:0;transition:background var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)} .idot.active{background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 45%,transparent)} .idot.flash{background:var(--accent-hover);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent)} .iinfo{flex:1;min-width:0}.iname{font-size:11px;font-weight:600;color:var(--text-2);word-break:break-word} .imeta{font-size:var(--fs-12);color:var(--text-3);margin-top:1px} .istat{text-align:right;flex-shrink:0}.ifires{font-size:13px;font-weight:700;color:var(--accent)}.ifires.flash{color:var(--accent-hover)} .inext{font-size:var(--fs-12);color:var(--text-3);margin-top:1px} .irm{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--r-sm);color:var(--text-4);font-size:11px;flex-shrink:0} .iempty{text-align:center;padding:10px 0;color:var(--text-4);font-size:10px;letter-spacing:1px} .task-form{display:flex;gap:8px;margin-bottom:12px} .task-input{flex:1;padding:9px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:12px;font-family:inherit;outline:0} .task-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} .task-input::placeholder{color:var(--text-4)} /* .task-add canonical rule lives near the design-system primary buttons (line ~716). The legacy green-gradient rule that lived here was dead code — superseded by the cascade — and removed to avoid future confusion about which color the Add button should be. */ /* Reserve vertical space so the first paint (empty taskList) matches the populated render that arrives once app.js executes — otherwise the FAB, footer and surrounding chrome shift down noticeably when N tasks land. */ .task-list{display:flex;flex-direction:column;gap:6px;min-height:50vh;contain:layout} /* Mini-timer: body padding keeps content above the floating pill */ body:has(.mini-timer.visible){padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))} /* Task tags: cap width to prevent horizontal overflow when task has many tags */ .task-tags-inline{display:flex;flex-wrap:wrap;gap:4px;max-width:100%} .task-tags-inline .tag-chip{max-width:100%;white-space:normal;word-break:break-word} /* Nested task tree */ .task-chevron{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;transition:transform var(--dur-base) var(--ease-out);font-size:9px;user-select:none} .task-chevron:hover{color:var(--text-2)} .task-chevron.collapsed{transform:rotate(-90deg)} .task-chevron.leaf{visibility:hidden} .task-add-sub-btn{width:auto;height:24px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:3px;background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--r-sm);color:var(--success);font-size:11px;font-weight:700;letter-spacing:.5px;line-height:1;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);cursor:pointer;font-family:inherit} .task-add-sub-btn:hover{background:color-mix(in srgb,var(--success) 18%,transparent);color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,var(--border))} .task-own-time{font-size:8px;color:var(--text-4);letter-spacing:1px} .task-subtask-form{display:flex;gap:6px;padding:8px 12px;background:var(--bg-0);border:1px dashed var(--border);border-radius:var(--r-sm);animation:slideIn var(--dur-fast) var(--ease-out)} .task-sub-input{flex:1;padding:6px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:11px;font-family:inherit;outline:0} .task-sub-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} .task-sub-btns{display:flex;gap:4px;flex-shrink:0} .task-sub-btn{padding:6px 12px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:1px;border:none;font-family:inherit;cursor:pointer} .task-sub-add{background:var(--accent);color:var(--text-on-accent)} .task-sub-cancel{background:var(--bg-2);color:var(--text-3);border:1px solid var(--border)} .task-breadcrumb{font-size:9px;color:var(--text-3);letter-spacing:1px;margin-right:6px;opacity:.7} /* ========== ClickUp-style Task Manager ========== */ /* Lists (projects) bar */ .lists-bar{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-5) var(--space-6);background:var(--bg-1);border-radius:var(--r-md);border:1px solid var(--border-subtle);margin-bottom:10px;align-items:center} /* .list-chip base + active states consolidated with `.ui-chip` in the design-system block */ .list-chip .lc-dot{width:8px;height:8px;border-radius:50%} .list-chip .lc-count{font-size:9px;opacity:.7;padding:1px 5px;background:rgba(0,0,0,.3);border-radius:8px} .list-chip .lc-rm{margin-left:4px;opacity:0;color:var(--danger);font-size:10px;transition:opacity var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)} .list-chip:hover .lc-rm{opacity:.5} .list-chip .lc-rm:hover{opacity:1;color:var(--danger)} .list-chip .lc-edit{margin-left:4px;opacity:0;color:var(--text-3);font-size:10px;transition:opacity var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);cursor:pointer} .list-chip:hover .lc-edit{opacity:.5} .list-chip .lc-edit:hover{opacity:1;color:var(--accent)} .list-chip--all{font-style:italic} .list-add{padding:6px 10px;background:transparent;border:1px dashed var(--border-strong);border-radius:var(--r-sm);color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit} .list-add:hover{border-color:var(--accent);color:var(--accent)} .list-new-form{display:flex;gap:6px;align-items:center} .list-new-input{padding:5px 8px;background:var(--bg-2);border:1px solid var(--accent-border);border-radius:var(--r-sm);color:var(--text-1);font-size:11px;font-family:inherit;outline:0;width:120px} /* Task toolbar: search, filter, sort, view */ .task-toolbar{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-4) var(--space-5);background:var(--bg-1);border-radius:var(--r-md);border:1px solid var(--border-subtle);margin-bottom:10px;align-items:center} .task-search{flex:1;min-width:140px;padding:6px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;color:var(--text-2);font-size:11px;font-family:inherit;outline:0} .task-search:focus{border-color:var(--accent-border)} .task-tb-sel{padding:6px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:10px;font-family:inherit;cursor:pointer;outline:0} .task-tb-sel:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} /* (Old .view-toggle removed — view switching is now the always-visible .view-tabs strip.) */ /* ── Compact filter bar ───────────────────────────────────────────────── Replaces the five stacked scroll strips. Four triggers; each opens a bottom sheet (lists/views, tags, view+sort) or expands inline search. Labels reflect live filter state via syncFilterBar(). */ .filter-bar{ display:flex;align-items:center;gap:6px; margin:0 0 8px;padding:4px; background:var(--bg-1); border:1px solid var(--border-subtle); border-radius:var(--r-md); } .fb-btn{ display:flex;align-items:center;gap:6px; padding:8px 12px;min-height:40px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-2);font-size:12px;font-weight:600; font-family:inherit;cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); min-width:0; -webkit-user-select:none;user-select:none; } .fb-btn:hover{ background:var(--bg-3);color:var(--text-1); border-color:var(--border-strong); } /* .active = this trigger has a filter applied — accent-tinted so an applied filter reads at a glance, clearly distinct from a plain hover. */ .fb-btn.active{ background:var(--accent-bg);color:var(--accent); border-color:var(--accent-border); } .fb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .fb-btn .fb-ic{font-size:14px;opacity:.85;flex-shrink:0} .fb-btn .fb-lbl{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Lists trigger grows to absorb slack; tags trigger is content-sized; the search icon stays square; the view trigger hugs the right edge. */ .fb-btn#fbLists{flex:1 1 auto} .fb-btn#fbTags{flex:1 1 0;min-width:0} .fb-btn--icon{flex:0 0 auto;justify-content:center;padding:8px 12px} .fb-btn--view{ flex:0 0 auto; position:relative; gap:10px; padding-inline-end:12px; } /* "+ Filter" builder trigger — subtle accent so the add affordance reads as an action, distinct from the neutral view/list triggers. */ .fb-btn--addfilter{flex:0 0 auto;color:var(--accent)} .fb-btn--addfilter .fb-ic{font-weight:700} .fb-btn--addfilter:hover{border-color:var(--accent-border);background:var(--accent-bg)} /* Badge anchored so adding a digit never shifts label width */ .fb-btn--view .ft-count{ position:absolute;top:6px;right:6px; background:var(--accent);color:var(--text-on-accent); font-size:10px;font-weight:700; min-width:18px;height:18px;padding:0 5px;border-radius:9px; display:inline-flex;align-items:center;justify-content:center; } @media (max-width:480px){ .filter-bar{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:8px; align-items:stretch; } .fb-btn#fbLists{grid-column:1;grid-row:1;flex:none;width:100%;justify-content:flex-start;} .fb-btn#fbTags{grid-column:2;grid-row:1;flex:none;width:100%;justify-content:flex-start;} .fb-btn#fbSearch{grid-column:1;grid-row:2;flex:none;width:100%;min-height:44px;} .fb-btn#fbView{grid-column:2;grid-row:2;flex:none;width:100%;min-height:44px;justify-content:flex-start;} } /* ── Filter/options sheets ───────────────────────────────────────────── Reuse the .modal-overlay bottom-sheet chrome; just widen content spacing and let the chips wrap to full width (no clipping). */ .sheet .modal-body{display:flex;flex-direction:column;gap:6px} .sheet-section-lbl,.tags-sheet-lbl{ font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--text-3);margin:8px 0 2px; } .sheet-section-lbl:first-child,.tags-sheet-lbl:first-child{margin-top:0} /* Inside a sheet, lists/views/tags wrap and show full labels — overriding the mobile horizontal-scroll + edge-fade mask used elsewhere. */ .sheet .smart-views, .sheet .lists-bar{ flex-wrap:wrap!important;overflow:visible!important; -webkit-mask-image:none!important;mask-image:none!important; background:transparent;border:0;padding:0;margin:0; } .sheet .smart-views--collapsed .sv-chip{display:inline-flex!important} .sheet .sv-chip, .sheet .list-chip{flex-shrink:1;white-space:normal} .sheet .task-toolbar{background:transparent;border:0;padding:0;margin:0;flex-direction:column;align-items:stretch;gap:8px} .sheet .sv-chip:not(.sv-chip--cat){ font-size:12px;font-weight:500;text-transform:none;letter-spacing:0; background:var(--bg-2);border-color:var(--border);color:var(--text-2); padding:8px 14px;line-height:1.25; } .sheet .sv-chip:not(.sv-chip--cat):hover{ background:var(--bg-3);color:var(--text-1);border-color:var(--border); } .sheet .sv-chip:not(.sv-chip--cat).active{ background:var(--bg-3);color:var(--text-1);border-color:var(--border-strong); font-weight:600; box-shadow:none; } /* Compact today banner (when shown) */ .today-banner-compact{ padding:8px 12px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,transparent),color-mix(in srgb,var(--success) 4%,transparent))!important; border-radius:8px!important; margin-bottom:8px!important; gap:8px!important; } .today-banner-compact .tb-num{font-size:20px!important;line-height:1!important} .today-banner-compact .tb-lbl{font-size:10px!important;opacity:.8} .today-banner-compact .tb-divider{width:1px;background:var(--border);opacity:.5} /* Status badge */ .status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:.15s;border:1px solid;font-family:inherit;white-space:nowrap;background:transparent;color:inherit} .status-badge:hover{filter:brightness(1.15)} .status-open{background:var(--accent-bg);color:var(--text-2);border-color:var(--accent-border)} .status-progress{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:var(--accent-border)} .status-review{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)} .status-blocked{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} .status-done{background:var(--success-bg);color:var(--success);border-color:var(--success-border)} /* Priority flag */ .priority-flag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;cursor:pointer;transition:.15s;font-size:11px;line-height:1;font-family:inherit;border:none;background:transparent;flex-shrink:0} .priority-flag:hover{background:var(--hover-soft)} .priority-urgent{color:var(--prio-urgent)} .priority-high{color:var(--prio-high)} .priority-normal{color:var(--prio-normal)} .priority-low{color:var(--prio-low)} .priority-none{color:var(--text-4)} /* Date chip (single component — list, board, palette) */ .date-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.02em;white-space:nowrap;background:var(--bg-2);color:var(--text-2);border:1px solid var(--border)} .date-chip--overdue{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border);animation:pulse 2.5s ease-in-out infinite} .date-chip--today{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)} .date-chip--soon{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)} .date-chip--future{background:var(--bg-2);color:var(--text-3);border-color:var(--border);font-weight:500} /* Tag chips */ .tag-chip{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)} /* Task row extended (clickable open detail) */ .task-item.clickable{cursor:pointer} .task-item.clickable:hover{background:var(--bg-2)} .task-item.completed{opacity:.55} .task-item.completed .task-name{text-decoration:line-through} .task-item.overdue{border-left-color:var(--danger)!important} .task-meta-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px} /* Time-tracked pill — inline after the task name when the user is filtering or sorting by duration / completion. Tabular figures so digits line up across rows. */ .task-duration-pill{display:inline-flex;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;color:var(--text-3);background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap} /* .task-checkbox is defined further below in the themed component block — the legacy 18px/hex-bordered rule that used to live here was dead code (shadowed by source order) and has been removed. */ .task-estimate{font-size:9px;color:var(--text-3);letter-spacing:.5px} .task-desc-preview{font-size:10px;color:var(--text-3);font-style:italic;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} /* Task Detail Modal — state-driven (transition), not one-shot (animation). The overlay stays mounted at all times; only opacity/visibility/pointer-events change with .open. This eliminates the display:none → display:flex flip that races the keyframe in the same frame (the historical jitter cause). backdrop-filter is deferred via .backdrop-ready (set on transitionend) so the GPU does not composite a blur layer during the open transition. */ .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;padding-bottom:calc(40px + var(--kb-inset, 0px));overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-modal) var(--ease-out),visibility 0s linear var(--dur-modal)} .modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-modal) var(--ease-out),visibility 0s linear 0s} .modal-overlay.backdrop-ready{backdrop-filter:blur(4px)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);width:100%;max-width:560px;box-shadow:var(--shadow-overlay);transform:translateY(-20px);opacity:0;transition:transform var(--dur-modal) var(--ease-out),opacity var(--dur-modal) var(--ease-out)} .modal-overlay.open .modal{transform:translateY(0);opacity:1} /* Side-peek drawer (≥900px): the task editor docks to the right edge as a full-height panel so the task list stays visible behind it (Linear "peek" model) instead of a centered dialog that blocks the list. Narrow / touch keep the centered dialog + bottom-sheet behaviour untouched. Scoped to #taskModal so other modals (bulk import, confirm) stay centered. */ @media (min-width:900px){ #taskModal.modal-overlay{justify-content:flex-end;align-items:stretch;padding:0;overflow:hidden;background:rgba(0,0,0,.45)} #taskModal .modal{width:480px;max-width:46vw;height:100%;max-height:100%;border-radius:0;border-top:none;border-right:none;border-bottom:none;display:flex;flex-direction:column;transform:translateX(100%);opacity:1} #taskModal.modal-overlay.open .modal{transform:translateX(0)} #taskModal .modal-head,#taskModal .modal-foot{flex-shrink:0} #taskModal .modal-body{max-height:none;flex:1 1 auto} body.light-theme #taskModal.modal-overlay{background:rgba(15,23,42,.32)} } /* prefers-reduced-motion: collapse modal/overlay transitions to ~instant. Modal.open's onOpen callback still fires correctly under reduced motion thanks to its transitionend listener + 400ms safety timeout fallback. */ @media (prefers-reduced-motion:reduce){ .modal-overlay, .modal-overlay.open, .modal-overlay .modal, .modal-overlay.open .modal, .cmdk-overlay, .cmdk-overlay.open, .what-next-overlay, .what-next-overlay.open{ transition-duration:.01ms!important; } } .modal-head{display:flex;align-items:center;gap:10px;padding:var(--space-7) var(--space-9);border-bottom:1px solid var(--border-subtle)} .modal-close{margin-inline-start:auto;width:28px;height:28px;background:transparent;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-3);font-size:14px;cursor:pointer;font-family:inherit} .modal-close:hover{color:var(--danger);border-color:var(--danger-border)} .modal-body{padding:16px 18px;max-height:70vh;max-height:min(70vh, calc(var(--vv-height, 70dvh) - 160px));overflow-y:auto} .mfield{margin-bottom:14px} .mfield-lbl{display:block;font-size:9px;color:var(--text-3);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:6px} .mfield-in{width:100%;padding:8px 12px;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:12px;font-family:inherit;outline:0;box-sizing:border-box} .mfield-in:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-bg)} .mfield-textarea{width:100%;padding:8px 12px;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:11px;font-family:inherit;outline:0;box-sizing:border-box;min-height:80px;resize:vertical;line-height:1.5} .mfield-row{display:flex;gap:10px;flex-wrap:wrap} .mfield-row > .mfield{flex:1;min-width:130px;margin-bottom:0} .mfield-chips{display:flex;gap:6px;flex-wrap:wrap} .mfield-chip-btn{padding:5px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:10px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .mfield-chip-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)} .mfield-chip-btn:hover:not(.active){color:var(--text-1);border-color:var(--accent-border)} .tags-editor{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .tag-edit-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)} .tag-edit-chip .tag-rm{cursor:pointer;color:var(--danger);margin-left:2px;background:transparent;border:0;padding:0;font:inherit} .tag-edit-chip .tag-rm:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px} .tag-input{padding:3px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-2);font-size:10px;font-family:inherit;outline:0;width:80px} .modal-stat{display:flex;gap:12px;padding:10px 14px;background:var(--bg-0);border-radius:var(--r-sm);margin-bottom:14px;font-size:10px;color:var(--text-3);letter-spacing:.5px} .modal-stat b{color:var(--text-2);font-weight:700} .modal-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--border-subtle);justify-content:flex-end} .mfoot-btn{padding:7px 16px;border-radius:var(--r-sm);font-size:10px;font-weight:700;letter-spacing:1px;border:none;cursor:pointer;font-family:inherit} .mfoot-save{background:var(--accent);color:var(--text-on-accent)} .mfoot-save:hover{background:var(--accent-hover)} .mfoot-del{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)} .mfoot-cancel{background:var(--bg-2);color:var(--text-3);border:1px solid var(--border)} /* Kanban Board View */ .board-view{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;min-height:300px} /* Subtask disclosure on a board card */ .board-subs-toggle{ display:flex;align-items:center;gap:6px;width:100%;margin-top:8px; padding:6px 8px;min-height:32px; background:var(--bg-2);border:1px solid var(--border); border-radius:var(--r-sm);color:var(--text-2); font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);text-align:start; } .board-subs-toggle:hover{background:var(--bg-3);color:var(--text-1)} .board-subs-toggle .bst-caret{transition:transform .15s;display:inline-block} .board-subs-toggle.expanded .bst-caret{transform:rotate(90deg)} .board-card-subs{display:flex;flex-direction:column;gap:5px;margin-top:6px;padding-left:8px;border-left:2px solid var(--border)} .board-mini-card{ padding:6px 8px;background:var(--bg-1);border:1px solid var(--border-subtle); border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);border-left:3px solid var(--border-strong); } .board-mini-card:hover{background:var(--bg-2);border-color:var(--border-strong)} .board-mini-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .board-mini-card.priority-urgent-card{border-left-color:var(--danger)} .board-mini-card.priority-high-card{border-left-color:var(--warning)} .board-mini-card.priority-normal-card{border-left-color:var(--accent)} .board-mini-card.priority-low-card{border-left-color:var(--text-3)} .board-mini-card.done .board-mini-name{text-decoration:line-through;opacity:.6} .board-mini-name{font-size:11px;font-weight:600;color:var(--text-1);display:flex;align-items:baseline;gap:5px;word-break:break-word} .board-mini-name .bmc-check{color:var(--success);font-weight:700} .board-mini-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:5px} .board-mini-meta .bmc-subs{font-size:10px;color:var(--text-3);opacity:.85} /* Small "today" badge */ .due-today-banner{font-size:9px;padding:2px 8px;background:var(--warning-bg);color:var(--ring-warn-color);border:1px solid var(--warning-border);border-radius:var(--r-md);letter-spacing:.5px} /* ========== Personal Life Manager Additions ========== */ /* Today summary banner */ .today-banner{display:flex;gap:10px;padding:12px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--success) 6%,transparent));border:1px solid var(--work-border);border-radius:var(--r-md);margin-bottom:10px;align-items:center;flex-wrap:wrap} .tb-item{flex:1;min-width:90px;display:flex;flex-direction:column;gap:2px} .tb-num{font-size:22px;font-weight:800;color:var(--text-1);font-variant-numeric:tabular-nums;line-height:1} .tb-num.overdue{color:var(--danger)} .tb-num.today{color:var(--ring-warn-color)} .tb-num.done{color:var(--success)} .tb-lbl{font-size:8px;color:var(--text-3);letter-spacing:2px;text-transform:uppercase;font-weight:600} .tb-divider{width:1px;align-self:stretch;background:var(--border)} /* Smart view chips — toggle/collapse behaviours only here; base pill visuals are shared with `.sv-chip` in the design-system block further down so sheets and scroll strips render the same chip language. */ .smart-views--collapsed .sv-chip:not(.active):not(.sv-chip-pinned){display:none} /* Star button */ .task-star{width:20px;height:20px;background:transparent;border:none;color:var(--text-4);font-size:14px;line-height:1;cursor:pointer;transition:color var(--dur-base) var(--ease-out);flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center} .task-star:hover{color:var(--starred)} .task-star.starred{color:var(--starred)} /* Subtask progress bar on parent tasks */ .subtask-progress{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:var(--text-3);letter-spacing:.5px} .sp-bar{width:40px;height:3px;background:var(--border-subtle);border-radius:2px;overflow:hidden} .sp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));transition:width var(--dur-slow) var(--ease-out)} .sp-text{font-weight:700} /* Recurring badge */ .recur-badge{font-size:8px;padding:1px 5px;background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);border-radius:var(--r-sm);letter-spacing:.5px;font-weight:700} /* Reorder buttons */ .task-reorder{display:flex;flex-direction:column;gap:1px;flex-shrink:0} .task-rorder-btn{width:16px;height:12px;background:transparent;border:none;color:var(--text-4);font-size:9px;line-height:1;cursor:pointer;padding:0;transition:color var(--dur-base) var(--ease-out);display:flex;align-items:center;justify-content:center} .task-rorder-btn:hover{color:var(--text-3)} .task-rorder-btn:disabled{opacity:.3;cursor:default} /* Quick-add hint */ .qa-hint{font-size:8px;color:var(--text-4);letter-spacing:.5px;padding:3px 2px 0;font-style:italic} .qa-hint code{background:var(--bg-1);padding:1px 4px;border-radius:3px;color:var(--accent);font-family:monospace;font-size:9px;font-style:normal} /* Quick date buttons in modal */ .quick-dates{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .qd-btn{padding:4px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:9px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit;text-transform:uppercase} .qd-btn:hover{background:var(--bg-3);color:var(--text-1);border-color:var(--accent-border)} /* Recurrence selector */ .recur-options{display:flex;gap:4px;flex-wrap:wrap} .recur-opt{padding:5px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:10px;font-weight:600;letter-spacing:.5px;cursor:pointer;font-family:inherit} .recur-opt.active{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)} .recur-opt:hover:not(.active){color:var(--text-1);border-color:var(--accent-border)} /* Floating Mini Timer (shown on all tabs except Timer tab) */ .mini-timer{position:fixed;bottom:16px;right:16px;z-index:var(--z-fab);display:none;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--bg-2) 95%,transparent);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-raised);transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);font-family:inherit;user-select:none} .mt-open-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-align:left;min-width:0} .mt-open-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} /* Floating quick-add button. Hidden on desktop where Cmd/Ctrl+N + the visible task input cover the same job; appears on touch/narrow viewports so mobile users have a thumb-reachable quick-capture from any tab. */ .quick-add-fab{ position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:20px; z-index:var(--z-fab,1100);display:none;align-items:center;justify-content:center; width:56px;height:56px;border-radius:50%;border:0;cursor:pointer; background:var(--brand-grad);color:var(--text-on-brand); box-shadow:0 8px 24px rgba(26,140,255,.40),0 2px 6px rgba(0,0,0,.25); font-family:inherit;font-size:0;line-height:1; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .quick-add-fab:hover,.quick-add-fab:focus-visible{outline:0;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.3)} .quick-add-fab:active{transform:translateY(0)} .quick-add-fab-icon{font-size:32px;font-weight:400;line-height:1;display:inline-block;padding-bottom:3px} /* Scroll-direction auto-hide: slides the FAB off-screen while the user is scrolling down through the task list, revealing the rows it would otherwise cover. Restored as soon as the user scrolls up or stops. */ .quick-add-fab.scroll-hidden{transform:translateY(140%);opacity:0;pointer-events:none} /* Press-state ripple feel without an extra element. */ .quick-add-fab.flash{animation:fabFlash .35s ease} @keyframes fabFlash{0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:scale(1)}} .mini-timer.visible{display:flex;animation:fadeIn .25s} .mini-timer:hover{border-color:var(--accent-border);transform:translateY(-1px)} .mini-timer.work{border-left:3px solid var(--work)} .mini-timer.short{border-left:3px solid var(--success)} .mini-timer.long{border-left:3px solid var(--long)} .mt-phase-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .mt-phase-dot.work{background:var(--work);box-shadow:0 0 8px var(--work-glow)} .mt-phase-dot.short{background:var(--short);box-shadow:0 0 8px var(--short-glow)} .mt-phase-dot.long{background:var(--ring-warn-color);box-shadow:0 0 8px var(--long-glow)} .mt-phase-dot.running{animation:pulse 1.5s infinite} .mt-info{display:flex;flex-direction:column;gap:1px;min-width:0} .mt-label{font-size:8px;color:var(--text-3);letter-spacing:1.5px;text-transform:uppercase;font-weight:700} .mt-time{font-size:16px;font-weight:800;color:var(--text-1);font-variant-numeric:tabular-nums;letter-spacing:1px} /* Warn/done use the same themed tokens as .ring-time so light-mode contrast stays readable; previously hardcoded to dark-mode-tuned hex values. */ .mt-time.warn{color:var(--ring-warn-color);animation:pulse 1s infinite} .mt-time.done{color:var(--ring-done-color)} .mt-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;font-size:11px;cursor:pointer;transition:filter var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);flex-shrink:0;color:var(--text-on-accent);font-family:inherit} .mt-play{background:var(--success)} .mt-pause{background:var(--accent)} .mt-btn:hover{filter:brightness(1.15);transform:scale(1.05)} .mt-open{font-size:9px;color:var(--text-3);letter-spacing:1px;padding-left:4px;border-left:1px solid var(--border)} .log-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto} .log-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-sm);background:var(--bg-1);font-size:10px;border:1px solid var(--border-subtle)} .log-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0} .log-name{flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .log-dur{color:var(--accent);font-weight:700;flex-shrink:0} .log-time{color:var(--text-4);flex-shrink:0;font-size:9px} .log-empty{text-align:center;padding:12px 0;color:var(--text-4);font-size:10px} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .stat-box{text-align:center;padding:12px 8px;background:var(--bg-1);border-radius:var(--r-lg);border:1px solid var(--border-subtle)} .stat-val{font-size:24px;font-weight:800;color:var(--text-1)}.stat-lbl{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--text-3);margin-top:4px} .stat-val.wc{color:var(--work)}.stat-val.bc{color:var(--short)}.stat-val.tc{color:var(--long)} .history{display:flex;gap:3px;flex-wrap:wrap;margin-top:12px;justify-content:center} .hblock{width:14px;height:14px;border-radius:4px}.hw{background:var(--work);opacity:.8}.hs{background:var(--short);opacity:.6}.hl{background:var(--long);opacity:.6} /* History Archive */ .hist-day{padding:var(--space-6);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--space-4);cursor:pointer;transition:border-color var(--dur-base) var(--ease-out)} .hist-day:hover{border-color:var(--accent-border)} .hist-day-hdr{display:flex;align-items:center;gap:var(--space-5)} .hist-day-date{font-size:var(--fs-12);font-weight:600;color:var(--text-1);flex:1} .hist-day-stats{display:flex;gap:var(--space-6);font-size:var(--fs-12);color:var(--text-3)} .hist-day-stat{display:flex;align-items:center;gap:var(--space-2)} .hist-day-detail{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);display:none;animation:slideIn var(--dur-base) var(--ease-out)} .hist-day.open .hist-day-detail{display:block} .hist-day-section{margin-bottom:var(--space-4)} .hist-day-section-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-4);margin-bottom:var(--space-2)} .hist-goal{font-size:var(--fs-12);color:var(--text-2);padding:2px 0} .hist-log{font-size:var(--fs-12);color:var(--text-3);padding:2px 0} .hist-task{font-size:var(--fs-12);color:var(--text-3);padding:2px 0} @keyframes savePulse { 0% { transform: scale(0.9); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .save-indicator{position:fixed;bottom:16px;right:16px;font-size:9px;color:var(--success);letter-spacing:2px;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none} .save-indicator.show{opacity:1;animation:savePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards} .clear-hist-btn{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border);border-radius:var(--r-sm);padding:6px 14px;font-size:9px;letter-spacing:1px;margin-top:8px} /* Quick Timers */ .qt-form{display:flex;gap:6px;flex-wrap:wrap;padding:10px;background:var(--bg-1);border-radius:var(--r-md);border:1px solid var(--border-subtle);margin-bottom:8px;align-items:flex-end} .qt-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .qt-preset{padding:5px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;color:var(--text-3);font-size:10px;font-weight:600;letter-spacing:1px;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .qt-preset:hover{background:var(--bg-3);color:var(--accent)} .qt-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto} .qt-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--bg-1);border:1px solid var(--border-subtle);transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .qt-item.running{border-color:var(--accent-border);background:var(--work-bg)} .qt-item.done{border-color:var(--danger-border);background:color-mix(in srgb,var(--danger) 6%,var(--bg-1))} .qt-item.flash{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--bg-1));animation:pulse .4s 4} .qt-btn{width:34px;height:34px;border-radius:50%;font-size:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s} .qt-play{background:var(--success);color:var(--text-on-accent)} .qt-pause{background:var(--accent);color:var(--text-on-accent)} .qt-restart{background:var(--warning);color:var(--text-on-accent)} .qt-info{flex:1;min-width:0} .qt-label{font-size:12px;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qt-time{font-size:22px;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--text-1)} .qt-time.running{color:var(--work)} .qt-time.warn{color:var(--ring-warn-color);animation:pulse 1s infinite} .qt-time.done{color:var(--ring-done-color)} .qt-progress{height:3px;margin-top:6px;background:var(--border-subtle);border-radius:2px;overflow:hidden} .qt-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transition:width .5s linear} .qt-bar.done{background:var(--danger)} .qt-actions{display:flex;gap:4px;flex-shrink:0} .qt-act{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--r-sm);color:var(--text-4);font-size:11px;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .qt-act:hover{color:var(--text-2);border-color:var(--accent-border)} /* Log delete button */ .log-del{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-4);font-size:10px;opacity:0;transition:opacity var(--dur-base) var(--ease-out);cursor:pointer;flex-shrink:0} .log-item:hover .log-del{opacity:1} .log-del:hover{color:var(--danger)} /* Phase nav hint */ .phase-nav-hint{text-align:center;font-size:9px;color:var(--text-4);letter-spacing:2px;margin-top:10px;text-transform:uppercase} /* =================================================================== */ /* =========== DESIGN SYSTEM OVERLAY (polish pass) =================== */ /* =================================================================== */ /* Container: max-width for desktop, centered */ .container{max-width:960px;width:100%} /* Brand logo mark (now in the sidebar). The old centered .header / .header h1 rules were removed with the ClickUp shell; brand text uses .sidebar-brand-title. .header-logo / .header-mid / .header-date / .what-next-pill are still used (sidebar brand + top bar). */ .header-logo{width:32px;height:32px;border-radius:8px;display:block;flex-shrink:0} .header-line{display:none} .header-mid{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px} .header-date{font-size:13px;color:var(--text-3);letter-spacing:0;font-family:var(--font-sans);min-height:1.2em} .what-next-pill{font-size:11px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-2);color:var(--accent);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s} .what-next-pill:hover{background:var(--accent-bg);border-color:var(--accent-border)} /* Header AI status — model load / ready */ /* Outer min-width pins the chip to its widest realistic state. The widest label content is "100%" (4 chars, tabular-nums) which measures ~26px at the chip's 11px font. With 7px dot + 5px gap + 20px horizontal padding + 2px border, that's ~62px. Use 64px to absorb sub-pixel rounding so the content swap from "100%" → "AI" → "✓" never reflows the .header-utils row, which would shift the theme toggle and Cmd-K button. */ .ai-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;height:38px;min-width:64px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-1);color:var(--text-2);font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s} .ai-chip:hover{background:var(--bg-2);border-color:var(--border-strong)} .ai-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--text-4);flex-shrink:0} .ai-chip--syncing .ai-chip-dot{background:var(--warning);animation:pulse 1.2s infinite} .ai-chip--ok .ai-chip-dot{background:var(--success)} .ai-chip--err .ai-chip-dot{background:var(--danger)} /* First-run "setup" badge — a small pulsing dot in the top-right of the chip until the user downloads the embedding model. Signals "this is actionable" without being loud. Auto-removed by JS when the chip leaves the idle state. */ .ai-chip--firstrun{border-color:var(--accent-border);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent)} .ai-chip--firstrun::after{ content:"";position:absolute;top:5px;right:5px; width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg-1); animation:aiFirstrunPulse 1.8s infinite; } @keyframes aiFirstrunPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.7} } /* Inner label uses a 4ch reservation (matches "100%") so content swaps don't shrink the chip below the outer min-width and produce a visible label-jitter even within the pinned shell. */ .ai-chip-label{font-variant-numeric:tabular-nums;min-width:4ch;text-align:center} .ai-chip-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;clip-path:inset(50%)} .sys-info-ok{color:var(--success)} .sys-info-warn{color:var(--warning)} .install-help-panel{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg-1);border:1px solid var(--border-subtle);font-size:13px;color:var(--text-1)} .install-help-title{font-weight:600;margin-bottom:6px;color:var(--text-1)} .install-help-steps{margin:0 0 8px;padding-left:20px;line-height:1.6;color:var(--text-2)} .install-help-steps li{margin-bottom:2px} .install-help-close{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:12px;cursor:pointer} .install-help-close:hover{background:var(--bg-2);color:var(--text-1)} .sw-precache-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);font-size:12px;color:var(--text-1);flex-wrap:wrap} .sw-precache-banner-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--warning);background:transparent;color:var(--warning);font-size:11px;font-weight:600;cursor:pointer} .sw-precache-banner-btn:hover{background:var(--warning);color:var(--text-on-accent)} .sw-precache-banner-btn--ghost{border-color:var(--border);color:var(--text-3)} .sw-precache-banner-btn--ghost:hover{background:var(--bg-2);color:var(--text-1)} /* Main timer card — inside Focus tab panel */ .card{position:relative;width:100%;margin-bottom:14px;padding:24px;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;gap:18px} .ring-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center} .ring-svg{width:220px;height:220px;transform:rotate(-90deg)} .ring-bg{fill:none;stroke:var(--bg-3);stroke-width:6} .ring-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear} .ring-center{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px} .pips{display:flex;gap:10px;margin-top:4px} .ctrls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* Panel surfaces — rounded, softly-lit cards. A faint top→bottom gradient plus an inset top highlight reads as depth instead of a flat box; the border is kept near-invisible so corners do the shaping, not a hard outline. */ .panel{background:var(--surface-grad);border:1px solid var(--border-subtle);border-radius:var(--r-xl);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.03)} .task-search-bar{margin-bottom:10px;padding:8px 10px;background:var(--surface-grad);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-card)} /* Section labels — stop yelling */ .slbl{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--text-1);font-family:var(--font-sans)} .scnt{font-size:11px;color:var(--text-3);margin-left:auto;letter-spacing:0;font-family:var(--font-sans)} .shdr{display:flex;align-items:center;gap:10px;margin-bottom:14px} .sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:none} /* Nav tabs — cleaner */ .nav-tabs{display:flex;gap:var(--space-2);width:100%;margin-bottom:var(--space-7);background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-2);box-shadow:var(--shadow-card)} .nav-tab{flex:1;padding:10px 4px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--text-3);font-size:var(--fs-12);font-weight:600;letter-spacing:.02em;text-transform:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);font-family:inherit;position:relative} .nav-tab-icon{font-size:16px;line-height:1;filter:grayscale(.6);transition:filter var(--dur-base) var(--ease-out)} .nav-tab:hover:not(.active){color:var(--text-2);background:var(--accent-bg)} .nav-tab-badge{position:absolute;top:4px;right:8px;min-width:14px;height:14px;padding:0 4px;background:var(--accent);color:var(--text-on-accent);border-radius:7px;font-size:9px;font-weight:700;letter-spacing:0;display:flex;align-items:center;justify-content:center;line-height:1} /* Buttons — consistent, clean */ .btn, .btn-primary, .btn-pause, .btn-ghost, .btn-skip, .btn-danger {font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 18px;border-radius:999px;transition:.15s;cursor:pointer;} .btn-sm {padding:6px 14px !important;font-size:11px !important;} .btn-primary{background:var(--brand-grad);color:var(--text-on-brand);border:none;} .btn-primary:hover{filter:brightness(1.06)} /* Secondary — neutral bordered (ghost / neutral actions) */ .btn-secondary{background:var(--bg-2);color:var(--text-1);border:1px solid var(--border)} .btn-secondary:hover{background:var(--bg-3);border-color:var(--border-strong)} /* Success fill — quick-timer play, goal add accents */ .btn-success{background:var(--success);color:var(--text-on-accent);border:none;font-weight:600} .btn-success:hover{filter:brightness(1.08)} .btn-pause{background:var(--warning);color:var(--text-on-accent);border:none;} .btn-skip{background:transparent;color:var(--text-2);border:1px solid var(--border);font-size:11px;padding:8px 14px} .btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger-border);font-size:11px;padding:8px 14px} .btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)} /* Today banner — heroic hero */ .today-banner{padding:18px 20px;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:14px} .tb-num{font-size:32px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-sans);color:var(--text-1)} .tb-num.overdue{color:var(--danger)} .tb-num.today{color:var(--warning)} .tb-num.done{color:var(--success)} .tb-lbl{font-size:11px;color:var(--text-3);letter-spacing:.02em;text-transform:none;font-weight:500;margin-top:2px} .tb-divider{background:var(--border)} /* ── Shared chip primitive (list-style pills + Settings preview) ──────── */ /* `.list-chip` shares this base (its own dedicated base was retired in favour of this primitive) — without it list chips fall back to bare