/* @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.

     --bbl-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. */
  --bbl-kb: 0px;
  --bbl-safe-bottom: env(safe-area-inset-bottom, 0px);

  --bbl-bg:         #f4f1e9;
  --bbl-bg-soft:    #ece7d9;
  --bbl-bg-deep:    #e3dcc9;
  --bbl-bg-handoff: #f1ead7;
  --bbl-card:       #fbfaf4;

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

  /* A real navy blue for the "you" chat bubble — the --bbl-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. */
  --bbl-chat-mine:   #33466b;

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

  --bbl-gold:       #b07a24;
  --bbl-gold-bold:  #8f5f14;
  --bbl-gold-soft:  #a67c2e;
  --bbl-gold-tint:  #f1e7d3;
  --bbl-gold-pale:  #f1e7d3;
  --bbl-gold-faint: rgba(176, 122, 36, 0.32);
  /* RGB triplet form of the accent, for rgba(var(--bbl-gold-rgb), a) literals
     (masthead rules, borders) that need theme-aware alpha. Light = brass. */
  --bbl-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. */
  --bbl-accent-hi:       #d8bf85;
  --bbl-accent-line:     #c2a35d;
  --bbl-accent-line-2:   #a98b4f;
  --bbl-accent-tint-rgb: 169, 139, 79;

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

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

  --bbl-green: #4d7c54;
  --bbl-amber: #b5791f;
  --bbl-red:   #b0483e;

  --bbl-font-sans:         'Public Sans', system-ui, sans-serif;
  --bbl-font-display:      'Playfair Display', Georgia, serif;
  --bbl-font-display-soft: 'Playfair Display', Georgia, serif;
  --bbl-font-mono:         'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --bbl-shadow-card: 0 1px 2px rgba(23, 20, 16, 0.05), 0 10px 30px rgba(23, 20, 16, 0.05);
  --bbl-radius:    6px;
  --bbl-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. */
  --bbl-masthead: #f1ece0;
  --bbl-btn-face: rgba(23, 20, 16, 0.03);

  /* Scrollbar + text selection — retuned per theme below. */
  --bbl-scrollbar:       #d4cdbc;
  --bbl-scrollbar-hover:  #c3bba6;
  --bbl-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). */
  --bbl-cloud: var(--bbl-bg);
  --bbl-white: var(--bbl-card);
  --bbl-cream: var(--bbl-gold-tint);
  --bbl-muted: var(--bbl-ink-2);
  --bbl-serif: var(--bbl-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 (--bbl-gold / --bbl-gold-soft) are deliberately
   NOT overridden — they read on both grounds and back the SVG icon strokes that
   consume the literal token values. Only --bbl-gold-bold (text/links) brightens.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bbl-bg:         #14120d;
  --bbl-bg-soft:    #1b1811;
  --bbl-bg-deep:    #201c14;
  --bbl-bg-handoff: #1d1912;
  --bbl-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 --bbl-ink so this inversion is safe. */
  --bbl-navy:        #423a29;
  --bbl-navy-soft:   #4d4432;
  --bbl-navy-medium: #574d39;
  --bbl-navy-deep:   #383021;

  /* Dark ground: lift the chat navy so it still reads blue over the warm-brown
     surface (not a muddy near-black). */
  --bbl-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. */
  --bbl-pen-maxim:      #b6b2aa;
  --bbl-pen-jackson:    #7fa8d4;
  --bbl-pen-maxim-bg:   rgba(182, 178, 170, 0.07);
  --bbl-pen-jackson-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. */
  --bbl-gold:       #e07d33;
  --bbl-gold-bold:  #f39a4d;
  --bbl-gold-soft:  #cf7330;
  --bbl-gold-tint:  #2c1c0f;
  --bbl-gold-pale:  #2c1c0f;
  --bbl-gold-faint: rgba(224, 125, 51, 0.30);
  --bbl-gold-rgb:   224, 125, 51;

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

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

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

  --bbl-green: #6bb07a;
  --bbl-amber: #d4972f;
  --bbl-red:   #d9695f;

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

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

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

/* ---------------------------------------------------------------------------
   SEMANTIC TIER — roles, not colour identities (RMB-TASK-378)
   ---------------------------------------------------------------------------
   Everything above this line names a COLOUR: --bbl-gold, --bbl-navy, --bbl-bg,
   --bbl-card. Components therefore consume identities rather than roles, and
   two things follow. A re-theme means renaming meaning rather than changing
   values. And the dark theme already fights its own vocabulary — "navy" here
   denotes a near-black warm neutral, not a blue, which is why --bbl-chat-mine
   had to be introduced above just to get an actually-blue bubble.

   This tier is the role layer, mapped onto the EXISTING primitives. It is
   PURELY ADDITIVE: no declaration above changed, and nothing consumes these
   yet, so this commit cannot move a pixel. Migrating components onto them is
   the separate, still-undecided adoption question (RMB-TASK-377).

   WHY THERE IS NO DARK COUNTERPART, AND WHY THAT IS NOT AN OVERSIGHT.
   These resolve through var() at use time, not at definition time. Dark mode
   overrides the PRIMITIVES on the same element (:root[data-theme="dark"]), so
   --surface re-resolves to the dark --bbl-card automatically. Redefining the
   semantic names per theme would be a second place to keep in sync and a
   second place to get it wrong.

   ON- PAIRS. A surface gets an on- pair: the foreground guaranteed to be
   legible against it. --text-primary / --text-secondary are themselves
   foreground roles and --border-hairline is a line, so none of the three takes
   an on- pair — inventing --on-text-primary would name nothing.
   ------------------------------------------------------------------------- */
:root {
  /* Grounds. --surface is the page; --surface-raised is anything sitting on
     top of it (cards, panels, popovers). */
  --surface:            var(--bbl-bg);
  --on-surface:         var(--bbl-ink);
  --surface-raised:     var(--bbl-card);
  --on-surface-raised:  var(--bbl-ink);

  /* Foreground. Primary is body copy and headings; secondary is the supporting
     register — captions, metadata, timestamps. */
  --text-primary:    var(--bbl-ink);
  --text-secondary:  var(--bbl-ink-2);

  /* Accent. --on-accent is what reads on a FILLED accent (a brass button), and
     is deliberately the card cream rather than pure white so it stays inside
     the palette in both themes. */
  --accent:     var(--bbl-gold);
  --on-accent:  var(--bbl-card);

  /* The 1px rule between regions. */
  --border-hairline: var(--bbl-line);
}

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

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

::selection { background: var(--bbl-selection); }
* { scrollbar-color: var(--bbl-scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bbl-scrollbar); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--bbl-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.bbl-kb-open {
  --bbl-safe-bottom: 0px;
}
/* Time tab — the chart layer. Everything else on this page is inline-styled from
   tokens.js; the marks live here because they need pseudo-elements, keyframes and a
   dark-mode override that inline styles cannot express.

   COLOR: two categorical hues, one per PARTNER. Color encodes identity (whose timer
   is this), never rank — a filter that changes the row count must not repaint the
   survivors, which is exactly what the old index-keyed palette did. Projects are
   identified by their direct lane label instead.

   Both pairs were machine-checked against the card surface they sit on (light
   #fbfaf4, dark #1e1a13) for the OKLCH lightness band, the chroma floor, adjacent-
   pair CVD separation (protan/deutan/tritan) and >= 3:1 contrast. Do not hand-tune
   these values — re-run the validator. */

.time-viz {
  --time-author-1: #b07a24; /* Maxim — brass, the brand accent */
  --time-author-2: #2166a4; /* Jackson — cool blue; CVD dE 64.7 vs brass */
  --time-author-x: var(--bbl-ink-3); /* unknown author — recessive, never a 3rd hue */

  --time-grid: rgba(23, 20, 16, 0.07);
  --time-track: rgba(23, 20, 16, 0.05);
  /* The ring that separates two overlapping blocks must be the surface they sit on. */
  --time-surface: var(--bbl-card);
}

:root[data-theme='dark'] .time-viz {
  --time-author-1: #cf7330;
  --time-author-2: #3f9fd0;
  --time-grid: rgba(242, 237, 225, 0.1);
  --time-track: rgba(242, 237, 225, 0.06);
}

/* --- day timeline ---------------------------------------------------------- */

.time-lane {
  position: relative;
  height: 20px;
}

/* Recessive track behind each lane, so an empty stretch still reads as a lane. */
.time-lane::before {
  content: '';
  position: absolute;
  inset: 8px 0;
  background: var(--time-track);
  border-radius: 999px;
}

.time-block {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px; /* rounded data-ends */
  box-shadow: 0 0 0 2px var(--time-surface); /* 2px surface ring where blocks abut */
  cursor: pointer;
  border: none;
  padding: 0;
}

.time-block:hover,
.time-block:focus-visible {
  filter: brightness(1.08);
  outline: none;
  box-shadow:
    0 0 0 2px var(--time-surface),
    0 0 0 3px var(--bbl-ink-3);
}

/* A running block has no right edge — it is still being written. */
.time-block--running {
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.time-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--time-grid);
}

/* --- running indicator ------------------------------------------------------ */

/* Status is never color alone: this dot always ships beside the word "running". */
.time-running-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bbl-amber);
  animation: time-pulse 1.8s ease-in-out infinite;
}

@keyframes time-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .time-running-dot {
    animation: none;
  }
}

/* --- tooltip ---------------------------------------------------------------- */

.time-tooltip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -110%);
  background: var(--bbl-ink);
  color: var(--bbl-card);
  border-radius: var(--bbl-radius-sm);
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* --- forced-colors / print: identity must survive losing color --------------- */

@media (forced-colors: active) {
  .time-block {
    forced-color-adjust: none;
    background: ButtonText !important;
  }
  .time-block--author-2 {
    background: Highlight !important;
  }
}
/* Tasks page — hover/focus affordances for the task rows.
   Colors come from the themeable --bbl-* vars so dark mode is automatic. */

.bbl-task-id:hover,
.bbl-task-id:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bbl-task-detail:hover,
.bbl-task-detail:focus-visible {
  color: var(--bbl-accent-strong, var(--bbl-gold-bold));
  text-decoration: underline;
}

.bbl-task-clear:hover,
.bbl-task-clear:focus-visible {
  text-decoration: underline;
}

/* The description cell carries overflow-wrap inline (DESC_CELL_STYLE): the row
   wrapper is display:contents at desktop width and so cannot style anything. */

/* Tile-era affordances (2026-07-26): the chevron and Send button get the same
   hover language as the rest of the board. */
.bbl-task-chevron:hover svg,
.bbl-task-chevron:focus-visible svg {
  stroke: var(--bbl-accent-strong, var(--bbl-gold-bold));
}

.bbl-task-send:hover:not(:disabled),
.bbl-task-send:focus-visible:not(:disabled) {
  border-color: var(--bbl-gold-bold);
  color: var(--bbl-gold-bold);
}
/* Dev Logs page — hover/focus affordances and the rendered-mrkdwn prose.
   Colors come from the themeable --bbl-* vars so dark mode is automatic. */

.bbl-dev-log-row:hover,
.bbl-dev-log-row:focus-visible {
  background: var(--bbl-bg-soft);
}

/* The prose block is server-rendered HTML from the Slack-mrkdwn body
   (mrkdwn.js). Keep it readable and on-palette; every color is a token var. */
.bbl-dev-log-prose {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bbl-ink);
}

.bbl-dev-log-prose p {
  margin: 0 0 10px;
}

.bbl-dev-log-prose p:last-child {
  margin-bottom: 0;
}

.bbl-dev-log-prose ul {
  margin: 0 0 10px;
  padding-left: 20px;
  list-style: disc;
}

.bbl-dev-log-prose li {
  margin: 4px 0;
}

.bbl-dev-log-prose em {
  font-style: italic;
  color: var(--bbl-ink-2);
}

.bbl-dev-log-prose strong {
  font-weight: 700;
}

.bbl-dev-log-prose code {
  font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: var(--bbl-bg-soft);
  border: 1px solid var(--bbl-line);
  border-radius: 4px;
  padding: 1px 5px;
}
/* The one-pager's print layout (2026-08-16).
 *
 * Vercel cannot render a PDF — the desktop BBL one-pager route uses a local
 * Playwright chromium, and neither that binary nor a shell exists on a
 * serverless function. The browser's own print engine CAN, produces a real
 * paginated PDF through "Save as PDF", and needs no infrastructure at all.
 *
 * So: the proposal is always in the DOM, hidden on screen, and print swaps the
 * page for it. Building a separate print window would lose the client's brand
 * colours (they are inline CSS variables set by the composer) and would be
 * blocked as a popup half the time.
 *
 * `visibility` rather than `display:none` on the shell — collapsing the whole
 * app to nothing makes some browsers paginate a blank first page. Hiding it
 * visually while the proposal is promoted to the page origin avoids that. */

.bbl-proposal-sheet {
  display: none;
}

@media print {
  /* Hide the app, show the sheet. The shell is still laid out; it just does
     not paint, which keeps pagination honest. */
  body > * {
    visibility: hidden;
  }

  .bbl-proposal-sheet,
  .bbl-proposal-sheet * {
    visibility: visible;
  }

  .bbl-proposal-sheet {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff;
    color: #171410;
  }

  /* One page, with real margins. `@page` is the only way to control the
     printer's own margin box; without it the browser adds its own headers and
     the sheet's own padding fights them. */
  @page {
    size: letter portrait;
    margin: 0.75in;
  }

  /* Never split a section across the fold — a one-pager whose Investment line
     lands alone on page 2 is not a one-pager. */
  .bbl-proposal-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Links print as text: a URL in parentheses after every word is noise on a
     document that is being handed to someone. */
  .bbl-proposal-sheet a {
    text-decoration: none;
    color: inherit;
  }

  /* Backgrounds and brand colour bars must actually print. Chrome and Safari
     drop background graphics unless told; this is the standard opt-in. */
  .bbl-proposal-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* BBL 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 bbl-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); }
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
 * Handoff Notes — add-note pill
 * ------------------------------------------------------------------------ */
.bbl-handoff-add {
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bbl-handoff-add:hover {
  background: #33466a;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

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

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

/* --------------------------------------------------------------------------
 * Live Activity — event row hover
 * ------------------------------------------------------------------------ */
.bbl-activity-row {
  transition: background 0.12s;
}
.bbl-activity-row:hover {
  background: rgba(var(--bbl-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)
 * ------------------------------------------------------------------------ */
.bbl-week-day {
  transition: border-color 0.15s, background 0.15s;
}
.bbl-week-day:hover {
  border-color: var(--bbl-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. */
.bbl-week-day.is-today:hover {
  border-color: var(--bbl-gold, var(--bbl-accent-line));
}

/* --------------------------------------------------------------------------
 * Generic agent-tile / cost-row / signoff-item — subtle shared hovers
 * ------------------------------------------------------------------------ */
.bbl-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.
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] [data-testid="header-home-logo"] img {
  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="partner-switcher"]:focus-visible {
  outline: 2px solid var(--bbl-gold-bold, var(--bbl-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.
 * ------------------------------------------------------------------------ */
.bbl-stat-cell {
  transition: background 0.15s;
}
.bbl-stat-cell:hover {
  background: rgba(var(--bbl-gold-rgb), 0.07);
}
.bbl-stat-cell:focus-visible {
  outline: 2px solid var(--bbl-gold-bold, var(--bbl-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.
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] .bbl-mobile-mark {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
 * Mobile nav drawer — scrim fade + panel slide-in
 * ------------------------------------------------------------------------ */
@keyframes bbl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bbl-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
 * ------------------------------------------------------------------------ */
.bbl-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  padding: 8px 16px;
  background: var(--bbl-navy, #2a3a58);
  color: #ece7dc;
  border-radius: 4px;
  z-index: 10000;
  text-decoration: none;
  font-family: var(--bbl-font-sans, system-ui);
  font-size: 13px;
}
.bbl-skip-link:focus,
.bbl-skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--bbl-gold-bold, var(--bbl-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(--bbl-gold-bold, var(--bbl-accent-line));
  outline-offset: 2px;
}

/* A row that scrolls sideways inside itself (sticky tab strips) must not draw a
   scrollbar — the row is short and the bar would sit on top of the tabs. Touch
   scrolling and keyboard scrolling both still work; only the chrome is hidden.
   Firefox uses scrollbar-width, set inline alongside this rule. */
.bbl-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Arrival highlight (Jackson 2026-08-15) — HighlightTarget stamps this on the
   row a notification pointed at, then removes it after ~2.2s. It exists because
   landing on the right PAGE was not the same as landing on the right THING: you
   still had to scan a dashboard for the sign-off you had just been told about.
   Uses the same gold as the rest of the shell, and animates opacity/box-shadow
   only so it never reflows the row it is drawing attention to. */
@keyframes bbl-highlight-flash {
  0%   { box-shadow: 0 0 0 2px var(--bbl-gold); }
  70%  { box-shadow: 0 0 0 2px var(--bbl-gold); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
[data-bbl-highlight] {
  animation: bbl-highlight-flash 2.2s ease-out forwards;
  border-radius: 6px;
  scroll-margin-top: 96px;
  scroll-margin-bottom: 96px;
}
@media (prefers-reduced-motion: reduce) {
  [data-bbl-highlight] { animation: none; box-shadow: 0 0 0 2px var(--bbl-gold); }
}
/*$vite$:1*/