/* ==========================================================================
   Kelar (Fokus Target's project platform) — visual system "Senja" (blue hour)

   Round 5c (2026-10-01). After the emerald 3D look ("Zamrud") the user went
   back to the previous style, steered by three references: a blue glass
   investing app (vivid blue, soft gradients, mirror-smooth glass cards), the
   Adobe MAX site (heavy, tightly set headlines, big rounded cards, pill
   buttons) and a dark airline dashboard (a night sidebar where the current
   page is a bright blue pill).

   - Colour: a vivid royal blue leads (links, focus, selection, the primary
     action), on a cool white ground with a soft blue wash. Fokus Target
     orange is the one warm note, for what's current, earned or today. The
     sidebar is night indigo with a faint warm horizon at its foot.
     Deliberately not the RSVP Platform's orange-to-violet sunset.
   - Type: Plus Jakarta Sans for everything (designed in Jakarta); headlines
     extra-bold and tight. JetBrains Mono for codes.
   - Surfaces: white cards with hairlines and soft navy shadows; frosted
     glass only on layers that float or stick, and on the Home header, a blue
     gradient panel with glass cards on it. Buttons, chips and tabs are pills.
   - Motion: short and purposeful. Things rise into place, numbers count,
     finished work celebrates. transform/opacity only; a tiered
     prefers-reduced-motion block at the bottom.
   - Never: animated background blobs, a glow on every button, gradient text,
     sparkles except for real AI features, emoji-heavy copy.
   Light-only on purpose.
   ========================================================================== */
:root {
  /* Design tokens. Documented in docs/design-tokens.md; check with
     `node scripts/check-css-tokens.mjs`. Use var(--…) everywhere below. */

  /* 1. Typography ---------------------------------------------------------- */
  --font-brand: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;   /* the wordmark */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* type scale (app UI; printed documents keep their own A4 sizes) */
  --fs-3xs: 9.5px; --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-base: 14px;
  --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 26px; --fs-4xl: 30px; --fs-display: 42px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-none: 1; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.4; --lh-base: 1.5;
  --ls-tight: -0.035em; --ls-snug: -0.018em; --ls-wide: 0.02em; --ls-caps: 0.08em; /* caps = uppercase labels */

  /* 2. Colour: text ---------------------------------------------------------- */
  --ink: #0f1630;               /* night navy, 17.8:1 on white */
  --ink-2: #39425e;
  --ink-3: #5c6680;             /* 5.7:1 on white, 5.2:1 on the ground */
  --ink-4: #8e97ae;             /* hints and faint labels only */
  --on-accent: #ffffff;         /* text and icons on the accent, the CTA, the hero and dark surfaces */
  --link-on-dark: #a9c4ff;

  /* 3. Colour: surfaces, lines -------------------------------------------- */
  --ground: #e6ecfb;            /* the page colour under --backdrop (what shows if the mesh can't paint) */
  --surface: #ffffff;
  --surface-hover: #f6f8fe;     /* row / cell hover */
  --surface-sunken: #f5f7fc;    /* table heads, calendar weekdays, key caps */
  --surface-selected: #ebf0ff;  /* selected row, chips on white */
  --surface-muted: #eceff6;     /* neutral badges, empty tracks, image placeholders */
  --surface-inverse: #0e1430;   /* toasts, tooltips */
  --skeleton: #e9ecf5; --skeleton-shine: #f5f7fc;
  --line: rgba(15, 22, 48, 0.09);
  --line-2: rgba(15, 22, 48, 0.15);
  --field-line: rgba(15, 22, 48, 0.2);
  --field-line-strong: #b7bfd3;
  --neutral-300: #cbd2e1; --neutral-400: #949db3; --neutral-500: #646d86;
  --track: rgba(15, 22, 48, 0.08);          /* empty progress tracks */

  /* 4. Colour: brand and accent ------------------------------------------- */
  --cyan: #22d3ee;
  --blue: #2a78d6;
  --indigo: #4f46e5;
  --teal: #14b8a6;
  --accent: #2a55e8;            /* the one accent: links, focus, selection, active controls (5.9:1 on white) */
  --accent-hover: #2147d0;
  --accent-ink: #1b3aa8;
  --accent-bg: #e8eeff;
  --fokus: #ef7d29;             /* Fokus Target logo orange */
  /* Blue hour: sky → royal → indigo. Decoration, progress and the logo;
     white text sits only on the deep end (the hero keeps its text there). */
  --brand-1: #7cc6ff; --brand-2: #3d6bff; --brand-3: #5b45ec;
  --grad-brand: linear-gradient(135deg, var(--brand-1), var(--brand-2) 50%, var(--brand-3));
  --grad-brand-x: linear-gradient(90deg, var(--brand-2), var(--brand-1)); /* progress, left to right */
  /* The warm note (Fokus orange): what's current, earned or today (the active page marker, rewards). */
  --warm-1: #ffc796; --warm-2: #ff8a3d; --warm-3: #e8641c;
  --warm-ink: #9a3a0a; --warm-bg: #fff1e6;                 /* 7:1 */
  --grad-warm: linear-gradient(135deg, var(--warm-1), var(--warm-2) 55%, var(--warm-3));
  /* The primary action: royal blue into indigo, white text ≥ 5:1 at both ends. */
  --cta-1: #2f5bff; --cta-2: #4338d6; --cta-1-hover: #244de6; --cta-2-hover: #3a2fc2;
  --grad-cta: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  --grad-cta-hover: linear-gradient(135deg, var(--cta-1-hover), var(--cta-2-hover));
  --cta-shadow: 0 1px 2px rgba(23, 37, 120, 0.25), 0 10px 22px -12px rgba(47, 91, 255, 0.75);
  --cta-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --grad-soft: linear-gradient(135deg, rgba(124, 198, 255, 0.22), rgba(61, 107, 255, 0.12) 55%, rgba(91, 69, 236, 0.14)); /* icon wells, tints */
  --cta-ink: #2a55e8;           /* icons on --grad-soft */

  /* 4b. Glass, the page backdrop and the Home header ------------------------ */
  /* the Home header: deep royal blue where the text sits, opening to sky on the right */
  --hero-grad: radial-gradient(520px 300px at 96% -10%, rgba(150, 214, 255, 0.55), transparent 70%),
    radial-gradient(480px 300px at 74% 120%, rgba(255, 150, 90, 0.34), transparent 70%),
    linear-gradient(118deg, #2244d4 0%, #2f5bff 45%, #4677ff 78%, #5a8cff 100%);
  /* Round 5d (glass): a still blue mesh behind every page, so the translucent
     panels on it read as glass. Static on purpose: nothing drifts. */
  --backdrop: radial-gradient(900px 640px at 16% -10%, rgba(124, 198, 255, 0.62), transparent 62%),
    radial-gradient(820px 620px at 104% -6%, rgba(110, 92, 255, 0.38), transparent 60%),
    radial-gradient(700px 520px at 58% 46%, rgba(124, 160, 255, 0.22), transparent 66%),
    radial-gradient(1000px 720px at 78% 108%, rgba(61, 107, 255, 0.34), transparent 62%),
    radial-gradient(760px 540px at 10% 106%, rgba(255, 150, 90, 0.24), transparent 60%),
    linear-gradient(160deg, #e7efff 0%, #e2e8fb 48%, #ebe6fb 100%);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-ground: rgba(255, 255, 255, 0.56); /* the floating top bar over scrolling content */
  /* glass panels in the page (cards, tiles, rows): a lit diagonal, a white rim, a blue-tinted lift */
  --glass-card: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.66)); /* --ink-3 stays ≥ 4.7:1 on it over the bluest part of the mesh */
  --glass-card-hover: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.74));
  --glass-card-line: rgba(255, 255, 255, 0.8);
  --glass-card-shadow: 0 0 0 1px rgba(30, 45, 120, 0.05), 0 1px 2px rgba(15, 22, 48, 0.05), 0 12px 32px -16px rgba(30, 50, 150, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-field: rgba(255, 255, 255, 0.78);   /* inputs on glass: light enough to read, still tinted */
  --glass-btn: rgba(255, 255, 255, 0.6);      /* secondary buttons, chips, the segmented track's pills */
  --glass-btn-hover: rgba(255, 255, 255, 0.92);
  --glass-overlay: rgba(255, 255, 255, 0.72); /* dialogs, drawers, menus, ⌘K: the page shows through, frosted */
  --glass-side: linear-gradient(180deg, rgba(24, 34, 112, 0.9), rgba(16, 20, 66, 0.9) 55%, rgba(12, 14, 46, 0.92)); /* the floating night sidebar: indigo glass, dense enough for --side-ink-2 at 4.5:1 over the brightest sky */
  --glass-blur-lg: blur(28px) saturate(185%);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 62%); /* the mirror-smooth light across glass on blue */
  --glass-card-blur: blur(14px) saturate(170%);
  --glass-dark: rgba(14, 20, 48, 0.9);       /* toasts and tooltips */
  --glass-on-blue: rgba(16, 26, 92, 0.2);         /* smoky glass cards on the Home header and sign-in (white text ≥ 4.5:1) */
  --glass-on-blue-line: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(18px) saturate(160%);
  --glass-blur-sm: blur(8px) saturate(140%);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* the lit top edge of glass */
  --scrim-blur: blur(10px) saturate(120%);

  /* 5. Colour: status (text on tint = --x on --x-bg; fills use -solid) ---- */
  --ok: #15803d; --ok-bg: #e4f6ea; --ok-bg-soft: #f0fdf4;
  --ok-strong: #16a34a; --ok-solid: #22c55e; --ok-solid-deep: #059669; --ok-deep: #047857;
  --warn: #8a5a00; --warn-bg: #fff3d1; --warn-bg-soft: #fffdf4;
  --warn-strong: #d97706; --warn-solid: #f59e0b;
  --danger: #c0262d; --danger-bg: #fdebec; --danger-bg-soft: #fff7f7;
  --danger-solid: #ef4444; --danger-solid-soft: #f87171; --danger-deep: #7f1d1d; --danger-on-dark: #fecaca;
  --info: #1d4fb8; --info-bg: #e8effd;
  /* leaderboard medals */
  --medal-gold: #f5c542; --medal-gold-ink: #5b4300; --medal-silver: #d5dbe5; --medal-silver-ink: #3c4760; --medal-bronze: #e8b48a; --medal-bronze-ink: #5a3310;
  /* badge and level tiers (round 5): each tier its own metal; shape changes too (core/points.js) */
  --tier-1a: #f6cfae; --tier-1b: #b56a3c; --tier-1-ink: #4f260b;                   /* bronze */
  --tier-2a: #f4f6fa; --tier-2b: #9ea7b8; --tier-2-ink: #2f3647;                   /* silver */
  --tier-3a: #ffe9a3; --tier-3b: #d39a10; --tier-3-ink: #503a00;                   /* gold */
  --tier-4a: #e9fbff; --tier-4b: #7fc8db; --tier-4c: #b7a6ff; --tier-4-ink: #173944; /* platinum */
  --tier-5a: #fff7fb; --tier-5b: #8fd3ff; --tier-5c: #d3a1ff; --tier-5d: #ff9fc6; --tier-5-ink: #2a1c5c; /* diamond */

  /* 6. Colour: sidebar (night indigo, a warm horizon at the foot, the current page a blue pill) */
  --side-bg: #0e1330;
  --side-bg-2: #0a0e24;
  --side-grad: linear-gradient(180deg, #131a42 0%, #0e1330 46%, #0b0f27 100%);
  --side-glow: radial-gradient(90% 24% at 12% -6%, rgba(61, 107, 255, 0.32), transparent 72%),
    radial-gradient(130% 22% at 50% 108%, rgba(255, 138, 61, 0.16), transparent 72%);
  --side-panel: #18204a;
  --side-ink: #b9c2e0;          /* 10:1 */
  --side-ink-2: #a3add0;        /* ≥ 4.8:1 on the sidebar glass, even over the sky */
  --side-ink-strong: #f3f5ff;
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-on: rgba(255, 255, 255, 0.09);
  --side-line: rgba(255, 255, 255, 0.07);

  /* 7. Colour: charts (the dataviz skill's validated palette) -------------- */
  --viz-surface: #fcfcfe;
  --viz-grid: #e3e6ef;
  --viz-baseline: #c2c8d6;
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #4a3aa7; --viz-8: #e34948;
  --viz-good: #0ca30c; --viz-warning: #fab219; --viz-critical: #d03b3b;
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5; --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;

  /* 8. Colour: printed documents (quotation / PR / CA on A4 paper) --------- */
  --doc-ink: #111111; --doc-ink-2: #333333; --doc-ink-3: #555555;
  --doc-line: #c9c9c9; --doc-line-strong: #b9b9b9; --doc-rule: #dddddd;
  --doc-head-bg: #fde7d6; --doc-section-bg: #f6f6f6; --doc-total-bg: #fff6ee;

  /* 9. Spacing (4px grid) ---------------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* 9b. Control sizes: buttons, inputs, chips and pills line up in rows */
  --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-xs: 24px; --pill-h: 22px;
  --line-hover: rgba(42, 85, 232, 0.42);   /* control border on hover */
  --line-accent: rgba(42, 85, 232, 0.34);  /* border of a selected chip */
  --line-danger: rgba(192, 38, 45, 0.35);
  --tint-hover: rgba(42, 85, 232, 0.08);   /* menu / option hover */
  --tint-ghost: rgba(15, 22, 48, 0.05);    /* ghost button hover, segmented track */
  --tint-accent: rgba(42, 85, 232, 0.18);  /* text selection, drop zones */
  --tone-violet: #7c3aed; --tone-teal: #0f766e; /* extra pill tones (with ok / warn / danger / info / neutral) */

  /* 10. Radius ------------------------------------------------------------- */
  --r-2xs: 4px; --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* 11. Elevation (shadows tinted with the navy ink, never grey) ----------- */
  --shadow-sm: 0 1px 2px rgba(15, 22, 48, 0.06), 0 1px 1px rgba(15, 22, 48, 0.03);          /* resting cards, controls */
  --shadow-md: 0 1px 2px rgba(15, 22, 48, 0.05), 0 18px 36px -18px rgba(15, 22, 48, 0.28);  /* hovered cards */
  --shadow-lg: 0 2px 6px rgba(15, 22, 48, 0.06), 0 30px 64px -18px rgba(15, 22, 48, 0.4);   /* menus, dialogs, drawers */
  --slab: inset 0 -1px 0 rgba(15, 22, 48, 0.04);  /* a faint bottom edge on resting cards and buttons */
  --pop: 0 0 0 1px rgba(30, 45, 120, 0.06), 0 2px 4px rgba(15, 22, 48, 0.05), 0 30px 60px -24px rgba(30, 50, 150, 0.48), inset 0 1px 0 rgba(255, 255, 255, 1); /* a glass panel lifted toward you (hover, dialogs) */
  --scrim: rgba(10, 14, 36, 0.24);                                                          /* behind dialogs and drawers, frosted by --scrim-blur */
  --ring: 0 0 0 3px rgba(42, 85, 232, 0.28);

  /* 12. Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);    /* entrances: quick start, soft landing */
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);    /* bigger arrivals: sections rising into place */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* exits: leave quickly */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* only small confirmations (a tick, a drop landing) */
  --ease-pop: cubic-bezier(0.34, 1.22, 0.64, 1);   /* dialogs and menus popping up: a slight overshoot */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);      /* state changes in place */
  --t-fast: 120ms; --t-med: 180ms; --t-slow: 280ms; --t-enter: 460ms; /* hover/press · open/close · larger moves · arrivals */

  /* 13. Layers: page-level stacking order. Small numbers (1–5) inside one
     component (sticky table heads, gantt labels) stay local on purpose. -- */
  --z-sticky: 30; --z-scrim: 35; --z-sidebar: 40; --z-drawer-back: 190; --z-drawer: 191; --z-modal: 200;
  --z-palette: 250; --z-popover: 300; --z-suggest: 320; --z-toast: 400; --z-loadbar: 450; --z-drag: 500; --z-tooltip: 600; --z-skip: 1000;

  /* 14. Layout -------------------------------------------------------------- */
  --side-w: 262px;
  --top-h: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden;
}
/* The blue mesh behind every page (the glass shows it through): fixed, still, and on its own layer so scrolling stays smooth. */
body::before { content: ""; position: fixed; inset: 0; background: var(--backdrop); pointer-events: none; z-index: -1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: var(--ls-snug); margin: 0; color: var(--ink); }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
::selection { background: rgba(42, 85, 232, 0.18); }
.i { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
.card-head h3 .i, h3 > .i { width: 17px; height: 17px; color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: var(--z-skip); background: var(--surface); padding: 8px 12px; border-radius: var(--r-xs); box-shadow: var(--shadow-md); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.strong { font-weight: var(--fw-bold); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: var(--sp-1); } .gap-8 { gap: var(--sp-2); } .gap-12 { gap: var(--sp-3); } .gap-16 { gap: var(--sp-4); } .gap-24 { gap: var(--sp-6); }
.mt-4 { margin-top: var(--sp-1); } .mt-8 { margin-top: var(--sp-2); } .mt-12 { margin-top: var(--sp-3); } .mt-16 { margin-top: var(--sp-4); } .mt-24 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-1); } .mb-8 { margin-bottom: var(--sp-2); } .mb-12 { margin-bottom: var(--sp-3); } .mb-16 { margin-bottom: var(--sp-4); } .mb-24 { margin-bottom: var(--sp-6); }
.grid { display: grid; gap: var(--sp-4); align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
body.side-collapsed .shell { grid-template-columns: 72px minmax(0, 1fr); }
/* The sidebar floats: a panel of night glass inset from the window's edge, the blue mesh tinting it
   at the rim. Opaque enough that its text keeps ≥ 7:1. */
.side {
  position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border-radius: var(--r-xl); overflow-y: auto; overflow-x: hidden;
  background: var(--side-glow), var(--glass-side); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
  color: var(--side-ink); display: flex; flex-direction: column; z-index: var(--z-sidebar); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px -30px rgba(10, 14, 36, 0.65), 0 2px 6px rgba(10, 14, 36, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; position: relative; color: inherit; text-decoration: none !important; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-sm); box-shadow: 0 8px 18px -8px rgba(61, 107, 255, 0.8); transition: translate var(--t-slow) var(--ease-spring); }
.brand:hover .brand-mark { translate: 0 -2px; }
.brand-text { line-height: var(--lh-tight); min-width: 0; }
/* the wordmark: extra-bold and tight, set in the sidebar and on sign-in */
.wordmark { font-family: var(--font-brand); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); line-height: var(--lh-none); }
.brand-text b { display: block; color: var(--on-accent); font-size: var(--fs-2xl); margin-bottom: 3px; }
.brand-text span { font-size: var(--fs-xs); color: var(--side-ink-2); }
body.side-collapsed .brand-text, body.side-collapsed .nav-label, body.side-collapsed .nav-group-title, body.side-collapsed .side-search, body.side-collapsed .nav-count, body.side-collapsed .side-foot .who { display: none; }
.side-search { margin: 2px 12px 10px; position: relative; }
.side-search input { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--side-ink-strong); border-radius: var(--r-sm); padding: 8px 10px 8px 32px; font: inherit; font-size: var(--fs-md); }
.side-search input::placeholder { color: var(--side-ink-2); }
.side-search svg { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--side-ink-2); }
.side-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--side-panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md); padding: 6px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); z-index: 5; max-height: 360px; overflow: auto; }
.side-results a { display: block; padding: 7px 9px; border-radius: var(--r-xs); color: var(--side-ink-strong); font-size: var(--fs-md); }
.side-results a:hover, .side-results a.on { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.nav { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; margin: 12px 8px 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--side-ink-2); cursor: pointer; user-select: none; background: none; border: 0; padding: 0; width: calc(100% - 16px); font-family: inherit; }
.nav-group-title svg { width: 12px; height: 12px; transition: rotate var(--t-fast); }
.nav-group.closed .nav-group-title svg { rotate: -90deg; }
.nav-group.closed .nav-items { display: none; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--side-ink); font-size: var(--fs-md); font-weight: var(--fw-medium); position: relative; transition: background var(--t-fast), color var(--t-fast); }
.nav-item:hover { background: var(--side-hover); color: var(--on-accent); text-decoration: none; }
/* the current page: a blue pill, like a lit key on the night sidebar */
.nav-item.on { background: var(--grad-cta); color: var(--on-accent); box-shadow: 0 10px 20px -12px rgba(47, 91, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.nav-item.on .nav-div { background: rgba(255, 255, 255, 0.2); color: var(--on-accent); box-shadow: none; }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.85; }
.nav-item.on svg { opacity: 1; }
.nav-dot { width: 9px; height: 9px; border-radius: var(--r-2xs); flex: 0 0 9px; margin: 0 4px; }
/* a division in the sidebar: its icon on a tile of its colour */
.nav-div { width: 22px; height: 22px; flex: 0 0 22px; margin: 0 -2px; border-radius: var(--r-xs); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 30%, transparent); color: color-mix(in srgb, var(--c) 40%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.nav-item .nav-div svg, .side-results .nav-div svg { width: 13px; height: 13px; flex: none; opacity: 1; }
.side-results .nav-div { width: 18px; height: 18px; flex-basis: 18px; margin: 0; }
.nav-count { margin-left: auto; font-size: var(--fs-xs); color: var(--side-ink-2); background: rgba(255, 255, 255, 0.06); padding: 1px 7px; border-radius: var(--r-pill); }
.nav-count.hot { background: rgba(239, 68, 68, 0.2); color: var(--danger-on-dark); }
.side-foot { border-top: 1px solid var(--side-line); padding: 10px 12px; display: flex; align-items: center; gap: 10px; position: relative; }
.side-foot .who { line-height: var(--lh-tight); min-width: 0; }
.side-foot .who b { color: var(--on-accent); font-size: var(--fs-md); display: block; }
.side-foot .who span { font-size: var(--fs-xs); color: var(--side-ink-2); }
.side-foot button { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* The top bar floats too: a frosted strip with a white rim; pages scroll under it. */
.topbar {
  position: sticky; top: 12px; z-index: var(--z-sticky); height: calc(var(--top-h) - 4px); margin: 12px var(--sp-6) 0 var(--sp-5); display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-3) 0 var(--sp-2);
  border-radius: var(--r-lg); background: var(--glass-ground); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-card-line); box-shadow: var(--glass-card-shadow);
}
.top-title { min-width: 0; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.top-search { flex: 0 0 auto; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--ink-3); min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs > * { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumbs > a { flex: 0 1 auto; max-width: 220px; }
.crumbs .sep { flex: 0 0 auto; }
.crumbs a { color: var(--ink-3); }
.crumbs b { color: var(--ink); font-weight: var(--fw-bold); }
.crumbs .sep { color: var(--ink-4); }
.top-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--glass-btn); border: 1px solid var(--glass-card-line); border-radius: var(--r-pill); padding: 7px 14px; min-width: 280px; color: var(--ink-3); cursor: pointer; font: inherit; font-size: var(--fs-md); box-shadow: var(--shadow-sm), var(--highlight); }
.top-search:hover { border-color: var(--line-hover); background: var(--glass-btn-hover); }
.top-search svg { width: 16px; height: 16px; }
.kbd { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface-sunken); color: var(--ink-3); margin-left: auto; }
.content { padding: var(--sp-5) var(--sp-6) 60px; width: 100%; max-width: 1560px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head .sub { color: var(--ink-3); margin-top: 4px; font-size: var(--fs-md); }
.btn.menu-btn { display: none; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (max-width: 900px) {
  .shell, body.side-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 8px; top: 8px; bottom: 8px; height: auto; margin: 0; width: 280px; translate: calc(-100% - 16px) 0; transition: translate var(--t-slow) var(--ease-emph); box-shadow: 0 0 60px rgba(0, 0, 0, 0.4); }
  body.side-open .side { translate: 0 0; }
  body.side-collapsed .brand-text, body.side-collapsed .nav-label, body.side-collapsed .nav-group-title, body.side-collapsed .side-search, body.side-collapsed .nav-count { display: revert; }
  .btn.menu-btn { display: inline-flex; }
  .topbar { margin: 8px 8px 0; top: 8px; padding: 0 var(--sp-2); }
  .top-search { min-width: 0; padding: 7px; }
  .top-search span, .top-search .kbd { display: none; }
  .content { padding: 16px 16px 60px; }
  .scrim { position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: var(--scrim-blur); backdrop-filter: var(--scrim-blur); z-index: var(--z-scrim); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--glass-card-line);
  background: var(--glass-btn); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: background var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), scale var(--t-fast) var(--ease-out); box-shadow: var(--shadow-sm); user-select: none;
}
.btn:hover { border-color: var(--line-hover); background: var(--glass-btn-hover); }
.btn:not(.btn-ghost):not(.btn-primary):not(.btn-glass):not(.btn-light) { box-shadow: 0 0 0 1px rgba(30, 45, 120, 0.06), 0 2px 6px -2px rgba(30, 50, 150, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.btn:focus-visible, .chip:focus-visible, .seg button:focus-visible, .link-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { scale: 0.98; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* The primary action: a royal-blue pill into indigo with a lit top edge; it rises a hair on hover
   and settles when pressed. One per screen area. */
.btn-primary { background: var(--grad-cta); color: var(--on-accent); border-color: transparent; box-shadow: var(--cta-shadow), var(--cta-edge); transition: background var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), translate var(--t-fast) var(--ease-out), scale var(--t-fast) var(--ease-out); }
.btn-primary:hover { background: var(--grad-cta-hover); color: var(--on-accent); border-color: transparent; translate: 0 -1px; box-shadow: var(--cta-shadow), 0 14px 24px -14px rgba(47, 91, 255, 0.85), var(--cta-edge); }
.btn-primary:active:not(:disabled) { translate: 0 1px; scale: 1; box-shadow: 0 1px 2px rgba(23, 37, 120, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.22); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--glass-btn); border-color: transparent; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--line-danger); }
.btn-ok { background: var(--ok); color: var(--on-accent); border-color: var(--ok); }
.btn-ok:hover { background: var(--ok-deep); border-color: var(--ok-deep); }
.btn-sm { height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-pill); }
.btn-xs { height: var(--ctl-h-xs); padding: 0 var(--sp-2); font-size: var(--fs-sm); border-radius: var(--r-pill); gap: var(--sp-1); }
.btn-xs svg { width: 13px; height: 13px; }
.btn-icon { width: var(--ctl-h); padding: 0; }
.btn-icon.btn-sm { width: var(--ctl-h-sm); }
.btn-icon.btn-xs { width: var(--ctl-h-xs); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; font-weight: var(--fw-semibold); }
.link-btn:hover { text-decoration: underline; }
.link-btn.tiny { font-size: var(--fs-xs); } .link-btn.small { font-size: var(--fs-sm); } /* `font: inherit` above would undo these */

/* segmented control */
.seg { display: inline-flex; background: rgba(255, 255, 255, 0.4); border: 1px solid var(--glass-card-line); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); box-shadow: inset 0 1px 2px rgba(15, 22, 48, 0.06); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; transition: background var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-3); height: calc(var(--ctl-h-sm) - 6px); padding: 0 var(--sp-3); border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); }
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 22, 48, 0.08), 0 4px 10px -4px rgba(30, 50, 150, 0.25); }
.seg button:hover:not(.on) { color: var(--ink); }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field > label, .label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .field select, .field textarea, select.input, textarea.input {
  width: 100%; min-height: var(--ctl-h); padding: 7px var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--field-line); background: var(--glass-field); color: var(--ink);
  font: inherit; font-size: var(--fs-md); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea, textarea.input { min-height: 84px; resize: vertical; line-height: var(--lh-normal); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.input.sm { min-height: var(--ctl-h-sm); padding: 4px var(--sp-2); font-size: var(--fs-sm); border-radius: var(--r-xs); }
.field.inline { flex-direction: row; align-items: center; gap: var(--sp-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-md); user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.search-box { position: relative; }
.search-box input { padding-left: 34px !important; }
.search-box svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.err-text { color: var(--danger); font-size: var(--fs-sm); }

/* date picker (core/datepick.js): the field that replaces a native date input, and its calendar */
.dp { position: relative; display: inline-flex; min-width: 0; vertical-align: middle; }
.field .dp, .form-grid .dp, .dp:not(.sm) { display: flex; width: 100%; }
.dp-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.dp-field {
  width: 100%; min-height: var(--ctl-h); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border: 1px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--glass-field); color: var(--ink); font: inherit; font-size: var(--fs-md); cursor: pointer; text-align: left; white-space: nowrap; min-width: 0;
  transition: border-color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std);
}
.dp-field:hover:not(:disabled) { border-color: var(--line-hover); }
.dp-field:focus-visible, .dp-field.open { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.dp-field.bad { border-color: var(--danger-solid); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.dp-field .dp-v { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }
.dp-field .dp-rel { color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.dp-field .dp-ph { color: var(--ink-4); }
.dp-field svg { width: 15px; height: 15px; margin-left: auto; color: var(--ink-3); flex: 0 0 15px; }
.dp-field.sm { min-height: var(--ctl-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-sm); border-radius: var(--r-xs); gap: 6px; }
.dp-field.sm svg { width: 13px; height: 13px; flex-basis: 13px; }
.dp-field:disabled { cursor: default; background: var(--surface-sunken); color: var(--ink-3); }
.fb-dates .dp { width: 150px; }
.dp-pop { padding: 2px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; }
.dp-head b { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-grid .dow { font-size: var(--fs-3xs); color: var(--ink-4); text-align: center; font-weight: var(--fw-bold); padding: 4px 0; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.dp-grid .d { height: 34px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--t-fast) var(--ease-std); }
.dp-grid .d:hover:not(:disabled) { background: var(--tint-hover); }
.dp-grid .d:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-grid .d.out { color: var(--ink-4); }
.dp-grid .d.we:not(.sel) { color: var(--ink-3); }
.dp-grid .d.today:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.dp-grid .d.inrange { background: var(--accent-bg); border-radius: 0; }
.dp-grid .d.edge { background: var(--accent-bg); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--line-accent); }
.dp-grid .d.hl:not(.sel) { background: var(--accent-bg); }
.dp-grid .d.sel { background: var(--grad-cta); color: var(--on-accent); box-shadow: var(--cta-shadow); }
.dp-grid .d:disabled { color: var(--neutral-300); cursor: not-allowed; }
.dp-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-quick .chip { height: var(--ctl-h-xs); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.dp-type { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.dp-hint { min-height: 16px; margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); }

/* the project dialog (round 5): division tiles, sections, the service tree */
.pm-form { display: grid; gap: var(--sp-5); }
.pm-sec { display: grid; gap: var(--sp-3); }
.pm-sec > h4 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.pm-sec > h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.input-lg { font-size: var(--fs-lg) !important; font-weight: var(--fw-semibold); min-height: 42px !important; }
.div-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.div-tile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--ink); min-width: 0; transition: border-color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std); }
.div-tile:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.div-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.div-tile.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.div-tile .ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, white), var(--c)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.div-tile .ic svg { width: 19px; height: 19px; }
.div-tile b { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.div-tile .grow > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .div-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .div-tile .grow > span { display: none; } }
.svc-tree { display: grid; gap: var(--sp-3); }
.svc-group { display: grid; gap: 6px; }
.svc-group.main { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.svc-head { display: flex; align-items: center; gap: var(--sp-2); }
.svc-tree .chip svg { width: 13px; height: 13px; margin-left: -3px; }
.svc-often { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-2); margin-left: 2px; }
.svc-more > summary, .pm-more > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.svc-more > summary::-webkit-details-marker, .pm-more > summary::-webkit-details-marker { display: none; }
.svc-more[open] > summary { margin-bottom: var(--sp-3); }
.svc-more .svc-group + .svc-group { margin-top: var(--sp-3); }
.pm-more { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.pm-more > summary svg { width: 14px; height: 14px; transition: rotate var(--t-fast) var(--ease-std); }
.pm-more[open] > summary svg { rotate: 90deg; }
.badge.new-client { background: var(--grad-soft); color: var(--cta-ink); }
.pop .opt.create { color: var(--accent); font-weight: var(--fw-semibold); }
.pop .opt.create svg { width: 15px; height: 15px; }
.pop .opt.busy { opacity: 0.6; }
.client-btn .badge { flex: none; }

/* combobox */
.combo { position: relative; }
.combo-btn { width: 100%; justify-content: space-between; font-weight: var(--fw-medium); min-height: var(--ctl-h); height: auto; padding: 5px var(--sp-3); box-shadow: none; border-color: var(--field-line); }
.combo-btn .ph { color: var(--ink-4); }
.pop {
  position: fixed; z-index: var(--z-popover); background: var(--glass-overlay); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-line); border-radius: var(--r-md); box-shadow: var(--shadow-lg), var(--highlight); padding: 6px; min-width: 200px; max-width: min(420px, calc(100vw - 24px));
  animation: pop-in 220ms var(--ease-pop) backwards; transform-origin: top;
}
@keyframes pop-in { from { opacity: 0; translate: 0 -6px; scale: 0.94; } }
.pop .pop-search { padding: 4px 4px 6px; }
.pop .opts { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pop .opt, .menu-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-md); color: var(--ink); background: none; border: 0; width: 100%;
  text-align: left; font-family: inherit; text-decoration: none !important;
}
.pop .opt:hover, .pop .opt.hl, .menu-item:hover { background: var(--tint-hover); }
.pop .opt.sel { font-weight: var(--fw-bold); }
.pop .opt .tick { margin-left: auto; color: var(--accent); }
.menu-item svg { width: 16px; height: 16px; color: var(--ink-3); }
.menu-item.danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-head { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-4); padding: 6px 10px 3px; }

/* ---------------------------------------------------------------- cards & surfaces */
.card {
  background: var(--glass-card); -webkit-backdrop-filter: var(--glass-card-blur); backdrop-filter: var(--glass-card-blur); border: 1px solid var(--glass-card-line); border-radius: var(--r-lg);
  box-shadow: var(--glass-card-shadow); padding: var(--sp-4); min-width: 0; position: relative;
}
.card.flat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
/* a card that opens something lifts toward you, brighter, with a deeper blue shadow */
.card.link, a.card { cursor: pointer; transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std), translate var(--t-med) var(--ease-out); }
.card.link:hover, a.card:hover { background: var(--glass-card-hover); box-shadow: var(--pop); translate: 0 -3px; text-decoration: none; }
.card.tight { padding: var(--sp-3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); min-width: 0; flex-wrap: wrap; }
.card-head h3 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.card-head .sub { font-size: var(--fs-sm); color: var(--ink-3); }
.panel { background: var(--glass-card); border: 1px solid var(--glass-card-line); border-radius: var(--r-md); box-shadow: var(--glass-card-shadow); }
.section-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); margin: var(--sp-6) 0 var(--sp-3); }
/* Entrances. `backwards` (not `both`) so nothing keeps a transform once it has landed:
   a lingering transform would trap position: fixed children. */
.appear { animation: appear var(--t-enter) var(--ease-emph) backwards; transform-origin: 50% 100%; }
/* glass panels pop up into place: a short rise from a hair smaller, and a fade */
@keyframes appear { from { opacity: 0; transform: translateY(14px) scale(0.975); } }
.stagger > * { animation: appear var(--t-enter) var(--ease-emph) backwards; transform-origin: 50% 100%; }
.stagger > *:nth-child(2) { animation-delay: 45ms; } .stagger > *:nth-child(3) { animation-delay: 90ms; } .stagger > *:nth-child(4) { animation-delay: 135ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; } .stagger > *:nth-child(n + 6) { animation-delay: 220ms; }
.grid > .appear:nth-child(2) { animation-delay: 60ms; } .grid > .appear:nth-child(3) { animation-delay: 120ms; } .grid > .appear:nth-child(n + 4) { animation-delay: 170ms; }
/* A new page fades in; opacity only, so layout and fixed children aren't touched. */
.view-in { animation: fade-in var(--t-med) var(--ease-out) backwards; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.stat { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--glass-card); -webkit-backdrop-filter: var(--glass-card-blur); backdrop-filter: var(--glass-card-blur); border: 1px solid var(--glass-card-line); box-shadow: var(--glass-card-shadow); position: relative; min-width: 0; transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std), translate var(--t-med) var(--ease-out); }
.stat .k { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.stat .k svg { width: 26px; height: 26px; flex: 0 0 26px; padding: 6px; border-radius: var(--r-pill); background: var(--grad-cta); color: var(--on-accent); box-shadow: 0 6px 12px -6px rgba(47, 91, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.stat .v { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.stat .d { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; }
.stat.link { cursor: pointer; }
.stat.link:hover { background: var(--glass-card-hover); box-shadow: var(--pop); translate: 0 -3px; }
.stat.warn .v { color: var(--danger); }
.scope-line { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scope-line b { color: var(--ink-2); font-weight: var(--fw-bold); }

/* hero */
/* Home's header: a blue gradient panel (deep royal where the text sits, sky on the right, a warm
   glow at the foot) with white type, and glass cards on it: the next event with its countdown,
   then the few after it. Buttons on it are a white pill and glass pills. */
.hero {
  position: relative; border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-8) var(--sp-6); background: var(--hero-grad); color: var(--on-accent);
  box-shadow: 0 24px 48px -28px rgba(36, 72, 216, 0.75); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--sp-6); align-items: center;
  overflow: hidden; isolation: isolate;
}
/* two faint rings in the light, like the glass of a lens; still, decoration only */
.hero::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -260px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.05), 0 0 0 71px rgba(255, 255, 255, 0.12); pointer-events: none; }
.hero-main { min-width: 0; }
.hero-date { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.hero-date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warm-2); box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.3); }
.hero h1 { margin-top: var(--sp-3); font-size: var(--fs-display); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--on-accent); text-wrap: balance; }
.hero .sub { color: rgba(255, 255, 255, 0.86); margin-top: var(--sp-3); font-size: var(--fs-lg); max-width: 520px; }
/* a white pill (the main action on blue) and glass pills (the rest) */
.btn-light { background: var(--surface); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(10, 14, 36, 0.55); }
.btn-light:hover { background: var(--surface); color: var(--accent); border-color: transparent; translate: 0 -1px; }
.btn-glass { background: var(--glass-on-blue); color: var(--on-accent); border-color: var(--glass-on-blue-line); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.5); color: var(--on-accent); }
.hero-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* glass on blue: the next event, with a big countdown */
.hero-next, .hero-soon {
  display: block; min-width: 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); color: var(--on-accent); text-decoration: none !important;
  background: var(--glass-sheen), var(--glass-on-blue); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-on-blue-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 40px -24px rgba(10, 14, 36, 0.7);
}
.hero-next { transition: background var(--t-fast) var(--ease-std), translate var(--t-med) var(--ease-out); }
.hero-next:hover { background: var(--glass-sheen), rgba(255, 255, 255, 0.2); translate: 0 -3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 30px 50px -26px rgba(10, 14, 36, 0.8); }
.hero-next .hn-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hero-next .hn-k { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.hero-next .hn-div { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--c); color: var(--on-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.hero-next .hn-div svg { width: 15px; height: 15px; }
.hero-next .hn-count { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.hero-next .hn-count b { font-size: var(--fs-display); font-weight: var(--fw-heavy); line-height: var(--lh-none); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.hero-next .hn-count span { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.85); }
.hero-next .hn-name { display: block; margin-top: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.hero-next .hn-meta { display: block; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); }
/* the few events after it: one line each, on a quieter glass */
.hero-soon { padding: var(--sp-2) var(--sp-3); }
.hero-soon a { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-1); color: var(--on-accent); border-radius: var(--r-sm); min-width: 0; }
.hero-soon a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.hero-soon a + a { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hero-soon .hs-d { flex: 0 0 52px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.hero-soon .hs-n { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-soon .hs-c { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); }
@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-6); } .hero h1 { font-size: var(--fs-4xl); } .hero-side { flex-direction: row; } .hero-side > * { flex: 1 1 0; } }
@media (max-width: 760px) { .hero { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); border-radius: var(--r-lg); } .hero h1 { font-size: var(--fs-3xl); } .hero-side { flex-direction: column; } .hero-soon { display: none; } .hero::before { right: -260px; } }

/* ---------------------------------------------------------------- badges, chips, avatars */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--pill-h); padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; background: var(--surface-muted); color: var(--ink-2); border: 1px solid transparent; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.outline { background: transparent; border-color: var(--line-2); }
.stage { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--pill-h); padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }
.stage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.stage { background: color-mix(in srgb, var(--c) 12%, white); color: color-mix(in srgb, var(--c) 72%, black); }
/* status tones: statusPill(label, "ok" | "warn" | "danger" | "info" | "neutral" | "violet" | "teal") */
.stage.ok { --c: var(--ok-strong); } .stage.warn { --c: var(--warn-strong); } .stage.danger { --c: var(--danger); }
.stage.info { --c: var(--accent); } .stage.neutral { --c: var(--neutral-400); } .stage.violet { --c: var(--tone-violet); } .stage.teal { --c: var(--tone-teal); }
/* A division: its icon on a tile of its colour, then its name. Colour is never the only cue. */
.div-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-2); white-space: nowrap; }
.div-chip i { width: 18px; height: 18px; border-radius: var(--r-xs); display: inline-grid; place-items: center; flex: 0 0 18px; background: color-mix(in srgb, var(--c) 15%, white); color: color-mix(in srgb, var(--c) 82%, black); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.div-chip i svg { width: 12px; height: 12px; }
.div-chip.solid i { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, white), var(--c)); color: var(--on-accent); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--c) 60%, transparent); }
.div-chip.lg i { width: 30px; height: 30px; flex-basis: 30px; border-radius: var(--r-sm); }
.div-chip.lg i svg { width: 17px; height: 17px; }
.div-chip.lg { font-size: var(--fs-sm); gap: var(--sp-2); }
.div-chip.icon-only { gap: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--ctl-h-sm); padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--glass-card-line); background: var(--glass-btn); box-shadow: 0 0 0 1px rgba(30, 45, 120, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: background var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; font-family: inherit; white-space: nowrap; }
.chip:hover { border-color: var(--line-hover); background: var(--glass-btn-hover); }
.chip.on { background: var(--accent-bg); border-color: var(--line-accent); color: var(--accent-ink); }
.chip svg { width: 14px; height: 14px; }
.chip .x { opacity: 0.6; margin-right: -3px; }
/* a division (or any entity with a colour) inside a chip or a segmented button */
.chip-ico { width: 18px; height: 18px; flex: 0 0 18px; margin-left: -5px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, white); color: color-mix(in srgb, var(--c) 82%, black); transition: background var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std); }
.chip-ico svg { width: 11px; height: 11px; }
.chip.on .chip-ico, .seg button.on .chip-ico { background: var(--c); color: var(--on-accent); }
.seg .chip-ico { margin-left: -4px; }
.tag { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 var(--sp-2); border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--surface-muted); color: var(--ink-2); white-space: nowrap; }
.av { --s: 26px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(var(--s) * 0.4); font-weight: var(--fw-bold); color: var(--on-accent); background: var(--c, var(--neutral-500)); flex: 0 0 var(--s); box-shadow: 0 0 0 2px var(--surface); letter-spacing: var(--ls-tight); font-family: var(--font-body); line-height: var(--lh-none); }
.av.sm { --s: 22px; } .av.lg { --s: 36px; } .av.xl { --s: 48px; }
.avs { display: inline-flex; align-items: center; }
.avs .av + .av { margin-left: -7px; }
.avs .more { font-size: var(--fs-xs); color: var(--ink-3); margin-left: 5px; font-weight: var(--fw-semibold); }
.pic-chip { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--ctl-h-xs); padding: 0 var(--sp-2) 0 2px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pic-chip .lbl { color: var(--ink-3); font-weight: var(--fw-semibold); }
.pic-chip .av { --s: 20px; }

/* progress */
.bar { height: 6px; border-radius: var(--r-pill); background: rgba(15, 22, 48, 0.08); overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; scale: var(--p, 0) 1; background: var(--grad-brand-x); border-radius: var(--r-pill); transition: scale 480ms var(--ease-out); }
.bar.ok > i { background: var(--ok-strong); }
.bar.danger > i { background: var(--danger-solid); }
.ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--brand-2), var(--brand-1) calc(var(--p) * 1%), rgba(15, 22, 48, 0.08) 0); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); flex: 0 0 42px; }
.ring::before { content: ""; position: absolute; }
.ring > span { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }

/* ---------------------------------------------------------------- filters bar */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.filters .search-box { min-width: 220px; flex: 0 1 280px; }
.filters .sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 2px; }
/* filterBar() (core/data.js): the same filter row on every main list */
.fbar-rest { display: contents; }
.fb-select { width: auto; max-width: 220px; }
.fb-dates { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.fb-dates input[type="date"] { width: 150px; }
.fb-person { max-width: 260px; }
.fb-person .fb-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: var(--r-pill); color: var(--ink-3); }
.fb-person .fb-x:hover { background: var(--tint-ghost); color: var(--ink); }
.fb-person .fb-x svg { width: 12px; height: 12px; }
@media (max-width: 640px) { .fb-select, .fb-dates, .fb-person { max-width: 100%; } .fb-dates input[type="date"] { width: 138px; } }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- tables */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--glass-card-line); background: var(--glass-card); box-shadow: var(--glass-card-shadow); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.tbl th { position: sticky; top: 0; background: var(--surface-sunken); text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); letter-spacing: var(--ls-wide); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.tbl td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover { background: var(--surface-hover); }
.tbl tr.sel td { background: var(--surface-selected); }
.tbl .grp td { background: var(--surface-sunken); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); padding: var(--sp-2) var(--sp-3); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .muted-row td { color: var(--ink-4); }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 2px; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-3); border: 0; background: none; cursor: pointer; font-family: inherit; position: relative; white-space: nowrap; text-decoration: none !important; transition: color var(--t-fast) var(--ease-std); }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .on { color: var(--ink); }
.tabs .on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: var(--r-2xs) var(--r-2xs) 0 0; background: var(--grad-brand-x); }
.tabs .cnt { font-size: var(--fs-xs); background: var(--surface-muted); color: var(--ink-3); border-radius: var(--r-pill); padding: 0 7px; }
.tabs svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- project header and journey (round 5) */
/* the header carries its division: a band of its colour on top and a faint wash behind the title */
.phead { padding: 22px 22px 16px; overflow: hidden; background: radial-gradient(760px 220px at 0% 0%, color-mix(in srgb, var(--c) 13%, transparent), transparent 72%), var(--glass-card); }
.phead::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, white)); }
.phead-title { margin-top: var(--sp-2); font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.pstats { gap: var(--sp-5); }
.pstats > div { display: flex; flex-direction: column; align-items: center; }
.pstats b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); font-variant-numeric: tabular-nums; }
.pstats span { font-size: var(--fs-xs); color: var(--ink-3); }
.tag.svc { background: var(--surface-selected); color: var(--accent-ink); }
/* the steps from quotation to wrap-up: done steps wear the sunset, the current one is ringed */
.journey { list-style: none; margin: var(--sp-4) -4px 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; scrollbar-width: none; counter-reset: none; }
.journey::-webkit-scrollbar { display: none; }
.journey li { position: relative; min-width: 0; }
.journey li::after { content: ""; position: absolute; top: 16px; left: calc(4px + 32px + 6px); right: 6px; height: 2px; border-radius: var(--r-pill); background: var(--line-2); }
.journey li:last-child::after { display: none; }
.journey li.done::after { background: var(--grad-brand-x); }
.journey a { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; color: inherit; text-decoration: none !important; border-radius: var(--r-sm); }
.journey a:hover .jt { color: var(--accent); }
.journey .jdot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-heavy); background: var(--surface-muted); color: var(--ink-3); margin-bottom: var(--sp-2); position: relative; z-index: 1; transition: box-shadow var(--t-med) var(--ease-out); }
.journey .jdot svg { width: 16px; height: 16px; stroke-width: 3; }
.journey li.done .jdot { background: var(--grad-cta); color: var(--on-accent); box-shadow: 0 4px 12px -4px rgba(61, 107, 255, 0.55), var(--cta-edge); }
.journey li.doing .jdot { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-2); }
.journey li.now .jdot { background: var(--warm-bg); color: var(--warm-ink); box-shadow: inset 0 0 0 2px var(--warm-2), 0 0 0 5px rgba(255, 138, 61, 0.22); }
.journey li.none .jdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-4); }
.journey .jt { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.journey .jt em { font-style: normal; font-size: var(--fs-3xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-accent); background: var(--grad-cta); padding: 1px 6px; border-radius: var(--r-pill); }
.journey .js { font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-snug); }
.journey li.none .jt, .journey li.none .js { color: var(--ink-4); }
/* the Overview's "what to do now" card */
.next-step { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); background: var(--grad-soft), var(--surface); border-color: rgba(61, 107, 255, 0.2); }
.next-step .ns-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--grad-cta); color: var(--on-accent); box-shadow: 0 6px 16px -6px rgba(61, 107, 255, 0.6), var(--cta-edge); }
.next-step .ns-ic svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .next-step { flex-wrap: wrap; } .next-step .btn { width: 100%; } }

/* celebrations (core/celebrate.js): blue and orange sparks, a "+8" and, now and then, the cendrawasih */
.cel-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); }
.cel-spark { position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.cel-points { position: fixed; z-index: var(--z-toast); pointer-events: none; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); color: var(--on-accent); background: var(--grad-cta); padding: 2px 10px; border-radius: var(--r-pill); box-shadow: var(--cta-shadow); white-space: nowrap; }
.cel-bird { position: fixed; left: 0; top: 0; width: 150px; z-index: var(--z-toast); pointer-events: none; filter: drop-shadow(0 10px 18px rgba(15, 22, 48, 0.25)); }
.cel-bird svg { display: block; width: 100%; height: auto; overflow: visible; }
.cel-wing { transform-box: fill-box; transform-origin: 0% 100%; animation: cel-flap 0.22s ease-in-out infinite alternate; }
@keyframes cel-flap { from { transform: rotate(10deg); } to { transform: rotate(-26deg) scaleY(0.72); } }

/* ---------------------------------------------------------------- project cards / list */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pcard {
  position: relative; border-radius: var(--r-lg); background: var(--glass-card); border: 1px solid var(--glass-card-line); box-shadow: var(--glass-card-shadow); padding: 14px 16px 14px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 9px; min-width: 0; overflow: hidden; transition: box-shadow var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std);
}
.pcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--c, var(--blue)), color-mix(in srgb, var(--c, var(--blue)) 45%, white)); }
/* a faint wash of the division's colour in the top corner, so a grid of cards reads by division at a glance */
.pcard::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 60%; height: 70px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--c, var(--blue)) 13%, transparent), transparent 70%); pointer-events: none; }
.pcard:hover { background: var(--glass-card-hover); box-shadow: var(--pop); translate: 0 -4px; }
.pcard { transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std), translate var(--t-med) var(--ease-out); }
.pcard > * { position: relative; z-index: 1; }
.pcard h3 { font-size: var(--fs-base); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-3); min-width: 0; }
.pcard .meta svg { width: 14px; height: 14px; flex: 0 0 14px; }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.date-badge { width: 46px; flex: 0 0 46px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); text-align: center; overflow: hidden; line-height: var(--lh-tight); box-shadow: var(--shadow-sm); }
.date-badge .m { background: var(--grad-cta); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); padding: 2px 0; text-transform: uppercase; }
.date-badge .d { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); padding: 3px 0 1px; }
.date-badge .y { font-size: var(--fs-3xs); color: var(--ink-3); padding-bottom: 3px; }
.date-badge.tbc .m { background: var(--neutral-400); }
.date-badge.none .m { background: var(--neutral-300); }
.month-head { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink-2); margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.month-head::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.month-head .cnt { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-semibold); }
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow { display: grid; grid-template-columns: 46px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 110px 90px; gap: 14px; align-items: center; padding: 9px 12px; border-radius: var(--r-md); background: var(--glass-card); border: 1px solid var(--glass-card-line); cursor: pointer; box-shadow: var(--glass-card-shadow); transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std), translate var(--t-med) var(--ease-out); }
.prow:hover { background: var(--glass-card-hover); box-shadow: var(--pop); translate: 0 -2px; }
.prow .name { font-weight: var(--fw-bold); font-size: var(--fs-md); }
@media (max-width: 1000px) { .prow { grid-template-columns: 46px minmax(0, 1fr) 90px; } .prow .hide-m { display: none; } }
.show-more { margin: var(--sp-3) auto 0; display: flex; }
/* data components (core/data.js) */
.dl-result { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); }
.dl-result b { color: var(--ink); }
.dl-result .link-btn { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }
.dl-result .link-btn svg { width: 13px; height: 13px; }
.dl-sort { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.dl-sort svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--t-fast); }
.dl-sort:hover svg, .dl-sort.on svg { opacity: 1; }
.dl-sort.on { color: var(--ink); }
.dl-sort:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-2xs); }
.tbl.dense td, .tbl.dense th { padding: var(--sp-1) var(--sp-2); }
.dl-group-more { margin: var(--sp-1) 0 0 34px; }
.section-title.tone-danger { color: var(--danger); }
/* UI guide page */
.ug-sec h2 { font-size: var(--fs-xl); }
.ug-demo { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.ug-rules { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); display: grid; gap: var(--sp-1); }
.ug-code { margin: 0; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-inverse); color: var(--side-ink-strong); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-normal); overflow-x: auto; white-space: pre; }
.ug-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.ug-sw { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; }
.ug-sw i { grid-row: span 2; width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--line-2); }
.ug-sw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.bcol { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; transition: background var(--t-fast), box-shadow var(--t-fast); }
.bcol.drop { background: var(--tint-hover); box-shadow: inset 0 0 0 2px var(--line-hover); }
.bcol-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; }
.bcol-head .sum { font-size: var(--fs-xs); color: var(--ink-3); }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow-sm); cursor: grab; display: flex; flex-direction: column; gap: 6px; transition: box-shadow var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); }
.kcard:hover { box-shadow: var(--shadow-md); border-color: var(--line-hover); }
.kcard.dragging { opacity: 0.45; }
.kcard .t { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: var(--lh-snug); }
.kcard .m { font-size: var(--fs-sm); color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.drag-ghost { position: fixed; z-index: var(--z-drag); pointer-events: none; rotate: 2deg; box-shadow: var(--shadow-lg); opacity: 0.95; }

/* ---------------------------------------------------------------- calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.cal .dow { background: var(--surface-sunken); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); padding: 7px 8px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.cal .day { min-height: 108px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: pointer; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.out { background: var(--surface-sunken); }
.cal .day.out .n { color: var(--ink-4); }
.cal .day.today .n { background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 0 7px; }
.cal .day.sel { box-shadow: inset 0 0 0 2px rgba(42, 85, 232, 0.45); }
.cal .n { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); align-self: flex-start; }
.cal .ev { font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 70%, black); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semibold); }
.cal .ev.past { opacity: 0.55; }
.cal .ev.cancelled { text-decoration: line-through; opacity: 0.5; }
.cal .more { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-bold); padding: 0 4px; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cal-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cal .day { min-height: 54px; }
  .cal .ev { font-size: 0; padding: 0; height: 6px; width: 6px; border-radius: 50%; border: 0; background: var(--c); display: inline-block; }
  .cal .day { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .cal .n { width: 100%; }
  .cal .more { display: none; }
}
.agenda-item { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.agenda-item:last-child { border-bottom: 0; }
.agenda-item:hover .t { color: var(--accent); }

/* ---------------------------------------------------------------- gantt / timeline */
.gantt-wrap { --g-label-w: 300px; position: relative; }
.gantt { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: auto; position: relative; max-height: 70vh; overscroll-behavior-x: contain; scrollbar-width: thin; }
.gantt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gantt.panning { cursor: grabbing; user-select: none; }
@media (pointer: fine) { .gantt:not(.panning) .g-track, .gantt:not(.panning) .g-scale { cursor: grab; } }
/* shadows at the scroll edges: more timeline to the left / right */
.gantt-wrap::before, .gantt-wrap::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 22px; pointer-events: none; z-index: 5; opacity: 0; transition: opacity var(--t-med); }
.gantt-wrap::before { left: calc(var(--g-label-w) + 1px); background: linear-gradient(90deg, rgba(15, 22, 48, 0.14), transparent); }
.gantt-wrap::after { right: 1px; border-radius: 0 var(--r-md) var(--r-md) 0; background: linear-gradient(270deg, rgba(15, 22, 48, 0.14), transparent); }
.gantt-wrap.more-l::before, .gantt-wrap.more-r::after { opacity: 1; }
.gantt-grid { display: grid; min-width: max-content; position: relative; }
.g-head { position: sticky; top: 0; z-index: 3; background: var(--surface-sunken); border-bottom: 1px solid var(--line); display: flex; }
.g-label-head, .g-label { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); width: var(--g-label-w); min-width: var(--g-label-w); }
.g-head .g-label-head { background: var(--surface-sunken); z-index: 4; padding: 8px 12px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); }
.g-scale { display: flex; flex-direction: column; position: relative; }
.g-tier { display: flex; }
.g-tick { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--ink-3); padding: 5px 6px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; line-height: var(--lh-snug); }
.g-tier.top .g-tick { font-weight: var(--fw-bold); color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 4px 8px; }
/* the month / year name stays in view while its stretch is on screen */
.g-tier.top .g-tick { overflow: visible; }
.g-tick-l { position: sticky; left: calc(var(--g-label-w) + 8px); }
.g-tier:not(.top) .g-tick { text-align: center; padding: 4px 2px; }
.g-tick.yr { border-left-color: var(--line-2); }
.g-tick.we { background: rgba(15, 22, 48, 0.03); }
.g-tick.now { background: var(--accent-bg); color: var(--accent-ink); font-weight: var(--fw-bold); }
.g-tick b { font-weight: var(--fw-bold); color: var(--ink-2); }
.g-tick.now b { color: var(--accent-ink); }
.g-dow { display: block; font-size: var(--fs-3xs); color: var(--ink-4); }
/* faint unit gridlines (day and week scales) */
.gantt-grid.gridded .g-track { background-image: repeating-linear-gradient(90deg, rgba(15, 22, 48, 0.045) 0 1px, transparent 1px var(--g-unit)); }
.g-group { min-height: 30px; background: var(--surface-sunken); }
.g-group .g-label { background: var(--surface-sunken); font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: default; }
.g-row { display: flex; border-bottom: 1px solid var(--line); min-height: 34px; position: relative; }
.g-row:hover .g-label { background: var(--surface-hover); }
.g-label { padding: 6px 12px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); min-width: 0; cursor: pointer; }
.g-label .ellipsis { flex: 1; }
.g-track { position: relative; flex: 0 0 auto; }
.g-bar { position: absolute; top: 8px; height: 18px; border-radius: var(--r-xs); background: var(--c, var(--blue)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); cursor: pointer; transform-origin: left; animation: grow-x 360ms var(--ease-out) backwards; display: flex; align-items: center; overflow: hidden; }
.g-bar-lbl { position: absolute; top: 8px; height: 18px; display: flex; align-items: center; overflow: clip; pointer-events: none; z-index: 1; }
.g-bar-lbl > span { position: sticky; left: calc(var(--g-label-w) + 6px); padding: 0 6px; font-size: var(--fs-2xs); color: var(--on-accent); font-weight: var(--fw-bold); white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.g-bar .prog { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, 0.28); pointer-events: none; }
.g-bar.tbc { background: repeating-linear-gradient(45deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 60%, white) 6px, color-mix(in srgb, var(--c) 60%, white) 12px); }
.g-bar.done { opacity: 0.55; }
.g-bar.drag { cursor: grabbing; box-shadow: var(--shadow-md); }
/* bars that run past the edge of the view end in an arrow, not a cut */
.g-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); padding-left: 6px; }
.g-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.g-bar.cut-l.cut-r { clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.g-ms { position: absolute; top: 10px; width: 13px; height: 13px; rotate: 45deg; background: var(--surface); border: 2.5px solid var(--c, var(--indigo)); border-radius: var(--r-2xs); margin-left: -6.5px; z-index: 1; }
/* milestone kinds: deadlines ◆, approvals ● ; state colours from the tokens */
.g-ms.k-deadline.s-open { --c: var(--indigo); }
.g-ms.k-deadline.s-done { --c: var(--ok-strong); background: var(--ok-strong); }
.g-ms.k-deadline.s-overdue { --c: var(--danger-solid); background: var(--danger-bg); }
.g-ms.k-approval { rotate: 0deg; border-radius: 50%; width: 12px; height: 12px; top: 11px; margin-left: -6px; border-width: 2.5px; }
.g-ms.k-approval.s-approved { --c: var(--ok-strong); background: var(--ok-strong); }
.g-ms.k-approval.s-signed { --c: var(--tone-teal); background: var(--tone-teal); }
.g-ms.k-approval.s-pending { --c: var(--warn-strong); background: var(--warn-bg); }
.g-ms.k-approval.s-changes { --c: var(--danger-solid); background: var(--danger-bg); }
.g-ms:hover { scale: 1.25; }
/* overlaps: the colliding stretch of a bar (e.g. one PIC on two events at once) */
.g-ov { position: absolute; top: 3px; bottom: 3px; border: 1px dashed var(--line-danger); border-radius: var(--r-xs); background: repeating-linear-gradient(135deg, rgba(220, 38, 38, 0.16) 0 5px, rgba(220, 38, 38, 0.05) 5px 10px); z-index: 0; }
.g-bar.has-ov { outline: 2px solid var(--danger-solid); outline-offset: 1px; }
/* "running per day" strip under the scale */
.g-load { min-height: 24px; background: var(--surface); position: sticky; top: var(--g-head-h, 0); z-index: 2; box-shadow: 0 1px 0 var(--line); }
.g-load .g-label { font-size: var(--fs-xs); }
.g-load-c { position: absolute; top: 7px; height: 10px; border-radius: var(--r-2xs); }
.g-load-c.l1 { background: var(--seq-200); } .g-load-c.l2 { background: var(--seq-400); }
.g-load-c.l3 { background: var(--warn-solid); } .g-load-c.l4 { background: var(--danger-solid); }
/* event days: shaded band across every row, labelled at the top */
.g-band { position: absolute; top: var(--g-head-h, 0); bottom: 0; background: rgba(99, 102, 241, 0.08); border-left: 2px solid var(--indigo); pointer-events: none; z-index: 0; }
.g-band > span { display: inline-block; margin-top: 2px; margin-left: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--info); background: rgba(255, 255, 255, 0.9); padding: 0 4px; border-radius: var(--r-2xs); white-space: nowrap; }
.g-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.g-leg { display: inline-flex; align-items: center; gap: 6px; }
.g-leg .g-ms { position: static; margin: 0 2px; }
.chip .g-ms.chip-ms { position: static; margin: 0 2px 0 0; }
.g-leg-band { width: 14px; height: 12px; background: rgba(99, 102, 241, 0.14); border-left: 2px solid var(--indigo); }
.g-leg-today { width: 2px; height: 12px; background: var(--danger-solid); }
.g-today { position: absolute; top: var(--g-head-h, 0); bottom: 0; width: 2px; background: var(--danger-solid); z-index: 1; pointer-events: none; }
.g-today::before { content: "Today"; position: absolute; top: 2px; left: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--danger-solid); background: rgba(255, 255, 255, 0.9); padding: 0 3px; border-radius: var(--r-2xs); }
.g-weekend { position: absolute; top: 0; bottom: 0; background: rgba(15, 22, 48, 0.025); pointer-events: none; }
@keyframes grow-x { from { scale: 0 1; } to { scale: 1 1; } }
@media (max-width: 720px) { .gantt-wrap { --g-label-w: 170px; } }
@media (max-width: 480px) { .gantt-wrap { --g-label-w: 128px; } .g-label .av { display: none; } .g-label { padding: 6px 8px; } .gantt { max-height: 64vh; } }

/* ---------------------------------------------------------------- checklist */
.cl-group { margin-bottom: 14px; }
.cl-group-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; user-select: none; }
.cl-group-head h4 { font-size: var(--fs-md); }
.cl-group-head .bar { flex: 0 0 120px; }
.cl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 130px 110px 118px 30px; gap: 10px; align-items: center; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 4px; transition: border-color var(--t-fast), background var(--t-fast); }
.cl-item:hover { border-color: rgba(42, 85, 232, 0.3); }
.cl-item.done .ttl { color: var(--ink-4); text-decoration: line-through; }
.cl-item.overdue .due { color: var(--danger); font-weight: var(--fw-bold); }
.cl-item .ttl { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; }
.cl-item .ttl:hover { color: var(--accent); }
.cl-item .sub { font-size: var(--fs-xs); color: var(--ink-3); }
.cbx { width: 20px; height: 20px; border-radius: var(--r-xs); border: 2px solid var(--field-line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background var(--t-fast), border-color var(--t-fast), scale var(--t-fast) var(--ease-spring); }
.cbx:hover { border-color: var(--accent); }
.cbx.on { background: var(--grad-cta); border-color: transparent; box-shadow: 0 3px 8px -3px rgba(61, 107, 255, 0.6), var(--cta-edge); }
.cbx.on::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }
.cbx:active { scale: 0.85; }
.status-select { border: 0; background: color-mix(in srgb, var(--c) 13%, white); color: color-mix(in srgb, var(--c) 72%, black); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); border-radius: var(--r-xs); padding: 4px 8px; cursor: pointer; width: 100%; }
@media (max-width: 900px) { .cl-item { grid-template-columns: 24px minmax(0, 1fr) 96px 30px; } .cl-item .hide-m { display: none; } }
/* round 5: subtasks under their task, the inline "type it here" row, select boxes on hover */
.cl-item.sub { margin-left: 34px; padding-top: 5px; padding-bottom: 5px; background: var(--surface-sunken); position: relative; }
.cl-item.sub::before { content: ""; position: absolute; left: -20px; top: -7px; width: 14px; height: calc(50% + 7px); border-left: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line-2); border-bottom-left-radius: var(--r-xs); }
.cl-item.sub .ttl { font-weight: var(--fw-medium); }
[data-act=select][aria-pressed="true"] { background: var(--accent-bg); border-color: var(--line-accent); color: var(--accent-ink); }
.cbx.pick { border-radius: var(--r-pill); border-style: dashed; }
.cbx.pick.on { border-style: solid; }
.cl-item.selected { border-color: var(--line-accent); background: var(--accent-bg); }
.cl-fold { width: 18px; height: 18px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; border-radius: var(--r-2xs); flex: none; }
.cl-fold:hover { background: var(--tint-ghost); color: var(--ink); }
.cl-fold svg { width: 14px; height: 14px; }
.cl-ms { color: var(--accent); font-size: var(--fs-xs); }
.cl-addsub { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px dashed var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-3); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; flex: none; opacity: 0; transition: opacity var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std); }
.cl-addsub svg { width: 12px; height: 12px; }
.cl-item:hover .cl-addsub, .cl-addsub:focus-visible { opacity: 1; }
.cl-addsub:hover { color: var(--accent); border-color: var(--line-accent); }
@media (hover: none) { .cl-addsub { opacity: 1; } .cl-addsub span { display: none; } }
.cl-item.adding { grid-template-columns: 24px minmax(0, 1fr) auto; border-style: dashed; border-color: var(--line-accent); background: var(--accent-bg); animation: appear var(--t-med) var(--ease-out) backwards; }
.cl-item.adding.sub { background: var(--accent-bg); }
.cbx.ghost { cursor: default; border-style: dashed; background: transparent; }
.cl-new, .cl-rename { width: 100%; border: 0; background: transparent; font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); padding: 3px 0; outline: none; }
.cl-new::placeholder { color: var(--ink-4); font-weight: var(--fw-medium); }
.cl-rename { background: var(--surface); box-shadow: var(--ring); border-radius: var(--r-xs); padding: 3px 6px; min-width: 0; flex: 1; }
.cl-item .due .dp-field { border-color: transparent; background: transparent; }
.cl-item .due .dp-field:hover { border-color: var(--line-2); background: var(--surface); }
.cl-item.overdue .due .dp-v { color: var(--danger); }
.cl-item.mytask { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 220px) 130px 110px; }
@media (max-width: 900px) { .cl-item.mytask { grid-template-columns: 24px minmax(0, 1fr) 96px; } }

/* ---------------------------------------------------------------- heat map */
.hm { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-sm); }
.hm th { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); padding: 2px 4px; text-align: center; white-space: nowrap; }
.hm th.name { text-align: left; }
.hm td.name { white-space: nowrap; padding-right: 10px; font-weight: var(--fw-semibold); }
.hm td.cell { width: 52px; min-width: 44px; height: 32px; border-radius: var(--r-xs); text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; cursor: pointer; transition: scale var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.hm td.cell:hover { scale: 1.08; box-shadow: var(--shadow-md); }
.hm td.cur { box-shadow: inset 0 0 0 2px rgba(15, 22, 48, 0.35); }
.load-cell { border-radius: var(--r-xs); padding: 6px; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; cursor: pointer; }
.legend-scale { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.legend-scale i { width: 22px; height: 12px; border-radius: var(--r-2xs); display: inline-block; }

/* ---------------------------------------------------------------- modal / drawer / toast */
.backdrop { position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: var(--scrim-blur); backdrop-filter: var(--scrim-blur); z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; animation: fade-in var(--t-med) var(--ease-out) backwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* Leaving: ui.js adds .out, waits for the animation, then removes the node. */
.backdrop.out { animation: fade-out 140ms var(--ease-in) forwards; pointer-events: none; }
.backdrop.out .modal { animation: modal-out 140ms var(--ease-in) forwards; }
.modal { background: var(--glass-overlay); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--highlight); width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: modal-in 340ms var(--ease-pop) backwards; }
.modal.lg { width: min(880px, 100%); }
.modal.xl { width: min(1180px, 100%); }
.modal.sm { width: min(420px, 100%); }
/* dialogs pop up: from a little smaller and lower, with a slight overshoot; they leave quicker */
@keyframes modal-in { from { opacity: 0; scale: 0.92; translate: 0 18px; } 60% { opacity: 1; } }
@keyframes modal-out { to { opacity: 0; scale: 0.96; translate: 0 8px; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 10px; }
.modal-head .sub { font-size: var(--fs-md); color: var(--ink-3); margin-top: 3px; }
.modal-body { padding: 8px 22px 16px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.drawer-back { position: fixed; inset: 0; z-index: var(--z-drawer-back); background: var(--scrim); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); animation: fade-in var(--t-med) var(--ease-out) backwards; }
.drawer-back.out { animation: fade-out 160ms var(--ease-in) forwards; pointer-events: none; }
/* drawers float too: a glass sheet inset from the window's edge */
.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(640px, calc(100vw - 20px)); z-index: var(--z-drawer); background: var(--glass-overlay); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg), var(--highlight); display: flex; flex-direction: column; animation: drawer-in 320ms var(--ease-emph) backwards; }
.drawer.out { animation: drawer-out 160ms var(--ease-in) forwards; pointer-events: none; }
.drawer.wide { width: min(880px, calc(100vw - 20px)); }
@keyframes drawer-in { from { translate: 48px 0; opacity: 0; scale: 0.98; } }
@keyframes drawer-out { to { translate: 32px 0; opacity: 0; } }
.drawer-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; }
.drawer-body { padding: 16px 20px 30px; overflow-y: auto; flex: 1; }
.toasts { position: fixed; bottom: 18px; left: 50%; translate: -50% 0; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: var(--fw-semibold); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 10px; animation: toast-in 300ms var(--ease-pop) backwards; max-width: min(560px, calc(100vw - 32px)); }
.toast.out { animation: toast-out 160ms var(--ease-in) forwards; }
.toast.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-solid); flex: 0 0 8px; }
.toast.err { background: var(--danger-deep); }
.toast.points::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--medal-gold); flex: 0 0 8px; } /* points just earned */
.toast.award::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; clip-path: var(--shape, circle(50%)); background: var(--rim, var(--medal-gold)); } /* a badge just earned, in its tier's shape and metal (the tier looks are shared, see "tier looks"); "medal" is the badge component */
.toast .link-btn { color: var(--link-on-dark); white-space: nowrap; flex: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 14px; scale: 0.94; } }
@keyframes toast-out { to { opacity: 0; translate: 0 6px; } }

/* ---------------------------------------------------------------- command palette */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); background: var(--scrim); -webkit-backdrop-filter: var(--scrim-blur); backdrop-filter: var(--scrim-blur); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade-in var(--t-fast) var(--ease-out) backwards; }
.palette-box { width: min(640px, 100%); background: var(--glass-overlay); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--highlight); overflow: hidden; animation: modal-in 300ms var(--ease-pop) backwards; }
.palette.out { animation: fade-out 140ms var(--ease-in) forwards; pointer-events: none; }
.palette.out .palette-box { animation: modal-out 140ms var(--ease-in) forwards; }
.palette-input { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); }
.palette-input > svg { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 18px; }
.palette-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 15px 0; font: inherit; font-size: var(--fs-lg); outline: none; color: var(--ink); }
.palette-head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 11px 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.palette-head .cnt { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.palette-item mark { background: var(--accent-bg); color: var(--accent-ink); border-radius: var(--r-2xs); padding: 0 1px; }
.palette-item.more .ic { background: transparent; color: var(--ink-3); }
.palette-note { padding: 4px 11px 8px 52px; font-size: var(--fs-xs); color: var(--ink-3); }
.palette-item.more .t { font-weight: var(--fw-medium); color: var(--accent); font-size: var(--fs-sm); }
.palette-foot { display: flex; gap: var(--sp-4); justify-content: flex-end; padding: 8px var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); background: rgba(255, 255, 255, 0.36); }
.palette-foot .kbd { margin: 0 2px 0 0; }
@media (max-width: 640px) { .palette-foot { display: none; } }
.palette-list { max-height: 56vh; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; }
.palette-item.hl { background: var(--tint-hover); }
.palette-item .ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-selected); color: var(--accent); flex: 0 0 30px; }
.palette-item .ic svg { width: 16px; height: 16px; }
.palette-item .t { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.palette-item .s { font-size: var(--fs-sm); color: var(--ink-3); }
.palette-empty { padding: 26px; text-align: center; color: var(--ink-3); }

/* ---------------------------------------------------------------- empty, skeleton, misc */
.empty { text-align: center; padding: 36px 20px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty .art { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--sp-1); background: var(--grad-soft); color: var(--cta-ink); box-shadow: inset 0 0 0 1px var(--line-accent); }
.empty .art svg { width: 24px; height: 24px; }
.empty h3 { color: var(--ink); }
.sk { background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(42, 85, 232, 0.16); border-top-color: var(--accent); animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { rotate: 360deg; } }
/* core/loading.js: the one loading indicator. A 2px bar at the top of the
   window while requests run; it runs to the end and fades when they finish. */
.loadbar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-loadbar); overflow: hidden; pointer-events: none; background: var(--accent-bg); }
.loadbar > i { position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); border-radius: 0 var(--r-pill) var(--r-pill) 0; animation: loadbar 1.1s var(--ease-std) infinite; }
@keyframes loadbar { from { translate: -100% 0; } to { translate: 300% 0; } }
.loadbar.done > i { animation: none; width: 100%; translate: 0 0; }
.loadbar.done { animation: fade-out 300ms var(--ease-in) forwards; }
/* busy(button): the label hides (the width stays), a spinner takes its place */
.btn.is-busy, .btn.is-busy:disabled { position: relative; color: transparent !important; opacity: 1; cursor: progress; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink-2); animation: spin 0.7s linear infinite; }
.btn-primary.is-busy::after, .btn-ok.is-busy::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: var(--on-accent); }
.offline-bar { position: fixed; left: 50%; top: calc(var(--top-h) + var(--sp-2)); translate: -50% 0; z-index: var(--z-toast); max-width: calc(100vw - 32px); padding: 6px var(--sp-4); border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(217, 119, 6, 0.3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); box-shadow: var(--shadow-md); animation: toast-in 220ms var(--ease-out) backwards; }
.loading-page { display: grid; place-items: center; min-height: 40vh; animation: fade-in var(--t-med) 250ms backwards; } /* no spinner flash on fast pages */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info); font-size: var(--fs-md); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.danger { background: var(--danger-bg); color: var(--danger); }
.notice svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }

/* Company profile decks at the top of Templates (round 5, views/profile-ui.js) */
#profile { scroll-margin-top: calc(var(--top-h) + var(--sp-4)); } /* jumped to from ⌘K and Proposals: clear of the sticky top bar */
.profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
.profile-card h3 { font-size: var(--fs-lg); }
.pf-ic { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.pf-ic svg { width: 20px; height: 20px; }
.profile-empty { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; border-style: dashed; }
.profile-empty > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* RSVP Platform card on a project's Overview (round 5, views/rsvp-ui.js) */
.rsvp-link { display: flex; gap: var(--sp-2); }
.rsvp-link .input { flex: 1; min-width: 0; }
.rv-main { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.rv-big { display: flex; align-items: baseline; gap: var(--sp-2); }
.rv-big b { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-none); letter-spacing: var(--ls-tight); }
.rv-big span { font-size: var(--fs-sm); color: var(--ink-3); }
.rv-big em { font-style: normal; font-weight: var(--fw-semibold); color: var(--ok); }
.rv-target { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; padding-bottom: 3px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.rv-stat { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-sunken); min-width: 0; }
.rv-stat b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.rv-stat span { font-size: var(--fs-xs); color: var(--ink-3); }
.rv-stat i { font-style: normal; }
.pc-rsvp { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); white-space: nowrap; }
.pc-rsvp svg { width: 13px; height: 13px; color: var(--ok-strong); }
@media (max-width: 480px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rsvp-link { flex-direction: column; } }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: var(--fs-md); }
.kv dt { color: var(--ink-3); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.kv dd { margin: 0; min-width: 0; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.list-plain li:last-child { border-bottom: 0; }
.dropzone { border: 2px dashed rgba(42, 85, 232, 0.35); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--ink-3); background: rgba(42, 85, 232, 0.03); transition: background var(--t-fast), border-color var(--t-fast); cursor: pointer; }
.dropzone.over { background: rgba(42, 85, 232, 0.1); border-color: var(--accent); }
.dropzone svg { width: 26px; height: 26px; color: var(--accent); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.thumb { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-muted); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(8, 14, 32, 0.6); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity var(--t-fast); }
.thumb:hover .x { opacity: 1; }
.thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 5px; font-size: var(--fs-xs); color: var(--on-accent); background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.file { display: grid; place-items: center; font-size: var(--fs-xs); color: var(--ink-3); padding: 8px; text-align: center; }

/* bank cards */
.bank-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bank-tile { border-radius: var(--r-lg); padding: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std); }
.bank-tile:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); text-decoration: none; }
.bank-tile .ic { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.bank-tile .ic svg { width: 22px; height: 22px; }
.bank-tile .n { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--ink); }
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bcard { border-radius: var(--r-lg); background: var(--glass-card); border: 1px solid var(--glass-card-line); box-shadow: var(--glass-card-shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: background var(--t-med) var(--ease-std), box-shadow var(--t-med) var(--ease-std), translate var(--t-med) var(--ease-out); }
.bcard:hover { background: var(--glass-card-hover); box-shadow: var(--pop); translate: 0 -3px; }
.bcard .img { aspect-ratio: 16 / 9; background: var(--surface-muted); display: grid; place-items: center; color: var(--accent); overflow: hidden; }
.bcard .img img { width: 100%; height: 100%; object-fit: cover; }
.bcard .img svg { width: 34px; height: 34px; opacity: 0.55; }
.bcard .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.bcard .t { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: var(--lh-snug); }
.stars { color: var(--warn-solid); letter-spacing: 1px; font-size: var(--fs-sm); }

/* demo-unit catalog (round 5): spec cards, compare, the item's spec sheet, the printed catalog */
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-3); }
.dcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; transition: box-shadow var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std); }
.dcard:hover, .dcard:focus-visible { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.dcard:has(.dc-pick input:checked) { border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-sm); }
.dc-media { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--grad-soft), var(--surface-sunken); }
.dc-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.dc-ph svg { width: 56px; height: 56px; color: var(--cta-ink); opacity: 0.45; stroke-width: 1.4; }
.dc-cat, .dc-units { position: absolute; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-line); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.dc-cat { left: 10px; top: 10px; }
.dc-units { right: 10px; bottom: 10px; }
.dc-units svg { width: 12px; height: 12px; }
.dc-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; }
.dc-brand { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.dc-name { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); }
.dc-specs { margin: 2px 0 0; display: grid; gap: 5px; }
.dc-specs > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; }
.dc-specs dt { display: grid; place-items: center; color: var(--accent); }
.dc-specs dt svg { width: 15px; height: 15px; }
.dc-specs dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-foot { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-foot .tiny svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.dc-avail { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.dc-avail::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok-solid); }
.dc-avail.held::before { background: var(--warn-solid); }
.dc-avail.busy::before { background: var(--danger-solid); }
.dc-avail.off::before { background: var(--neutral-400); }
.dc-pick { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-line); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease-std); }
.dc-pick input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.dcard:hover .dc-pick, .dcard:focus-within .dc-pick, .dc-pick:has(input:checked) { opacity: 1; }
@media (hover: none) { .dc-pick { opacity: 1; } }
.cmp-bar { position: sticky; bottom: var(--sp-4); z-index: var(--z-sticky); width: fit-content; max-width: 100%; margin: var(--sp-4) auto 0; display: flex; align-items: center; gap: var(--sp-3); padding: 6px 6px 6px 16px; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg), var(--highlight); }
.cmp-bar[hidden] { display: none; }
.cmp-tbl th[scope="row"] { white-space: nowrap; vertical-align: top; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-3); }
.cmp-tbl th[scope="row"] svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--accent); }
.cmp-tbl td { vertical-align: top; min-width: 150px; }
.cmp-head { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cmp-head img, .cmp-head .dc-ph { width: 100%; height: 72px; object-fit: contain; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-sunken); }
.cmp-head .dc-ph svg { width: 30px; height: 30px; }
.spec-panel { margin-bottom: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sp-grid { margin: var(--sp-3) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.sp-grid dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.sp-grid dt svg { width: 14px; height: 14px; color: var(--accent); }
.sp-grid dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.sp-hl { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--grad-soft); }
.sp-hl p { margin: 4px 0 0; }
.sp-facts { margin-top: var(--sp-3); }
.sp-serials { margin: 6px 0 0; padding: var(--sp-2); border-radius: var(--r-xs); background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; }
@media (max-width: 560px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } .cmp-bar { border-radius: var(--r-md); } }
/* the printed catalog: six cards to an A4 page, nothing internal on it */
.catalog-page { position: relative; }
.doc-page .cat-sub { margin: -4px 0 12px; text-align: center; font-size: 11px; color: var(--doc-ink-3); }
.doc-page .dcards.print { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-page .dcards.print .dcard { cursor: default; box-shadow: none; border-color: var(--doc-line); break-inside: avoid; }
.doc-page .dcards.print .dc-media { aspect-ratio: auto; height: 96px; background: var(--doc-section-bg); }
.doc-page .dcards.print .dc-body { padding: 8px 10px; gap: 4px; }
.doc-page .dcards.print .dc-name { font-size: 13px; }
.doc-page .dcards.print .dc-specs dd { font-size: 9.5px; white-space: normal; color: var(--doc-ink-2); }
.doc-page .dcards.print .dc-specs dt svg { width: 12px; height: 12px; }
.doc-page .dc-hl { margin: 2px 0 0; font-size: 9.5px; color: var(--doc-ink-3); }
.doc-page .cat-foot { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; padding-top: 4px; border-top: 1px solid var(--doc-rule); text-align: center; font-size: 9px; color: var(--doc-ink-3); }

/* approval matrix */
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
.matrix th { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); padding: 8px 6px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--surface-sunken); position: sticky; top: 0; }
.matrix th:first-child { text-align: left; }
.matrix td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix td:first-child { text-align: left; }
.ap { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; font-weight: var(--fw-heavy); font-size: var(--fs-md); transition: scale var(--t-fast) var(--ease-spring), background var(--t-fast); }
.ap:hover { scale: 1.1; }
.ap.approved { background: var(--ok-bg); border-color: var(--ok-solid); color: var(--ok); }
.ap.changes { background: var(--danger-bg); border-color: var(--danger-solid); color: var(--danger); }
.ap.na { background: var(--surface-muted); color: var(--neutral-400); border-style: dashed; }
.ap.pending { color: var(--neutral-400); }

/* charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--viz-grid); stroke-width: 1; }
.chart .base-line { stroke: var(--viz-baseline); stroke-width: 1; }
.chart .axis-label { font-size: var(--fs-xs); fill: var(--ink-3); font-family: var(--font-body); }
.chart .val-label { font-size: var(--fs-xs); fill: var(--ink-2); font-weight: var(--fw-bold); font-family: var(--font-body); }
.chart .bar-mark { transform-box: fill-box; transform-origin: bottom; animation: grow-y 420ms var(--ease-out) backwards; }
.chart .bar-mark.h { transform-origin: left; animation-name: grow-x; }
.chart .line-mark { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 640ms var(--ease-out) forwards; }
.chart .area-mark { opacity: 0.12; animation: fade-in 400ms 200ms backwards; }
.chart .donut-seg { transition: opacity var(--t-fast); animation: fade-in 320ms backwards; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .dim { opacity: 0.35; }
@keyframes grow-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tip { position: fixed; z-index: var(--z-tooltip); pointer-events: none; background: var(--surface-inverse); color: var(--on-accent); font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); max-width: 280px; line-height: var(--lh-normal); }
.tip b { font-weight: var(--fw-bold); }
.tip .row { gap: 6px; }
.tip i { width: 8px; height: 8px; border-radius: var(--r-2xs); display: inline-block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.legend i { width: 10px; height: 10px; border-radius: var(--r-2xs); display: inline-block; }

/* login: the blue gradient on the left (the Home header's), the three things it does as glass
   cards; a frosted sign-in card on the cool ground on the right */
/* round 5d: the blue runs edge to edge, and the sign-in card floats on it as frosted glass */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--hero-grad); position: relative; isolation: isolate; overflow: hidden; }
.login-art { position: relative; overflow: visible; isolation: isolate; background: none; color: var(--on-accent); padding: 40px 48px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); }
.login-art::before { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -220px; top: -300px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.05), 0 0 0 91px rgba(255, 255, 255, 0.12); pointer-events: none; }
.login-brand { display: flex; align-items: center; gap: var(--sp-3); }
.login-brand img { width: 52px; height: 52px; border-radius: var(--r-md); box-shadow: 0 12px 24px -10px rgba(10, 14, 36, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3); }
.login-brand b { display: block; font-size: var(--fs-4xl); color: var(--on-accent); margin-bottom: 4px; }
.login-brand span { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.82); }
.login-points { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 480px; }
.login-points li {
  display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-md); line-height: var(--lh-normal); color: rgba(255, 255, 255, 0.88);
  background: var(--glass-on-blue); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-on-blue-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.login-points li:nth-child(2) { margin-left: var(--sp-6); } .login-points li:nth-child(3) { margin-left: var(--sp-3); }
.login-points svg { width: 34px; height: 34px; flex: 0 0 34px; padding: 8px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.login-points b { color: var(--on-accent); font-weight: var(--fw-bold); }
.login-foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); }
.login-foot .ft-logo { height: 26px; width: auto; opacity: 0.9; }
.login-art h1 { color: var(--on-accent); font-size: var(--fs-display); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); max-width: 560px; text-wrap: balance; }
.login-art p { color: rgba(255, 255, 255, 0.86); max-width: 470px; margin-top: 14px; font-size: var(--fs-lg); }
.login-form { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 32px 20px; }
/* two still orbs of the brand's light behind the card, so its glass has something to frost */
.login-form::before, .login-form::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.login-form::before { width: 320px; height: 320px; left: calc(50% - 260px); top: calc(50% - 290px); background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), var(--brand-1) 34%, var(--brand-3) 92%); box-shadow: 0 40px 80px -30px rgba(10, 14, 60, 0.6); }
.login-form::after { width: 190px; height: 190px; left: calc(50% + 80px); top: calc(50% + 100px); background: radial-gradient(circle at 34% 28%, var(--warm-1), var(--warm-2) 60%, var(--warm-3)); box-shadow: 0 30px 60px -24px rgba(120, 40, 10, 0.55); }
.login-card.glass { background: rgba(255, 255, 255, 0.76); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 40px 80px -30px rgba(10, 14, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.login-card { width: min(400px, 100%); padding: var(--sp-6); }
.login-card h2 { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); }
.card.glass { background: var(--glass-overlay); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border-color: var(--glass-line); box-shadow: var(--pop); }
@media (max-width: 900px) {
  .login-wrap { grid-template-columns: minmax(0, 1fr); } .login-art { padding: 28px; min-height: 240px; } .login-art h1 { font-size: var(--fs-4xl); } .login-points { display: none; }
  /* the orbs stay inside the form's band on a phone, so nothing is cut at its top edge */
  .login-form::before { width: 200px; height: 200px; left: -30px; top: 6px; } .login-form::after { width: 130px; height: 130px; left: auto; right: -20px; top: auto; bottom: 10px; }
}

/* ---------------------------------------------------------------- documents (quotation / PR print) */
.doc-page { background: var(--surface); color: var(--doc-ink); width: 210mm; min-height: 297mm; margin: 0 auto 24px; padding: 14mm 14mm 16mm; box-shadow: var(--shadow-lg); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 10.5px; line-height: 1.35; position: relative; }
.doc-page.landscape { width: 297mm; min-height: 210mm; }
.doc-page h1.doc-title { font-family: Arial, sans-serif; color: var(--fokus); font-size: 20px; text-align: center; letter-spacing: 0.04em; margin: 6px 0 12px; font-weight: var(--fw-bold); }
.doc-letter { display: flex; justify-content: space-between; align-items: flex-start; }
.doc-letter img { height: 42px; }
.doc-letter .addr { text-align: right; font-size: 10px; color: var(--doc-ink-2); white-space: pre-line; }
.doc-meta { display: grid; grid-template-columns: 90px 10px minmax(0, 1fr); gap: 2px 0; margin: 10px 0 12px; font-size: 10.5px; }
.doc-meta b { font-weight: var(--fw-bold); }
.doc-tbl { width: 100%; border-collapse: collapse; font-size: 9.8px; }
.doc-tbl th { background: var(--doc-head-bg); border: 1px solid var(--doc-line-strong); padding: 5px 4px; font-weight: var(--fw-bold); text-align: center; }
.doc-tbl td { border: 1px solid var(--doc-line); padding: 3px 5px; vertical-align: top; }
.doc-tbl td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-tbl tr.sec td { font-weight: var(--fw-bold); background: var(--doc-section-bg); }
.doc-tbl tr.sub td { font-weight: var(--fw-bold); font-style: italic; }
.doc-tbl tr.tot td { font-weight: var(--fw-bold); background: var(--doc-total-bg); }
.doc-tbl .desc-lines { white-space: pre-line; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; font-size: 10.5px; }
.doc-sign .line { margin-top: 58px; border-top: 1px solid var(--doc-ink-2); padding-top: 3px; font-weight: var(--fw-bold); }
.doc-foot { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; font-size: 9px; color: var(--doc-ink-3); text-align: center; border-top: 1px solid var(--doc-rule); padding-top: 4px; }
.print-bar { position: sticky; top: var(--top-h); z-index: 5; display: flex; gap: 8px; justify-content: center; padding: 10px; margin-bottom: 10px; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: var(--surface) !important; }
  body::before, body::after, .side, .topbar, .print-bar, .no-print, .toasts { display: none !important; }
  .shell { display: block !important; }
  .content { padding: 0 !important; max-width: none !important; }
  .doc-page { box-shadow: none !important; margin: 0 !important; page-break-after: always; }
  .doc-page.landscape { page: landscape; }
}
@page landscape { size: A4 landscape; margin: 0; }

/* quotation editor */
.qe { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .qe { grid-template-columns: minmax(0, 1fr); } }
.qe-lines { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.ql { display: grid; grid-template-columns: 28px minmax(220px, 1fr) 120px 70px 72px 60px 72px 124px 110px 28px; gap: 6px; align-items: start; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.ql.head { background: var(--surface-sunken); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); align-items: center; position: sticky; top: var(--top-h); z-index: 2; }
.ql.section { background: var(--surface-selected); }
.ql.section textarea { font-weight: var(--fw-bold); }
.ql.note textarea { font-style: italic; color: var(--ink-2); }
.ql textarea, .ql input, .ql select { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: var(--fs-sm); padding: 4px 6px; border-radius: var(--r-xs); color: var(--ink); resize: none; min-height: 28px; }
.ql textarea { field-sizing: content; min-height: 28px; line-height: var(--lh-normal); }
.ql textarea:hover, .ql input:hover, .ql select:hover { border-color: var(--line-2); }
.ql textarea:focus, .ql input:focus, .ql select:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: var(--ring); }
.ql input.n { text-align: right; font-variant-numeric: tabular-nums; }
.ql .amt { text-align: right; font-weight: var(--fw-bold); padding: 5px 4px; font-variant-numeric: tabular-nums; }
.ql .handle { cursor: grab; color: var(--ink-4); padding-top: 6px; display: grid; place-items: center; }
.ql .handle svg { width: 14px; height: 14px; }
.ql.dragover { box-shadow: inset 0 2px 0 var(--accent); }
.ql .sec-sub { text-align: right; font-weight: var(--fw-bold); padding: 5px 4px; }
.ql .margin-low { color: var(--danger); }
.qe-add { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
@media (max-width: 1000px) { .qe-scroll { overflow-x: auto; } .qe-lines { min-width: 980px; } }
.suggest { position: fixed; z-index: var(--z-suggest); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 5px; width: 420px; max-height: 280px; overflow-y: auto; }
.suggest .opt { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-sm); }
.suggest .opt:hover, .suggest .opt.hl { background: rgba(42, 85, 232, 0.1); }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: var(--fs-md); }
.totals .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.totals .big { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.totals .sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 4px 0; }

/* POE builder */
.poe-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .poe-layout { grid-template-columns: minmax(0, 1fr); } }
.poe-nav { position: sticky; top: calc(var(--top-h) + 12px); }
.poe-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.poe-nav a:hover { background: rgba(42, 85, 232, 0.08); text-decoration: none; }
.poe-nav a .cnt { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }
.poe-sec { scroll-margin-top: calc(var(--top-h) + 12px); }
.poe-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; background: var(--surface); margin-bottom: 10px; }
.poe-item.missing { border-color: rgba(234, 179, 8, 0.5); background: var(--warn-bg-soft); }

/* mobile capture page */
.capture { max-width: 480px; margin: 0 auto; padding: 18px 16px 40px; }
.capture .snap { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); border: 2px dashed rgba(42, 85, 232, 0.45); background: rgba(42, 85, 232, 0.05); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.capture .snap img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- reduced motion (tiered) */
@media (prefers-reduced-motion: reduce) {
  .appear, .stagger > *, .modal, .drawer, .pop, .palette-box, .toast { animation-duration: 150ms !important; animation-name: fade-in !important; animation-delay: 0ms !important; }
  .backdrop.out, .backdrop.out .modal, .drawer.out, .drawer-back.out, .toast.out { animation: none !important; }
  .loadbar > i { animation: none; width: 100%; opacity: 0.6; } /* a still bar: something is loading */
  .btn:active:not(:disabled) { scale: 1; }
  .chart .bar-mark, .g-bar { animation: none !important; }
  .chart .draw { animation: none !important; stroke-dashoffset: 0 !important; }
  .bar > i, .side-level .sl-bar > i { transition: none; }
  .stat.link:hover, .pcard:hover, .prow:hover, .bcard:hover, .card.link:hover, a.card:hover, .hero-next:hover, .btn-primary:hover { translate: none; }
  .brand:hover .brand-mark, .hero-next:hover, .btn-light:hover { translate: none; }
  .sk { animation: none; }
}

/* editable page titles (trip, proposal, POE) and small labelled fields */
.page-head > div:first-child:has(.title-edit) { flex: 1 1 420px; min-width: 0; }
.title-edit { font: var(--fw-bold) var(--fs-3xl) var(--font-display) !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; width: 100%; max-width: 820px; min-width: 0; flex: 1 1 auto; text-overflow: ellipsis; }
.title-edit:hover { border-color: var(--line-2) !important; padding-left: 8px !important; }
.title-edit:focus { border-color: rgba(42, 85, 232, 0.5) !important; background: var(--surface) !important; padding-left: 8px !important; }
.mf { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.mf > span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-3); letter-spacing: var(--ls-wide); }

/* two-column page layouts (project overview, client) stack on small screens */
.split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kv { grid-template-columns: 110px minmax(0, 1fr) !important; } }

/* small screens: segmented controls and loose tables scroll instead of widening the page */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 0 0 auto; }
@media (max-width: 720px) {
  .card > table.tbl, .card > div:not(.tbl-wrap) > table.tbl { display: block; overflow-x: auto; }
  .page-head > * { max-width: 100%; min-width: 0; }
}
.proj-side { align-items: flex-end; }
@media (max-width: 720px) { .proj-side { align-items: flex-start; } }

/* ---------------------------------------------------------------- round 2: approvals, access, WhatsApp, rate card */
.approval-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-sm); }
.approval-bar > .row > svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ink-3); }
.approval-bar.s-pending { border-color: rgba(217, 119, 6, 0.35); background: var(--warn-bg-soft); }
.approval-bar.s-pending > .row > svg { color: var(--warn-strong); }
.approval-bar.s-approved { border-color: rgba(22, 163, 74, 0.3); background: var(--ok-bg-soft); }
.approval-bar.s-approved > .row > svg { color: var(--ok-strong); }
.approval-bar.s-changes { border-color: rgba(220, 38, 38, 0.3); background: var(--danger-bg-soft); }
.approval-bar.s-changes > .row > svg { color: var(--danger); }
.wa-btn svg { color: var(--ok-strong); }
.appr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--line); }
.appr-row:last-child { border-bottom: 0; }
.locked-page { max-width: 640px; margin: 6vh auto 0; text-align: center; padding: 34px 28px; }
.locked-page h1 { font-size: var(--fs-3xl); margin-top: 14px; }
.locked-page form { text-align: left; }
.lock-art { width: 56px; height: 56px; margin: 0 auto; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.lock-art svg { width: 28px; height: 28px; }
.center-row { justify-content: center; }
/* locked views (round 5): the page's shape, blurred, behind a frosted lock card */
.locked-wrap { position: relative; min-height: 76vh; }
.locked-ghost { filter: blur(7px) saturate(0.85); opacity: 0.8; pointer-events: none; user-select: none; }
.locked-ghost .gh-line { height: 10px; border-radius: var(--r-pill); background: var(--skeleton); margin: 10px 0; }
.locked-ghost .gh-head { padding: 22px; overflow: hidden; background: radial-gradient(700px 200px at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), var(--surface); }
.locked-ghost .gh-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.locked-ghost .gh-title { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--ink-2); }
.locked-ghost .gh-steps { display: flex; gap: 14%; margin-top: 18px; }
.locked-ghost .gh-steps i { width: 30px; height: 30px; border-radius: 50%; background: var(--skeleton); flex: none; }
.locked-veil { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 7vh 12px 24px; background: linear-gradient(180deg, rgba(242, 244, 250, 0.25), rgba(242, 244, 250, 0.7)); }
.locked-card { width: min(540px, 100%); text-align: center; padding: 30px 28px 26px; }
.locked-card h1 { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); }
.locked-card form.left { text-align: left; }
.lock-badge { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: var(--r-xl); display: grid; place-items: center; background: var(--grad-cta); color: var(--on-accent); box-shadow: 0 12px 28px -12px rgba(61, 107, 255, 0.7), var(--cta-edge); }
.lock-badge svg { width: 30px; height: 30px; }
/* another team's project in a list: a lock and a blurred stand-in */
.masked { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); white-space: nowrap; }
.masked svg { width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.masked .blurred { filter: blur(3.5px); user-select: none; }
/* "← where you came from" in the top bar */
.back-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 30px; padding: 0 12px 0 8px; margin-right: 6px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--glass); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; flex: none; box-shadow: var(--highlight); transition: border-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std); }
.back-chip:hover { border-color: var(--line-hover); color: var(--accent); }
.back-chip svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 720px) { .back-chip span { display: none; } .back-chip { padding: 0 8px; } }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 42px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--neutral-300); transition: background var(--t-fast); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: translate var(--t-fast) var(--ease-out); }
.switch input:checked + i { background: var(--ok-strong); }
.switch input:checked + i::after { translate: 18px 0; }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
@media (max-width: 640px) { .tpl-pick { grid-template-columns: minmax(0, 1fr); } }
.tpl-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.tpl-opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42, 85, 232, 0.14); }
.tpl-card h3 { font-size: var(--fs-lg); }
.tbl.rc td { vertical-align: top; }
.photo-credit { font-size: var(--fs-2xs); color: var(--ink-3); }
.photo-credit a { color: inherit; text-decoration: underline; }
.linked-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.linked-photos figure { margin: 0; }
.linked-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; background: var(--surface-muted); }
.phone-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 22px 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--ok-bg-soft); border: 1px solid rgba(22, 163, 74, 0.25); font-size: var(--fs-md); }
.phone-nudge > svg { color: var(--ok-strong); width: 20px; height: 20px; }
@media (max-width: 720px) { .phone-nudge { margin: 10px 12px 0; } }
.budget-bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--surface-muted); overflow: visible; }
.budget-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); transition: width 600ms var(--ease-out); }
.budget-bar .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(15, 22, 48, 0.35); border-radius: var(--r-2xs); }
.budget-card.s-over { border: 1px solid rgba(220, 38, 38, 0.3); }
.budget-card.s-watch { border: 1px solid rgba(217, 119, 6, 0.3); }
.budget-card .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.od-open { display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--warn); background: var(--warn-bg); border-radius: var(--r-xs); padding: 1px var(--sp-2); }
/* On the day (round 5): event days as a list of checklists, read top to bottom */
.od-week { margin-bottom: var(--sp-6); }
.od-week-h { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.od-week-h span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-3); }
.od-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--sp-3); align-items: start; }
.od-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.od-card.now { border-color: var(--ok-strong); box-shadow: 0 0 0 3px var(--ok-bg), var(--shadow-sm); }
.od-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.od-card-name { margin: 4px 0 2px; font-size: var(--fs-lg); line-height: var(--lh-snug); }
.od-card-name a { color: var(--ink); text-decoration: none; }
.od-card-name a:hover { color: var(--accent); }
.od-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-when { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-3); white-space: nowrap; }
.od-when svg { width: 12px; height: 12px; }
.od-when.now { color: var(--ok); }
.od-when.past { color: var(--ink-4); }
.od-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.od-meter b { color: var(--ink); font-variant-numeric: tabular-nums; }
.od-meter .gap b { color: var(--warn); }
.od-meter .all b { color: var(--ok); }
.od-days { display: flex; gap: var(--sp-1); overflow-x: auto; padding: 0 var(--sp-4) var(--sp-2); }
.od-days button { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; }
.od-days button.on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.od-days button svg { width: 12px; height: 12px; color: var(--ok-strong); }
.od-days button.on svg { color: inherit; }
.od-grp-h { padding: 6px var(--sp-4); background: var(--surface-sunken); border-top: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.od-list { list-style: none; margin: 0; padding: 0; }
.od-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 9px var(--sp-4); border-top: 1px solid var(--line); }
.od-list .od-row:first-child { border-top: 0; }
.od-row.open { background: var(--warn-bg-soft); }
.od-row.hit { box-shadow: inset 3px 0 0 var(--warn-solid); background: var(--warn-bg-soft); }
.od-row.ticked .od-rname { color: var(--ink-3); }
.od-row-main { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 2px var(--sp-3); flex: 1; min-width: 0; align-items: baseline; }
.od-row-main > :nth-child(n + 3) { grid-column: 2; }
.od-rname { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.od-who { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.od-who-p { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-selected); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-ink); }
.od-who-p.crew { background: var(--surface-muted); color: var(--ink-2); }
.od-who-p.out { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); font-weight: var(--fw-medium); }
.od-who-p.clash { background: var(--danger-bg); color: var(--danger); }
.od-who-p.hit { box-shadow: 0 0 0 2px var(--warn-solid); }
.od-who-p svg { width: 12px; height: 12px; }
.cs-tick.sm { width: 20px; height: 20px; margin-top: 0; }
.cs-tick.sm svg { width: 12px; height: 12px; }
.od-unplanned { display: flex; align-items: center; gap: var(--sp-3); margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-3); border-radius: var(--r-md); border: 1px dashed var(--line-2); background: var(--surface-sunken); }
.od-unplanned > svg { width: 22px; height: 22px; flex: none; color: var(--ink-4); }
.od-unplanned > div { flex: 1; min-width: 0; }
.od-none { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.od-card-foot { margin-top: auto; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); }
.od-card-foot a { display: inline-flex; align-items: center; gap: 4px; }
.od-card-foot svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .od-cards { grid-template-columns: minmax(0, 1fr); } .od-row-main { grid-template-columns: minmax(0, 1fr); } .od-row-main > :nth-child(n + 3) { grid-column: 1; } .od-card-head .date-badge { display: none; } }
/* schedule clashes (on-the-day board and project tab) */
.clash-panel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.clash-panel.warn { border-color: rgba(217, 119, 6, 0.35); }
.clash-panel.danger { border-color: var(--line-danger); }
.clash-panel > summary { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; font-size: var(--fs-md); }
.clash-panel > summary::-webkit-details-marker { display: none; }
.clash-panel.warn > summary { background: var(--warn-bg); color: var(--warn); }
.clash-panel.danger > summary { background: var(--danger-bg); color: var(--danger); }
.clash-panel > summary > svg { width: 17px; height: 17px; }
.clash-panel > summary .tiny { margin-left: auto; }
.clash-items { list-style: none; margin: 0; padding: 0; }
.clash-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.clash-item .stage { flex: 0 0 auto; margin-top: 1px; }
.dr-clash-row td:first-child { box-shadow: inset 3px 0 0 var(--danger-solid); }
.pic-chip.clash { border-color: var(--line-danger); background: var(--danger-bg); color: var(--danger); }
.pic-chip.clash > svg { width: 13px; height: 13px; }
/* booking form: live availability */
.clash-box { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.clash-box > svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.clash-box.ok { background: var(--ok-bg); color: var(--ok); }
.clash-box.warn { background: var(--warn-bg); color: var(--warn); }
.clash-box.danger { background: var(--danger-bg); color: var(--danger); }
.clash-box .muted, .clash-box .tiny { color: inherit; opacity: 0.85; }
.clash-list { margin: var(--sp-1) 0; padding-left: var(--sp-4); color: var(--ink); }
.clash-list li + li { margin-top: 3px; }
.clash-list .stage { margin-right: var(--sp-1); }
/* find a person on the board / quick find in the editor */
.od-find { width: 200px; }
.od-find-res { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--warn-bg-soft); border: 1px solid rgba(217, 119, 6, 0.3); }
.od-find-res ul { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); }
.od-find-res > svg, .od-find-res.muted svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--sp-1); }
.qf-kind { flex: 0 0 auto; font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); background: var(--surface-muted); border-radius: var(--r-2xs); padding: 1px 4px; }
@media (max-width: 720px) { .od-find { width: 100%; } }
/* compact roster in the project tab */
.dr-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.dr-roster-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dr-roster-head b { font-family: var(--font-display); font-size: var(--fs-md); }
.dr-roster-row { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: var(--sp-2); padding: 5px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.dr-roster-role { color: var(--ink-3); font-weight: var(--fw-semibold); }
.dr-clash { color: var(--danger); font-weight: var(--fw-bold); }
.dr-grid td { vertical-align: middle; }
.dr-day { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.dr-day.every { border-color: rgba(42, 85, 232, 0.22); }
.dr-day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.dr-day.every .dr-day-head { background: var(--accent-bg); }
.dr-day-head b { font-family: var(--font-display); font-size: var(--fs-md); }
.dr-day .tbl-wrap { border: 0; border-radius: 0; box-shadow: none; }
.dr-day-empty { padding: var(--sp-3) var(--sp-4); }
.od-day { display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-3); margin-right: var(--sp-1); letter-spacing: var(--ls-wide); }
.mt-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mt-row:last-child { border-bottom: 0; }
.mt-row > input[type=checkbox] { margin-top: 9px; }
.mt-row.dismissed { opacity: 0.55; }
.date-badge.sm { width: 44px; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--accent-bg); padding: 4px 0; }
.date-badge.sm b { font-size: var(--fs-lg); line-height: var(--lh-none); }
.date-badge.sm i { font-style: normal; font-size: var(--fs-2xs); text-transform: uppercase; color: var(--ink-3); }
.brief-preview { white-space: pre-wrap; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-base); background: var(--surface-sunken); border-radius: var(--r-md); padding: 14px 16px; margin: 0; max-height: 60vh; overflow: auto; }

/* ---------------------------------------------------------------- member levels (core/points.js) */
/* The five tier looks (round 5), shared by badge medals (.t1–.t5), level
   bands (.b1–.b5: badges, chips, the ladder), the tier marks on badge cards
   and the award toast. Each tier has its own SHAPE and metal, so they read
   apart even without colour: bronze coin · silver scalloped seal · gold
   sunburst · platinum hexagon · diamond gem. --tier-ink is the text on it. */
:is(.medal.t1, .lvl-badge.b1, .lvl-chip.b1, .lvl-band.b1, .tmark.t1, .toast.award-1) { --shape: circle(50%); --rim: linear-gradient(160deg, var(--tier-1a), var(--tier-1b)); --face: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 42%), linear-gradient(135deg, var(--tier-1b), var(--tier-1a)); --tier-ink: var(--tier-1-ink); }
:is(.medal.t2, .lvl-badge.b2, .lvl-chip.b2, .lvl-band.b2, .tmark.t2, .toast.award-2) { --shape: polygon(50.0% 0.0%, 60.0% 6.1%, 71.7% 5.0%, 78.1% 14.8%, 89.1% 18.8%, 90.5% 30.5%, 98.7% 38.9%, 95.0% 50.0%, 98.7% 61.1%, 90.5% 69.5%, 89.1% 81.2%, 78.1% 85.2%, 71.7% 95.0%, 60.0% 93.9%, 50.0% 100.0%, 40.0% 93.9%, 28.3% 95.0%, 21.9% 85.2%, 10.9% 81.2%, 9.5% 69.5%, 1.3% 61.1%, 5.0% 50.0%, 1.3% 38.9%, 9.5% 30.5%, 10.9% 18.8%, 21.9% 14.8%, 28.3% 5.0%, 40.0% 6.1%); --rim: linear-gradient(160deg, var(--tier-2a), var(--tier-2b)); --face: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), transparent 46%), linear-gradient(135deg, var(--tier-2b), var(--tier-2a)); --tier-ink: var(--tier-2-ink); }
:is(.medal.t3, .lvl-badge.b3, .lvl-chip.b3, .lvl-band.b3, .tmark.t3, .toast.award-3) { --shape: polygon(50.0% 0.0%, 62.1% 12.9%, 79.4% 9.5%, 81.6% 27.1%, 97.6% 34.5%, 89.0% 50.0%, 97.6% 65.5%, 81.6% 72.9%, 79.4% 90.5%, 62.1% 87.1%, 50.0% 100.0%, 37.9% 87.1%, 20.6% 90.5%, 18.4% 72.9%, 2.4% 65.5%, 11.0% 50.0%, 2.4% 34.5%, 18.4% 27.1%, 20.6% 9.5%, 37.9% 12.9%); --rim: linear-gradient(160deg, var(--tier-3a), var(--tier-3b)); --face: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75), transparent 44%), linear-gradient(135deg, var(--tier-3b), var(--tier-3a) 60%, var(--tier-3b)); --tier-ink: var(--tier-3-ink); }
:is(.medal.t4, .lvl-badge.b4, .lvl-chip.b4, .lvl-band.b4, .tmark.t4, .toast.award-4) { --shape: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); --rim: linear-gradient(160deg, var(--tier-4a), var(--tier-4b) 50%, var(--tier-4c)); --face: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.9), transparent 46%), linear-gradient(135deg, var(--tier-4a), var(--tier-4b) 55%, var(--tier-4c)); --tier-ink: var(--tier-4-ink); }
:is(.medal.t5, .lvl-badge.b5, .lvl-chip.b5, .lvl-band.b5, .tmark.t5, .toast.award-5) { --shape: polygon(28% 4%, 72% 4%, 98% 33%, 50% 98%, 2% 33%); --rim: linear-gradient(160deg, var(--tier-5b), var(--tier-5c) 50%, var(--tier-5d)); --face: linear-gradient(115deg, var(--tier-5a) 0%, var(--tier-5b) 30%, var(--tier-5a) 46%, var(--tier-5c) 64%, var(--tier-5d) 100%); --tier-ink: var(--tier-5-ink); }

/* One level for the whole platform, in five bands of three levels that
   share the badge metals (round 5). The level badge wears its band's medal. */
.lvl-badge { --s: 44px; width: var(--s); height: var(--s); flex: 0 0 var(--s); position: relative; isolation: isolate; display: grid; place-items: center; color: var(--tier-ink, var(--ink-2)); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.lvl-badge::before, .lvl-badge::after { content: ""; position: absolute; z-index: -1; clip-path: var(--shape, inset(0 round var(--r-md))); }
.lvl-badge::before { inset: 0; background: var(--rim, var(--surface-muted)); }
.lvl-badge::after { inset: 3px; background: var(--face, var(--surface-muted)); }
.lvl-badge.b3, .lvl-badge.b4 { filter: drop-shadow(0 3px 7px rgba(150, 100, 20, 0.22)); }
.lvl-badge.b5 { padding-bottom: 7px; filter: drop-shadow(0 4px 10px rgba(166, 77, 214, 0.35)); }
.lvl-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 2px; border-radius: var(--r-pill); background: var(--surface-muted); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; flex: none; }
.lvl-chip b { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--rim, var(--surface)); color: var(--tier-ink, var(--ink)); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.lvl-chip.sm { padding: 0 2px; }
.lvl-chip:is(.b4, .b5) { background: var(--surface-selected); color: var(--accent-ink); }
.lvl-card { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.lvl-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lvl-name { font-family: var(--font-display); font-size: var(--fs-lg); display: block; }
.lvl-band-name { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.lvl-nums { display: flex; gap: var(--sp-5); margin-left: auto; }
.lvl-nums > div { display: flex; flex-direction: column; align-items: flex-end; }
.lvl-nums b { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); }
/* the ladder, in five metal bands of three levels; each band head shows its medal shape */
.lvl-ladder { margin: var(--sp-4) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.lvl-band { border-radius: var(--r-md); padding: var(--sp-2); background: var(--surface-sunken); border: 1px solid var(--line); min-width: 0; }
.lvl-band.cur { background: var(--surface); border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.lvl-band-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); padding: 2px 2px 6px; }
.lvl-band .tier-dot { width: 14px; height: 14px; flex: none; clip-path: var(--shape, circle(50%)); background: var(--rim); }
.lvl-band:not(.cur, .past) .tier-dot { opacity: 0.55; }
.lvl-band ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lvl-band li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--r-xs); color: var(--ink-3); font-size: var(--fs-xs); min-width: 0; }
.lvl-band li b { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lvl-band li.done { color: var(--ink-2); }
.lvl-band li.done b::after { content: " ✓"; color: var(--ok-strong); }
.lvl-band li.on { background: var(--grad-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(61, 107, 255, 0.25); }
.lvl-band li.on b { color: var(--cta-ink); }
@media (max-width: 720px) { .lvl-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lvl-nums { margin-left: 0; width: 100%; justify-content: space-between; } .lvl-nums > div { align-items: flex-start; } }
.pts-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.pts-rules li { display: flex; gap: var(--sp-3); align-items: baseline; }
.pts-rules li > .num { flex: 0 0 52px; text-align: right; color: var(--medal-gold-ink); }
/* badges: a medal per family, in its tier's look (above); not yet = dashed */
.medal { --s: 38px; width: var(--s); height: var(--s); flex: 0 0 var(--s); position: relative; display: grid; place-items: center; color: var(--tier-ink, var(--ink-4)); }
.medal::before, .medal::after { content: ""; position: absolute; clip-path: var(--shape, circle(50%)); }
.medal::before { inset: 0; background: var(--rim, transparent); }
.medal::after { inset: 3px; background: var(--face, transparent); }
.medal > svg { position: relative; z-index: 1; width: 44%; height: 44%; }
.medal.sm { --s: 28px; }
.medal.lg { --s: 56px; }
.medal.t0 { --shape: none; --rim: transparent; --face: transparent; --tier-ink: var(--ink-4); } /* never borrows a tier look from around it */
.medal.t0::before { clip-path: none; border: 1.5px dashed var(--line-2); border-radius: 50%; }
.medal.t0::after { display: none; }
.medal.t5 { filter: drop-shadow(0 4px 10px rgba(166, 77, 214, 0.35)); }
.medal.t5 > svg { translate: 0 -8%; }
.medal.t5::after { background-size: 220% 100%; transition: background-position 900ms var(--ease-out); }
.medal.t5:hover::after { background-position: 100% 0; }
.medal.t3, .medal.t4 { filter: drop-shadow(0 3px 7px rgba(150, 100, 20, 0.22)); }
.medal-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-3); }
.medal-item { display: flex; align-items: center; gap: var(--sp-2); }
.medal-item > span:last-child { display: flex; flex-direction: column; line-height: var(--lh-tight); }
.bdg-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.bdg-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.bdg-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
/* the road of tiers on a badge card: each tier's shape with its tally; earned ones in metal */
.bdg-tiers { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: var(--sp-2); }
.tmark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tmark > i { width: 13px; height: 13px; flex: none; clip-path: var(--shape, circle(50%)); background: var(--rim); opacity: 0.3; filter: grayscale(0.9); }
.tmark.on { color: var(--ink-2); }
.tmark.on > i { opacity: 1; filter: none; }
.tmark.next { color: var(--ink-3); }
.tmark.next > i { opacity: 0.6; filter: grayscale(0.4); }
.pts-rules li > .medal { margin-left: 26px; }
/* sidebar: your level under your name, with a thin line to the next one */
.side-foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.side-level { display: flex; flex-direction: column; gap: 5px; color: var(--side-ink-2); font-size: var(--fs-xs); text-decoration: none; border-radius: var(--r-xs); }
.side-level:hover, .side-level:focus-visible { color: var(--side-ink-strong); }
.side-level .sl-text { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.side-level .sl-text b { color: var(--side-ink-strong); font-weight: var(--fw-semibold); }
.side-level .sl-to { margin-left: auto; padding-left: var(--sp-2); }
.side-level .sl-bar { height: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; position: relative; }
.side-level .sl-bar > i { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; scale: var(--p, 0) 1; background: var(--grad-brand-x); border-radius: inherit; transition: scale 480ms var(--ease-out); }
body.side-collapsed .side-level .sl-text { display: none; }

/* ---------------------------------------------------------------- contribution recap (views/recap.js) */
.rc-label { font-family: var(--font-display); font-size: var(--fs-lg); min-width: 150px; text-align: center; }
.rc-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rc-lead { font-size: var(--fs-base); line-height: var(--lh-normal); }
.rc-facts { margin: var(--sp-2) 0 0; padding-left: 1.1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-1) var(--sp-5); font-size: var(--fs-sm); color: var(--ink-2); }
.rc-standouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.rc-group { min-width: 0; }

/* ---------------------------------------------------------------- my points (views/points.js) */
.count-lg { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.pts-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pts-cat { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; align-items: center; gap: var(--sp-3); width: 100%; padding: 5px var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pts-cat:hover { background: var(--surface-hover); }
.pts-cat.on { background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--line-accent); }
.pts-cat .num { text-align: right; }
.pts-feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pts-feed li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.pts-feed li:last-child { border-bottom: 0; }
.pts-plus { flex: 0 0 44px; text-align: right; color: var(--ok); font-size: var(--fs-sm); }
.pts-plus .tiny { color: var(--ink-3); margin-left: 2px; }
.pts-feed li.voided .pts-plus, .pts-feed li.voided .strong { color: var(--ink-4); text-decoration: line-through; }
.pts-back { color: var(--warn-strong); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------- leaderboard (views/leaderboard.js) */
.lbx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); } /* rows shrink; long lines ellipsize */
.lbx li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); }
.lbx li:last-child { border-bottom: 0; }
.lbx li.me { background: var(--surface-selected); border-radius: var(--r-sm); }
.lbx .lb-rank { width: 26px; height: 26px; flex-basis: 26px; font-variant-numeric: tabular-nums; }
.lbx-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lbx-who a { color: var(--ink); text-decoration: none; }
.lbx-who a:hover { color: var(--accent); text-decoration: underline; }
.lbx-bar { height: 4px; margin-top: var(--sp-1); max-width: 360px; }
.lbx-pts { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 56px; white-space: nowrap; font-size: var(--fs-lg); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.lbx-badges { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--medal-gold-ink); }
.lbx-badges svg { width: 13px; height: 13px; }
.lbx-team { width: 12px; height: 32px; border-radius: var(--r-xs); background: var(--c); flex: 0 0 12px; }
.lbx-me { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-muted); font-size: var(--fs-sm); color: var(--ink-2); }
.lbx-me svg { width: 16px; height: 16px; color: var(--medal-gold-ink); flex: none; }

/* ---------------------------------------------------------------- banks: contributions */
.bk-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .bk-top { grid-template-columns: minmax(0, 1fr); } }
.bk-me { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.bk-level { display: flex; align-items: center; gap: var(--sp-3); }
.bk-level b { font-family: var(--font-display); font-size: var(--fs-lg); }
.bk-pts { display: flex; gap: var(--sp-6); }
.bk-pts > div { display: flex; flex-direction: column; align-items: flex-end; }
.bk-pts .count { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.quests li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: background var(--t-med), border-color var(--t-med); }
.quests li.done { background: var(--ok-bg-soft); border-color: rgba(22, 163, 74, 0.25); }
.q-ic { width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--surface-selected); color: var(--accent); flex: 0 0 28px; }
.quests li.done .q-ic { background: var(--ok-solid); color: var(--on-accent); }
.q-ic svg { width: 15px; height: 15px; }
.q-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.q-title { color: var(--ink); text-decoration: none; display: block; } /* daily quests on Home: the title opens where the work is */
.q-title:hover { color: var(--accent); text-decoration: underline; }
.quests li.done .q-title { color: var(--ink-2); }
.seg.seg-sm button { height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.lb { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lb li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.lb li.me { background: var(--surface-selected); }
.lb-rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); background: var(--surface-muted); flex: 0 0 22px; }
.lb-rank.r1 { background: var(--medal-gold); color: var(--medal-gold-ink); } .lb-rank.r2 { background: var(--medal-silver); color: var(--medal-silver-ink); } .lb-rank.r3 { background: var(--medal-bronze); color: var(--medal-bronze-ink); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.feed li { display: flex; align-items: center; gap: var(--sp-2); }
.wanted { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.wanted-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: border-color var(--t-fast), translate var(--t-fast) var(--ease-out); }
.wanted-item:hover { border-color: var(--line-hover); text-decoration: none; translate: 0 -1px; }
.wanted-item > span.grow { display: flex; flex-direction: column; }
.wanted-item > svg { width: 16px; height: 16px; color: var(--ink-4); }
.ring-sm { --p: 0; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; background: conic-gradient(var(--warn-solid) calc(var(--p) * 1%), var(--surface-muted) 0); }
.ring-sm > span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--ink-2); }
.bc-meter { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.bc-meter i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-muted); position: relative; overflow: hidden; }
.bc-meter i::after { content: ""; position: absolute; inset: 0; transform-origin: left; scale: var(--p, 0) 1; border-radius: var(--r-pill); background: var(--danger-solid-soft); transition: scale 480ms var(--ease-out); }
.bc-meter.mid i::after { background: var(--warn-solid); } .bc-meter.good i::after { background: var(--ok-solid); }
.bc-meter span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.bn-complete { padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-sunken); margin-bottom: var(--sp-3); }
.bn-complete.low .bar > i { background: var(--danger-solid-soft); } .bn-complete.mid .bar > i { background: var(--warn-solid); } .bn-complete.good .bar > i { background: var(--ok-solid); }
.bn-add { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-3); }
.bn-add textarea { min-height: 44px !important; }
.bn-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.bn-list li { display: flex; gap: var(--sp-2); }
/* bank form: quick fill, completeness, category chips */
.bf-paste { display: grid; gap: var(--sp-1); padding: var(--sp-3); border: 1px dashed var(--line-hover); border-radius: var(--r-md); background: var(--surface-selected); margin-bottom: var(--sp-3); }
.bf-paste label { display: flex; align-items: center; gap: var(--sp-1); color: var(--accent-ink); }
.bf-paste label svg { width: 15px; height: 15px; }
.bf-paste textarea { border: 0; background: transparent; resize: vertical; font: inherit; font-size: var(--fs-sm); color: var(--ink); outline: none; min-height: 40px; }
.bf-meter { margin-bottom: var(--sp-3); }
.bf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.bf-chips .chip { height: var(--ctl-h-xs); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.bf-other { width: 150px !important; min-height: var(--ctl-h-xs) !important; }
.bf-more { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.bf-more > summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-md); list-style: none; display: flex; align-items: center; gap: var(--sp-2); }
.bf-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: -45deg; transition: rotate var(--t-fast) var(--ease-out); }
.bf-more[open] > summary::before { rotate: 45deg; }
.bf-more > summary::-webkit-details-marker { display: none; }
.bf-filled { animation: bf-flash 1.4s var(--ease-out); }
@keyframes bf-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35); border-color: var(--ok-solid); } 100% { box-shadow: none; } }
[data-dupes] { color: var(--warn); }
[data-dupes] svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------------------------------------------------------------- crew / manpower */
.crew-tabs { margin-bottom: var(--sp-4); }
.crew-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.crew-tabs a svg { width: 15px; height: 15px; }
.cr-scroll { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overscroll-behavior-x: contain; }
.cr-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--fs-sm); }
.cr-grid th, .cr-grid td { border-bottom: 1px solid var(--line); padding: 0; }
.cr-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-sunken); font-weight: var(--fw-semibold); color: var(--ink-3); height: 40px; min-width: 30px; text-align: center; }
.cr-grid thead th span, .cr-grid thead th b { display: block; line-height: var(--lh-tight); }
.cr-grid thead th b { color: var(--ink-2); font-size: var(--fs-sm); }
.cr-grid thead th.mon { box-shadow: inset 1px 0 0 var(--line-2); }
.cr-grid thead th.now { background: var(--accent-bg); color: var(--accent-ink); }
.cr-grid thead th.now b { color: var(--accent-ink); }
.cr-grid th.we, .cr-grid td.we { background-color: var(--surface-sunken); }
.cr-grid .cr-name { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 220px; max-width: 240px; text-align: left; border-right: 1px solid var(--line); }
.cr-grid thead .cr-name { z-index: 3; background: var(--surface-sunken); padding: 0 var(--sp-3); }
.cr-person { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-3); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.cr-person:hover b { color: var(--accent); }
.cr-person .grow { display: flex; flex-direction: column; }
.cr-cell { height: 38px; min-width: 30px; text-align: center; vertical-align: middle; border-left: 1px solid rgba(15, 22, 48, 0.04); }
.cr-cell > span { display: inline-grid; place-items: center; width: calc(100% - 4px); height: 26px; border-radius: var(--r-xs); font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.cr-cell.free { cursor: copy; }
.cr-cell.free:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--line-hover); }
.cr-cell.now { background: rgba(42, 85, 232, 0.04); box-shadow: inset 1px 0 0 var(--line-accent), inset -1px 0 0 var(--line-accent); }
.cr-cell.booked > span { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--line-danger); }
.cr-cell.held > span { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3); }
.cr-cell.planned > span { background: var(--surface-selected); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line-accent); }
.cr-cell.done > span { background: var(--surface-muted); color: var(--ink-3); }
.cr-cell.double > span { background: var(--danger-solid); color: var(--on-accent); box-shadow: none; }
.cr-cell[data-project] { cursor: pointer; }
.cr-grid .cr-load { min-width: 120px; padding: 0 var(--sp-3); text-align: left; border-left: 1px solid var(--line); }
.cr-loadbar { height: 6px; border-radius: var(--r-pill); background: var(--surface-muted); overflow: hidden; margin-bottom: 3px; }
.cr-loadbar > i { display: block; height: 100%; transform-origin: left; scale: var(--p, 0) 1; background: var(--ok-solid); border-radius: var(--r-pill); transition: scale 480ms var(--ease-out); }
.cr-loadbar.mid > i { background: var(--warn-solid); } .cr-loadbar.hi > i { background: var(--danger-solid); }
.cr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.cr-key { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-2xs); margin-left: var(--sp-1); }
.cr-key.booked { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--line-danger); } .cr-key.held { background: var(--warn-bg); }
.cr-key.planned { background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--line-accent); } .cr-key.double { background: var(--danger-solid); }
.cr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.cr-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t-med), border-color var(--t-med), translate var(--t-med) var(--ease-out); }
.cr-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-hover); translate: 0 -2px; }
.cr-today { font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 2px var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; background: var(--ok-bg); color: var(--ok); }
.cr-today.booked { background: var(--danger-bg); color: var(--danger); } .cr-today.held { background: var(--warn-bg); color: var(--warn); } .cr-today.planned { background: var(--surface-selected); color: var(--accent-ink); }
.cr-rate { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cr-week i { height: 26px; border-radius: var(--r-xs); display: grid; place-items: center; font-style: normal; font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--ink-3); background: var(--surface-sunken); }
.cr-week i.booked { background: var(--danger-bg); color: var(--danger); } .cr-week i.held { background: var(--warn-bg); color: var(--warn); } .cr-week i.planned { background: var(--surface-selected); color: var(--accent-ink); }
@media (max-width: 720px) { .cr-grid .cr-name { min-width: 150px; max-width: 150px; } .cr-grid .cr-load { min-width: 90px; } }
/* ⋯ next to a name (round 5): the same menu as a right-click, shown on hover, focus and touch screens */
.cr-name-in { display: flex; align-items: center; min-width: 0; }
.cr-name-in .cr-person { flex: 1; min-width: 0; }
.cr-person .ellipsis { max-width: 100%; }
.cr-more { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: var(--sp-1); border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.cr-more svg { width: 16px; height: 16px; }
.cr-more:hover { background: var(--tint-hover); color: var(--ink); }
.cr-more.on, tr:hover .cr-more, .cr-more:focus-visible { opacity: 1; }
@media (hover: none) { .cr-more { opacity: 1; } }
.cr-cell, .cr-person, .cr-card, .mc-bar, .mc-day, .mc-people li { -webkit-touch-callout: none; } /* press and hold opens our menu, not the phone's */

/* ---------------------------------------------------------------- crew calendar: events as bars (round 5, item 18) */
.bk-softbooked { --c: var(--warn-strong); } .bk-on_check { --c: var(--tone-violet); } .bk-booked { --c: var(--ok-strong); } .bk-done { --c: var(--tone-teal); }
.mc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
.mc-nav { display: flex; align-items: center; gap: var(--sp-2); }
.mc-nav h2 { min-width: 170px; margin: 0; text-align: center; font-size: var(--fs-xl); }
.mc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }
.mc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mc-legend b { color: var(--ink); }
.mc-legend .mc-sum { margin-right: var(--sp-2); color: var(--ink-2); }
.mc-legend .mc-hint-touch { display: none; }
@media (hover: none) { .mc-legend .mc-hint-mouse { display: none; } .mc-legend .mc-hint-touch { display: inline-flex; } }
.mc-key { display: inline-block; width: 18px; height: 10px; border-radius: var(--r-2xs); border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.mc-key-clash { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); }
.mc-key-clash svg { width: 13px; height: 13px; }
.mc { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); min-width: 0; }
.mc-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.mc-dow span { padding: 7px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.mc-week { display: grid; min-height: 120px; border-bottom: 1px solid var(--line); }
.mc-week:last-child { border-bottom: 0; }
.mc-days, .mc-bars { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mc-day { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; padding: 6px var(--sp-2); border: 0; border-right: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mc-day:last-child { border-right: 0; }
.mc-day.we { background: var(--surface-sunken); }
.mc-day.out { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); }
.mc-day.out .mc-n { color: var(--ink-4); }
.mc-day:hover { background: var(--tint-hover); }
.mc-day.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.mc-day:focus-visible, .mc-bar:focus-visible, .mc-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 4px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); }
.mc-day.today .mc-n { background: var(--accent); color: var(--on-accent); }
.mc-bars { grid-template-rows: repeat(3, 24px) 20px; row-gap: 3px; align-content: start; padding: 32px 0 6px; pointer-events: none; }
.mc-bar { pointer-events: auto; display: flex; align-items: center; gap: 4px; min-width: 0; height: 24px; margin: 0 4px; padding: 0 4px 0 6px; border: 0; border-left: 3px solid var(--c); border-radius: var(--r-xs); background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: color-mix(in srgb, var(--c) 68%, var(--ink)); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: left; cursor: pointer; }
.mc-bar:hover { background: color-mix(in srgb, var(--c) 25%, var(--surface)); }
.mc-bar.cont-l { margin-left: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mc-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mc-bar.on { box-shadow: 0 0 0 2px var(--c); }
.mc-bar > svg { flex: none; width: 13px; height: 13px; color: var(--danger); }
.mc-bar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-bar-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface); color: inherit; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.mc-more { pointer-events: auto; justify-self: start; margin: 0 6px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.mc-side { padding: var(--sp-4); min-width: 0; }
.mc-side-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.mc-side-h h3 { margin: 0; }
.mc-sd + .mc-sd { margin-top: var(--sp-4); }
.mc-sd h4 { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0 0 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.mc-sd h4 span { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-3); }
.mc-ev { margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.mc-ev.hl { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.mc-ev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); }
.mc-ev-h a, .mc-ev-h b { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.mc-ev-h a:hover { color: var(--accent); }
.mc-dot { flex: none; width: 10px; height: 10px; border-radius: var(--r-2xs); background: var(--c); }
.mc-people { display: grid; grid-template-columns: minmax(0, 1fr); margin: 6px 0 0; padding: 0; list-style: none; }
.mc-people li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 5px 0; border-top: 1px solid var(--line); }
.mc-people .grow { display: flex; flex-direction: column; min-width: 0; }
.mc-people b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .mc-nav h2 { min-width: 0; font-size: var(--fs-lg); }
  .mc-dow span { padding: 6px 2px; text-align: center; letter-spacing: 0; }
  .mc-week { min-height: 76px; }
  .mc-day { align-items: center; padding: 4px 2px; }
  .mc-n { min-width: 20px; height: 20px; font-size: var(--fs-xs); }
  .mc-bars { grid-template-rows: repeat(3, 6px) 16px; padding-top: 30px; }
  .mc-bar { height: 6px; margin: 0 2px; padding: 0; border-left-width: 0; border-radius: var(--r-pill); background: var(--c); }
  .mc-bar.cont-l, .mc-bar.cont-r { border-radius: 0; }
  .mc-bar > * { display: none; }
  .mc-more { margin: 0 2px; font-size: var(--fs-2xs); }
  .mc-more-w { display: none; }
}

/* ---------------------------------------------------------------- booking form and WhatsApp message (round 5, item 20) */
.bk-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.bk-contact svg { width: 15px; height: 15px; color: var(--ok-strong); }
.bk-contact .input { width: 200px; max-width: 100%; }
.bk-new { padding: var(--sp-3); border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-sunken); }
.bk-new-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.bk-new-h svg { width: 15px; height: 15px; color: var(--accent); }
.wa-book { display: flex; flex-direction: column; gap: var(--sp-3); }
.wa-book textarea { min-height: 230px; font-family: inherit; line-height: var(--lh-normal); }
.wa-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.wa-to svg { width: 16px; height: 16px; color: var(--ok-strong); }
.wa-err { font-size: var(--fs-sm); color: var(--danger); }

/* ---------------------------------------------------------------- travel search (round 5, item 21) */
.trip-leg { margin-bottom: var(--sp-2); padding: var(--sp-3); }
.trip-more { padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
.trip-stay .trip-links { flex-basis: 100%; }
.trip-plan .tiny svg, .tq .tiny svg { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }

/* ---------------------------------------------------------------- on the day: call sheet + editor */
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.cs-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--fokus); }
.cs-kicker { text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-bold); }
.cs-title h2 { font-size: var(--fs-2xl); margin-top: 2px; }
.cs-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); }
.cs-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cs-meta svg { width: 15px; height: 15px; color: var(--ink-3); }
.cs-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cs-stats > span { display: inline-flex; align-items: center; gap: 4px; height: var(--pill-h); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--surface-muted); font-size: var(--fs-xs); color: var(--ink-2); }
.cs-stats b { font-variant-numeric: tabular-nums; }
.cs-stats .warn { background: var(--warn-bg); color: var(--warn); } .cs-stats .danger { background: var(--danger-bg); color: var(--danger); } .cs-stats .ok { background: var(--ok-bg); color: var(--ok); }
.cs-stats svg { width: 13px; height: 13px; }
.cs-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs-days { display: flex; gap: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-3); padding-bottom: 2px; }
.cs-days button { flex: 0 0 auto; height: var(--ctl-h-sm); padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.cs-days button:hover { border-color: var(--line-hover); }
.cs-days button.on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.cs-days button:focus-visible { outline: none; box-shadow: var(--ring); }
.cs-groups { columns: 2 380px; column-gap: var(--sp-3); }
.cs-groups > .cs-group { break-inside: avoid; margin-bottom: var(--sp-3); }
.cs-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cs-group h3 { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.cs-group h3 span { font-variant-numeric: tabular-nums; }
.cs-group ul { list-style: none; margin: 0; padding: 0; }
.cs-role { display: grid; grid-template-columns: minmax(120px, 36%) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); align-items: start; }
.cs-role:first-child { border-top: 0; }
.cs-role.open { background: var(--warn-bg-soft); }
.cs-role.issue { box-shadow: inset 3px 0 0 var(--danger-solid); }
.cs-role-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-role-name b { font-size: var(--fs-sm); }
.cs-day { align-self: flex-start; font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--info); background: var(--info-bg); padding: 1px 6px; border-radius: var(--r-pill); }
.cs-note { font-size: var(--fs-xs); color: var(--ink-3); }
.cs-people { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; min-width: 0; }
.cs-open { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warn); margin-right: var(--sp-1); }
/* the day's checklist (round 5): tick each role once it's handled, per day */
.cs-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); min-width: min(320px, 100%); }
.cs-progress { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.cs-progress b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.cs-progress b svg { width: 15px; height: 15px; color: var(--ok-strong); }
.cs-progress.all { background: var(--ok-bg-soft); border-color: var(--ok-bg); }
.cs-role:has(> .cs-tick) { grid-template-columns: 26px minmax(110px, 34%) minmax(0, 1fr); }
.cs-tick { width: 24px; height: 24px; margin-top: -2px; border-radius: 50%; border: 2px solid var(--field-line-strong); background: var(--surface); display: grid; place-items: center; padding: 0; color: transparent; cursor: pointer; transition: background var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std), scale var(--t-fast) var(--ease-out); }
.cs-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.cs-tick:hover:not(:disabled) { border-color: var(--accent); color: var(--field-line-strong); }
.cs-tick.on { background: var(--grad-brand); border-color: transparent; color: var(--on-accent); }
.cs-tick:active:not(:disabled) { scale: 0.86; }
.cs-tick:disabled { cursor: default; }
.cs-tick:focus-visible, .cs-dd:focus-visible { outline: none; box-shadow: var(--ring); }
.cs-role.ticked .cs-role-name b { color: var(--ink-3); }
.cs-by { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ok); }
.cs-by svg { width: 12px; height: 12px; }
.cs-dticks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs-dd { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--ink-3); cursor: pointer; }
.cs-dd svg { width: 11px; height: 11px; stroke-width: 3; }
.cs-dd.on { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.cs-dd:disabled { cursor: default; }
.cs-dcount { font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; opacity: 0.75; }
.cs-dcount.all { color: var(--ok-strong); opacity: 1; }
.cs-days button.on .cs-dcount.all { color: inherit; }
.as-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-2) 0 3px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 100%; animation: chip-in 220ms var(--ease-out) both; }
.as-chip.out { padding: 0 var(--sp-2); background: var(--surface-sunken); border-style: dashed; font-weight: var(--fw-medium); color: var(--ink-2); }
.as-chip.crew { border-color: var(--line-accent); background: var(--surface-selected); }
.as-chip.clash { border-color: var(--line-danger); background: var(--danger-bg); color: var(--danger); }
.as-chip > svg { width: 13px; height: 13px; }
.as-chip .av { --s: 22px; }
.as-ini { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: var(--fs-3xs); font-weight: var(--fw-bold); flex: 0 0 22px; }
.as-role { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--accent-ink); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.as-wa, .as-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0; }
.as-wa:hover { color: var(--ok-strong); background: var(--ok-bg); }
.as-x:hover { color: var(--danger); background: var(--danger-bg); }
.as-wa svg, .as-x svg { width: 13px; height: 13px; }
@keyframes chip-in { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }
.er-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--accent-bg); color: var(--accent-ink); }
.er-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-bottom: var(--sp-3); }
.er-sec.every { border-color: var(--line-accent); }
.er-sec-head { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); }
.er-sec-head b { font-family: var(--font-display); }
.er-row { display: grid; grid-template-columns: minmax(150px, 22%) minmax(0, 1fr) minmax(140px, 20%) 28px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-1); border-top: 1px solid var(--line); }
.er-row:first-of-type { border-top: 0; }
.er-row.issue { box-shadow: inset 3px 0 0 var(--danger-solid); padding-left: var(--sp-3); }
.er-role { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.er-people { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; min-width: 0; }
.er-add { border-style: dashed; }
.er-addrole { margin-top: var(--sp-2); }
.er-empty { padding: var(--sp-2) var(--sp-1); }
.er-save { position: sticky; bottom: var(--sp-3); z-index: 5; display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-inverse); color: var(--on-accent); box-shadow: var(--shadow-lg); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity var(--t-med), translate var(--t-med) var(--ease-out); }
.er-save.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.er-save > span { margin-right: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.er-save .btn:not(.btn-primary) { background: transparent; color: var(--on-accent); border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
@media (max-width: 720px) {
  .cs-groups { columns: 1; }
  .cs-role { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .cs-role:has(> .cs-tick) { grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--sp-3); }
  .cs-role:has(> .cs-tick) > .cs-people { grid-column: 2; }
  .cs-side { align-items: stretch; min-width: 0; width: 100%; }
  .er-row { grid-template-columns: minmax(0, 1fr) 28px; }
  .er-row .er-people, .er-row .er-note { grid-column: 1 / -1; }
}
@media print {
  .cs-actions, .cs-days, .clash-panel, .er-save, .proj-tabs, .tabs, [data-phone-nudge] { display: none !important; }
  .cs-group, .cs-head { box-shadow: none; break-inside: avoid; }
}
.od-person.crew { background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--line-accent); }
.od-crew { color: var(--accent-ink); }
/* crew profile in the bank drawer */
.crew-prof { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--sp-3); }
.cp-rates { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); }
.cp-rates b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); }
.cp-strip { display: grid; grid-template-columns: repeat(28, 1fr); gap: 2px; }
.cp-strip i { height: 18px; border-radius: var(--r-2xs); background: var(--surface-muted); }
.cp-strip i:nth-child(7n + 1) { box-shadow: inset 1px 0 0 var(--line-2); }
.cp-strip i.booked { background: var(--danger-solid-soft); } .cp-strip i.held { background: var(--warn-solid); } .cp-strip i.planned { background: var(--blue); } .cp-strip i.done { background: var(--neutral-300); }
.cp-jobs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.cp-jobs li { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------------------------------------------------------------- invite by email */
.inv-steps { list-style: none; display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; }
.inv-steps li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); font-weight: var(--fw-semibold); }
.inv-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--line-2); margin-right: var(--sp-1); }
.inv-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-muted); font-size: var(--fs-xs); transition: background var(--t-med), color var(--t-med); }
.inv-steps li.on { color: var(--ink); } .inv-steps li.on b { background: var(--accent); color: var(--on-accent); }
.inv-list { max-height: 48vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.inv-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.inv-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(180px, 38%) 130px; gap: var(--sp-3); align-items: center; padding: 6px var(--sp-3); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.inv-row.sel { background: var(--surface-hover); }
.inv-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.inv-st { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-align: right; color: var(--ink-3); }
.inv-st.in { color: var(--ok); } .inv-st.invited { color: var(--info); } .inv-st.noemail { color: var(--warn); }
.inv-paste { margin-bottom: var(--sp-3); }
.inv-preview { width: 100%; height: min(52vh, 420px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ground); }
.empty-ok { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) 0 var(--sp-3); text-align: center; }
.empty-ok > svg { width: 38px; height: 38px; color: var(--on-accent); background: var(--ok-solid); border-radius: 50%; padding: 8px; animation: pop-in 360ms var(--ease-spring) both; }
.inv-res { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.inv-res li { display: flex; align-items: center; gap: var(--sp-2); }
.inv-res li.ok > svg { color: var(--ok-strong); } .inv-res li.bad > svg { color: var(--danger); }
.inv-res svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .inv-row { grid-template-columns: 20px minmax(0, 1fr); } .inv-row .inv-email, .inv-row .inv-st { grid-column: 2; text-align: left; } }