/* ═══════════════════════════════════════════════════════════════════════
   FAMILY · Console surface
   Dev-tool / terminal / code window illustrations (REST API, CLI, MCP).
   Layered on valprovia-kit.css (tokens + type). Light is default;
   .console-frame--dark flips the token set so children re-paint.
   Never hardcode hex in children — read from --console-* tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens — light ──────────────────────────────────────────────────── */
.console-frame--light {
  --console-bg: var(--color-surface);
  --console-bg-elevated: var(--color-surface-bg);
  --console-bg-stripe: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-bg) 100%);
  --console-border: var(--color-border);
  --console-text: var(--color-brand-navy);
  --console-text-strong: var(--color-brand-navy);
  --console-text-muted: var(--color-text-secondary);
  --console-accent: var(--color-primary-deep);
  --console-accent-text: var(--color-primary-deep);
  --console-accent-tint: var(--color-surface-tint);
  --console-accent-tint-strong: rgba(var(--color-primary-rgb), 0.18);
  --console-accent-border: rgba(var(--color-primary-rgb), 0.22);
  --console-ok-bg: rgba(var(--color-status-ok-rgb), 0.14);
  --console-ok-fg: var(--color-status-ok);
  --console-audit-bg: var(--color-surface-tint-soft);
  --console-section-stripe: rgba(var(--color-brand-navy-rgb), 0.015);
  --console-body-glow: none;
  --console-cursor-color: var(--color-brand-navy);
  --console-prompt-color: var(--color-primary);
  --console-cmd-color: var(--color-primary);
  --console-flag-color: var(--color-text-secondary);
  --console-str-color: var(--color-status-ok);
  --console-pipe-color: #7719aa;
  --console-highlight-color: var(--color-brand-navy);
}

/* ─── Tokens — dark ───────────────────────────────────────────────────── */
.console-frame--dark {
  --console-bg: #0e1130;
  --console-bg-elevated: rgba(255, 255, 255, 0.02);
  --console-bg-stripe: rgba(255, 255, 255, 0.02);
  --console-border: rgba(255, 255, 255, 0.06);
  --console-text: #cbd5e1;
  --console-text-strong: #ffffff;
  --console-text-muted: #94a3b8;
  --console-accent: var(--color-primary);
  --console-accent-text: #7dd3fc;
  --console-accent-tint: rgba(56, 169, 227, 0.12);
  --console-accent-tint-strong: rgba(56, 169, 227, 0.18);
  --console-accent-border: rgba(56, 169, 227, 0.2);
  --console-ok-bg: rgba(34, 197, 94, 0.16);
  --console-ok-fg: #4ade80;
  --console-audit-bg: rgba(56, 169, 227, 0.08);
  --console-section-stripe: rgba(255, 255, 255, 0.015);
  --console-body-glow: radial-gradient(60% 60% at 50% 100%, rgba(56, 169, 227, 0.07), transparent 70%);
  --console-cursor-color: #ffffff;
  --console-prompt-color: #7dd3fc;
  --console-cmd-color: #7dd3fc;
  --console-flag-color: #94a3b8;
  --console-str-color: #fde68a;
  --console-highlight-color: #ffffff;
  --syntax-key: #7dd3fc;
  --syntax-string: #16a34a;
  --syntax-literal: #c084fc;
  --syntax-comment: #94a3b8;
  --syntax-pipe: #c084fc;
}

/* ─── Frame ───────────────────────────────────────────────────────────── */
.console-frame { position: relative; width: 100%; height: 100%; background: var(--console-bg); overflow: hidden; display: flex; flex-direction: column; font-family: var(--font-mono); color: var(--console-text); }

/* ─── Topbar (mac dots + title + status tag) ─────────────────────────── */
.console-topbar { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 18px; flex: none; border-bottom: 1px solid var(--console-border); background: var(--console-bg-stripe); }
.console-dots { display: flex; gap: 6px; }
.console-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.console-dots span:nth-child(1) { background: #fda4af; }
.console-dots span:nth-child(2) { background: #fcd34d; }
.console-dots span:nth-child(3) { background: #86efac; }
.console-titlebar { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--console-text-muted); margin: 0 auto; letter-spacing: 0.1px; }
.console-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--console-accent-text); background: var(--console-accent-tint); border: 1px solid var(--console-accent-border); padding: 3px 9px; border-radius: 999px; }
.console-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--console-accent-text); }

/* ─── Section header ──────────────────────────────────────────────────── */
.console-section { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; border-bottom: 1px solid var(--console-border); flex: none; background: var(--console-section-stripe); }
.console-section__title { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--console-text-strong); display: inline-flex; align-items: center; gap: 8px; }
.console-section__lozenge { font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; background: var(--console-accent-tint-strong); color: var(--console-accent-text); padding: 3px 7px; border-radius: 4px; letter-spacing: 0.3px; }
.console-section__count { font-size: 11px; color: var(--console-text-muted); font-weight: 500; }

/* ─── Endpoint row (REST verb + URL + content-type) ──────────────────── */
.console-endpoint { display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--console-border); background: var(--console-section-stripe); flex: none; }
.console-method { font-family: var(--font-mono); font-weight: 600; font-size: 11px; padding: 4px 9px; border-radius: 5px; letter-spacing: 0.4px; line-height: 1; }
.console-method--post { background: var(--console-accent); color: var(--color-surface); }
.console-method--get { background: var(--console-ok-fg); color: var(--color-surface); }
.console-method--delete { background: var(--color-status-risk); color: var(--color-surface); }
.console-url { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; color: var(--console-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-url__seg { color: var(--console-text-muted); }
.console-ct { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--console-text-muted); background: var(--console-bg); border: 1px solid var(--console-border); padding: 3px 8px; border-radius: 5px; }

/* ─── Body (code / JSON / terminal) ──────────────────────────────────── */
.console-body { padding: 14px 18px; flex: 1; min-height: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--console-text); background: var(--console-bg); }
.console-frame--dark .console-body { padding: 18px 22px; line-height: 21px; background: var(--console-body-glow); }
.console-line { display: block; white-space: pre; }
.console-line--gap { display: block; height: 8px; }

/* Syntax tokens */
.console-syn--key  { color: var(--syntax-key); }
.console-syn--str  { color: var(--syntax-string); }
.console-syn--lit  { color: var(--syntax-literal); }
.console-syn--p    { color: var(--console-text-muted); }
.console-syn--comm { color: var(--syntax-comment); }

/* Shell tokens (CLI) */
.console-prompt { color: var(--console-prompt-color); font-weight: 500; }
.console-cmd    { color: var(--console-cmd-color); }
.console-flag   { color: var(--console-flag-color); }
.console-str    { color: var(--console-str-color); }
.console-h      { color: var(--console-highlight-color); font-weight: 600; }
.console-ok     { color: var(--console-ok-fg); }
.console-check  { color: var(--console-ok-fg); font-weight: 600; }
.console-pipe   { color: var(--console-pipe-color); }
.console-meta   { color: var(--console-text-muted); }
.console-cursor { display: inline-block; width: 8px; height: 14px; background: var(--console-cursor-color); vertical-align: -3px; margin-left: 2px; }

/* ─── Response strip ──────────────────────────────────────────────────── */
.console-resbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--console-border); background: var(--console-bg-stripe); flex: none; }
.console-resbar__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--console-text-strong); }
.console-resbar__code { font-family: var(--font-mono); font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.2px; background: var(--console-ok-bg); color: var(--console-ok-fg); }

/* ─── Tools table (MCP) ──────────────────────────────────────────────── */
.console-tools { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.console-tool-row { display: grid; grid-template-columns: 1.6fr 1.2fr auto; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--console-border); font-size: 12.5px; }
.console-tool-row:last-child { border-bottom: 0; }
.console-tool-row--live { background: var(--console-accent-tint); }
.console-tool-name { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; color: var(--console-text); min-width: 0; }
.console-tool-name__icon { width: 22px; height: 22px; border-radius: 5px; flex: none; background: var(--console-accent-tint-strong); color: var(--console-accent-text); display: inline-flex; align-items: center; justify-content: center; }
.console-tool-name__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.console-scope { font-family: var(--font-mono); font-size: 11px; color: var(--console-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.console-scope__lock svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Console status pills (dark-mode aware) */
.console-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 0; }
.console-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.console-pill--ok { background: var(--console-ok-bg); color: var(--console-ok-fg); }
.console-pill--ok .dot { background: var(--console-ok-fg); }
.console-pill--invoking { background: var(--console-accent); color: var(--color-surface); }
.console-pill--invoking .dot { background: var(--color-surface); opacity: 0.8; }

/* ─── Audit footer ────────────────────────────────────────────────────── */
.console-audit { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--console-audit-bg); border-top: 1px solid var(--console-border); flex: none; font-size: 12px; color: var(--console-text); }
.console-audit__icon { width: 17px; height: 17px; color: var(--console-accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.console-audit__icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.console-audit__meta { color: var(--console-text-muted); font-family: var(--font-mono); font-size: 11px; margin-left: auto; }
.console-audit b { font-family: var(--font-mono); font-weight: 600; color: var(--console-text-strong); }