/* HeyGoal design system 0.6.0 — the app stylesheet: generated token block + component and pattern CSS.
   Themes on html[data-wd-theme] in the app; also on [data-theme] here so the previews follow the page theme. */
/* ---- tokens/heygoal-tokens.css ---- */
/* HEYGOAL — design tokens · generated from tokens.json by tools/build-tokens.mjs (system 0.6.0). Replaces the 1.19.0 header (lines 11–42), --live and --live-text (561–562) and --stagger (727). Edit tokens.json and rebuild; never edit this block by hand. */
:root{
  /* primitive */
  --neutral-50:#f2f2f0;
  --neutral-100:#d4d4d1;
  --neutral-200:#b7b7b3;
  --neutral-300:#9a9a96;
  --neutral-400:#848480;
  --neutral-500:#6e6e6b;
  --neutral-600:#4d4d4b;
  --neutral-700:#2e2e2e;
  --neutral-750:#232323;
  --neutral-800:#1c1c1c;
  --neutral-900:#141414;
  --warm-50:#fbfbf8;
  --warm-100:#f2f1ec;
  --warm-150:#efeee9;
  --warm-200:#dcdad2;
  --warm-300:#b2b0a8;
  --warm-400:#898780;
  --warm-500:#7a7872;
  --warm-600:#6b6a64;
  --warm-700:#4f4e4a;
  --warm-800:#343331;
  --warm-900:#1b1b1a;
  --sage:#c4d2bf;
  --mint:#b3dcc9;
  --teal:#93c9c0;
  --sky:#b6d8ee;
  --blue:#a8c3e4;
  --periwinkle:#b3bbeb;
  --lilac:#bdb2d6;
  --blush:#e7cbde;
  --rose:#eaaebb;
  --peach:#f2c4a5;
  --clay:#d8a88c;
  --taupe:#c6bbab;
  --stone:#bdb9b0;
  --olive:#cdd09b;
  --butter:#eee0a2;
  --lime:#c4e85f;
  --amber:#efb44a;
  --coral:#e96a4a;
  --bone:#e9e7df;
  --green-400:#5fe09a;
  --green-500:#3ecf7e;
  --green-600:#1f9d5a;
  --brand-blue:#0080ff;
  --brand-navy:#080044;
  --ink:#191919;
  --ink-soft:rgba(0,0,0,.71);
  --paper:#ffffff;
  --paper-ink:#161616;
  --paper-muted:#6b6b66;
  --paper-line:#e4e3dc;
  --paper-line-strong:#c9c8c2;
  --paper-soft:#f2f1ec;
  --paper-good:#2f8f5b;
  --paper-critical:#b02c16;
  --family-bricolage:'Bricolage Grotesque',system-ui,sans-serif;
  --family-inter:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --family-helvetica:'Helvetica','Arial',sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --space-56:56px;
  --radius-8:8px;
  --radius-10:10px;
  --radius-12:12px;
  --radius-16:16px;
  --radius-24:24px;
  --radius-full:999px;
  --duration-fast:.16s;
  --duration-in:.26s;
  --duration-out:.4s;
  --duration-page:.36s;
  --duration-wipe:.42s;
  --duration-crossfade-out:.12s;
  --duration-crossfade-in:.18s;
  --duration-drawer:.25s;
  --duration-collapse:.2s;
  --duration-theme:.3s;
  --duration-page-out:.26s;
  --duration-intro:.55s;
  --duration-door:.9s;
  --duration-door-rise:.65s;
  --duration-door-card:.5s;
  --duration-pulse:1.6s;
  --duration-ring:2.4s;
  --duration-sync-pulse:1.1s;
  --duration-flash:.3s;
  --delay-door-card:.15s;
  --stagger:calc(1s / 30);
  --stagger-delay:.06s;
  --stagger-max:12;
  --stagger-intro:.05s;
  --ease-out:cubic-bezier(0,0,0,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-soft:cubic-bezier(.2,.7,.2,1);
  --ease-fade:ease;
  /* semantic · shared */
  --accent:var(--lime);
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --accent-halo:color-mix(in srgb,var(--accent) 22%,transparent);
  --brand:var(--brand-blue);
  --font-display:var(--family-bricolage);
  --font-ui:var(--family-inter);
  --font-pdf:var(--family-helvetica);
  --text-micro:11px;
  --text-small:12px;
  --text-note:13px;
  --text-label:14px;
  --text-body:15px;
  --text-heading:18px;
  --text-title:24px;
  --text-display:clamp(32px,4.4vw,50px);
  --text-number:46px;
  --text-number-min:28px;
  --text-number-fit:clamp(var(--text-number-min),15cqi,var(--text-number));
  --tracking-display:-.035em;
  --tracking-title:-.025em;
  --tracking-heading:-.01em;
  --tracking-number:-.04em;
  --tracking-kicker:.14em;
  --type-display:var(--weight-heavy) var(--text-display)/1.04 var(--font-display);
  --type-title:var(--weight-heavy) var(--text-title)/1.1 var(--font-display);
  --type-heading:var(--weight-bold) var(--text-heading)/1.3 var(--font-display);
  --type-number:var(--weight-heavy) var(--text-number-fit)/1.05 var(--font-display);
  --type-body:var(--weight-regular) var(--text-body)/1.5 var(--font-ui);
  --type-button:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui);
  --type-label:var(--weight-medium) var(--text-label)/1.3 var(--font-ui);
  --type-note:var(--weight-regular) var(--text-note)/1.45 var(--font-ui);
  --type-small:var(--weight-regular) var(--text-small)/1.4 var(--font-ui);
  --type-kicker:var(--weight-heavy) var(--text-micro)/1.3 var(--font-ui);
  --type-micro:var(--weight-semibold) var(--text-micro)/1.3 var(--font-ui);
  --radius-chip:var(--radius-8);
  --radius-control:var(--radius-10);
  --radius-inner:var(--radius-12);
  --radius-card:var(--radius-16);
  --radius-floating:var(--radius-24);
  --radius-round:var(--radius-full);
  --elevation-0:none;
  --elevation-1:0 12px 34px rgb(0 0 0 / .22);
  --elevation-2:0 30px 70px rgb(0 0 0 / .45);
  --scrim:rgba(0,0,0,.5);
  --scrim-blur:2px;
  --glass-blur:16px;
  --glass-saturate:1.4;
  --glass-line:var(--line);
  --glass-bg:color-mix(in srgb,var(--surface) 60%,transparent);
  --good-soft:color-mix(in srgb,var(--good) 14%,transparent);
  --warning-soft:color-mix(in srgb,var(--warning) 14%,transparent);
  --critical-soft:color-mix(in srgb,var(--critical) 14%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 14%,transparent);
  --live:var(--good);
  --live-text:var(--good-text);
  --good-soft-hover:color-mix(in srgb,var(--good) 22%,transparent);
  --good-edge:color-mix(in srgb,var(--good) 40%,transparent);
  --warning-edge:color-mix(in srgb,var(--warning) 40%,transparent);
  --critical-edge:color-mix(in srgb,var(--critical) 40%,transparent);
  --on-color-hover:rgba(0,0,0,.08);
  --on-color-fill:rgba(0,0,0,.1);
  --on-color-fill-hover:rgba(0,0,0,.18);
  --on-color-edge:rgba(0,0,0,.14);
  --on-color-track:rgba(0,0,0,.12);
  --on-color-line:rgba(0,0,0,.12);
  --on-color-edge-strong:rgba(0,0,0,.35);
  --on-color-surface:rgba(255,255,255,.34);
  --on-color-surface-strong:rgba(255,255,255,.55);
  --critical-on-color:#8a1f10;
  --on-ink:var(--neutral-50);
  --image-backdrop:#111111;
  --image-scrim:rgba(0,0,0,.55);
  --on-image:#ffffff;
  --accent-dash:color-mix(in srgb,var(--accent) 60%,var(--line));
  --opacity-disabled:.5;
  --opacity-hover:.8;
  --opacity-placeholder:.28;
  --zone-invoices:var(--amber);
  --zone-project:var(--periwinkle);
  --zone-expenses:var(--peach);
  --zone-payments:var(--mint);
  --zone-neutral:var(--stone);
  --priority-high:var(--text);
  --priority-medium:var(--muted);
  --priority-low:var(--faint);
  --priority-backburner:var(--faint);
  --z-raised:2;
  --z-local:5;
  --z-tip:20;
  --z-shell:45;
  --z-floating:50;
  --z-gate:55;
  --z-scrim:55;
  --z-drawer:60;
  --z-toast:60;
  --z-popover:70;
  /* semantic · dark, the default theme */
  --bg:var(--neutral-900);
  --surface:var(--neutral-800);
  --surface-2:var(--neutral-750);
  --line:var(--neutral-700);
  --line-strong:var(--neutral-500);
  --faint:var(--neutral-500);
  --text:var(--neutral-50);
  --muted:var(--neutral-300);
  --brand-ink:var(--neutral-50);
  --accent-text:var(--accent);
  --accent-ring:var(--accent);
  --on-accent:var(--ink);
  --good:var(--green-500);
  --good-text:var(--green-400);
  --warning:var(--amber);
  --warning-text:var(--amber);
  --critical:var(--coral);
  --critical-text:color-mix(in srgb,var(--critical) 89%,#fff);
  --info:var(--sky);
  --info-text:var(--sky);
  /* component */
  --control-height:44px;
  --control-height-compact:36px;
  --icon-button-size:40px;
  --topbar-height:56px;
  --topbar-blue:10%;
  --topbar-alpha:35%;
  --topbar-line:1.25px;
  --topbar-tint:color-mix(in srgb,var(--brand) var(--topbar-blue),var(--bg));
  --topbar-bg:color-mix(in srgb,var(--topbar-tint) var(--topbar-alpha),transparent);
  --sidebar-width:248px;
  --sidebar-width-rail:76px;
  --sidebar-width-hidden:0px;
  --nav-indicator-width:4.5px;
  --main-max-width:1240px;
  --page-pad-min:18px;
  --page-pad-max:56px;
  --page-pad:clamp(var(--page-pad-min),4vw,var(--page-pad-max));
  --breakpoint-phone:860px;
  --icon-size-sm:16px;
  --icon-size:20px;
  --icon-size-lg:24px;
  --icon-stroke:1.75;
  --logo-height-bar:24px;
  --logo-height-phone:20px;
  --logo-height-door:52px;
  --favicon-size:16px;
  --avatar-size:36px;
  --avatar-size-sm:32px;
  --avatar-size-xl:112px;
  --border-width:1px;
  --border-width-strong:1.5px;
  --shadow-drag:0 24px 50px rgb(0 0 0 / .4);
  --shadow-drawer:16px 0 40px rgb(0 0 0 / .35);
  --shadow-paper:0 24px 60px rgb(0 0 0 / .18);
  --premium-badge:linear-gradient(135deg,var(--butter),var(--amber));
  --scrim-drawer:rgba(0,0,0,.45);
  --lift-card:-9px;
  --lift-chip:-4px;
  --lift-button:-1px;
  --lift-color-pill:-2px;
  --lift-icon:-1px;
  --nudge-nav:2px;
  --nudge-note:3px;
  --rise-page:10px;
  --rise-dialog:10px;
  --rise-toast:16px;
  --rise-intro:14px;
  --rise-tip:4px;
  --rise-door-card:16px;
  --drop-popover:-4px;
  --press-button:.97;
  --press-icon:.86;
  --press-pill:.96;
  --press-swatch:.94;
  --press-color-pill:.95;
  --press-check:.84;
  --press-nav:.98;
  --press-tile:.985;
  --press-day:.98;
  --hover-icon:1.08;
  --hover-swatch:1.14;
  --hover-check:1.1;
  --hover-thumb:1.03;
  --scale-dialog:.97;
  --scale-popover:.96;
  --scale-toast:.96;
  --pop-from:.5;
  --pop-peak:1.2;
  --wipe-from:100%;
  --pulse-opacity:.3;
  --ring-from:.6;
  --ring-to:1.9;
  --ring-opacity:.9;
  --door-logo-drop:130px;
  --door-logo-drop-phone:110px;
  --door-logo-scale:.55;
  --drag-tilt:1.2deg;
  --drag-scale:1.02;
  --turn-theme:-20deg;
  --drawer-offset:-105%;
  --pdf-title:28;
  --pdf-report-title:22;
  --pdf-name:15;
  --pdf-section:12;
  --pdf-stamp:11;
  --pdf-note-title:10.5;
  --pdf-body:10;
  --pdf-table:9.5;
  --pdf-due:9;
  --pdf-label:8.5;
  --pdf-caption:8;
  /* aliases: 1.19.0 names, kept two minor versions */
  --muted-2:var(--faint);
  --r-lg:22px;
  --r:var(--radius-card);
  --pill:var(--radius-full);
  --display:var(--font-display);
  --font:var(--font-ui);
  --ease:var(--ease-out);
  --t-fast:var(--duration-fast);
  --t:var(--duration-in);
  --t-slow:var(--duration-out);
  --logo-ink:var(--brand-ink);
  --logo-blue:var(--brand);
  --topbar:var(--topbar-height);
  --topbar-blur:var(--glass-blur);
}
:is([data-wd-theme=dark],[data-theme="dark"]){
  --bg:var(--neutral-900);
  --surface:var(--neutral-800);
  --surface-2:var(--neutral-750);
  --line:var(--neutral-700);
  --line-strong:var(--neutral-500);
  --faint:var(--neutral-500);
  --text:var(--neutral-50);
  --muted:var(--neutral-300);
  --brand-ink:var(--neutral-50);
  --accent-text:var(--accent);
  --accent-ring:var(--accent);
  --on-accent:var(--ink);
  --good:var(--green-500);
  --good-text:var(--green-400);
  --warning:var(--amber);
  --warning-text:var(--amber);
  --critical:var(--coral);
  --critical-text:color-mix(in srgb,var(--critical) 89%,#fff);
  --info:var(--sky);
  --info-text:var(--sky);
}
:is([data-wd-theme=light],[data-theme="light"]){
  --bg:var(--warm-150);
  --surface:var(--warm-50);
  --surface-2:var(--warm-100);
  --line:var(--warm-200);
  --line-strong:var(--warm-400);
  --faint:var(--warm-400);
  --text:var(--warm-900);
  --muted:var(--warm-600);
  --brand-ink:var(--brand-navy);
  --accent-text:color-mix(in srgb,var(--accent) 40%,#000);
  --accent-ring:color-mix(in srgb,var(--accent) 50%,#000);
  --on-accent:var(--ink);
  --good:var(--green-600);
  --warning:var(--amber);
  --critical:var(--coral);
  --info:var(--sky);
  --good-text:color-mix(in srgb,var(--good) 70%,#000);
  --warning-text:color-mix(in srgb,var(--warning) 53%,#000);
  --critical-text:color-mix(in srgb,var(--critical) 67%,#000);
  --info-text:color-mix(in srgb,var(--info) 49%,#000);
}
/* tokens that read a themed token, re-declared so a nested data-wd-theme scope recomputes them */
:is([data-wd-theme],[data-theme]){
  --glass-line:var(--line);
  --glass-bg:color-mix(in srgb,var(--surface) 60%,transparent);
  --good-soft:color-mix(in srgb,var(--good) 14%,transparent);
  --warning-soft:color-mix(in srgb,var(--warning) 14%,transparent);
  --critical-soft:color-mix(in srgb,var(--critical) 14%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 14%,transparent);
  --live:var(--good);
  --live-text:var(--good-text);
  --good-soft-hover:color-mix(in srgb,var(--good) 22%,transparent);
  --good-edge:color-mix(in srgb,var(--good) 40%,transparent);
  --warning-edge:color-mix(in srgb,var(--warning) 40%,transparent);
  --critical-edge:color-mix(in srgb,var(--critical) 40%,transparent);
  --accent-dash:color-mix(in srgb,var(--accent) 60%,var(--line));
  --priority-high:var(--text);
  --priority-medium:var(--muted);
  --priority-low:var(--faint);
  --priority-backburner:var(--faint);
  --topbar-tint:color-mix(in srgb,var(--brand) var(--topbar-blue),var(--bg));
  --topbar-bg:color-mix(in srgb,var(--topbar-tint) var(--topbar-alpha),transparent);
  --muted-2:var(--faint);
  --logo-ink:var(--brand-ink);
}
/* Settings → Motion → Reduced: movement stills and fades stay; the card lift is kept on purpose. With no data-motion, the device setting decides. */
[data-motion=reduced]{
  --duration-page:var(--duration-crossfade-in);
  --duration-wipe:var(--duration-crossfade-in);
  --duration-drawer:0s;
  --duration-collapse:0s;
  --duration-page-out:var(--duration-crossfade-out);
  --duration-intro:var(--duration-crossfade-in);
  --duration-door:var(--duration-crossfade-in);
  --duration-door-rise:0s;
  --duration-door-card:var(--duration-crossfade-in);
  --delay-door-card:0s;
  --stagger:0s;
  --stagger-delay:0s;
  --stagger-intro:0s;
  --lift-button:0px;
  --lift-color-pill:0px;
  --lift-icon:0px;
  --nudge-nav:0px;
  --nudge-note:0px;
  --rise-page:0px;
  --rise-dialog:0px;
  --rise-toast:0px;
  --rise-intro:0px;
  --rise-tip:0px;
  --rise-door-card:0px;
  --drop-popover:0px;
  --press-button:1;
  --press-icon:1;
  --press-pill:1;
  --press-swatch:1;
  --press-color-pill:1;
  --press-check:1;
  --press-nav:1;
  --press-tile:1;
  --press-day:1;
  --hover-icon:1;
  --hover-swatch:1;
  --hover-check:1;
  --hover-thumb:1;
  --scale-dialog:1;
  --scale-popover:1;
  --scale-toast:1;
  --pop-from:1;
  --pop-peak:1;
  --wipe-from:0%;
  --pulse-opacity:1;
  --ring-opacity:0;
  --door-logo-scale:1;
  --drag-tilt:0deg;
  --drag-scale:1;
  --turn-theme:0deg;
}
@media (prefers-reduced-motion: reduce){
  :root:not([data-motion]){
    --duration-page:var(--duration-crossfade-in);
    --duration-wipe:var(--duration-crossfade-in);
    --duration-drawer:0s;
    --duration-collapse:0s;
    --duration-page-out:var(--duration-crossfade-out);
    --duration-intro:var(--duration-crossfade-in);
    --duration-door:var(--duration-crossfade-in);
    --duration-door-rise:0s;
    --duration-door-card:var(--duration-crossfade-in);
    --delay-door-card:0s;
    --stagger:0s;
    --stagger-delay:0s;
    --stagger-intro:0s;
    --lift-button:0px;
    --lift-color-pill:0px;
    --lift-icon:0px;
    --nudge-nav:0px;
    --nudge-note:0px;
    --rise-page:0px;
    --rise-dialog:0px;
    --rise-toast:0px;
    --rise-intro:0px;
    --rise-tip:0px;
    --rise-door-card:0px;
    --drop-popover:0px;
    --press-button:1;
    --press-icon:1;
    --press-pill:1;
    --press-swatch:1;
    --press-color-pill:1;
    --press-check:1;
    --press-nav:1;
    --press-tile:1;
    --press-day:1;
    --hover-icon:1;
    --hover-swatch:1;
    --hover-check:1;
    --hover-thumb:1;
    --scale-dialog:1;
    --scale-popover:1;
    --scale-toast:1;
    --pop-from:1;
    --pop-peak:1;
    --wipe-from:0%;
    --pulse-opacity:1;
    --ring-opacity:0;
    --door-logo-scale:1;
    --drag-tilt:0deg;
    --drag-scale:1;
    --turn-theme:0deg;
  }
}
/* any accent stays AA: relative color syntax where the browser has it; the color-mix values above where it does not */
@supports (color: oklch(from red l c h)){
  :root,:is([data-wd-theme=dark],[data-theme="dark"]){
    --accent-text:oklch(from var(--accent) max(l, 0.72) c h);
    --accent-ring:oklch(from var(--accent) max(l, 0.62) c h);
    --on-accent:oklch(from var(--accent) calc(0.213 + 0.748 * clamp(0, (0.585 - l) * 999, 1)) 0 0);
  }
  :is([data-wd-theme=light],[data-theme="light"]){
    --accent-text:oklch(from var(--accent) min(l, 0.5) calc(c * min(1, 0.5 / l)) h);
    --accent-ring:oklch(from var(--accent) min(l, 0.6) calc(c * min(1, 0.6 / l)) h);
    --on-accent:oklch(from var(--accent) calc(0.213 + 0.748 * clamp(0, (0.585 - l) * 999, 1)) 0 0);
  }
}
/* kept from the 1.19.0 header: a rule, not a token */
:is([data-wd-theme=dark],[data-theme="dark"]) input,:is([data-wd-theme=dark],[data-theme="dark"]) select{color-scheme:dark}

/* ---- components/base.css ---- */
/* HeyGoal components · base · system 0.5.0. The focus ring, icon sizes and the keyframes every component file uses. Every value is a token. */
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:var(--icon-size);height:var(--icon-size);flex:none;display:block}
.ico.sm{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.ico.lg{width:var(--icon-size-lg);height:var(--icon-size-lg)}
@keyframes hg-fade-in{from{opacity:0}}
@keyframes hg-fade-out{to{opacity:0}}
@keyframes hg-pop{0%{transform:scale(var(--pop-from))}55%{transform:scale(var(--pop-peak))}100%{transform:scale(1)}}
@keyframes hg-wipe{from{clip-path:inset(0 var(--wipe-from) 0 0 round var(--radius-control));opacity:0}to{clip-path:inset(0 0 0 0 round var(--radius-control));opacity:1}}
@keyframes hg-pop-in{from{opacity:0;transform:translateY(var(--drop-popover)) scale(var(--scale-popover))}}
@keyframes hg-pop-out{to{opacity:0;transform:translateY(var(--drop-popover)) scale(var(--scale-popover))}}
@keyframes hg-dlg-in{from{opacity:0;transform:translateY(var(--rise-dialog)) scale(var(--scale-dialog))}}
@keyframes hg-dlg-out{to{opacity:0;transform:translateY(var(--rise-dialog)) scale(var(--scale-dialog))}}
@keyframes hg-page-in{from{opacity:0;transform:translateY(var(--rise-page))}}
@keyframes hg-intro{from{opacity:0;transform:translateY(var(--rise-intro))}}
@keyframes hg-door{from{transform:translateY(var(--door-logo-drop)) scale(var(--door-logo-scale));opacity:0}to{opacity:1}}
@keyframes hg-pulse{50%{opacity:var(--pulse-opacity)}}
@keyframes hg-ring{0%{transform:scale(var(--ring-from));opacity:var(--ring-opacity)}70%,100%{transform:scale(var(--ring-to));opacity:0}}

/* ---- components/shell.css ---- */
/* HeyGoal components · Shell · system 0.5.0. Top bar, sidebar (with the phone drawer and arrange mode), account card, front door. */

/* Top bar: glass, 56 tall in both themes. The phone bar (.mtop) takes the same height and glass at 860 px and under */
.topbar,.mtop{position:sticky;top:0;z-index:var(--z-shell);height:var(--topbar-height);box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);background:var(--topbar-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:inset 0 calc(-1 * var(--topbar-line)) 0 var(--line)}
.topbar{grid-column:1/-1;padding:0 var(--space-20)}
.mtop{display:none;padding:0 var(--space-12) 0 var(--space-16)}
.logo{display:inline-flex;align-items:center;padding:var(--space-4) var(--space-8);margin-left:calc(-1 * var(--space-8));color:var(--brand-ink);border-radius:var(--radius-control);text-decoration:none;transition:opacity var(--duration-fast)}
.logo:hover{opacity:var(--opacity-hover)}
.logo-svg{display:block;height:var(--logo-height-bar);width:auto;aspect-ratio:500/108.5;overflow:visible}
.mtop .logo-svg{height:var(--logo-height-phone)}
/* The phone bar names no page (decided 2026-10-12): the logo, then the tools on the right. The page's own heading names the page. */
.mtop .logo{margin-right:auto}
.mtop-timer{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-4) var(--space-12);border-radius:var(--radius-round);background:var(--surface-2);color:var(--text);text-decoration:none;font:var(--weight-semibold) var(--text-note)/1.3 var(--font-ui);font-variant-numeric:tabular-nums}
.mtop-menu{width:var(--control-height);height:var(--control-height);display:grid;place-items:center;padding:0;border:0;background:var(--surface-2);color:var(--text);border-radius:var(--radius-control);cursor:pointer}
.mtop-menu .ico{width:var(--icon-size-lg);height:var(--icon-size-lg)}
.nav-peek{width:var(--control-height-compact);height:var(--control-height-compact);flex:none;display:grid;place-items:center;padding:0;border:var(--border-width) solid var(--line);background:var(--surface);color:var(--muted);border-radius:var(--radius-control);cursor:pointer;animation:hg-fade-in var(--duration-in) var(--ease-fade)}
.nav-peek:hover{color:var(--text);background:var(--surface-2)}
.nav-peek[hidden]{display:none}
:is([data-wd-theme=dark],[data-theme="dark"]),:root{--logo-on-dark:block;--logo-on-light:none}
:is([data-wd-theme=light],[data-theme="light"]){--logo-on-dark:none;--logo-on-light:block}
.logo .on-dark,.gate-logo .on-dark{display:var(--logo-on-dark)}
.logo .on-light,.gate-logo .on-light{display:var(--logo-on-light)}
.mtop[data-force]{display:flex}
.mtop-me{display:flex;padding:0;border:0;background:none;cursor:pointer}

/* Sidebar: 248 full, 76 icons (.nav-min on the app), 0 hidden (.nav-hidden). The current link: the highlight and the 4.5 px accent bar */
.side{position:sticky;top:var(--topbar-height);height:calc(100dvh - var(--topbar-height));box-sizing:border-box;padding:var(--space-24) var(--space-16);border-right:var(--border-width) solid var(--line);display:flex;flex-direction:column;gap:var(--space-4);overflow:auto}
.side>*{flex-shrink:0}
.brand-row{display:flex;align-items:flex-start;gap:var(--space-4);padding-bottom:var(--space-24)}
.nav{display:flex;flex-direction:column;gap:var(--space-4)}
.nav a{position:relative;display:flex;align-items:center;gap:var(--space-12);min-height:var(--icon-button-size);padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--muted);font:var(--weight-medium) var(--text-body)/1.3 var(--font-ui);text-decoration:none;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),color var(--duration-fast)}
.nav a:hover{background:var(--surface);color:var(--text);transform:translateX(var(--nudge-nav))}
.nav a:active{transform:scale(var(--press-nav));transition-duration:var(--duration-fast)}
.nav a .ico{transition:transform var(--duration-in) var(--ease-out)}
.nav a:hover .ico{transform:translateY(var(--lift-icon))}
.nav a.on{background:transparent;color:var(--text);isolation:isolate}
.nav a.on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-control);background:var(--surface-2)}
.nav a.on.wipe::before{animation:hg-wipe var(--duration-wipe) var(--ease-out) both}
.nav a.on.wipe .nav-ind{animation:hg-fade-in var(--duration-wipe) var(--ease-out) both}
.nav-ind{position:absolute;left:calc(-1 * var(--space-16));top:var(--space-8);bottom:var(--space-8);width:var(--nav-indicator-width);border-radius:0 var(--radius-round) var(--radius-round) 0;background:var(--accent)}
.live{width:8px;height:8px;flex:none;margin-left:auto;border-radius:var(--radius-round);background:var(--live);animation:hg-pulse var(--duration-pulse) var(--ease-fade) infinite}
.live.paused{animation:none;background:var(--warning)}
.theme-btn{margin-top:auto;display:flex;align-items:center;gap:var(--space-12);min-height:var(--icon-button-size);padding:0 var(--space-12);border:0;background:none;color:var(--muted);border-radius:var(--radius-control);font:var(--weight-medium) var(--text-body)/1.3 var(--font-ui);text-align:left;cursor:pointer;transition:background-color var(--duration-fast),color var(--duration-fast)}
.theme-btn:hover{background:var(--surface);color:var(--text)}
.theme-btn .ico{transition:transform var(--duration-out) var(--ease-soft)}
.theme-btn:hover .ico{transform:rotate(var(--turn-theme))}
.app{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--duration-collapse) var(--ease-soft)}
.app.nav-min{grid-template-columns:var(--sidebar-width-rail) minmax(0,1fr)}
.app.nav-hidden{grid-template-columns:minmax(0,1fr)}
.nav-min .brand-row{flex-direction:column;align-items:center;gap:var(--space-12)}
.nav-min .brand-name,.nav-min .nav a span,.nav-min .theme-btn span,.nav-min .me-txt{display:none}
.nav-min .nav a,.nav-min .theme-btn{justify-content:center;padding:0}
.nav-min .nav a .live{position:absolute;top:var(--space-8);right:var(--space-8);margin:0}
.nav-min .me{justify-content:center}
.nav-hidden .side{display:none}
/* Arrange mode: the menu reorders in place. A dashed accent frame, grips, Home pinned */
.nav.editing{gap:var(--space-4);padding:var(--space-8);margin:0 calc(-1 * var(--space-8));border:var(--border-width) dashed var(--accent-dash);border-radius:var(--radius-card);animation:hg-fade-in var(--duration-in) var(--ease-fade)}
.nav.editing a{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 var(--border-width) var(--line);cursor:grab;user-select:none;-webkit-user-select:none}
.nav.editing a:hover,.nav.editing a:active{background:var(--surface-2);transform:none}
.nav.editing a.on::before,.nav.editing .nav-ind{display:none}
.nav.editing a.pinned{background:transparent;box-shadow:none;color:var(--muted);cursor:default}
.nav-grip,.nav-pin{margin-left:auto;margin-right:calc(-1 * var(--space-4));width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--radius-chip);color:var(--faint)}
.nav-grip{touch-action:none;cursor:grab}
.nav-grip .ico,.nav-pin .ico{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.nav.editing a:hover .nav-grip{color:var(--text)}
.nav.editing a.nav-dragging{z-index:var(--z-local);background:var(--surface-2);box-shadow:inset 0 0 0 var(--border-width-strong) var(--accent),var(--shadow-drag);transform:rotate(var(--drag-tilt)) scale(var(--drag-scale));cursor:grabbing;transition:none}
/* Phone: the sidebar becomes a drawer over a scrim */
.scrim{display:none}
@media (max-width:860px){
  .app,.app.nav-min{grid-template-columns:minmax(0,1fr)}
  .topbar{display:none}
  .mtop{display:flex}
  .side{position:fixed;inset:0 auto 0 0;z-index:var(--z-drawer);width:min(300px,84vw);height:100%;background:var(--surface);box-shadow:var(--shadow-drawer);transform:translateX(var(--drawer-offset));visibility:hidden;
    transition:transform var(--duration-drawer) var(--ease-soft),visibility 0s var(--duration-drawer)}
  .nav-open .side{transform:none;visibility:visible;transition:transform var(--duration-drawer) var(--ease-soft),visibility 0s}
  .nav a{min-height:var(--control-height)}
  .scrim{display:block;position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim-drawer);opacity:0;pointer-events:none;transition:opacity var(--duration-drawer)}
  .nav-open .scrim{opacity:1;pointer-events:auto}
}

/* Account card: plain, synced, syncing, offline, error, conflict, signed out (dashed). It opens the account menu */
.me{position:relative;width:100%;display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8);box-sizing:border-box;border:var(--border-width) solid transparent;background:none;color:inherit;border-radius:var(--radius-card);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),border-color var(--duration-fast)}
.me:hover,.me.on{background:var(--surface-2)}
.me:active{transform:scale(var(--press-nav));transition-duration:var(--duration-fast)}
.avatar{width:var(--avatar-size);height:var(--avatar-size);flex:none;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-round);background:var(--stone);color:var(--ink);font:var(--weight-bold) var(--text-label)/1 var(--font-ui)}
.avatar img{width:100%;height:100%;object-fit:cover}
.mtop .avatar{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--text-note)}
.me-txt{display:flex;flex-direction:column;min-width:0}
.me-txt b,.me-txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-txt b{font:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui)}
.me-txt small{font:var(--type-small);color:var(--muted)}
.me-st{display:flex;align-items:center;gap:var(--space-8)}
.me-st i{width:8px;height:8px;flex:none;border-radius:var(--radius-round);background:currentColor}
.sdot{position:absolute;top:var(--space-12);right:var(--space-12);width:8px;height:8px;border-radius:var(--radius-round);background:var(--live);pointer-events:none}
.sdot::after{content:"";position:absolute;inset:-3px;border-radius:var(--radius-round);border:2px solid var(--live);opacity:0}
.me.synced{background:var(--good-soft);border-color:var(--good-edge)}
.me.synced:hover,.me.synced.on{background:var(--good-soft-hover)}
.me.synced .me-st,.me.idle .me-st{color:var(--good-text)}
.me.synced .sdot::after{animation:hg-ring var(--duration-ring) var(--ease-out) infinite}
.me.pending,.me.syncing{background:var(--surface-2);border-color:var(--line)}
.me.pending .sdot,.me.syncing .sdot{background:var(--accent);animation:hg-pulse var(--duration-sync-pulse) var(--ease-fade) infinite}
.me.pending .me-st,.me.syncing .me-st{color:var(--text)}
.me.offline{background:var(--warning-soft);border-color:var(--warning-edge)}
.me.offline .sdot{background:var(--warning)}
.me.offline .me-st{color:var(--warning-text)}
.me.error,.me.conflict{background:var(--critical-soft);border-color:var(--critical-edge)}
.me.error .sdot,.me.conflict .sdot{background:var(--critical)}
.me.error .me-st,.me.conflict .me-st{color:var(--critical-text)}
.me.out{border-style:dashed;border-color:var(--faint)}
.me.out .sdot{background:transparent;box-shadow:inset 0 0 0 var(--border-width-strong) var(--faint)}
.me.out .me-st{color:var(--muted)}

/* Front door: the wordmark scales in, rises, then the sign-in card comes in. .login shows the card; .leave fades the door out */
.gate{position:fixed;inset:0;z-index:var(--z-gate);display:grid;place-items:center;padding:var(--space-24) var(--space-16);overflow:auto;background:var(--bg);opacity:1;transition:opacity var(--duration-out) var(--ease-fade)}
.gate.leave{opacity:0;pointer-events:none}
.gate-in{display:flex;flex-direction:column;align-items:center;gap:var(--space-24);width:100%;max-width:400px}
.gate-logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);transform:translateY(var(--door-logo-drop));transition:transform var(--duration-door-rise) var(--ease-soft);animation:hg-door var(--duration-door) var(--ease-soft) both}
.gate.login .gate-logo{transform:none}
.gate-hg{display:block;height:var(--logo-height-door);width:auto;aspect-ratio:500/108.5;overflow:visible;color:var(--brand-ink)}
.gate-card{width:100%;box-sizing:border-box;padding:var(--space-24);background:var(--surface);border:var(--border-width) solid var(--line);border-radius:var(--radius-card);opacity:0;transform:translateY(var(--rise-door-card));visibility:hidden;
  transition:opacity var(--duration-door-card) var(--ease-fade) var(--delay-door-card),transform var(--duration-door-card) var(--ease-soft) var(--delay-door-card),visibility 0s var(--duration-door-card)}
.gate.login .gate-card{opacity:1;transform:none;visibility:visible;transition:opacity var(--duration-door-card) var(--ease-fade) var(--delay-door-card),transform var(--duration-door-card) var(--ease-soft) var(--delay-door-card),visibility 0s}
.gate-card h2{margin:0;font:var(--type-heading);letter-spacing:var(--tracking-heading)}
.gate-card .sub{margin:var(--space-8) 0 var(--space-16);color:var(--muted)}
.gate-card .btn.primary{width:100%}
.gate-or{display:flex;align-items:center;gap:var(--space-12);margin:var(--space-16) 0;font:var(--type-small);color:var(--muted)}
.gate-or::before,.gate-or::after{content:"";flex:1;height:var(--border-width);background:var(--line)}
.gate-card form{display:flex;gap:var(--space-8)}
.gate-card form .input{flex:1}
.gate-local{display:block;width:100%;margin-top:var(--space-16);padding:var(--space-8);border:0;background:none;color:var(--muted);border-radius:var(--radius-chip);font:var(--type-note);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color var(--duration-fast)}
.gate-local:hover{color:var(--text)}
.gate-sent{padding:var(--space-8) 0;text-align:center}
.gate-sent .ico{width:var(--icon-size-lg);height:var(--icon-size-lg);margin:0 auto var(--space-8);color:var(--accent-text)}
@media (max-width:520px){.gate{--door-logo-drop:var(--door-logo-drop-phone)}.gate-card form{flex-direction:column}}

/* ---- components/actions.css ---- */
/* HeyGoal components · Actions · system 0.5.0. Button, Icon button and tool, Pill and segment. Class names match 1.19.0, so the app adopts this block as is. */

/* Button: secondary (default), .primary, .ghost, .danger (.armed on the second click); 44 tall, .compact 36 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:var(--control-height);box-sizing:border-box;padding:0 var(--space-16);border:var(--border-width) solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--radius-control);font:var(--type-button);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast),filter var(--duration-fast)}
.btn:hover{border-color:var(--line-strong);transform:translateY(var(--lift-button))}
.btn:active{transform:translateY(0) scale(var(--press-button));transition-duration:var(--duration-fast)}
.btn .ico{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;color:var(--critical-text);border-color:var(--critical-edge)}
.btn.danger.armed{background:var(--critical);border-color:var(--critical);color:var(--ink)}
.btn.compact,.btn.small{height:var(--control-height-compact);padding:0 var(--space-12);font-size:var(--text-note)}
.btn:disabled,.btn[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:default;transform:none;filter:none}

/* Icon button: 40 square, a 20 icon. .ink on a pastel card. .tool: the round edit-mode button on a card. .clock-plus: the dashed add slot */
.icon-btn{width:var(--icon-button-size);height:var(--icon-button-size);display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted);border-radius:var(--radius-control);cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),opacity var(--duration-fast)}
.icon-btn:hover{color:var(--text);background:var(--surface-2);transform:scale(var(--hover-icon))}
.icon-btn:active,.tool:active,.clock-plus:active{transform:scale(var(--press-icon));transition-duration:var(--duration-fast)}
/* Touch: the 40 px icon button keeps its look and reaches 44 px under a coarse pointer */
@media (pointer:coarse){:where(.icon-btn){position:relative}.icon-btn::after{content:"";position:absolute;inset:calc((var(--icon-button-size) - var(--control-height)) / 2)}}
.icon-btn.ink{color:var(--ink-soft)}
.icon-btn.ink:hover{color:var(--ink);background:var(--on-color-hover)}
.tool{width:var(--control-height-compact);height:var(--control-height-compact);display:grid;place-items:center;padding:0;border:0;background:var(--on-color-fill);color:var(--ink);border-radius:var(--radius-round);cursor:pointer;transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast)}
.tool:hover{background:var(--on-color-fill-hover);transform:scale(var(--hover-icon))}
.tool .ico{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.clock-plus{width:var(--control-height);display:grid;place-items:center;padding:0;border:var(--border-width-strong) dashed var(--faint);background:none;color:var(--muted);border-radius:var(--radius-card);cursor:pointer;transition:transform var(--duration-in) var(--ease-out),border-color var(--duration-fast),color var(--duration-fast)}
.clock-plus:hover{color:var(--text);border-color:var(--accent-ring);transform:scale(var(--hover-icon))}

/* Pill: a filter with a count, for a closed set (Open, Done, All). Segment: one choice of two or three */
.pills{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.pill{display:inline-flex;align-items:center;gap:var(--space-4);min-height:var(--control-height-compact);box-sizing:border-box;padding:0 var(--space-12);border:var(--border-width) solid var(--line);background:transparent;color:var(--muted);border-radius:var(--radius-chip);font:var(--type-label);white-space:nowrap;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}
.pill:hover{color:var(--text);border-color:var(--line-strong)}
.pill b{color:var(--text);font-weight:var(--weight-semibold)}
.pill.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.pill.on b{color:var(--bg)}
.pill:active,.seg button:active{transform:scale(var(--press-pill));transition-duration:var(--duration-fast)}
.seg{display:inline-flex;gap:0;padding:var(--space-4);background:var(--surface-2);border:var(--border-width) solid var(--line);border-radius:var(--radius-control)}
.seg button{height:calc(var(--icon-button-size) - 2 * var(--space-4) - 2 * var(--border-width));padding:0 var(--space-16);border:0;background:none;color:var(--muted);border-radius:var(--radius-chip);font:var(--type-button);white-space:nowrap;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),color var(--duration-fast)}
.seg button:hover{color:var(--text)}
.seg button.on,.seg button[aria-checked=true]{background:var(--text);color:var(--bg)}

/* ---- components/inputs.css ---- */
/* HeyGoal components · Inputs · system 0.5.0. Text, select and date; checkbox and task check; color pill and swatches; client field.
   1.19.0 styles bare input, select and textarea; the system scopes them to .input, so a page can hold other inputs. */

/* Text, select, date: 44 tall in an add row, the focus ring in --accent-ring with the 3 px halo */
.input{font:inherit;color:var(--text);background:var(--surface-2);border:var(--border-width) solid var(--line);border-radius:var(--radius-control);padding:0 var(--space-12);min-width:0;box-sizing:border-box;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast),background-color var(--duration-fast)}
input.input:not([type=checkbox]),select.input{height:var(--control-height)}
textarea.input{resize:vertical;padding:var(--space-12)}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-halo)}
select.input:has(option[value=""]:checked){color:var(--muted)}
select.input option{color:var(--text);background:var(--surface)}
select.psel.pc{background-color:var(--pc);color:var(--ink);border-color:transparent;font-weight:var(--weight-semibold);color-scheme:light}
.field{display:flex;flex-direction:column;gap:var(--space-8)}
.field>span{font:var(--weight-medium) var(--text-note)/1.45 var(--font-ui);color:var(--muted)}
.drange{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-8);max-width:100%}
.dl{display:inline-flex;flex-direction:column;gap:var(--space-4);flex:1 1 150px;min-width:0}
.dl small{font:var(--type-small);color:var(--muted)}
.dl .input{width:100%}
.addrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-12)}
.addrow .chk{height:var(--control-height)}
.addrow .help{margin-bottom:var(--space-12)}

/* Checkbox (a label with a native box) and task check (the 24 px box on a task row, with one pop on tick) */
.chk{display:inline-flex;align-items:center;gap:var(--space-8);padding:0 var(--space-4);font:var(--type-label);color:var(--muted);white-space:nowrap;cursor:pointer}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.check{width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;border:var(--border-width-strong) solid var(--faint);background:none;color:var(--on-accent);border-radius:var(--radius-chip);cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),border-color var(--duration-fast)}
.check:hover{transform:scale(var(--hover-check))}
.check:active{transform:scale(var(--press-check));transition-duration:var(--duration-fast)}
.check.on,.check[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.check .ico{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.check.pop{animation:hg-pop var(--duration-out) var(--ease-out)}

/* Color pill (the add-row control that opens the picker) and swatches (the 18-color palette) */
.csel{position:relative;display:inline-flex}
.color-pill{width:50px;height:var(--control-height);display:grid;place-items:center;padding:0;border:var(--border-width) solid var(--on-color-edge);background:var(--pc,var(--surface-2));color:var(--ink);border-radius:var(--radius-control);cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out)}
.color-pill:hover{transform:translateY(var(--lift-color-pill))}
.color-pill:active{transform:scale(var(--press-color-pill));transition-duration:var(--duration-fast)}
.swatches{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.sw{width:34px;height:34px;padding:0;border:3px solid var(--surface);outline:2px solid transparent;border-radius:var(--radius-round);cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),outline-color var(--duration-fast)}
.sw:hover{transform:scale(var(--hover-swatch))}
.sw:active{transform:scale(var(--press-swatch));transition-duration:var(--duration-fast)}
.sw.on,.sw[aria-checked=true]{outline-color:var(--text)}
.pop{position:absolute;top:calc(var(--control-height) + var(--space-8));left:0;z-index:var(--z-local);display:grid;grid-template-columns:repeat(6,28px);gap:var(--space-8);padding:var(--space-12);background:var(--surface);color:var(--text);border:var(--border-width) solid var(--line);border-radius:var(--radius-floating);box-shadow:var(--elevation-1);animation:hg-pop-in var(--duration-in) var(--ease-out)}
.pop[hidden]{display:none}
.pop .sw{width:28px;height:28px;border-width:2px}
.pop .def{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--control-height-compact);border:var(--border-width) solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--radius-chip);font:var(--type-label);cursor:pointer}
.pop .def.on{border-color:var(--text)}

/* Client field: a text input that shows the matching client's color, a ring for a new client, nothing when empty */
.cfield{position:relative;display:inline-flex;flex:1 1 170px;min-width:0}
.cfield .input{width:100%;transition:padding var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast)}
.cfield:has(.cpill.on,.cpill.new) .input{padding-left:46px}
.cpill{position:absolute;left:var(--space-12);top:50%;width:24px;height:14px;margin-top:-7px;border-radius:var(--radius-round);pointer-events:none;opacity:0;transform:scale(.6);
  transition:opacity var(--duration-fast),transform var(--duration-in) var(--ease-out),background-color var(--duration-fast)}
.cpill.on{opacity:1;transform:none;background:var(--cc);box-shadow:inset 0 0 0 1px var(--on-color-edge)}
.cpill.new{opacity:1;transform:none;background:transparent;box-shadow:inset 0 0 0 var(--border-width-strong) var(--faint)}

/* ---- components/containers.css ---- */
/* HeyGoal components · Containers · system 0.5.0. The card family, dialog, popover (account menu, help bubble), floating timer. */

/* Panels and cards: flat, a 1 px edge, no shadow. Whole-card targets lift; panels and the At a glance cards never do */
.panel{background:var(--surface);border:var(--border-width) solid var(--line);border-radius:var(--radius-card);padding:var(--space-24);margin-bottom:var(--space-16)}
.panel h2,.sec h2{margin:0 0 var(--space-12);font:var(--type-heading);letter-spacing:var(--tracking-heading)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);margin-bottom:var(--space-16)}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{container-type:inline-size;display:flex;flex-direction:column;min-height:200px;box-sizing:border-box;padding:var(--space-24);border-radius:var(--radius-card);color:var(--ink);text-decoration:none;transition:transform var(--duration-out) var(--ease-out)}
.tile:hover{color:var(--ink);transform:translateY(var(--lift-card));transition:transform var(--duration-in) var(--ease-out)}
.tile:active{transform:translateY(var(--lift-card)) scale(var(--press-tile));transition-duration:var(--duration-fast)}
.tile-top{display:flex;align-items:center;gap:var(--space-12);font-weight:var(--weight-semibold)}
.tile-num{margin-top:auto;padding-top:var(--space-24);font:var(--type-number);letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-desc{margin-top:var(--space-8);font:var(--weight-regular) var(--text-label)/1.4 var(--font-ui);color:var(--ink-soft)}
.big{margin:var(--space-4) 0;font:var(--type-number);letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums}
.big.muted{color:var(--muted)}
.big.late{color:var(--critical-text)}
.bill-tiles .panel{container-type:inline-size;margin:0;min-width:0}
.pcard,.ccard,.qcard{transition:transform var(--duration-out) var(--ease-out),border-color var(--duration-fast),background-color var(--duration-fast)}
.pcard:not(.pedit):hover,.ccard:hover,.qcard:not(.qedit):hover{transform:translateY(var(--lift-card));transition:transform var(--duration-in) var(--ease-out),border-color var(--duration-fast),background-color var(--duration-fast)}
.pcard{border-radius:var(--radius-card);padding:var(--space-20);color:var(--ink)}
.pcard h3{margin:var(--space-20) 0 0;font:var(--type-title);letter-spacing:var(--tracking-title)}
.ink-soft{margin:var(--space-4) 0 0;color:var(--ink-soft)}
.status{background:var(--on-color-fill);border:0;color:var(--ink);border-radius:var(--radius-round);padding:6px var(--space-12);font:var(--weight-semibold) var(--text-note)/1.3 var(--font-ui);color-scheme:light}
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin:var(--space-24) 0 0}
.pstats dt{font:var(--type-small);color:var(--ink-soft)}
.pstats dd{margin:2px 0 0;font:var(--type-heading)}
.ccard{margin:0;display:flex;flex-direction:column;gap:var(--space-8);box-shadow:inset 4px 0 0 var(--cc,transparent)}
.ccard .pstats dt{color:var(--muted)}
.cdot{width:10px;height:10px;flex:none;border-radius:var(--radius-round)}
.cdot.ring{display:inline-block;width:9px;height:9px;margin-right:7px;box-shadow:0 0 0 var(--border-width-strong) var(--on-color-edge-strong)}
/* A pastel card (.sec.colored or .pcard) re-points the things inside it to ink */
.sec.colored.panel{border-color:transparent;color:var(--ink)}
:is(.sec.colored,.pcard) :is(.sub,.meta,.kicker,.glink,.hint){color:var(--ink-soft)}
:is(.sec.colored,.pcard) .item{border-color:var(--on-color-line)}
:is(.sec.colored,.pcard) .check{border-color:var(--on-color-edge-strong)}
:is(.sec.colored,.pcard) .late{color:var(--critical-on-color)}
:is(.sec.colored,.pcard) a{color:var(--ink)}
:is(.sec.colored,.pcard) .btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
:is(.sec.colored,.pcard) .btn.ghost{color:var(--ink);border-color:var(--on-color-fill-hover)}
:is(.sec.colored,.pcard) :is(.input,.status){background:var(--on-color-surface-strong);color:var(--ink);border-color:var(--on-color-edge);color-scheme:light}
/* At a glance: inner cards, one step below the panel */
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
.gcard{container-type:inline-size;display:flex;flex-direction:column;min-height:170px;padding:var(--space-16) var(--space-20);background:var(--surface-2);border-radius:var(--radius-inner)}
.sec.colored .gcard,.sec.colored .shortcut{background:var(--on-color-surface)}
.ghours{margin-top:var(--space-12);font:var(--type-number);letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums;color:var(--accent-text)}
.sec.colored .ghours{color:var(--ink)}
.glink{font:var(--weight-bold) var(--text-small)/1.3 var(--font-ui);color:var(--muted);text-decoration:none}
.glink:hover{color:var(--text)}
.gsub{display:flex;gap:var(--space-20);margin-top:auto;padding-top:var(--space-16)}
.gsub div{display:flex;flex-direction:column}
.gsub b{font:var(--weight-heavy) var(--text-heading)/1.2 var(--font-display);letter-spacing:-.02em}
.gsub small{font:var(--type-micro);font-weight:var(--weight-regular);color:var(--muted)}
.feat{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-8) 0;border-top:var(--border-width) solid var(--line)}
.feat:first-of-type{border-top:0;margin-top:6px}
.sec.colored .feat{border-color:var(--on-color-line)}
.feat i{width:9px;height:9px;flex:none;margin-top:6px;border-radius:var(--radius-round)}
.feat b{display:block;font:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat small{display:block;font:var(--type-small);color:var(--muted)}
/* Billing zones: a 3 px top strip in the zone hue */
.zone{--zc:var(--zone-neutral);position:relative;box-shadow:inset 0 3px 0 var(--zc);scroll-margin-top:var(--space-16);transition:box-shadow var(--duration-flash)}
.zone.flash{box-shadow:inset 0 3px 0 var(--zc),0 0 0 2px var(--zc)}
.zone-inv{--zc:var(--zone-invoices)}.zone-proj{--zc:var(--zone-project)}.zone-exp{--zc:var(--zone-expenses)}.zone-pay{--zc:var(--zone-payments)}
.zchip{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--radius-chip);background:var(--zc);color:var(--ink)}
.zdot{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:var(--radius-round);background:var(--zc)}

/* Dialog: --radius-floating, --elevation-2, over the scrim. In and out */
dialog.dlg,.dlg{width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:var(--space-24);background:var(--surface);color:var(--text);border:var(--border-width) solid var(--line);border-radius:var(--radius-floating);box-shadow:var(--elevation-2)}
dialog.dlg::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}
dialog.dlg[open]{animation:hg-dlg-in var(--duration-in) var(--ease-out)}
dialog.dlg[open]::backdrop{animation:hg-fade-in var(--duration-in) var(--ease-fade)}
dialog.dlg.closing{animation:hg-dlg-out var(--duration-fast) var(--ease-in) both}
dialog.dlg.closing::backdrop{animation:hg-fade-out var(--duration-fast) var(--ease-in) both}
.dlg h2{margin:0;font:var(--type-heading);letter-spacing:var(--tracking-heading)}
.dlg form{display:flex;flex-direction:column;gap:var(--space-12)}
.dlg-list{margin-top:var(--space-20);padding-top:var(--space-16);border-top:var(--border-width) solid var(--line)}
.dlg-list h3{margin:0 0 var(--space-8);font:var(--weight-bold) var(--text-body)/1.3 var(--font-display)}
.dlg-list ul{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto}
.dlg-list li{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) 0;border-top:var(--border-width) solid var(--line)}
.dlg-list li:first-child{border-top:0}

/* Popover: the account menu (with arrow-key focus) and the ? help bubble */
.me-pop{position:fixed;z-index:var(--z-popover);min-width:200px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:var(--border-width) solid var(--line);border-radius:var(--radius-floating);box-shadow:var(--elevation-1);animation:hg-pop-in var(--duration-in) var(--ease-out)}
.me-pop.closing{animation:hg-pop-out var(--duration-fast) var(--ease-in) both}
.me-pop .who{min-width:0;margin-bottom:var(--space-4);padding:var(--space-8) 10px 10px;border-bottom:var(--border-width) solid var(--line)}
.me-pop .who b,.me-pop .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-pop .who b{font:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui)}
.me-pop .who small{font:var(--type-small);color:var(--muted)}
.me-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--icon-button-size);padding:0 10px;box-sizing:border-box;border:0;background:none;color:var(--text);border-radius:var(--radius-control);font:var(--type-label);text-align:left;text-decoration:none;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),color var(--duration-fast)}
.me-item:hover,.me-item:focus-visible{background:var(--surface-2)}
.me-item:active{transform:scale(var(--press-pill));transition-duration:var(--duration-fast)}
.me-item .ico{color:var(--muted)}
.me-item.out,.me-item.out .ico{color:var(--critical-text)}
.me-sep{height:var(--border-width);margin:var(--space-4) 2px;background:var(--line)}
.help{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border:var(--border-width) solid var(--faint);border-radius:var(--radius-round);color:var(--muted);font:var(--weight-bold) var(--text-small)/1 var(--font-ui);letter-spacing:0;text-transform:none;cursor:help}
.help .tip{position:absolute;bottom:calc(100% + var(--space-8));left:50%;z-index:var(--z-tip);width:min(300px,80vw);padding:10px var(--space-12);background:var(--text);color:var(--bg);border-radius:var(--radius-inner);font:var(--type-note);letter-spacing:0;text-transform:none;text-align:left;pointer-events:none;opacity:0;transform:translate(-50%,var(--rise-tip));
  transition:opacity var(--duration-fast),transform var(--duration-in) var(--ease-out)}
.help .tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--text)}
.help:hover .tip,.help:focus-visible .tip,.help:focus .tip{opacity:1;transform:translate(-50%,0)}

/* Floating timer: glass, docked to the content's right edge, above the safe area */
.tf-dock{position:fixed;left:0;right:0;bottom:var(--space-20);z-index:var(--z-floating);display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);pointer-events:none;transition:grid-template-columns var(--duration-collapse) var(--ease-soft)}
.tf-col{grid-column:2;width:100%;max-width:var(--main-max-width);min-width:0;box-sizing:border-box;padding:0 var(--page-pad);display:flex;justify-content:flex-end}
.tfloat{position:relative;pointer-events:auto;display:flex;align-items:center;gap:var(--space-4);max-width:100%;min-width:0;padding:var(--space-8) var(--space-8) var(--space-8) var(--space-16);border-radius:var(--radius-floating);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:var(--border-width) solid color-mix(in srgb,var(--glass-line) 80%,transparent);box-shadow:var(--elevation-1);animation:hg-pop-in var(--duration-in) var(--ease-out)}
.tfloat[hidden]{display:none}
.tf-info{display:flex;align-items:center;gap:var(--space-12);min-width:0;padding-right:var(--space-4);color:var(--text);text-decoration:none}
.tf-info .live{margin:0}
.tf-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tf-txt b{font:var(--type-heading);font-variant-numeric:tabular-nums}
.tf-txt small{max-width:200px;font:var(--type-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-tools{display:flex;align-items:center;gap:2px;flex:none}
.tf-tools .icon-btn{color:var(--text)}
.tfloat.paused .tf-txt b{color:var(--muted)}

/* ---- components/feedback.css ---- */
/* HeyGoal components · Feedback · system 0.5.0. Toast, status pill and dot, meter. */

/* Toast: inverted to --text, raised above the floating timer on narrow screens. Message, message with Undo, message with a named action */
#toast,.toast{position:fixed;left:50%;bottom:28px;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-16);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;margin:0;padding:var(--space-12) var(--space-20);border:0;background:var(--text);color:var(--bg);border-radius:var(--radius-floating);font:var(--weight-semibold) var(--text-label)/1.4 var(--font-ui);box-shadow:var(--elevation-1);
  opacity:0;pointer-events:none;transform:translate(-50%,var(--rise-toast)) scale(var(--scale-toast));transition:opacity var(--duration-fast),transform var(--duration-out) var(--ease-out)}
#toast.show,.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
#toast button,.toast button{padding:0;border:0;background:none;color:inherit;font:var(--weight-bold) var(--text-label)/1.4 var(--font-ui);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
@media (max-width:1100px){body:has(.tfloat:not([hidden])) :is(#toast,.toast){bottom:92px}}

/* Status pill (invoices): Draft, Sent, Paid, Overdue, always the word. The live dot is in shell.css */
.ipill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:var(--border-width) solid var(--line);border-radius:var(--radius-round);background:var(--surface-2);color:var(--muted);font:var(--weight-bold) var(--text-small)/1.4 var(--font-ui);white-space:nowrap}
.ipill.sent{background:var(--info);color:var(--ink);border-color:transparent}
.ipill.paid{background:var(--zone-payments);color:var(--ink);border-color:transparent}
.ipill.overdue{background:var(--critical);color:var(--ink);border-color:transparent}
.qtag{display:inline-block;margin:var(--space-4) var(--space-4) 0 0;padding:1px var(--space-8);border:var(--border-width) solid var(--line);border-radius:var(--radius-round);font:var(--type-micro);font-weight:var(--weight-regular);color:var(--muted)}
.qtag.proj{background:var(--pc,var(--surface-2));color:var(--ink);border-color:transparent;font-weight:var(--weight-semibold)}

/* Meter: a fraction (3 of 5) or a range (day X of N). Flat fills, always with the number beside */
.meter{height:8px;margin-top:var(--space-12);overflow:hidden;border-radius:var(--radius-round);background:var(--surface-2)}
.meter span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.start-meter{height:6px;margin:0 0 var(--space-16);overflow:hidden;border-radius:var(--radius-round);background:var(--surface-2)}
.start-meter span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.sec.colored .start-meter{background:var(--on-color-surface)}
.sec.colored .start-meter span{background:var(--ink)}
.prange{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-16);font:var(--type-small);color:var(--ink-soft);white-space:nowrap}
.prange i{flex:1;min-width:30px;height:6px;overflow:hidden;border-radius:var(--radius-round);background:var(--on-color-track)}
.prange b{display:block;height:100%;border-radius:inherit;background:var(--ink)}

/* ---- components/data.css ---- */
/* HeyGoal components · Data · system 0.5.0. List row and table, calendar, kicker and page head. */

/* List row and table: rows only tint. Inline edit turns a row into a one-line form */
.list{list-style:none;margin:0;padding:0;overflow:hidden;background:var(--surface);border:var(--border-width) solid var(--line);border-radius:var(--radius-card)}
.list.flat{background:none;border:0;border-radius:0}
.item{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-top:var(--border-width) solid var(--line);transition:background-color var(--duration-fast)}
.list.flat .item{padding:var(--space-12) 0}
.item:first-child{border-top:0}
.list:not(.flat) .item:hover{background:var(--surface-2)}
.item-title{font-weight:var(--weight-medium)}
.item.done .item-title{color:var(--muted);text-decoration:line-through}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-4);font:var(--type-note);color:var(--muted)}
.pri{display:inline-flex;align-items:center;gap:6px}
.pri i{width:8px;height:8px;border-radius:var(--radius-round);background:var(--pri)}
.pri.high{--pri:var(--priority-high)}.pri.medium{--pri:var(--priority-medium)}.pri.low{--pri:var(--priority-low)}.pri.backburner i{background:none;box-shadow:inset 0 0 0 var(--border-width-strong) var(--priority-backburner)}
.late{color:var(--critical-text);font-weight:var(--weight-semibold)}
.hint{font:var(--type-small);color:var(--muted)}
.empty{padding:var(--space-32) var(--space-20);text-align:center;color:var(--muted)}
.tbl{overflow-x:auto;overflow-y:hidden}
.tbl table,table.tbl{width:100%;border-collapse:collapse;font:var(--weight-regular) var(--text-label)/1.4 var(--font-ui)}
.tbl th{padding:var(--space-8) 10px;border-bottom:var(--border-width) solid var(--line);text-align:left;font:var(--weight-medium) var(--text-note)/1.3 var(--font-ui);color:var(--muted)}
.tbl td{padding:10px;border-bottom:var(--border-width) solid var(--line);vertical-align:middle;transition:background-color var(--duration-fast)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tr.paid td{color:var(--muted)}
tr.erow td{padding:var(--space-8) 6px}

/* Calendar: month cells, own chips, external tinted chips, span bars (project filled, task outlined), filter chips */
.cal{overflow:hidden;border:var(--border-width) solid var(--line);border-radius:var(--radius-card)}
.chead,.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.chead span{padding:var(--space-8) 10px;border-bottom:var(--border-width) solid var(--line);font:var(--weight-semibold) var(--text-small)/1.3 var(--font-ui);color:var(--muted)}
.cday{display:flex;flex-direction:column;gap:2px;min-height:88px;min-width:0;padding:var(--space-8);border:0;border-right:var(--border-width) solid var(--line);border-bottom:var(--border-width) solid var(--line);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),box-shadow var(--duration-fast)}
.cday:nth-child(7n){border-right:0}
.cday.pad{cursor:default}
.cday:hover:not(.pad){background:var(--surface-2)}
.cday:not(.pad):active{transform:scale(var(--press-day));transition-duration:var(--duration-fast)}
.cday.on{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--accent-ring)}
.cnum{font:var(--weight-semibold) var(--text-note)/1.3 var(--font-ui);color:var(--muted)}
.cday.today .cnum{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-round);background:var(--accent);color:var(--on-accent)}
.cchip{display:block;padding:2px 6px;overflow:hidden;border-radius:var(--radius-chip);background:var(--surface-2);box-shadow:inset 3px 0 0 var(--c);font:var(--weight-regular) var(--text-micro)/1.3 var(--font-ui);white-space:nowrap;text-overflow:ellipsis}
.cday.on .cchip,.cday:hover .cchip{background:var(--bg)}
.cchip.done{color:var(--muted);text-decoration:line-through}
.cchip.ext{background:color-mix(in srgb,var(--c) 26%,var(--surface-2))}
.cbar{display:block;height:16px;padding:0 6px;overflow:hidden;background:var(--c);color:var(--ink);font:var(--weight-semibold) var(--text-micro)/16px var(--font-ui);white-space:nowrap;text-overflow:ellipsis}
.cbar.s{margin-left:var(--space-4);border-radius:var(--radius-chip) 0 0 var(--radius-chip)}.cbar.e{margin-right:var(--space-4);border-radius:0 var(--radius-chip) var(--radius-chip) 0}.cbar.s.e{border-radius:var(--radius-chip)}
.cbar.task{background:transparent;color:var(--text);box-shadow:inset 0 0 0 var(--border-width-strong) var(--c)}
.cbar.ext{background:color-mix(in srgb,var(--c) 55%,transparent);color:var(--text)}
.cal-filter .pill{gap:var(--space-8)}
.cal-filter .pill:not(.on){border-style:dashed;text-decoration:line-through;text-decoration-color:var(--faint)}
.sec.colored :is(.cal,.cday,.chead span){border-color:var(--on-color-line)}
.sec.colored .cchip{background:var(--on-color-surface)}
.sec.colored .cday:hover:not(.pad),.sec.colored .cday.on{background:var(--on-color-surface)}
.sec.colored .cnum{color:var(--ink-soft)}
.sec.colored .cday.today .cnum{background:var(--ink);color:var(--on-ink)}

/* Kicker and page head: kicker, title, tools on the right; the help bubble is in containers.css */
.kicker{display:inline-flex;align-items:center;gap:6px;font:var(--type-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--muted)}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-20);margin-bottom:var(--space-24)}
.title{margin:0;font:var(--type-display);letter-spacing:var(--tracking-display);text-wrap:pretty}
.sub{margin:6px 0 0;color:var(--muted)}
.hub-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-24);margin-bottom:var(--space-32)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12)}

/* ---- components/domain.css ---- */
/* HeyGoal components · Domain · system 0.5.0. Invoice sheet, Getting started card, quick access item, note item. */

/* Invoice sheet: paper-white in both themes; print drops the shadow and the radius. The PDF twin draws the same rows in Helvetica */
.inv-sheet{max-width:860px;box-sizing:border-box;padding:clamp(24px,4vw,48px);background:var(--paper);color:var(--paper-ink);border-radius:var(--radius-card);box-shadow:0 1px 0 var(--line),var(--shadow-paper);font:var(--weight-regular) var(--text-label)/1.5 var(--font-ui);color-scheme:light}
.inv-sheet *{color:inherit}
.inv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-24);margin-bottom:var(--space-32)}
.inv-title{margin:0;font:var(--weight-heavy) 34px/1 var(--font-display);letter-spacing:-.03em}
.inv-brand{display:flex;align-items:center;gap:var(--space-12)}
.inv-brand img{width:56px;height:56px;object-fit:contain;border-radius:var(--radius-inner)}
.inv-brand .nm{font:var(--type-heading)}
.inv-meta{display:grid;grid-template-columns:auto auto;gap:var(--space-4) var(--space-16);margin:0;text-align:right;font:var(--type-note)}
.inv-meta dt{color:var(--paper-muted)}
.inv-meta dd{margin:0;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.inv-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24);margin-bottom:var(--space-32)}
.inv-parties .k{margin-bottom:6px;font:var(--type-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--paper-muted)}
.inv-parties pre{margin:0;font:inherit;white-space:pre-wrap}
.inv-tbl{width:100%;margin-bottom:var(--space-24);border-collapse:collapse}
.inv-tbl th{padding:var(--space-8) 6px;border-bottom:2px solid var(--paper-ink);text-align:left;font:var(--weight-semibold) var(--text-small)/1.3 var(--font-ui);color:var(--paper-muted)}
.inv-tbl td{padding:10px 6px;border-bottom:var(--border-width) solid var(--paper-line);vertical-align:top}
.inv-tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-sum{display:grid;grid-template-columns:1fr auto;gap:6px var(--space-20);width:min(320px,100%);margin-left:auto;font-variant-numeric:tabular-nums}
.inv-sum .sep{grid-column:1/-1;margin-top:var(--space-4);border-top:2px solid var(--paper-ink)}
.inv-sum .tot{padding-top:var(--space-4);font:var(--weight-heavy) 22px/1.2 var(--font-display);letter-spacing:-.02em}
.inv-sum .tot+.tot{text-align:right}
.inv-note{margin-top:var(--space-24);padding-top:var(--space-16);border-top:var(--border-width) solid var(--paper-line);color:var(--paper-muted);white-space:pre-wrap}
.inv-paid-stamp{display:inline-block;padding:var(--space-4) 10px;border:3px solid var(--paper-good);border-radius:var(--radius-chip);color:var(--paper-good);font:var(--weight-heavy) var(--text-label)/1.2 var(--font-display);letter-spacing:var(--tracking-kicker)}
@media print{.inv-sheet{box-shadow:none;border-radius:0;padding:0;max-width:none}}

/* Getting started: done, next (with its button), pending; the meter; where your data lives; the demo banner */
.start{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-20) var(--space-32);align-items:start}
.start-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.start-step{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-12);border-radius:var(--radius-control)}
.start-step.next{background:var(--surface-2)}
.start-lbl{flex:1 1 180px;min-width:0;color:inherit;text-decoration:none}
.start-lbl b{display:block;font:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui)}
.start-lbl small{display:block;font:var(--type-small);color:var(--muted)}
.start-lbl:hover b{text-decoration:underline;text-underline-offset:3px}
.start-step.done .start-lbl b{color:var(--muted);text-decoration:line-through}
.start-dot{width:24px;height:24px;flex:none;display:grid;place-items:center;border:var(--border-width-strong) solid var(--faint);border-radius:var(--radius-round);color:var(--on-accent)}
.start-dot .ico{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.start-step.done .start-dot{background:var(--accent);border-color:var(--accent)}
.start-step.next .start-dot{border-color:var(--accent-ring)}
.start-where{display:flex;flex-direction:column;gap:var(--space-8);min-width:0;padding:var(--space-16);background:var(--surface-2);border-radius:var(--radius-inner)}
.start-where p{margin:0;font:var(--weight-regular) var(--text-label)/1.45 var(--font-ui)}
.start-demo{padding-top:var(--space-12);border-top:var(--border-width) solid var(--line);font:var(--type-note);color:var(--muted)}
.start-demo b{color:var(--text)}
.start-demo .btn{margin-top:var(--space-8)}
.sec.colored :is(.start-step.next,.start-where){background:var(--on-color-surface)}
.sec.colored :is(.start-lbl small,.start-demo,.start-step.done .start-lbl b){color:var(--ink-soft)}
.sec.colored .start-demo{border-color:var(--on-color-line)}

/* Quick access item: a link, a snippet or an image; its project tag in the project color */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-12)}
.qcard{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:var(--space-12) var(--space-16);background:var(--surface-2);border:var(--border-width) solid var(--line);border-radius:var(--radius-card)}
.qcard:not(.qedit):hover{border-color:var(--faint)}
.qcard .qhead{display:flex;align-items:center;gap:var(--space-12);min-width:0;color:inherit;text-decoration:none}
.qcard .qhead .ico{color:var(--muted)}
.qcard .qhead:hover .ico{color:var(--text)}
.qcard b,.qcard small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard b{font:var(--weight-semibold) var(--text-label)/1.3 var(--font-ui)}
.qcard small{font:var(--type-small);color:var(--muted)}
.qchip{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--radius-control);background:var(--stone);color:var(--ink);font:var(--weight-heavy) var(--text-body)/1 var(--font-display)}
.qchip.snip{background:var(--surface-2);color:var(--text);border:var(--border-width) solid var(--line)}
.qcard.qimg{padding:0;overflow:hidden}
.qcard.qimg .thumb-btn{height:150px;background:var(--image-backdrop)}
.qcard.qimg img{width:100%;height:100%;object-fit:cover;display:block}
.qcard.qimg .qbody{padding:10px var(--space-16) var(--space-12)}
.qcard.qimg .qtools{background:var(--image-scrim);color:var(--on-image)}
.qcard.qimg .qtools .icon-btn{color:var(--on-image)}
.shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-8)}
.shortcut{display:flex;align-items:center;gap:10px;min-width:0;padding:var(--space-8) 10px;border-radius:var(--radius-control);background:var(--surface-2);color:inherit;text-decoration:none;transition:transform var(--duration-out) var(--ease-out),background-color var(--duration-fast)}
.shortcut:hover{background:var(--line);transform:translateY(var(--lift-chip));transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast)}

/* Note item: a project-colored bar, the date and time, the image count */
.notes{display:grid;grid-template-columns:290px minmax(0,1fr);gap:var(--space-16);align-items:start}
.nitem{width:100%;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px var(--space-12);border:0;background:none;color:var(--text);border-radius:var(--radius-control);text-align:left;cursor:pointer;
  transition:transform var(--duration-in) var(--ease-out),background-color var(--duration-fast),box-shadow var(--duration-fast)}
.nitem b{font-weight:var(--weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nitem small{font:var(--type-small);color:var(--muted)}
.nitem:hover{background:var(--surface-2);transform:translateX(var(--nudge-note))}
.nitem.on{background:var(--surface-2);box-shadow:inset 4px 0 0 var(--nc,var(--accent))}
@media (max-width:860px){.tiles,.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}.glance,.notes{grid-template-columns:minmax(0,1fr)}.start{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.tiles,.tiles.four{grid-template-columns:minmax(0,1fr)}}

/* ---- components/patterns.css ---- */
/* HeyGoal patterns · system 0.6.0. The layout that holds components together on a page: the Home board and its arrange mode, the Billing jump bar, the calendar day panel and the edit row. Values are tokens; the breakpoints are 1.19.0's. */

/* Home board: six columns; a tile takes two, a panel three, a wide panel all six */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--space-16);margin-bottom:var(--space-16)}
.sec.tile{grid-column:span 2}
.sec.panel{position:relative;grid-column:span 3;margin:0}
.sec.wide,.board-empty{grid-column:1/-1}
@media (max-width:1060px){.board{grid-template-columns:repeat(4,minmax(0,1fr))}.sec.panel{grid-column:span 4}}
@media (max-width:520px){.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}.sec.tile{grid-column:span 1}.sec.panel{grid-column:1/-1}}

/* Arrange mode on Home: the hint bar in the dashed accent frame (as the menu has), the card picker, a grip and tools on each card */
.hub-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-16);min-height:var(--control-height);margin:0 0 var(--space-16)}
.hub-bar.on{padding:var(--space-12) var(--space-12) var(--space-12) var(--space-16);border:var(--border-width) dashed var(--accent-dash);border-radius:var(--radius-card);animation:hg-fade-in var(--duration-in) var(--ease-fade)}
.pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);margin:0 0 var(--space-16);animation:hg-fade-in var(--duration-in) var(--ease-fade)}
.pick-row .pill:not(.on){border-style:dashed}
.editing .sec{position:relative;cursor:grab;user-select:none;-webkit-user-select:none;outline:var(--border-width-strong) dashed transparent;outline-offset:var(--space-4)}
.editing .sec:hover{outline-color:var(--faint)}
.editing .sec:focus-visible{outline:2px solid var(--accent-ring);outline-offset:var(--space-4)}
.editing .tile:hover,.editing .tile:active{transform:none}
.editing .sec :is(.tile-top,h2){padding-right:calc(3 * var(--control-height-compact) + 2 * var(--space-4) + var(--space-8))}
.sec-tools{position:absolute;top:var(--space-12);right:var(--space-12);z-index:var(--z-raised);display:flex;gap:var(--space-4);animation:hg-fade-in var(--duration-in) var(--ease-fade)}
.sec.panel:not(.colored) .tool{background:var(--surface-2);color:var(--text)}
.sec.panel:not(.colored) .tool:hover{background:var(--line)}
.tool.grip{cursor:grab;touch-action:none}

/* Billing jump bar: a pill per zone in the zone hue; the jump flashes the panel's strip (.zone.flash) */
@media (max-width:1060px){.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bill-tiles .big{overflow-wrap:anywhere}
.bill-nav{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0 0 var(--space-16)}
.bill-nav .pill{gap:var(--space-8);color:var(--text)}
.bill-nav .pill i{width:9px;height:9px;flex:none;border-radius:var(--radius-round);background:var(--zc)}
.bill-nav .pill:hover{border-color:var(--zc);background:color-mix(in srgb,var(--zc) 16%,transparent)}

/* Calendar day panel: the picked day's items, under the month */
.cday-list{margin-top:var(--space-16);padding-top:var(--space-12);border-top:var(--border-width) solid var(--line)}
.sec.colored .cday-list{border-color:var(--on-color-line)}

/* Inline edit: the row turns into a one-line form in place */
.erow .addrow{margin:0}

/* Drag on Home: the slot a card leaves, and the card under the pointer */
.sec.placeholder{opacity:var(--opacity-placeholder);outline:2px dashed var(--text)}
.drag-ghost{position:fixed;z-index:var(--z-popover);margin:0;pointer-events:none;box-shadow:var(--shadow-drag);transform:rotate(var(--drag-tilt)) scale(var(--drag-scale));cursor:grabbing}

/* Page layout: the helpers every page uses */
.small{font-size:var(--text-note)}
.zhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-12) var(--space-16);margin-bottom:var(--space-12)}
.zhead h2{margin:0;display:flex;align-items:center;gap:var(--space-12)}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--space-12)}
.grow{flex:1 1 220px;min-width:0}
.two,.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.grid2{gap:var(--space-12) var(--space-16)}
.two>*,.grid2>*{min-width:0}
.two>.panel{margin:0}
.field.full{grid-column:1/-1}
.back{display:inline-flex;align-items:center;gap:var(--space-8);margin-bottom:var(--space-12);color:var(--muted);font-weight:var(--weight-medium);text-decoration:none;transition:color var(--duration-fast)}
.back:hover{color:var(--text)}
@media (max-width:860px){.two,.grid2{grid-template-columns:minmax(0,1fr)}}

/* Home head: the greeting, and the clocks on the right. A clock's dot says work hours (--good), the edge of them (--warning) or off */
.hub-intro{flex:1 1 min(100%,520px);min-width:0}
.hub-name{display:inline-block}
.clocks-bar{margin-left:auto;flex:0 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:var(--space-12);max-width:min(100%,760px)}
.mclock{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:118px;padding:var(--space-12) var(--space-16);background:var(--surface);border:var(--border-width) solid var(--line);border-radius:var(--radius-card)}
.mc-label{max-width:150px;padding-right:var(--space-16);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--type-small);color:var(--muted)}
.mc-time{margin:var(--space-4) 0;font:var(--weight-heavy) var(--text-title)/1.1 var(--font-display);letter-spacing:var(--tracking-title);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-meta{display:flex;align-items:center;gap:var(--space-8);font:var(--type-small);color:var(--muted);white-space:nowrap}
.mc-x{position:absolute;top:var(--space-4);right:var(--space-4);width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-round);background:transparent;color:var(--muted);opacity:0;cursor:pointer;transition:opacity var(--duration-fast)}
.mc-x:hover{background:var(--surface-2);color:var(--text)}
.mclock:hover .mc-x,.mc-x:focus-visible{opacity:1}
@media (hover:none){.mc-x{opacity:1}}
.st{display:inline-flex;align-items:center;gap:var(--space-8)}
.st i{width:8px;height:8px;border-radius:var(--radius-round);background:var(--faint)}
.st.work i{background:var(--good)}.st.edge i{background:var(--warning)}
.clock{min-width:210px;padding:var(--space-16) var(--space-24);background:var(--bone);color:var(--ink);border-radius:var(--radius-card)}
.clock-time{font:var(--type-number);letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums}
.clock-zone{margin-top:var(--space-8);font:var(--type-note);color:var(--ink-soft)}
:is([data-wd-theme=light],[data-theme="light"]) .clock{background:var(--ink);color:var(--on-ink)}
:is([data-wd-theme=light],[data-theme="light"]) .clock-zone{color:color-mix(in srgb,var(--on-ink) 62%,var(--ink))}

/* Time: the timer bar, running or ready */
.panel.timer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12)}
.panel.timer.on{justify-content:space-between;border-color:var(--accent-ring)}

/* Notes: the list on the left, the open note on the right */
.notes{display:grid;grid-template-columns:290px minmax(0,1fr);gap:var(--space-16);align-items:start}
.notes>.panel{margin:0;min-width:0}
.nlist .input{width:100%;margin-bottom:var(--space-8)}
.nlist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.neditor{display:flex;flex-direction:column;gap:var(--space-12);min-height:62vh}
.ntitle{flex:1;padding:var(--space-4) 0;border:0;background:none;color:var(--text);font:var(--type-title);letter-spacing:var(--tracking-title)}
.neditor textarea{flex:1;min-height:46vh;padding:0;border:0;background:none;color:var(--text);font:var(--type-body);line-height:1.7;resize:vertical}
.ntitle:focus-visible,.neditor textarea:focus-visible{outline:none}
@media (max-width:860px){.notes{grid-template-columns:minmax(0,1fr)}}

/* Settings: a row per setting, the label left and its control right */
.setrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-20);padding:var(--space-16) 0;border-top:var(--border-width) solid var(--line)}
.setrow p{margin:var(--space-4) 0 0}
.prem{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-8);border-radius:var(--radius-round);background:var(--premium-badge);color:var(--ink);font:var(--type-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;white-space:nowrap;vertical-align:middle}
:is(h1,h2) .prem{margin-left:var(--space-8)}

/* Print: the calendar page prints as a clean paper sheet, the grid and its month only */
@media print{
  html[data-route=calendar]{--bg:var(--paper);--surface:var(--paper);--surface-2:var(--paper-soft);--line:var(--paper-line-strong);--text:var(--paper-ink);--muted:var(--paper-muted);--faint:var(--paper-muted);--ink:var(--paper-ink)}
  html[data-route=calendar] .cday.today .cnum{background:var(--paper-ink);color:var(--paper)}
  html[data-route=calendar] :is(.cbar,.cchip){-webkit-print-color-adjust:exact;print-color-adjust:exact}
}