/* executio — one stylesheet, self-hosted, zero external requests.
   Restyled on the "UnifiedInbox AI" design system's tokens (violet accent,
   slate neutrals, soft layered shadows, 4px grid, Inter). Two deliberate
   deviations, both forced by the strict CSP (default-src 'self'):
     - Inter is self-hosted below (same subsetted woff2 files giwm ships),
       NOT loaded from Google Fonts.
     - Icons are text/emoji-free CSS, NOT Lucide-from-CDN.
   Platform colors (--ig-*, --yt-*) are used ONLY in badges, per the system. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}

/* ---------- tokens (from the design system) ---------- */
:root {
  /* neutrals */
  --gray-0: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
  --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151;
  --gray-900: #111827; --gray-950: #0b0f19;

  /* accent — violet-indigo */
  --violet-50: #f4f2ff; --violet-100: #ebe8ff; --violet-300: #bdb0ff;
  --violet-400: #9d84ff; --violet-500: #7c5cfc; --violet-600: #6b45f0; --violet-700: #5a33d6;

  /* semantic — light (default) */
  --surface-app: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-hover: var(--gray-100);
  --text-strong: var(--gray-900);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --text-on-accent: #ffffff;
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --accent: var(--violet-500);
  --accent-hover: var(--violet-600);
  --accent-active: var(--violet-700);
  --accent-soft: var(--violet-100);
  --accent-text: var(--violet-700);
  --accent-ring: rgba(124, 92, 252, .35);

  /* status tints */
  --ok-fg: #16803c;  --ok-bg: #e8f6ee;
  --warn-fg: #b45309; --warn-bg: #fdf3d8;
  --bad-fg: #b91c1c;  --bad-bg: #fdecec;
  --info-fg: var(--violet-700); --info-bg: var(--violet-50);

  /* platform — badges only */
  --ig-fill: #fdecf3; --ig-text: #c21f5b;
  --yt-fill: #ffe9ec; --yt-text: #d90429;

  /* elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --ring-focus: 0 0 0 3px var(--accent-ring);

  /* type + motion + shape */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms; --dur-med: 200ms;
  --topbar-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-app: var(--gray-950);
    --surface-card: #131a28;
    --surface-sunken: #0b111d;
    --surface-hover: #1a2233;
    --text-strong: #f3f5f9;
    --text-body: #c3cad6;
    --text-muted: #8b95a7;
    --text-subtle: #5f6b7e;
    --border-subtle: #232c3d;
    --border-strong: #313d52;
    --accent-hover: var(--violet-400);
    --accent-active: var(--violet-300);
    --accent-soft: rgba(124, 92, 252, .16);
    --accent-text: var(--violet-300);
    --accent-ring: rgba(124, 92, 252, .45);
    --ok-fg: #7ee2a0;  --ok-bg: rgba(22, 163, 74, .16);
    --warn-fg: #f0c86a; --warn-bg: rgba(245, 158, 11, .14);
    --bad-fg: #ff9a9a;  --bad-bg: rgba(239, 68, 68, .16);
    --info-fg: var(--violet-300); --info-bg: rgba(124, 92, 252, .14);
    --ig-fill: rgba(225, 48, 108, .16); --ig-text: #ff7eb0;
    --yt-fill: rgba(255, 0, 51, .16);   --yt-text: #ff7986;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.brand {
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  color: var(--text-strong);
}
.brand::first-letter { color: var(--accent); }
.tagline { color: var(--text-subtle); font-size: 12px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-actions form { margin: 0; }

main { padding: 20px; max-width: 1600px; margin: 0 auto; }

/* ---------- buttons ---------- */
button {
  font: inherit; font-weight: 500; font-size: 13px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
button:hover { background: var(--accent-hover); }
button:active { transform: scale(.985); background: var(--accent-active); }
button:disabled { opacity: .55; cursor: progress; transform: none; }
button:focus-visible { outline: none; box-shadow: var(--ring-focus); }
button.ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
button.ghost:hover { background: var(--surface-hover); color: var(--text-strong); }
button.ghost:active { transform: scale(.985); }

/* ---------- cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 4px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-strong);
  display: flex; align-items: center; gap: 8px;
}
.card h3 {
  margin: 24px 0 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.card h3:first-of-type { margin-top: 12px; }
.lede { margin: 0 0 14px; color: var(--text-muted); max-width: 90ch; font-size: 13px; }
.empty { text-align: center; color: var(--text-muted); padding: 48px; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }

/* ---------- banners ---------- */
.banner {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
  font-size: 13px;
}
.banner ul { margin: 6px 0 0; padding-left: 20px; }
.banner.info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; }
.banner.bad { background: var(--bad-bg); color: var(--bad-fg); border-color: transparent; }

/* ---------- verdicts ---------- */
/* Quiet white cards per the system (no colored left-border cards): overline
   question, mono answer, tone pill. Tone color appears only in the pill. */
.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.verdict {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 14px 16px;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.verdict:hover { box-shadow: var(--shadow-md); }
.verdict-q {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.verdict-a {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  color: var(--text-strong);
  margin: 6px 0 2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.verdict p { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* ---------- pills & badges ---------- */
.pill {
  display: inline-block; padding: 1px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.info { background: var(--info-bg); color: var(--info-fg); }

/* platform badges — the ONLY place platform color appears */
.pbadge {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pbadge.ig { background: var(--ig-fill); color: var(--ig-text); }
.pbadge.yt { background: var(--yt-fill); color: var(--yt-text); }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left; padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
tbody tr:last-child > td { border-bottom: none; }
th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
th code { text-transform: none; letter-spacing: 0; }
td { font-variant-numeric: tabular-nums; font-size: 13px; }
code { font-family: var(--mono); font-size: 12px; color: var(--text-body); }
.dim { color: var(--text-subtle); }
.indent { padding-left: 26px; }
.note { font-size: 11px; color: var(--text-subtle); }
.footnote { max-width: 90ch; color: var(--text-subtle); font-size: 12px; }
.meta { color: var(--text-subtle); font-size: 12px; }
.title { min-width: 200px; max-width: 320px; color: var(--text-strong); font-weight: 500; }

/* Wide data tables scroll inside their own container — the page body never
   scrolls horizontally. */
.scroll {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.data { min-width: 100%; white-space: nowrap; }
.data th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-card);
}
.data tbody tr:hover > td { background: var(--surface-hover); }
.data tbody tr.raw:hover > td { background: transparent; }
.sortable th:not(.nosort) { cursor: pointer; user-select: none; }
.sortable th:not(.nosort):hover { color: var(--text-strong); }
.sortable th[data-dir="asc"]::after { content: " ↑"; color: var(--accent); }
.sortable th[data-dir="desc"]::after { content: " ↓"; color: var(--accent); }
tr.raw pre {
  margin: 0; padding: 12px;
  max-height: 380px; overflow: auto;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11px;
  white-space: pre;
}

/* ---------- retention sparkline ---------- */
.spark {
  width: 120px; height: 30px; display: block;
  background: var(--surface-sunken);
  border-radius: 4px;
}
.spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* ---------- login ---------- */
.login { display: flex; justify-content: center; padding-top: 12vh; }
.login form {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px; width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}
.login label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.login input {
  font: inherit;
  height: 36px; padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-strong);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.login input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.error { color: var(--bad-fg); font-size: 12px; margin: 0; }