/* Curated UI type system inspired by frontend-slides presets. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=optional');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Mobile UX: Touch targets, typography scaling, safe areas ─────────── */

@layer components {
  /* P0: 44px minimum touch targets on mobile (WCAG 2.5.8) */
  @media (max-width: 1279px) {
    button:not([data-density="compact"]),
    [role="button"]:not([data-density="compact"]),
    a[href]:not([data-density="compact"]) {
      min-height: 44px;
      min-width: 44px;
    }

    /* Card spacing — thumb clearance */
    .space-y-2 { gap: 12px; }
    .space-y-3 { gap: 16px; }
  }

  /* R5: Typography scaling — fluid type for mobile readability */
  @media (max-width: 1279px) {
    body {
      font-size: clamp(14px, 2.5vw, 16px);
    }
    h1 {
      font-size: clamp(20px, 4vw, 28px);
    }
    h2 {
      font-size: clamp(13px, 2.2vw, 15px);
    }
    h3 {
      font-size: clamp(12px, 2vw, 14px);
    }
    .text-xs {
      font-size: clamp(11px, 1.8vw, 13px);
    }
    .text-sm {
      font-size: clamp(13px, 2.2vw, 15px);
    }
    .text-\[11px\] {
      font-size: 12px;
    }
    .text-\[10px\] {
      font-size: 12px;
    }
    code, .font-mono {
      font-size: clamp(12px, 2vw, 14px);
    }

    /* Section headers — slightly larger on mobile for readability */
    [class*="uppercase"][class*="tracking"] {
      font-size: clamp(10px, 1.8vw, 12px);
      letter-spacing: 0.15em;
    }
  }

  /* Safe area insets for notched devices */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mb-safe {
      margin-bottom: env(safe-area-inset-bottom, 0px);
    }
  }

  /* Haptic-ready tap feedback */
  @media (max-width: 1279px) {
    button:active, [role="button"]:active, a[href]:active {
      transform: scale(0.97);
      transition: transform 0.08s ease-out;
    }
  }
}

@layer base {
  :root {
    --background: 0 0% 98%;
    /* #FAFAFA - Cool off-white */
    --foreground: 224 71% 4%;
    /* #111827 - Near black */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 18 62% 60%;
    /* #D97757 - Terracotta primary */
    --primary-foreground: 0 0% 100%;
    --secondary: 220 13% 91%;
    /* #E5E7EB */
    --secondary-foreground: 0 0% 4%;
    --muted: 220 14% 96%;
    /* #F3F4F6 */
    --muted-foreground: 220 9% 36%;
    /* #4B5563 - WCAG AA ≥ 4.6:1 on white */
    --accent: 220 14% 96%;
    --accent-foreground: 18 62% 60%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    /* #E5E7EB */
    --input: 220 13% 91%;
    --ring: 18 62% 60%;
    --radius: 0.5rem;

    /* Component direct-access vars */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #4B5563;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F3F4F6;
    --bg-hover: #E5E7EB;
    --bg-tertiary: #F3F4F6;
    --border-color: rgba(0, 0, 0, 0.06);
    --accent-primary: #d97757;
    --accent-secondary: #e59579;
    --accent-primary-bg: rgba(217, 119, 87, 0.10);
    --accent-primary-hover: #c76648;
    --text-disabled: #9CA3AF;
    --text-tertiary: #9CA3AF;
    --text-placeholder: #9CA3AF;
    /* iOS-native feel on Apple devices via -apple-system (resolves SF Pro).
       Chromium + other browsers fall through to Inter (near-SF Pro clone),
       then Manrope as brand fallback. */
    --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Manrope", system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Manrope", system-ui, sans-serif;

    /* Physical-notebook tokens (entity page paper aesthetic).
       The notebook is a physical sheet the user scrolls and edits,
       co-authored with agents. Warm off-white beats pure white, and
       agent ink is a second grayscale tone. See
       docs/architecture/ENTITY_PAGE_REDESIGN.md §12. */
    --paper-bg: #fbf8f2;
    --paper-rule: rgba(217, 119, 87, 0.06);
    --paper-margin: rgba(217, 119, 87, 0.10);
    --paper-shadow: 0 12px 40px -24px rgba(40, 30, 20, 0.18), 0 2px 4px rgba(40, 30, 20, 0.04);
    --ink-user: #1a1918;
    --ink-agent: #6a6763;
    --ink-agent-bg: rgba(106, 103, 99, 0.06);

    /* frontend-slides easing tokens */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-normal: 0.2s;
    --duration-fast: 0.12s;
    --duration-slow: 0.4s;
  }

  .dark {
    /* Neutral dark palette — cleaner than the old warm charcoal layer */
    --background: 220 12% 9%;
    --foreground: 220 18% 94%;
    --card: 220 12% 13%;
    --card-foreground: 220 18% 94%;
    --popover: 220 12% 12%;
    --popover-foreground: 220 18% 94%;
    --primary: 18 60% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 11% 16%;
    --secondary-foreground: 220 18% 90%;
    --muted: 220 11% 15%;
    --muted-foreground: 220 10% 65%;
    --accent: 220 11% 15%;
    --accent-foreground: 18 60% 55%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 10% 21%;
    --input: 220 11% 16%;
    --ring: 18 60% 55%;

    --text-primary: #f2f4f7;
    --text-secondary: #c6ccd4;
    --text-muted: #a8b1bb;
    --bg-primary: #111418;
    --bg-secondary: #171b20;
    --bg-hover: #20262d;
    --bg-tertiary: #1b2027;
    --border-color: rgba(255, 255, 255, 0.10);
    --accent-primary: #d97757;
    --accent-secondary: #e59579;
    --accent-primary-bg: rgba(217, 119, 87, 0.16);
    --accent-primary-hover: #e59579;
    --text-disabled: #66717c;
    --text-tertiary: #aeb6bf;
    --text-placeholder: #66717c;

    /* Physical-notebook tokens — dark mode (graphite paper). */
    --paper-bg: #1b1a18;
    --paper-rule: rgba(255, 255, 255, 0.04);
    --paper-margin: rgba(217, 119, 87, 0.18);
    --paper-shadow: 0 24px 80px -48px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ink-user: #f3efe7;
    --ink-agent: #c3bfb5;
    --ink-agent-bg: rgba(195, 191, 181, 0.06);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  /*
   * Subtle focus rings — Linear-style thin neutral outline.
   *
   * SCOPED: applies only to elements that haven't declared their own
   * focus-visible affordance. Otherwise this 1px outline stacks on
   * top of Tailwind's `focus-visible:ring-*` producing double-halo
   * artifacts. Buttons/links/tabs/menuitems and anything inside a
   * nb-composer-surface get their own ring. A11y floor preserved —
   * every interactive element keeps a keyboard-visible focus state.
   */
  :focus-visible:not(button):not(a):not(summary):not([role="button"]):not([role="tab"]):not([role="link"]):not([role="menuitem"]):not([role="option"]):not([role="switch"]):not([data-nb-composer] *) {
    outline: 1px solid rgba(15, 23, 42, 0.25);
    outline-offset: 2px;
  }

  .dark :focus-visible:not(button):not(a):not(summary):not([role="button"]):not([role="tab"]):not([role="link"]):not([role="menuitem"]):not([role="option"]):not([role="switch"]):not([data-nb-composer] *) {
    outline: 1px solid rgba(255, 255, 255, 0.2);
    outline-offset: 2px;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-attachment: fixed;
    background-image:
      radial-gradient(circle at top, rgba(67, 97, 238, 0.08), transparent 28%),
      radial-gradient(circle at bottom right, rgba(255, 87, 34, 0.06), transparent 22%);
  }

  html,
  body,
  #root {
    min-height: 100%;
  }

  #root {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .dark body {
    /* Polish pass: tighten the gradient reach so the terracotta +
       blue glows fade by the time cards render below the hero. Cards
       compete less with the atmospheric wash; hero still feels warm. */
    background-image:
      radial-gradient(ellipse at 18% 10%, rgba(217, 119, 87, 0.08), transparent 18%),
      radial-gradient(ellipse at 78% 0%, rgba(217, 119, 87, 0.09), transparent 20%),
      linear-gradient(180deg, #101317, #111419 28%, #111419);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    @apply tracking-tight;
  }
}

@layer base {
  html[data-background-pattern='none'] body {
    background-image:
      radial-gradient(circle at top, rgba(67, 97, 238, 0.08), transparent 28%),
      radial-gradient(circle at bottom right, rgba(255, 87, 34, 0.06), transparent 22%);
  }

  html[data-background-pattern='spotlight'] body {
    background-image:
      radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.08), transparent 0, transparent 24rem),
      radial-gradient(circle at 85% 18%, rgba(67, 97, 238, 0.16), transparent 0, transparent 20rem),
      radial-gradient(circle at 72% 86%, rgba(255, 87, 34, 0.12), transparent 0, transparent 18rem);
  }

  html[data-background-pattern='grid'] body {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      radial-gradient(circle at top, rgba(67, 97, 238, 0.1), transparent 28%);
    background-size: 36px 36px, 36px 36px, cover;
  }

  html[data-background-pattern='dots'] body {
    background-image:
      radial-gradient(rgba(99, 102, 241, 0.18) 1px, transparent 1px),
      radial-gradient(circle at top, rgba(67, 97, 238, 0.1), transparent 28%);
    background-size: 18px 18px, cover;
  }

  html[data-background-pattern='lines'] body {
    background-image:
      repeating-linear-gradient(
        180deg,
        rgba(57, 211, 83, 0.08) 0,
        rgba(57, 211, 83, 0.08) 1px,
        transparent 1px,
        transparent 16px
      ),
      linear-gradient(180deg, rgba(9, 17, 23, 0.25), transparent 40%);
    background-size: auto, cover;
  }

  html[data-background-pattern='noise'] body {
    background-image:
      radial-gradient(circle at top, rgba(212, 165, 116, 0.12), transparent 24%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
      linear-gradient(225deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%);
    background-size: cover, 18px 18px, 18px 18px;
  }

  html[data-background-pattern='paper'] body {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
      linear-gradient(rgba(214, 202, 187, 0.28) 1px, transparent 1px),
      linear-gradient(90deg, rgba(214, 202, 187, 0.14) 1px, transparent 1px);
    background-size: cover, 32px 32px, 32px 32px;
  }

  html.dark[data-background-pattern='paper'] body {
    background-image:
      linear-gradient(180deg, rgba(15, 15, 18, 0.88), rgba(15, 15, 18, 0.88)),
      linear-gradient(rgba(212, 165, 116, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212, 165, 116, 0.06) 1px, transparent 1px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY — compact / comfortable / spacious spacing scales
   ═══════════════════════════════════════════════════════════════ */

html[data-density='compact'] {
  --density-page-px: clamp(0.75rem, 2vw, 1.5rem);
  --density-page-py: 1rem;
  --density-card-p: 0.75rem;
  --density-gap: 0.5rem;
  --density-text-sm: 0.75rem;
  font-size: 13px;
}

html[data-density='comfortable'] {
  --density-page-px: clamp(1.5rem, 4vw, 2.5rem);
  --density-page-py: 2rem;
  --density-card-p: 1.25rem;
  --density-gap: 1rem;
  --density-text-sm: 0.875rem;
  font-size: 14px;
}

html[data-density='spacious'] {
  --density-page-px: clamp(2rem, 5vw, 4rem);
  --density-page-py: 3rem;
  --density-card-p: 1.75rem;
  --density-gap: 1.5rem;
  --density-text-sm: 0.875rem;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS (from frontend-slides)
   Apply .reveal + .visible parent for scroll-triggered entrances
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.visible .reveal,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.visible .reveal-scale,
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.8s var(--ease-out-expo),
              filter 0.8s var(--ease-out-expo);
}
.visible .reveal-blur,
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.visible .reveal-left,
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger reveal children — use with .reveal on each child */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger > .reveal:nth-child(n+6) { transition-delay: 0.6s; }

/* Gradient mesh — layered radial gradients for atmospheric depth */
.gradient-mesh {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(var(--accent-mesh-r, 67), var(--accent-mesh-g, 97), var(--accent-mesh-b, 238), 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
    var(--bg-primary);
}

/* ───── Type Scale (Linear/Vercel consistency) ───── */
@layer components {
  .nb-public-shell {
    position: relative;
  }

  .nb-public-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at top, rgba(217, 119, 87, 0.08), transparent 24%),
      radial-gradient(circle at 82% 18%, rgba(79, 70, 229, 0.08), transparent 18%);
    opacity: 0.9;
  }

  .dark .nb-public-shell::before {
    background:
      radial-gradient(circle at top, rgba(217, 119, 87, 0.10), transparent 24%),
      radial-gradient(circle at 82% 18%, rgba(217, 119, 87, 0.08), transparent 18%);
  }

  .nb-public-stage {
    background:
      radial-gradient(circle at top, rgba(217, 119, 87, 0.06), transparent 28%),
      linear-gradient(180deg, #fcfaf7, #f7f4ef 42%, #f5f1eb);
  }

  .dark .nb-public-stage {
    background:
      radial-gradient(circle at top, rgba(217, 119, 87, 0.12), transparent 28%),
      radial-gradient(circle at 75% 0%, rgba(217, 119, 87, 0.08), transparent 24%),
      linear-gradient(180deg, #101317, #11151a 36%, #111419);
  }

  .nb-panel {
    @apply rounded-xl;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .dark .nb-panel {
    border-color: rgba(255, 255, 255, 0.10);
    background: #171b20;
    box-shadow: 0 24px 64px -44px rgba(0, 0, 0, 0.72);
  }

  .nb-panel-soft {
    @apply rounded-[22px];
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(248, 250, 252, 0.86);
  }

  .dark .nb-panel-soft {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(23, 27, 32, 0.92);
    box-shadow: 0 24px 72px -54px rgba(0, 0, 0, 0.78);
  }

  .nb-panel-inset {
    @apply rounded-[20px];
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(248, 250, 252, 0.92);
  }

  .dark .nb-panel-inset {
    border-color: rgba(255, 255, 255, 0.09);
    background: #1a1f26;
  }

  .nb-toolbar-pill {
    @apply inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-content-muted;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.74);
  }

  .dark .nb-toolbar-pill {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
  }

  .nb-chip {
    @apply rounded-full px-3 py-1.5 text-[11px] font-medium text-content-muted transition;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.74);
  }

  .nb-chip:hover {
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-primary);
  }

  .dark .nb-chip {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.035);
  }

  .dark .nb-chip:hover {
    background: rgba(255, 255, 255, 0.075);
    color: var(--text-primary);
  }

  .nb-chip-active {
    border-color: rgba(217, 119, 87, 0.24);
    background: rgba(217, 119, 87, 0.12);
    color: #ad5f45;
  }

  .dark .nb-chip-active {
    border-color: rgba(217, 119, 87, 0.34);
    background: rgba(217, 119, 87, 0.16);
    color: #ffd7ca;
  }

  .nb-filter-tab {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition:
      background-color 160ms var(--ease-out-expo),
      border-color 160ms var(--ease-out-expo),
      color 160ms var(--ease-out-expo),
      box-shadow 160ms var(--ease-out-expo);
  }

  .nb-filter-tab:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-primary);
  }

  .nb-filter-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18);
  }

  .nb-filter-tab-active {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.36);
  }

  .dark .nb-filter-tab {
    color: rgba(230, 235, 243, 0.72);
  }

  .dark .nb-filter-tab:hover {
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
  }

  .dark .nb-filter-tab-active {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.9);
  }

  .nb-hover-lift {
    transition:
      transform 180ms var(--ease-out-expo),
      border-color 180ms var(--ease-out-expo),
      background-color 180ms var(--ease-out-expo),
      box-shadow 180ms var(--ease-out-expo);
  }

  .nb-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  }

  .nb-hover-lift:active {
    transform: translateY(0);
    transition-duration: 75ms;
  }

  /* Accent variant — tints the border with accent-primary on hover.
     Stacks with .nb-hover-lift. Used where a card must read as a
     clickable primary surface (Recent Reports, dossier cards). */
  .nb-hover-lift-accent:hover {
    border-color: color-mix(in oklab, var(--accent-primary) 30%, transparent);
  }
  .dark .nb-hover-lift-accent:hover {
    border-color: color-mix(in oklab, var(--accent-primary) 40%, transparent);
  }
  .nb-hover-lift-accent:active {
    border-color: color-mix(in oklab, var(--accent-primary) 50%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .nb-hover-lift,
    .nb-hover-lift:hover,
    .nb-hover-lift:active {
      transform: none;
      transition-duration: 0ms;
    }
  }

  .nb-enter {
    animation: nb-enter 200ms ease-out both;
  }

  .nb-enter-delayed {
    animation: nb-enter 200ms ease-out both;
  }

  .nb-status-dot {
    @apply inline-block h-2 w-2 rounded-full;
  }

  .nb-loading-sheen {
    position: relative;
    overflow: hidden;
  }

  .nb-loading-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.06), transparent);
    animation: nb-sheen 1.8s linear infinite;
  }

  .dark .nb-loading-sheen::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  }

  .nb-section-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-content-muted;
  }

  .nb-body-copy {
    @apply text-sm leading-6 text-content-muted;
  }

  .nb-topnav-surface {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(250, 248, 245, 0.88);
    backdrop-filter: blur(18px);
  }

  .dark .nb-topnav-surface {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    background: rgba(13, 16, 20, 0.82);
  }

  .nb-topnav-nav {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.68);
  }

  .dark .nb-topnav-nav {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.035);
  }

  .nb-topnav-button {
    color: var(--text-muted);
  }

  .nb-topnav-button:hover {
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary);
  }

  .dark .nb-topnav-button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
  }

  .nb-topnav-button-active {
    background: rgba(255, 255, 255, 0.96);
    color: #161311;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }

  .dark .nb-topnav-button-active {
    background: #f5efe9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  }

  .nb-icon-button {
    display: inline-flex;
    min-height: 42px;
    min-width: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-primary);
    transition: background-color 160ms var(--ease-out-expo), border-color 160ms var(--ease-out-expo), color 160ms var(--ease-out-expo);
  }

  .nb-icon-button:hover {
    background: rgba(255, 255, 255, 0.96);
  }

  .dark .nb-icon-button {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
  }

  .dark .nb-icon-button:hover {
    background: rgba(255, 255, 255, 0.09);
  }

  .nb-topnav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    border-radius: 1rem;
    border: 1px solid rgba(217, 119, 87, 0.24);
    background: linear-gradient(180deg, rgba(217, 119, 87, 0.96), rgba(198, 104, 74, 0.96));
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fffaf8;
    box-shadow: 0 12px 28px rgba(217, 119, 87, 0.16);
    transition:
      transform 160ms var(--ease-out-expo),
      box-shadow 160ms var(--ease-out-expo),
      filter 160ms var(--ease-out-expo),
      opacity 160ms var(--ease-out-expo);
  }

  .nb-topnav-action:hover {
    filter: brightness(1.02);
    box-shadow: 0 14px 32px rgba(217, 119, 87, 0.2);
  }

  .nb-topnav-action:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
  }

  .nb-topnav-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
  }

  .dark .nb-topnav-action {
    border-color: rgba(217, 119, 87, 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  }

  .nb-input-shell {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .dark .nb-input-shell {
    border-color: rgba(255, 255, 255, 0.09);
    background: #171b20;
    box-shadow: 0 24px 72px -54px rgba(0, 0, 0, 0.72);
  }

  .nb-lexical-editor {
    position: relative;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.85;
  }

  .nb-lexical-editor p {
    margin: 0;
  }

  .nb-lexical-paragraph {
    margin: 0 0 0.95rem;
    color: var(--text-primary);
  }

  .nb-lexical-heading-xl,
  .nb-lexical-heading-lg,
  .nb-lexical-heading-md {
    margin: 1.25rem 0 0.6rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .nb-lexical-heading-lg {
    font-size: 1.15rem;
  }

  .nb-lexical-heading-md {
    font-size: 1.02rem;
  }

  .nb-lexical-quote {
    margin: 1rem 0;
    border-left: 3px solid rgba(217, 119, 87, 0.3);
    padding-left: 0.9rem;
    color: var(--text-secondary);
  }

  .nb-lexical-list {
    margin: 0 0 1rem 1.2rem;
    padding: 0;
  }

  .nb-lexical-list-item {
    margin: 0.25rem 0;
    color: var(--text-primary);
  }

  .nb-markdown-editor .cm-editor {
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.92rem;
  }

  .nb-markdown-editor .cm-scroller {
    font-family: var(--font-sans, "Manrope", sans-serif);
    line-height: 1.75;
    padding: 1rem 1.1rem;
  }

  .nb-markdown-editor .cm-content {
    min-height: 320px;
    caret-color: var(--text-primary);
  }

  .nb-markdown-editor .cm-line {
    padding: 0;
  }

  .nb-markdown-editor .cm-gutters {
    display: none;
  }

  .nb-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background-color 160ms var(--ease-out-expo), border-color 160ms var(--ease-out-expo), color 160ms var(--ease-out-expo);
  }

  .nb-secondary-button:hover {
    background: rgba(255, 255, 255, 0.96);
  }

  .nb-secondary-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
  }

  .dark .nb-secondary-button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
  }

  .dark .nb-secondary-button:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .nb-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(217, 119, 87, 0.24);
    background: linear-gradient(180deg, rgba(217, 119, 87, 0.96), rgba(198, 104, 74, 0.96));
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fffaf8;
    box-shadow: 0 14px 34px rgba(217, 119, 87, 0.18);
    transition:
      transform 160ms var(--ease-out-expo),
      box-shadow 160ms var(--ease-out-expo),
      filter 160ms var(--ease-out-expo),
      opacity 160ms var(--ease-out-expo);
  }

  .nb-primary-button:hover {
    filter: brightness(1.02);
    box-shadow: 0 16px 38px rgba(217, 119, 87, 0.22);
  }

  .nb-primary-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
  }

  .nb-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
  }

  .dark .nb-primary-button {
    border-color: rgba(217, 119, 87, 0.3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
  }

  .nb-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
  }

  .dark .nb-status-badge {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
  }

  .nb-status-badge-accent {
    border-color: rgba(217, 119, 87, 0.24);
    background: rgba(217, 119, 87, 0.1);
    color: #ad5f45;
  }

  .dark .nb-status-badge-accent {
    border-color: rgba(217, 119, 87, 0.3);
    color: #f5c1ae;
  }

  .nb-status-badge-success {
    border-color: rgba(5, 150, 105, 0.16);
    background: rgba(5, 150, 105, 0.08);
    color: #047857;
  }

  .dark .nb-status-badge-success {
    border-color: rgba(52, 211, 153, 0.18);
    background: rgba(16, 185, 129, 0.08);
    color: #a7f3d0;
  }

  .nb-answer-surface {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 244, 240, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .dark .nb-answer-surface {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.018));
    box-shadow: none;
  }

  .nb-empty-state {
    border: 1px dashed rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.44);
  }

  .dark .nb-empty-state {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
  }

  .nb-empty-blueprint {
    @apply rounded-[24px];
    border: 1px dashed rgba(15, 23, 42, 0.14);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 244, 240, 0.72)),
      radial-gradient(circle at top right, rgba(217, 119, 87, 0.08), transparent 28%);
  }

  .dark .nb-empty-blueprint {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.14)),
      radial-gradient(circle at top right, rgba(217, 119, 87, 0.08), transparent 28%);
  }

  .nb-metric-strip {
    @apply grid gap-3;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .nb-soft-divider {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .dark .nb-soft-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .nb-action-cluster {
    @apply flex flex-wrap gap-2;
  }

  .type-page-title { @apply text-[1.95rem] leading-tight font-bold tracking-[-0.02em]; font-family: var(--font-display); }
  .type-section-title { @apply text-[1.02rem] leading-tight font-semibold tracking-tight; font-family: var(--font-display); }
  .type-card-title { @apply text-sm font-semibold tracking-tight; }
  .type-body { @apply text-sm leading-6; }
  .type-caption { @apply text-xs text-content-muted; }
  .type-label { @apply text-xs font-medium uppercase tracking-wider text-content-muted; }

  /* Inline button standards — match Button component primitives */
  .btn-primary-xs {
    @apply px-2.5 py-1 text-xs font-medium rounded-md bg-[var(--accent-primary)] text-white
           hover:bg-[var(--accent-primary-hover)] active:scale-[0.98] disabled:opacity-60 disabled:saturate-50 disabled:cursor-not-allowed
           transition-all duration-150 focus-visible:outline-none focus-visible:ring-2
           focus-visible:ring-ring focus-visible:ring-offset-1;
  }
  .btn-primary-sm {
    @apply px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--accent-primary)] text-white
           hover:bg-[var(--accent-primary-hover)] active:scale-[0.98] disabled:opacity-60 disabled:saturate-50 disabled:cursor-not-allowed
           transition-all duration-150 focus-visible:outline-none focus-visible:ring-2
           focus-visible:ring-ring focus-visible:ring-offset-1;
  }
  .btn-ghost-sm {
    @apply px-3 py-1.5 text-xs font-medium rounded-md text-content-secondary
           hover:bg-surface-hover hover:text-content active:scale-[0.98] disabled:opacity-60 disabled:saturate-50 disabled:cursor-not-allowed
           transition-all duration-150 focus-visible:outline-none focus-visible:ring-2
           focus-visible:ring-ring focus-visible:ring-offset-1;
  }
  .btn-outline-sm {
    @apply px-3 py-1.5 text-xs font-medium rounded-md border border-edge text-content-secondary
           hover:bg-surface-hover hover:text-content active:scale-[0.98] disabled:opacity-60 disabled:saturate-50 disabled:cursor-not-allowed
           transition-all duration-150 focus-visible:outline-none focus-visible:ring-2
           focus-visible:ring-ring focus-visible:ring-offset-1;
  }

  /* Shared search shell for topbar + hero inputs */
  .nb-search-surface {
    @apply flex items-center gap-2 rounded-xl border border-edge bg-surface-secondary shadow-sm
           transition-colors duration-150
           hover:border-edge hover:bg-surface
           focus-within:border-primary/35 focus-within:bg-surface
           focus-within:ring-2 focus-within:ring-primary/25;
  }
  .nb-search-input {
    @apply flex-1 bg-transparent text-sm text-content placeholder:text-content-muted
           outline-none;
  }

  /* Lazy-view space reservation — prevents layout shift during Suspense fallback → content swap */
  .nb-lazy-view {
    contain-intrinsic-block-size: auto 600px;
  }

  /* Route-level shell primitives to keep page rhythm/color consistent */
  .nb-page-shell {
    @apply h-full min-h-0 w-full bg-surface overflow-y-auto overflow-x-hidden relative isolate pb-24 xl:pb-0;
  }
  .nb-page-inner {
    @apply flex-1 px-6 sm:px-8 lg:px-10 py-8 relative z-10;
  }
  .nb-page-frame {
    @apply w-full max-w-6xl mx-auto;
  }
  .nb-page-frame-narrow {
    @apply w-full max-w-5xl mx-auto;
  }
  .nb-surface-card {
    @apply rounded-xl border border-edge bg-surface shadow-sm transition-all duration-150
           hover:shadow;
  }
  .nb-surface-card-interactive {
    @apply rounded-xl border border-edge bg-surface shadow-sm transition-all duration-150
           hover:shadow-md hover:border-primary/20;
  }

  /* Long list affordance + FAB-safe scroll padding */
  .nb-scroll-region {
    @apply min-h-0 overflow-y-auto pb-24 xl:pb-16;
  }

  /* Floating action button safe-area anchor */
  .nb-fab-safe {
    /* Keep the FAB above the fixed mobile tab bar so it never steals nav taps. */
    bottom: max(5.25rem, calc(env(safe-area-inset-bottom, 0px) + 5.25rem));
    right: max(1rem, calc(env(safe-area-inset-right, 0px) + 1rem));
  }
  @media (min-width: 640px) {
    .nb-fab-safe {
      bottom: max(1.75rem, calc(env(safe-area-inset-bottom, 0px) + 1.75rem));
      right: max(1.75rem, calc(env(safe-area-inset-right, 0px) + 1.75rem));
    }
  }

  /* Markdown text that stays readable in both themes */
  .nb-prose {
    @apply prose prose-sm max-w-none
           prose-headings:text-content prose-p:text-content-secondary prose-strong:text-content
           prose-li:text-content-secondary prose-a:text-primary prose-a:font-medium
           prose-code:text-content prose-code:bg-surface-secondary prose-code:border-edge;
  }
  .dark .nb-prose {
    @apply prose-invert;
  }
}

/* Preserve display font in editorial/research views */
.editorial-layout h1,
.editorial-layout h2,
.editorial-layout h3,
.editorial-layout h4,
.editorial-layout h5,
.editorial-layout h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/*
 * Z-INDEX SCALE (semantic aliases in tailwind.config.js):
 *   z-raised  (10)  — Lifted cards, hover states
 *   z-sidebar (20)  — Navigation drawers, side panels
 *   z-sticky  (30)  — Sticky headers, toolbars
 *   z-overlay (40)  — Modal backdrops, dim layers
 *   z-modal   (50)  — Dialogs, popovers, panels
 *   z-toast   (60)  — Toasts, notifications (always on top)
 */

/* ───── Depth & Polish Utilities (Linear/Vercel tier) ───── */

/* Noise texture overlay — 2% opacity grain for surface depth */
.noise-bg {
  position: relative;
}
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
  border-radius: inherit;
}

/* Scroll edge fade — gradient masks at top/bottom */
.scroll-fade {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}

/* Refined focus ring — soft glow instead of harsh outline */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary), 0 0 12px var(--accent-primary-bg);
}

/* ------------------------------------------------------------------ */
/* Composer surface — unified single-halo focus state.                */
/* Before: container had `focus-within:ring-2` (terracotta) PLUS      */
/* `focus-within:border-[accent]/50` PLUS the global :focus-visible   */
/* outline on the inner textarea. 2-3 rings stacked in different      */
/* colors. Fix: one box-shadow halo + one border color shift, and     */
/* explicit `outline: none` on wrapped textareas/inputs so the global */
/* :focus-visible rule (src/index.css L206) doesn't add a second     */
/* halo. Applied via data-nb-composer attribute on the wrapper so    */
/* the selector is scoped and doesn't leak to other inputs.          */
/* ------------------------------------------------------------------ */
.nb-composer-surface {
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.nb-composer-surface:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
@media (prefers-color-scheme: light) {
  .nb-composer-surface:focus-within {
    border-color: rgba(15, 23, 42, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-composer-surface { transition: none; }
}

/*
 * .nb-block-shell — per-block editor wrapper for NotebookBlockEditor.
 *
 * Goal: make the BlockChipRenderer → TipTap editor swap visually
 * invisible. Two things matter:
 *   1. `contain: content` isolates layout so when one block hydrates
 *      and swaps in its live editor, it does NOT reflow neighboring
 *      blocks — which was the "every block is loading" perception
 *      (a cascade of reflows looked like a cascade of loads).
 *   2. Shared `ProseMirror` class on both the fallback and the live
 *      editor container ensures typography/spacing match pixel-wise.
 *
 * Perf: `content-visibility: auto` lets the browser skip layout/paint
 * for blocks far off-screen until they approach the viewport. A
 * `contain-intrinsic-size` hint keeps scrollbar behavior stable.
 */
.nb-block-shell {
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: auto 1.75rem;
}

/*
 * [data-view-mode="read"] — strip edit chrome for the read/report
 * view. Same page, same data, different presentation. Pattern is
 * pulled from Notion's edit/published-webpage duality.
 *
 * Rule of thumb: if a UI element is about MUTATING the notebook
 * (slash menu, accept/dismiss, edit toggles, composer), hide it
 * in read mode. Elements that communicate content (overlays, author
 * attribution on content, citations) stay visible, sometimes with
 * chrome stripped so they read as footnotes rather than live
 * affordances.
 */

/* Hide runtime ops chrome — operator affordances, not reading
   material. */
[data-view-mode="read"] .nb-top-status-row,
[data-view-mode="read"] [data-testid="notebook-top-status-row"],
[data-view-mode="read"] [data-testid="notebook-timeline"],
[data-view-mode="read"] [data-testid="notebook-block-status"] {
  display: none !important;
}

/* Hide mutation affordances on decorations — the content of the
   decoration stays (IS the reading material); only the buttons go. */
[data-view-mode="read"] [data-action="accept"],
[data-view-mode="read"] [data-action="dismiss"],
[data-view-mode="read"] [data-action="refresh"],
[data-view-mode="read"] [data-action="ask"],
[data-view-mode="read"] .decoration-action-bar {
  display: none !important;
}

/* Make the notebook immutable for readers. Belt-and-suspenders:
   we ALSO set contenteditable=false on the editor from JS; CSS
   guards against stray clicks reaching ProseMirror's view. */
[data-view-mode="read"] .ProseMirror,
[data-view-mode="read"] [contenteditable="true"] {
  pointer-events: none;
  caret-color: transparent;
  user-select: text;
}
[data-view-mode="read"] .ProseMirror a,
[data-view-mode="read"] [contenteditable="true"] a {
  pointer-events: auto;
}

/* Reading column — tighter than edit mode's notebook-sheet width
   for classic document rhythm (Notion ~720px; Medium ~680px). */
[data-view-mode="read"] .notebook-sheet {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 48px;
}

/* Hide composer surfaces in read mode (Ask panels, inline composers,
   share-entity input fields). Structural content stays. */
[data-view-mode="read"] [data-nb-composer],
[data-view-mode="read"] .nb-composer-surface {
  display: none !important;
}

/* Quiet inline agent attribution to an aside-style look — still
   visible for provenance, but half-weight so the prose leads. */
[data-view-mode="read"] .nb-agent-tag { opacity: 0.5; }

/* Free print stylesheet for read mode. */
@media print {
  [data-view-mode="read"] .notebook-sheet {
    max-width: none;
    padding-top: 0;
  }
  [data-view-mode="read"] .nb-agent-tag {
    opacity: 1;
    filter: grayscale(1);
  }
  [data-view-mode="read"] * {
    box-shadow: none !important;
    animation: none !important;
  }
}

/*
 * .nb-decoration-reveal — first-appearance animation for inline
 * diligence decorations. Applied once per (scratchpadRunId,
 * blockType) by DiligenceDecorationPlugin; subsequent renders skip
 * the class. The motion mirrors the v3/v4 prototype feel: fade in
 * + gentle rise so users SEE the agent place content. Respects
 * prefers-reduced-motion (class becomes a no-op).
 */
@keyframes nb-decoration-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nb-decoration-reveal {
  animation: nb-decoration-reveal 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .nb-decoration-reveal { animation: none; }
}
[data-nb-composer] textarea:focus,
[data-nb-composer] textarea:focus-visible,
[data-nb-composer] input:focus,
[data-nb-composer] input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Inline code — monospace with accent-aware background */
:not(pre) > code {
  background: var(--accent-primary-bg);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875em;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary-bg);
}

/* Dark mode: elevate with subtle inset border instead of box-shadow */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md {
  --tw-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
  --tw-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Stagger utility — cascade children with 50ms delays */
.stagger > * { animation-fill-mode: both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(n+6) { animation-delay: 250ms; }

/* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.20);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Firefox dark mode scrollbar */
.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* ───────────────────────────────────────────────────────────────────────
   Home starting-point cards — staggered fade-in entry + skeleton loader.
   Used on `/?surface=home` for the Recent Reports grid so cards don't
   pop in all at once. animation-delay is set inline per-card.
   ─────────────────────────────────────────────────────────────────────── */
/* Three helpers reuse keyframes already defined in tailwind.config.js:
     - `fade-slide-in` for card stagger entry + route fade
     - `typewriter-blink` for the stream caret
   Skeletons use Tailwind's built-in `animate-pulse` directly. */

.starting-point-card {
  animation: fade-slide-in 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.stream-caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: typewriter-blink 1.05s step-end infinite;
  border-radius: 1px;
}

.route-fade-in {
  animation: fade-slide-in 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .starting-point-card,
  .route-fade-in {
    animation: none;
  }
  .stream-caret::after {
    animation: none;
    opacity: 0.6;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   Notebook surface — flat document (Notion/Linear/Obsidian convention).
   Previous version was a cream "paper sheet" with binding line; dropped
   in favor of a clean transparent surface that sits on the page bg and
   lets typography do the work. Keep `--ink-user` / `--ink-agent` for
   authorship distinction.
   ─────────────────────────────────────────────────────────────────────── */
.notebook-sheet {
  background: transparent;
  color: var(--ink-user);
  padding: 8px 0 64px;
  position: relative;
  /* Reading column cap — matches Notion default (~900px). Wider than
     Linear (~720px) because NodeBench shows more metadata per line. */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.entity-page-header-shell {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.entity-page-header-shell--live {
  max-width: 960px;
}

.entity-page-header-shell--read {
  max-width: 720px;
}

.entity-page-summary {
  max-width: 44rem;
}

.entity-page-header-shell--live .entity-page-summary {
  max-width: 40rem;
}

.entity-page-header-shell--read .entity-page-summary {
  max-width: 38rem;
}

.notebook-sheet.notebook-sheet-live {
  max-width: 1160px;
}

@media (max-width: 640px) {
  .notebook-sheet {
    padding: 4px 0 40px;
  }

  .entity-page-header-shell,
  .entity-page-header-shell--live,
  .entity-page-header-shell--read {
    max-width: none;
  }

  .entity-page-summary,
  .entity-page-header-shell--live .entity-page-summary,
  .entity-page-header-shell--read .entity-page-summary {
    max-width: none;
  }
}

/* A block authored (or touched) by an agent is drawn in a slightly
   different ink tone and carries a left-edge tick in the margin.
   Reduced-motion-safe: no animation, just color. */
.notebook-block-agent {
  color: var(--ink-agent);
}

.notebook-block-agent-mark {
  /* 8px dot in the left margin, anchored at the block's baseline. */
  position: absolute;
  left: -28px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--accent-primary);
  opacity: 0.65;
}

/* Wet-ink pulse — fires once on the most recently edited block. */
@keyframes notebook-wet-ink {
  0% {
    background-color: var(--ink-agent-bg);
  }
  100% {
    background-color: transparent;
  }
}

.notebook-block-wet-ink {
  animation: notebook-wet-ink 800ms ease-out 1;
}

/* Placeholder ghost-text — shows ONLY on the currently-focused block's
   empty paragraph, never on every empty block in the document. Matches
   Ideaflow/Lexical pattern (Editor.module.css:69-89): hidden by default,
   fades in on focus. A doc with 10 empty lines must not display 10
   repeated "Type / for commands…" ghosts — that drowns real content. */
.notebook-sheet [data-testid="notebook-block"][data-block-focused="true"] .ProseMirror p.is-empty::before {
  content: "Type / for commands…";
  color: var(--text-placeholder, #9CA3AF);
  opacity: 0.4;
  font-style: normal;
  pointer-events: none;
  float: left;
  height: 0;
  transition: opacity 150ms ease-in;
}

/* Ensure the Tiptap editor always has at least one line-height of space
   so the cursor is visible in empty blocks without relying on block padding. */
.notebook-sheet .ProseMirror {
  min-height: 1.5em;
}

/* Notebook block: hover affordance + focus transition. Matches Notion's
   "calm on read, surface on intent" rhythm. */
.notebook-sheet [data-testid="notebook-block"] {
  transition: background-color 120ms ease-out;
}

/* ------------------------------------------------------------------ */
/* Live notebook: industry-grade block interaction layer.
   Scope: [data-testid="entity-live-notebook"] (not .notebook-sheet)
   because EntityNotebookLive renders its own root, not the sheet.
   - Hover: 2px neutral left-edge tint + faint background.
   - Focus: 2px accent-primary left-edge bar + crisper background.
   - Active (pointer-down): subtle GPU scale for tactile feedback.
   All transitions use GPU-composited properties (background-color,
   box-shadow, transform). No layout-affecting transitions. */
[data-testid="entity-live-notebook"] [data-testid="notebook-block"] {
  border-radius: 6px;
  transition:
    background-color 120ms ease-out,
    box-shadow 140ms ease-out,
    transform 80ms ease-out;
}
[data-testid="entity-live-notebook"] [data-testid="notebook-block"]:hover {
  background-color: rgba(255, 255, 255, 0.022);
  box-shadow: inset 2px 0 0 0 rgba(255, 255, 255, 0.08);
}
[data-testid="entity-live-notebook"] [data-testid="notebook-block"][data-block-focused="true"] {
  background-color: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 2px 0 0 0 var(--accent-primary),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
[data-testid="entity-live-notebook"] [data-testid="notebook-block"]:active {
  transform: scale(0.998);
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="entity-live-notebook"] [data-testid="notebook-block"] {
    transition: background-color 120ms ease-out;
  }
  [data-testid="entity-live-notebook"] [data-testid="notebook-block"]:active {
    transform: none;
  }
}

/* Lexical/Ideaflow rhythm: zero block margin + min-height per paragraph.
   Tight spacing between content blocks; empty blocks collapse to a single
   line instead of a full paragraph of whitespace. */
.notebook-sheet .ProseMirror p {
  margin: 0;
  min-height: 1.5rem;
}

/* Stagger-reveal on initial mount. Each block fades in with a small
   cascading delay (50ms per block, capped). Respects reduced-motion. */
@keyframes notebook-block-reveal {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notebook-sheet [data-testid="notebook-block"] {
  animation: notebook-block-reveal 200ms ease-out backwards;
}
/* Cap the cascade at 10 blocks so a 100-block document doesn't take 5s
   to finish revealing. Blocks beyond the cap fade in together. */
.notebook-sheet [data-testid="notebook-block"]:nth-child(1)  { animation-delay: 0ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(2)  { animation-delay: 30ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(3)  { animation-delay: 60ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(4)  { animation-delay: 90ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(5)  { animation-delay: 120ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(6)  { animation-delay: 150ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(7)  { animation-delay: 180ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(8)  { animation-delay: 210ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(9)  { animation-delay: 240ms; }
.notebook-sheet [data-testid="notebook-block"]:nth-child(n+10) { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .notebook-sheet [data-testid="notebook-block"] {
    animation: none;
  }
}

/* Agent ink tweak — ensure agent-authored blocks have a subtle tone shift
   without being distracting. Works on flat surface (no paper bg). */
.notebook-sheet [data-author-kind="agent"] .ProseMirror,
.notebook-sheet [data-author-kind="agent"] [role="textbox"] {
  color: var(--ink-agent);
}

/* Outline jump pulse — brief left-accent flash when the user navigates to
   a heading via the right-rail outline. Tells the user "you landed here"
   without stealing the focus ring. */
@keyframes notebook-outline-jump {
  0% {
    box-shadow: inset 2px 0 0 0 var(--accent-primary, #d97757);
    background-color: color-mix(in oklab, var(--accent-primary, #d97757) 8%, transparent);
  }
  100% {
    box-shadow: inset 2px 0 0 0 transparent;
    background-color: transparent;
  }
}
.notebook-sheet [data-testid="notebook-block"].notebook-outline-jump-pulse {
  animation: notebook-outline-jump 900ms ease-out 1;
}

/* Stream-ink: per-paragraph fade-in inside a decoration body. Matches
   v3 prototype's staggered arrival (animation-delay set inline per idx). */
@keyframes notebook-stream-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notebook-stream-ink {
  animation: notebook-stream-fade 320ms ease-out backwards;
}

/* Char-by-char typewriter (v4 prototype, 12ms/char). Only used on the tail
   of the last paragraph during active stream (see DiligenceDecorationPlugin).
   Cap at 120 chars → ≤1.4s total animation. */
@keyframes notebook-stream-char {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.notebook-stream-char {
  display: inline;
  animation: notebook-stream-char 180ms ease-out backwards;
}

/* Active-stream caret: blinking vertical bar at the end of the most recent
   paragraph when the decoration updated within the last 5s. Matches v4's
   "live writing" feel without per-char wrapping. */
@keyframes notebook-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.notebook-stream-active::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: notebook-caret-blink 1s steps(1, end) infinite;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .notebook-block-wet-ink,
  .notebook-stream-ink,
  .notebook-stream-char,
  .notebook-stream-active::after,
  .notebook-sheet [data-testid="notebook-block"].notebook-outline-jump-pulse {
    animation: none;
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.animate-cursor {
  animation: blink 1s step-end infinite;
}

/* ═══════════════════════════════════════════════════════════════
   MODERN SAAS STREAMING ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Shimmer effect for skeleton loaders — uses transform instead of background-position
   for GPU-composited animation (no layout recalculation) */
.shimmer-bg {
  position: relative;
  overflow: hidden;
}

.shimmer-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  animation: shimmer-slide 2s ease-in-out infinite;
  will-change: transform;
}

@keyframes shimmer-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Glass morphism container — blur(8px) balances visual effect vs GPU cost */
.skeleton-pulse {
  animation: skeleton-pulse 1.9s ease-in-out infinite;
  animation-delay: 300ms;
  animation-fill-mode: backwards;
  opacity: 0.84;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.84; }
  50% { opacity: 0.92; }
}

/* Tailwind's `animate-pulse` uses a high-contrast opacity swing (1 → 0.5 → 1),
   which reads as a "flash" on large surfaces. Override it to be subtler. */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

.reduce-motion .skeleton-pulse {
  animation: none !important;
  opacity: 0.8;
}

.no-skeleton-animation .skeleton-pulse {
  animation: none !important;
  opacity: 0.84;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-pulse {
    animation: none !important;
    opacity: 0.8;
  }
}

/* R8: Skeleton stagger fade-in */
@keyframes skeletonFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton-stagger {
  animation: skeletonFadeIn 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-stagger {
    animation: none !important;
  }
}

/* Premium skeleton shimmer animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-shimmer {
    animation: none !important;
  }
}

.glass-container {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .glass-container {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.12);
  }
}

/* Animated gradient border */
.gradient-border {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg,
      #8b5cf6,
      #3b82f6,
      #06b6d4,
      #8b5cf6);
  background-size: 200% 100%;
  animation: border-flow 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Flowing gradient background */
.flowing-gradient {
  background: linear-gradient(-45deg,
      #0f0f1a,
      #1a1a2e,
      #16213e,
      #0f0f1a);
  background-size: 400% 400%;
  animation: gradient-flow 8s ease infinite;
}

/* Progress ring */
.progress-ring-circle {
  transition: stroke-dashoffset 0.5s ease-out;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Typewriter cursor */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: currentColor;
  margin-left: 2px;
  animation: typewriter-blink 1s step-end infinite;
  vertical-align: text-bottom;
}

/* Tool chip with smooth entrance */
.tool-chip {
  animation: fade-slide-in 0.3s ease-out forwards;
  animation-delay: calc(var(--index) * 0.05s);
  opacity: 0;
}

/* Live indicator dot */
.live-dot {
  position: relative;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2s ease-in-out infinite;
}

/* Smooth scrolling timeline */
.timeline-scroll {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timeline-scroll::-webkit-scrollbar {
  display: none;
}

/* Agent avatar with status ring */
.agent-avatar {
  position: relative;
}

.agent-avatar.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #8b5cf6;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Section skeleton with shimmer */
.section-skeleton {
  background: linear-gradient(90deg,
      rgba(139, 92, 246, 0.05) 0%,
      rgba(139, 92, 246, 0.1) 50%,
      rgba(139, 92, 246, 0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Subtle glow effect for active states */
.active-glow {
  box-shadow:
    0 0 20px rgba(139, 92, 246, 0.15),
    0 0 40px rgba(139, 92, 246, 0.1),
    0 0 60px rgba(139, 92, 246, 0.05);
}

/* Smooth content fade-in */
.content-fade-in {
  animation: fade-slide-in 0.5s ease-out forwards;
}

/* Status transition effects */
.status-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered children animation */
.stagger-children>* {
  animation: fade-slide-in 0.3s ease-out forwards;
  opacity: 0;
}

.stagger-children>*:nth-child(1) {
  animation-delay: 0s;
}

.stagger-children>*:nth-child(2) {
  animation-delay: 0.05s;
}

.stagger-children>*:nth-child(3) {
  animation-delay: 0.1s;
}

.stagger-children>*:nth-child(4) {
  animation-delay: 0.15s;
}

.stagger-children>*:nth-child(5) {
  animation-delay: 0.2s;
}

.stagger-children>*:nth-child(6) {
  animation-delay: 0.25s;
}

/* ═══════════════════════════════════════════════════════════════
   PROSE TABLE & TEXT OVERFLOW FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Force word-breaking in prose elements */
.prose {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Table overflow handling */
.prose table {
  table-layout: fixed;
  width: 100%;
}

.prose th,
.prose td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 300px;
}

/* Long URLs and inline code — break-word preserves whole words */
.prose a,
.prose code {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ensure inline elements don't overflow */
.prose p,
.prose li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Handle raw table text that didn't parse as markdown tables */
.prose p {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Make pipe-separated text more readable */
.prose {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER INLINE CITATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Citation superscript container */
.nb-cite {
  vertical-align: super;
  font-size: 0.7em;
  font-weight: 500;
  margin-left: 1px;
}

/* Citation link styling */
.nb-cite-link {
  padding: 0 2px;
  text-decoration: none;
  color: hsl(var(--primary));
  transition: opacity 0.15s ease;
}

.nb-cite-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Citation flash animation for scroll-to-source */
@keyframes citation-flash {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }

  25%,
  75% {
    box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 30px 8px rgba(59, 130, 246, 0.6);
  }
}

.citation-flash {
  animation: citation-flash 1.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   FEEDBACK ANIMATIONS (useFeedback hook)
   ═══════════════════════════════════════════════════════════════ */

@keyframes feedback-success-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.4);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.feedback-success-flash {
  animation: feedback-success-flash 0.6s ease-out;
}

@keyframes feedback-error-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

.feedback-error-shake {
  animation: feedback-error-shake 0.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — disable non-essential animation
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .shimmer-bg::after,
  .section-skeleton,
  .gradient-border::before,
  .flowing-gradient,
  .live-dot::after {
    animation: none;
  }

  .agent-avatar.active::after {
    animation: none;
    border-color: #8b5cf6;
  }

  .stagger > *,
  .stagger-children > * {
    animation: none;
    opacity: 1;
  }

  .tool-chip {
    animation: none;
    opacity: 1;
  }

  .reveal,
  .reveal-scale,
  .reveal-blur,
  .reveal-left {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .animate-cursor,
  .typewriter-cursor {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE SCROLLBAR PARITY
   ═══════════════════════════════════════════════════════════════ */

/* Firefox light mode scrollbar */
* {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

/* Light mode focus ring parity */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Reduced motion toggle (ThemeProvider) */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Reduced motion: disable animations for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HUD / JARVIS-STYLE EFFECTS
   ═══════════════════════════════════════════════════════════════ */

/* Ripple effect on buttons — CSS-only, triggered by :active */
.hud-ripple {
  position: relative;
  overflow: hidden;
}

.hud-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.hud-ripple:active::after {
  transform: scale(2.5);
  opacity: 1;
  animation: hud-ripple-out 0.4s ease-out forwards;
}

@keyframes hud-ripple-out {
  0% {
    transform: scale(0);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Grid drift animation for GridOverlay */
@keyframes hud-grid-drift {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

/* Reduced motion: disable all HUD effects */
.reduce-motion .hud-ripple::after,
.reduce-motion .hud-ripple:active::after {
  animation: none !important;
  transform: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hud-ripple::after,
  .hud-ripple:active::after {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
  }

  @keyframes hud-grid-drift {
    from { background-position: 0 0; }
    to { background-position: 0 0; }
  }
}

/* ═══════════════════════════════════════════════════════════
   Frontend-Slides Design Activation
   Atmosphere, card variants, animated counters
   ═══════════════════════════════════════════════════════════ */

/* ───── CSS Counter Animation (animated number displays) ───── */
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.animate-counter {
  transition: --num 1.2s var(--ease-out-expo);
  counter-reset: num var(--num);
}
.animate-counter::after {
  content: counter(num);
}
.reduce-motion .animate-counter,
.animate-counter.no-animate {
  transition-duration: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .animate-counter {
    transition-duration: 0s;
  }
}

/* ───── View-Specific Atmosphere Gradients ───── */
/* Layer on top of global background pattern for per-view color identity */

.dark .view-atmosphere-investigation {
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(196, 30, 58, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(99, 102, 241, 0.05) 0%, transparent 40%);
}
.dark .view-atmosphere-funding {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 165, 116, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(67, 97, 238, 0.05) 0%, transparent 35%);
}
.dark .view-atmosphere-agents {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(57, 211, 83, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.04) 0%, transparent 40%);
}
.dark .view-atmosphere-research {
  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(67, 97, 238, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 20%, rgba(0, 255, 200, 0.04) 0%, transparent 35%);
}
.dark .view-atmosphere-receipts {
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(245, 158, 11, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 85%, rgba(99, 102, 241, 0.04) 0%, transparent 35%);
}
.dark .view-atmosphere-home {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 255, 200, 0.04) 0%, transparent 40%);
}

/* Light mode — warmer, subtler */
:root:not(.dark) .view-atmosphere-investigation {
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(196, 30, 58, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(99, 102, 241, 0.03) 0%, transparent 40%);
}
:root:not(.dark) .view-atmosphere-funding {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 165, 116, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(67, 97, 238, 0.03) 0%, transparent 35%);
}
:root:not(.dark) .view-atmosphere-agents {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(57, 211, 83, 0.03) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.02) 0%, transparent 40%);
}
:root:not(.dark) .view-atmosphere-research {
  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(67, 97, 238, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 20%, rgba(0, 200, 160, 0.02) 0%, transparent 35%);
}
:root:not(.dark) .view-atmosphere-receipts {
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(245, 158, 11, 0.03) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 85%, rgba(99, 102, 241, 0.02) 0%, transparent 35%);
}
:root:not(.dark) .view-atmosphere-home {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 200, 160, 0.02) 0%, transparent 40%);
}

/* ───── Card Surface Variants ───── */
@layer components {
  .card-surface-elevated {
    @apply rounded-xl border border-edge/40;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
  .dark .card-surface-elevated {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  .card-surface-inset {
    @apply rounded-xl border border-edge/30;
    background: var(--bg-secondary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .dark .card-surface-inset {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .card-surface-glass {
    @apply rounded-xl border border-edge/20;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
  }
  .dark .card-surface-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
  }

  /* Status-tinted cards for receipt/approval feeds */
  .card-status-allowed {
    border-left: 3px solid rgba(57, 211, 83, 0.6);
  }
  .card-status-pending {
    border-left: 3px solid rgba(245, 158, 11, 0.6);
  }
  .card-status-denied {
    border-left: 3px solid rgba(239, 68, 68, 0.6);
  }
  .card-status-needs-approval {
    border-left: 3px solid rgba(99, 102, 241, 0.6);
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK BOTANICAL PRESET — frontend-slides: elegant dark, warm gold/pink
   Activates via html.dark[data-preset="dark-botanical"]
   ═══════════════════════════════════════════════════════════════ */

html.dark[data-preset="dark-botanical"] {
  --background: 0 0% 6%;
  --foreground: 30 10% 90%;
  --card: 20 6% 10%;
  --card-foreground: 30 10% 90%;
  --popover: 20 6% 10%;
  --popover-foreground: 30 10% 90%;
  --muted: 20 4% 14%;
  --muted-foreground: 25 6% 55%;
  --secondary: 20 4% 14%;
  --secondary-foreground: 30 10% 90%;
  --border: 25 8% 16%;
  --input: 25 8% 16%;

  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1816;
  --bg-hover: #252220;
  --bg-tertiary: #1e1b19;
  --text-primary: #e8e4df;
  --text-secondary: #9a9590;
  --text-muted: #7a7570;
  --border-color: rgba(212, 165, 116, 0.12);
  --text-disabled: #6a6560;
  --text-tertiary: #9a9590;
  --text-placeholder: #6a6560;
}

/* Botanical background pattern — warm radial orbs + organic noise drift */
html.dark[data-preset="dark-botanical"][data-background-pattern='noise'] body {
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(212, 165, 116, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(232, 180, 184, 0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(201, 184, 150, 0.03) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%);
  background-size: cover, cover, cover, 18px 18px, 18px 18px;
  animation: botanical-drift 30s ease-in-out infinite alternate;
}

@keyframes botanical-drift {
  0% { background-position: 0% 0%, 100% 0%, 50% 50%, 0 0, 0 0; }
  100% { background-position: 5% 8%, 95% 5%, 52% 48%, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.dark[data-preset="dark-botanical"][data-background-pattern='noise'] body {
    animation: none;
  }
}
.reduce-motion html.dark[data-preset="dark-botanical"][data-background-pattern='noise'] body,
html.dark.reduce-motion[data-preset="dark-botanical"][data-background-pattern='noise'] body {
  animation: none;
}

/* Botanical dark shadows — warmer than default cool greys */
html.dark[data-preset="dark-botanical"] .shadow-sm,
html.dark[data-preset="dark-botanical"] .shadow,
html.dark[data-preset="dark-botanical"] .shadow-md {
  --tw-shadow: 0 0 0 1px rgba(212, 165, 116, 0.04);
}
html.dark[data-preset="dark-botanical"] .shadow-lg,
html.dark[data-preset="dark-botanical"] .shadow-xl,
html.dark[data-preset="dark-botanical"] .shadow-2xl {
  --tw-shadow: 0 0 0 1px rgba(212, 165, 116, 0.06), 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Botanical scrollbar */
html.dark[data-preset="dark-botanical"] ::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 116, 0.12);
}
html.dark[data-preset="dark-botanical"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 116, 0.22);
}
html.dark[data-preset="dark-botanical"] * {
  scrollbar-color: rgba(212, 165, 116, 0.12) transparent;
}

/* Botanical type polish — Cormorant italic titles */
html.dark[data-preset="dark-botanical"] .type-page-title {
  font-style: italic;
  letter-spacing: -0.025em;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}
html.dark[data-preset="dark-botanical"] .type-section-title {
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* ───── Botanical Signature Elements ───── */

/* Soft radial gradient circles — Dark Botanical's visual signature */
.botanical-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.06;
  z-index: 0;
}
html.dark[data-preset="dark-botanical"] .botanical-orb {
  opacity: 0.08;
}
.botanical-orb-gold {
  background: radial-gradient(circle, rgba(212, 165, 116, 0.8) 0%, transparent 70%);
  width: 400px;
  height: 400px;
}
.botanical-orb-pink {
  background: radial-gradient(circle, rgba(232, 180, 184, 0.6) 0%, transparent 70%);
  width: 300px;
  height: 300px;
}
.botanical-orb-sage {
  background: radial-gradient(circle, rgba(201, 184, 150, 0.5) 0%, transparent 70%);
  width: 350px;
  height: 350px;
}

/* Elegant horizontal rule with warm gradient */
.botanical-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 165, 116, 0.3) 20%, rgba(232, 180, 184, 0.2) 80%, transparent 100%);
  margin: 1.5rem 0;
}

/* Italic accent text for captions/attributions */
.botanical-italic-signature {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

/* Botanical atmosphere overrides — warm tones instead of cold indigo */
html.dark[data-preset="dark-botanical"] .view-atmosphere-investigation {
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(196, 30, 58, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(212, 165, 116, 0.06) 0%, transparent 40%);
}
html.dark[data-preset="dark-botanical"] .view-atmosphere-funding {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212, 165, 116, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(201, 184, 150, 0.05) 0%, transparent 35%);
}
html.dark[data-preset="dark-botanical"] .view-atmosphere-agents {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(201, 184, 150, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(212, 165, 116, 0.04) 0%, transparent 40%);
}
html.dark[data-preset="dark-botanical"] .view-atmosphere-research {
  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(212, 165, 116, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 20%, rgba(232, 180, 184, 0.04) 0%, transparent 35%);
}
html.dark[data-preset="dark-botanical"] .view-atmosphere-home {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(212, 165, 116, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(232, 180, 184, 0.04) 0%, transparent 40%);
}
html.dark[data-preset="dark-botanical"] .view-atmosphere-receipts {
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(212, 165, 116, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 85%, rgba(201, 184, 150, 0.04) 0%, transparent 35%);
}

/* Botanical gradient mesh — warm golds instead of cool blues */
html.dark[data-preset="dark-botanical"] .gradient-mesh {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(212, 165, 116, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(232, 180, 184, 0.08) 0%, transparent 50%),
    var(--bg-primary);
}

/* Botanical inline code */
html.dark[data-preset="dark-botanical"] :not(pre) > code {
  background: rgba(212, 165, 116, 0.1);
  color: #d4a574;
  border-color: rgba(212, 165, 116, 0.15);
}

/* Botanical focus ring */
html.dark[data-preset="dark-botanical"] :focus-visible {
  outline-color: #d4a574;
}
html.dark[data-preset="dark-botanical"] .focus-ring:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px #d4a574, 0 0 12px rgba(212, 165, 116, 0.15);
}

/* Premium scrollbar — moved from DocumentsHomeHub inline <style> to avoid per-render style recalc */
.premium-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.premium-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.premium-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
.premium-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ─── Cockpit Grid Layout ─── */
/* Responsive grid: mobile = full-bleed center, desktop = left rail + center + right rail */
.cockpit-grid {
  display: grid;
  grid-template-areas:
    "status  status  status"
    "left    center  right"
    "trace   trace   trace";
  grid-template-rows: auto 1fr auto;
  /* Mobile: no rails, center gets all space */
  grid-template-columns: 0px 1fr 0px;
}
@media (min-width: 1280px) {
  .cockpit-grid {
    grid-template-columns: 240px 1fr 0px;
  }
  .cockpit-grid[data-public-shell] {
    grid-template-columns: 0px 1fr 0px;
    background:
      radial-gradient(circle at 10% 0%, rgba(217, 119, 87, 0.07), transparent 26%),
      radial-gradient(circle at 86% 8%, rgba(96, 165, 250, 0.05), transparent 22%),
      linear-gradient(180deg, #eef2f6 0%, #f5f7fa 24%, #edf1f6 100%);
  }
  .dark .cockpit-grid[data-public-shell] {
    background:
      radial-gradient(circle at 14% 0%, rgba(217, 119, 87, 0.11), transparent 28%),
      radial-gradient(circle at 84% 10%, rgba(96, 165, 250, 0.07), transparent 22%),
      radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.03), transparent 32%),
      linear-gradient(180deg, #0b1015 0%, #0c1218 34%, #090e13 100%);
  }
  .cockpit-grid[data-left-collapsed] {
    grid-template-columns: 48px 1fr 0px;
  }
  .cockpit-grid[data-public-shell][data-left-collapsed] {
    grid-template-columns: 0px 1fr 0px;
  }
  .cockpit-grid[data-right-collapsed] {
    grid-template-columns: 240px 1fr 0px;
  }
  .cockpit-grid[data-public-shell][data-right-collapsed] {
    grid-template-columns: 0px 1fr 0px;
  }
  .cockpit-grid[data-left-collapsed][data-right-collapsed] {
    grid-template-columns: 48px 1fr 0px;
  }
  .cockpit-grid[data-public-shell][data-left-collapsed][data-right-collapsed] {
    grid-template-columns: 0px 1fr 0px;
  }
}

.nb-public-shell {
  position: relative;
  isolation: isolate;
}

.nb-public-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 18%),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.26), transparent 40%);
}

.dark .nb-public-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.035), transparent 44%);
}

.nb-public-stage {
  position: relative;
  isolation: isolate;
}

.nb-public-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%);
}

.dark .nb-public-stage::before {
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 16%);
}

.nb-public-stage > * {
  position: relative;
  z-index: 1;
}

.nb-kit-topnav {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(250, 248, 245, 0.88);
  color: #111827;
  backdrop-filter: blur(18px);
}

.dark .nb-kit-topnav {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  background: rgba(13, 17, 23, 0.9);
  color: #f8fafc;
}

.nb-kit-topnav-tab {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  transition:
    background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
    color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-kit-topnav-tab:hover {
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
}

.dark .nb-kit-topnav-tab {
  color: rgba(255, 255, 255, 0.68);
}

.dark .nb-kit-topnav-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.nb-kit-topnav-tab[data-active="true"] {
  border-color: rgba(15, 23, 42, 0.06);
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.35);
}

.dark .nb-kit-topnav-tab[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.nb-kit-topnav-search {
  display: flex;
  width: 100%;
  max-width: 360px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #9ca3af;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.dark .nb-kit-topnav-search {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.58);
}

.nb-kit-topnav-search:focus-visible {
  outline: none;
  border-color: rgba(217, 119, 87, 0.24);
  box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.25);
}

.nb-kit-topnav-search kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 4px;
  background: #f3f4f6;
  color: #9ca3af;
  padding: 2px 6px;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.dark .nb-kit-topnav-search kbd {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.58);
}

.nb-kit-topnav-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  transition:
    background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-kit-topnav-icon:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

.dark .nb-kit-topnav-icon {
  color: rgba(255, 255, 255, 0.64);
}

.dark .nb-kit-topnav-icon:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.nb-kit-topnav-avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #d97757, #5e6ad2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.nb-topnav-surface {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.dark .nb-topnav-surface {
  background: transparent;
}

.nb-topnav-shell {
  border: 1px solid rgba(15, 23, 42, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.68));
  box-shadow: 0 24px 64px -46px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(18px);
  border-radius: 26px;
}

.dark .nb-topnav-shell {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(11, 16, 22, 0.88), rgba(11, 16, 22, 0.74));
  box-shadow: 0 28px 72px -52px rgba(0, 0, 0, 0.9);
}

.nb-topnav-nav {
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 38px -34px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
}

.dark .nb-topnav-nav {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.86);
}

.nb-topnav-button {
  color: rgba(15, 23, 42, 0.62);
}

.nb-topnav-button:hover {
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.92);
}

.dark .nb-topnav-button {
  color: rgba(255, 255, 255, 0.66);
}

.dark .nb-topnav-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.96);
}

.nb-topnav-button-active {
  background: rgba(255, 255, 255, 0.94);
  color: rgba(15, 23, 42, 0.96);
  box-shadow: 0 14px 26px -22px rgba(15, 23, 42, 0.18);
}

.dark .nb-topnav-button-active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.nb-topnav-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.9));
  padding: 0.65rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f8fafc;
  box-shadow: 0 16px 30px -22px rgba(15, 23, 42, 0.34);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.nb-topnav-action:hover {
  filter: brightness(1.03);
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.42);
}

.dark .nb-topnav-action {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.72);
}

.dark .nb-topnav-action:hover {
  box-shadow: 0 22px 38px -24px rgba(0, 0, 0, 0.82);
}

@keyframes nb-sheen {
  100% {
    transform: translateX(100%);
  }
}

@keyframes nb-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE TOUCH TARGETS — P0 accessibility (WCAG 2.5.5)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  button:not([data-density="compact"]),
  [role="button"]:not([data-density="compact"]),
  a:not([data-density="compact"]),
  input,
  select,
  textarea,
  summary {
    min-height: 44px;
  }

  /* Compact escape hatch for chips/pills with small text */
  .nb-chip,
  button[data-density="compact"],
  [data-density="compact"] {
    min-height: 36px;
    min-width: unset;
  }

  /* Preserve inline/icon buttons with explicit small sizing */
  button[aria-label]:not([class*="min-h"]) {
    min-width: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Focus rings — visible focus indicator (WCAG 2.4.7)
   Terracotta accent at 50% opacity for design-system consistency.
   ═══════════════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid rgba(15, 23, 42, 0.25);
  outline-offset: 2px;
}

.dark button:focus-visible,
.dark a:focus-visible,
.dark input:focus-visible,
.dark textarea:focus-visible,
.dark select:focus-visible,
.dark [role="button"]:focus-visible,
.dark [tabindex]:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: 2px;
}

/* Contenteditable (Lexical editor) — no ring on focus, subtle border is enough from parent */
[contenteditable="true"]:focus-visible,
[contenteditable="true"]:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced motion — skip ALL animations (WCAG 2.3.3)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX: Solid card fallback — glass blur is GPU-heavy on mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  /* Solid card fallback — glass blur is GPU-heavy on mobile */
  [class*="backdrop-blur"],
  [class*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Replace transparent white backgrounds with solid dark */
  [class*="bg-white\\/\\[0.02\\]"],
  [class*="bg-white\\/\\[0.03\\]"],
  [class*="bg-white\\/\\[0.04\\]"],
  [class*="bg-white\\/\\[0.05\\]"] {
    background-color: rgba(26, 26, 46, 0.95) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX: Simpler animations — FadeIn only, no stagger delays
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  /* Simpler animations on mobile — FadeIn only, no stagger delays */
  .skeleton-stagger,
  [style*="animationDelay"] {
    animation-delay: 0s !important;
  }

  /* Faster transitions on mobile */
  * {
    transition-duration: 150ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DILIGENCE DECORATIONS — prose-native overlay styling
   Live agent output rendered as ProseMirror widget decorations. Stays
   quiet by default so it feels like part of the notebook reading flow,
   not like pasted-in database cards.
   See: src/features/entities/components/notebook/DiligenceDecorationPlugin.ts
        src/features/entities/components/notebook/renderers/FounderRenderer.tsx
   ═══════════════════════════════════════════════════════════════ */

.diligence-decoration {
  border-left: 2px solid rgb(209 213 219 / 0.5);
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin: 1rem 0;
  user-select: text;
}

.dark .diligence-decoration {
  border-left-color: rgb(255 255 255 / 0.1);
}

.diligence-decoration-header {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.diligence-decoration-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17 24 39);
  margin: 0;
}

.dark .diligence-decoration-title {
  color: rgb(243 244 246);
}

.diligence-decoration-updated {
  font-size: 0.6875rem;
  color: rgb(156 163 175);
}

.dark .diligence-decoration-updated {
  color: rgb(107 114 128);
}

.diligence-decoration-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(55 65 81);
}

.dark .diligence-decoration-body {
  color: rgb(209 213 219);
}

.diligence-decoration-body p {
  margin: 0 0 0.5rem;
}

.diligence-decoration-body p:last-child {
  margin-bottom: 0;
}

.diligence-decoration-empty {
  font-style: italic;
  color: rgb(107 114 128);
}

.dark .diligence-decoration-empty {
  color: rgb(156 163 175);
}

/* Tier chip — matches EvidenceChip tone + dot pattern */
.diligence-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
}

.diligence-tier-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.diligence-tier-verified {
  border-color: rgb(110 231 183 / 0.4);
  background: rgb(236 253 245 / 0.7);
  color: rgb(6 95 70);
}
.diligence-tier-verified .diligence-tier-dot { background: rgb(5 150 105); }
.dark .diligence-tier-verified {
  border-color: rgb(52 211 153 / 0.25);
  background: rgb(16 185 129 / 0.1);
  color: rgb(110 231 183);
}
.dark .diligence-tier-verified .diligence-tier-dot { background: rgb(110 231 183); }

.diligence-tier-corroborated {
  border-color: rgb(125 211 252 / 0.4);
  background: rgb(240 249 255 / 0.7);
  color: rgb(7 89 133);
}
.diligence-tier-corroborated .diligence-tier-dot { background: rgb(14 165 233); }
.dark .diligence-tier-corroborated {
  border-color: rgb(56 189 248 / 0.25);
  background: rgb(14 165 233 / 0.1);
  color: rgb(125 211 252);
}
.dark .diligence-tier-corroborated .diligence-tier-dot { background: rgb(125 211 252); }

.diligence-tier-single {
  border-color: rgb(252 211 77 / 0.4);
  background: rgb(255 251 235 / 0.7);
  color: rgb(146 64 14);
}
.diligence-tier-single .diligence-tier-dot { background: rgb(217 119 6); }
.dark .diligence-tier-single {
  border-color: rgb(251 191 36 / 0.25);
  background: rgb(245 158 11 / 0.1);
  color: rgb(252 211 77);
}
.dark .diligence-tier-single .diligence-tier-dot { background: rgb(252 211 77); }

.diligence-tier-unverified {
  border-color: rgb(203 213 225 / 0.6);
  background: rgb(248 250 252 / 0.6);
  color: rgb(71 85 105);
}
.diligence-tier-unverified .diligence-tier-dot { background: rgb(100 116 139); }
.dark .diligence-tier-unverified {
  border-color: rgb(148 163 184 / 0.25);
  background: rgb(100 116 139 / 0.1);
  color: rgb(203 213 225);
}
.dark .diligence-tier-unverified .diligence-tier-dot { background: rgb(148 163 184); }

/* Actions — muted by default, only light up on hover/focus */
.diligence-decoration-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.diligence-decoration-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid rgb(229 231 235);
  background: rgb(249 250 251 / 0.8);
  color: rgb(55 65 81);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.diligence-decoration-action:hover {
  background: rgb(243 244 246);
  border-color: rgb(209 213 219);
}

.diligence-decoration-action:focus-visible {
  outline: 2px solid var(--accent-primary, #d97757);
  outline-offset: 2px;
}

.dark .diligence-decoration-action {
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.04);
  color: rgb(209 213 219);
}
.dark .diligence-decoration-action:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.2);
}

.diligence-decoration-action-muted {
  opacity: 0.7;
}

/* Reduced motion: never animate anything on these decorations */
@media (prefers-reduced-motion: reduce) {
  .diligence-decoration,
  .diligence-decoration-action {
    transition: none !important;
  }
}

/* ================================================================
 * NodeBench Native-Feel Design System
 * References: Apple HIG (type scale, 44pt targets), Framer Motion
 * spring defaults, Linear (surface elevation), Manus 3-tier system.
 * ================================================================ */

/* Surface elevation — 3 tiers + overlay, warm dark palette */
:root {
  --nb-surface-deep: #0c0b0a;      /* far background (deepest) */
  --nb-surface-base: #151413;      /* page background */
  --nb-surface-raised: #24221f;    /* cards, panels — +8pt visible lift */
  --nb-surface-overlay: #302d29;   /* menus, popovers — +16pt strong lift */
  --nb-border-faint: rgba(255, 255, 255, 0.07);
  --nb-border-soft: rgba(255, 255, 255, 0.12);
  --nb-border-strong: rgba(255, 255, 255, 0.20);
  /* iOS-style easing curves */
  --nb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Native-feeling bottom-sheet slide-up — iOS spring approximation. */
@keyframes nb-sheet-slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ----------------------------------------------------------------
 * Press states — applied to buttons, cards, list rows.
 * Matches iOS tap feedback (scale + opacity), interruptible.
 * ---------------------------------------------------------------- */
.nb-pressable {
  transition: transform 120ms var(--nb-ease-out), opacity 120ms var(--nb-ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nb-pressable:active:not([disabled]) {
  transform: scale(0.97);
  opacity: 0.88;
}

/* Card / list-row pressable — subtler than button press */
.nb-pressable-card {
  transition: transform 160ms var(--nb-ease-out), background-color 160ms var(--nb-ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nb-pressable-card:active:not([disabled]) {
  transform: scale(0.985);
  background-color: rgba(255, 255, 255, 0.04);
}

/* ----------------------------------------------------------------
 * Typography ladder — Apple HIG type scale, anchored to 17pt body.
 * Roles: display (hero), title (section), body (content), meta (label)
 * ---------------------------------------------------------------- */
.nb-text-display {
  font-size: clamp(1.5rem, 6.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
}
.nb-text-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.nb-text-body {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 1.45;
}
.nb-text-body-em {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.45;
}
.nb-text-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: rgb(156 163 175);
}

/* ----------------------------------------------------------------
 * Scroll behavior — iOS rubber-band + momentum.
 * ---------------------------------------------------------------- */
.nb-scroll-native {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ----------------------------------------------------------------
 * Reduced-motion respect: disable press scale + slide animations.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nb-pressable:active,
  .nb-pressable-card:active {
    transform: none !important;
  }
  [style*="nb-sheet-slide-up"] {
    animation: none !important;
  }
}
