/* styles.css — open-voice-lens
   Inworld brand identity (warm-white ground, near-black ink, orange + sky-blue
   accents, Inter + JetBrains Mono — matching inworld.ai / promptbrewery.inworld.ai)
   over a Tufte information design: high data-ink, KPI strip, sparkbars, a minimal
   sweep chart, dense tabular numbers. */

:root{
  /* brand neutrals */
  --ink:#14141b;          /* inworld near-black */
  --ink-light:#4b5563;    /* secondary text */
  --ink-muted:#6b7280;    /* captions, labels */
  --bg:#fffef8;           /* inworld warm white */
  --bg-soft:#fbfaf2;      /* panels */
  --bg-aside:#fff6ec;     /* warm cream — flyout / active card */
  --rule:#e7e5dd;         /* warm hairline */
  --rule-strong:#d6d3c8;

  /* brand accents */
  --accent:#ff7a1a;       /* inworld orange */
  --accent-soft:#fff1e3;
  --brand-blue:#0ea5e9;   /* inworld sky blue */

  /* data-series (also used by the chart + sparkbars + KPIs) */
  --spark-primary:#ef6820;   /* arousal — orange */
  --spark-tertiary:#0ea5e9;  /* expressiveness — blue */

  /* status */
  --status-red:#dc2626; --status-amber:#b45309; --status-green:#15803d;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:10px; --r-sm:6px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  border-top:3px solid var(--accent);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-feature-settings:"cv05" 1,"ss01" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.page{ max-width:1180px; margin:0 auto; padding:2rem 1.5rem 4rem; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------------- header / brand ---------------- */
header{ border-bottom:1px solid var(--rule); padding-bottom:1.4rem; margin-bottom:1.6rem; }
.brandbar{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.brand{ display:inline-flex; align-items:center; color:var(--ink); }
.brand:hover{ color:var(--accent); text-decoration:none; }
.iw-logo{ height:20px; width:auto; display:block; color:inherit; }
.brandbar-tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); border-left:1px solid var(--rule-strong); padding-left:.7rem; }

h1{ margin:0; font-weight:700; font-size:2.1rem; letter-spacing:-.03em; line-height:1.05; }
.subtitle{ margin:.55rem 0 .7rem; font-size:1.06rem; line-height:1.5; color:var(--ink-light); max-width:64ch; }
.subtitle em{ font-style:normal; font-weight:600; color:var(--ink); }
.source-tags{ font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--ink-muted); }

.label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }

/* ---------------- source picker ---------------- */
.sources{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0 1rem; }
.source-card{
  position:relative; border:1px solid var(--rule); border-left:3px solid var(--rule);
  background:#fff; border-radius:var(--r); padding:1rem 1.1rem; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  outline:none;
}
.source-card:hover{ border-color:var(--rule-strong); box-shadow:0 2px 10px rgba(20,20,27,.05); }
.source-card:focus-visible{ box-shadow:0 0 0 3px rgba(255,122,26,.35); }
.source-card.active{ border-color:var(--rule-strong); border-left-color:var(--accent); background:var(--bg-aside); }
.source-card.disabled{ opacity:.5; pointer-events:none; }
.source-num{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-muted); text-transform:uppercase; }
.source-card.active .source-num::after{ content:'  ● selected'; color:var(--accent); letter-spacing:.04em; }
.source-label{ font-weight:600; font-size:1.06rem; letter-spacing:-.01em; margin:.15rem 0 .3rem; }
.source-note{ font-size:.86rem; color:var(--ink-light); line-height:1.45; margin:0; }

.source-card.own{ display:flex; flex-direction:column; }
.own-actions{ margin-top:.6rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.source-card.own.drag{ border-color:var(--accent); border-style:dashed; background:var(--accent-soft); }

input[type=file]{ display:none; }
.btn{
  font-family:var(--sans); font-size:.9rem; font-weight:500; cursor:pointer; color:var(--ink);
  background:#fff; border:1px solid var(--rule-strong); border-radius:var(--r-sm); padding:.45rem .9rem;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.btn:hover{ border-color:var(--ink); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:#f2671f; border-color:#f2671f; color:#fff; }
button.btn:disabled{ opacity:.45; cursor:not-allowed; }
.drop-hint{ font-size:.82rem; color:var(--ink-muted); }

/* ---------------- controls row ---------------- */
.controls-row{ display:flex; align-items:center; gap:1rem; margin:.2rem 0 1.4rem; flex-wrap:wrap; }
.status-line{ font-size:.92rem; color:var(--ink-light); }
.status-line.warn{ color:var(--status-amber); font-weight:500; }
.status-line.err{ color:var(--status-red); font-weight:500; }

/* ---------------- KPI strip ---------------- */
.kpi-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule); margin:1.2rem 0 1.8rem; }
.kpi-cell{ padding:.85rem 1rem; border-left:1px solid var(--rule); }
.kpi-cell:first-child{ border-left:none; padding-left:0; }
.kpi-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.kpi-num{ font-family:var(--mono); font-weight:500; font-size:2.1rem; line-height:1.15; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin:.12rem 0; }
.kpi-cell.arousal .kpi-num{ color:var(--spark-primary); }
.kpi-cell.expr .kpi-num{ color:var(--spark-tertiary); }
.kpi-detail{ font-size:.82rem; color:var(--ink-light); }

/* ---------------- sweep chart ---------------- */
.chart{ margin:0 0 1.8rem; padding:0; }
.chart svg{ width:100%; height:auto; display:block; }
.chart .grid{ stroke:var(--rule); stroke-width:1; }
.chart .series{ fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
.chart .dot{ stroke:var(--bg); stroke-width:.9; }
.chart .ax{ font-family:var(--sans); font-size:11.5px; fill:var(--ink-muted); }
.chart .leg{ fill:var(--ink-light); font-weight:500; }
.chart .axtitle{ fill:var(--ink-light); }
figcaption{ font-size:.82rem; color:var(--ink-muted); text-align:center; margin:.5rem auto 0; max-width:72ch; }

/* ---------------- flyout (methodology) ---------------- */
.flyout{ position:relative; background:var(--bg-aside); border:1px solid var(--rule); border-radius:var(--r);
  padding:1.05rem 1.3rem; margin:1.4rem 0 1.8rem; }
.flyout::before{ content:'◆'; position:absolute; top:-.66rem; left:1.2rem; color:var(--accent); font-size:.85rem;
  background:var(--bg); padding:0 .3rem; }
.flyout-title{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-light); margin-bottom:.5rem; }
.flyout p{ margin:.35rem 0; font-size:.94rem; line-height:1.55; color:var(--ink-light); }
.flyout strong{ color:var(--ink); font-weight:600; }
code{ font-family:var(--mono); font-size:.82em; background:rgba(20,20,27,.05); padding:.05em .35em; border-radius:4px; }

/* ---------------- table ---------------- */
.table-wrapper{ overflow-x:auto; margin:1rem 0 1.4rem; border:1px solid var(--rule); border-radius:var(--r); }
table{ border-collapse:collapse; width:100%; }
thead th{
  position:sticky; top:0; background:var(--bg-soft); z-index:1;
  font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); text-align:left; padding:.6rem .7rem; border-bottom:1.5px solid var(--rule-strong); white-space:nowrap;
}
th.num{ text-align:right; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--ink); }
th .arrow{ color:var(--accent); font-size:.7rem; }
tbody td{
  font-family:var(--mono); font-size:.8rem; font-variant-numeric:tabular-nums; font-weight:400;
  padding:.4rem .7rem; border-bottom:1px solid var(--rule); white-space:nowrap; vertical-align:middle; color:var(--ink);
}
tbody tr:last-child td{ border-bottom:none; }
tbody td.num{ text-align:right; }
tbody tr:hover td{ background:var(--accent-soft); }
tr.row-error td{ background:rgba(220,38,38,.05); }
/* file name uses the sans, not mono */
tbody td:nth-child(2){ font-family:var(--sans); font-size:.92rem; }
.fname{ display:inline-block; max-width:24ch; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; white-space:nowrap; }
.dim{ color:var(--ink-muted); }

/* arousal / expressiveness cells: number + proportional bar */
.col-bar .val{ display:block; text-align:right; }
.sparkbar{ display:block; width:74px; height:5px; margin:4px 0 1px auto; background:rgba(20,20,27,.07); position:relative; border-radius:3px; }
.sparkbar>span{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; }

/* status badges */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.03em; padding:2px 8px; border-radius:999px; text-transform:lowercase; }
.badge.ok{ color:var(--status-green); background:rgba(34,197,94,.13); }
.badge.busy{ color:var(--status-amber); background:rgba(234,179,8,.16); }
.badge.bad{ color:var(--status-red); background:rgba(239,68,68,.12); cursor:help; }
.badge.wait{ color:var(--ink-muted); background:rgba(20,20,27,.06); }
.spin{ display:inline-block; width:9px; height:9px; border:1.6px solid rgba(180,83,9,.3);
  border-top-color:var(--status-amber); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* audio player */
audio{ height:30px; width:170px; vertical-align:middle; }

/* empty state */
#emptyState{ color:var(--ink-muted); padding:1.4rem; text-align:center; }

/* ---------------- log + footer ---------------- */
#log{ display:none; font-family:var(--mono); font-size:.72rem; color:var(--ink-muted);
  white-space:pre-wrap; background:var(--bg-soft); border:1px solid var(--rule); border-radius:var(--r);
  padding:.7rem .9rem; max-height:150px; overflow:auto; margin:1rem 0; }
footer{ border-top:1px solid var(--rule); margin-top:2.4rem; padding-top:1.2rem;
  font-size:.88rem; line-height:1.6; color:var(--ink-muted); max-width:80ch; }
footer b{ font-weight:600; color:var(--ink-light); }
footer a{ color:var(--accent); }

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  .page{ padding:1.4rem 1rem 3rem; }
  h1{ font-size:1.7rem; }
  .sources{ grid-template-columns:1fr; }
  .kpi-strip{ grid-template-columns:1fr 1fr; }
  .kpi-cell:nth-child(3){ border-left:none; padding-left:0; }
  .kpi-num{ font-size:1.7rem; }
  .hide-mobile{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}