/* JAMES — Web UI design tokens (single source of truth).
 *
 * Linked from index.html, admin.html, workspace.html, graph.html.
 *
 * Mono-cyber palette (2026-05-12 migration, Task #22):
 *   Single mint-cyan accent (#6be7d0) carries every interactive
 *   surface — buttons, links, status, dividers, gradient rail.
 *   The prior indigo (--accent #5258e6) + intelligence-cyan
 *   (--brand-2 #4fc3f7) duo is collapsed: --brand-2 is now an
 *   *alias* of --accent so existing call sites keep resolving,
 *   but they paint the same single colour. This gives the
 *   minimal-mono cyber aesthetic locked in preview-cyber.html
 *   without requiring a multi-file token-rename PR.
 *
 *   Red (--danger) is preserved — it carries semantic meaning
 *   (errors, attack-blocked, dangerous actions) that the mono
 *   accent cannot.
 *
 * Graph-page only tokens (entity-type colours) stay inline in
 * graph.html.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  /* ── surfaces ── */
  --bg:           #04060a;       /* deeper near-black, monitor-tone */
  --surface:      #07090e;       /* nearly bg — cards differ by outline only */
  --surface-2:    #0b0e14;
  --border:       #1a1f28;
  --border-2:     #14181f;

  /* ── primary accent — single mint-cyan, mono cyber ── */
  --accent:       #6be7d0;
  --accent-soft:  rgba(107,231,208,.10);
  --accent-fg:    #a8f3e0;       /* brighter shade for prominent text */
  --accent-hover: #56b9a7;       /* slightly darker shade for :hover */
  --on-accent:    #04060a;       /* foreground on solid-accent fills.
                                    Previously buttons used #fff which
                                    fails WCAG on the mint-cyan accent
                                    (~1.5:1) — inverse-mono is needed. */

  /* ── --brand-2 retained as an alias of --accent ──
       Pre-migration this was an "intelligence cyan" distinct from
       the indigo accent. The mono migration folds it into accent
       so single-source call sites (gradient rail, file-progress,
       formatAnswer ### headers, perf grade-B colour) keep working
       while painting the same colour. ── */
  --brand-2:      #6be7d0;
  --brand-2-soft: rgba(107,231,208,.10);

  /* ── text ── */
  --text:         #f1f5f3;       /* cooler white, mono-friendly */
  --text-soft:    #c8d0cd;
  --muted:        #8a8d99;       /* 6.14:1 on --bg — WCAG AA pass */
  --muted-2:      #787c84;       /* 4.83:1 on --bg — WCAG AA pass */

  /* ── status ── */
  --success:      #22c55e;
  --danger:       #ef4444;
  --warn:         #f59e0b;

  /* ── shape ── */
  --radius:       8px;
  --radius-lg:    10px;

  /* ── elevation — for "report card" surfaces (answer bubbles,
       settings rows). Sits one notch above flat. ── */
  --shadow-card:  0 1px 0 rgba(255,255,255,.02) inset,
                  0 8px 24px rgba(0,0,0,.18);

  /* ── type ── */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-ui:      'Inter', 'Pretendard', system-ui, -apple-system, sans-serif;
}

/* ── Brand mark ──
 * Long-form product name shown in headers, modals, welcome screens.
 * The first line ("Secure Enterprise Knowledge") carries the primary
 * positioning; the trailing "Operating System" sits one weight notch
 * below but on the same colour band so the full compound stays
 * readable at a glance. Both halves use --text-soft or stronger —
 * --muted is intentionally avoided here because the brand line is
 * load-bearing identity, not metadata.
 * Used inside .logo, .modal-title, .welcome-title etc.
 *
 * Visibility tuning (2026-05-12):
 *   - 12px → 14px : header readable without leaning in
 *   - brand-tail --muted → --text-soft (5.92:1 → 11.48:1 on --bg)
 *   - weight 500 → 550 on tail for slight emphasis lift */
.brand {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .25px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--text);
}
.brand .brand-tail {
  font-weight: 550;
  color: var(--text-soft);
  margin-left: 4px;
}
@media (max-width: 900px) {
  .brand { font-size: 12px; letter-spacing: .15px; }
}
@media (max-width: 640px) {
  .brand { white-space: normal; }
}

/* ── Cyber background texture (Task #22 — 6a) ──
 * Two soft mint-cyan radials anchored to top-right and bottom-left
 * viewport corners + a 36px square grid at .02 opacity. Layered as
 * the body's background-image so it sits behind all content without
 * touching the stacking context. background-attachment:fixed keeps
 * the radials viewport-anchored across scroll.
 *
 * Pages must declare `background-color: var(--bg);` (NOT the
 * `background:` shorthand, which would reset background-image to
 * none and erase the texture). */
body {
  background-image:
    radial-gradient(70vw 55vh at 92% 0%,
                    rgba(107,231,208,.05), transparent 60%),
    radial-gradient(55vw 45vh at 8% 100%,
                    rgba(107,231,208,.04), transparent 65%),
    repeating-linear-gradient(0deg,
                              rgba(107,231,208,.020) 0 1px,
                              transparent 1px 36px),
    repeating-linear-gradient(90deg,
                              rgba(107,231,208,.020) 0 1px,
                              transparent 1px 36px);
  background-attachment: fixed;
}

/* ── Cyber 6b — single-accent glow on primary surfaces ──
 * Adds a soft mint-cyan halo to the elements that fill with --accent
 * or carry mint-cyan branding (primary action buttons + status
 * badge). Same opacity envelope as preview-cyber.html §6b, always-on
 * (no toggle class — the look is the default now).
 *
 * Targets only the live call sites that actually paint with --accent
 * — generic / semantic-coloured buttons (`.btn-approve`, `.btn-reject`,
 * neutral `.btn`) are left alone so red/green/neutral cues stay
 * distinct from the mint accent halo.
 *
 * Disabled primary buttons drop the glow so they don't read as
 * "active". The `.role-badge .dot` keeps its semantic colour
 * (grey / --success) without a halo — only the badge perimeter
 * gets the soft ring. */
.btn-primary,
.send-btn {
  box-shadow:
    0 0 0 1px rgba(107,231,208,.30),
    0 0 22px rgba(107,231,208,.32);
}
.btn-primary:disabled,
.send-btn:disabled {
  box-shadow: none;
}
.role-badge {
  box-shadow: 0 0 14px rgba(107,231,208,.18);
}

/* ── Cyber 6c — glassmorphism on modals ──
 * Wraps every `.modal-overlay` in a backdrop blur and lifts every
 * `.modal` / `.modal-card` with a heavier blur + mint inset glow.
 * Pages declare semi-transparent overlay / card backgrounds (alpha
 * ≤ .55) so the blur actually shows through.
 *
 * Wrapped in @supports so engines without backdrop-filter fall back
 * cleanly to the page-controlled solid bg + the page's own card
 * shadow (no half-applied state). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-overlay {
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
  }
  .modal,
  .modal-card {
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      0 0 0 1px rgba(107,231,208,.06) inset,
      0 24px 80px rgba(0,0,0,.6),
      0 0 28px rgba(107,231,208,.12);
  }
}

/* ── Cyber 6d — live indicators ──
 * Pulsing mint dot (`.live-dot`) for "system live" cues and a 1px
 * scan line under the active source-toggle button. Both animations
 * are gated behind `prefers-reduced-motion: no-preference` — users
 * who request reduced motion get the static surfaces (dot + bottom
 * line) without the pulse / sweep, so the visual cue still carries
 * without the movement.
 *
 * `.source-toggle button` gets `position: relative` so the scan
 * `::after` anchors to the button's box. */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  vertical-align: middle;
}
.source-toggle button { position: relative; }
.source-toggle button.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
                              transparent,
                              var(--accent-fg),
                              transparent);
  opacity: .2;
  pointer-events: none;
}
@keyframes cyber-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,231,208,.55); }
  60%      { box-shadow: 0 0 0 8px rgba(107,231,208,0); }
}
@keyframes cyber-scan {
  0%   { transform: translateX(-100%); opacity: .2; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: .2; }
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: cyber-pulse 1.6s ease-out infinite;
  }
  .source-toggle button.active::after {
    animation: cyber-scan 1.8s linear infinite;
  }
}

/* ── Top accent rail ──
 * Thin 2px stripe along the very top of every page — gives the app
 * a subtle "system header" feel like enterprise dashboards. Fixed
 * position so it survives scroll, pointer-events:none so it never
 * blocks clicks. Originally inline in index.html only; lifted here
 * so admin/workspace/graph inherit the same rail. */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand-2) 100%);
  opacity: .9;
  z-index: 999;
  pointer-events: none;
}
