/* LiveInterpret.AI design system — single source for platform + instance pages.
   Concept: "the brand is the live signal" — broadcast-tech, not generic-AI.
   Ink background, one vivid live-signal green, monospace strictly for
   real-time data (times, counts, codes, prices), waveform motif.
   No external fonts, no build step, no external requests.

   Org whitelabel still wins: org.js sets --accent/--accent-soft/--accent-contrast
   inline on :root, which overrides these defaults. Components below must never
   assume the accent is green — anything accent-colored derives from var(--accent). */

:root {
  color-scheme: dark;

  /* surfaces */
  --li-bg: #0B0F14;            /* ink */
  --li-surface: #111820;
  --li-surface-2: #0D1319;
  --li-line: #1E2A36;
  --li-line-soft: #16202B;

  /* type — all pass WCAG AA on every surface above */
  --li-text: #E9F0F4;
  --li-muted: #9AACBA;
  --li-faint: #6E8091;

  /* the live signal (semantic: "on air") */
  --li-green: #2CE59B;
  --li-green-soft: #86F2C8;
  --li-green-ink: #052B1E;     /* text on green */
  --li-green-glow: rgba(44, 229, 155, 0.35);

  /* status */
  --li-warn: #E8C468;
  --li-danger: #FF6B6B;
  --li-info: #62B6FF;

  /* org-overridable accent (defaults = brand green) */
  --accent: var(--li-green);
  --accent-soft: var(--li-green-soft);
  --accent-contrast: var(--li-green-ink);

  /* accent-derived effects — follow the org accent, never hardcode green */
  --li-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --li-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --li-accent-dim: color-mix(in srgb, var(--accent) 14%, var(--li-surface-2));

  --li-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --li-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape system: 8 inputs/small controls · 12 buttons · 18 panels · pill badges */
  --li-radius-sm: 8px;
  --li-radius: 12px;
  --li-radius-lg: 18px;

  /* z scale */
  --li-z-sticky: 20;
  --li-z-banner: 30;
}

/* --- base ------------------------------------------------------------------ */
.li-body {
  margin: 0;
  background: var(--li-bg);
  color: var(--li-text);
  font: 16px/1.55 var(--li-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.li-body ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* --- wordmark ---------------------------------------------------------------
   Usage: <span class="li-wordmark"><svg class="li-mark" …></svg>
            LiveInterpret<em>.AI</em></span>
   Add .live to the mark's container while translation is live: bars animate. */
.li-wordmark {
  display: inline-flex;
  align-items: center;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--li-text);
  text-decoration: none;
  white-space: nowrap;
}
.li-wordmark .li-mark { margin-right: 10px; }
.li-wordmark em {
  font-style: normal;
  color: var(--accent);
  font-family: var(--li-mono);
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.02em;
}
.li-mark { display: block; }
.li-mark rect { fill: var(--accent); }
.live .li-mark rect,
.li-mark.live rect { animation: li-eq 1.1s ease-in-out infinite; transform-origin: center; }
.li-mark rect:nth-child(1) { animation-delay: 0s; }
.li-mark rect:nth-child(2) { animation-delay: .18s; }
.li-mark rect:nth-child(3) { animation-delay: .36s; }
.li-mark rect:nth-child(4) { animation-delay: .1s; }
.li-mark rect:nth-child(5) { animation-delay: .28s; }
@keyframes li-eq {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.45); }
}

/* --- buttons ------------------------------------------------------------------ */
.li-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 0;
  border-radius: var(--li-radius);
  padding: 13px 30px;
  font: 650 16px/1.2 var(--li-sans);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 26px var(--li-glow);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.li-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.li-btn:active { transform: translateY(0) scale(0.985); }
.li-btn:focus-visible { outline: none; box-shadow: 0 6px 26px var(--li-glow), var(--li-ring); }
.li-btn:disabled {
  background: var(--li-surface-2); color: var(--li-muted);
  box-shadow: none; cursor: default; transform: none; filter: none;
}
.li-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--li-text);
  border: 1px solid var(--li-line);
  border-radius: var(--li-radius);
  padding: 12px 22px;
  font: 500 15px/1.2 var(--li-sans);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.li-btn-ghost:hover { border-color: var(--li-faint); background: var(--li-surface); }
.li-btn-ghost:active { transform: scale(0.985); }
.li-btn-ghost:focus-visible { outline: none; box-shadow: var(--li-ring); }

/* --- panels & labels ------------------------------------------------------------ */
.li-card {
  background: var(--li-surface);
  border: 1px solid var(--li-line);
  border-radius: var(--li-radius-lg);
  padding: 22px 24px;
}

.li-kicker {                     /* mono label for real-time/sequence data */
  font: 600 12px/1 var(--li-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.li-section-label {              /* tool-page section heading (product register) */
  font: 600 11.5px/1 var(--li-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--li-faint);
  margin: 0 0 14px;
}

.li-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 11px/1 var(--li-mono);
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--li-line);
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--li-surface-2);
}
.li-live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--li-glow);
  animation: li-pulse 1.6s infinite;
}
@keyframes li-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.li-mono { font-family: var(--li-mono); font-variant-numeric: tabular-nums; }
.li-muted { color: var(--li-muted); }
.li-faint { color: var(--li-faint); }

/* --- forms ----------------------------------------------------------------------
   Pattern: <label class="li-label" for=…>…</label> + <input class="li-input"> */
.li-label {
  display: block;
  font: 500 13px/1.3 var(--li-sans);
  color: var(--li-muted);
  margin: 0 0 6px;
}
.li-input {
  background: var(--li-surface-2);
  color: var(--li-text);
  border: 1px solid var(--li-line);
  border-radius: var(--li-radius-sm);
  padding: 12px 14px;
  font: 15px/1.4 var(--li-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.li-input::placeholder { color: var(--li-faint); }
.li-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--li-ring); }

a.li-link { color: var(--accent-soft); text-decoration: none; }
a.li-link:hover { text-decoration: underline; }
a.li-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* --- shared table (operator / archive / admin) ----------------------------------- */
.li-table { width: 100%; border-collapse: collapse; }
.li-table th {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--li-line);
  font: 600 11px/1.3 var(--li-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--li-faint);
}
.li-table td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--li-line-soft);
  font-size: 14px;
}
.li-table tr:last-child td { border-bottom: 0; }
.li-table .empty { color: var(--li-faint); font-style: italic; }

/* --- status pills ------------------------------------------------------------ */
.li-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 12px/1.5 var(--li-mono);
  background: var(--li-surface-2);
  color: var(--li-muted);
}

/* --- meters (operator + sender input level) -------------------------------------- */
.li-meter {
  height: 14px;
  background: var(--li-surface-2);
  border: 1px solid var(--li-line);
  border-radius: 999px;
  overflow: hidden;
}
.li-meter-fill {
  height: 100%; width: 0%;
  background: var(--li-green);
  border-radius: 999px;
  transition: width .09s linear;
}
.li-meter-fill.warn { background: var(--li-warn); }
.li-meter-fill.hot { background: var(--li-danger); }

/* --- document pages (terms / privacy / refunds / dpa) ----------------------------- */
.li-doc { max-width: 720px; margin: 0 auto; padding: 28px 24px 72px; }
.li-doc h1 {
  font-size: clamp(28px, 4.5vw, 36px);
  letter-spacing: -0.025em; line-height: 1.15;
  margin: 26px 0 10px;
  text-wrap: balance;
}
.li-doc h2 { font-size: 17px; letter-spacing: -0.01em; margin: 30px 0 8px; }
.li-doc p { margin: 10px 0; line-height: 1.7; max-width: 68ch; }
.li-doc a { color: var(--accent-soft); }
.li-doc table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 14px 0; }
.li-doc th, .li-doc td { text-align: left; border-bottom: 1px solid var(--li-line-soft); padding: 9px 10px; }
.li-doc th { color: var(--li-faint); font: 600 11px/1.4 var(--li-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.li-doc .li-docmeta { color: var(--li-faint); font-size: 13px; line-height: 1.6; }
.li-topbar { display: flex; align-items: center; padding: 6px 0 30px; }
.li-topbar .back { margin-left: auto; color: var(--li-muted); text-decoration: none; font-size: 13px; }
.li-topbar .back:hover { color: var(--li-text); }

/* --- motion discipline -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .live .li-mark rect, .li-mark.live rect { animation: none; }
  .li-live-badge .dot { animation: none; }
  .li-btn, .li-btn-ghost, .li-input { transition: none; }
  .li-btn:hover, .li-btn:active, .li-btn-ghost:active { transform: none; }
}