/* core.css — design tokens, app shell, shared components (monday.com's Vibe look). Module styles live in css/<module>.css.
   Outside :root, @font-face and print, colors come from tokens only, so every rule works in light, dark and night. */
/* ---------- fonts ---------- */
/* Self-hosted (public/fonts, SIL OFL, see OFL.txt) so the app keeps working offline and makes no outside requests.
   Figtree is the text face (variable, 300-900, has tabular figures); Poppins 500/600 is for titles. Latin subsets only:
   other characters fall back to the system stack. index.html and login.html preload Figtree. "Figtree Fallback" is
   Arial reshaped to Figtree's vertical metrics (their widths already match to 0.1%), so lines do not jump when the
   web font arrives late on a slow connection. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- design tokens ---------- */
/* Light values. Dark and night redefine the color tokens in themes.css; every module styles itself through these names,
   so changing a value here re-skins the whole app. Values follow monday.com's Vibe design system (MIT): copy values,
   never load its CSS or branding. */
:root {
  color-scheme: light;
  /* Surfaces and lines. --shell is the app frame behind the sidebar and topbar; --grid-line is for board grids and tables. */
  --shell: #eceff8; --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f5f6f8; --surface-raised: #ffffff;
  --line: #e7e9ef; --grid-line: #d0d4e4; --line-strong: #c3c6d4;
  /* Text. */
  --text: #323338; --muted: #676879; --faint: #9699a6; --icon: #676879;
  /* Accent, selection and hover. --hover and --row-hover are opaque so sticky cells can use them. */
  --accent: #0073ea; --accent-dark: #0060b9; --on-accent: #ffffff; --accent-soft: #dff0ff; --highlight: #f0f7ff; --link: #1f76c2;
  --selected: #cce5ff; --selected-hover: #aed4fc; --hover: #f0f0f2; --row-hover: #f5f6f8;
  --ui-bg: #e7e9ef; --ui-bg-hover: #d8d9e0; --track: #e7e9ef; --disabled-bg: #ecedf5; --disabled-text: rgba(50, 51, 56, .38);
  /* Status. --warn is amber text that passes AA; --warn-fill is the bright yellow for fills only. */
  --ok: #00854d; --ok-soft: #e3f4ea; --danger: #d83a52; --danger-soft: #fbe6e9;
  --warn: #b45309; --warn-fill: #ffcb00; --warn-soft: #fceba1; --info: #1f76c2; --claude: #d97757;
  /* Overlays, toasts, sidebar rail, logo tile. */
  --overlay: rgba(41, 47, 76, .7); --overlay-light: rgba(41, 47, 76, .2); --toast-bg: #323338; --toast-text: #ffffff;
  --sidebar-bg: #eceff8; --sidebar-text: #323338; --sidebar-muted: #676879; --sidebar-active: #dff0ff; --logo-bg: #ffffff;
  --focus-ring: 0 0 0 3px hsl(209 100% 50% / .5), inset 0 0 0 1px var(--accent-dark);
  --login-bg: #eceff8;
  /* Tag and pill tints: color-mix(tag 14%, --tag-surface) background with color-mix(tag --tag-ink-strength, --tag-text) ink.
     Light ink is 57% of the tag color, so every status tag (UI.STATUS_META), the brighter Vibe hues (Done green, Working
     orange) and light gray included, keeps 4.5:1 on its tint (60% left Working orange at 4.49:1). */
  --tag-surface: #fff; --tag-text: #000; --tag-ink-strength: 57%;
  /* Ink that stays the same in every theme (Vibe's fixed light and dark colors): white on photos and saturated label
     colors, dark text on the yellow warning fill. */
  --fixed-light-color: #ffffff; --fixed-dark-color: #323338;

  /* Shape and elevation. --radius-sm: buttons, inputs, chips, menu items; --radius: cards, menus, popovers;
     --radius-lg: modals. Shadows: -sm resting cards, -md hovered or dragged cards, default menus/popovers/toasts/panels,
     -lg modals; -sticky is the edge of a sticky table column. */
  --radius-xs: 2px; --radius-sm: 4px; --radius: 8px; --radius-lg: 16px;
  --shadow-sm: 0 4px 6px -4px rgba(0, 0, 0, .1); --shadow-md: 0 4px 8px rgba(0, 0, 0, .2); --shadow: 0 6px 20px rgba(0, 0, 0, .2); --shadow-lg: 0 15px 50px rgba(0, 0, 0, .3);
  --shadow-sticky: 3px 0 4px rgba(0, 0, 0, .1);
  --disabled-opacity: .38;
  --space-2: 2px; --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-48: 48px; --space-64: 64px; --space-80: 80px;

  /* Type. --font-num is for tabular numbers (money, number and footer cells, with font-variant-numeric: tabular-nums);
     Figtree has tabular figures, so it is the text face. Sizes pair with a line height: font: 400 var(--fs-14)/var(--lh-14) var(--font). */
  --font: "Figtree", "Figtree Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Poppins", var(--font);
  --font-num: var(--font);
  --fs-12: 12px; --lh-12: 16px; --fs-14: 14px; --lh-14: 20px; --fs-16: 16px; --lh-16: 22px; --fs-18: 18px; --lh-18: 24px; --fs-24: 24px; --lh-24: 30px; --fs-32: 32px; --lh-32: 40px;

  /* Motion. --ease-emphasize overshoots, so use it only above 200ms. Reduced motion zeroes the durations below. */
  --dur-1: 70ms; --dur-2: 100ms; --dur-3: 150ms; --dur-4: 250ms; --dur-5: 400ms;
  --ease-enter: cubic-bezier(0, 0, .35, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1); --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-emphasize: cubic-bezier(0, 0, .2, 1.4);

  /* Layers, lowest first. */
  --z-sticky-col: 2; --z-sticky-head: 3; --z-group-title: 4; --z-panel: 35; --z-bulkbar: 40; --z-walk: 48; --z-modal: 50; --z-menu: 60; --z-popover: 70; --z-toast: 100; --z-drag: 200;

  /* Content palette: the 40 label and group colors in Vibe's order, each with its hover and selected (light tint)
     variant. Stored colors are never rewritten; UI.PALETTE maps old hexes to these at render time. */
  --color-grass_green: #037f4c; --color-grass_green-hover: #116846; --color-grass_green-selected: #81bfa5;
  --color-done-green: #00c875; --color-done-green-hover: #0f9b63; --color-done-green-selected: #80e3ba;
  --color-bright-green: #9cd326; --color-bright-green-hover: #7ca32b; --color-bright-green-selected: #cde992;
  --color-saladish: #cab641; --color-saladish-hover: #9d8f3e; --color-saladish-selected: #e4daa0;
  --color-egg_yolk: #ffcb00; --color-egg_yolk-hover: #eaaa15; --color-egg_yolk-selected: #ffe580;
  --color-working_orange: #fdab3d; --color-working_orange-hover: #c0873c; --color-working_orange-selected: #fed59e;
  --color-dark-orange: #ff6d3b; --color-dark-orange-hover: #c25531; --color-dark-orange-selected: #ffb196;
  --color-peach: #ffadad; --color-peach-hover: #c2888a; --color-peach-selected: #ffd6d6;
  --color-sunset: #ff7575; --color-sunset-hover: #c26163; --color-sunset-selected: #ffbaba;
  --color-stuck-red: #df2f4a; --color-stuck-red-hover: #ad3f51; --color-stuck-red-selected: #f0a1ad;
  --color-dark-red: #bb3354; --color-dark-red-hover: #92334c; --color-dark-red-selected: #dd99a9;
  --color-sofia_pink: #e50073; --color-sofia_pink-hover: #c20062; --color-sofia_pink-selected: #ff8ac4;
  --color-lipstick: #ff5ac4; --color-lipstick-hover: #c24e9a; --color-lipstick-selected: #fface1;
  --color-bubble: #faa1f1; --color-bubble-hover: #be80ba; --color-bubble-selected: #fcd0f8;
  --color-purple: #9d50dd; --color-purple-hover: #7d45b0; --color-purple-selected: #d0aeed;
  --color-dark_purple: #784bd1; --color-dark_purple-hover: #6344a3; --color-dark_purple-selected: #bba5e8;
  --color-berry: #7e3b8a; --color-berry-hover: #673971; --color-berry-selected: #be9dc4;
  --color-dark_indigo: #401694; --color-dark_indigo-hover: #3c1f78; --color-dark_indigo-selected: #a08bc9;
  --color-indigo: #5559df; --color-indigo-hover: #4b4ead; --color-indigo-selected: #aaacef;
  --color-navy: #225091; --color-navy-hover: #274776; --color-navy-selected: #90a7c8;
  --color-bright-blue: #579bfc; --color-bright-blue-hover: #4c7cc1; --color-bright-blue-selected: #abcdfd;
  --color-dark-blue: #007eb5; --color-dark-blue-hover: #0f6d97; --color-dark-blue-selected: #80c2df;
  --color-aquamarine: #4eccc6; --color-aquamarine-hover: #469e9b; --color-aquamarine-selected: #a6e5e2;
  --color-chili-blue: #66ccff; --color-chili-blue-hover: #569ec3; --color-chili-blue-selected: #b2e5ff;
  --color-river: #74afcc; --color-river-hover: #588095; --color-river-selected: #b3d0de;
  --color-winter: #9aadbd; --color-winter-hover: #7b8895; --color-winter-selected: #ccd6de;
  --color-explosive: #c4c4c4; --color-explosive-hover: #98999a; --color-explosive-selected: #e1e1e1;
  --color-american_gray: #757575; --color-american_gray-hover: #69696a; --color-american_gray-selected: #bfbfbf;
  --color-blackish: #333333; --color-blackish-hover: #222222; --color-blackish-selected: #999999;
  --color-brown: #7f5347; --color-brown-hover: #684943; --color-brown-selected: #bfa9a3;
  --color-orchid: #e484bd; --color-orchid-hover: #ae5d8d; --color-orchid-selected: #ecbad7;
  --color-tan: #bca58a; --color-tan-hover: #8a7862; --color-tan-selected: #d6cabc;
  --color-sky: #a1e3f6; --color-sky-hover: #81b6c5; --color-sky-selected: #d0f1fa;
  --color-coffee: #cd9282; --color-coffee-hover: #976758; --color-coffee-selected: #dec0b7;
  --color-royal: #216edf; --color-royal-hover: #225eb7; --color-royal-selected: #95bbf2;
  --color-teal: #175a63; --color-teal-hover: #12484f; --color-teal-selected: #8bacb1;
  --color-lavender: #bda8f9; --color-lavender-hover: #9786c7; --color-lavender-selected: #ded4fc;
  --color-steel: #a9bee8; --color-steel-hover: #8798ba; --color-steel-selected: #d4dff4;
  --color-lilac: #9d99b9; --color-lilac-hover: #7e7a94; --color-lilac-selected: #ceccdc;
  --color-pecan: #563e3e; --color-pecan-hover: #453232; --color-pecan-selected: #ab9f9f;

  /* DCG neon accents. Stored as ordinary hex values, with the same names and variants as UI.PALETTE. */
  --color-neon-mint: #36f5a2; --color-neon-mint-hover: #52f6af; --color-neon-mint-selected: #cdfce8;
  --color-neon-emerald: #00e68a; --color-neon-emerald-hover: #24ea9a; --color-neon-emerald-selected: #bff9e2;
  --color-neon-lime: #b4ff39; --color-neon-lime-hover: #beff55; --color-neon-lime-selected: #ecffce;
  --color-neon-chartreuse: #dfff00; --color-neon-chartreuse-hover: #e3ff24; --color-neon-chartreuse-selected: #f7ffbf;
  --color-neon-lemon: #fff04a; --color-neon-lemon-hover: #fff263; --color-neon-lemon-selected: #fffbd2;
  --color-neon-gold: #ffd43b; --color-neon-gold-hover: #ffda56; --color-neon-gold-selected: #fff4ce;
  --color-neon-tangerine: #ffad32; --color-neon-tangerine-hover: #ffb84f; --color-neon-tangerine-selected: #ffeacc;
  --color-neon-orange: #ff8038; --color-neon-orange-hover: #ff9254; --color-neon-orange-selected: #ffdfcd;
  --color-neon-coral: #ff6a80; --color-neon-coral-hover: #ff7f92; --color-neon-coral-selected: #ffdadf;
  --color-neon-rose: #ff497d; --color-neon-rose-hover: #ff628f; --color-neon-rose-selected: #ffd2de;
  --color-neon-pink: #ff58d2; --color-neon-pink-hover: #ff6fd8; --color-neon-pink-selected: #ffd5f4;
  --color-neon-fuchsia: #f368ff; --color-neon-fuchsia-hover: #f57dff; --color-neon-fuchsia-selected: #fcd9ff;
  --color-neon-orchid: #d68bff; --color-neon-orchid-hover: #dc9bff; --color-neon-orchid-selected: #f5e2ff;
  --color-neon-violet: #b28aff; --color-neon-violet-hover: #bd9aff; --color-neon-violet-selected: #ece2ff;
  --color-neon-purple: #a77dff; --color-neon-purple-hover: #b38fff; --color-neon-purple-selected: #e9deff;
  --color-neon-periwinkle: #9098ff; --color-neon-periwinkle-hover: #a0a6ff; --color-neon-periwinkle-selected: #e3e5ff;
  --color-neon-blue: #609cff; --color-neon-blue-hover: #76aaff; --color-neon-blue-selected: #d7e6ff;
  --color-neon-azure: #46bcff; --color-neon-azure-hover: #60c5ff; --color-neon-azure-selected: #d1eeff;
  --color-neon-cyan: #3de8ff; --color-neon-cyan-hover: #58ebff; --color-neon-cyan-selected: #cef9ff;
  --color-neon-aqua: #39f5e5; --color-neon-aqua-hover: #55f6e9; --color-neon-aqua-selected: #cefcf8;
  --color-neon-teal: #2bddc5; --color-neon-teal-hover: #49e2cd; --color-neon-teal-selected: #caf6f0;
  --color-neon-ice: #a5f3ff; --color-neon-ice-hover: #b2f5ff; --color-neon-ice-selected: #e8fcff;
  --color-neon-lavender: #d5b6ff; --color-neon-lavender-hover: #dbc0ff; --color-neon-lavender-selected: #f4edff;
  --color-neon-blush: #ffa9e1; --color-neon-blush-hover: #ffb5e5; --color-neon-blush-selected: #ffeaf8;

  /* Layout. */
  --sidebar-w: 236px; --topbar-h: 56px; --claude-w: 380px;
  font-family: var(--font); font-size: 14px; line-height: 1.43; color: var(--text);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; } .spark { color: var(--claude); } .spacer { flex: 1; }
.right { text-align: right; } .nowrap { white-space: nowrap; } .hide-mobile { display: inline; }
[hidden] { display: none !important; }
.icon { vertical-align: -3px; flex-shrink: 0; }
:is(input, select, textarea) { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }

/* ---------- focus ---------- */
/* Vibe's focus ring (a 3px halo plus a 1px inner edge), for keyboard focus only. Text fields show it whenever they are
   focused, because browsers treat every focus of a text field as :focus-visible. */
:is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], input[type="checkbox"], input[type="radio"]):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- shell ---------- */
/* monday's frame: the rail and the topbar sit on the tinted --shell, and the page is a card with a rounded top-left corner
   (square on phones, where the rail slides over it). The rail follows the theme, so its hover tints and divider mix the
   rail's own ink. On an iPhone home-screen app the status bar overlays the page, so the topbar and the slide-in rail
   start below the safe area. */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--shell); }
.sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; z-index: 30; }
.sidebar-backdrop { display: none; }
.brand { padding: 16px 12px 8px; }
.logo-tile { padding: 8px 12px; display: flex; justify-content: center; }
.logo-tile img { width: 100%; max-width: 170px; display: block; }
/* The supplied white logo has no backing tile. Black ink on light surfaces and paper; original white on dark screens. */
.brand-mark { filter: brightness(0); }
@media screen {
  :root:is([data-theme="dark"], [data-theme="night"]) .brand-mark { filter: none; }
}
.brand-sub { text-align: center; margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sidebar-muted); font-weight: 600; }
.nav { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: 14px; transition: background-color var(--dur-2) var(--ease-standard); }
.nav-item .icon { color: var(--sidebar-muted); }
.nav-item:hover { background: color-mix(in srgb, var(--sidebar-text) 8%, transparent); color: var(--sidebar-text); }
.nav-item.active { background: var(--sidebar-active); color: var(--sidebar-text); font-weight: 500; }
.nav-item.active .icon { color: var(--sidebar-text); }
.side-footer { padding: 8px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--sidebar-text) 12%, transparent); display: flex; flex-direction: column; gap: 6px; }
.side-user { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.side-user:hover { background: color-mix(in srgb, var(--sidebar-text) 8%, transparent); }
.su-name { font-size: 14px; font-weight: 600; color: var(--sidebar-text); } .su-role { font-size: 12px; color: var(--sidebar-muted); }
.link-btn { background: none; border: 0; color: var(--sidebar-muted); padding: 6px 8px; font-size: 12px; text-align: left; border-radius: var(--radius-sm); }
.link-btn:hover { color: var(--sidebar-text); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(4px + env(safe-area-inset-top, 0px)) 18px 4px; background: var(--shell); min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); flex-shrink: 0; }
#btn-menu { display: none; }
.page-header { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-text { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; } .ph-text > div { min-width: 0; }
.ph-back { color: var(--icon); display: inline-flex; padding: 4px; border-radius: var(--radius-sm); } .ph-back:hover { background: var(--hover); color: var(--text); }
/* Page and board titles use the title face (Poppins 500), as monday's board header does. */
.page-header h1 { font: 500 var(--fs-24)/var(--lh-24) var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-sub { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* actions may wrap onto a second row (the topbar grows) instead of running over the buttons on the right */
.ph-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
/* The job header always has the same three small controls (status, Edit, More): they stay on one row and the title
   truncates instead, so they never wrap under it (1024px with Ask Claude open). Phones hide them (job-mobile-head). */
body.job-open .ph-actions { flex-wrap: nowrap; flex-shrink: 0; }
/* A laptop-height window: a smaller logo and tighter rows, so more of the sidebar fits before it scrolls (core.js also
   scrolls the entry for the current page into view). */
@media (min-width: 769px) and (max-height: 960px) {
  .brand { padding: 10px 12px 4px; } .logo-tile { padding: 6px 10px; } .logo-tile img { width: auto; max-width: 100%; max-height: 56px; }
  .brand-sub { margin-top: 6px; } .nav-item { min-height: 32px; padding-top: 4px; padding-bottom: 4px; } .nav .nav-sec { margin-top: var(--space-4); }
}
/* with the panel open on a laptop-sized window, collapse the sidebar to an icon rail so the page keeps its width */
@media (min-width: 769px) and (max-width: 1180px) { body.claude-open .sidebar { width: 60px; } body.claude-open .sidebar .brand-sub, body.claude-open .sidebar .nav-item span, body.claude-open .sidebar .side-footer .link-btn, body.claude-open .sidebar .side-user > div:not(.avatar), body.claude-open .sidebar .btn-claude, body.claude-open .sidebar .theme-picker { display: none; } body.claude-open .sidebar .logo-tile { padding: 6px; } body.claude-open .sidebar .nav-item { justify-content: center; padding: 8px 0; } body.claude-open .sidebar .side-user { justify-content: center; padding: 6px 0; } }
/* with the Ask Claude panel open there is ~400px less room: compact the header like a phone would */
@media (max-width: 1280px) { body.claude-open .hide-mobile, body.claude-open .btn-quick span, body.claude-open .user-chip .uc-name, body.claude-open .ph-sub { display: none; } body.claude-open .ph-actions .btn-sm { padding: 4px 6px; } body.claude-open .topbar { gap: 8px; } body.claude-open .page-header h1 { font-size: var(--fs-18); line-height: var(--lh-18); } }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.view { flex: 1; min-height: 0; overflow: auto; position: relative; padding: 18px; background: var(--bg); border-top-left-radius: var(--radius-lg); }
.view.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bottom-nav { display: none; }

/* ---------- buttons ---------- */
/* Vibe buttons. Sizes by height: .btn-xs 24, .btn-sm 32, .btn 40, .btn-lg 48. Kinds: secondary (the default: outlined),
   .btn-primary (filled accent), .btn-ghost / .btn-tertiary (no border), .btn-danger (outlined in red; with .btn-primary
   it is filled red, for the confirm button of a destructive action), .btn-ok (filled green). .active or
   aria-pressed="true" marks a toggled button. Buttons shrink slightly while pressed. The :not(:disabled) guards sit in
   :where() so they add no weight: a module's own `.x .btn` or `.x:hover` rule still wins, as it did before. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; white-space: nowrap; user-select: none; -webkit-user-select: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard); }
.btn:hover:where(:not(:disabled)) { background: var(--hover); }
.btn:active:where(:not(:disabled)) { transform: scale(.95); }
.btn:disabled, .btn.disabled { opacity: var(--disabled-opacity); cursor: default; }
.btn-sm { min-height: 32px; padding: 4px 8px; } .btn-xs { min-height: 24px; padding: 0 8px; gap: 4px; font-size: var(--fs-12); line-height: var(--lh-12); } .btn-lg { min-height: 48px; padding: 12px 24px; font-size: var(--fs-16); line-height: var(--lh-16); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover:where(:not(:disabled)) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost, .btn-tertiary { border-color: transparent; }
.btn.active, .btn[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); }
.btn:is(.btn-ghost, .btn-tertiary):is(.active, [aria-pressed="true"]) { border-color: transparent; }
.btn:is(.active, [aria-pressed="true"]):hover:where(:not(:disabled)) { background: var(--selected-hover); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--surface)); }
.btn-danger:hover:where(:not(:disabled)) { background: var(--danger-soft); }
.btn-primary.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn-primary.btn-danger:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--danger) 85%, var(--fixed-dark-color)); border-color: transparent; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.btn-ok:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--ok) 85%, var(--fixed-dark-color)); }
/* Ask Claude: a soft tint of the Claude color in every theme. */
.btn-claude { background: color-mix(in srgb, var(--claude) 12%, var(--surface)); border-color: color-mix(in srgb, var(--claude) 35%, var(--surface)); color: color-mix(in srgb, var(--claude) 55%, var(--text)); }
.btn-claude:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--claude) 20%, var(--surface)); }
.sidebar .btn-claude { width: 100%; }
.btn-quick span { margin-left: 2px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
/* Split button (e.g. New item ▾): joined, with flat inner corners. */
.btn-split { display: inline-flex; } .btn-split > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-split > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: 4px; padding-right: 4px; }
.btn-split > .btn-primary:not(:first-child) { margin-left: 0; border-left-color: color-mix(in srgb, var(--on-accent) 35%, var(--accent)); }
.icon-btn { border: 0; background: transparent; padding: 6px; border-radius: var(--radius-sm); color: var(--icon); display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.active, .icon-btn[aria-pressed="true"] { background: var(--selected); color: var(--text); }
.icon-btn:disabled { opacity: var(--disabled-opacity); cursor: default; background: transparent; }

/* ---------- inputs ---------- */
/* .input is 40px (.input-sm 32px). Hover darkens the border, focus turns it accent with the focus ring; read-only fields
   sit on the page color without a border. */
.input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 4px 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }
.input:hover:where(:not(:disabled, [readonly])) { border-color: var(--text); }
.input:focus { outline: none; border-color: var(--accent); }
.input:focus-visible { box-shadow: var(--focus-ring); }
.input[readonly] { background: var(--bg); border-color: transparent; }
.input:disabled { background: var(--disabled-bg); border-color: transparent; color: var(--disabled-text); cursor: not-allowed; }
.input-sm { min-height: 32px; padding: 4px 4px 4px 8px; } .input-auto { width: auto; }
textarea.input { resize: vertical; min-height: 60px; padding: 8px 12px; }
.input-prefix { position: relative; } .input-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); } .input-prefix .input { padding-left: 24px; }
.search-box { position: relative; } .search-box .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--icon); } .search-box .input { padding-left: 32px; min-width: 200px; }
.chat-form textarea { background: var(--surface); color: var(--text); }
/* Segmented control = Vibe button group: one outline, the chosen option on --selected. */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: transparent; }
.segmented button { border: 0; background: transparent; min-height: 30px; padding: 4px 8px; font-size: 14px; line-height: 20px; color: var(--text); display: inline-flex; align-items: center; gap: 4px; transition: background-color var(--dur-2) var(--ease-standard); }
.segmented button + button { border-left: 1px solid var(--line-strong); }
.segmented button:hover { background: var(--hover); }
.segmented button.active { background: var(--selected); color: var(--accent-dark); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .input { width: auto; }
/* Checkbox (Vibe): 16px, 2px corners; checked fills with the accent and grows its check mark in. A bar instead of the
   check for indeterminate. Toggles (.toggle or role="switch") are restyled below. */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background-color: var(--surface); color: var(--on-accent); vertical-align: -3px; cursor: pointer; transition: background-color var(--dur-1) var(--ease-enter), border-color var(--dur-1) var(--ease-enter); }
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform var(--dur-1) var(--ease-enter); }
input[type="checkbox"]:hover:where(:not(:disabled)) { border-color: var(--muted); }
input[type="checkbox"]:is(:checked, :indeterminate) { background-color: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate::before { clip-path: inset(40% 10% 40% 10%); transform: scale(1); }
/* Disabled: an empty box goes gray; a checked one keeps its fill (its check mark is --on-accent, which would vanish on
   the gray) and dims instead. */
input[type="checkbox"]:disabled { cursor: default; }
input[type="checkbox"]:disabled:where(:not(:checked, :indeterminate)) { background-color: var(--disabled-bg); border-color: var(--line); }
input[type="checkbox"]:disabled:is(:checked, :indeterminate) { opacity: var(--disabled-opacity); }
/* Toggle: 41x24 track with an 18px knob (small: 28x16), --line-strong off and accent on. */
input[type="checkbox"]:is(.toggle, [role="switch"]) { position: relative; display: inline-block; width: 41px; height: 24px; border: 0; border-radius: 12px; background-color: var(--line-strong); transition: background-color var(--dur-2) var(--ease-standard); }
input[type="checkbox"]:is(.toggle, [role="switch"])::before { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; clip-path: none; background: var(--surface-raised); transform: none; transition: left var(--dur-2) var(--ease-standard); }
input[type="checkbox"]:is(.toggle, [role="switch"]):checked { background-color: var(--accent); }
input[type="checkbox"]:is(.toggle, [role="switch"]):checked::before { left: 20px; }
input[type="checkbox"]:is(.toggle, [role="switch"]):disabled { opacity: var(--disabled-opacity); }
input[type="checkbox"]:is(.toggle, [role="switch"]).sm { width: 28px; height: 16px; }
input[type="checkbox"]:is(.toggle, [role="switch"]).sm::before { top: 2px; left: 2px; width: 12px; height: 12px; }
input[type="checkbox"]:is(.toggle, [role="switch"]).sm:checked::before { left: 14px; }

/* ---------- tags, avatars, counters ---------- */
/* .tag is a 20px chip tinted from its --tag color; .tag.plain is the neutral dropdown chip. */
.tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; background: color-mix(in srgb, var(--tag) 14%, var(--tag-surface)); color: color-mix(in srgb, var(--tag) var(--tag-ink-strength), var(--tag-text)); white-space: nowrap; }
.tag.plain { background: var(--ui-bg); color: var(--text); }
.tag-status { text-transform: none; }
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fixed-light-color); font-weight: 600; box-shadow: 0 0 0 1px var(--surface); flex-shrink: 0; }
.avatar-empty { background: var(--ui-bg); } .avatar-more { background: var(--ui-bg); color: var(--text); font-size: 11px; }
.avatars { display: inline-flex; } .avatars .avatar + .avatar { margin-left: -8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pctbar { display: inline-block; width: 90px; height: 6px; background: var(--track); border-radius: var(--radius-sm); vertical-align: middle; overflow: hidden; }
.pctbar > i { display: block; height: 100%; }
.pill-count, .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 30px; background: var(--ui-bg); color: var(--text); font-size: var(--fs-12); line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- cards, grids, tables ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h3 { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; } .card-head .muted { font-size: 12px; }
.grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 16px; }
.kpi .kpi-label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .kpi-value { font: 600 var(--fs-24)/var(--lh-24) var(--font-num); font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.good .kpi-value { color: var(--ok); } .kpi.bad .kpi-value { color: var(--danger); } .kpi.warn .kpi-value { color: var(--warn); }
.kpi-link { display: block; color: var(--text); } .kpi-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .bad-text { color: var(--danger); }
.table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
/* Vibe table: normal-case muted headers, grid-line rules, opaque row hover (headers are sticky). */
table.data { border-collapse: collapse; width: 100%; background: var(--surface); }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
table.data th { font-size: 14px; font-weight: 400; color: var(--muted); background: var(--surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.data th.sortable { cursor: pointer; user-select: none; } table.data th.sortable:hover { color: var(--text); }
table.data tr.clickable { cursor: pointer; } table.data tr.clickable:hover td { background: var(--row-hover); }
table.data tr.selected td { background: var(--selected); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.card > table.data { margin: 0 -16px; width: calc(100% + 32px); }
.card > .table-scroll { margin: 0 -16px; } .card > .table-scroll > table.data { margin: 0; width: 100%; min-width: 100%; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .list-row > * { min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row .lr-main { flex: 1; min-width: 0; } .list-row .lr-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-row .lr-sub { font-size: 12px; color: var(--muted); }
.section-title { font-size: var(--fs-16); line-height: var(--lh-16); color: var(--text); font-weight: 500; margin: 24px 0 8px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
h3.sub { font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.note { font-size: 12px; color: var(--muted); }
/* Tabs (Vibe): 40px row, a hover tint behind the label and a 2px accent underline that scales in under the active tab. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) { .job-tabs, .hub-tabs { position: relative; } :is(.job-tabs, .hub-tabs)::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, transparent, var(--surface)); pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; } }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; isolation: isolate; border: 0; background: none; min-height: 40px; padding: 4px 16px; color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--dur-2) var(--ease-standard); }
.tab::before { content: ""; position: absolute; inset: 4px 0 6px; z-index: -1; border-radius: var(--radius-sm); transition: background-color var(--dur-2) var(--ease-standard); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-enter); }
.tab:hover { color: var(--text); } .tab:hover::before { background: var(--hover); }
.tab.active { color: var(--text); font-weight: 500; } .tab.active::after { transform: scaleX(1); }
/* Empty state (Vibe): centered, at most 500px wide. */
.empty { padding: 24px; margin: 0 auto; max-width: 500px; text-align: center; color: var(--muted); }
.empty-icon { color: var(--line-strong); margin-bottom: 8px; } .empty h3 { color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; margin-bottom: 4px; } .empty p { max-width: 380px; margin: 0 auto 12px; }
.empty-action { margin-top: 12px; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 20px auto; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; margin: 0; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton .sk-row { height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin: 10px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { grid-column: span 2; } .field.half { grid-column: span 1; }
.field label { display: block; font-size: 14px; color: var(--text); margin-bottom: 4px; } .field label em { color: var(--danger); font-style: normal; }
.field .help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field-check { align-self: end; padding: 8px 0; }
/* A run of full-width checkboxes (long forms such as close-and-distribute) reads as one list, not widely spaced rows. */
.field-check:not(.half) + .field-check:not(.half) { margin-top: -12px; }
.field-heading .form-heading { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; }
.field-heading .form-heading-text { margin: 2px 0 0; font-size: 12px; }
.form-error { background: var(--danger-soft); color: var(--danger); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; margin-top: 12px; }
.form-desc { margin-top: -8px; margin-bottom: 12px; }
/* Compact six-column swatches keep the expanded spectrum usable in narrow forms. */
.swatches { display: grid; grid-template-columns: repeat(6, 24px); gap: 8px; }
.swatch { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; }
.swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.person-picker { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px; }
.person-opt { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.person-opt:hover { background: var(--hover); } .person-opt .muted { margin-left: auto; font-size: 12px; }
.field .person-opt { display: flex; margin-bottom: 0; } /* inside a form field, `.field label` (block) would otherwise win */

/* ---------- modals ---------- */
/* Vibe modal: 460 / 540 / 800px (480 / 580 / 840 from 1280px), 16px corners, a dimmed backdrop. Opening fades the
   backdrop and pops the dialog from 80%; closing (App.closeModal) fades a copy out. Both finish within 150ms, before
   formModal focuses its first field. The size classes sit in :where() so a module's own width class (money's
   .mn-editor, 960px) still wins over them. */
.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in var(--dur-2) var(--ease-enter); }
.modal { background: var(--surface-raised); border-radius: var(--radius-lg); width: 540px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--shadow-lg); padding: 24px 32px; animation: modal-pop var(--dur-3) cubic-bezier(0, 0, .4, 1); }
.modal:where(.modal-sm) { width: 460px; } .modal:where(.wide, .modal-lg) { width: 800px; }
@media (min-width: 1280px) { .modal { width: 580px; } .modal:where(.modal-sm) { width: 480px; } .modal:where(.wide, .modal-lg) { width: 840px; } }
.modal h2 { font: 500 var(--fs-24)/var(--lh-24) var(--font-title); margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 24px -8px 0; }
/* A data table in a dialog takes the dialog's fill (--surface-raised) instead of --surface, which shows as a darker band in
   dark and night; its sticky header stays opaque. */
.modal table.data { background: none; } .modal table.data th { background: var(--surface-raised); }
.modal-backdrop.is-leaving { pointer-events: none; animation: fade-out var(--dur-2) cubic-bezier(.6, 0, 1, 1) forwards; }
.modal-backdrop.is-leaving .modal { animation: modal-pop-out var(--dur-2) cubic-bezier(.6, 0, 1, 1) forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes modal-pop-out { to { opacity: 0; transform: scale(.8); } }
/* The photo lightbox (80) covers modals and menus. A dialog opened from it (change date, confirm delete) gets
   .over-lightbox from App.openModal; menus opened from it come after it in the page and sit above both. */
.modal-backdrop.over-lightbox { z-index: 85; }
.lightbox ~ .menu { z-index: 90; }
body.modal-open { overflow: hidden; }
.confirm p { color: var(--muted); }

/* ---------- menus ---------- */
/* Vibe menu: 220px, 8px padding, 32px items with a 16px icon. Submenu rows end in a caret and stay highlighted while
   their submenu is open. Menus grow in from the corner nearest the trigger. */
.menu { position: fixed; background: var(--surface-raised); border-radius: var(--radius); box-shadow: var(--shadow); z-index: var(--z-menu); min-width: 220px; max-width: min(320px, calc(100vw - 16px)); padding: 8px; max-height: 80vh; overflow: auto; animation: menu-in var(--dur-2) var(--ease-enter); }
@keyframes menu-in { from { opacity: 0; transform: scale(.8); } }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; text-align: left; border: 0; background: none; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; color: var(--text); }
.menu button .icon { color: var(--icon); }
.menu button:hover, .menu button.is-open { background: var(--hover); }
.menu button.active { background: var(--selected); }
.menu button.danger, .menu button.danger .icon { color: var(--danger); }
.menu button[aria-disabled="true"] { color: var(--disabled-text); cursor: default; background: none; } .menu button[aria-disabled="true"] .icon { color: inherit; }
.menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-hint, .menu-kbd { flex-shrink: 0; color: var(--muted); font-size: 12px; font-family: inherit; }
.menu-check { display: inline-flex; flex-shrink: 0; } .menu-check .icon { color: var(--accent); }
.menu-caret { display: inline-flex; flex-shrink: 0; margin-right: -4px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu-head { padding: 8px 8px 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.menu-search { padding-bottom: 8px; } .menu-search .input { width: 100%; }
.menu-empty { padding: 8px; color: var(--muted); font-size: 14px; }

/* ---------- toasts ---------- */
/* Vibe toast, fixed at the top center: dark by default, positive green, negative red, warning yellow. Toasts with an
   action (Undo) sit in their own lane above the status toasts (core.js), with an outlined button and a close X. */
.toast-stack { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; min-width: 200px; max-width: min(600px, calc(100vw - 32px)); min-height: 40px; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--shadow); font-size: 14px; line-height: 20px; pointer-events: auto; animation: toast-in 350ms cubic-bezier(.6, 0, .4, 1); }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(100px); } 70% { opacity: 1; transform: translateY(-16px); } 100% { transform: none; } }
/* Bottom-center like monday.com, so a pending Undo never covers a page or board header; it rides above the board's
   batch bar (64px tall, 24px up) while that is open. */
body:has(.bd-bulkbar) .toast-stack { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.toast-positive { background: var(--ok); color: var(--on-accent); }
.toast-negative { background: var(--danger); color: var(--on-accent); }
.toast-warning { background: var(--warn-fill); color: var(--fixed-dark-color); }
.toast-text { flex: 1; min-width: 0; }
.toast-btn { flex-shrink: 0; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: var(--radius-sm); min-height: 24px; padding: 0 8px; font-size: 14px; line-height: 20px; }
.toast-btn:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.toast-close { flex-shrink: 0; display: inline-flex; border: 0; background: transparent; color: inherit; padding: 4px; margin-right: -8px; border-radius: var(--radius-sm); }
.toast-close:hover { background: color-mix(in srgb, currentColor 15%, transparent); }

/* ---------- tooltip ---------- */
/* data-tip="text" on any element (not inputs); data-tip-pos="bottom" for elements near the top of the screen. Shows after
   300ms, hides in 100ms; not on touch screens. */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--z-popover); width: max-content; max-width: 240px; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--shadow); font: 400 var(--fs-14)/var(--lh-14) var(--font); white-space: normal; text-align: center; text-transform: none; letter-spacing: normal; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-exit), visibility 0s linear var(--dur-2); }
[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
[data-tip]:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-enter) 300ms, visibility 0s linear 300ms; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ---------- search palette, user chip, code ---------- */
.modal.palette-modal { padding: 0; width: 620px; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); color: var(--icon); }
.palette-input input { flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent; }
.palette-results { max-height: 60vh; overflow: auto; padding: 8px; }
.palette-hint { padding: 16px; text-align: center; font-size: 14px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); }
.palette-item:hover { background: var(--hover); } .palette-item.active { background: var(--selected); }
.pi-title { font-weight: 600; } .pi-sub { margin-left: auto; font-size: 12px; white-space: nowrap; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 20px; padding: 3px 10px 3px 3px; font-size: 14px; color: var(--text); transition: background-color var(--dur-2) var(--ease-standard); }
.user-chip:hover { background: var(--hover); }
/* Code boxes take the rail's colors (light in light, dark in dark and night), so the copy button tints its own ink. */
.token-box { background: var(--sidebar-bg); color: var(--sidebar-text); padding: 10px 12px; border-radius: var(--radius); font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; margin: 8px 0; }
pre.code { background: var(--sidebar-bg); color: var(--sidebar-text); padding: 12px 16px; border-radius: var(--radius); font-size: 12px; overflow: auto; position: relative; margin: 6px 0 10px; white-space: pre-wrap; word-break: break-all; }
pre.code button { position: absolute; right: 8px; top: 8px; border: 0; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
.step { margin-bottom: 16px; } .step b { display: block; margin-bottom: 4px; }

/* ---------- Claude panel ---------- */
.claude-panel { width: var(--claude-w); flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.claude-status { font-size: 12px; padding: 8px 16px; background: color-mix(in srgb, var(--claude) 8%, var(--surface)); color: color-mix(in srgb, var(--claude) 55%, var(--text)); border-bottom: 1px solid color-mix(in srgb, var(--claude) 25%, var(--surface)); }
.claude-status.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--line); }
.claude-status code { background: color-mix(in srgb, currentColor 10%, transparent); padding: 1px 4px; border-radius: var(--radius-xs); }
.chat { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-intro { font-size: 14px; }
.msg { max-width: 94%; padding: 8px 12px; border-radius: 12px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.error { align-self: flex-start; background: var(--danger-soft); color: var(--danger); }
.msg.thinking { align-self: flex-start; color: var(--muted); font-style: italic; display: flex; gap: 8px; align-items: center; }
.panel-tools { display: flex; gap: 2px; } .panel-tools .icon-btn { font-size: 18px; line-height: 1; }
.msg.assistant.streaming::after { content: '▍'; color: var(--claude); animation: blink 1s steps(2) infinite; } @keyframes blink { to { opacity: 0; } }
.msg .md-h { font-weight: 600; margin: 6px 0 2px; } .msg .md-list { margin: 2px 0; padding-left: 18px; } .msg .md-list li { margin: 1px 0; }
.actions { display: flex; flex-direction: column; gap: 3px; align-self: flex-start; max-width: 94%; }
.actions .act { display: flex; align-items: center; gap: 6px; font-size: 12px; background: var(--surface-2); border-radius: 10px; padding: 3px 9px; color: var(--muted); text-decoration: none; }
.actions a.act:hover { background: var(--hover); color: var(--text); }
.actions .act .spinner.sm { width: 10px; height: 10px; border-width: 2px; }
.actions .act .mark { width: 12px; text-align: center; flex-shrink: 0; } .actions .act.ok .mark { color: var(--ok); }
.actions .act.err { background: var(--danger-soft); color: var(--danger); }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.chat-suggest button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 14px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.chat-suggest button:hover { border-color: var(--claude); color: var(--claude); }
.chat-form { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px; resize: none; }
.chat-form textarea:focus { outline: none; border-color: var(--accent); }

/* ---------- charts ---------- */
.chart svg { width: 100%; display: block; overflow: visible; }
.chart-axis { stroke: var(--line); }
.chart-lbl { font-size: 11px; fill: var(--muted); } .chart-val { font-size: 10px; fill: var(--muted); } .chart-center { font-size: 12px; font-weight: 700; fill: var(--text); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.chart-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chart-legend-col { flex-direction: column; gap: 4px; margin-top: 0; flex: 1; min-width: 140px; }
.chart-legend-col span { display: flex; align-items: center; } .chart-legend-col b { font-weight: 500; color: var(--text); flex: 1; } .chart-legend-col em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- lightbox ---------- */
/* Always a dark photo scrim, whatever the theme. */
.lightbox { position: fixed; inset: 0; background: rgba(10,12,18,.94); z-index: 80; display: flex; }
.lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lb-img-wrap { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 24px; }
.lb-img-wrap img { max-width: 100%; max-height: calc(100vh - 48px); object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-counter { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); color: color-mix(in srgb, var(--fixed-light-color) 75%, transparent); font-size: 12px; }
.lb-btn { position: absolute; border: 0; background: color-mix(in srgb, var(--fixed-light-color) 12%, transparent); color: var(--fixed-light-color); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.lb-btn:hover { background: color-mix(in srgb, var(--fixed-light-color) 25%, transparent); }
.lb-close { top: 14px; right: 14px; } .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); } .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-side { width: 360px; background: var(--surface); overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- sidebar sections and counts (core.js renderChrome) ---------- */
/* Small uppercase headings that collapse; a collapsed section still shows the page you are on. Counts are pills at the
   end of a row (red when something is overdue); on the icon rail they shrink to dots and headings become dividers. */
.nav-sec { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-8); }
.nav-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 28px; padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--sidebar-muted); font: 600 var(--fs-12)/var(--lh-12) var(--font); letter-spacing: .06em; text-transform: uppercase; text-align: left; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.nav-sec-head:hover { color: var(--sidebar-text); background: color-mix(in srgb, var(--sidebar-text) 6%, transparent); }
.nav-sec-caret { transition: transform var(--dur-2) var(--ease-standard); }
.nav-sec.collapsed .nav-sec-caret { transform: rotate(-90deg); }
.nav-sec-items { display: flex; flex-direction: column; gap: 2px; }
.nav-sec.collapsed .nav-item:not(.active) { display: none; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-12); line-height: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.nav-badge.is-danger { background: var(--danger); }
@media (min-width: 769px) and (max-width: 1180px) {
  body.claude-open .sidebar .nav-sec-head { display: none; }
  body.claude-open .sidebar .nav-sec { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--sidebar-text) 14%, transparent); }
  body.claude-open .sidebar .nav-sec.collapsed .nav-item { display: flex; }
  body.claude-open .sidebar .nav-item { position: relative; }
  body.claude-open .sidebar .nav-item span.nav-badge { display: block; position: absolute; top: 4px; right: 10px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; }
}

/* ---------- hubs (#/hub/<id>/<tab>) ---------- */
.hub-tabs { margin: -6px 0 16px; padding: 0 8px; }
.hub-tabs .tabs { border-bottom: 0; }
.hub-body { min-width: 0; }

/* ---------- record drawer (UI.drawer) ---------- */
/* Like the boards item panel: under the top bar on the right, the page dimmed behind it (the sidebar stays usable),
   moved left of the Ask Claude panel. A full-screen sheet on phones, with the actions at the bottom within thumb reach. */
.drawer-dim { position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; background: var(--overlay-light); z-index: 29; animation: fade-in var(--dur-3) var(--ease-enter); }
.drawer { position: fixed; right: 0; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); bottom: 0; width: min(560px, 100vw); max-width: 100vw; background: var(--surface); color: var(--text); box-shadow: var(--shadow); z-index: var(--z-panel); display: flex; flex-direction: column; outline: 0; border-top-left-radius: var(--radius-lg); animation: drawer-in var(--dur-3) var(--ease-enter); }
.drawer.drawer-wide { width: min(880px, 100vw); }
body.claude-open .drawer { right: var(--claude-w); max-width: calc(100vw - var(--claude-w)); }
body.claude-open .drawer-dim { right: var(--claude-w); }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.drawer-titles { flex: 1; min-width: 0; }
.drawer-head h2 { font: 500 var(--fs-18)/var(--lh-18) var(--font-title); overflow-wrap: anywhere; }
.drawer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); }
.drawer-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin: -4px -4px 0 0; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 24px 24px; overscroll-behavior: contain; }
.drawer-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
.drawer-host.is-leaving { pointer-events: none; }
.drawer-host.is-leaving .drawer { animation: drawer-out var(--dur-2) var(--ease-exit) forwards; }
.drawer-host.is-leaving .drawer-dim { animation: fade-out var(--dur-2) var(--ease-exit) forwards; }
@keyframes drawer-in { from { transform: translateX(48px); opacity: 0; } }
@keyframes drawer-out { to { transform: translateX(48px); opacity: 0; } }
@keyframes drawer-up { from { transform: translateY(32px); opacity: 0; } }
@media (max-width: 768px) {
  .drawer, .drawer.drawer-wide, body.claude-open .drawer { top: 0; left: 0; right: 0; width: 100vw; max-width: 100vw; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); animation-name: drawer-up; }
  .drawer-dim { display: none; }
  .drawer-head { padding: 12px 8px 8px 16px; } .drawer-body { padding: 12px 16px 24px; }
  .drawer-foot { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); } .drawer-foot > .btn { flex: 1 1 0; }
  .drawer-close { padding: 10px; }
}

/* ---------- popover (UI.popover; the item log's filter panel) ---------- */
.ui-pop { width: 300px; max-width: calc(100vw - 16px); padding: 0; display: flex; flex-direction: column; max-height: min(70vh, 560px); overflow: hidden; }
.ui-pop.ui-pop-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 78vh; max-height: 78dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: drawer-up var(--dur-3) var(--ease-enter); }

/* ---------- item log (UI.itemLog) ---------- */
/* The shared list: a toolbar (search, filter, group, views, export, the module's own buttons), active filter chips, the
   bulk bar while rows are selected, then a table (laptops) or cards (phones). */
.il { min-width: 0; }
.il-toolbar { margin-bottom: 8px; }
.il-search { flex: 1 1 220px; max-width: 320px; }
.il-search .input { width: 100%; min-width: 0; }
.il-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.il-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.il-count { font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
.il-btn .pill-count { background: var(--accent); color: var(--on-accent); }
.il-phone { display: none; }
.il-icon-only .il-btn-label { display: none; }
.il-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.il-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 24px; padding: 0 2px 0 10px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: var(--fs-12); line-height: var(--lh-12); }
.il-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-chip-x { display: inline-flex; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.il-chip-x:hover { background: var(--hover); color: var(--text); }
.il-bulk { position: sticky; top: 0; z-index: var(--z-sticky-head); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--selected); color: var(--text); box-shadow: var(--shadow-sm); }
.il-bulk-n { font-size: var(--fs-14); }
.il-table th, .il-table td { white-space: nowrap; }
.il-table td.il-wrap { white-space: normal; min-width: 200px; overflow-wrap: anywhere; }
.il-table .il-check { width: 40px; padding-right: 0; }
table.data th.is-sorted { color: var(--text); }
.il-sort-ic { margin-left: 4px; vertical-align: -2px; }
.il-center { text-align: center; }
table.data tr.il-row.is-active td { background: var(--highlight); }
table.data tr.il-row.is-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.data tr.il-row:focus-visible { outline: none; } table.data tr.il-row:focus-visible td { background: var(--row-hover); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
tr.il-group td { padding: 0; background: var(--surface-2); }
.il-group-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-weight: 600; text-align: left; }
.il-group-btn:hover { background: var(--hover); }
.il-group-btn .pill-count { font-weight: 400; }
.il-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.il-group { margin-top: 4px; }
.il-more { display: flex; justify-content: center; padding: 12px 0; }
.il-cards { display: flex; flex-direction: column; gap: 8px; }
.il-card { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--dur-2) var(--ease-standard); }
.il-card:hover { border-color: var(--line-strong); }
.il-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.il-card.selected { background: var(--selected); border-color: var(--accent); }
.il-card.is-active { border-color: var(--accent); }
.il-card-check { display: inline-flex; padding: 4px; margin: -4px 0 0 -4px; }
.il-card-main { flex: 1; min-width: 0; }
.il-card-title { font-weight: 600; overflow-wrap: anywhere; }
.il-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: var(--fs-12); line-height: 20px; color: var(--muted); }
.il-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; max-width: 45%; }
/* Title parts read "RFI-001 · Subject"; meta parts are spaced apart instead, so a wrapped line never starts or ends
   with a stray dot. */
.il-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.il-card-title .il-part { display: inline; }
.il-card-title .il-part:not(:last-child)::after { content: "·"; margin: 0 6px; color: var(--faint); }
@media (max-width: 768px) {
  .il-search { flex-basis: 100%; max-width: none; }
  .il-phone { display: inline-flex; } .il-desk { display: none; }
  .il-tools .il-btn-label { display: none; }
  .il-tools .il-btn { min-width: 36px; min-height: 36px; }
  .il-bulk { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 26; margin: 0; box-shadow: var(--shadow); } /* above the bottom bar, within thumb reach */
  .il-selectable:has(.il-bulk:not([hidden])) .il-body { padding-bottom: 64px; }
}
/* The filter panel. */
.il-fp-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.ui-pop .il-fp-head > button { width: auto; } /* .menu button rows are full width; the panel's own buttons are not */
.il-fp-findbox { padding: 8px 12px 0; }
.il-fp-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 8px; }
.il-fp-sec { min-width: 0; margin: 0; padding: 0; border: 0; }
.il-fp-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.il-fp-opt:hover { background: var(--hover); }
.il-fp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-fp-n { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.il-fp-opt.is-zero .il-fp-label { color: var(--muted); }
@media (max-width: 768px) { .il-fp-opt { min-height: 44px; } }

/* ---------- item parts: due dates, ball in court, history, related items, attachments, drop zones ---------- */
.due-chip { font-variant-numeric: tabular-nums; }
.bic { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.bic-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bic-ext { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-bg); color: var(--icon); }
.bic-since { flex-shrink: 0; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.hist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hist-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-14); line-height: var(--lh-14); }
.hist-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-bg); color: var(--icon); }
.hist-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hist-note { margin-top: 2px; color: var(--muted); white-space: pre-wrap; }
.hist-at { margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); }
.hist-more { margin-top: 12px; } .hist-more > summary { cursor: pointer; color: var(--link); font-size: var(--fs-14); } .hist-more[open] > summary { margin-bottom: 12px; }
.rel-list, .att-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rel-row, .att-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: var(--radius-sm); }
.rel-row:hover, .att-row:hover { background: var(--row-hover); }
.rel-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); }
.rel-link .icon { color: var(--icon); }
a.rel-link:hover .rel-title { color: var(--link); text-decoration: underline; }
.rel-type { flex-shrink: 0; font-size: var(--fs-12); color: var(--muted); }
.rel-title, .att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-note { max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--muted); }
.att-ic { display: inline-flex; flex-shrink: 0; color: var(--icon); }
.att-thumb { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; background: var(--ui-bg); }
.att-size { flex-shrink: 0; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.rel-empty, .att-empty, .hist-empty { font-size: var(--fs-14); }
.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); text-align: center; cursor: pointer; transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.file-drop:hover { border-color: var(--accent); color: var(--text); }
.file-drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.file-drop:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- form fields: signature, rich text, parties ---------- */
/* The signature paper is white with dark ink in every theme, so the saved PNG prints the same. */
.sigpad { display: flex; flex-direction: column; gap: 8px; }
.sigpad-modes { align-self: flex-start; }
.sigpad-paper { position: relative; height: 160px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--fixed-light-color); touch-action: none; }
.sigpad-paper:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.sigpad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sigpad-line { position: absolute; left: 16px; right: 16px; bottom: 32px; border-top: 1px solid color-mix(in srgb, var(--fixed-dark-color) 30%, var(--fixed-light-color)); pointer-events: none; }
.sigpad-hint { position: absolute; left: 16px; bottom: 38px; font-size: var(--fs-14); color: color-mix(in srgb, var(--fixed-dark-color) 55%, var(--fixed-light-color)); pointer-events: none; }
.sigpad-typed { position: absolute; left: 12px; right: 12px; bottom: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--fixed-dark-color); font: italic 500 32px/1.2 var(--font); outline: none; }
.sigpad-typed::placeholder { color: color-mix(in srgb, var(--fixed-dark-color) 45%, var(--fixed-light-color)); font-size: var(--fs-18); }
.sigpad-foot { display: flex; justify-content: flex-end; }
.rt { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--dur-2) var(--ease-standard); }
.rt:focus-within { border-color: var(--accent); }
.rt-bar { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid var(--line); }
.rt .rt-text, .rt .rt-text:hover { border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.rt .rt-text:focus-visible { box-shadow: none; }
.party-picker { display: flex; flex-direction: column; gap: 6px; }
.party-list { max-height: 260px; }
.party-group { padding: 8px 8px 2px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.party-ext { color: var(--icon); }

/* ---------- progress tray (App.on('progress'), App.intakeUpload) ---------- */
/* Pills at the bottom left of the page in the toast colors: what runs in the background, with its stage and percent. */
.ptray { position: fixed; left: calc(var(--sidebar-w) + 16px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-toast) - 1); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 320px; max-width: calc(100vw - 32px); pointer-events: none; }
.ptray-row { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 44px; padding: 4px 4px 4px 12px; overflow: hidden; border-radius: 22px; background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--shadow); pointer-events: auto; animation: toast-in 350ms cubic-bezier(.6, 0, .4, 1); }
.ptray-row.is-done { background: var(--ok); color: var(--on-accent); }
.ptray-row.is-failed { background: var(--danger); color: var(--on-accent); }
.ptray-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
button.ptray-main:hover .ptray-label { text-decoration: underline; }
.ptray-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ptray-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; }
.ptray-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: color-mix(in srgb, currentColor 80%, transparent); font-variant-numeric: tabular-nums; }
.ptray-pct { flex-shrink: 0; margin-left: auto; font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.ptray-x { display: inline-flex; flex-shrink: 0; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.ptray-x:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.ptray-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, currentColor 20%, transparent); }
.ptray-bar > i { display: block; height: 100%; background: var(--accent); transition: width var(--dur-3) var(--ease-standard); }
.ptray .spinner.sm { flex-shrink: 0; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.ptray-more { padding: 2px 10px; border-radius: 10px; background: var(--toast-bg); color: var(--toast-text); font-size: var(--fs-12); pointer-events: auto; }
@media (min-width: 769px) and (max-width: 1180px) { body.claude-open .ptray { left: 76px; } }
@media (max-width: 768px) { .ptray { left: 12px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: 280px; max-width: calc(100vw - 24px); } }

/* ---------- guest link dialog (App.shareGuestLink) ---------- */
.gl-new { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.gl-new > label { font-size: var(--fs-14); font-weight: 500; }
.gl-url { display: flex; gap: 8px; } .gl-url .input { flex: 1; }
.gl-sub { margin-top: 16px; }
.gl-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gl-link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gl-link:last-child { border-bottom: 0; }
.gl-who { display: flex; flex-direction: column; flex: 1; min-width: 180px; } .gl-who .muted { font-size: var(--fs-12); }
.gl-acts { display: flex; gap: 6px; }

/* ---------- reduced motion ---------- */
/* The --dur-* tokens are already 0ms there; the toast slide has its own timing, and a pressed button keeps its size. */
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .btn:active:where(:not(:disabled)) { transform: none; } }

/* ---------- print ---------- */
@media print {
  .sidebar, .topbar, .claude-panel, .bottom-nav, .toast, .toast-stack, .menu, .modal-backdrop, .no-print { display: none !important; }
  .view { padding: 0; overflow: visible; border-radius: 0; } .app { height: auto; display: block; background: #fff; } body { background: #fff; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .2s; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sidebar.open { transform: none; }
  .sidebar.open ~ .main .sidebar-backdrop, .sidebar-backdrop { display: none; }
  .sidebar.open + .main::before { content: ""; position: fixed; inset: 0; background: var(--overlay-light); z-index: 29; }
  #btn-menu { display: inline-flex; }
  .topbar { padding: env(safe-area-inset-top, 0px) 10px 0; gap: 8px; }
  .page-header h1 { font-size: var(--fs-16); line-height: var(--lh-16); } .ph-actions .btn span.hide-mobile { display: none; }
  body.job-open .topbar .ph-actions { display: none; }
  .hide-mobile { display: none; }
  .btn-quick span { display: none; } .user-chip .uc-name { display: none; } #btn-user { display: none; } .ph-sub { display: none; }
  .ph-actions .btn-sm { padding: 4px 6px; } .topbar-right { gap: 4px; }
  .view { padding: 12px; padding-bottom: 76px; border-radius: 0; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 25; padding-bottom: env(safe-area-inset-bottom); }
  .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; color: var(--muted); border: 0; background: none; }
  .bn-item.active { color: var(--accent); }
  .bn-item { position: relative; }
  .bn-dot { position: absolute; top: 6px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
  .bn-dot.is-danger, .bn-badge.is-danger { background: var(--danger); }
  .bn-badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 10px; line-height: 16px; font-weight: 600; box-shadow: 0 0 0 2px var(--surface); }
  .claude-panel { position: fixed; inset: 0; width: auto; z-index: 40; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); } .field, .field.half { grid-column: 1 / -1; } /* span 2 would add a second, implicit column and overflow */
  .modal { padding: 20px 16px; } .modal h2 { font-size: var(--fs-18); line-height: var(--lh-18); } .modal-actions { margin: 20px 0 0; }
  .lightbox { flex-direction: column; } .lb-side { width: auto; max-height: 45vh; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .menu button { min-height: 40px; font-size: 14px; } .btn-xs { min-height: 28px; } .icon-btn { padding: 8px; }
  .modal.palette-modal { width: 100%; } .palette-results { max-height: 70vh; }
  /* Phones: above the bottom nav, and above the batch bar's bottom sheet while it is open. */
  .toast-stack { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.bd-bulkbar) .toast-stack { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- offline bar (core.js) ---------- */
/* Vibe warning banner across the top of the screen while the server can't be reached (toasts are at the bottom). */
.offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--warn-fill); color: var(--fixed-dark-color); font-size: 14px; line-height: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.offline-bar .icon { flex-shrink: 0; }
.offline-bar a { color: inherit; font-weight: 600; text-decoration: underline; border-radius: var(--radius-sm); }
.offline-bar a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 768px) {
  .offline-bar { min-height: 32px; padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 4px; font-size: var(--fs-12); line-height: var(--lh-12); }
}

/* Dark shell: quiet glass edges, luminous navigation and a restrained glow on primary actions. */
@media screen {
  :root[data-theme="dark"] .topbar { border-bottom: 1px solid var(--line); }
  :root[data-theme="dark"] .sidebar { border-right: 1px solid var(--line); }
  :root[data-theme="dark"] .view { box-shadow: inset 0 1px 0 var(--line); }
  :root[data-theme="dark"] .nav-item.active { box-shadow: inset 2px 0 0 var(--accent); background: linear-gradient(100deg, var(--sidebar-active), transparent); }
  :root[data-theme="dark"] .nav-item.active .icon { color: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 28%, transparent)); }
  :root[data-theme="dark"] .card { background: linear-gradient(125deg, color-mix(in srgb, var(--color-neon-violet) 3%, var(--surface)), var(--surface) 48%); box-shadow: inset 0 1px 0 var(--line), var(--shadow-sm); }
  :root[data-theme="dark"] .btn-primary:not(.btn-danger) { box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
  :root[data-theme="dark"] .swatch:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); }
}