:root { --bg:#f6f7f9; --card:#fff; --fg:#1d232b; --muted:#6b7280; --ok:#127a3a; --gap:#c0141b; --warn:#a15c00;
        --line:#e3e6ea; --accent:#1f5fa8; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg);
       padding-bottom: env(safe-area-inset-bottom); }
.banner { padding:6px 12px; font-size:13px; font-weight:600; text-align:center; }
.banner.fiction { background:#fff3c4; color:#5c4400; }
.banner.remote { background:#ffd9d9; color:#7a0b0b; }
.banner.local { background:#e4f1e8; color:#174d2a; }
header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#1d232b; color:#fff;
         position:sticky; top:0; z-index:5; }
header h1 { font-size:18px; margin:0; }
header form button { background:none; color:#cfd6df; border:1px solid #4b5563; }
main { max-width: 1200px; margin: 0 auto; padding: 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; }
.narrow { max-width:380px; margin:40px auto; }
h2 { font-size:17px; margin:0 0 8px; }
h3 { font-size:14px; margin:12px 0 4px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
label { display:block; margin:8px 0; font-size:14px; }
input, select, textarea { width:100%; font-size:16px; padding:8px; border:1px solid #c9ced6; border-radius:8px; background:#fff; }
textarea { min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size:13px; }
button { font-size:15px; padding:9px 14px; border-radius:8px; border:1px solid #c9ced6; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.rec { background:var(--gap); color:#fff; border-color:var(--gap); font-weight:700; }
button:disabled { opacity:.5; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex: 0 0 auto; }
.muted { color:var(--muted); font-size:13px; }
.error { color:var(--gap); font-weight:600; }
.tabs { display:flex; gap:4px; margin-bottom:8px; overflow-x:auto; }
.tabs button.active { background:#1d232b; color:#fff; }
.grid { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
.item { display:flex; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px; }
.item .mark { width:22px; flex:0 0 22px; text-align:center; font-weight:700; }
.item .mark.rid { width:auto; flex:0 0 auto; min-width:22px; white-space:nowrap; font-family:ui-monospace,monospace; font-size:12px; }
.item .lbl { min-width:0; overflow-wrap:anywhere; }
.item.covered .mark { color:var(--ok); }
.item.gap { background:#fff0f0; }
.item.gap .mark, .item.gap .lbl { color:var(--gap); font-weight:600; }
.item.na { color:#9aa1ab; }
.item .anch { font-size:12px; color:var(--accent); white-space:nowrap; }
.mnm { font-size:11px; background:var(--gap); color:#fff; border-radius:4px; padding:0 4px; margin-left:4px; }
.branch { padding:8px; border-radius:8px; background:#eef3fa; margin-bottom:8px; font-size:14px; }
.branch.subtle { display:none; }
.tline { padding:4px 0; border-bottom:1px solid var(--line); font-size:14px; }
.tline .ts { color:var(--muted); font-size:12px; font-family: ui-monospace, Menlo, monospace; }
.tline .spk { font-size:12px; font-weight:600; border:none; background:#eef0f3; padding:1px 6px; border-radius:6px; }
.tline .spk.clinician { background:#dbe8f7; } .tline .spk.patient { background:#e4f1e8; }
.tline .spk.inferred { font-style:italic; opacity:.8; }
.tline.hl { background:#fff6c9; }
.dline { padding:5px 0; border-bottom:1px solid var(--line); }
.chip { display:inline-block; font-size:11px; background:#eef3fa; color:var(--accent); border-radius:6px; padding:1px 6px; margin:2px 2px 0 0; cursor:pointer; }
.chip.rule { background:#f3e8ff; color:#6b21a8; }
.loud { background:var(--gap); color:#fff; padding:10px; border-radius:8px; font-weight:700; margin:8px 0; }
.rejected { background:#fff6e5; border-left:4px solid var(--warn); padding:6px 8px; margin:4px 0; font-size:14px; }
.meter { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; margin:6px 0; }
.meter > div { height:100%; background:var(--ok); width:0; transition: width .1s; }
.stat { font-size:13px; color:var(--muted); }
pre { white-space:pre-wrap; font-size:13px; }
.next { border:2px solid var(--accent); border-radius:10px; padding:6px 10px; margin-bottom:8px; background:#f7faff; }
.item.mnmopen .lbl { font-weight:600; }
.item.alert { border-left:4px solid var(--gap); }
details summary { cursor:pointer; font-size:14px; padding:6px 0; color:var(--accent); }

.suggest{border:2px solid #d98e04;background:#fff8e6;border-radius:8px;padding:8px 10px;margin:6px 0}
.suggest .quote{font-style:italic;margin:4px 0}
.aigen{background:#7a2bd1;color:#fff;border-radius:4px;padding:1px 5px;font-size:.75em;font-weight:600}
button.tab{margin:2px 4px 2px 0}button.tab.active{outline:2px solid #2563eb}
.item .fb{margin-left:auto;white-space:nowrap;opacity:.55}.item .fb button{padding:0 4px;font-size:.85em;border:none;background:none}
.item .fb button.on{background:#dbeafe;border-radius:4px}.item:hover .fb{opacity:1}
.addlist{margin:4px 0}
.item.consider{border-left:4px solid #d98e04;background:#fff8e6}.item .ack{margin-left:auto;white-space:nowrap}
.item.consider .quote{font-style:italic}

.tline .spk.guardian { background:#f6ead6; } .tline .spk.other { background:#ece4f4; }
.tline .vtag { font-size:10px; color:#667; border:1px solid #ccd; border-radius:4px; padding:0 3px; margin-left:3px; }
.linkbtn { background:none; border:none; padding:2px 0 4px; color:#2563eb; font-size:13px; cursor:pointer; text-decoration:underline; }
#transcript .tline { padding:1px 0; line-height:1.35; }

.critique li{margin:.4em 0}.crit-resolved{opacity:.6}.crit-open .pill{background:#fde2e1}.crit-resolved .pill{background:#dff3e0}

.autoadd { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:13px; padding:3px 8px; margin:2px 0;
  background:#f1f5f9; border-radius:12px; }
.autoadd .quote { color:#475569; font-style:italic; max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.small { font-size:12px; margin-top:4px; }

/* Seuraavaksi pinned at the top (Aki 15.10): compact, max 3 items, large text */
.sticky-next { position:sticky; top:0; z-index:20; margin:0 0 8px; }
.sticky-next .next { margin:0; background:#f7faff; box-shadow:0 2px 6px rgba(0,0,0,.12); padding:4px 10px; }
.sticky-next .nextlist { max-height:45vh; overflow-y:auto; display:grid; grid-template-columns:1fr; column-gap:16px; }
@media (min-width: 900px) { .sticky-next .nextlist { grid-template-columns:1fr 1fr; } }
.sticky-next .item { font-size:16px; padding:1px 0; line-height:1.2; border-bottom:none; }
.sticky-next .item.later { color:#64748b; }
.sticky-next .mnm { font-size:13px; vertical-align:middle; }
.sticky-next .quote { font-size:14px; display:block; }
@media (max-width: 600px) { .sticky-next .item { font-size:15px; } .sticky-next .next > b { font-size:15px; } }
.newpatient { display:flex; justify-content:center; padding:16px 0 32px; }
.newpatient button { font-size:17px; padding:10px 28px; }
.corr { border-bottom:1px dotted #2563eb; }
.orig { font-size:11px; color:#94a3b8; margin-left:2px; }