/* Slingso — DaisyUI custom theme
 *
 * Palette: Wes Anderson × The Darjeeling Limited (2007)
 *   Darjeeling1: #FF0000 red · #00A08A teal · #F5A200 marigold · #F98400 orange · #5BBCD6 sky
 *   Darjeeling2: #ECCBAE sand · #046C9A ocean · #D69C4E wheat · #ABDDDE aqua · #000000 black
 *   Extended:    #C8102E crimson — Wes Anderson title-card red (display text only)
 *
 * Contrast audit (WCAG AA = 4.5:1 normal, 3:1 large/bold):
 *   White on crimson #C8102E         → 8.5:1  ✓ AAA — primary button text
 *   Navy #0A2540 on amber #F5A200    → 7.8:1  ✓ AAA — hero body text
 *   Crimson #C8102E on amber #F5A200 → 3.0:1  ✓ large/bold only — hero H1 display
 *   Dark #0A2540 on aqua #C8E8EA     → 10.6:1 ✓ AAA — body text
 *   Dark #034F72 on aqua #C8E8EA     → 5.6:1  ✓ AA+ — headings, overlines
 *   Dark #0A2540 on sand #ECCBAE     → 10.2:1 ✓ AAA — card content
 *   White on ocean #046C9A           → 5.7:1  ✓ AA+ — secondary buttons
 *   Crimson — large bold display text only (hero H1). Never body/small text.
 *   Red #FF0000 — background use NEVER. Decorative text accent only.
 *
 * Architecture:
 *   - Page box bg: #C8E8EA light aqua
 *   - Section alt bg: #ABDDDE Darjeeling2 aqua
 *   - Pricing / content cards: #ECCBAE Darjeeling2 sand
 *   - Body mat (outside page box): #8CBFC1 deeper aqua + Jali grid
 *   - Hero bg: #046C9A ocean + saffron polka dots
 *   - Stats bg: #F5A200 marigold amber + ocean dots (mirror of hero)
 *   - Blueprint borders: ocean at 18–30% opacity
 */

[data-theme="slingso"] {

  /* ── Base surfaces — Darjeeling hill station sky ─────────────────────── */

  --color-base-100:     #C8E8EA;   /* light aqua — page / box bg                  */
  --color-base-200:     #ABDDDE;   /* Darjeeling2 aqua — section alt bg           */
  --color-base-300:     #8CBFC1;   /* deeper aqua — mat (body background)         */
  --color-base-content: #0A2540;   /* dark navy — body text on all base surfaces  */

  /* ── Primary — saffron yellow (Darjeeling1) ──────────────────────────────
     CTA buttons. Dark navy text on saffron = 8.0:1 ✓ AAA.                 */

  --color-primary:         #C8102E;
  --color-primary-content: #FFFFFF;

  /* ── Secondary — ocean blue (Darjeeling2) ────────────────────────────────
     Hero background, secondary buttons. White on ocean = 5.7:1 ✓ AA+.    */

  --color-secondary:         #046C9A;
  --color-secondary-content: #FFFFFF;

  /* ── Accent — Darjeeling red ─────────────────────────────────────────────
     NEVER as a background. Decorative text accent and error states only.  */

  --color-accent:         #FF0000;
  --color-accent-content: #FFFFFF;

  /* ── Neutral — dark navy ──────────────────────────────────────────────── */

  --color-neutral:         #0A2540;
  --color-neutral-content: #FFFFFF;

  /* ── Semantic states ─────────────────────────────────────────────────── */

  --color-info:            #046C9A;   /* ocean blue                                */
  --color-info-content:    #FFFFFF;
  --color-success:         #00A08A;   /* Darjeeling1 teal                          */
  --color-success-content: #FFFFFF;
  --color-warning:         #F98400;   /* Darjeeling1 orange                        */
  --color-warning-content: #0A2540;
  --color-error:           #FF0000;   /* Darjeeling1 red                           */
  --color-error-content:   #FFFFFF;

  /* ── DaisyUI v5 component hooks ──────────────────────────────────────────
     DaisyUI v5 uses oklch internally; color-mix() fails silently when our
     hex --color-base-content is passed in. Override --input-color directly
     so .input / .select borders render correctly.                         */

  /* --input-color set on the element directly below — see .input/.select rule */

  /* ── Shape — flat planes, Anderson precision ─────────────────────────── */

  --radius-selector: 0.125rem;
  --radius-field:    0.125rem;
  --radius-box:      0.125rem;
  --size-selector:   0.3125rem;
  --size-field:      0.3125rem;
  --border:          1px;
  --depth:           0;
  --noise:           0;

  /* ── Custom design tokens ─────────────────────────────────────────────── */

  /* Typography — dark ocean on light aqua */
  --color-heading:      #034F72;   /* dark ocean — 5.6:1 on all aqua surfaces ✓  */
  --color-text:         #0A2540;   /* deep navy — 10.6:1 on light aqua ✓ AAA     */
  --color-text-muted:   #235B5D;   /* muted teal — 4.76:1 on light aqua ✓ AA     */

  /* Named Darjeeling1 palette */
  --color-saffron:      #F5A200;   /* marigold amber — CTA buttons, stat numbers */
  --color-saffron-dark: #D69C4E;   /* Darjeeling2 wheat — saffron border         */
  --color-crimson:      #C8102E;   /* Wes Anderson title-card red — display only */
  --color-orange:       #F98400;   /* Darjeeling1 — loop node 3, hover           */
  --color-orange-dark:  #CC6A00;   /* orange border                              */
  --color-red:          #FF0000;   /* Darjeeling1 — decorative text only, never bg */
  --color-teal:         #00A08A;   /* Darjeeling1 — loop node 2, success         */
  --color-teal-dark:    #007A6A;   /* teal border                                */
  --color-sky:          #5BBCD6;   /* Darjeeling1 — sky blue accent              */

  /* Named Darjeeling2 palette */
  --color-ocean:        #046C9A;   /* Darjeeling2 — hero bg, secondary, headings */
  --color-ocean-dark:   #034F72;   /* darker ocean — heading text, borders       */
  --color-sand:         #ECCBAE;   /* Darjeeling2 — card / pricing surfaces      */
  --color-wheat:        #D69C4E;   /* Darjeeling2 — warm gold accent             */
  --color-aqua:         #ABDDDE;   /* Darjeeling2 — section alt bg              */

  /* Extended surfaces */
  --color-surface:       #ABDDDE;   /* alias → aqua                              */
  --color-surface-bold:  #8CBFC1;   /* alias → deeper aqua                       */
  --color-hero:          #046C9A;   /* hero and bottom CTA background             */

  /* Links — dark ocean, passes AA on all aqua/sand surfaces */
  --color-link:          #034F72;
  --color-link-hover:    #023A55;

  /* Blueprint borders — ocean-derived, single system across entire UI */
  --color-blueprint:     rgba(4,108,154,0.18);   /* universal border             */
  --color-border:        rgba(4,108,154,0.18);   /* alias                        */
  --color-border-strong: rgba(4,108,154,0.32);   /* stronger dividers            */

  /* Inverted border — for use on dark (navy/ocean) section backgrounds */
  --color-border-inverted: rgba(255, 255, 255, 0.15);

  /* Page box — the diorama stage. White, not aqua.
     Used for the 1280px marketing container, loop grid cells, pricing cards. */
  --color-page-box: #FFFFFF;

  /* Data visualisation (charts — in order of use) */
  --color-dataviz-1: #046C9A;
  --color-dataviz-2: #F5A200;
  --color-dataviz-3: #FF0000;
  --color-dataviz-4: #00A08A;
  --color-dataviz-5: #F98400;
  --color-dataviz-6: #5BBCD6;

  /* Fonts */
  --font-display: 'Poiret One', cursive;
  --font-heading: 'Raleway', sans-serif;
  --font-body:    'Lexend', sans-serif;
  --font-data:    'Fira Sans', sans-serif;
}


/* ── Base element styles ─────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  background-color: var(--color-base-100);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

.display { font-family: var(--font-display); }

table, .font-data, .stat-value, .badge { font-family: var(--font-data); }


/* ── Links — dark ocean blue, underline on hover ─────────────────────────
   Scoped with :not(.btn) and :not(.no-underline) so DaisyUI buttons and
   explicitly-styled nav/footer links are unaffected.                      */

a:not(.btn):not(.no-underline) {
  color: var(--color-link);
}

a:not(.btn):not(.no-underline):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

nav a:not(.btn) {
  text-decoration: none;
  color: inherit;
}

nav a:not(.btn):hover {
  text-decoration: none;
  opacity: 0.7;
}

footer a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

footer a:not(.btn):hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Button override — uppercase Raleway for authority ────────────────────
   Applies across dashboard and marketing. Consistent brand voice.         */

.btn {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-heading);
  font-size: 0.73rem;
}


/* ── Marketing mat — body background with Jali diamond grid texture ──────
   Deeper aqua (#8CBFC1) with an ocean-blue diagonal Jali grid at 6%.
   The mat sits outside the 1280px page box — the "platform" the diorama
   rests on.                                                               */

.marketing-mat {
  background-color: var(--color-base-100);
  background-image:
    radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}


/* ── Section backgrounds — marketing pages only ──────────────────────── */

.section-hero     { background-color: var(--color-hero); }
.section-saffron  {
  background: var(--color-page-box);
}
.section-surface  { background-color: var(--color-surface); }
.section-bold     { background-color: var(--color-surface-bold); }
.section-base-100 { background-color: var(--color-base-100); }
.section-base-200 { background-color: var(--color-base-200); }

/* ── Section mat — matches body marketing-mat (aqua + polka dots) ────────
   Applied to sections that should feel like the page mat rather than a
   distinct content block (e.g. Shift, Stats in their relaxed state).    */
.section-mat {
  background-color: var(--color-base-100);
  background-image: radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}


/* ── Border utilities ────────────────────────────────────────────────── */

.border-warm        { border: 1px solid var(--color-border); }
.border-warm-strong { border: 1px solid var(--color-border-strong); }


/* ── Thin decorative rule ────────────────────────────────────────────── */

.rule-anderson {
  border: none;
  border-top: 1px solid var(--color-border-strong);
  margin: 0 auto;
  width: 4rem;
}


/* ── Logo utility — inverts for dark backgrounds ─────────────────────── */

.logo-on-dark { filter: brightness(0) invert(1); }


/* ── Marketing overlines — mandatory on every marketing section ──────────
   Dark ocean on aqua = 3.85–5.6:1 ✓ (better than original marigold at
   2.27:1 on parchment). Bold uppercase + letter-spacing compensates.
   Ghost variant: white at 65% opacity on dark ocean hero.               */

.overline {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ocean-dark);
  text-decoration: none;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.overline-ghost {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);   /* 0.85 → ~5.0:1 on ocean ✓ AA+. 0.65 failed at 3.2:1. */
}

.overline-muted {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Modifier — tighter tracking for longer caption-style overlines */
.overline-muted--tight { letter-spacing: 0.15em; }


/* ── Display typography — Poiret One, marketing pages only ───────────────
   Hero: 2.6–4.75rem. CTA: 2–3.75rem. Shift: 1.6–2.6rem.
   .accent within .display-hero: saffron — at 76px display size, 2.9:1
   clears the large-text threshold on ocean hero bg.                     */

.display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1.03;
  color: #FFFFFF;                          /* white on ocean hero */
}

.display-hero .accent { color: var(--color-saffron); } /* saffron accent on ocean — vivid warm/cool contrast */


/* ── Hero poster typography — Wes Anderson title card ────────────────────
   Raleway 900 throughout. White fill + thick crimson stroke + hard dark
   shadow offset creates the letterpress / extruded depth from vintage
   signage (ref: Cheapsman). All display lines equal weight — no accent.
   Connector bridges lines at micro scale for dramatic size contrast.    */

.hero-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-poster-main {
  font-family: var(--font-heading);
  font-size: clamp(4.4rem, 3.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
}

/* No accent treatment — all display lines identical */
.hero-poster-main.accent {
  color: #FFFFFF;
  font-family: var(--font-heading);
  -webkit-text-stroke: 3px var(--color-crimson);
}

.hero-poster-connector {
  font-family: var(--font-heading);
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  padding: 0.9em 0;
}

.hero-poster-sub {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  text-shadow: 1px 2px 0 rgba(10,37,64,0.30);
  margin-top: 1.2em;
}


.display-cta {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  color: var(--color-secondary-content);   /* white on ocean CTA bg */
}

.display-shift {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--color-heading);
}

.display-shift em {
  font-style: italic;
  color: var(--color-ocean);
}


/* ── Section heading — Raleway, all sections ─────────────────────────── */

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
}


/* ── Stats section — saffron bg + ocean dot pattern ─────────────────────
   Mirror of the hero: hero = ocean bg + saffron dots.
   Stats = saffron bg + ocean dots. Warm/cool duality.                   */

.section-stats {
  background-color: var(--color-saffron);
  background-image: radial-gradient(circle, rgba(4,108,154,0.18) 2px, transparent 2px);
  background-size: 26px 26px;
}


/* ── Stat number — train departure board scale ───────────────────────── */

.stat-num {
  font-family: var(--font-data);
  font-size: clamp(3.5rem, 5.5vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

/* Stat label (departure-board route name) and note on saffron section.
   All use --color-text (8.0:1 on saffron ✓ AAA). Note at 65% opacity =
   rendered effective contrast ~4.5:1 on saffron ✓ AA.                  */
.stat-label { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(10,37,64,0.55); }
.stat-note  { font-size: 0.875rem; line-height: 1.6; color: rgba(10,37,64,0.65); }


/* ── Blueprint border utilities — directional ────────────────────────── */

.border-b-warm { border-bottom: 1px solid var(--color-border); }
.border-t-warm { border-top:    1px solid var(--color-border); }
.border-r-warm { border-right:  1px solid var(--color-border); }
.border-l-warm { border-left:   1px solid var(--color-border); }

/* Borders between grid/flex children */
.divide-x-warm > * + * { border-left:  1px solid var(--color-border); }
.divide-y-warm > * + * { border-top:   1px solid var(--color-border); }

/* Responsive variants */
@media (min-width: 768px) {
  .md-divide-x-warm > * + * { border-left: 1px solid var(--color-border); }
}
@media (max-width: 767px) {
  .sm-divide-y-warm > * + * { border-top: 1px solid var(--color-border); }
}


/* ── Tactile interactions — The Tactile Web ──────────────────────────────
   Buttons physically depress 2px on :active — it clacks.
   Inputs/selects snap to a hard ocean border on focus, no glow ring.    */

.btn:active {
  transform: translateY(2px);
}

/* DaisyUI v5 sets --input-color directly on .input inside @layer daisyui.*
   A direct element declaration beats any inherited value, so [data-theme]
   overrides don't work. Set --input-color here (unlayered, direct) to win. */
.input,
.select {
  --input-color: rgba(4, 108, 154, 0.32);
}

.input:focus,
.select:focus {
  --input-color: var(--color-ocean);
  outline: none;
  box-shadow: none;
}


/* ── Colour utilities ────────────────────────────────────────────────── */

.text-saffron    { color: var(--color-saffron); }
.text-red        { color: var(--color-red); }
.text-ocean      { color: var(--color-ocean); }
.text-teal       { color: var(--color-teal); }
.text-orange     { color: var(--color-orange); }
.text-heading    { color: var(--color-heading); }
.text-warm-muted { color: var(--color-text-muted); }


/* ── Dawn sun — subtle warm glow, top-left of page box ───────────────────
   Radial amber-to-orange gradient. Slow 8s pulse. Like morning light
   through a Darjeeling train window. pointer-events:none so it never
   blocks interaction. z-index:0, content at z-index:1+.                 */

.dawn-sun {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(
    circle at center,
    rgba(242,173,0,0.32) 0%,
    rgba(249,132,0,0.18) 30%,
    rgba(249,132,0,0.06) 55%,
    transparent 72%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: dawn-pulse 8s ease-in-out infinite;
}

@keyframes dawn-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.18); }
}


/* ── Stat title — bold label on saffron stats section ───────────────────
   Same dark navy as body text — 8.0:1 on saffron ✓ AAA.               */

.stat-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }


/* ── Pricing ──────────────────────────────────────────────────────────── */

/* Blueprint gap grid — 1px ocean borders between cards */
.pricing-grid          { gap: 0; }

/* Pricing cards — page-box surface, saffron as accent only */
.pricing-card          { background-color: var(--color-page-box); }
.pricing-card-featured { background-color: var(--color-page-box); border-top: 3px solid var(--color-saffron); }

.price-num        { font-family: var(--font-data); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--color-heading); }
.price-num-accent { color: var(--color-ocean); }

.check-item { display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--font-data); font-size: 0.875rem; color: var(--color-text); line-height: 1.5; }
.check-mark { font-weight: 700; font-size: 0.65rem; color: var(--color-ocean); flex-shrink: 0; padding-top: 0.25rem; }


/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq-question { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--color-heading); }


/* ── Off-screen rendering optimisation ──────────────────────────────────
   content-visibility:auto lets the browser skip layout/paint for sections
   until they're near the viewport. contain-intrinsic-size provides a size
   hint so the scrollbar doesn't jump when sections are uncollapsed.
   Do NOT apply to sections with running CSS animations (the loop grid).  */

.section-offscreen {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}


/* ── Mobile bottom nav — safe area inset for iPhone home indicator ────────
   viewport-fit=cover extends content under the notch; the padding-bottom
   compensates so nav labels are never hidden behind the home bar.         */

.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD — logged-in app shell
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard body — aqua polka-dot mat ────────────────────────────────
   Panels float on top as white cards. The mat is visible in the gaps.    */
.dash-mat {
  background-color: var(--color-base-200);
  background-image: radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ── Sidebar nav item ────────────────────────────────────────────────────
   Lexend 13px, normal case. Clean, readable. 2026 SaaS standard.        */
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 36px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(10, 37, 64, 0.50);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.dash-nav-item:hover {
  color: var(--color-neutral);
  background-color: rgba(4, 108, 154, 0.06);
  border-left-color: rgba(4, 108, 154, 0.25);
}

/* Active state — saffron left accent + warm tint */
.dash-nav-item-active {
  border-left-color: var(--color-saffron);
  background-color: rgba(245, 162, 0, 0.09);
  color: var(--color-neutral);
  font-weight: 600;
}

/* ── Sidebar section label ───────────────────────────────────────────────
   Quiet category separator. Fira Sans 10px, very muted.                 */
.dash-nav-section {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(35, 91, 93, 0.45);
  padding: 0 12px;
}

/* ── Agent status dot ────────────────────────────────────────────────────
   Green pulsing = running; muted = idle.                                 */
.agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agent-dot-running {
  background-color: var(--color-teal);
  animation: agent-pulse 2.4s ease-in-out infinite;
}

.agent-dot-idle {
  background-color: rgba(35, 91, 93, 0.4);
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.78); }
}

/* ── Agent status bar — dark navy terminal band at top of Today page ─────
   Context strip: agent name, status, last run, next run, autonomy level. */
.dash-status-bar {
  background-color: var(--color-neutral);
  color: #ffffff;
  font-family: var(--font-data);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.dash-status-bar-sep {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.12);
  margin: 0 1rem;
  flex-shrink: 0;
}

.dash-status-bar-label {
  color: rgba(255, 255, 255, 0.40);
  margin-right: 0.35rem;
  font-size: 0.6875rem;
}

/* ── KPI stat card ───────────────────────────────────────────────────────
   White card, blueprint border. Generous padding. Big number on top.    */
.dash-kpi-card {
  background-color: var(--color-page-box);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  padding: 1.25rem 1.5rem 1.125rem;
}

.dash-kpi-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-saffron);
  letter-spacing: -0.02em;
}

.dash-kpi-number-secondary {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

.dash-kpi-label {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.dash-kpi-delta-up   { color: var(--color-teal);      font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }
.dash-kpi-delta-down { color: var(--color-red);        font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }
.dash-kpi-delta-flat { color: var(--color-text-muted); font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }

/* ── Card section heading — replaces overline inside dashboard cards ─────
   Simple, quiet. Lexend semibold 13px. No borders, no tracking.         */
.dash-card-heading {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.2;
}

/* ── Page heading + context line ─────────────────────────────────────────
   Used on Performance, Intelligence, Journeys, Activity pages.          */
.dash-page-context {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

/* ── Pipeline step visualizer ────────────────────────────────────────────
   Horizontal 4-step agent cycle: Monitor → Analyse → Act → Measure      */
.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

.pipeline-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-data);
}

.pipeline-step-done   .pipeline-step-dot { border-color: var(--color-teal);        background-color: var(--color-teal);   color: #fff; }
.pipeline-step-active .pipeline-step-dot { border-color: var(--color-saffron);      background-color: var(--color-saffron); color: var(--color-neutral); animation: agent-pulse 2.4s ease-in-out infinite; }
.pipeline-step-review .pipeline-step-dot { border-color: var(--color-orange);       background-color: var(--color-orange);  color: #fff; }
.pipeline-step-wait   .pipeline-step-dot { border-color: var(--color-blueprint);    background-color: transparent;          color: var(--color-text-muted); }

.pipeline-step-label {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.pipeline-step-done   .pipeline-step-label { color: var(--color-teal); }
.pipeline-step-active .pipeline-step-label { color: var(--color-saffron); }
.pipeline-step-review .pipeline-step-label { color: var(--color-orange); }
.pipeline-step-wait   .pipeline-step-label { color: var(--color-text-muted); }

.pipeline-step-sub {
  font-family: var(--font-data);
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-align: center;
}

.pipeline-arrow {
  color: var(--color-blueprint);
  font-size: 0.75rem;
  align-self: flex-start;
  margin-top: 0.75rem;
  flex-shrink: 0;
}

/* ── Split view — For Review ─────────────────────────────────────────────
   Left list (280px) + right detail panel. Spans full main height.       */
.split-left {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-blueprint);
  background-color: var(--color-base-100);
  overflow-y: auto;
}

.split-right {
  flex: 1;
  overflow-y: auto;
  background-color: var(--color-page-box);
}

.split-item {
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--color-blueprint);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 150ms ease;
}

.split-item:hover {
  background-color: rgba(4, 108, 154, 0.05);
}

.split-item-active {
  border-left-color: var(--color-saffron);
  background-color: rgba(245, 162, 0, 0.08);
}

/* ── Feedback capture bar ────────────────────────────────────────────────
   Always visible at bottom of agent output. Every response = training.  */
.feedback-bar {
  border-top: 1px solid var(--color-blueprint);
  background-color: rgba(4, 108, 154, 0.025);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feedback-label {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

/* ── Journey coverage indicator ─────────────────────────────────────────
   Small filled/empty track per journey stage.                            */
.journey-stage-track {
  display: flex;
  gap: 3px;
  align-items: center;
}

.journey-stage-pip {
  width: 18px;
  height: 4px;
  border-radius: 1px;
}

.journey-stage-pip-full    { background-color: var(--color-teal); }
.journey-stage-pip-partial { background-color: var(--color-saffron); }
.journey-stage-pip-empty   { background-color: var(--color-blueprint); }

/* ── Chart bar ───────────────────────────────────────────────────────────
   Flat, blocky, no rounded corners — per design system.                 */
.chart-bar {
  background-color: var(--color-ocean);
  border-radius: 0;
  transition: none;
  min-height: 2px;
}

.chart-bar-saffron { background-color: var(--color-saffron); }
.chart-bar-teal    { background-color: var(--color-teal); }
.chart-bar-muted   { background-color: var(--color-blueprint); }

/* ── Tab bar — Intelligence page (overrides DaisyUI tab) ────────────────
   Active tab: saffron bottom border + dark navy text.                   */
[data-controller="tabs"] button.tab-active {
  border-bottom-color: var(--color-saffron) !important;
  color: var(--color-neutral) !important;
}

/* ── Mobile bottom nav ───────────────────────────────────────────────────
   Opaque white panel, blueprint top border.                             */
.mobile-bottom-nav {
  background-color: var(--color-page-box);
}

/* ── Top bar — page title + agent status + actions ──────────────────────
   White card, blueprint border. Spans main content width.              */
.dash-top-bar {
  background-color: var(--color-page-box);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
}

/* ── Sidebar search box ──────────────────────────────────────────────── */
.dash-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  cursor: default;
}

/* ── Agent status chip (in top bar) ─────────────────────────────────── */
.agent-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}