/* forum-interpreter — ANSWER+ warm-dark operating surface.
   Values copied from ds/tokens.css [data-preset="answer-warm-dark"]; tokens.css wins on any mismatch. */
:root{
  --paper:#0E0D0C; --surface:#171513; --surface-warm:#1F1C19; --surface-2:#272320; --surface-3:#2F2B27;
  --ink:#F2EFE9; --ink-soft:#CBC6BD; --ink-mute:#9A948A; --ink-faint:#736E66;
  --rule:#2A2724; --rule-2:#3A3633; --ui-border:#807870;
  --accent:#FF5A47; --accent-fill:#CC1400; --accent-fill-hover:#9A0F00; --on-accent:#FFFFFF; --accent-muted:rgba(204,20,0,.12);
  --state-danger:#FF5A47; --state-danger-bg:#2A1512; --state-warn:#E0B040; --state-warn-bg:#2E2818; --state-good:#4CAF82; --state-good-bg:#1F2E27;
  --focus-ring:0 0 0 3px #FF5A47;
  --font:"Noto Sans JP","Hiragino Sans",-apple-system,"Segoe UI",sans-serif; --mono:"Fira Code",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --dur:.2s;
  --space-2:8px; --space-3:16px; --space-4:24px; --space-6:48px; /* = ds/tokens.css :root */ --scrim:rgba(14,13,12,.72);
  --fs-sub:clamp(28px,4.2vw,64px); /* subtitle line; overridable with ?size= */
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-feature-settings:"palt";line-height:1.6;-webkit-font-smoothing:antialiased}
body[data-bg="transparent"]{background:transparent}
a{color:var(--accent)} button,input,select{font:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.label{font-size:12px;letter-spacing:.04em;color:var(--ink-mute)}
.btn{background:var(--surface-2);color:var(--ink);border:1px solid var(--ui-border);border-radius:4px;padding:8px 14px;cursor:pointer;transition:background var(--dur) var(--ease)}
.btn:hover{background:var(--surface-3)} .btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-fill-hover)}
.btn.on{border-color:var(--accent);color:var(--accent)} .btn:disabled{opacity:.45;cursor:default}
.tag{display:inline-block;padding:1px 6px;border:1px solid var(--rule-2);border-radius:3px;font-size:11px;color:var(--ink-soft)}
.tag.ja{border-color:var(--ui-border);color:var(--ink)} .tag.en{border-color:var(--rule-2);color:var(--ink-soft)}
.warn{background:var(--state-warn-bg);color:var(--state-warn);padding:6px 10px;border-radius:4px;font-size:13px}
.danger{background:var(--state-danger-bg);color:var(--state-danger)}
.good{background:var(--state-good-bg);color:var(--state-good)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-3) 0}

/* ---------- viewer ---------- */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--rule);background:var(--surface);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar .brand{font-weight:900;letter-spacing:-.01em} .topbar .brand b{color:var(--accent)}
.topbar .sp{flex:1}
.status{font-size:12px;color:var(--ink-mute)} .status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--state-good);margin-right:6px}
.status.off .dot{background:var(--state-danger)}
.feed{padding:16px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.seg{border-left:2px solid var(--rule-2);padding:4px 14px}
.seg.interim{opacity:.7} .seg.interim .src::after{content:"…";color:var(--ink-soft)}
.seg .meta{font-size:11px;color:var(--ink-mute);margin-bottom:2px;letter-spacing:.06em}
.seg .src{font-size:clamp(16px,1.6vw,22px);color:var(--ink-soft)}
.seg .tr{font-size:clamp(18px,2vw,28px);font-weight:500;color:var(--ink)}
.seg .tr:empty::before{content:"（翻訳中）";color:var(--ink-mute);font-weight:400}
/* mode: pres = one language only, larger */
body[data-mode="pres"] .seg .src{display:none} body[data-mode="pres"] .seg .tr{font-size:clamp(22px,2.6vw,36px)}
/* pres renders one language-only line in .tr (oneLine), for both 訳文 and 原文 */
/* mode: sub = bottom 2 lines */
body[data-mode="sub"]{overflow:hidden}
body[data-mode="sub"] .feed{display:none}
.subbar{display:none;position:fixed;left:0;right:0;bottom:0;padding:18px 5vw 26px;text-align:center;
  background:linear-gradient(180deg,rgba(14,13,12,0) 0%,rgba(14,13,12,.85) 30%,rgba(14,13,12,.92) 100%)}
body[data-bg="transparent"] .subbar{background:transparent}
body[data-bg="transparent"] .subbar .line{background:var(--scrim);padding:.1em .4em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body[data-mode="sub"] .subbar{display:block}
.subbar .line{font-size:var(--fs-sub);line-height:1.35;font-weight:500;color:var(--ink);text-shadow:0 2px 6px var(--scrim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:92vw;margin:0 auto}
.subbar .line.second{font-size:calc(var(--fs-sub)*.72);color:var(--ink-soft);margin-top:6px;-webkit-line-clamp:1}
.subbar .line.interim{opacity:.75}
body[data-mode="sub"] .topbar{opacity:0;transition:opacity var(--dur) var(--ease)} body[data-mode="sub"] .topbar:hover,body[data-mode="sub"] .topbar:focus-within,body[data-mode="sub"].showbar .topbar{opacity:1}
.modebar{display:flex;gap:6px;flex-wrap:wrap} .modebar .btn{padding:4px 10px;font-size:12px}
.warnbar{position:fixed;top:48px;left:0;right:0;z-index:6;text-align:center;pointer-events:none} .warnbar .warn{display:inline-block;pointer-events:auto}

/* ---------- operator ---------- */
.op{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:16px;padding:16px;max-width:1400px;margin:0 auto}
@media(max-width:900px){.op{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:14px}
.panel h2{font-size:13px;letter-spacing:.04em;color:var(--ink-mute);margin:0 0 var(--space-3);font-weight:700}
.speakers{display:flex;flex-wrap:wrap;gap:6px} .speakers .btn{font-size:13px}
.big{font-size:20px;font-weight:700}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px} .kv b{color:var(--ink-soft);font-weight:500}
.cand{border-top:1px solid var(--rule);padding:8px 0;font-size:14px} .cand .ev{font-size:12px;color:var(--ink-mute)}
.cand .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.live{min-height:80px;font-size:18px;color:var(--ink-soft);border-left:2px solid var(--accent);padding-left:12px}
.mic{width:14px;height:14px;border-radius:50%;background:transparent;border:2px solid var(--on-accent);display:inline-block;vertical-align:middle;margin-right:6px}
.mic.on{background:var(--state-danger);border-color:var(--state-danger);box-shadow:0 0 0 4px rgba(255,90,71,.25)}
input[type=text]{background:var(--surface-2);color:var(--ink);border:1px solid var(--ui-border);border-radius:4px;padding:6px 8px;width:100%}
.mono{font-family:var(--mono);font-size:12px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media(max-width:600px){.modebar{display:flex;order:3;width:100%;flex-wrap:nowrap;overflow-x:auto}.modebar .btn{min-height:44px;flex:0 0 auto}.topbar .brand{font-size:14px}}
.subbar{padding-bottom:calc(26px + env(safe-area-inset-bottom))}

/* v2 additions: gap marker, source fallback, textarea, danger tag */
.gap{color:var(--state-warn);background:var(--state-warn-bg);border-radius:4px;padding:6px 12px;font-size:14px;text-align:center}
.seg .tr.fallback,.subbar .line.fallback{color:var(--ink-soft)}
.seg .tr.interim{color:var(--ink-soft)}
textarea{width:100%;background:var(--surface-2);color:var(--ink);border:1px solid var(--ui-border);border-radius:4px;padding:6px 8px;font:inherit}
input[type=password]{background:var(--surface-2);color:var(--ink);border:1px solid var(--ui-border);border-radius:4px;padding:6px 8px;width:100%}
.tag.danger{border-color:var(--state-danger);color:var(--state-danger);background:var(--state-danger-bg)}
.tag.good{border-color:var(--state-good);color:var(--state-good);background:var(--state-good-bg)}
.btn{min-height:36px}
@media(max-width:600px){.btn{min-height:44px}}

.meter{width:160px;height:8px;background:var(--surface-2);border:1px solid var(--ui-border);border-radius:4px;overflow:hidden}.meter>div{height:100%;width:0;background:var(--state-good);transition:width var(--dur) linear}

/* layout helpers replacing inline styles (8pt grid) */
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)}
.grid-add{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-2);margin-bottom:var(--space-2)}
.btn.sm{padding:2px 12px;font-size:13px;min-height:32px}
.hint{font-size:12px;color:var(--ink-mute);margin-bottom:var(--space-2)}

.subbar .line.gapline{color:var(--state-warn);text-shadow:none;font-size:calc(var(--fs-sub)*.5)}