/* =====================================================================
 * Open Brain · Design System
 * Tokens + components matching the Figma source of truth
 * (file: MSgCCUwZL9lNeEyaJqBFuH · page "03 · Web · open-brain.uk")
 *
 * Palettes:
 *   Light : warm cream + forest-teal + amber + mint
 *   Dark  : midnight + bright mint + warm amber
 *
 * Usage: load AFTER theme.css to override legacy --bg/--text/--green/etc.
 * ===================================================================== */

:root {
  /* --- Raw palette (theme-agnostic) ----------------------------------- */
  --obds-cream:        #F2EFE6;
  --obds-cream-deep:   #EFEADE;
  --obds-cream-edge:   #E3DFD5;
  --obds-white:        #FFFFFF;

  --obds-ink:          #1C1F23;
  --obds-ink-soft:     #5C6168;
  --obds-ink-mute:     #858A91;

  --obds-forest:       #1F5F4A;
  --obds-forest-deep:  #144A39;
  --obds-mint:         #5FE0B6;
  --obds-mint-deep:    #4ACBA0;
  --obds-mint-soft-l:  #D9EFE3;
  --obds-mint-soft-d:  #1D3B32;
  --obds-mint-text:    #3E9477;

  --obds-amber:        #C36A2C;
  --obds-amber-warm:   #F79F50;
  --obds-amber-soft-l: #FBE1CE;
  --obds-amber-soft-d: #462E1C;

  --obds-midnight:     #0E1620;
  --obds-mid-card:     #161F2A;
  --obds-mid-card-2:   #1C2632;
  --obds-mid-border:   #283441;
  --obds-mid-ink:      #F1F4F7;
  --obds-mid-ink-soft: #9EAAB8;
  --obds-mid-ink-mute: #6B7785;

  --obds-radius-xs:    8px;
  --obds-radius-sm:    12px;
  --obds-radius-md:    16px;
  --obds-radius-lg:    20px;
  --obds-radius-xl:    24px;
  --obds-radius-2xl:   32px;
  --obds-radius-pill:  999px;

  /* --- Breakpoint tokens (use as `@media (max-width: var(--obds-bp-md))`)
   * Reference values only — CSS does not actually allow custom-property
   * values inside @media queries today, so consumers should still write the
   * pixel value (we're standardising on these four):
   *
   *   --obds-bp-sm  640px   phone portrait → single-column
   *   --obds-bp-md  880px   phone landscape / small tablet
   *   --obds-bp-lg  1180px  small laptop → two-column dashboards collapse
   *   --obds-bp-xl  1340px  large laptop → three-column dashboards
   *
   * The audit found eight different ad-hoc breakpoints (640/700/760/880/
   * 980/1100/1180/1280) which made responsive QA painful. New code MUST use
   * one of the four standard values above. Existing files will be migrated
   * incrementally as they're touched. */
  --obds-bp-sm: 640px;
  --obds-bp-md: 880px;
  --obds-bp-lg: 1180px;
  --obds-bp-xl: 1340px;

  --obds-shadow-soft-l: 0 8px 24px rgba(28, 31, 35, 0.06);
  --obds-shadow-soft-d: 0 12px 32px rgba(0, 0, 0, 0.40);
  --obds-shadow-lift-l: 0 18px 48px rgba(28, 31, 35, 0.10);
  --obds-shadow-lift-d: 0 24px 60px rgba(0, 0, 0, 0.55);

  --obds-font-sans: Inter, "InterVariable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --obds-tracking-caps: 1.4px;

  /* Default (light) themed aliases ------------------------------------- */
  --obds-bg:           var(--obds-cream);
  --obds-bg-soft:      var(--obds-cream-deep);
  --obds-card:         var(--obds-white);
  --obds-card-soft:    var(--obds-cream-deep);
  --obds-border:       var(--obds-cream-edge);
  --obds-text:         var(--obds-ink);
  --obds-text-soft:    var(--obds-ink-soft);
  --obds-text-mute:    var(--obds-ink-mute);

  --obds-accent:       var(--obds-forest);
  --obds-accent-deep:  var(--obds-forest-deep);
  --obds-accent-fg:    var(--obds-white);
  --obds-accent-pill:  var(--obds-mint-soft-l);
  --obds-accent-pill-fg: var(--obds-mint-text);

  --obds-amber-pill:   var(--obds-amber-soft-l);
  --obds-amber-pill-fg: var(--obds-amber);

  --obds-shadow-soft:  var(--obds-shadow-soft-l);
  --obds-shadow-lift:  var(--obds-shadow-lift-l);

  /* Status tokens (UI sprint round 4, 2026-05-23).
   * Audit found ~70 occurrences of #81c784 / #ef5350 / #ffb74d / #C8514F
   * scattered across dashboard-legacy.html + ops.html for ok/warn/error
   * semantics. Tokenising them lets dark-mode swap them too, and any
   * future palette tweak hits one place. */
  --obds-ok:           #2E7D5B;
  --obds-ok-soft:      #D9EFE3;
  --obds-warn:         #C36A2C;
  --obds-warn-soft:    #FBE1CE;
  --obds-err:          #B43D3B;
  --obds-err-soft:     #F8D8D6;
  --obds-info:         #2E5DA8;
  --obds-info-soft:    #D9E5F5;
}

/* Override legacy theme.css aliases so unmodified pages get a sensible look */
:root,
:root[data-theme="light"] {
  --bg:        var(--obds-cream);
  --surface:   var(--obds-white);
  --surface-2: var(--obds-cream-deep);
  --surface-3: var(--obds-cream-edge);
  --panel:     var(--obds-white);
  --ink:       var(--obds-ink);
  --text:      var(--obds-ink);
  --muted:     var(--obds-ink-soft);
  --subtle:    var(--obds-ink-mute);
  --line:      var(--obds-cream-edge);
  --line-strong: rgba(28, 31, 35, 0.18);
  --blue:      var(--obds-forest);
  --teal:      var(--obds-mint-text);
  --green:     var(--obds-mint-text);
  --amber:     var(--obds-amber);
  --red:       #C8514F;
  --shadow:    rgba(28, 31, 35, 0.12);
}

:root[data-theme="dark"] {
  /* Status tokens — dark variants pop on midnight bg */
  --obds-ok:         #81C784;
  --obds-ok-soft:    #1D3B32;
  --obds-warn:       #FFB74D;
  --obds-warn-soft:  #462E1C;
  --obds-err:        #EF5350;
  --obds-err-soft:   #3B1818;
  --obds-info:       #90CAF9;
  --obds-info-soft:  #1A2B43;

  --obds-bg:         var(--obds-midnight);
  --obds-bg-soft:    var(--obds-mid-card);
  --obds-card:       var(--obds-mid-card);
  --obds-card-soft:  var(--obds-mid-card-2);
  --obds-border:     var(--obds-mid-border);
  --obds-text:       var(--obds-mid-ink);
  --obds-text-soft:  var(--obds-mid-ink-soft);
  --obds-text-mute:  var(--obds-mid-ink-mute);

  --obds-accent:     var(--obds-mint);
  --obds-accent-deep: var(--obds-mint-deep);
  --obds-accent-fg:  var(--obds-midnight);
  --obds-accent-pill: var(--obds-mint-soft-d);
  --obds-accent-pill-fg: var(--obds-mint);

  --obds-amber-pill: var(--obds-amber-soft-d);
  --obds-amber-pill-fg: var(--obds-amber-warm);

  --obds-shadow-soft: var(--obds-shadow-soft-d);
  --obds-shadow-lift: var(--obds-shadow-lift-d);

  --bg:        var(--obds-midnight);
  --surface:   var(--obds-mid-card);
  --surface-2: var(--obds-mid-card-2);
  --surface-3: #233040;
  --panel:     var(--obds-mid-card);
  --ink:       var(--obds-mid-ink);
  --text:      var(--obds-mid-ink);
  --muted:     var(--obds-mid-ink-soft);
  --subtle:    var(--obds-mid-ink-mute);
  --line:      var(--obds-mid-border);
  --line-strong: rgba(159, 176, 195, 0.32);
  --blue:      var(--obds-mint);
  --teal:      var(--obds-mint);
  --green:     var(--obds-mint);
  --amber:     var(--obds-amber-warm);
  --red:       #F47B79;
  --shadow:    rgba(0, 0, 0, 0.5);
}

/* ====================================================================
 * Reset + base
 * ==================================================================== */
.obds, .obds * { box-sizing: border-box; }
body.obds-app {
  margin: 0;
  background: var(--obds-bg);
  color: var(--obds-text);
  font-family: var(--obds-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Defeat legacy theme.css cascade on obds-app pages. theme.css is loaded
 * first for backwards-compat with the older dashboards, but two of its
 * rules bleed through onto the new design:
 *   1. `:root[data-theme="light"] body { background: linear-gradient(...,
 *      var(--bg)) !important }` — paints a cool-blue gradient on top of
 *      the cream obds-bg, tinting the whole landing hero.
 *   2. `:root[data-theme="light"] header { background: rgba(255,255,255,
 *      .86) !important }` — whitens every `<header>` element, including
 *      `<header class="obds-shell obds-hero">` (the marketing hero) and
 *      any `<header class="obds-section-header">`, which is what made
 *      the landing page hero look like a frosted white block on cream.
 * Specificity here is `:root[data-theme="…"] body.obds-app …` = (0,2,2)
 * — beats the legacy (0,1,2) and (0,1,1) selectors on tied source order. */
:root[data-theme="light"] body.obds-app,
:root[data-theme="dark"]  body.obds-app {
  background: var(--obds-bg) !important;
  color: var(--obds-text) !important;
}
body.obds-app header,
body.obds-app .obds-hero,
body.obds-app .obds-topnav,
body.obds-app .obds-section,
body.obds-app .obds-section-header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Defeat theme.css's `:root[data-theme="light"] a { color: var(--blue) !important; }`
 * — that legacy rule was painting every anchor on the new design with the
 * forest accent, which made:
 *   1. The hero `<a class="obds-btn obds-btn-primary">` label invisible
 *      (text colour matched the button background gradient).
 *   2. Sidebar links, top-nav links, footer links and brand-marks all
 *      drift away from their per-component design tokens.
 * Specificity here is (0,3,1) per branch — beats the legacy (0,2,1) and
 * inherits from the parent in every case so the per-component rules below
 * (`.obds-btn-primary { color: var(--obds-accent-fg) !important; }` etc.)
 * still win where it matters. */
body.obds-app a.obds-btn-primary,
body.obds-app a.obds-btn-mint    { color: var(--obds-accent-fg) !important; }
body.obds-app a.obds-btn,
body.obds-app a.obds-btn-ghost,
body.obds-app a.obds-btn-soft,
body.obds-app a.obds-btn-icon,
body.obds-app a.obds-brand,
body.obds-app a.obds-sidebar-link,
body.obds-app a.obds-sidebar-user,
body.obds-app a.obds-tab,
body.obds-app .obds-topnav a,
body.obds-app .obds-topnav-links a,
body.obds-app .obds-footer a,
body.obds-app .obds-footer-col a,
body.obds-app .obds-footer-mark a { color: inherit !important; }

/* Defeat legacy theme.css `:root[data-theme="light"] nav a` (line 424-430) which
 * paints every <a> inside a <nav> with rgba(255,255,255,0.9) + a visible border.
 * On the design-system topnav (landing page) that produced a white pill behind
 * the brand and each topnav-link, breaking the cream page treatment. The
 * .obds-btn-primary CTA escapes via its own (0,2,1) class-based bg rule. We
 * scope the reset to .obds-topnav so any in-content <nav> links keep their
 * legacy chrome. (0,2,2) beats the legacy (0,1,3). */
body.obds-app .obds-topnav a:not(.obds-btn),
body.obds-app .obds-topnav-links a,
body.obds-app a.obds-brand {
  background: transparent !important;
  border-color: transparent !important;
}
/* Re-allow the hover pill on topnav-links — must beat the reset above with
 * its own !important + matching specificity. */
body.obds-app .obds-topnav-links a:hover {
  background: color-mix(in srgb, var(--obds-text) 7%, transparent) !important;
}

/* ====================================================================
 * Layout primitives
 * ==================================================================== */
.obds-shell { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 96px; }
@media (max-width: 1180px) { .obds-shell { padding: 0 32px; } }
@media (max-width: 640px)  { .obds-shell { padding: 0 20px; } }

.obds-row    { display: flex; align-items: center; gap: 12px; }
.obds-row-tight { display: flex; align-items: center; gap: 6px; }
.obds-row-wide  { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.obds-stack  { display: flex; flex-direction: column; gap: 12px; }
.obds-grid   { display: grid; gap: 24px; }

.obds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.obds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.obds-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.obds-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .obds-grid-3, .obds-grid-4, .obds-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .obds-grid-2, .obds-grid-3, .obds-grid-4, .obds-grid-6 { grid-template-columns: 1fr; } }

/* ====================================================================
 * Type scale (matches Figma)
 * ==================================================================== */
.obds-h1 { font-size: clamp(48px, 6.5vw, 88px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.obds-h2 { font-size: clamp(32px, 3.5vw, 44px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; margin: 0; }
.obds-h3 { font-size: clamp(22px, 2vw, 28px);   font-weight: 700; line-height: 1.25; margin: 0; }
.obds-h4 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0; }
.obds-lede { font-size: 20px; line-height: 1.55; color: var(--obds-text-soft); margin: 0; }
.obds-body { font-size: 16px; line-height: 1.55; color: var(--obds-text); margin: 0; }
.obds-body-soft { font-size: 14px; line-height: 1.55; color: var(--obds-text-soft); margin: 0; }
.obds-caption { font-size: 13px; line-height: 1.45; color: var(--obds-text-soft); margin: 0; }
.obds-eyebrow {
  font-size: 11px; font-weight: 600; line-height: 1; margin: 0;
  letter-spacing: var(--obds-tracking-caps);
  color: var(--obds-text-mute);
  text-transform: uppercase;
}
.obds-eyebrow.is-mint { color: var(--obds-accent); }
.obds-num-xl { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; margin: 0; }
.obds-num    { font-size: 24px; font-weight: 700; line-height: 1; margin: 0; }

/* ====================================================================
 * Surfaces
 * ==================================================================== */
.obds-card {
  background: var(--obds-card);
  /* Hairline border in light mode: white cards on a cream page are only ~3%
   * lighter than the page bg, which on poorly-calibrated or wide-gamut
   * monitors flattens to "white blob on yellow page" with no visible edge.
   * The 1px cream-edge border restores the card boundary without adding
   * visual weight in print-quality displays. Dark mode already had a border
   * for the same reason. */
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-md);
  box-shadow: var(--obds-shadow-soft);
  padding: 20px;
}

.obds-card-lg { padding: 28px; border-radius: var(--obds-radius-lg); }
.obds-card-soft {
  background: var(--obds-card-soft);
  border-radius: var(--obds-radius-md);
  padding: 16px;
}

.obds-hero-card {
  background: linear-gradient(180deg, var(--obds-accent) 0%, var(--obds-accent-deep) 100%);
  color: var(--obds-accent-fg);
  border-radius: var(--obds-radius-lg);
  padding: 24px;
  box-shadow: var(--obds-shadow-soft);
}
:root[data-theme="dark"] .obds-hero-card { color: var(--obds-midnight); }

.obds-hero-card .obds-eyebrow,
.obds-hero-card .obds-body-soft { color: rgba(255, 255, 255, 0.78); }
:root[data-theme="dark"] .obds-hero-card .obds-eyebrow,
:root[data-theme="dark"] .obds-hero-card .obds-body-soft { color: rgba(20, 74, 57, 0.85); }

/* Buttons inside the green hero card — defeat the global `.obds-btn-soft`
 * !important rule (line 454) which would paint them cream-on-green and make
 * the affordance disappear. These are translucent-white pills that sit on
 * the forest gradient at every page width. */
.obds-hero-card .obds-btn-soft,
.obds-hero-card .obds-btn-ghost {
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--obds-accent-fg) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
.obds-hero-card .obds-btn-soft:hover,
.obds-hero-card .obds-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}
:root[data-theme="dark"] .obds-hero-card .obds-btn-soft,
:root[data-theme="dark"] .obds-hero-card .obds-btn-ghost {
  background: rgba(14, 22, 32, 0.16) !important;
  color: var(--obds-midnight) !important;
  border-color: rgba(14, 22, 32, 0.28) !important;
}

/* ====================================================================
 * Pills, tags, dots
 * ==================================================================== */
.obds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--obds-radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--obds-card-soft);
  color: var(--obds-text-soft);
  white-space: nowrap;
}
.obds-pill.is-mint  { background: var(--obds-accent-pill); color: var(--obds-accent-pill-fg); }
.obds-pill.is-amber { background: var(--obds-amber-pill); color: var(--obds-amber-pill-fg); }
.obds-pill.is-ghost { background: transparent; border: 1px solid var(--obds-border); color: var(--obds-text-soft); }
.obds-pill.is-solid { background: var(--obds-accent); color: var(--obds-accent-fg); }

.obds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.obds-dot.is-mint  { color: var(--obds-mint-text); }
.obds-dot.is-amber { color: var(--obds-amber); }
.obds-dot.is-mute  { color: var(--obds-text-mute); }

.obds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 14px;
  font-size: 12px; font-weight: 500;
  background: var(--obds-card-soft); color: var(--obds-text);
}
.obds-chip.is-mint  { background: var(--obds-accent-pill); color: var(--obds-accent-pill-fg); }
.obds-chip.is-amber { background: var(--obds-amber-pill); color: var(--obds-amber-pill-fg); }

/* ====================================================================
 * Buttons — 3D / tactile
 *
 * Recipe (per state):
 *   resting  : subtle vertical gradient + inner top highlight + soft outer drop
 *   hover    : raised 1px, drop shadow expands, gradient slightly brighter
 *   active   : pressed in (translateY +1px, drop shadow collapses, inner shadow inverts)
 *   disabled : flat, no shadows
 *
 * The 3D feel comes from box-shadow stack:
 *   - inset 0 1px highlight   → top-edge shine
 *   - inset 0 -1px shadow     → bottom-edge depth
 *   - 0 2px ambient + 0 6px key → outer drop
 * ==================================================================== */
.obds-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--obds-radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0, 0.2, 1),
              filter 0.18s ease;
  /* 3D depth — even on default state */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(28, 31, 35, 0.10),
    0 4px 14px rgba(28, 31, 35, 0.08);
}
.obds-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 2px 4px rgba(28, 31, 35, 0.10),
    0 10px 24px rgba(28, 31, 35, 0.14);
}
.obds-btn:active {
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 1px rgba(28, 31, 35, 0.08);
}
.obds-btn:disabled,
.obds-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed;
  box-shadow: none; transform: none; filter: none;
}
/* Dark-mode disabled button — `opacity: 0.5` against the near-black canvas
 * drops the label below 3:1 and the bulk-action affordance becomes invisible
 * until the user selects a row. Lift to a fixed muted-foreground colour at
 * 0.65 opacity so the text stays legible while still reading as inactive. */
:root[data-theme="dark"] .obds-btn:disabled,
:root[data-theme="dark"] .obds-btn[aria-disabled="true"] {
  opacity: 0.65;
  color: var(--obds-mid-ink-soft) !important;
}

/* Primary — forest gradient, mint-rim highlight.
 * Specificity bumped via `:root` prefix and `!important` on bg/border to win
 * over legacy theme.css (`:root[data-theme="light"] button { background: ... !important }`)
 * which would otherwise paint the "+ Capture" button white-on-ink. */
:root .obds-btn-primary,
:root[data-theme="light"] .obds-btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-accent) 85%, white 15%) 0%,
    var(--obds-accent) 55%,
    color-mix(in srgb, var(--obds-accent-deep) 92%, black 8%) 100%) !important;
  color: var(--obds-accent-fg) !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] .obds-btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-mint) 100%, white 12%) 0%,
    var(--obds-mint) 55%,
    var(--obds-mint-deep) 100%) !important;
  color: var(--obds-accent-fg) !important;
  border-color: transparent !important;
}

/* Ghost — outlined, subtle inner shine still applied */
:root .obds-btn-ghost {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card) 100%, transparent) 0%,
    color-mix(in srgb, var(--obds-card-soft) 100%, transparent) 100%) !important;
  color: var(--obds-text) !important;
  border: 1.5px solid var(--obds-text) !important;
}
:root[data-theme="dark"] .obds-btn-ghost { border-color: var(--obds-text) !important; }

/* Soft — subtle bevel on a neutral surface */
:root .obds-btn-soft {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card-soft) 80%, white 20%) 0%,
    var(--obds-card-soft) 100%) !important;
  color: var(--obds-text) !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] .obds-btn-soft {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card-soft) 80%, white 4%) 0%,
    var(--obds-card-soft) 100%);
}

/* Mint pill — soft mint with shine */
.obds-btn-mint {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-accent-pill) 70%, white 30%) 0%,
    var(--obds-accent-pill) 100%);
  color: var(--obds-accent-pill-fg) !important;
}

/* Amber pill — soft amber with shine */
.obds-btn-amber {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-amber-pill) 75%, white 25%) 0%,
    var(--obds-amber-pill) 100%);
  color: var(--obds-amber-pill-fg);
}

.obds-btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.obds-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }

.obds-btn-icon {
  width: 36px; height: 36px; padding: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card-soft) 80%, white 20%) 0%,
    var(--obds-card-soft) 100%);
  color: var(--obds-text);
  border-radius: var(--obds-radius-pill);
}
:root[data-theme="dark"] .obds-btn-icon {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card-soft) 80%, white 4%) 0%,
    var(--obds-card-soft) 100%);
}

/* ====================================================================
 * Brand mark (logo)
 * ==================================================================== */
.obds-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
/* Render the master Concept-C SVG as the brand-mark background, hiding any
 * emoji/text the page-author put inside the <span>. Kept as a background
 * image so we don't have to edit every <span class="obds-brand-mark">🧠</span>
 * across nine pages. The forest rounded-square is baked into icon.svg. */
.obds-brand-mark {
  width: 36px; height: 36px; border-radius: var(--obds-radius-xs);
  background: url("/dashboard/brand/icon.svg") center/cover no-repeat,
              var(--obds-accent);
  font-size: 0;          /* hide the emoji text node inside the span */
  color: transparent;
  display: grid; place-items: center;
  color: var(--obds-accent-fg);
  font-size: 18px; line-height: 1;
}
.obds-brand-name { font-size: 18px; font-weight: 600; color: var(--obds-text); letter-spacing: -0.01em; }
.obds-topnav .obds-brand-name { font-size: 20px; }

/* ====================================================================
 * Top nav (marketing site)
 * ==================================================================== */
.obds-topnav {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; padding: 0 96px;
}
.obds-topnav-links { display: flex; align-items: center; gap: 8px; }
.obds-topnav-links a {
  font-size: 16px; font-weight: 500;
  color: var(--obds-text-soft); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.obds-topnav-links a:hover {
  color: var(--obds-text);
  background: color-mix(in srgb, var(--obds-text) 7%, transparent);
}
.obds-topnav-links a:active { transform: translateY(1px); }
.obds-topnav .obds-btn { height: 36px; padding: 0 18px; font-size: 14px; }
@media (max-width: 1180px) {
  .obds-topnav { padding: 0 32px; }
  .obds-topnav-links { gap: 24px; }
}
@media (max-width: 880px) {
  .obds-topnav-links { display: none; }
}

/* ====================================================================
 * Marketing hero
 * ==================================================================== */
.obds-hero {
  display: grid; grid-template-columns: 1fr 380px; gap: 64px;
  padding: 80px 0 120px;
  /* Centre vertically against the 740px phone mock so the left column
   * doesn't trail off into a tall empty band when the headline + lede +
   * actions + status only run ~520px tall. */
  align-items: center;
}
@media (max-width: 1180px) { .obds-hero { grid-template-columns: 1fr; gap: 48px; } }

.obds-hero h1 { margin: 24px 0 32px; }
.obds-hero .obds-lede { max-width: 700px; margin-bottom: 40px; }
.obds-hero-actions { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }

/* Phone mock card embedded in landing hero */
.obds-phone-mock {
  width: 380px; height: 740px;
  background: var(--obds-ink);
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--obds-shadow-lift);
}
:root[data-theme="dark"] .obds-phone-mock { background: #000; }
.obds-phone-screen {
  width: 100%; height: 100%;
  background: var(--obds-bg);
  border-radius: 28px;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.obds-phone-statusbar { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 0 8px; }

/* ====================================================================
 * Section header
 * ==================================================================== */
.obds-section { padding: 80px 0; }
.obds-section-header { margin-bottom: 56px; max-width: 760px; }
.obds-section-header .obds-eyebrow { margin-bottom: 16px; }
.obds-section-header h2 { margin-bottom: 24px; }

/* ====================================================================
 * Source / feature tile (used in 6-up grid)
 * ==================================================================== */
.obds-tile {
  background: var(--obds-card);
  /* Hairline border — see .obds-card comment. */
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-lg);
  padding: 24px;
  box-shadow: var(--obds-shadow-soft);
  display: flex; gap: 16px; align-items: flex-start;
}
:root[data-theme="dark"] .obds-tile { border: 1px solid var(--obds-border); }
.obds-tile-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: var(--obds-card-soft);
  border-radius: var(--obds-radius-sm);
  display: grid; place-items: center;
  font-size: 22px;
}
.obds-tile-body h4 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--obds-text); }
.obds-tile-body p { font-size: 14px; line-height: 1.55; color: var(--obds-text-soft); margin: 0; }

/* ====================================================================
 * Big feature card (3-up)
 * ==================================================================== */
.obds-feature {
  border-radius: var(--obds-radius-xl);
  padding: 28px;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--obds-shadow-soft);
}
.obds-feature .obds-eyebrow { margin-bottom: 56px; }
.obds-feature h3 { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; }
.obds-feature p { font-size: 15px; line-height: 1.6; margin: 0; }
.obds-feature.is-forest { background: linear-gradient(180deg, var(--obds-forest) 0%, var(--obds-forest-deep) 100%); color: var(--obds-white); }
.obds-feature.is-forest .obds-eyebrow { color: var(--obds-mint-soft-l); }
.obds-feature.is-forest p { color: var(--obds-mint-soft-l); }
/* Soft/ghost buttons on forest panels — without these the global cream-fill
 * cascade paints them cream-on-forest, near-invisible. */
.obds-feature.is-forest .obds-btn-soft,
.obds-feature.is-forest .obds-btn-ghost {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--obds-white) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
/* is-cream shifted from #FBE1CE→#F2EFE6 (peach→cream) to a clearer tan range
 * so the panel doesn't read as yellow on wide-gamut monitors and so that
 * white cards dropped on top remain distinguishable. */
.obds-feature.is-cream  { background: linear-gradient(180deg, #F4D7B8 0%, #ECC59B 100%); color: var(--obds-ink); }
.obds-feature.is-cream  .obds-eyebrow { color: var(--obds-amber); }
.obds-feature.is-cream  .obds-btn-soft,
.obds-feature.is-cream  .obds-btn-ghost {
  background: rgba(95, 46, 16, 0.14) !important;
  color: #5F2E10 !important;
  border-color: rgba(95, 46, 16, 0.28) !important;
}
.obds-feature.is-paper  { background: linear-gradient(180deg, var(--obds-white) 0%, var(--obds-cream-deep) 100%); color: var(--obds-ink); }
.obds-feature.is-paper  .obds-eyebrow { color: var(--obds-mint-text); }
:root[data-theme="dark"] .obds-feature.is-forest { background: linear-gradient(180deg, var(--obds-mint) 0%, var(--obds-mint-deep) 100%); color: var(--obds-midnight); }
:root[data-theme="dark"] .obds-feature.is-forest .obds-eyebrow,
:root[data-theme="dark"] .obds-feature.is-forest p { color: rgba(20, 74, 57, 0.85); }
:root[data-theme="dark"] .obds-feature.is-cream { background: linear-gradient(180deg, var(--obds-mid-card-2) 0%, var(--obds-mid-card) 100%); color: var(--obds-mid-ink); border: 1px solid var(--obds-border); }
:root[data-theme="dark"] .obds-feature.is-cream .obds-eyebrow { color: var(--obds-amber-warm); }
:root[data-theme="dark"] .obds-feature.is-cream p { color: var(--obds-mid-ink-soft); }
:root[data-theme="dark"] .obds-feature.is-paper { background: linear-gradient(180deg, var(--obds-mid-card) 0%, var(--obds-midnight) 100%); color: var(--obds-mid-ink); border: 1px solid var(--obds-border); }
:root[data-theme="dark"] .obds-feature.is-paper .obds-eyebrow { color: var(--obds-mint); }
:root[data-theme="dark"] .obds-feature.is-paper p { color: var(--obds-mid-ink-soft); }

/* ====================================================================
 * Wide gradient band (memory-graph preview)
 * ==================================================================== */
.obds-band {
  border-radius: var(--obds-radius-2xl);
  padding: 64px 56px;
  box-shadow: var(--obds-shadow-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  background: linear-gradient(180deg, var(--obds-forest) 0%, var(--obds-forest-deep) 100%);
  color: var(--obds-white);
}
.obds-band .obds-eyebrow { color: var(--obds-mint-soft-l); }
.obds-band .obds-body-soft { color: var(--obds-mint-soft-l); }
@media (max-width: 880px) { .obds-band { grid-template-columns: 1fr; padding: 40px 28px; } }
:root[data-theme="dark"] .obds-band {
  background: linear-gradient(180deg, var(--obds-mid-card-2) 0%, var(--obds-mid-card) 100%);
  color: var(--obds-mid-ink);
  border: 1px solid var(--obds-border);
}
:root[data-theme="dark"] .obds-band .obds-eyebrow { color: var(--obds-mint); }
:root[data-theme="dark"] .obds-band .obds-body-soft { color: var(--obds-mid-ink-soft); }

/* SVG memory-graph viz */
.obds-graphviz { width: 100%; height: 360px; }
.obds-graphviz .gv-line { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
:root[data-theme="dark"] .obds-graphviz .gv-line { stroke: rgba(95, 224, 182, 0.32); }
.obds-graphviz .gv-amber { fill: var(--obds-amber-warm); }
.obds-graphviz .gv-mint  { fill: var(--obds-mint); }
.obds-graphviz .gv-white { fill: rgba(255, 255, 255, 0.92); }
:root[data-theme="dark"] .obds-graphviz .gv-white { fill: var(--obds-mid-ink); }
.obds-graphviz text { fill: var(--obds-white); font-size: 11px; font-weight: 600; text-anchor: middle; }
:root[data-theme="dark"] .obds-graphviz text { fill: var(--obds-mid-ink); }

/* ====================================================================
 * Pricing strip
 * ==================================================================== */
.obds-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .obds-pricing { grid-template-columns: 1fr; } }
.obds-price-card {
  background: var(--obds-card);
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-lg);
  padding: 24px;
  box-shadow: var(--obds-shadow-soft);
}
.obds-price-card.is-feature {
  background: var(--obds-accent); color: var(--obds-accent-fg);
}
.obds-price-card.is-feature .obds-eyebrow { color: rgba(217, 239, 227, 0.78); }
.obds-price-card.is-feature .obds-caption { color: rgba(217, 239, 227, 0.72); }
:root[data-theme="dark"] .obds-price-card.is-feature .obds-eyebrow,
:root[data-theme="dark"] .obds-price-card.is-feature .obds-caption { color: rgba(20, 74, 57, 0.78); }

/* ====================================================================
 * CTA banner
 * ==================================================================== */
.obds-cta-banner {
  border-radius: var(--obds-radius-2xl);
  padding: 56px;
  background: var(--obds-ink);
  color: var(--obds-white);
  display: flex; flex-direction: column; gap: 24px;
}
.obds-cta-banner h2 { color: var(--obds-white); }
.obds-cta-banner .obds-lede { color: rgba(255, 255, 255, 0.72); max-width: 720px; }
.obds-cta-banner .obds-btn-primary { background: var(--obds-mint) !important; color: var(--obds-forest-deep) !important; }
/* Soft/ghost on dark CTA banner — defeat the global cream-fill cascade. */
.obds-cta-banner .obds-btn-soft,
.obds-cta-banner .obds-btn-ghost {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--obds-white) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.obds-cta-banner .obds-btn-soft:hover,
.obds-cta-banner .obds-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}
:root[data-theme="dark"] .obds-cta-banner {
  background: linear-gradient(180deg, var(--obds-mint) 0%, var(--obds-mint-deep) 100%);
  color: var(--obds-midnight);
}
:root[data-theme="dark"] .obds-cta-banner h2 { color: var(--obds-midnight); }
:root[data-theme="dark"] .obds-cta-banner .obds-lede { color: rgba(20, 74, 57, 0.85); }
:root[data-theme="dark"] .obds-cta-banner .obds-btn-primary { background: var(--obds-midnight); color: var(--obds-mint); }

/* ====================================================================
 * Footer
 * ==================================================================== */
.obds-footer { padding: 56px 0 40px; }
.obds-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; margin-bottom: 56px; }
@media (max-width: 880px) { .obds-footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.obds-footer-col h4 { font-size: 13px; font-weight: 600; color: var(--obds-text); margin: 0 0 12px; }
.obds-footer-col a { display: block; font-size: 13px; color: var(--obds-text-soft); padding: 4px 0; text-decoration: none; }
.obds-footer-col a:hover { color: var(--obds-text); }
.obds-footer-mark p { font-size: 13px; color: var(--obds-text-soft); margin: 12px 0 0; line-height: 1.55; }
.obds-footer-base { font-size: 12px; color: var(--obds-text-mute); }

/* ====================================================================
 * App shell (dashboard / inbox)
 * ==================================================================== */
/* Apply the grid only to the wrapper <div class="obds-app">, NOT to body.
 * Both body and the wrapper div carry the obds-app class — body for base
 * styling (background/colour/font), wrapper for the actual sidebar+canvas
 * grid. Without :not(body) the body itself becomes a 240px+1fr grid that
 * squeezes the wrapper div into the 240px column. Bug fixed 2026-05-04. */
.obds-app:not(body) { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
/* Sticky sidebar — stays pinned to the viewport while the canvas scrolls.
 * `align-self: start` prevents the grid row from stretching the sidebar
 * to the full document height (which would defeat sticky). `height: 100vh`
 * + `overflow-y: auto` keeps the brand always visible at the top, the
 * sections in a scrollable middle, and the user card pinned to the bottom
 * via `.obds-sidebar-user { margin-top: auto }`. */
.obds-sidebar {
  background: var(--obds-bg-soft);
  /* Bottom padding bumped 16 → 28 so the user card never hugs the
   * viewport edge — previously it was visually clipped on shorter
   * laptop screens (audit feedback 2026-05-21). */
  padding: 28px 12px 28px;
  position: sticky;
  top: 0;
  align-self: start;
  /* Use dvh (dynamic viewport) so the sidebar height adapts when the
   * browser UI (address bar) collapses. Falls back to 100vh on older
   * engines. */
  height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column;
  overflow-y: auto;
  /* Thin custom scrollbar so it doesn't compete with content */
  scrollbar-width: thin;
  scrollbar-color: var(--obds-border) transparent;
}
.obds-sidebar::-webkit-scrollbar { width: 6px; }
.obds-sidebar::-webkit-scrollbar-thumb { background: var(--obds-border); border-radius: 3px; }
.obds-sidebar .obds-brand { padding: 0 12px 24px; flex: 0 0 auto; }

.obds-sidebar-section { padding: 0 12px; margin-bottom: 8px; }
.obds-sidebar-section .obds-eyebrow { padding: 4px 12px; }

.obds-sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--obds-radius-sm);
  font-size: 14px; font-weight: 500; color: var(--obds-text-soft);
  text-decoration: none; cursor: pointer;
  margin: 2px 0;
}
.obds-sidebar-link:hover { background: var(--obds-card); color: var(--obds-text); }
.obds-sidebar-link.is-active {
  background: color-mix(in srgb, var(--obds-accent) 12%, transparent);
  color: var(--obds-accent); font-weight: 600;
}
:root[data-theme="dark"] .obds-sidebar-link.is-active { background: color-mix(in srgb, var(--obds-accent) 18%, transparent); }
/* Lock the emoji icon container to a consistent box and force the platform
 * coloured-emoji font, so a 🏠 in macOS Chrome doesn't render visually larger
 * than a 🏠 in Windows Edge. (Audit P2-10. Full SVG migration tracked
 * separately as a larger refactor.) */
.obds-sidebar-link .obds-link-icon {
  font-size: 16px;
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  text-align: center; line-height: 1;
  flex: 0 0 20px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}
.obds-sidebar-link .obds-link-badge {
  margin-left: auto; min-width: 22px; padding: 0 6px; height: 18px; line-height: 18px;
  border-radius: 9px; background: var(--obds-amber); color: var(--obds-bg);
  font-size: 11px; font-weight: 600; text-align: center;
}

/* User card pinned to the bottom of the sticky sidebar via flex auto-margin.
 * Clickable: theme.js promotes the static <div> to an <a> at boot and points
 * it at /dashboard/profile.html. Caret on the right is the visible link
 * affordance so the card reads as actionable, not decorative. */
.obds-sidebar-user {
  margin-top: auto;
  /* Keep a gap above the user card so the section list above doesn't
   * touch it, and a small margin below so it's never visually flush
   * against the viewport bottom (audit feedback 2026-05-21). */
  margin-bottom: 4px;
  flex: 0 0 auto;
  background: var(--obds-card-soft); border-radius: var(--obds-radius-md);
  padding: 12px; display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.obds-sidebar-user:hover { background: var(--obds-card); transform: translateY(-1px); }
.obds-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--obds-amber); color: var(--obds-bg);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  flex: 0 0 auto;
}
.obds-user-meta { line-height: 1.3; flex: 1 1 auto; min-width: 0; }
/* Long names (the audit reported "Mayank Apoor" instead of "Mayank Apoorv"
 * truncating without an ellipsis under ~1100 px). Force single-line ellipsis
 * so we get a clean "Mayank Ap…" instead of a hard chop. */
.obds-user-meta strong {
  display: block; font-size: 13px; font-weight: 600; color: var(--obds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.obds-user-meta span  { display: block; font-size: 11px; color: var(--obds-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obds-user-caret {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--obds-text-soft);
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.obds-sidebar-user:hover .obds-user-caret { opacity: 1; transform: translateX(2px); }

.obds-canvas { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; }
/* Belt-and-braces: the canvas body and any direct grid/flex child should
 * always be allowed to shrink below its intrinsic content size. Without this,
 * a single wide table or chart in a grid cell forces the canvas wider than
 * the viewport and the user gets a horizontal scrollbar on standard 13"
 * laptops. (Reported in the UI audit against ops, setup, model-hub and
 * dashboard-legacy.) Children opt back in via `min-width: max-content` if
 * they explicitly need it. */
.obds-canvas-body > * { min-width: 0; }
.obds-topbar {
  height: 64px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 32px;
  border-bottom: 1px solid var(--obds-border);
  background: var(--obds-bg);
}
.obds-search {
  flex: 1; max-width: 480px;
  height: 36px; padding: 0 14px;
  border-radius: var(--obds-radius-pill);
  background: var(--obds-card-soft);
  border: 0; color: var(--obds-text);
  font-family: inherit; font-size: 13px;
}
.obds-search::placeholder { color: var(--obds-text-mute); }
.obds-topbar-spacer { flex: 1; }

/* Search wrapper — enables an absolutely-positioned results dropdown
 * directly under the input. The wrapper takes over the flex/max-width
 * sizing so the inner input still spans the full pill width. */
.obds-search-wrap {
  position: relative;
  flex: 1; max-width: 480px;
}
.obds-search-wrap > .obds-search { width: 100%; max-width: none; flex: none; }
.obds-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--obds-card);
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-md);
  box-shadow: var(--obds-shadow-lift);
  max-height: 64vh; overflow-y: auto;
  padding: 6px;
  z-index: 40;
  display: none;
}
.obds-search-results[data-open="true"] { display: block; }
.obds-search-result {
  display: block;
  padding: 9px 10px; border-radius: var(--obds-radius-sm);
  cursor: pointer; text-decoration: none; color: var(--obds-text);
  border: 1px solid transparent;
}
.obds-search-result + .obds-search-result { margin-top: 2px; }
.obds-search-result:hover,
.obds-search-result.is-active {
  background: var(--obds-card-soft);
  border-color: var(--obds-border);
}
.obds-search-result-title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obds-search-result-snippet {
  font-size: 12px; color: var(--obds-text-soft); line-height: 1.4;
  margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.obds-search-result-meta {
  display: flex; gap: 6px; align-items: center; margin-top: 6px;
  font-size: 11px; color: var(--obds-text-mute);
}
.obds-search-result-meta .obds-pill { padding: 2px 8px; font-size: 10px; }
.obds-search-empty,
.obds-search-error {
  padding: 14px; font-size: 12px; color: var(--obds-text-soft); text-align: center;
}
.obds-search-error { color: #C8514F; }

.obds-canvas-body { padding: 32px; flex: 1; min-width: 0; }
.obds-page-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.obds-page-title h1 { font-size: 36px; font-weight: 700; margin: 0; color: var(--obds-text); }
.obds-page-title .obds-caption { color: var(--obds-text-soft); }

/* Dashboard layout grid.
 * Both columns use `minmax(0, ...)` so the right rail never forces the canvas
 * to overflow its parent (the audit reported clipped "Awaiting review" /
 * "Today's spend" cards on viewports up to ~1340 px). Below 1340 px the rail
 * stacks under the main column. */
.obds-dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 1340px) { .obds-dashboard-grid { grid-template-columns: 1fr; } }

/* ====================================================================
 * Stat tile (KPI)
 * ==================================================================== */
.obds-stat {
  background: var(--obds-card);
  /* Same hairline-border rationale as .obds-card — see comment there. */
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-md);
  padding: 16px 20px;
  box-shadow: var(--obds-shadow-soft);
}
.obds-stat-num { font-size: 32px; font-weight: 700; line-height: 1; margin: 0; }
.obds-stat-num.is-amber { color: var(--obds-amber); }
.obds-stat-num.is-mint  { color: var(--obds-accent); }
.obds-stat-num.is-ink   { color: var(--obds-text); }
.obds-stat-label { font-size: 13px; font-weight: 600; color: var(--obds-text); margin: 16px 0 4px; }
.obds-stat-sub   { font-size: 11px; color: var(--obds-text-soft); margin: 0; }

/* ====================================================================
 * Quick capture row
 * ==================================================================== */
.obds-qc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) { .obds-qc-grid { grid-template-columns: repeat(2, 1fr); } }

.obds-qc-tile {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card) 100%, white 6%) 0%,
    var(--obds-card) 100%);
  border-radius: var(--obds-radius-md);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  border: 0;
  font-family: inherit; text-align: left;
  color: var(--obds-text);
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0, 0.2, 1),
              filter 0.18s ease;
  /* 3D depth */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(28, 31, 35, 0.08),
    0 6px 16px rgba(28, 31, 35, 0.08);
}
:root[data-theme="dark"] .obds-qc-tile {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-card) 100%, white 4%) 0%,
    var(--obds-card) 100%);
  border: 1px solid var(--obds-border);
}
.obds-qc-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(28, 31, 35, 0.10),
    0 12px 28px rgba(28, 31, 35, 0.14);
}
.obds-qc-tile:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.10),
    0 1px 1px rgba(28, 31, 35, 0.06);
}
.obds-qc-tile.is-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-accent) 88%, white 12%) 0%,
    var(--obds-accent) 50%,
    var(--obds-accent-deep) 100%);
  color: var(--obds-accent-fg);
}
:root[data-theme="dark"] .obds-qc-tile.is-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--obds-mint) 100%, white 8%) 0%,
    var(--obds-mint) 50%,
    var(--obds-mint-deep) 100%);
}
:root[data-theme="dark"] .obds-qc-tile.is-active { color: var(--obds-midnight); }
.obds-qc-icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--obds-card-soft); display: grid; place-items: center;
  font-size: 16px;
}
.obds-qc-tile.is-active .obds-qc-icon { background: rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] .obds-qc-tile.is-active .obds-qc-icon { background: rgba(20, 74, 57, 0.28); }
.obds-qc-text strong { display: block; font-size: 14px; font-weight: 600; }
.obds-qc-text span { display: block; font-size: 12px; opacity: 0.78; margin-top: 2px; }

/* ====================================================================
 * Activity / inbox list
 * ==================================================================== */
.obds-activity { display: flex; flex-direction: column; gap: 12px; }
.obds-activity-row {
  background: var(--obds-card);
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-md);
  padding: 14px 16px;
  box-shadow: var(--obds-shadow-soft);
  display: flex; flex-direction: column; gap: 8px;
}
:root[data-theme="dark"] .obds-activity-row { border: 1px solid var(--obds-border); }
.obds-activity-row .obds-row { gap: 8px; flex-wrap: wrap; }
.obds-activity-row p { margin: 0; font-size: 13px; color: var(--obds-text); line-height: 1.45; }

.obds-inbox-row {
  background: var(--obds-card);
  border-radius: var(--obds-radius-md);
  padding: 10px 14px;
  box-shadow: var(--obds-shadow-soft);
  cursor: pointer;
  border: 1px solid var(--obds-border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.obds-inbox-row:hover { transform: translateY(-1px); }
.obds-inbox-row.is-selected { border: 2px solid var(--obds-accent); padding: 9px 13px; }
.obds-inbox-row.is-muted .obds-inbox-title { color: var(--obds-text-soft); }
.obds-inbox-row .obds-inbox-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.obds-inbox-row .obds-inbox-head .obds-pending {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--obds-amber);
}
/* Title and body always single-line + ellipsis. The list pane is bounded by
 * height (max-height: calc(100vh - 260px) on inbox.html), so we trade a few
 * pixels of body preview for far better scannability of long lists. */
.obds-inbox-title {
  font-size: 13px; font-weight: 600; color: var(--obds-text); margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.obds-inbox-body  {
  font-size: 12px; line-height: 1.45; color: var(--obds-text-soft); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ====================================================================
 * Birbal next-action panel (amber)
 * ==================================================================== */
.obds-birbal {
  /* Tan/amber gradient — earlier peach (#FBE1CE → #F9D6BB) read as yellow on
   * wide-gamut monitors and made cream-on-peach buttons inside the panel
   * disappear. Shifted toward a clearly amber/tan range. */
  background: linear-gradient(180deg, #F4D7B8 0%, #ECC59B 100%);
  color: var(--obds-amber);
  border: 1px solid rgba(95, 46, 16, 0.10);
  border-radius: var(--obds-radius-lg);
  padding: 24px;
  box-shadow: var(--obds-shadow-soft);
}
.obds-birbal h3 { color: #5F2E10; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.obds-birbal p  { color: #82461E; font-size: 13px; line-height: 1.55; margin: 0 0 20px; }
/* `!important` here is required to win over `:root .obds-btn-primary` /
 * `:root .obds-btn-soft` (line 425/454) which both use !important and would
 * otherwise paint these as forest-green-on-peach (primary) and
 * cream-on-peach (soft → looked white-on-yellow). */
.obds-birbal .obds-btn-primary { background: #5F2E10 !important; color: #F4D7B8 !important; }
.obds-birbal .obds-btn-soft    { background: rgba(95, 46, 16, 0.14) !important; color: #5F2E10 !important; }
:root[data-theme="dark"] .obds-birbal {
  background: linear-gradient(180deg, var(--obds-amber-warm) 0%, #DF8232 100%);
  border-color: rgba(46, 24, 10, 0.18);
}
:root[data-theme="dark"] .obds-birbal h3 { color: #2E180A; }
:root[data-theme="dark"] .obds-birbal p  { color: #46220F; }
:root[data-theme="dark"] .obds-birbal .obds-btn-primary { background: #2E180A !important; color: var(--obds-amber-warm) !important; }
:root[data-theme="dark"] .obds-birbal .obds-btn-soft    { background: rgba(46, 24, 10, 0.20) !important; color: #2E180A !important; }

/* ====================================================================
 * Inbox detail pane
 * ==================================================================== */
.obds-detail {
  background: var(--obds-card);
  border: 1px solid var(--obds-border);
  border-radius: var(--obds-radius-xl);
  box-shadow: var(--obds-shadow-soft);
  display: flex; flex-direction: column;
}
.obds-detail-header { padding: 28px 28px 0; }
.obds-detail-section { padding: 0 28px; margin-top: 24px; }
.obds-detail-section .obds-eyebrow { margin-bottom: 12px; }
.obds-detail-actions {
  margin-top: auto;
  background: var(--obds-card-soft);
  border-bottom-left-radius: var(--obds-radius-xl);
  border-bottom-right-radius: var(--obds-radius-xl);
  padding: 16px 24px;
  display: flex; gap: 12px; align-items: center; justify-content: flex-end;
}
.obds-detail-actions .obds-spacer { flex: 1; }

.obds-waveform {
  background: var(--obds-card-soft);
  border-radius: var(--obds-radius-md);
  padding: 16px;
  display: flex; align-items: center; gap: 16px;
}
.obds-wave-play {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--obds-accent); color: var(--obds-accent-fg);
  display: grid; place-items: center; font-size: 16px;
  border: 0; cursor: pointer;
}
.obds-wave-bars {
  flex: 1; display: flex; align-items: center; gap: 3px; height: 48px;
}
.obds-wave-bars span {
  display: inline-block; width: 3px; border-radius: 2px;
  background: var(--obds-text-mute); opacity: 0.4;
}
.obds-wave-bars span.is-played { background: var(--obds-accent); opacity: 1; }

.obds-transcript {
  background: var(--obds-card-soft);
  border-radius: var(--obds-radius-md);
  padding: 14px 18px;
  font-size: 14px; line-height: 1.55;
  color: var(--obds-text);
}

.obds-ai-summary {
  background: linear-gradient(180deg, var(--obds-accent) 0%, var(--obds-accent-deep) 100%);
  color: var(--obds-accent-fg);
  border-radius: var(--obds-radius-md);
  padding: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
:root[data-theme="dark"] .obds-ai-summary { color: var(--obds-midnight); }
.obds-ai-summary .obds-ai-icon {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--obds-radius-xs);
  background: rgba(255, 255, 255, 0.16); display: grid; place-items: center;
}
:root[data-theme="dark"] .obds-ai-summary .obds-ai-icon { background: rgba(20, 74, 57, 0.18); }
.obds-ai-summary strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.obds-ai-summary p { font-size: 13px; line-height: 1.55; margin: 0; opacity: 0.85; }

.obds-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ====================================================================
 * Tabs
 * ==================================================================== */
.obds-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.obds-tab {
  height: 32px; padding: 0 16px; border-radius: var(--obds-radius-pill);
  background: transparent; color: var(--obds-text-soft);
  font-family: inherit; font-size: 13px; font-weight: 500;
  border: 0; cursor: pointer;
}
.obds-tab:hover { background: var(--obds-card-soft); color: var(--obds-text); }
.obds-tab.is-active { background: var(--obds-accent); color: var(--obds-accent-fg); font-weight: 600; }

/* ====================================================================
 * Status footer chip
 * ==================================================================== */
.obds-status-chip {
  background: var(--obds-card-soft);
  border-radius: var(--obds-radius-pill);
  padding: 8px 14px;
  font-size: 11px; color: var(--obds-text-soft);
  display: inline-flex; align-items: center; gap: 8px;
}

/* ====================================================================
 * Utilities
 * ==================================================================== */
.obds-mt-4  { margin-top: 4px; }
.obds-mt-8  { margin-top: 8px; }
.obds-mt-12 { margin-top: 12px; }
.obds-mt-16 { margin-top: 16px; }
.obds-mt-24 { margin-top: 24px; }
.obds-mt-32 { margin-top: 32px; }
.obds-mt-48 { margin-top: 48px; }
.obds-mt-64 { margin-top: 64px; }
.obds-mb-4  { margin-bottom: 4px; }
.obds-mb-8  { margin-bottom: 8px; }
.obds-mb-12 { margin-bottom: 12px; }
.obds-mb-16 { margin-bottom: 16px; }
.obds-mb-24 { margin-bottom: 24px; }
.obds-mb-32 { margin-bottom: 32px; }
.obds-text-center { text-align: center; }
.obds-text-mute { color: var(--obds-text-mute); }
.obds-text-soft { color: var(--obds-text-soft); }
.obds-flex-1 { flex: 1; }
.obds-hidden { display: none !important; }

/* ====================================================================
 * A11y skip link — first focusable element in <body>. Becomes visible
 * only on keyboard focus. Jumps the user past the sidebar to the
 * canvas <main>. Pair with id="main" on the page's <main> element.
 * ==================================================================== */
.obds-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--obds-accent);
  color: var(--obds-accent-fg);
  padding: 10px 16px;
  border-radius: var(--obds-radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 10000;
}
.obds-skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--obds-accent-fg);
  outline-offset: 2px;
}

/* Theme toggle button override (matches new design) */
body.obds-app .theme-toggle {
  background: var(--obds-card-soft);
  border: 0;
  color: var(--obds-text);
  border-radius: var(--obds-radius-pill);
  width: 36px; height: 36px;
  padding: 0;
  font-size: 14px;
}

/* ====================================================================
 * Mobile layout (≤ 880px)
 *
 * Before this block the app shell was hard-pinned to a 240px sidebar at
 * every viewport width. On a 360px phone that meant two-thirds of the
 * screen was navigation chrome — every page rendered as a thin strip on
 * the right. The fixes below:
 *   • Collapse the grid to a single column.
 *   • Reflow the sidebar into a horizontally-scrollable top strip so the
 *     nav remains accessible without a separate hamburger overlay.
 *   • Hide brand mark and the user card (those live on the Profile page).
 *   • Shrink topbar / canvas padding, page-title type, capture quickbar.
 *   • Allow the 5-tab capture mode picker to wrap onto two rows.
 * ==================================================================== */
@media (max-width: 880px) {
  .obds-app:not(body) {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .obds-sidebar {
    position: sticky; top: 0;
    height: auto; max-height: 64px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px;
    gap: 6px;
    border-bottom: 1px solid var(--obds-border);
    z-index: 30;
    scrollbar-width: none;
  }
  .obds-sidebar::-webkit-scrollbar { display: none; }
  .obds-sidebar .obds-brand,
  .obds-sidebar-user { display: none; }
  .obds-sidebar-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  .obds-sidebar-section .obds-eyebrow { display: none; }
  .obds-sidebar-link {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 12px;
    border-radius: var(--obds-radius-pill);
  }
  .obds-sidebar-link .obds-link-icon {
    width: 16px; height: 16px; font-size: 14px; flex: 0 0 16px;
  }
  .obds-sidebar-link .obds-link-badge {
    height: 16px; line-height: 16px; min-width: 18px; font-size: 10px;
  }

  /* Topbar — cut padding, hide search wrap if it crowds the icons.
   * Keep the search input but let it shrink down to ~140px. */
  .obds-topbar {
    height: 56px;
    padding: 0 12px;
    gap: 8px;
  }
  .obds-search-wrap { max-width: none; min-width: 0; }
  .obds-search { font-size: 12px; }

  /* Canvas — tighter gutters and add bottom space so the last KPI isn't
   * masked by the floating toast / mobile browser chrome. */
  .obds-canvas-body { padding: 16px 16px 32px; }
  .obds-page-title { margin-bottom: 20px; }
  .obds-page-title h1 { font-size: 28px; }

  /* Dashboard collapses to single column. Was 1340px — far too late
   * for the right rail (Birbal + Capture) which was forcing the main
   * column down to a postage stamp on tablets. */
  .obds-dashboard-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  .obds-canvas-body { padding: 12px 12px 28px; }
  .obds-page-title h1 { font-size: 24px; }

  /* Capture quickbar: 5 buttons × flex:1 at 360px = ~64px each — too
   * cramped to read the label. Allow wrap so the buttons split onto
   * two rows of ~50% width each. min-width keeps them tappable. */
  .ob-cap-quickbar { flex-wrap: wrap; }
  .ob-cap-quickbar button { flex: 1 1 calc(33% - 6px); min-width: 88px; height: 52px; }
}

/* iOS / Android safe-area inset so the dashboard content doesn't sit
 * under the system UI bars on PWA installs. */
@supports (padding: max(0px)) {
  @media (max-width: 880px) {
    .obds-canvas-body {
      padding-left:  max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
      padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
  }
}