/* EVAS 3.0 test bed – same design tokens as the occlusion map */
:root {
  --tb-bg: #eef1f5; --tb-card: #ffffff; --tb-card-2: #f7f9fb; --tb-ink: #0f1720; --tb-ink-2: #3b4652; --tb-muted: #5f6a77; --tb-line: #dfe4ea; --tb-line-2: #cfd6de;
  --tb-accent: #0f5f8c; --tb-accent-ink: #fff; --tb-accent-soft: rgba(15,95,140,.10); --tb-hard: #c62a3a; --tb-hard-soft: #fdecee; --tb-warn: #9a6200; --tb-warn-soft: #fff6db; --tb-info: #3b6ea8; --tb-info-soft: #eaf2fb; --tb-ok: #1b7a46; --tb-cand: #b07d00;
  --tb-solid-ink: #fff; --tb-cardio: #6b21d6; --tb-ok-ink: #145c35; /* text on a solid status colour; the cardiology tag; green text on a green tint (contrast >= 4.5:1, A11) */
  color-scheme: light; /* the browser's own controls (an unstyled button, a scrollbar) follow the theme (A11) */
  --tb-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); --tb-r: 14px; --tb-r-sm: 9px; --tb-font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tb-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tb-bg: #0c1117; --tb-card: #141b23; --tb-card-2: #0f151c; --tb-ink: #e9eef4; --tb-ink-2: #c3ccd6; --tb-muted: #8d99a6; --tb-line: #26303b; --tb-line-2: #33404d;
  --tb-accent: #6db3e8; --tb-accent-ink: #06121c; --tb-accent-soft: rgba(109,179,232,.14); --tb-hard: #ff6b7a; --tb-hard-soft: #3a1418; --tb-warn: #e3bd4e; --tb-warn-soft: #3a2f08; --tb-info: #8cc5f0; --tb-info-soft: #13283d; --tb-ok: #5fcf8e; --tb-cand: #e3bd4e;
  --tb-solid-ink: #06121c; --tb-cardio: #c4a3ff; --tb-ok-ink: #5fcf8e; color-scheme: dark;
  --tb-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); } }
* { box-sizing: border-box; } [hidden] { display: none !important; }
html, body { margin: 0; background: var(--tb-bg); color: var(--tb-ink); font: 14.5px/1.45 var(--tb-font); -webkit-font-smoothing: antialiased; }
code { font-family: var(--tb-mono); font-size: .82em; color: var(--tb-muted); }
button, input, select, textarea { font: inherit; color: inherit; }
.tb-app { max-width: 1680px; margin: 0 auto; padding: 14px 16px 28px; display: grid; gap: 12px; }
.tb-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.tb-brand { display: flex; align-items: center; gap: 12px; } .tb-logo { padding: 6px 10px; border-radius: 10px; background: var(--tb-accent); color: var(--tb-accent-ink); font-weight: 800; font-size: 13px; }
.tb-brand h1 { margin: 0; font-size: 20px; } .tb-brand p { margin: 2px 0 0; color: var(--tb-muted); font-size: 12.5px; }
.tb-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; } .tb-field { display: grid; gap: 4px; font-size: 11px; color: var(--tb-muted); text-transform: uppercase; letter-spacing: .06em; }
.tb-savebar { display: flex; gap: 8px; align-items: center; } .tb-dirty { color: var(--tb-warn); font-size: 12.5px; font-weight: 600; }
.tb-banner { background: var(--tb-warn-soft); border: 1px solid var(--tb-line); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; color: var(--tb-ink-2); }
.tb-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--tb-card-2); border: 1px solid var(--tb-line); }
.tb-seg button { border: 0; background: transparent; color: var(--tb-ink-2); padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.tb-seg button.is-active { background: var(--tb-accent); color: var(--tb-accent-ink); }
.tb-seg-sm button { padding: 4px 12px; } .tb-seg .tb-clear { color: var(--tb-muted); padding: 4px 8px; }
.tb-btn { border: 1px solid var(--tb-line-2); background: var(--tb-card); color: var(--tb-ink); text-decoration: none; padding: 7px 12px; border-radius: var(--tb-r-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; } /* one colour for every .tb-btn, links too (RU-34) */
.tb-btn:hover:not(:disabled) { border-color: var(--tb-accent); } .tb-btn:disabled { opacity: .45; cursor: default; }
.tb-btn-primary { background: var(--tb-accent); color: var(--tb-accent-ink); border-color: var(--tb-accent); } .tb-btn-ghost { background: transparent; } .tb-btn-sm { padding: 4px 9px; font-size: 12.5px; font-weight: 500; }
.tb-btn-danger:hover { border-color: var(--tb-hard); color: var(--tb-hard); }
.tb-btn { white-space: nowrap; }
.tb-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
@media (max-width: 1280px) { .tb-layout { grid-template-columns: 260px minmax(0, 1fr); } .tb-right { grid-column: 1 / -1; } }
@media (max-width: 860px) { .tb-layout { grid-template-columns: 1fr; } }
.tb-left, .tb-right { display: grid; gap: 12px; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
.tb-panel, .tb-record, .tb-right { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-shadow); }
.tb-panel { padding: 12px; } .tb-right { padding: 10px; align-content: start; }
.tb-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .tb-panel-head h2 { margin: 0; font-size: 14px; }
.tb-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .tb-inline select { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--tb-line-2); background: var(--tb-card); font-size: 12.5px; max-width: 180px; }
.tb-check { font-size: 12px; color: var(--tb-muted); display: flex; gap: 4px; align-items: center; }
.tb-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tb-cases button { width: 100%; text-align: left; border: 1px solid var(--tb-line); background: var(--tb-card-2); border-radius: 9px; padding: 7px 9px; cursor: pointer; display: grid; gap: 2px; }
.tb-cases li.is-active button { border-color: var(--tb-accent); background: var(--tb-accent-soft); } .tb-meta { color: var(--tb-muted); font-size: 12px; }
.tb-tree ul { list-style: none; margin: 0; padding-left: 12px; border-left: 1px dashed var(--tb-line-2); } .tb-tree > ul { padding-left: 0; border: 0; }
.tb-node { width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 6px; border-radius: 7px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tb-node:hover { background: var(--tb-card-2); } .tb-node.is-active { background: var(--tb-accent-soft); }
.tb-node-label { font-weight: 600; font-size: 13px; } .tb-node-sum { color: var(--tb-muted); font-size: 11.5px; flex: 1 1 100%; }
/* one pill (it was defined twice; the second rule gave counters 1.1-1.4:1, A11): a soft tag by default, solid status colours with their own ink */
.tb-pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--tb-accent-soft); color: var(--tb-ink-2); }
.tb-pill.hard { background: var(--tb-hard); color: var(--tb-solid-ink); } .tb-pill.warn { background: var(--tb-warn); color: var(--tb-solid-ink); }
.tb-center { min-width: 0; } .tb-empty { padding: 30px; color: var(--tb-muted); background: var(--tb-card); border-radius: var(--tb-r); border: 1px dashed var(--tb-line-2); }
.tb-record { padding: 16px 18px; display: grid; gap: 10px; }
.tb-record-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .tb-record-head h2 { margin: 2px 0; font-size: 19px; }
.tb-locked { background: var(--tb-info-soft); border-radius: 9px; padding: 8px 10px; }
.tb-fields { display: grid; gap: 2px; }
.tb-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 4px 14px; padding: 8px 8px; border-radius: 9px; align-items: start; border-left: 3px solid transparent; }
.tb-row:hover { background: var(--tb-card-2); } .tb-row.has-hard { border-left-color: var(--tb-hard); } .tb-row.has-warn { border-left-color: var(--tb-warn); } .tb-row.has-info { border-left-color: var(--tb-info); }
.tb-row.is-hidden { opacity: .55; } .tb-row.is-na .tb-ctl { opacity: .6; }
.tb-label { font-weight: 600; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; padding-top: 5px; } .tb-label code { flex-basis: 100%; font-weight: 400; }
.tb-req { color: var(--tb-hard); font-weight: 800; } .tb-badge { font-style: normal; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid; }
.tb-badge.cand { color: var(--tb-cand); border-color: var(--tb-cand); }
.tb-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb-ctl input[type=text], .tb-ctl input[type=number], .tb-ctl input[type=date], .tb-ctl input[type=datetime-local], .tb-ctl select, .tb-ctl textarea { padding: 6px 9px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); min-width: 180px; }
.tb-ctl textarea { width: 100%; min-width: 260px; } .tb-ctl input:focus, .tb-ctl select:focus, .tb-ctl textarea:focus { outline: 2px solid var(--tb-accent-soft); border-color: var(--tb-accent); }
.tb-unit { display: inline-flex; align-items: center; gap: 6px; } .tb-unit input { width: 130px; min-width: 0 !important; } .tb-unit span { color: var(--tb-muted); font-size: 12.5px; }
.tb-radios, .tb-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-radio, .tb-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--tb-line-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; font-size: 13px; background: var(--tb-card); }
.tb-radio input, .tb-chip input { margin: 0; } .tb-radio.is-active, .tb-chip.is-active { border-color: var(--tb-accent); background: var(--tb-accent-soft); }
.tb-radio em { font-style: normal; font-size: 10.5px; color: var(--tb-muted); }
.tb-miss { font-size: 12px !important; min-width: 0 !important; color: var(--tb-muted); } .tb-miss-text { min-width: 220px; }
.tb-missing-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--tb-card-2); border: 1px dashed var(--tb-line-2); color: var(--tb-ink-2); font-size: 12.5px; }
.tb-why { grid-column: 2; font-size: 11.5px; color: var(--tb-muted); }
.tb-msg { grid-column: 2; font-size: 12.5px; padding: 4px 8px; border-radius: 7px; } .tb-msg b { font-family: var(--tb-mono); font-size: 11px; margin-right: 4px; }
.tb-msg.hard { background: var(--tb-hard-soft); color: var(--tb-hard); } .tb-msg.warn { background: var(--tb-warn-soft); color: var(--tb-warn); } .tb-msg.info { background: var(--tb-info-soft); color: var(--tb-info); }
.tb-record > .tb-msg { grid-column: auto; }
.tb-note { color: var(--tb-muted); font-size: 12.5px; }
.tb-sys summary { cursor: pointer; color: var(--tb-muted); font-size: 12.5px; } .tb-sys div { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; padding: 6px 0; }
.tb-children { border-top: 1px solid var(--tb-line); padding-top: 10px; } .tb-children header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-children h3 { margin: 0; font-size: 14px; } .tb-children ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.tb-children li { display: flex; align-items: center; gap: 6px; } .tb-children li button { flex: 1; text-align: left; border: 1px solid var(--tb-line); background: var(--tb-card-2); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.tb-children li button:hover { border-color: var(--tb-accent); }
.tb-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tb-card-2); border: 1px solid var(--tb-line); }
.tb-tabs button { flex: 1; border: 0; background: transparent; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--tb-ink-2); }
.tb-tabs button.is-active { background: var(--tb-card); color: var(--tb-ink); box-shadow: var(--tb-shadow); } .tb-tabs b { font-size: 11px; color: var(--tb-hard); }
.tb-tabpanel { padding: 8px 2px; }
.tb-summary { display: flex; gap: 10px; font-weight: 700; font-size: 13px; margin-bottom: 8px; } .tb-summary .hard { color: var(--tb-hard); } .tb-summary .warn { color: var(--tb-warn); } .tb-summary .info { color: var(--tb-info); }
.tb-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tb-issue button { width: 100%; text-align: left; display: grid; grid-template-columns: 62px 1fr; gap: 8px; border: 1px solid var(--tb-line); border-left-width: 4px; background: var(--tb-card); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; }
.tb-issue.hard button { border-left-color: var(--tb-hard); } .tb-issue.warn button { border-left-color: var(--tb-warn); } .tb-issue.info button { border-left-color: var(--tb-info); }
.tb-sev { font-weight: 700; font-size: 11.5px; } .tb-issue.hard .tb-sev { color: var(--tb-hard); } .tb-issue.warn .tb-sev { color: var(--tb-warn); } .tb-issue.info .tb-sev { color: var(--tb-info); }
.tb-derived { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tb-derived th { text-align: left; font-weight: 600; padding: 5px 6px 5px 0; vertical-align: top; width: 55%; } .tb-derived th code { display: block; font-weight: 400; }
.tb-derived td { padding: 5px 0; border-bottom: 1px solid var(--tb-line); } .tb-derived th { border-bottom: 1px solid var(--tb-line); } .tb-null { color: var(--tb-muted); } .tb-derived em { font-size: 11px; color: var(--tb-muted); }
.tb-ok { color: var(--tb-ok); font-weight: 700; } .tb-bad { color: var(--tb-hard); font-weight: 700; }
.tb-audit { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: grid; gap: 4px; }
.tb-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: min(720px, 92vw); padding: 10px 14px; border-radius: 10px; background: var(--tb-ink); color: var(--tb-card); box-shadow: var(--tb-shadow); z-index: 20; font-size: 13.5px; }
.tb-toast[data-kind=warn] { background: var(--tb-hard); color: var(--tb-solid-ink); }
.tb-toast .tb-btn { background: transparent; color: inherit; border-color: currentColor; font-weight: 700; } /* "Ångra" on the toast: its own colour, never the toast's background (RE-11) */
.tb-dialog { width: min(1500px, 96vw); height: min(940px, 92vh); padding: 0; border: 1px solid var(--tb-line); border-radius: 14px; background: var(--tb-card); color: var(--tb-ink); }
.tb-dialog::backdrop { background: rgba(5,10,16,.55); } .tb-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--tb-line); }
.tb-dialog iframe { width: 100%; height: calc(100% - 46px); border: 0; }
.tb-fatal { background: var(--tb-hard-soft); color: var(--tb-hard); padding: 12px; white-space: pre-wrap; }
.tb-params { display: grid; gap: 8px; } .tb-params label { display: grid; gap: 4px; font-size: 12.5px; } .tb-params label span { display: grid; } .tb-params input { padding: 6px 9px; border: 1px solid var(--tb-line-2); border-radius: 8px; background: var(--tb-card); width: 140px; }

/* ---------------------------------------------------------------- story view (patient story, cues, live KPIs) */
.tb-savestate { font-size: 12.5px; font-weight: 600; color: var(--tb-muted); min-width: 150px; text-align: right; }
.tb-savestate[data-kind=dirty], .tb-savestate[data-kind=busy] { color: var(--tb-warn); } .tb-savestate[data-kind=ok] { color: var(--tb-ok); } .tb-savestate[data-kind=bad] { color: var(--tb-hard); }
.tb-conflict { background: var(--tb-hard-soft); color: var(--tb-hard); border: 1px solid var(--tb-hard); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.tb-pill.todo { background: var(--tb-accent); color: var(--tb-accent-ink); } .tb-pill.ok { background: var(--tb-ok); color: var(--tb-solid-ink); }
.st-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: ch; }
.st-nav button { width: 100%; display: flex; gap: 8px; align-items: center; border: 0; background: transparent; padding: 5px 6px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; }
.st-nav button:hover { background: var(--tb-card-2); } .st-nav button > span:nth-child(2) { flex: 1; }
.st-nav .st-num { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; border: 1.5px solid var(--tb-line-2); color: var(--tb-muted); flex: none; }
.st-nav .is-done .st-num { background: var(--tb-ok); border-color: var(--tb-ok); color: var(--tb-solid-ink); } .st-nav .is-bad .st-num { border-color: var(--tb-hard); color: var(--tb-hard); }
.st-nav .is-todo .st-num { border-color: var(--tb-accent); color: var(--tb-accent); } .st-nav .is-off { opacity: .45; }
.st-nav .is-cue button { background: var(--tb-accent-soft); font-weight: 700; }
.st-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 80px; } /* minmax: a wide chapter never widens the page (phone width) */
.st-chapter { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-shadow); padding: 14px 16px; scroll-margin-top: 12px; }
.st-chapter.is-off { opacity: .6; } .st-chapter.is-off .st-body { display: none; }
.st-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; } .st-head > div { flex: 1; }
.st-head .st-num { width: 28px; height: 28px; border-radius: 999px; background: var(--tb-accent-soft); color: var(--tb-accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.st-head h2 { margin: 0; font-size: 16.5px; } .st-cue-text { margin: 2px 0 0; color: var(--tb-muted); font-size: 13px; }
.st-status .tb-pill { height: 20px; padding: 0 8px; font-weight: 700; }
.st-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 2px 10px; }
.tb-row.is-compact { grid-template-columns: 1fr; gap: 3px; padding: 6px 8px; } .tb-row.is-compact .tb-label { padding-top: 0; font-size: 12.5px; color: var(--tb-ink-2); }
.tb-row.is-compact .tb-why, .tb-row.is-compact .tb-msg { grid-column: 1; } .tb-row.is-wide { grid-column: 1 / -1; }
.tb-row.is-todo .tb-label::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--tb-accent); display: inline-block; margin-right: 2px; transform: translateY(-1px); }
.tb-row.is-flash { animation: st-flash 1.2s ease-out; } @keyframes st-flash { 0% { background: var(--tb-accent-soft); box-shadow: 0 0 0 2px var(--tb-accent); } 100% { background: transparent; box-shadow: none; } }
.tb-row.is-compact .tb-ctl input[type=text], .tb-row.is-compact .tb-ctl select { min-width: 0; max-width: 100%; }
.tb-time { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tb-time input { width: 168px; font-variant-numeric: tabular-nums; } .tb-time input[aria-invalid=true] { border-color: var(--tb-hard) !important; }
.tb-mini { border: 1px solid var(--tb-line-2); background: var(--tb-card-2); border-radius: 7px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: var(--tb-ink-2); } .tb-mini:hover { border-color: var(--tb-accent); }
.tb-rel { font-size: 12px; color: var(--tb-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-list { display: grid; gap: 8px; margin-top: 8px; } .st-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-list-head h4 { margin: 0; font-size: 13.5px; color: var(--tb-ink-2); } .st-empty { margin: 0; }
.st-card { border: 1px solid var(--tb-line); border-radius: 12px; padding: 8px 10px; background: var(--tb-card-2); display: grid; gap: 4px; }
.st-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .st-card-head .tb-meta { margin-left: 4px; }
.st-x { border: 0; background: transparent; color: var(--tb-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .st-x:hover { color: var(--tb-hard); background: var(--tb-hard-soft); }
.st-card .tb-msg, .st-subcard .tb-msg { grid-column: auto; }
.st-nested { border-top: 1px dashed var(--tb-line-2); padding-top: 6px; display: grid; gap: 6px; } .st-nested-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--tb-muted); font-weight: 600; }
.st-subcard { border: 1px solid var(--tb-line); border-radius: 10px; padding: 6px 8px; background: var(--tb-card); display: grid; gap: 4px; } .st-after { justify-self: start; }
.st-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--tb-line-2); border-radius: 12px; font-size: 13px; color: var(--tb-ink-2); margin-top: 6px; }
.st-cta.is-subtle { border-style: dotted; color: var(--tb-muted); }
.st-embed { border: 1px solid var(--tb-line); border-radius: 12px; overflow: hidden; background: var(--tb-card-2); resize: vertical; height: 640px; min-height: 420px; }
.st-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .st-embed-note { margin: 6px 2px 0; }
.st-cue { position: sticky; bottom: 12px; z-index: 5; margin-top: -68px; display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--tb-ink); color: var(--tb-card); box-shadow: 0 10px 30px rgba(10,20,30,.25); }
.st-cue[data-kind=fix] { background: var(--tb-hard); color: var(--tb-solid-ink); } .st-cue[data-kind=done] { background: var(--tb-ok); color: var(--tb-solid-ink); }
.st-cue-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; opacity: .75; } .st-cue-what { flex: 1; min-width: 0; font-size: 13.5px; } .st-cue .tb-meta { color: inherit; opacity: .7; }
.st-cue .tb-btn-primary { background: var(--tb-card); color: var(--tb-ink); border-color: transparent; } kbd { font: 600 10.5px var(--tb-mono); opacity: .6; margin-left: 4px; }

/* eTICI */
.et { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .et-fan { width: 150px; height: 92px; flex: none; }
.et-fan .et-on { fill: var(--tb-accent); } .et-fan .et-off { fill: var(--tb-line); } .et-fan .et-trunk { stroke: var(--tb-accent); stroke-width: 5; stroke-linecap: round; } .et-fan .et-clot { fill: var(--tb-hard); }
.et-main { flex: 1; min-width: 260px; display: grid; gap: 7px; }
.et-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.et-chip { display: grid; justify-items: center; gap: 0; min-width: 58px; padding: 5px 8px; border: 1px solid var(--tb-line-2); border-radius: 10px; background: var(--tb-card); cursor: pointer; }
.et-chip b { font-size: 14px; } .et-chip span { font-size: 10.5px; color: var(--tb-muted); } .et-chip:hover:not(:disabled) { border-color: var(--tb-accent); }
.et-chip.is-active { background: var(--tb-accent); border-color: var(--tb-accent); color: var(--tb-accent-ink); } .et-chip.is-active span { color: inherit; opacity: .85; }
.et-chip.is-partial { background: var(--tb-accent-soft); color: var(--tb-ink); }
.et-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 12px; color: var(--tb-muted); } .et-slider span { grid-column: 1 / -1; }
.et-slider input { width: 100%; accent-color: var(--tb-accent); } .et-slider output { font-weight: 700; color: var(--tb-ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.et-check { font-size: 12.5px; display: flex; gap: 6px; align-items: center; } .et-desc { font-size: 13px; font-weight: 600; }
.et-note { font-size: 12px; color: var(--tb-cand); } .et-ref { font-size: 11px; color: var(--tb-muted); }

/* KPI rail */
.kp-head { display: grid; gap: 2px; margin-bottom: 8px; } .kp-head b { font-size: 14px; }
.kp-seed { display: grid; gap: 6px; padding: 8px 10px; border: 1px dashed var(--tb-line-2); border-radius: 10px; font-size: 12.5px; margin-bottom: 8px; color: var(--tb-ink-2); }
.kp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kp button { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border: 1px solid var(--tb-line); border-left: 4px solid var(--tb-line-2); background: var(--tb-card); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.kp button:hover { border-color: var(--tb-accent); } .kp.is-better button { border-left-color: var(--tb-ok); } .kp.is-worse button { border-left-color: var(--tb-warn); } .kp.is-pending button { background: var(--tb-card-2); }
.kp-label { font-size: 12.5px; font-weight: 600; color: var(--tb-ink-2); } .kp-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .kp.is-pending .kp-value { color: var(--tb-muted); }
.kp-wait { grid-column: 1 / -1; font-size: 11.5px; color: var(--tb-muted); }
.kp-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 999px; background: var(--tb-card-2); border: 1px solid var(--tb-line); margin: 3px 0 1px; }
.kp-tick { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; transform: translateX(-1px); } .kp-tick.site { background: var(--tb-accent); } .kp-tick.all { background: var(--tb-muted); } .kp-tick.ref { background: var(--tb-cand); }
.kp-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 999px; background: var(--tb-ink); border: 2px solid var(--tb-card); transform: translate(-6px, -50%); }
.kp-refs { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--tb-muted); font-variant-numeric: tabular-nums; } .kp-refs span:first-child { color: var(--tb-accent); } .kp-refs em { font-style: normal; color: var(--tb-muted); }
.kp-cmp { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; } .kp.is-better .kp-cmp { color: var(--tb-ok); } .kp.is-worse .kp-cmp { color: var(--tb-warn); }
.kp-foot { margin-top: 10px; }
.tb-refrow { grid-template-columns: 1fr; } .tb-refrow input[type=text] { width: 100%; } .tb-params h4 { margin: 8px 0 0; font-size: 12.5px; color: var(--tb-ink-2); }
.tb-dh { margin: 10px 0 4px; font-size: 13px; }
@media (max-width: 860px) { .st-fields { grid-template-columns: 1fr; } .st-cue { flex-wrap: wrap; } .tb-row { grid-template-columns: 1fr; } .tb-why, .tb-msg { grid-column: 1; } }
/* polish after the first screenshot review */
.tb-row { align-content: start; }
.tb-row.is-compact .tb-miss { border-color: transparent; background: transparent; padding-left: 4px; padding-right: 2px; width: auto; }
.tb-row.is-compact:hover .tb-miss, .tb-row.is-compact .tb-miss:focus { border-color: var(--tb-line-2); }
.tb-toast { bottom: 86px; }
.st-cue-label { display: grid; gap: 1px; text-align: center; } .st-cue-label small { font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 600; opacity: .9; }
/* carry-over and refused entries */
.st-carried { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 9px; background: var(--tb-warn-soft); color: var(--tb-ink-2); font-size: 12.5px; border: 1px dashed var(--tb-warn); }
.tb-rejected { border: 1px solid var(--tb-hard); }
.tb-ctl input[aria-invalid=true] { border-color: var(--tb-hard) !important; background: var(--tb-hard-soft); }
.st-report-wrap { margin-top: 14px; display: grid; gap: 8px; }
.st-report { border: 1px solid var(--tb-line); border-radius: 12px; padding: 10px 14px; background: var(--tb-card-2); font-size: 13px; }
.st-report h5 { margin: 10px 0 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-muted); } .st-report h5:first-child { margin-top: 0; }
.st-report ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
/* device list */
.tb-devname { display: grid; gap: 3px; width: 100%; } .tb-devname input { min-width: 0 !important; width: 100%; }
.tb-devtag { font-size: 11.5px; color: var(--tb-ink-2); } .tb-devtag em { font-style: normal; color: var(--tb-muted); } .tb-devtag.is-free { color: var(--tb-warn); }
.st-reuse { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--tb-muted); }
.tb-chip-btn { border: 1px dashed var(--tb-accent); background: var(--tb-accent-soft); color: var(--tb-ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.st-suggest { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: var(--tb-info-soft); color: var(--tb-ink-2); font-size: 12.5px; }
.st-scan { display: grid; gap: 4px; } .st-scan input { padding: 6px 9px; border: 1px dashed var(--tb-accent); border-radius: var(--tb-r-sm); background: var(--tb-card); font-family: var(--tb-mono); font-size: 12.5px; }
.st-scaninfo { font-size: 12px; color: var(--tb-ink-2); font-variant-numeric: tabular-nums; } .st-scaninfo em { font-style: normal; color: var(--tb-muted); }

/* v0.2: material list, imported fields, region findings */
.tb-badge.imp { color: var(--tb-info); border-color: var(--tb-info); margin-left: 4px; }
.tb-cardio, .tb-pill.is-cardio { color: var(--tb-cardio); }
.tb-pill { margin-left: 4px; }
.tb-pill.is-muted { background: transparent; border: 1px dashed var(--tb-line-2); color: var(--tb-muted); }
.tb-link { border: 0; background: none; color: var(--tb-accent); font-size: 12px; cursor: pointer; padding: 0 4px; text-decoration: underline; text-underline-offset: 2px; }
.st-subhead { margin: 10px 0 2px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tb-muted); }
.st-famchips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-devlist .st-scan input { width: 100%; box-sizing: border-box; }
.st-devcard { gap: 6px; }
.st-more > summary { cursor: pointer; font-size: 12px; color: var(--tb-muted); padding: 2px 0; }
.st-regions { font-size: 12.5px; color: var(--tb-ink-2); } .st-regions > span { color: var(--tb-muted); }
.tb-chip-btn small { color: var(--tb-muted); margin-left: 4px; }

/* ---------------------------------------------------------------- hosted test: bar, Rapportera, login, board, tasks, accounts */
.ts-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px; border-bottom: 1px solid var(--tb-line); background: var(--tb-card); font-size: 13px; }
.ts-links { display: flex; gap: 4px; flex-wrap: wrap; } .ts-links a { color: var(--tb-ink-2); text-decoration: none; padding: 4px 10px; border-radius: 999px; }
.ts-links a:hover { background: var(--tb-accent-soft); } .ts-links a[aria-current=page] { background: var(--tb-accent); color: var(--tb-accent-ink); font-weight: 600; }
.ts-user { display: flex; gap: 8px; align-items: center; color: var(--tb-ink-2); }
.ts-report { position: fixed; left: 16px; bottom: 16px; z-index: 40; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: #8a3ffc; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ts-report:focus-visible { outline: 3px solid var(--tb-accent); outline-offset: 2px; }
.rp-dialog { width: min(680px, calc(100vw - 32px)); border: 1px solid var(--tb-line); border-radius: 14px; padding: 0; background: var(--tb-card); color: var(--tb-ink); }
.rp-dialog::backdrop { background: rgba(0,0,0,.45); }
.rp-form { display: grid; gap: 10px; padding: 16px; } .rp-form header, .rp-form footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .rp-form footer { justify-content: flex-end; }
.rp-form h2 { margin: 0; font-size: 18px; } .rp-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tb-ink-2); }
.rp-form input, .rp-form select, .rp-form textarea { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-bg); color: var(--tb-ink); }
.rp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .rp-row label, .rp-row select { min-width: 0; } .rp-row select { width: 100%; text-overflow: ellipsis; }
.pg-filters a.tb-btn { text-decoration: none; color: inherit; }
.rp-shotbar { display: flex; gap: 8px; flex-wrap: wrap; } .rp-file { cursor: pointer; }
.rp-shot img { max-width: 100%; max-height: 220px; border: 1px solid var(--tb-line); border-radius: 8px; display: block; margin-bottom: 6px; }
.rp-ctx { font-size: 12px; } .rp-ctx dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; } .rp-ctx dt { color: var(--tb-muted); } .rp-ctx dd { margin: 0; overflow-wrap: anywhere; }
.rp-msg { margin: 0; min-height: 1.2em; color: var(--tb-hard); font-size: 13px; }
.rp-toast { position: fixed; left: 16px; bottom: 70px; z-index: 41; background: var(--tb-ok); color: var(--tb-solid-ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.lg-body, .pg-body { background: var(--tb-bg); color: var(--tb-ink); margin: 0; min-height: 100vh; }
.lg-body { display: grid; place-items: center; padding: 16px; }
.lg-card { width: min(420px, 100%); display: grid; gap: 16px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 16px; padding: 22px; }
.lg-card form { display: grid; gap: 12px; } .lg-card label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tb-ink-2); }
.lg-card input { font: inherit; padding: 9px 11px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-bg); color: var(--tb-ink); }
.lg-msg { color: var(--tb-hard); margin: 0; min-height: 1.2em; } .lg-foot { margin: 0; }
.pg-main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 90px; display: grid; gap: 14px; }
.pg-head h1 { margin: 0 0 4px; font-size: 22px; } .pg-head p { margin: 0; }
.pg-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } .pg-filters label { display: grid; gap: 3px; font-size: 12px; color: var(--tb-muted); }
.pg-filters select, .us-invite input, .us-invite select, .tk-actions input { font: inherit; padding: 6px 8px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); color: var(--tb-ink); }
.fb-layout { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .fb-layout { grid-template-columns: 1fr; } }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fb-item { width: 100%; text-align: left; display: grid; gap: 3px; padding: 9px 11px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-card); color: var(--tb-ink); cursor: pointer; font: inherit; }
.fb-item.is-active { border-color: var(--tb-accent); box-shadow: 0 0 0 2px var(--tb-accent-soft); }
.fb-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; } .fb-title { font-weight: 600; }
.fb-pill { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--tb-accent-soft); color: var(--tb-ink-2); }
.fb-pill.k-bug, .fb-pill.s-blocker { background: var(--tb-hard-soft); color: var(--tb-hard); } .fb-pill.s-major, .fb-pill.k-problem { background: var(--tb-warn-soft); color: var(--tb-warn); }
.fb-pill.st-fixed, .fb-pill.k-praise, .fb-pill.st-answered { background: rgba(30,127,74,.14); color: var(--tb-ok); }
.fb-detail { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; min-width: 0; }
.fb-detail h2 { margin: 0; font-size: 17px; } .fb-detail h3 { margin: 4px 0 0; font-size: 14px; }
.fb-text { margin: 0; white-space: normal; } .fb-shot { max-width: 100%; border: 1px solid var(--tb-line); border-radius: 8px; }
.fb-triage { display: flex; gap: 10px; flex-wrap: wrap; } .fb-triage label { display: grid; gap: 3px; font-size: 12px; color: var(--tb-muted); }
.fb-triage select, .fb-triage input, .fb-comment textarea, .tk-editor textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-bg); color: var(--tb-ink); }
.fb-comments { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .fb-comments p { margin: 2px 0 0; }
.fb-comment { display: grid; gap: 6px; justify-items: start; } .fb-comment textarea { width: 100%; box-sizing: border-box; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-item { background: var(--tb-card); border: 1px solid var(--tb-line); border-left: 4px solid var(--tb-line-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.tk-item.is-done { border-left-color: var(--tb-ok); } .tk-item.is-blocked { border-left-color: var(--tb-hard); } .tk-item.is-skipped { opacity: .7; }
.tk-item header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .tk-title { font-weight: 700; }
.tk-steps { margin: 0; padding-left: 20px; } .tk-expected { margin: 0; font-size: 13px; color: var(--tb-ink-2); }
.tk-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tk-actions input { flex: 1 1 200px; min-width: 0; }
.tk-editor textarea { width: 100%; box-sizing: border-box; font-family: var(--tb-mono); font-size: 12px; }
.us-invite { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .us-invite label { display: grid; gap: 3px; font-size: 12px; color: var(--tb-muted); }
.us-link { background: var(--tb-info-soft); border-radius: 10px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .us-link p { margin: 0; flex-basis: 100%; }
.us-link input { flex: 1 1 320px; min-width: 0; font-family: var(--tb-mono); font-size: 12px; padding: 6px 8px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); color: var(--tb-ink); }
.us-table { width: 100%; border-collapse: collapse; font-size: 13px; } .us-table th, .us-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tb-line); }
@media (max-width: 700px) { .us-table thead { display: none; } .us-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; border-bottom: 1px solid var(--tb-line); } .us-table td { border: 0; padding: 2px 8px; } }

/* ---------------------------------------------------------------- registrar view (UX review 2026-10-09) */
/* Developer chrome only with "Testverktyg" (U-07) */
body:not(.show-tools) .tb-devonly { display: none !important; }
.tb-tools-toggle { align-self: center; padding: 4px 8px; border: 1px dashed var(--tb-line-2); border-radius: 8px; }
/* requirements are neutral ("kvar"), only contradictions are red (U-06) */
.tb-msg.todo { background: var(--tb-card-2); color: var(--tb-ink-2); border: 1px solid var(--tb-line); }
.tb-msg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .tb-msg-act { margin-left: auto; display: inline-flex; gap: 6px; }
.tb-msg .tb-code { font-family: var(--tb-mono); font-size: 11px; }
.tb-kvar { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tb-accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; line-height: 16px; }
.tb-issue.todo .tb-sev { background: var(--tb-card-2); color: var(--tb-ink-2); }
.tb-link { border: 0; background: transparent; color: var(--tb-accent); text-decoration: underline; cursor: pointer; padding: 2px 4px; font: inherit; font-size: 12.5px; }
/* help text next to the label, works on touch (U-14) */
.tb-info { grid-column: 1; justify-self: start; width: 24px; height: 24px; margin-top: 2px; border-radius: 999px; border: 1px solid var(--tb-line-2); background: var(--tb-card); color: var(--tb-accent); font: 700 12px/1 Georgia, serif; font-style: italic; cursor: pointer; }
.tb-row { position: relative; } .tb-row > .tb-info { position: absolute; right: 8px; top: 8px; }
.tb-hint { grid-column: 1 / -1; font-size: 12.5px; color: var(--tb-ink-2); background: var(--tb-info-soft); border-radius: 8px; padding: 6px 10px; }
/* honest chapter list (U-05) */
.st-nav-sum { margin: 0 0 6px; font-size: 12px; color: var(--tb-muted); }
.st-nav .st-state { display: block; font-size: 11px; font-weight: 400; color: var(--tb-muted); }
.st-nav .is-empty .st-num { border-style: dashed; }
.tb-pill.is-live { background: var(--tb-ok); color: var(--tb-solid-ink); }
/* real-time capture (B13) */
.st-live { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; background: var(--tb-accent-soft); font-size: 13px; }
.st-live .tb-btn { min-height: 36px; }
/* touch targets (iPad) */
@media (pointer: coarse) { .tb-mini, .tb-info { min-width: 36px; min-height: 36px; } .tb-radio, .tb-seg button, .tb-btn-sm { min-height: 40px; } }
/* phone width: one column, nothing wider than the screen */
@media (max-width: 700px) {
  .tb-app { padding: 8px; } .tb-topbar, .tb-controls { flex-direction: column; align-items: stretch; } .tb-brand h1 { font-size: 18px; }
  .tb-layout { grid-template-columns: minmax(0, 1fr); } .tb-left, .tb-center, .tb-right { min-width: 0; }
  .tb-row { grid-template-columns: minmax(0, 1fr); } .tb-row > .tb-info { right: 4px; } .tb-time, .tb-unit, .tb-devname { flex-wrap: wrap; }
  .tb-radios, .tb-multi, .tb-seg { flex-wrap: wrap; } .st-embed { height: 520px; } .st-cue { flex-wrap: wrap; }
  input, select, textarea { max-width: 100%; } .tb-tabs { overflow-x: auto; }
}
/* narrow screens: side panels scroll with the page (sticky panels covered the form); the form comes first on a phone */
@media (max-width: 860px) { .tb-left, .tb-right { position: static; max-height: none; overflow: visible; } }
@media (max-width: 700px) { .tb-center { order: 1; } .tb-left { order: 2; } .tb-right { order: 3; } .tb-cases { max-height: 240px; overflow: auto; } }

/* ---------------------------------------------------------------- guided view (owner 2026-10-09): one step, the primary details, calm */
.gd-head, .gd-foot { display: none; }
body.view-guide .gd-head { display: grid; gap: 8px; padding: 14px 16px 10px; margin-bottom: 10px; border-radius: 14px; background: var(--tb-card); border: 1px solid var(--tb-line); }
body.view-guide .gd-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } body.view-guide .gd-top h2 { margin: 0; font-size: 22px; flex: 1; }
.gd-step { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tb-accent); } .gd-time { font-size: 12.5px; color: var(--tb-muted); font-variant-numeric: tabular-nums; }
.gd-progress { height: 6px; border-radius: 999px; background: var(--tb-card-2); overflow: hidden; } .gd-progress i { display: block; height: 100%; background: var(--tb-ok); border-radius: 999px; transition: width .3s; }
.gd-cue { margin: 0; color: var(--tb-ink-2); font-size: 14px; }
body.view-guide .gd-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0 24px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--tb-bg) 30%); }
.gd-foot .tb-btn-primary { min-height: 44px; padding: 0 18px; font-size: 15px; } .gd-left { font-size: 13px; color: var(--tb-muted); } .gd-left.is-bad { color: var(--tb-hard); } .gd-ok { font-size: 13px; color: var(--tb-ok); font-weight: 700; }
body.view-guide .st-chapter > .st-head { display: none; } body.view-guide .st-chapter { border: 0; background: transparent; padding: 0; }
body.view-guide .tb-banner { font-size: 11.5px; padding: 4px 10px; }
body.view-guide:not(.show-tools) .tb-tabs { display: none; }
body.view-guide .st-fields .tb-row { padding: 10px 8px; }
.st-more-fields { margin-top: 8px; } .st-more-fields > summary { cursor: pointer; font-size: 13px; color: var(--tb-accent); padding: 6px 4px; }
/* KPI rail: one comparison group, chosen indicators */
.kp-head { display: grid; gap: 6px; margin-bottom: 8px; } .kp-groups { justify-self: start; }
.kp-pick { margin-top: 8px; font-size: 12.5px; } .kp-pick > summary { cursor: pointer; color: var(--tb-accent); } .kp-pick-list { display: grid; gap: 4px; padding: 6px 2px; } .kp-pick-list label { display: flex; gap: 6px; align-items: center; }
.kp-cmp { font-weight: 700; } .kp.is-better .kp-cmp { color: var(--tb-ok); } .kp.is-worse .kp-cmp { color: var(--tb-warn); }

/* ---------------------------------------------------------------- front-end review 2026-10-12 (FE-02/03/08/09/20/21/22/23, P-3, V07) */
/* a visible keyboard focus ring (FE-08): 2 px in the accent colour; the soft ring stays for pointer focus */
.tb-ctl input:focus-visible, .tb-ctl select:focus-visible, .tb-ctl textarea:focus-visible, .st-scan input:focus-visible, .tb-pick-q:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 1px; border-color: var(--tb-accent); }
.tb-btn:focus-visible, .tb-seg button:focus-visible, .et-chip:focus-visible, .tb-chip-btn:focus-visible, .tb-link:focus-visible, .tb-info:focus-visible, .tb-mini:focus-visible, .st-x:focus-visible, .st-nav button:focus-visible, .kp button:focus-visible, .tb-cases button:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tb-radio:focus-within, .tb-chip:focus-within { outline: 2px solid var(--tb-accent); outline-offset: 1px; }
/* the conflict banner is sticky and impossible to miss (FE-02); the guide footer repeats it */
.tb-conflict { position: sticky; top: 6px; z-index: 30; flex-wrap: wrap; box-shadow: var(--tb-shadow); }
.tb-conflict > span:first-child { flex: 1 1 320px; }
.gd-conflict { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--tb-hard); background: var(--tb-hard-soft); border: 1px solid var(--tb-hard); border-radius: 9px; padding: 6px 10px; }
/* refusals: one sentence, the rest folded (FE-20) */
.tb-rej-more { flex-basis: 100%; font-size: 12px; } .tb-rej-more > summary { cursor: pointer; } .tb-rej-more div { padding: 2px 0 0 12px; }
/* V3-02: the contradiction line in the procedure step */
.st-contra { margin-bottom: 8px; grid-column: auto; }
/* searchable grouped picker for long code lists (P-3) */
.tb-pick { display: grid; gap: 6px; width: 100%; } .tb-pick-sel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb-pick-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--tb-accent); color: var(--tb-accent-ink); font-size: 12.5px; font-weight: 600; }
.tb-pick-x { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 999px; } .tb-pick-x:hover { background: rgba(255,255,255,.25); }
.tb-pick-q { padding: 6px 9px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); max-width: 360px; }
.tb-pick-list { display: grid; gap: 6px; max-height: 320px; overflow: auto; padding: 4px 2px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-card-2); }
.tb-pick-group { padding: 4px 6px; } .tb-pick-group h5 { margin: 2px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tb-muted); }
.tb-pick-other { display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--tb-ink-2); } .tb-pick-other input { padding: 6px 9px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); }
/* "Föreslå förklaring" (V07) in the hint popover; the ⓘ of a field without a hint is dashed */
.tb-info.is-empty { border-style: dashed; color: var(--tb-muted); }
.tb-hint { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .tb-suggest { margin-left: auto; font-size: 12px; }
.tb-hint-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; } .tb-hint-form input { flex: 1 1 220px; padding: 5px 8px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); }
/* KPI rail: the index procedure note */
.kp-index { display: block; margin-top: 2px; }
/* phone width (FE-09): the sticky footer keeps clear of the fixed "Rapportera" pill, "Nästa" comes first and full width */
@media (max-width: 700px) {
  body.view-guide .gd-foot { padding-bottom: 72px; gap: 8px; }
  body.view-guide .gd-foot .tb-btn-primary[data-role=next-step] { order: -1; flex: 1 1 100%; }
  body.view-guide .gd-foot .gd-left, body.view-guide .gd-foot .gd-ok { flex: 1 1 auto; }
}
/* Testverktyg shows variable names and rule codes in labels: let them wrap so a phone never scrolls sideways */
.tb-row, .tb-label { min-width: 0; } .tb-label code, .tb-label .tb-meta { overflow-wrap: anywhere; word-break: break-word; }
.tb-ctl { min-width: 0; } .tb-ctl select { max-width: 100%; } /* a long option label never widens the row */
.tb-review-links a { color: var(--tb-accent); font-weight: 600; text-decoration: none; } .tb-review-links a:hover { text-decoration: underline; }
/* language switch (Svenska | English, 2026-10-12): in the shell bar, right next to the user; on the login card, top right */
.ts-bar .tb-lang { margin-left: auto; padding: 2px; flex: 0 0 auto; } .ts-bar .tb-lang button { padding: 3px 10px; font-size: 12px; }
.lg-lang { justify-self: end; } .lg-lang .tb-lang button { padding: 3px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- patient list, registry KPIs, the fill-the-gaps bar (owner 2026-10-12) */
.st-cue[data-kind=gap] { background: #8a3ffc; color: #fff; } .st-cue[data-kind=gap] a.tb-btn, .st-cue[data-kind=done] a.tb-btn { text-decoration: none; }
.st-cue .tb-btn:not(.tb-btn-primary) { background: transparent; color: inherit; border-color: currentColor; }
.pl-main { max-width: 1100px; }
.pl-summary { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 13.5px; }
.pl-sum { padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 12.5px; background: var(--tb-accent-soft); }
.pl-sum.s-open { background: var(--tb-warn-soft); color: var(--tb-warn); } .pl-sum.s-ready { background: rgba(30,127,74,.14); color: var(--tb-ok-ink); } .pl-sum.s-completed { color: var(--tb-ink-2); }
.pl-filters input[type=search] { font: inherit; padding: 6px 8px; border: 1px solid var(--tb-line-2); border-radius: var(--tb-r-sm); background: var(--tb-card); color: var(--tb-ink); min-width: 220px; }
.pl-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-item { background: var(--tb-card); border: 1px solid var(--tb-line); border-left: 5px solid var(--tb-line-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.pl-item.is-fix { border-left-color: var(--tb-hard); } .pl-item.is-open { border-left-color: var(--tb-warn); } .pl-item.is-kpi { border-left-color: #8a3ffc; }
.pl-item.is-ready { border-left-color: var(--tb-ok); } .pl-item.is-completed { border-left-style: dashed; } /* no opacity: the text stays readable (A11) */
.pl-head { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.pl-who { display: grid; gap: 1px; min-width: 0; } .pl-name { font-weight: 700; font-size: 15px; color: var(--tb-ink); text-decoration: none; } .pl-name:hover { text-decoration: underline; }
.pl-id { font-size: 12.5px; color: var(--tb-ink-2); font-variant-numeric: tabular-nums; }
.pl-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pl-right a.tb-btn { text-decoration: none; }
.pl-pill { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--tb-accent-soft); color: var(--tb-ink-2); }
.pl-pill.s-fix { background: var(--tb-hard-soft); color: var(--tb-hard); } .pl-pill.s-open { background: var(--tb-warn-soft); color: var(--tb-warn); } .pl-pill.s-kpi { background: rgba(138,63,252,.14); color: var(--tb-cardio); }
.pl-pill.s-sent { background: transparent; border: 1px solid var(--tb-ok); color: var(--tb-ok); } .pl-pill.s-unsent { background: transparent; border: 1px dashed var(--tb-line-2); color: var(--tb-ink-2); } /* B3 */
.pl-pill.s-ready { background: rgba(30,127,74,.14); color: var(--tb-ok-ink); }
.pl-gaps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-gap { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--tb-line-2); background: var(--tb-bg); color: var(--tb-ink); text-decoration: none; font-size: 13px; font-weight: 600; min-height: 44px; box-sizing: border-box; align-content: center; }
.pl-gap small { font-weight: 400; font-size: 11.5px; color: var(--tb-muted); }
.pl-gap.t-fix { border-color: var(--tb-hard); background: var(--tb-hard-soft); } .pl-gap.t-need { border-color: var(--tb-warn); background: var(--tb-warn-soft); } .pl-gap.t-kpi { border-color: #8a3ffc; }
.pl-gap:hover, .pl-gap:focus-visible { box-shadow: 0 0 0 2px var(--tb-accent); outline: none; }
.pl-empty { padding: 18px; text-align: center; color: var(--tb-muted); background: var(--tb-card); border: 1px dashed var(--tb-line-2); border-radius: 12px; }
.kp-reg .kp-card { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border: 1px solid var(--tb-line); border-left: 4px solid var(--tb-line-2); border-radius: 10px; padding: 8px 10px; background: var(--tb-card); color: var(--tb-ink); text-decoration: none; }
.kp-reg.is-better .kp-card { border-left-color: var(--tb-ok); } .kp-reg.is-worse .kp-card { border-left-color: var(--tb-warn); } .kp-reg .kp-card:hover { border-color: var(--tb-accent); }
.kp-link { display: block; padding: 2px 4px; color: var(--tb-accent); } .kp-links { font-size: 12.5px; margin: 10px 0 0; }
.kq-main { max-width: 1000px; } .kq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.kq { background: var(--tb-card); border: 1px solid var(--tb-line); border-top: 4px solid var(--tb-line-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.kq.is-better { border-top-color: var(--tb-ok); } .kq.is-worse { border-top-color: var(--tb-warn); } .kq.is-flash { box-shadow: 0 0 0 3px var(--tb-accent); }
.kq header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .kq h2 { margin: 0; font-size: 15px; } .kq-better { font-size: 11.5px; color: var(--tb-muted); }
.kq-main { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.kq-own, .kq-all { display: grid; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .kq-all { font-size: 16px; color: var(--tb-ink-2); }
.kq-own small, .kq-all small { font-size: 11.5px; font-weight: 500; color: var(--tb-muted); } .kq-cmp { font-size: 12.5px; font-weight: 700; } .kq.is-better .kq-cmp { color: var(--tb-ok); } .kq.is-worse .kq-cmp { color: var(--tb-warn); }
.kq-centres { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kq-centres li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.kq-centres li.is-own { font-weight: 700; } .kq-c em { font-style: normal; color: var(--tb-accent); font-weight: 600; }
.kq-bar { height: 10px; border-radius: 999px; background: var(--tb-card-2); border: 1px solid var(--tb-line); overflow: hidden; } .kq-bar i { display: block; height: 100%; background: var(--tb-ink-2); }
.kq-centres li.is-own .kq-bar i { background: var(--tb-accent); } .kq-v { font-variant-numeric: tabular-nums; white-space: nowrap; } .kq-v em { font-style: normal; color: var(--tb-muted); font-size: 11px; }
.kq-cover { margin: 0; font-size: 12.5px; color: var(--tb-ink-2); } .kq-cover a { color: var(--tb-accent); font-weight: 600; }
.pl-right a.tb-btn:not(.tb-btn-primary) { color: var(--tb-ink); } .pl-more { border-style: dashed; }
.kp-links a, a.kp-link { color: var(--tb-accent); font-weight: 600; }

/* ---------------------------------------------------------------- timeline strip (owner 2026-10-12): one icon per registered
   moment, always in view above the case; hollow = time still empty, red = earlier than the moment before it */
.tl-strip { position: sticky; top: 0; z-index: 20; margin: 0 0 12px; box-shadow: 0 -8px 0 var(--tb-bg), var(--tb-shadow); padding: 6px 8px 4px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); box-shadow: var(--tb-shadow); overflow-x: auto; scrollbar-width: thin; }
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; min-width: max-content; }
.tl-pt button { display: grid; justify-items: center; gap: 1px; min-width: 62px; padding: 4px 6px; border: 0; background: transparent; color: var(--tb-ink); border-radius: 10px; cursor: pointer; font: inherit; }
.tl-pt button:hover { background: var(--tb-accent-soft); }
.tl-pt button:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 1px; }
.tl-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tb-accent); color: var(--tb-accent-ink); }
.tl-pt.is-open .tl-ico { background: transparent; color: var(--tb-muted); border: 2px dashed var(--tb-line-2); }
.tl-pt.is-bad .tl-ico { background: var(--tb-hard); color: var(--tb-solid-ink); }
.tl-pt.is-here .tl-ico { box-shadow: 0 0 0 3px var(--tb-accent-soft), 0 0 0 5px var(--tb-accent); }
.tl-lbl { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tl-sub { font-size: 10.5px; color: var(--tb-muted); white-space: nowrap; }
.tl-time { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--tb-ink-2); }
.tl-pt.is-open .tl-time { color: var(--tb-muted); font-style: italic; }
.tl-pt.is-bad .tl-time, .tl-gap.is-bad { color: var(--tb-hard); font-weight: 700; }
.tl-gap { flex: 0 0 auto; min-width: 36px; height: 20px; margin-top: 4px; padding: 0 3px; text-align: center; font-size: 10.5px; line-height: 16px; color: var(--tb-muted); border-bottom: 2px solid var(--tb-line-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .tl-pt button { min-width: 54px; } }

/* ---------------------------------------------------------------- DSA and after-treatment layers of the vessel map (2026-10-12) */
.st-layer { margin-top: 12px; display: grid; gap: 8px; }
.st-layer > .tb-btn { justify-self: start; white-space: normal; text-align: left; }
.st-layer .st-embed iframe { width: 100%; min-height: 560px; border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); background: var(--tb-card); }
.st-layer-note { margin: 0 0 8px; }

/* the passes for a nurse (owner 2026-10-13): read only, registered by the doctor */
.st-readonly { margin: 6px 0 0; padding-left: 18px; color: var(--tb-ink-2); } .st-readonly li { margin: 2px 0; }
.st-submitted { margin: 0 0 8px; }

/* ---------------------------------------------------------------- blue/red team fixes 2026-10-13 (fix agent F3: story view and layout) */
/* A12 (BP-03, RE-13): between 861 and 1280 px the KPI panel flows below the story in the middle column, and the step list keeps
   the whole left column (its own scroll), so the panel never lies over the steps (the last step was unreachable on an iPad) */
@media (min-width: 861px) and (max-width: 1280px) {
  .tb-left { grid-row: 1 / span 2; }
  .tb-right { grid-column: 2; position: static; max-height: none; overflow: visible; }
}
/* A12 (RU-25): "Rapportera" floats at the bottom centre, where no navigation is (the step list is on the left, "← Föregående"
   and "Nästa" at the ends of the footer); the page and the guide's footer keep a free strip for it, so nothing ends under it */
.ts-report { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; }
.tb-app { padding-bottom: 72px; }
body.view-guide .gd-foot { padding-bottom: 60px; }
.st-cue { bottom: 64px; }
.tb-toast { bottom: 64px; }
/* a phone has no free place for a floating pill (the full-width "Nästa" and a header of three rows): there it sits at the end of the page */
@media (max-width: 700px) {
  .ts-report { position: static; transform: none; display: block; margin: 0 auto 24px; }
  .tb-app { padding-bottom: 16px; } body.view-guide .gd-foot { padding-bottom: 16px; } .st-cue { bottom: 12px; }
}
/* A13 (RE-11, RU-09): a delete "×" is a 44 px target on a touch screen */
@media (pointer: coarse) { .st-x { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; } }
/* A3: the doctor's records are a read-only summary for the nurse; the vessel maps are the doctor's (they are hidden for her) */
.st-chapter:has(> .st-body > [data-nurse-view]) > .st-embed, .st-chapter:has(> .st-body > [data-nurse-view]) > .st-layer { display: none !important; }
.st-ro { display: grid; gap: 4px; margin: 6px 0; }
.st-ro .st-readonly { margin: 0; }
.st-role-note { color: var(--tb-muted); }
/* A1: one step that cannot be shown says so calmly */
.st-render-error { grid-column: auto; margin: 8px 0; }
/* A4: a pass's target, asked or carried */
.st-target-note { margin: 4px 0; }
/* A14 (RU-36): a completed case reads as locked: a note on each step, and locked controls look locked (no opacity: the text stays readable) */
.st-locked { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--tb-info-soft); color: var(--tb-ink-2); font-size: 13px; font-weight: 600; }
.st-story .tb-ctl :is(input, select, textarea):disabled { background: var(--tb-card-2); border-style: dashed; color: var(--tb-ink-2); cursor: not-allowed; }
.st-story .tb-radio:has(input:disabled), .st-story .tb-seg button:disabled, .st-story .et-chip:disabled { border-style: dashed; cursor: not-allowed; }
/* B5 (phase 2): one control height on a touch screen, 44 px (RU-24: with gloves, 128 of 151 controls were smaller). A fine pointer keeps today's sizes. */
:root { --tb-control-h: 44px; }
@media (pointer: coarse) {
  /* a floor, not a size: every control (and every link that acts as one) is at least 44 px high, whatever rule sized it before */
  :is(button, select, summary, textarea, input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=file]), .tb-btn, .tb-radio, .tb-chip, .tb-check, .ts-links a, a.pl-gap) { min-height: var(--tb-control-h) !important; }
  .tb-mini, .tb-info, .st-x, .tb-pick-x, .tb-clear, .tb-seg button { min-width: var(--tb-control-h) !important; }
  .tb-mini, .tb-info, .st-x, .tb-pick-x, .tb-clear { display: inline-grid; place-items: center; }
  .tb-btn, .tb-chip-btn, .tb-link, .ts-links a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .tb-row > .tb-info { top: 2px; }
  summary { padding-top: 10px; padding-bottom: 10px; }
}
/* B3 (phase 2): the hand-over, a chip on each step and a section in the doctor's review */
.st-handover-row { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.st-handover { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--tb-line-2); background: var(--tb-card); color: var(--tb-ink-2); }
.st-handover.is-sent { border-color: var(--tb-ok); color: var(--tb-ok); }
.st-handover.is-unsent { border-style: dashed; }
.st-angio-sum { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-card-2); }
.st-angio-sum > summary { cursor: pointer; }
.st-rofields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin: 6px 0 0; }
.st-rofields > div { display: grid; gap: 0; } .st-rofields dt { font-size: 12px; color: var(--tb-muted); } .st-rofields dd { margin: 0; color: var(--tb-ink); overflow-wrap: anywhere; }
/* B1 (phase 2): "Läkarens del" on the nurse's path, each of the doctor's steps collapsed and read only */
.st-docpart { border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-card); margin: 6px 0; }
.st-docpart > summary { cursor: pointer; padding: 8px 12px; } .st-docpart > summary .tb-meta { margin-left: 6px; }
.st-docpart-body { padding: 0 12px 10px; }
.st-send-note { margin: 4px 0 8px; }
/* B7 (phase 2): complications asked plainly */
.st-ae { display: grid; gap: 6px; padding: 8px; margin-bottom: 6px; }
.st-ae .tb-label { padding-top: 0; }
/* B14 (phase 2): "Ja" to drugs opens the drug buttons; nothing is stored until a drug is picked */
.st-drugs-pick { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 10px; border-radius: 9px; background: var(--tb-accent-soft); color: var(--tb-ink); font-size: 13px; }
.st-drugs .tb-seg button[aria-expanded="true"] { background: var(--tb-accent); color: var(--tb-accent-ink); }

/* ---------------------------------------------------------------- round 2 (fix agent P3, 2026-10-13): registration web */
/* RA-05 (red-admin): a Rapportera screenshot never shows the patient's identity: every [data-sensitive] element is painted over while
   the frame is taken (testshell.js also draws an opaque box over each one on the image) */
body.rp-masking [data-sensitive] { background: #000 !important; color: transparent !important; text-shadow: none !important; border-color: #000 !important; box-shadow: none !important; }
body.rp-masking [data-sensitive] * { visibility: hidden !important; }
body.rp-masking [data-sensitive]::placeholder { color: transparent !important; }
.rp-masked { margin: 4px 0 0; } .rp-unmasked { margin: 6px 0 0; }
/* BP2-01 (blue-pro2): the send step is amber "Ej skickad" when the angiojournal is complete and not sent, never a green tick */
.st-nav .is-ready .st-num { border-color: var(--tb-warn); color: var(--tb-warn); } .st-nav .is-ready .st-state { color: var(--tb-warn); font-weight: 700; }
.gd-steps li.is-ready small { color: var(--tb-warn); font-weight: 700; }
.tb-pill.ready { background: var(--tb-warn); color: var(--tb-solid-ink); }
/* BP2-09 / BN2-03: "önskas" is quieter than "obligatorisk"; its "Ej dokumenterat" sits beside it */
.tb-kvar.is-wanted { border-style: dashed; color: var(--tb-ink-2); }
.tb-row.is-wanted .tb-label::before { display: none; }
.tb-miss-quick { font-size: 12.5px; margin-left: 4px; }
/* BP2-05: another person's save of the open case, said at once and taken in with one tap */
.tb-remote { position: sticky; top: 6px; z-index: 30; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--tb-info); background: var(--tb-info-soft); color: var(--tb-ink); font-size: 13px; font-weight: 600; box-shadow: var(--tb-shadow); margin: 6px 0; }
.tb-remote-what { font-weight: 500; color: var(--tb-ink-2); }
.pt-changed, .pl-changed { color: var(--tb-ink-2); font-size: 13px; }
.pl-changed { display: block; }
.tb-audit li { margin: 0 0 6px; } .tb-audit time { font-variant-numeric: tabular-nums; color: var(--tb-ink-2); } .tb-audit-what { color: var(--tb-ink-2); font-size: 12.5px; }
/* BN2-02: the angiojournal registered by the doctor alone */
.st-handover.is-own { border-color: var(--tb-info); }
/* BN2-07: the nurse's own summary on her send step; the full report folded */
.st-nurse-report { margin-top: 10px; }
/* BN2-06: "Skapa patient" says it is working */
.np-form[aria-busy="true"] .np-input { opacity: 1; background: var(--tb-card-2); }
.tb-btn.is-busy { cursor: progress; }
/* the patient list: the name and the number side by side, masked together (RA-05) */
.pl-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
/* RA-21 (red-admin): Rapportera in a band of its own at the foot of the window: it never lies over content. The pages keep the band's
   height free below their last row (.tb-app 72 px, .pg-main 90 px, the guide's footer strip 60 px), and the sticky side columns end
   above it. On a phone the band is the last thing on the page (no floating pill there). */
.ts-report-band { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 40; display: flex; align-items: center; justify-content: center; background: var(--tb-bg); box-shadow: 0 -1px 0 var(--tb-line); }
.ts-report-band .ts-report { position: static; transform: none; left: auto; bottom: auto; margin: 0; }
@media (min-width: 861px) { .tb-left { max-height: calc(100vh - 76px); } }
@media (min-width: 1281px) { .tb-right { max-height: calc(100vh - 76px); } }
@media (max-width: 700px) { .ts-report-band { position: static; height: auto; background: none; box-shadow: none; padding: 0 0 24px; } }
@media print { .ts-report-band { display: none !important; } }
/* owner 2026-10-13: a record of a code the profile leaves dormant (the 90-day mRS in SE-1): read only, from Riksstroke */
.st-dormant { padding: 10px 12px; color: var(--tb-ink-2); font-size: 14px; }