/* 会議の机に置いて読む画面。字幕2枚（英語・日本語）が主役で、操作は下に1行だけ。
   色はエコー検証ツール（/echo-check/）とそろえている */
:root{
  --bg:#F2F4F6;
  --surface:#FFFFFF;
  --ink:#141D25;
  --muted:#5A6772;
  --line:#D7DDE2;
  --accent:#2350D2;
  --accent-ink:#FFFFFF;
  --accent-soft:#E7ECFA;
  --ok:#1D8452;
  --ok-soft:#E2F2E9;
  --warn:#A8700F;
  --warn-soft:#FAF0DB;
  --bad:#BE3737;
  --bad-soft:#F8E3E3;
  --meter-bg:#E3E8EC;
  --f-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1418; --surface:#161F26; --ink:#E4EAEE; --muted:#93A1AB; --line:#2A3740;
    --accent:#7F9DFF; --accent-ink:#0E1418; --accent-soft:#1D2946;
    --ok:#4DC38B; --ok-soft:#12301F; --warn:#E2AD55; --warn-soft:#382A10; --bad:#F07A7A; --bad-soft:#3B1B1B;
    --meter-bg:#23303A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1418; --surface:#161F26; --ink:#E4EAEE; --muted:#93A1AB; --line:#2A3740;
  --accent:#7F9DFF; --accent-ink:#0E1418; --accent-soft:#1D2946;
  --ok:#4DC38B; --ok-soft:#12301F; --warn:#E2AD55; --warn-soft:#382A10; --bad:#F07A7A; --bad-soft:#3B1B1B;
  --meter-bg:#23303A; color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; height:100%}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.6}

.app{
  height:100dvh; max-width:1040px; margin-inline:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 12px);
}

.bar{display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0}
.brand{min-width:0}
.eyebrow{margin:0; font-family:var(--f-data); font-size:11px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.engine{margin:0; font-weight:700; font-size:15px}
.bar-end{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.ver{font-family:var(--f-data); font-size:11px; letter-spacing:.04em; color:var(--muted); white-space:nowrap}
.pill{flex:none; font-size:12px; font-weight:500; padding:4px 12px; border-radius:999px; background:var(--meter-bg); color:var(--muted)}
.pill.live{background:var(--ok-soft); color:var(--ok)}
.pill.busy{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}

.notice{margin:0; padding:10px 14px; border-radius:8px; background:var(--bad-soft); color:var(--bad); font-size:14px}
.notice[hidden]{display:none}

.stage{flex:1; display:grid; grid-template-rows:1fr 1fr; gap:10px; min-height:0}
@media (min-width:900px) and (orientation:landscape){
  .stage{grid-template-rows:none; grid-template-columns:1fr 1fr}
}
.pane{background:var(--surface); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; min-height:0; overflow:hidden}
.stage.flip #pane-en{transform:rotate(180deg)}
.pane-h{margin:0; padding:10px 16px 4px; display:flex; align-items:baseline; gap:10px; font-size:13px; font-weight:700; color:var(--accent)}
.pane-h small{font-weight:400; font-size:12px; color:var(--muted)}
.lines{flex:1; min-height:0; overflow-y:auto; padding:4px 16px 16px; font-size:clamp(18px,4.8vw,26px); line-height:1.55; overscroll-behavior:contain}
.lines:empty::before{content:attr(data-empty); color:var(--muted); font-size:15px}
.line{margin:0 0 .45em; color:var(--muted)}
.line:last-child{color:var(--ink)}
.line .tmp{opacity:.55}

.ticker{margin:0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ticker .lab{font-family:var(--f-data); font-size:11px; margin-right:8px; padding:1px 6px; border:1px solid var(--line); border-radius:4px}

.controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
button{
  font:inherit; font-size:14px; font-weight:500; line-height:1.3;
  border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:10px 16px; min-height:44px; cursor:pointer;
}
button:hover:not(:disabled){border-color:var(--accent)}
button.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
button.big{min-width:112px; font-size:16px; font-weight:700}
button.big.live{background:var(--bad); border-color:var(--bad); color:#fff}
button:disabled{opacity:.45; cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.toggle{display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-size:14px}
.toggle input{width:20px; height:20px; accent-color:var(--accent); margin:0}
.meter{flex:1 1 60px; min-width:60px; height:6px; border-radius:3px; background:var(--meter-bg); overflow:hidden}
.meter span{display:block; height:100%; width:0; background:var(--accent); transition:width .1s linear}
.data{font-family:var(--f-data); font-variant-numeric:tabular-nums}
.stats{font-size:12px; color:var(--muted)}

dialog{border:1px solid var(--line); border-radius:12px; padding:0; background:var(--surface); color:var(--ink); width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgba(10,16,20,.45)}
.sheet{display:flex; flex-direction:column; gap:16px; padding:20px}
.sheet h2{margin:0; font-size:18px}
.field{display:flex; flex-direction:column; gap:6px}
.field > span,.field > label > span{font-weight:700; font-size:14px}
.field .row{align-items:center}
.field .row[hidden]{display:none}
.field small{color:var(--muted); font-size:13px; line-height:1.6}
select{font:inherit; font-size:15px; min-height:44px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.row{display:flex; flex-wrap:wrap; gap:10px}
.row.end{justify-content:flex-end}
textarea{width:100%; font-size:12px; border:1px solid var(--line); border-radius:8px; padding:10px; background:var(--bg); color:var(--ink); resize:vertical}
textarea[hidden]{display:none}