/* @foundation/ui design tokens — CSS custom-property mirror of tokens.js.
   COMBINATION B "Ivory Study" — The Study's ceremonial structure in the
   Broadsheet's warm cream + gold palette; Playfair Display type. */

:root {
  /* --- Viewport insets ----------------------------------------------------
     ONE owner for the iPhone home-indicator allowance. It used to be applied
     in two places at once (the chat wrapper AND the composer), so the phone
     double-counted it and left ~86px of dead cream under the message box.
     Anything that needs the allowance reads this, and nothing adds env() itself.

     --cc-kb is how much of the layout viewport an on-screen keyboard is
     covering, published by useKeyboardInset(). Zero on desktop and whenever the
     keyboard is down. */
  --cc-kb: 0px;
  --cc-safe-bottom: env(safe-area-inset-bottom, 0px);

  --cc-bg:         #f4f1e9;
  --cc-bg-soft:    #ece7d9;
  --cc-bg-deep:    #e3dcc9;
  --cc-bg-thread: #f1ead7;
  --cc-card:       #fbfaf4;

  --cc-navy:        #171410;
  --cc-navy-soft:   #272219;
  --cc-navy-medium: #332c20;
  --cc-navy-deep:   #0d0b07;

  /* A real navy blue for the "you" chat bubble — the --cc-navy role is a dark
     neutral in this palette (near-black), so the sender bubble needs its own
     genuinely-blue fill that carries white text on both grounds. */
  --cc-chat-mine:   #33466b;

  /* Meeting scratchpad "pens" — the two members write in one shared pad, so
     authorship has to read at a glance without a label: Alice in a dark
     neutral grey, Bob in a dark navy. Both must clear text contrast on
     the cream card, and lighten (never invert) on the dark ground. */
  --cc-pen-member-a:      #4a4a4a;
  --cc-pen-member-b:    #1e3a5f;
  --cc-pen-member-a-bg:   rgba(74, 74, 74, 0.05);
  --cc-pen-member-b-bg: rgba(30, 58, 95, 0.05);

  --cc-gold:       #b07a24;
  --cc-gold-bold:  #8f5f14;
  /* The accent as a FILL that carries WHITE content (the demo banner, the
     primary action button on Proposals/Brainstorm/Meetings/agent chat).
     --cc-gold is tuned for rules and seals and is held to no contrast target,
     so white on it measured 3.33:1 here. This is the same accent walked until
     white clears the 4.5:1 AA floor: 4.50:1 on white, 3.82:1 against the
     masthead so the button is still findable (WCAG 1.4.11). */
  --cc-gold-fill:  #a16c0c;
  --cc-gold-soft:  #a67c2e;
  --cc-gold-tint:  #f1e7d3;
  --cc-gold-pale:  #f1e7d3;
  --cc-gold-faint: rgba(176, 122, 36, 0.32);
  /* RGB triplet form of the accent, for rgba(var(--cc-gold-rgb), a) literals
     (masthead rules, borders) that need theme-aware alpha. Light = brass. */
  --cc-gold-rgb:   176, 122, 36;

  /* Interaction-layer accents (hover text, hover borders, hover tints) — kept
     as their own vars so interactions.css hovers turn orange in dark alongside
     the base accent. Light values = the original brass hover palette. */
  --cc-accent-hi:       #d8bf85;
  --cc-accent-line:     #c2a35d;
  --cc-accent-line-2:   #a98b4f;
  --cc-accent-tint-rgb: 169, 139, 79;

  --cc-ink:   #171410;
  --cc-ink-2: #57534a;
  --cc-ink-3: #8a867a;
  --cc-ink-4: #b0ab9b;

  --cc-line:   #e2dccb;
  --cc-line-2: #ece7d9;

  --cc-green: #4d7c54;
  --cc-amber: #b5791f;
  --cc-red:   #b0483e;
  --cc-green-rgb: 77, 124, 84;

  --cc-font-sans:         'Public Sans', system-ui, sans-serif;
  --cc-font-display:      'Playfair Display', Georgia, serif;
  --cc-font-display-soft: 'Playfair Display', Georgia, serif;
  --cc-font-mono:         'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  /* The brand lockup (header wordmark + mobile drawer). Its own token because a
     STAMPED client's wordmark must render in THEIR display face — this was
     hardcoded as 'Cinzel' in three components, so every client's own name was
     drawn in the template's typeface. src/generated/theme.css overrides it. */
  --cc-font-wordmark:     'Cinzel', 'Trajan Pro', Georgia, serif;

  --cc-shadow-card: 0 1px 2px rgba(23, 20, 16, 0.05), 0 10px 30px rgba(23, 20, 16, 0.05);
  --cc-radius:    6px;
  --cc-radius-sm: 4px;

  /* Semantic chrome surfaces — the masthead band and the header button/pill
     "face". Broken out as their own tokens so dark mode can retune them
     without touching the components that consume them. */
  --cc-masthead: #f1ece0;
  --cc-btn-face: rgba(23, 20, 16, 0.03);

  /* Scrollbar + text selection — retuned per theme below. */
  --cc-scrollbar:       #d4cdbc;
  --cc-scrollbar-hover:  #c3bba6;
  --cc-selection: rgba(176, 122, 36, 0.20);

  /* Legacy-compat aliases — federation-remote agents (e.g. Oracle) reference
     these older var names; defined here so they resolve to Ivory values when
     an agent renders IN-SHELL (the agent's own :root only applies standalone). */
  --cc-cloud: var(--cc-bg);
  --cc-white: var(--cc-card);
  --cc-cream: var(--cc-gold-tint);
  --cc-muted: var(--cc-ink-2);
  --cc-serif: var(--cc-font-display);

  /* --- THE AGENT TOKEN BRIDGE -------------------------------------------
     Every agent built by the agent pipeline styles through `--bbl-*`. This
     Command Center defines `--cc-*`. Different namespaces — so before this
     block existed, an agent installed here rendered with EVERY `--bbl-*`
     UNDEFINED.

     That failure is worth spelling out, because it does not look like a
     failure. An undefined custom property does NOT fall back to a sensible
     value: the declaration becomes invalid at computed-value time, so
     `background: var(--bbl-card)` computes to TRANSPARENT while
     `color: var(--bbl-ink)` merely INHERITS. The result is an agent whose text
     is readable and whose cards, borders, badges and accents have all silently
     vanished — it reads as a thin or half-loaded page rather than a broken one,
     which is exactly why it survived a screenshot review. (Measured in a
     browser 2026-08-14: transparent background, inherited colour.)

     Aliases rather than copies, and that is the whole trick: a custom property
     that references another resolves AT USE, not at declaration. So these point
     at `--cc-*` and automatically follow whatever `src/generated/theme.css`
     sets for this client — including the dark-mode block, with no dark
     counterpart needed here. Verified in a browser across a theme flip.

     One block, and every agent this client ever installs inherits their brand
     with ZERO changes to the agent. Keep it exhaustive: a `--bbl-*` an agent
     can reference and this block does not name is an invisible element. */
  --bbl-bg:            var(--cc-bg);
  --bbl-bg-soft:       var(--cc-bg-soft);
  --bbl-bg-deep:       var(--cc-bg-deep);
  --bbl-card:          var(--cc-card);

  --bbl-navy:          var(--cc-navy);
  --bbl-navy-soft:     var(--cc-navy-soft);
  --bbl-navy-medium:   var(--cc-navy-medium);
  --bbl-navy-deep:     var(--cc-navy-deep);

  /* The accent family. Named "gold" in the agent kit for historical reasons —
     it is the ACCENT role, whatever colour the client actually chose. */
  --bbl-gold:          var(--cc-gold);
  --bbl-gold-bold:     var(--cc-gold-bold);
  --bbl-gold-soft:     var(--cc-gold-soft);
  --bbl-gold-tint:     var(--cc-gold-tint);
  --bbl-gold-faint:    var(--cc-gold-faint);
  --bbl-gold-rgb:      var(--cc-gold-rgb);

  --bbl-ink:           var(--cc-ink);
  --bbl-ink-2:         var(--cc-ink-2);
  --bbl-ink-3:         var(--cc-ink-3);
  --bbl-ink-4:         var(--cc-ink-4);

  --bbl-line:          var(--cc-line);
  --bbl-line-2:        var(--cc-line-2);

  --bbl-green:         var(--cc-green);
  --bbl-green-rgb:     var(--cc-green-rgb);
  --bbl-amber:         var(--cc-amber);
  --bbl-red:           var(--cc-red);

  --bbl-font-sans:     var(--cc-font-sans);
  --bbl-font-display:  var(--cc-font-display);
  --bbl-font-mono:     var(--cc-font-mono);

  --bbl-shadow-card:   var(--cc-shadow-card);

  /* Viewport insets: ONE owner (see the top of this file). An agent that reads
     these must get the host's values, never its own — double-counting the home
     indicator is what left ~86px of dead space under a composer. */
  --bbl-safe-bottom:   var(--cc-safe-bottom);
  --bbl-kb:            var(--cc-kb);

  /* The agent kit's own legacy aliases, which some older agents still use. */
  --bbl-cloud:         var(--cc-bg);
  --bbl-white:         var(--cc-card);
  --bbl-cream:         var(--cc-gold-tint);
  --bbl-muted:         var(--cc-ink-2);
  --bbl-serif:         var(--cc-font-display);

  /* Native controls (time picker, checkbox, default scrollbar) follow this. */
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   DARK MODE — "Ivory Study, after hours".
   The same warm cream + brass system relit on a warm near-black ground
   (browns, not cold grays) so the palette still reads as ivory paper turned
   down for the evening. Activated by data-theme="dark" on <html> (set pre-paint
   from localStorage in index.html; toggled at runtime by shell/theme.js).

   The saturated brass accents (--cc-gold / --cc-gold-soft) are deliberately
   NOT overridden — they read on both grounds and back the SVG icon strokes that
   consume the literal token values. Only --cc-gold-bold (text/links) brightens.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --cc-bg:         #14120d;
  --cc-bg-soft:    #1b1811;
  --cc-bg-deep:    #201c14;
  --cc-bg-thread: #1d1912;
  --cc-card:       #1e1a13;

  /* "navy" is the raised-fill role (buttons, pills, icon squares, stat bands),
     always paired with light content — so in dark mode it inverts to a warm
     surface that sits ABOVE the card, not below it. Navy-as-text was migrated
     to --cc-ink so this inversion is safe. */
  --cc-navy:        #423a29;
  --cc-navy-soft:   #4d4432;
  --cc-navy-medium: #574d39;
  --cc-navy-deep:   #383021;

  /* Dark ground: lift the chat navy so it still reads blue over the warm-brown
     surface (not a muddy near-black). */
  --cc-chat-mine:   #3d5382;

  /* Scratchpad pens on the dark ground: the light-mode values are near-black
     here and would vanish, so both lift to legible tints that KEEP the
     grey-vs-navy distinction — the whole point of the two colours. */
  --cc-pen-member-a:      #b6b2aa;
  --cc-pen-member-b:    #7fa8d4;
  --cc-pen-member-a-bg:   rgba(182, 178, 170, 0.07);
  --cc-pen-member-b-bg: rgba(127, 168, 212, 0.09);

  /* Dark mode trades the ivory brass for a warm ORANGE accent — it contrasts
     harder against the warm-brown ground and reads more vividly than gold did.
     The base drives the agent-medallion rings/glyphs (via currentColor) and
     every gold fill/border; -bold is the brighter text/link/active tone. */
  --cc-gold:       #e07d33;
  --cc-gold-bold:  #f39a4d;
  /* Dark mode's white-on-gold measured WORSE than light (2.54:1), because the
     dark accent is brighter. The fill role is therefore darker than the accent
     here rather than lighter: 4.52:1 on white, 3.98:1 against the masthead. */
  --cc-gold-fill:  #bb5c00;
  --cc-gold-soft:  #cf7330;
  --cc-gold-tint:  #2c1c0f;
  --cc-gold-pale:  #2c1c0f;
  --cc-gold-faint: rgba(224, 125, 51, 0.30);
  --cc-gold-rgb:   224, 125, 51;

  --cc-accent-hi:       #f6a860;
  --cc-accent-line:     #e5893f;
  --cc-accent-line-2:   #cf7734;
  --cc-accent-tint-rgb: 224, 125, 51;

  --cc-ink:   #f2ede1;
  --cc-ink-2: #c4bca9;
  --cc-ink-3: #948c7b;
  --cc-ink-4: #6c6555;

  --cc-line:   #322c20;
  --cc-line-2: #2a251b;

  --cc-green: #6bb07a;
  --cc-amber: #d4972f;
  --cc-red:   #d9695f;
  --cc-green-rgb: 107, 176, 122;

  --cc-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);

  --cc-masthead: #1a1610;
  --cc-btn-face: rgba(255, 255, 255, 0.05);

  --cc-scrollbar:       #3a3428;
  --cc-scrollbar-hover:  #4a4334;
  --cc-selection: rgba(215, 165, 63, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--cc-bg);
  color: var(--cc-ink);
  font-family: var(--cc-font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cc-selection); }
* { scrollbar-color: var(--cc-scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--cc-scrollbar); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--cc-scrollbar-hover); border: 3px solid transparent; background-clip: content-box; }

/* Keyboard up: the keyboard COVERS the home indicator, so the safe-area
   allowance is no longer protecting anything — it just becomes dead space
   between the message box and the top of the keys. Zero it while the keyboard
   is open; useKeyboardInset() puts this class on <html>. */
:root.cc-kb-open {
  --cc-safe-bottom: 0px;
}

/* Keyboard up ALSO retires the phone tab bar. The layout viewport is already
   collapsed to a strip above the keys; a row of navigation between the field
   you are typing in and the keyboard is the most expensive 56px on the screen,
   and nobody changes tab mid-sentence. It comes back when the keyboard drops. */
:root.cc-kb-open [data-testid="mobile-tab-bar"] {
  display: none;
}

/* ---------------------------------------------------------------------------
   iOS FOCUS ZOOM — the one-rule fix.

   Mobile Safari ZOOMS THE WHOLE PAGE IN when you focus a form control whose
   font-size is under 16px, and it does not zoom back out when you leave the
   field. Every text input in this product was 13.5px (the shared INPUT_STYLE)
   or smaller, so tapping any of them — the client search, the dossier
   assistant, every field of every dialog — lurched the layout sideways and left
   it there. Measured on a stamped client 2026-08-25 across every form surface.

   The usual "fix" is `maximum-scale=1, user-scalable=no` on the viewport meta.
   That is not a fix, it is a WCAG 1.4.4 failure: it disables pinch-zoom for
   everyone, permanently, to paper over a font size. index.html deliberately
   does NOT do that, which is why this rule has to.

   `!important` because every control in this codebase is styled with an INLINE
   px font-size, and an inline declaration outranks any stylesheet rule without
   it. Scoped to `pointer: coarse` so the desktop's denser 13.5px controls are
   untouched — this is a touch-device correction, not a redesign.

   16px is the floor, not a target: `max(16px, …)` would be the same thing with
   more moving parts, since nothing in here is above 16 to begin with. */
/* Gated on `pointer: coarse` ALONE, unlike the touch-target rules, and that
   asymmetry is deliberate. The zoom bug exists only on a touch device, so a
   desktop browser resized to phone width has nothing to fix — and raising its
   inputs to 16px there WOULD be a visible regression in the one place the
   layout is reviewed. A control that is merely narrow is not a control being
   touched. */
@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   THE TOUCH-TARGET FLOOR, app-wide.

   Measured across every phone surface of a stamped client 2026-08-25: the
   dashboard's month arrows 28x28, its panel buttons 30, the support footer's
   button 31, page actions 36, the masthead hamburger 40. The craft bar is 44
   (Apple 44pt / Material 48dp), the research minimum for a one-handed thumb is
   ~35px, and WCAG 2.5.8's hard floor is 24 -- so the smallest of these was
   failing the floor, not just the bar.

   Fixing forty inline style objects one at a time is how half of them get
   missed and how the next component added to the product starts under the bar
   again. One rule, at the root, is the invariant.

   `(pointer: coarse), (max-width: 700px)` is a union for the reason the bespoke
   sheet's twin is: coarse is the honest signal on the device and is FALSE in a
   desktop browser at 390px, which is where this layout is actually reviewed.

   THE EXCLUSIONS ARE THE LOAD-BEARING PART. Everything here is a control whose
   height is DERIVED from something other than ergonomics, and forcing 44px on
   it corrupts the thing it is derived from:
     .cc-cal-event  - absolutely positioned, sized in minutes. A 30-minute
                      meeting stretched to 44px detaches from its hour grid.
     .cc-cal-slot   - the hour cells behind it, already 46px, same geometry.
     .cc-skip-link  - visually hidden until focused; sizing it reveals it.
     [role="tab"] inside a scrolling tab row and the month grid's day cells are
     left alone for the same reason -- they are already >=44 by construction.
   A control that is inline BY NATURE (a mailto: inside a sentence) is also out:
   `display` is untouched here, so an inline element ignores min-height and is
   unaffected rather than broken. Those are sized where they are written.
   --------------------------------------------------------------------------- */
/* Desktop placement for the dashboard calendar's control group. It lives in the
   stylesheet rather than inline so the phone rule further down can recentre it
   by ordinary cascade — an inline `justify-self` would have forced an
   !important. It must stay ABOVE that media block: the two selectors have equal
   specificity, so document order is the only thing deciding the winner. */
.cc-cal-head > .cc-cal-nav {
  justify-self: end;
}

@media (pointer: coarse), (max-width: 700px) {
  button:not(.cc-cal-event):not(.cc-cal-slot):not(.cc-skip-link),
  [role="button"]:not(.cc-cal-event):not(.cc-cal-slot),
  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: 44px;
  }

  /* The craft bar is about the SMALLER axis, so a 40px-wide button fails it
     however tall it is -- which is exactly how the Rolodex "Edit" survived a
     min-height-only pass at 40px while "Delete" beside it passed at 55. */
  button:not(.cc-cal-event):not(.cc-cal-slot):not(.cc-skip-link) {
    min-width: 44px;
  }
}

@media (max-width: 700px) {
  /* THE DASHBOARD CALENDAR HEAD, restacked. This is the direct COST of the touch
     floor immediately above, and it belongs beside it.

     CalendarPanel's head is one row: [spacer] [month title] [Today | < | > |
     New event]. Growing those four controls from 28px to the 44px floor took the
     control group from 236px to 268px, and the row's minimum from something that
     fitted a phone to something that does not. MEASURED 2026-08-27 on emulated
     iPhone 13 / iPhone SE / Pixel 7, in the fullest configuration this head row
     ever renders — a client with a bespoke calendar page (so "New event" is
     present) viewing a month other than the current one (so "Today" is present
     too). That combination is live on a real client today, which is why it is
     the one that was measured rather than the bare four-control default:

       before: "SEPTEMBER 2026" took TWO line boxes, head row 54px not 27px,
               and the document scrolled sideways at 445px against a 390px phone.

     Two lines of defect from one cause, and the wrap was only the visible half.
     Restacking to title-over-controls fixes both: the title gets the full width
     (so it never wraps) and the control group gets its own row (so nothing
     overflows).

     WIDTH ONLY, not the touch floor's `(pointer: coarse), (max-width: 700px)`
     union, and the asymmetry is the point. What breaks the row is that it is too
     NARROW to hold 268px of controls beside a 195px title; a wide touch device
     has room for both. Gating on the union would have restacked an iPad at
     820px, where one row fits with ~330px to spare. 700px is also exactly the
     breakpoint HomePage's own useViewportNarrow(700) uses to switch to
     MobileHome, so the head restacks precisely when the app is in its phone
     layout — one number, not two that can drift apart.
     Swept 2026-08-27 at 320/375/390/412/430/600/700/701/768/900/1024/1280/1440:
     one line box and zero horizontal overflow at every width, stacked at <=700
     and one row at >=701.

     `!important` for the same reason the iOS focus-zoom rule above needs it, and
     it is the only pair here that does: the head row's track definition is
     written as an INLINE style object in CalendarPanel.jsx (HEAD_STYLE), and an
     inline declaration outranks any stylesheet rule without it. The CHILDREN do
     not need it — they are placed with `grid-area`, which reads correctly
     against either template, which is exactly why they were written that way. */
  .cc-cal-head {
    grid-template-areas: "title" "nav" !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The spacer only exists to balance the control group across a three-track
     row. With one track there is nothing to balance, and leaving it in place
     would draw an empty third row. */
  .cc-cal-head > .cc-cal-pad {
    display: none;
  }

  .cc-cal-head > .cc-cal-nav {
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   NO BROWSER BACK-SWIPE (2026-08-26). A left-to-right swipe on a phone is the
   shell's own gesture — it opens the nav drawer (Header.jsx) — and the
   browser's history-back swipe was winning the race: "swiping left to right
   is taking me back to last page. it should always open up the sidebar."
   `overscroll-behavior-x: none` is the standard switch that disables the
   navigation gesture in Chrome, Edge and Android WebView while leaving
   vertical scrolling untouched. iOS Safari does not offer web content this
   control for its edge swipe; there the edge stays the OS's and everything
   inboard of it is ours, which the drawer handler already handles.
   --------------------------------------------------------------------------- */
html, body {
  overscroll-behavior-x: none;
}
/* GENERATED FILE (scaffold-owned) — src/generated/theme.css
 *
 * Lexi Pickens's palette, generated from
 * clients/lexi-pickens/client.config.json by scripts/lib/palette.mjs.
 *
 * Source brand colors:
 *   primary #78AFF7   accent #C10B63
 *   neutral #f7f0f0 (synthesised from the background — none given at intake)
 *   background #faf0f0   background (dark) derived
 *   ANCHORED: --cc-bg is the literal colour above; the other grounds hold
 *   their relative offsets from it.
 *
 * Ramps are built in OKLCH (perceptually uniform), so lightness moves without
 * the hue drift plain hex arithmetic produces. Every foreground role is then
 * walked until it clears its WCAG target against the ground it actually sits
 * on — a brand color chosen for a logo is not automatically a legible UI color.
 *
 * Measured contrast, light: ink 12.51:1 on bg-deep, ink-2 5.59:1 on bg-deep, ink-3 3.07:1 on bg-deep, gold-bold 4.56:1 on bg-deep, green 3.65:1 on bg-deep, amber 3.9:1 on bg-deep, red 4.12:1 on bg-deep, white on navy 14.57:1, white on chat-mine 9.26:1, white on gold-fill 6.01:1
 * Measured contrast, dark:  ink 14.01:1 on bg-deep, ink-2 8.66:1 on bg-deep, ink-3 4.61:1 on bg-deep, gold-bold 5.46:1 on bg-deep, green 6.75:1 on bg-deep, amber 6.43:1 on bg-deep, red 6.13:1 on bg-deep, white on navy 9.26:1, white on chat-mine 7.17:1, white on gold-fill 4.58:1
 *
 * Loaded AFTER tokens.css and overrides it. HAND-EDITS ARE WRONG: rebrand by
 * editing the client config and re-running the scaffolder, so the config and
 * the UI can never disagree.
 */

:root {
  --cc-bg: #faf0f0;
  --cc-bg-soft: #efe5e5;
  --cc-bg-deep: #e3d9d9;
  --cc-bg-thread: #f3e9e9;
  --cc-card: #fff8f8;
  --cc-masthead: #f4eaea;
  --cc-navy: #002562;
  --cc-navy-soft: #003a78;
  --cc-navy-medium: #194e8e;
  --cc-navy-deep: #001551;
  --cc-chat-mine: #104786;
  --cc-pen-member-a: #4a4d53;
  --cc-pen-member-b: #104786;
  --cc-pen-member-a-bg: rgba(74, 77, 83, 0.05);
  --cc-pen-member-b-bg: rgba(16, 71, 134, 0.05);
  --cc-gold: #c10b63;
  --cc-gold-bold: #bd0060;
  --cc-gold-fill: #c10b63;
  --cc-gold-soft: #af0055;
  --cc-gold-tint: #fddae3;
  --cc-gold-pale: #fddae3;
  --cc-gold-faint: rgba(193, 11, 99, 0.32);
  --cc-gold-rgb: 193, 11, 99;
  --cc-accent-hi: #fb5392;
  --cc-accent-line: #da3277;
  --cc-accent-line-2: #b6005b;
  --cc-accent-tint-rgb: 182, 0, 91;
  --cc-ink: #181b1e;
  --cc-ink-2: #505357;
  --cc-ink-3: #787b80;
  --cc-ink-4: #a1a5aa;
  --cc-line: #ccd1d8;
  --cc-line-2: #dfe3e9;
  --cc-green: #447b46;
  --cc-amber: #965e00;
  --cc-red: #b24039;
  --cc-green-rgb: 68, 123, 70;
  --cc-shadow-card: 0 1px 2px rgba(24, 27, 30, 0.05), 0 10px 30px rgba(24, 27, 30, 0.05);
  --cc-btn-face: rgba(24, 27, 30, 0.03);
  --cc-scrollbar: #b8bec6;
  --cc-scrollbar-hover: #9fa5ad;
  --cc-selection: rgba(193, 11, 99, 0.2);
  --cc-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --cc-font-display: 'Fraunces', Georgia, serif;
  --cc-font-display-soft: 'Fraunces', Georgia, serif;
  --cc-font-wordmark: 'Fraunces', Georgia, serif;
  --cc-font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --cc-brand-primary: #78AFF7;
  --cc-brand-accent: #C10B63;
  --cc-brand-background: #faf0f0;
}

:root[data-theme="dark"] {
  --cc-bg: #0e1114;
  --cc-bg-soft: #171a1d;
  --cc-bg-deep: #1e2124;
  --cc-bg-thread: #1a1d20;
  --cc-card: #1b1e21;
  --cc-masthead: #131519;
  --cc-navy: #104786;
  --cc-navy-soft: #225697;
  --cc-navy-medium: #3165a7;
  --cc-navy-deep: #003a78;
  --cc-chat-mine: #235899;
  --cc-pen-member-a: #a7abb1;
  --cc-pen-member-b: #70a7ee;
  --cc-pen-member-a-bg: rgba(167, 171, 177, 0.07);
  --cc-pen-member-b-bg: rgba(112, 167, 238, 0.09);
  --cc-gold: #ff5896;
  --cc-gold-bold: #ff5896;
  --cc-gold-fill: #d82f76;
  --cc-gold-soft: #ed4687;
  --cc-gold-tint: #30151e;
  --cc-gold-pale: #30151e;
  --cc-gold-faint: rgba(255, 88, 150, 0.3);
  --cc-gold-rgb: 255, 88, 150;
  --cc-accent-hi: #ff76b2;
  --cc-accent-line: #ff5e9c;
  --cc-accent-line-2: #f54d8d;
  --cc-accent-tint-rgb: 245, 77, 141;
  --cc-ink: #ebeff4;
  --cc-ink-2: #babec3;
  --cc-ink-3: #86898e;
  --cc-ink-4: #606368;
  --cc-line: #2a2e33;
  --cc-line-2: #212429;
  --cc-green: #7cb57d;
  --cc-amber: #d49838;
  --cc-red: #f47c70;
  --cc-green-rgb: 124, 181, 125;
  --cc-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
  --cc-btn-face: rgba(255, 255, 255, 0.05);
  --cc-scrollbar: #34383f;
  --cc-scrollbar-hover: #494e54;
  --cc-selection: rgba(255, 88, 150, 0.28);
}
/* Command Center — interaction layer.
 *
 * DESIGN SAMPLE 3 — "The Study" (executive briefing-room dark theme).
 * Hover/motion retuned to the dark charcoal + brass palette; structure and
 * class names unchanged.
 *
 * Scoped TIGHTLY to what inline styles cannot express: :hover states,
 * transitions, and @keyframes. Imported once from src/main.jsx.
 */

/* --------------------------------------------------------------------------
 * Keyframes — live status dots
 * ------------------------------------------------------------------------ */
@keyframes cc-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(95, 158, 125, 0.22); }
  50%      { box-shadow: 0 0 0 5px rgba(95, 158, 125, 0.1); }
}

.cc-live-dot {
  animation: cc-pulse-dot 2s ease-in-out infinite;
}
.cc-live-pulse {
  animation: cc-pulse-dot 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
 * Masthead nav links + roster medallions
 * ------------------------------------------------------------------------ */
.cc-masthead-link {
  transition: color 0.15s, border-color 0.15s;
}
.cc-masthead-link:hover {
  color: var(--cc-accent-hi);
}

.cc-medallion {
  transition: transform 0.18s, filter 0.18s;
}
.cc-medallion:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(var(--cc-accent-tint-rgb), 0.25));
}
.cc-medallion:hover span:first-of-type {
  color: var(--cc-accent-hi);
}

/* --------------------------------------------------------------------------
 * Top bar buttons + member pill
 * ------------------------------------------------------------------------ */
.cc-top-btn,
.cc-member-pill {
  transition: background 0.15s, border-color 0.15s;
}
.cc-top-btn:hover,
.cc-member-pill:hover {
  border-color: var(--cc-accent-line);
  background: rgba(var(--cc-accent-tint-rgb), 0.14);
}

/* Sticky agent ribbon removed 2026-07-23 (it leaked across page
   navigations). Its classes (.cc-sticky-ribbon / .cc-ribbon-*) are
   intentionally gone; the roster grid is the sole agent-nav surface. */

/* --------------------------------------------------------------------------
 * Agents grid — tile hover lift + brass top-border scaleX reveal
 * ------------------------------------------------------------------------ */
.cc-agent-tile {
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, color 0.18s;
}
.cc-agent-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cc-accent-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s;
}
.cc-agent-item:hover .cc-agent-tile {
  border-color: var(--cc-accent-line-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  color: var(--cc-accent-hi);
}
.cc-agent-item:hover .cc-agent-tile::before {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
 * Quick Actions — primary + secondary button hovers
 * ------------------------------------------------------------------------ */
.cc-qa-primary {
  transition: background 0.15s, border-color 0.15s;
}
.cc-qa-primary:hover {
  background: #33466a;
  border-color: var(--cc-accent-line);
}
.cc-qa-btn {
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cc-qa-btn:hover {
  background: #33466a;
  border-color: var(--cc-accent-line);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.cc-qa-arrow {
  transition: transform 0.15s, color 0.15s;
}
.cc-qa-btn:hover .cc-qa-arrow {
  color: var(--cc-accent-hi);
  transform: translateX(2px);
}


/* --------------------------------------------------------------------------
 * Sign-offs — approve / reject buttons
 * ------------------------------------------------------------------------ */
.cc-signoff-btn {
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cc-signoff-btn-approve:hover { background: #4c8467; }
.cc-signoff-btn-reject:hover  { border-color: #b0413e; color: #cd6a63; }

/* --------------------------------------------------------------------------
 * Needs Attention — item row hover
 * ------------------------------------------------------------------------ */
.cc-attn-item {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cc-attn-item:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  border-color: var(--cc-accent-line-2);
}

/* --------------------------------------------------------------------------
 * Live Activity — event row hover
 * ------------------------------------------------------------------------ */
.cc-activity-row {
  transition: background 0.12s;
}
.cc-activity-row:hover {
  background: rgba(var(--cc-accent-tint-rgb), 0.06);
}

/* Messages panel search — placeholder + clear button on the dark title bar. */
[data-testid="messages-search"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
[data-testid="messages-search"]::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.5;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Week Calendar — day cell hover (today cell keeps its slate fill)
 * ------------------------------------------------------------------------ */
.cc-week-day {
  transition: border-color 0.15s, background 0.15s;
}
.cc-week-day:hover {
  border-color: var(--cc-accent-line);
}
/* Today's cell is a soft gold wash set inline per cell (2026-07-23), no longer
   a navy fill; this only carries its gold hover border. */
.cc-week-day.is-today:hover {
  border-color: var(--cc-gold, var(--cc-accent-line));
}

/* --------------------------------------------------------------------------
 * Generic agent-tile / cost-row / signoff-item — subtle shared hovers
 * ------------------------------------------------------------------------ */
.cc-hoverable {
  transition: background 0.15s, border-color 0.15s;
}

/* --------------------------------------------------------------------------
 * Masthead BB monogram — the asset is a black-on-transparent PNG, invisible on
 * the dark masthead. In dark mode recolor it to white (brightness(0) forces the
 * silhouette solid black preserving alpha, invert(1) flips black -> white).
 * Light mode leaves the original black lockup on the cream masthead untouched.
 *
 * ⚠ EXCLUDES THE CLIENT LOGO (1.13.0). This rule was written when the mark was
 * a PNG; the mark became TYPE in 1.2.0 and the selector has matched nothing
 * since. Adding the client-logo <img> in 1.13.0 silently reactivated it, and
 * the result was a brand mark recoloured to a white silhouette in dark mode —
 * every colour in the client's logo destroyed, and, combined with the white
 * plate behind it, white-on-white and completely invisible. Caught by a
 * screenshot; no test would have seen it, because the bug is a stylesheet
 * meeting a component that did not exist when it was written.
 *
 * A client's logo keeps its own colours. Legibility in dark mode is the
 * plate's job (BrandMark.jsx) or a supplied `branding.logo.dark`, and both
 * preserve the artwork instead of flattening it to a silhouette.
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] [data-testid="header-home-logo"] img:not([data-testid="brand-logo"]) {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
 * Header focus rings — dark surfaces take a brass ring
 * ------------------------------------------------------------------------ */
[data-testid="header-home-logo"]:focus-visible,
[data-testid="header-home-title"]:focus-visible,
[data-testid="feedback-button"]:focus-visible,
[data-testid="header-notif-btn"]:focus-visible,
[data-testid="mobile-nav-toggle"]:focus-visible,
[data-testid="member-switcher"]:focus-visible {
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Stat band — clickable figure cells (tickets → Feedback, tasks → Tasks,
 * spend → Costs). Subtle tint + focus ring; the repo cell is static.
 * ------------------------------------------------------------------------ */
.cc-stat-cell {
  transition: background 0.15s;
}
.cc-stat-cell:hover {
  background: rgba(var(--cc-gold-rgb), 0.07);
}
.cc-stat-cell:focus-visible {
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
 * Mobile masthead / drawer BB mark — same black-on-transparent PNG as the
 * desktop lockup, so recolor it to white in dark mode.
 *
 * ⚠ The filter sits on the WRAPPER, not the image, so it cannot be undone from
 * the inside — an ancestor filter has already rasterised by the time an inner
 * rule is considered. Header.jsx therefore stops applying `cc-mobile-mark`
 * when the mark is an image (see markIsType()), which is the only place the
 * distinction can be made. Same 1.13.0 reasoning as the desktop rule above.
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] .cc-mobile-mark {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
 * Mobile nav drawer — scrim fade + panel slide-in
 * ------------------------------------------------------------------------ */
@keyframes cc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cc-drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="mobile-nav-drawer"],
  [data-testid="mobile-nav-scrim"] {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Skip-link + surface focus rings
 * ------------------------------------------------------------------------ */
.cc-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  padding: 8px 16px;
  background: var(--cc-navy, #2a3a58);
  color: #ece7dc;
  border-radius: 4px;
  z-index: 10000;
  text-decoration: none;
  font-family: var(--cc-font-sans, system-ui);
  font-size: 13px;
}
.cc-skip-link:focus,
.cc-skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: 2px;
}

[data-testid^="goal-row-"]:focus-visible,
[data-testid^="feedback-row-"]:focus-visible,
[data-testid^="feedback-bucket-header-"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: 2px;
}

/* Dashboard month calendar — day cells are only interactive when a bespoke
   `calendar` page exists to receive the click (CalendarPanel renders a <div>
   otherwise, which these rules never match). The hover is a tint rather than a
   border so the grid's rules stay unbroken as the cursor crosses it. */
.cc-cal-day {
  transition: background 0.12s;
}
.cc-cal-day:hover {
  background: rgba(var(--cc-accent-tint-rgb), 0.14);
}
.cc-cal-day:focus-visible {
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
 * Settings — the interaction layer for the /settings register.
 *
 * SettingsPage.jsx styles itself inline (the house convention), which cannot
 * express :focus-visible, a hover gated on pointer type, or reduced motion.
 * Those three live here and nowhere else. Every colour is a --cc-* token, so
 * this block reskins with each client's generated palette like the rest.
 * ------------------------------------------------------------------------ */

/* Hover is an enhancement, never a carrier of information — and a :hover style
   that survives on a touch device sticks after a tap. Gate it on a real mouse. */
@media (hover: hover) and (pointer: fine) {
  .cc-set-btn:hover:not(:disabled) {
    background: rgba(var(--cc-gold-rgb), 0.08);
  }
  .cc-set-rail-link:hover {
    color: var(--cc-ink);
    border-left-color: var(--cc-gold);
  }
  .cc-set-switch:hover:not(:disabled) > span {
    filter: brightness(0.96);
  }
}

/* Every control on the page takes the same ring. outline-offset keeps it clear
   of the switch track and the sheet's own border rather than sitting on top of
   either. */
.cc-set-btn:focus-visible,
.cc-set-switch:focus-visible,
.cc-set-input:focus-visible,
.cc-set-rail-link:focus-visible,
[data-testid^="settings-brand-"]:focus-visible {
  outline: 2px solid var(--cc-gold-bold, var(--cc-accent-line));
  outline-offset: 2px;
}

/* A focused text field also reads as focused without the ring — the border is
   what someone tracks while typing. */
.cc-set-input:focus {
  border-color: var(--cc-gold);
}

.cc-set-btn,
.cc-set-rail-link {
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1),
              color 150ms cubic-bezier(0.2, 0, 0, 1),
              border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* Reduced motion means less movement, not less information: the switch still
   changes fill and the knob is still in the other place — it just gets there
   without travelling, and the rail jump stops animating. */
@media (prefers-reduced-motion: reduce) {
  .cc-set-btn,
  .cc-set-rail-link,
  .cc-set-switch > span,
  .cc-set-switch > span > span {
    transition-duration: 1ms !important;
  }
  [data-testid="settings-page"] {
    scroll-behavior: auto !important;
  }
}
/*$vite$:1*/