/* ═══════════════════════════════════════════════════════════════════════════
   The family theme — audited.xyz · triaged.xyz · Natural Intelligence

   Canonical copy: ~/code/design/theme.css. Vendored byte-for-byte into each
   project by design/bin/sync — edit upstream, never the copy.

   Plain CSS on purpose (no Tailwind directives, no @apply), so one file loads
   three ways: linked after tailwind.css in a Tailwind v4 app (the @layer blocks
   merge into Tailwind's own layers, below utilities), linked in any other Rails
   app, or read into an inline <style> ahead of a page's own rules. Layered
   rules sit below every unlayered app rule, so an app's adapter always wins.
   The conventions this CSS can't carry live in STYLE.md beside it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
@layer base {
  :root {
    /* Tailwind v4 palette — the exact oklch values audited's build emits, so the
       Rails apps see no change and a plain-CSS app can say var(--color-indigo-600). */
    --color-white: #fff;
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-gray-950: oklch(13% .028 261.692);
    --color-indigo-300: oklch(78.5% .115 274.713);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-900: oklch(40.8% .123 38.172);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-purple-400: oklch(71.4% .203 305.504);

    /* Liquid Glass (audited's tokens, verbatim) */
    --liquid-bg-0: #05080f;
    --liquid-bg-1: #0a1120;
    --liquid-bg-2: #10192d;
    --liquid-surface: rgba(255, 255, 255, 0.058);
    --liquid-surface-strong: rgba(255, 255, 255, 0.086);
    --liquid-border: rgba(255, 255, 255, 0.13);
    --liquid-border-strong: rgba(255, 255, 255, 0.3);
    --liquid-shadow-near: 0 8px 20px rgba(1, 5, 16, 0.32);
    --liquid-shadow-far: 0 24px 64px rgba(0, 0, 0, 0.44);
    --liquid-blur: 26px;
    --liquid-saturation: 162%;
    --liquid-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Semantic roles — what markup and adapters reference */
    --text: var(--color-gray-100);            /* body copy        · text-gray-100 */
    --text-heading: var(--color-white);       /* headings         · text-white    */
    --text-secondary: var(--color-gray-400);  /* secondary        · text-gray-400 */
    --text-muted: var(--color-gray-500);      /* meta, timestamps · text-gray-500 */
    --accent: var(--color-indigo-600);        /* fills            · bg-indigo-600 */
    --accent-hover: var(--color-indigo-500);  /* hover, borders   · indigo-500    */
    --accent-text: var(--color-indigo-400);   /* links, strokes   · text-indigo-400 */
    --accent-glow: rgba(99, 102, 241, 0.4);
    --accent-shadow: 0 10px 15px -3px color-mix(in oklab, var(--color-indigo-500) 20%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    --accent-shadow-hover: 0 10px 15px -3px color-mix(in oklab, var(--color-indigo-500) 30%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
    --status-ok: var(--color-emerald-400);
    --status-warn: var(--color-yellow-400);
    --status-bad: var(--color-red-400);
    --status-info: var(--color-blue-400);
    --status-kickback: var(--color-orange-400);
    --status-escalate: var(--color-purple-400);
    --status-queued: var(--color-gray-400);
    --status-flag: var(--color-amber-400);
    --sev-critical: var(--color-red-400);
    --sev-high: var(--color-orange-400);
    --sev-medium: var(--color-yellow-400);
    --sev-low: var(--color-blue-400);
    --sev-info: var(--color-gray-400);
    --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --radius-card: 0.75rem;     /* rounded-xl   · cards, panels, modals   */
    --radius-control: 0.5rem;   /* rounded-lg   · buttons, inputs, menus  */
    --radius-badge: 0.375rem;   /* rounded-md   · severity badges, segments */
    --radius-pill: 9999px;      /* rounded-full · status pills, dots       */
    --focus-ring: 0 0 0 2px rgba(56, 189, 248, 0.42), 0 0 0 5px rgba(30, 64, 175, 0.36);

    /* Recipe tokens — every glass surface as values, so an app that cannot put
       the .glass-* classes in its markup maps its own selectors onto the same look. */
    --glass-card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.1) 0%, var(--liquid-surface) 34%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.075) 100%);
    --glass-card-filter: blur(var(--liquid-blur)) saturate(var(--liquid-saturation));
    --glass-card-border-left: rgba(255, 255, 255, 0.17);
    --glass-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(7, 11, 20, 0.38) inset, var(--liquid-shadow-near), var(--liquid-shadow-far);
    --glass-card-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    --glass-card-hover-border: rgba(255, 255, 255, 0.24);
    --glass-card-hover-border-top: rgba(255, 255, 255, 0.42);
    --glass-card-hover-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 -1px 0 rgba(7, 11, 20, 0.32) inset, 0 12px 28px rgba(2, 6, 23, 0.35), 0 30px 70px rgba(0, 0, 0, 0.45);
    --glass-badge-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.035) 100%);
    --glass-badge-border: rgba(255, 255, 255, 0.14);
    --glass-badge-border-top: rgba(255, 255, 255, 0.28);
    --glass-badge-filter: blur(14px) saturate(152%);
    --glass-badge-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    --glass-nav-bg: linear-gradient(180deg, rgba(15, 22, 36, 0.74) 0%, rgba(10, 16, 29, 0.58) 100%);
    --glass-nav-filter: blur(calc(var(--liquid-blur) + 6px)) saturate(calc(var(--liquid-saturation) + 12%));
    --glass-nav-border: rgba(255, 255, 255, 0.15);
    --glass-nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 10px 26px rgba(2, 6, 23, 0.32);
    --glass-dropdown-bg: linear-gradient(155deg, rgba(18, 27, 43, 0.88) 0%, rgba(10, 15, 27, 0.84) 100%);
    --glass-dropdown-filter: blur(calc(var(--liquid-blur) + 8px)) saturate(calc(var(--liquid-saturation) + 10%));
    --glass-dropdown-border: rgba(255, 255, 255, 0.16);
    --glass-dropdown-border-top: rgba(255, 255, 255, 0.35);
    --glass-dropdown-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 22px 56px rgba(0, 0, 0, 0.45);
    --glass-footer-bg: linear-gradient(180deg, rgba(14, 21, 34, 0.7) 0%, rgba(8, 12, 24, 0.64) 100%);
    --glass-footer-filter: blur(calc(var(--liquid-blur) + 4px)) saturate(calc(var(--liquid-saturation) + 10%));
    --glass-footer-border: rgba(255, 255, 255, 0.14);
    --glass-footer-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
    --glass-input-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.05) 100%);
    --glass-input-border: rgba(255, 255, 255, 0.18);
    --glass-input-focus-border: rgba(125, 211, 252, 0.72);
    --glass-input-text: #edf2ff;
    --glass-input-placeholder: #a7b4c7;
    --glass-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(7, 11, 20, 0.34);
    --glass-input-filter: blur(14px) saturate(155%);
  }

  @media (max-width: 768px) {
    :root {
      --liquid-surface: rgba(255, 255, 255, 0.075);
      --liquid-surface-strong: rgba(255, 255, 255, 0.105);
      --liquid-border: rgba(255, 255, 255, 0.165);
      --liquid-border-strong: rgba(255, 255, 255, 0.34);
      --liquid-shadow-near: 0 5px 14px rgba(1, 5, 16, 0.28);
      --liquid-shadow-far: 0 16px 34px rgba(0, 0, 0, 0.36);
      --liquid-blur: 17px;
      --liquid-saturation: 146%;
    }
  }

  /* The page ground: three glows over a vertical fade. Goes on <body>. */
  .app-bg {
    background-color: var(--liquid-bg-0);
    background-image:
      radial-gradient(ellipse 115% 75% at 12% -8%, rgba(125, 211, 252, 0.2) 0%, transparent 58%),
      radial-gradient(ellipse 95% 70% at 88% 2%, rgba(99, 102, 241, 0.18) 0%, transparent 56%),
      radial-gradient(ellipse 90% 65% at 50% 105%, rgba(56, 189, 248, 0.1) 0%, transparent 64%),
      linear-gradient(180deg, var(--liquid-bg-0) 0%, var(--liquid-bg-1) 46%, var(--liquid-bg-2) 100%);
    background-attachment: fixed;
  }

  @media (max-width: 768px) {
    .app-bg {
      background-image:
        radial-gradient(ellipse 130% 88% at 10% -10%, rgba(125, 211, 252, 0.24) 0%, transparent 54%),
        radial-gradient(ellipse 120% 80% at 90% 0%, rgba(99, 102, 241, 0.2) 0%, transparent 52%),
        linear-gradient(180deg, var(--liquid-bg-0) 0%, #0a1324 58%, var(--liquid-bg-2) 100%);
      background-attachment: scroll;
    }
  }
}

/* ── 2. Liquid Glass surfaces ──────────────────────────────────────────────── */
@layer components {
  /* Main card / panel */
  .glass-card {
    background: var(--glass-card-bg);
    backdrop-filter: var(--glass-card-filter);
    -webkit-backdrop-filter: var(--glass-card-filter);
    border: 1px solid var(--liquid-border);
    border-top-color: var(--liquid-border-strong) !important;
    border-left-color: var(--glass-card-border-left);
    box-shadow: var(--glass-card-shadow);
    position: relative;
    overflow: hidden;
    transition:
      transform 190ms var(--liquid-ease),
      box-shadow 190ms var(--liquid-ease),
      border-color 190ms var(--liquid-ease),
      background-color 190ms var(--liquid-ease);
  }

  .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--glass-card-highlight);
    pointer-events: none;
  }

  @media (hover: hover) {
    .glass-card-hover:hover {
      border-color: var(--glass-card-hover-border);
      border-top-color: var(--glass-card-hover-border-top) !important;
      transform: translateY(-1px);
      box-shadow: var(--glass-card-hover-shadow);
    }
  }

  /* Small badge / severity chip / inner control */
  .glass-badge {
    background: var(--glass-badge-bg);
    border: 1px solid var(--glass-badge-border);
    border-top-color: var(--glass-badge-border-top);
    backdrop-filter: var(--glass-badge-filter);
    -webkit-backdrop-filter: var(--glass-badge-filter);
    box-shadow: var(--glass-badge-shadow);
  }

  /* Top navigation bar (sticky, 64px tall) */
  .glass-nav {
    background: var(--glass-nav-bg);
    backdrop-filter: var(--glass-nav-filter);
    -webkit-backdrop-filter: var(--glass-nav-filter);
    border-bottom: 1px solid var(--glass-nav-border);
    box-shadow: var(--glass-nav-shadow);
  }

  /* Dropdown / popover menus */
  .glass-dropdown {
    background: var(--glass-dropdown-bg);
    backdrop-filter: var(--glass-dropdown-filter);
    -webkit-backdrop-filter: var(--glass-dropdown-filter);
    border: 1px solid var(--glass-dropdown-border);
    border-top-color: var(--glass-dropdown-border-top);
    box-shadow: var(--glass-dropdown-shadow);
  }

  /* Footer bar */
  .glass-footer {
    background: var(--glass-footer-bg);
    backdrop-filter: var(--glass-footer-filter);
    -webkit-backdrop-filter: var(--glass-footer-filter);
    border-top: 1px solid var(--glass-footer-border);
    box-shadow: var(--glass-footer-shadow);
  }

  /* ── Named forms of the Tailwind conventions (STYLE.md pairs each with its class string) ── */

  /* bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-lg shadow-indigo-500/20 */
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn-primary { background-color: var(--accent); box-shadow: var(--accent-shadow); }
  .btn-primary:hover { background-color: var(--accent-hover); box-shadow: var(--accent-shadow-hover); }
  /* bg-gray-700 hover:bg-gray-600 text-white */
  .btn-secondary { background-color: var(--color-gray-700); }
  .btn-secondary:hover { background-color: var(--color-gray-600); }
  /* bg-red-600 hover:bg-red-500 text-white */
  .btn-danger { background-color: var(--color-red-600); }
  .btn-danger:hover { background-color: var(--color-red-500); }
  /* text-gray-400 hover:text-white hover:bg-white/5 */
  .btn-ghost { background-color: transparent; color: var(--color-gray-400); }
  .btn-ghost:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
  .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Top-nav item: text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg text-sm font-medium h-9 inline-flex items-center */
  .nav-link {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-gray-400);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
  .nav-link.on { color: #fff; background-color: rgba(255, 255, 255, 0.06); }

  /* Text input: the glass form control (audited's input.bg-gray-800 override) */
  .glass-input {
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    color: var(--glass-input-text);
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: var(--radius-control);
    box-shadow: var(--glass-input-shadow);
    backdrop-filter: var(--glass-input-filter);
    -webkit-backdrop-filter: var(--glass-input-filter);
  }
  .glass-input::placeholder { color: var(--glass-input-placeholder); }
  .glass-input:focus { outline: none; border-color: var(--glass-input-focus-border); }

  /* Status pill: px-3 py-1 rounded-full text-sm, tinted from one hue in --c (≈ bg-<hue>-900/50 text-<hue>-400 border-<hue>-700/50) */
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--c, var(--status-queued));
    background-color: color-mix(in oklab, var(--c, var(--status-queued)) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--c, var(--status-queued)) 35%, transparent);
  }

  /* Severity badges: bg-<hue>-900/50 text-<hue>-400 border-<hue>-500/50 (px-2.5 py-1 text-xs font-bold rounded-md tracking-wide in markup) */
  .severity-critical      { background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);    color: var(--color-red-400);    border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }
  .severity-high          { background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent); color: var(--color-orange-400); border-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent); }
  .severity-medium        { background-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent); color: var(--color-yellow-400); border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent); }
  .severity-low           { background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);   color: var(--color-blue-400);   border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent); }
  .severity-informational { background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);   color: var(--color-gray-400);   border-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent); }

  /* Segmented tabs: inline-flex bg-gray-900 rounded-lg p-1 · item px-6 py-2 rounded-md text-sm font-medium · active bg-indigo-600 text-white */
  .tabs-segmented {
    display: inline-flex;
    padding: 0.25rem;
    background-color: var(--color-gray-900);
    border-radius: var(--radius-control);
  }
  .tabs-segmented > * {
    padding: 0.5rem 1.5rem;
    border: 0;
    border-radius: var(--radius-badge);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-gray-400);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  .tabs-segmented > *:hover { color: #fff; }
  .tabs-segmented > .on { color: #fff; background-color: var(--accent); }

  /* Underline tabs: px-4 py-3 text-sm font-medium border-b-2 · idle border-transparent text-gray-400 hover:text-gray-300 · active border-indigo-500 text-indigo-400 */
  .tab-underline {
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-gray-400);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  .tab-underline:hover { color: var(--color-gray-300); }
  .tab-underline.on { color: var(--accent-text); border-bottom-color: var(--accent-hover); }

  /* Table: thead bg-gray-900/50 · th text-left px-6 py-4 text-gray-400 text-sm font-medium · tbody divide-y divide-gray-700 · tr hover:bg-gray-700/30 · td px-6 py-4 */
  .table-glass { width: 100%; border-collapse: collapse; }
  .table-glass thead { background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent); }
  .table-glass th { text-align: left; padding: 1rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-gray-400); }
  .table-glass td { padding: 1rem 1.5rem; }
  .table-glass tbody tr { border-top: 1px solid var(--color-gray-700); }
  .table-glass tbody tr:hover { background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent); }
}

/* ── 3. Type, motion, focus (unlayered, as audited ships them) ─────────────── */

/* Typography - Geist for UI and reports, Geist Mono for code */
html, body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Code blocks - Geist Mono */
code, pre, .font-mono, kbd, samp {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
}

/* Consistent motion and focus style */
a, button, [role="button"], input, select, textarea {
  transition:
    color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.42),
    0 0 0 5px rgba(30, 64, 175, 0.36);
}

/* Prevent iOS zoom on input focus (requires 16px minimum) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-size: 16px;
}

@media (min-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: inherit;
  }
}

/* Gradient text for branding */
.gradient-text {
  background: linear-gradient(135deg, #34d399 0%, #a78bfa 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive hero text sizes */
.text-hero {
  font-size: clamp(1.75rem, 7vw, 5.5rem);
  line-height: 1.1;
}

.text-hero-sub {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

/* Fade animations for notifications */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}