/* ──────────────────────────────────────────────────────────────────────
 * helpp.site — Design system
 *
 * Single source of styling for all helpp.site verticals (env-law-tas,
 * appliance-hub, and any future ones). Hosted at helpp.site/styles.css
 * so verticals can link it cross-origin.
 *
 * Vertical-specific overrides (e.g. brand accent colour) belong in a
 * small per-vertical CSS file linked AFTER this one.
 *
 * ─── Design principles ──────────────────────────────────────────────
 *
 *   1. Readability beats subtlety. We have ONE muted level (--muted),
 *      not three. Occasional users notice unreadable text, not whether
 *      a label is grey-3 vs grey-4.
 *   2. Fewer named choices, used consistently. One radius. One main
 *      line-height. Five-step type scale. Four-step spacing scale.
 *   3. Tokens, never raw values. Don't put 13px in a stylesheet —
 *      pick the closest scale step.
 *
 * ─── Tokens (READ THIS BEFORE EDITING) ───────────────────────────────
 *
 * SURFACES
 *   --bg        page background
 *   --surface   anything raised — cards, sidebar, modals, inputs
 *   --border    hairlines, input borders, dividers
 *
 * TEXT
 *   --fg        body text + headings  (high contrast)
 *   --muted     labels, captions, hints, placeholders (lifted from
 *               the old --hint to be readable on dark surfaces)
 *
 *   Two levels only. If something needs to be more prominent, use --fg.
 *   If it's truly secondary, use --muted. Don't invent a third.
 *
 * BRAND / ACTION
 *   --accent          primary action (CTAs, links, focus, active row)
 *   --accent-hover    hover state
 *   --accent-faint    tinted backgrounds (selected row, info banner)
 *   --danger          destructive actions, errors
 *   --danger-faint    danger tinted background
 *
 * TYPOGRAPHY
 *   --text-sm to --text-2xl   5-step semantic scale
 *   --line-normal             1.55 — the one named line-height
 *   --weight-regular / medium / bold
 *
 *   Don't use raw px values for font-size. Pick a scale step.
 *
 * SPACING
 *   --space-sm to --space-xl   4-step scale
 *   Don't use raw px values for padding/margin/gap. Pick a scale step.
 *
 * ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────── */
  --bg:        #0f0f0f;
  --surface:   #181818;
  --border:    #2a2a2a;

  /* ── Text ────────────────────────────────────────────────────────── */
  --fg:        #f0f0f0;
  --muted:     #9aa3ae;

  /* ── Brand / action ──────────────────────────────────────────────── */
  --accent:        #00c896;
  --accent-hover:  #00a87e;
  --accent-faint:  rgba(0, 200, 150, 0.10);
  --danger:        #f87171;
  --danger-faint:  rgba(248, 113, 113, 0.10);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-sm:   12px;   /* captions, helper text, badges */
  --text-md:   14px;   /* body */
  --text-lg:   16px;   /* prominent body, inputs */
  --text-xl:   20px;   /* section headings */
  --text-2xl:  28px;   /* page headings */

  --line-normal:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --sidebar-w:  220px;
  --header-h:    56px;
  --cite-w:     260px;

  --radius:    8px;

  --space-sm:   8px;
  --space-md:  14px;
  --space-lg:  20px;
  --space-xl:  32px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
}

/* ──────────────────────────────────────────────────────────────────────
 * Base
 * ────────────────────────────────────────────────────────────────────── */

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

/* Scrollbars (WebKit / Blink / Chromium-based Edge). One consistent
   style across the whole stack — left sidebar, right citations panel,
   modals, everything. Sits between "barely visible" and the heavy OS
   default. Firefox uses `scrollbar-width: thin` (set on html below). */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.20); background-clip: content-box; }
::-webkit-scrollbar-corner  { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm);
  color: var(--fg);
  font-weight: var(--weight-bold);
  line-height: 1.3;            /* headings get a tighter line-height */
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-md); }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  overflow-x: auto;
}
code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: var(--radius);
}
pre code { background: transparent; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

/* ──────────────────────────────────────────────────────────────────────
 * Utility text classes
 * ────────────────────────────────────────────────────────────────────── */

.text-fg     { color: var(--fg); }
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }

.text-sm    { font-size: var(--text-sm);  }
.text-md    { font-size: var(--text-md);  }
.text-lg    { font-size: var(--text-lg);  }
.text-xl    { font-size: var(--text-xl);  }
.text-2xl   { font-size: var(--text-2xl); }

.font-regular { font-weight: var(--weight-regular); }
.font-medium  { font-weight: var(--weight-medium);  }
.font-bold    { font-weight: var(--weight-bold);    }

/* ──────────────────────────────────────────────────────────────────────
 * Buttons
 * ────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  border-color: var(--border);
  color: var(--fg);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--muted);
}

.btn-danger {
  border-color: rgba(248, 113, 113, 0.5);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-faint);
  border-color: var(--danger);
}

.btn-sm {
  padding: 5px var(--space-sm);
  font-size: var(--text-sm);
}

/* ──────────────────────────────────────────────────────────────────────
 * Inputs
 * ────────────────────────────────────────────────────────────────────── */

.input, .textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: var(--line-normal);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.label {
  display: block;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* ──────────────────────────────────────────────────────────────────────
 * Card + Modal + Banner
 * ────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  max-width: 500px;
  box-shadow: var(--shadow-md);
}

.banner {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-faint);
  border: 1px solid rgba(0, 200, 150, 0.25);
  border-radius: var(--radius);
  color: var(--fg);             /* lifted from --muted for readability */
  font-size: var(--text-md);
  line-height: var(--line-normal);
}
.banner-warning {
  background: rgba(255, 180, 0, 0.10);
  border-color: rgba(255, 180, 0, 0.30);
}

.badge {
  display: inline-block;
  padding: 2px var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-accent {
  background: var(--accent-faint);
  color: var(--accent);
  border-color: rgba(0, 200, 150, 0.30);
}

/* ──────────────────────────────────────────────────────────────────────
 * Sidebar row + ⋮ menu  (THREADS / SAVED ANALYSES pattern)
 * ────────────────────────────────────────────────────────────────────── */

.sidebar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sidebar-row:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); }
.sidebar-row.active { background: var(--accent-faint); color: var(--fg); }

.sidebar-row-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-row-menu {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none;
  color: var(--muted);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  /* Always-visible — no hover-to-reveal */
  transition: background 120ms, color 120ms;
}
.sidebar-row-menu:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
}