/* responsive.css: shared phone and tablet fixes for every page (loaded last, after each page's own styles) */

/* Navigation wraps whole links, never single letters */
header nav { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
header nav a, header nav button { white-space: nowrap; }

img, svg, video, canvas { max-width: 100%; }
input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Form grids: a date field's built-in width must not push its column past the card */
.row3 > *, .connect > *, .form .row > * { min-width: 0; }
pre, code { overflow-wrap: anywhere; }
table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Table cells break between words, never inside them: a narrow screen scrolls the table sideways
   instead of squeezing each column to one letter */
th, td { overflow-wrap: break-word !important; word-break: normal !important; }
th { white-space: nowrap; }

/* Flex and grid children may shrink below their content width (default min-width: auto would push
   the cockpit wider than the screen) */
.cockpit-workspace > *, .cockpit-center-stage > *, .summary-hero-card > *, .comparison-cards-row > *,
.summary-buttons-row > *, .kpi-ribbon-compact > *, .comparison-grid > *, .modal-overlay > * { min-width: 0; }

/* Comfortable touch targets */
@media (pointer: coarse) {
  button, select, .btn, header nav a { min-height: 40px; }
  button { min-width: 40px; }
  header nav a { display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  /* 16px text stops iPhone and iPad Safari zooming in when a field is tapped */
  input, select, textarea { font-size: 16px !important; }
}

/* Cockpit view tabs: before, the last tabs ran off the screen and could not be reached at any width.
   Wide screens: one row that scrolls sideways. One-column layout (below 1150px): the tabs wrap. */
.stage-view-tabs { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
.stage-tab-btn { flex-shrink: 0; }
.stage-tab-btn .tab-pill { white-space: nowrap; }
/* Case cards keep their height; the list scrolls rather than squashing them */
.case-queue-list > * { flex-shrink: 0; }
/* Stat cards: long values wrap inside the card instead of being cut off */
.kpi-val-row { flex-wrap: wrap; }
.kpi-val-row > *, .summary-hero-left > * { min-width: 0; overflow-wrap: anywhere; }

/* The four status cards hold words, not numbers: a smaller face keeps them inside their cards */
.kpi-ribbon-compact .kpi-number { font-size: 1.1rem; line-height: 1.2; }

/* ── Cockpit app shell (screens wider than 1150 px, any height) ────────────────────────────────
   The top bar stays where it is and the page itself never scrolls; each panel scrolls on its own:
   1 the case list (its title, search and filters stay), 2 the centre view (its tabs stay), 3 the
   safety clock and audit trail. Scrolling inside a panel never moves the rest of the screen. */
@media (min-width: 1151px) {
  /* Only the cockpit page locks the page scroll; the other pages share this file and must scroll */
  html:has(.cockpit-workspace), body:has(.cockpit-workspace) { height: 100% !important; overflow: hidden !important; }
  body:has(.cockpit-workspace) { height: 100vh !important; height: 100dvh !important; display: flex; flex-direction: column; }
  .top-chrome { position: relative; flex: 0 0 auto; }
  .cockpit-workspace { flex: 1 1 auto; min-height: 0 !important; height: auto !important;
                       grid-template-rows: minmax(0, 1fr); align-items: start; overflow: hidden; }
  .cockpit-workspace > * { min-height: 0; max-height: 100%; }
  /* Panel 1 */
  .cockpit-triage-panel { overflow: hidden; }
  .case-queue-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* The floating theme/language dock would cover the bottom of panel 3; the top bar has both controls */
  .floating-theme-switch-dock { display: none !important; }
  /* Panel 2: one scroll for the view and the status cards; the view tabs stay at its top */
  .cockpit-center-stage { overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain;
                          scrollbar-gutter: stable; }
  .cockpit-center-stage > .stage-view-tabs { position: sticky; top: 0; z-index: 5; flex-shrink: 0; }
  .cockpit-center-stage > .stage-view-panel { flex: 0 0 auto; height: auto !important; min-height: 0;
                                              overflow: visible !important; }
  .cockpit-center-stage > .kpi-ribbon-compact { flex-shrink: 0; }
  .hypergraph-canvas-container { min-height: 420px; }
  /* Panel 3 */
  .cockpit-sidebar-right { height: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

/* One-column cockpit (below 1150px): the page scrolls, not a box inside it, which is awkward on touch
   screens and hides content behind the phone's address bar */
@media (max-width: 1150px) {
  #view-summary, #view-privacy { height: auto !important; overflow-y: visible !important; }
  .stage-view-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0.35rem; }
  .stage-tab-btn { white-space: normal !important; flex: 1 1 auto; flex-shrink: 1; min-width: 0; text-align: left; }
}

/* Tablets and small laptops */
@media (max-width: 900px) {
  .kpi-ribbon-compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .summary-hero-card { flex-wrap: wrap; gap: 0.75rem; }
}

@media (max-width: 640px) {
  /* Inputs at 16px stop phones from zooming in on focus */
  input, select, textarea { font-size: 16px !important; }
  header nav { justify-content: flex-start; gap: 6px 14px; }
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  /* Cockpit: the floating theme/language bar sits in the page instead of covering it */
  .floating-theme-switch-dock { position: static !important; margin: 16px auto !important; width: max-content;
                                max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
                                border-radius: 16px !important; }
  .header-badges .badge, #badge-hospital { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Cockpit on a phone: the essentials first; secondary controls stay on larger screens */
  #btn-gpu-hud { display: none !important; }
  /* Cockpit header on a phone: brand, then the page links (wrapping), then the actions in a grid */
  .app-header--pro { padding: 0.6rem 0.9rem; gap: 0.55rem; }
  .app-header--pro .brand-section { flex: 1 1 100% !important; min-width: 0; }
  .app-header--pro .brand-section > div { min-width: 0; }
  .app-header--pro .brand-subtitle { white-space: normal !important; overflow-wrap: anywhere; font-size: 0.72rem; line-height: 1.3; }
  .app-header--pro .brand-section { flex-wrap: nowrap !important; }
  /* Same as the clinical pages: every page link visible, wrapping onto a second line, none hidden off-screen */
  .app-header--pro .app-nav { order: 1; flex: 1 1 100% !important; flex-wrap: wrap !important; margin: 0 -0.3rem; }
  .app-header--pro .app-nav-link { flex-shrink: 0; }
  .app-header--pro .header-actions { order: 2; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
                                     gap: 0.45rem !important; width: 100%; margin-left: 0 !important; }
  .app-header--pro .header-actions > * { min-width: 0; width: 100%; }
  .app-header--pro .header-actions > button, .app-header--pro .more-menu > summary {
    width: 100%; justify-content: center; flex-wrap: wrap; font-size: 0.8rem !important; padding: 0.45rem 0.5rem !important;
    text-align: center; }
  .app-header--pro .theme-segmented-control, .app-header--pro .prominent-lang-pill { margin: 0 !important; justify-self: stretch; }
  .app-header--pro .theme-segmented-control button, .app-header--pro .prominent-lang-pill button {
    flex: 1 1 0; padding: 0.4rem 0.3rem !important; font-size: 0.78rem !important; }
  .badge-pill { white-space: normal !important; max-width: 100%; }
  dl.kv { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important; }
  .header-actions { justify-content: flex-start !important; width: 100%; }
  .header-actions > * { max-width: 100%; }
  .comparison-cards-row, .summary-buttons-row, .comparison-grid, .biomcp-modal-grid { grid-template-columns: 1fr !important; }
  .modal-overlay { padding: 0.6rem !important; }
  .modal-overlay > * { padding: 1.1rem !important; max-height: 94vh; max-height: 94dvh; }
}

@media (max-width: 380px) {
  .kpi-ribbon-compact { grid-template-columns: 1fr !important; }
}

/* Connection status pill: its text colour shows the state (set by app.js), so it sits on the page
   background; on the old solid purple, grey "DEMO · NO SERVER" could not be read */
.api-status-pill { background: var(--bg-surface) !important; border: 1px solid var(--border-card); }

/* Logo: rod of Asclepius (medicine) inside a loop closed by an arrow (follow-up completed).
   Loop and rod take the page's accent colour; the serpent is teal, lighter on dark backgrounds. */
.brand-mark { display: block; width: 100%; height: 100%; }
.brand-logo .brand-mark { width: 26px; height: 26px; }
.bm-serpent { stroke: #0d9488; fill: #0d9488; }
.bm-serpent path { fill: none; }
body.dark-theme .bm-serpent { stroke: #2dd4bf; fill: #2dd4bf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1 .bm-serpent { stroke: #2dd4bf; fill: #2dd4bf; } }
:root[data-theme="dark"] h1 .bm-serpent { stroke: #2dd4bf; fill: #2dd4bf; }
h1 .brand-home { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.24em; margin-right: 0.4em;
                 color: var(--accent); }

/* Compute badge: shown only when a ClinLoop server answered (the public website has none) */
#btn-gpu-hud[hidden] { display: none !important; }
#btn-gpu-hud:not([hidden]) { display: inline-flex; }
.compute-k { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.compute-v { font-size: 1rem; font-weight: 800; color: var(--text-main); margin-top: 0.25rem; overflow-wrap: anywhere; }

/* ── Cockpit top bar. Wide screens: always in place (app shell above). Tablets and phones, where the
   page scrolls: the top bar scrolls away with the page and a slim bar (#mini-bar, js/top-chrome.js)
   slides in over the top. Nothing in the page's layout changes while the reader scrolls: an earlier
   bar that shrank on scroll moved the page under the finger and flickered. ───────────────────────── */
.top-chrome { position: relative; z-index: 120; flex-shrink: 0; background: var(--bg-surface); }
/* When the page itself scrolls, the window is the scroller */
@media (max-width: 1150px) {
  body { overflow: visible !important; }
  html { overflow-x: hidden; }
}
.mini-bar { display: none; }
@media (max-width: 1150px) {
  .mini-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 140; display: flex; align-items: center; gap: 0.5rem;
              height: 52px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
              padding-top: env(safe-area-inset-top); box-sizing: content-box;
              background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.35));
              box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
              transform: translateY(-110%); visibility: hidden;
              transition: transform 0.18s ease-out, visibility 0s linear 0.18s; }
  .mini-bar.is-visible { transform: none; visibility: visible; transition: transform 0.18s ease-out, visibility 0s; }
  .mini-bar-home { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; border-radius: 8px; color: #0e7490; }
  .mini-bar-home:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }
  .mini-bar-home .brand-mark { width: 100%; height: 100%; }
  .mini-bar .app-nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                       -webkit-overflow-scrolling: touch; }
  .mini-bar .app-nav::-webkit-scrollbar { display: none; }
  /* Jumping to a section leaves it below the slim bar, not under it */
  html { scroll-padding-top: 60px; }
}
body.dark-theme .mini-bar-home { color: #2dd4bf; }

/* ── Smooth scrolling on phones and tablets: blur behind translucent panels makes the browser repaint
   every frame while scrolling, which leaves blank patches on phones. The panels are opaque anyway. ── */
@media (max-width: 1150px) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Endless pulsing and flowing effects: off for anyone who asks for less motion, and on phones and tablets */
@media (prefers-reduced-motion: reduce), (max-width: 1150px) {
  .pulse-dot, .firewall-live-badge, [class*="pulse"], [class*="live-dot"] { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── One navigation on every page (js/appnav.js) ─────────────────────────────────────────────── */
.app-nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
.app-nav-link { padding: 0.4rem 0.7rem; border-radius: 8px; font-weight: 600; font-size: 0.86rem; line-height: 1.2;
                white-space: nowrap; text-decoration: none; color: var(--text-muted, var(--muted, #475569)); }
.app-nav-link:hover { color: var(--text-main, var(--text, #0f172a)); background: rgba(14, 116, 144, 0.08); }
.app-nav-link:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }
.app-nav-link[aria-current="page"] { color: #0b5f75; background: rgba(14, 116, 144, 0.12); }
body.dark-theme .app-nav-link[aria-current="page"] { color: #5eead4; background: rgba(94, 234, 212, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wrap .app-nav-link[aria-current="page"] { color: #5eead4; } }
/* Clinical pages: the navigation is the header's first row */
.wrap > header > .app-nav { order: -1; justify-content: flex-start; flex-basis: 100%; margin: -4px 0 6px -0.7rem; padding-bottom: 8px;
                            border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.3)); }

/* ── Cockpit header: brand · page navigation · actions, a "More" menu for the rest ──────────────── */
.app-header--pro { position: relative; z-index: 130; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; padding: 0.55rem 1.25rem; min-height: 60px; }
.app-header--pro .brand-section { flex: 0 0 auto; }
.app-header--pro .app-nav { flex: 1 1 auto; }
.app-header--pro .header-actions { margin-left: auto; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 300; display: flex; flex-direction: column;
                  gap: 0.25rem; min-width: 240px; padding: 0.4rem; border-radius: 10px; background: var(--bg-surface);
                  border: 1px solid var(--border-card); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18); }
.more-menu-list > button { width: 100%; justify-content: flex-start; display: flex !important; }

/* ── Contrast (WCAG 2.1 AA, 4.5:1): in dark mode the accent and alert colours are light, so the text on
   them is dark rather than white ──────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wrap button.primary, :root:not([data-theme="light"]) .chip.overdue,
  :root:not([data-theme="light"]) #policy, :root:not([data-theme="light"]) .alarm { color: #0b1220 !important; }
}
:root[data-theme="dark"] .wrap button.primary, :root[data-theme="dark"] .chip.overdue,
:root[data-theme="dark"] #policy, :root[data-theme="dark"] .alarm { color: #0b1220 !important; }
body.dark-theme .stage-tab-btn.active, body.dark-theme .stage-tab-btn.active span { color: #5eead4 !important; }
body.dark-theme .comp-badge-danger { color: #fda4af !important; }
body.dark-theme .comp-badge-success { color: #86efac !important; }
/* Scrollable tables and lists can be reached and scrolled with the keyboard (tabindex added in appnav.js) */
[data-scroll-focus]:focus-visible, .case-card:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }

/* Public static demo: no server to connect to, so the connection form is not shown */
.static-demo #connect-form { display: none; }
/* The read-only demo account owns no loops: "Only my loops" would always be empty */
.static-demo #only-mine-label { display: none; }

@media print {
  #clinloop-demo-banner, header nav, .floating-theme-switch-dock { display: none !important; }
}

/* ══ Clinical dashboard style (cockpit) ══════════════════════════════════════════════════════════
   Conventions of clinical software: one calm neutral surface; colour only for status (red critical,
   orange high, amber open/moderate, green closed); one typeface, monospace only for identifiers;
   uniform secondary buttons; no decoration that competes with the patient's data. ─────────────── */
:root { --st-open-bg: #fef3c7; --st-open-fg: #92400e; --st-closed-bg: #dcfce7; --st-closed-fg: #166534;
        --st-delay-bg: #ffedd5; --st-delay-fg: #9a3412;
        --sev-critical: #be123c; --sev-high: #c2410c; --sev-moderate: #a16207; --sev-low: #64748b; }
body.dark-theme { --st-open-bg: rgba(251, 191, 36, 0.16); --st-open-fg: #fcd34d; --st-closed-bg: rgba(74, 222, 128, 0.14);
                  --st-closed-fg: #86efac; --st-delay-bg: rgba(251, 146, 60, 0.16); --st-delay-fg: #fdba74;
                  --sev-critical: #fb7185; --sev-high: #fb923c; --sev-moderate: #fbbf24; --sev-low: #94a3b8; }

/* Status strip: the safety notice and the example data, one light row under the header */
.status-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.25rem; padding: 0.45rem 1.25rem;
                background: var(--bg-deep); border-bottom: 1px solid var(--border-subtle); }
.status-strip .platform-status { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 420px; min-width: 0;
                                 background: none !important; border: 0 !important; padding: 0 !important; font-size: 0.82rem; }
.platform-status-label { flex-shrink: 0; background: var(--st-open-bg); color: var(--st-open-fg); border-radius: 999px;
                         padding: 0.12rem 0.6rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.platform-status-copy { color: var(--text-muted); min-width: 0; }
.kpi-strip { display: flex; flex-wrap: wrap; gap: 0.35rem; background: none !important; padding: 0 !important; border: 0 !important; }
.kpi-strip .impact-stat-item { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.35rem; padding: 0.18rem 0.65rem;
                               border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface); }
.kpi-strip .impact-stat-val { font-family: var(--font-body); font-size: 0.88rem; font-weight: 800; color: var(--text-main) !important;
                              text-shadow: none; line-height: 1.2; }
.kpi-strip .impact-stat-lbl { font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); text-transform: none;
                              letter-spacing: 0; white-space: nowrap; }

/* Header: uniform secondary buttons, compact theme and language switches */
.app-header--pro .header-actions .btn-secondary, .app-header--pro .more-menu > summary {
  background: var(--bg-surface) !important; color: var(--text-main) !important; border: 1px solid var(--border-card) !important;
  box-shadow: none !important; border-radius: 8px !important; font-weight: 600; min-height: 36px; padding: 0.4rem 0.8rem; }
.app-header--pro .header-actions .btn-secondary:hover, .app-header--pro .more-menu > summary:hover { background: var(--bg-deep) !important; }
.api-status-pill, .biomcp-status-pill { font-family: var(--font-body) !important; font-size: 0.64rem !important; font-weight: 700;
                                        letter-spacing: 0.02em; border-radius: 999px; padding: 0.05rem 0.45rem; background: var(--bg-deep); }
.app-header--pro .theme-segmented-control, .app-header--pro .prominent-lang-pill {
  border: 1px solid var(--border-card) !important; border-radius: 8px !important; padding: 2px !important; gap: 2px;
  background: var(--bg-surface) !important; box-shadow: none !important; }
.app-header--pro .theme-opt-btn, .app-header--pro .lang-opt-btn { border-radius: 6px !important; padding: 0.3rem 0.65rem !important;
  font-size: 0.8rem !important; font-weight: 600 !important; box-shadow: none !important; }
.app-header--pro .theme-opt-btn.active, .app-header--pro .lang-opt-btn.active { background: #0e7490 !important; color: #fff !important; }
body.dark-theme .app-header--pro .theme-opt-btn.active, body.dark-theme .app-header--pro .lang-opt-btn.active { background: #5eead4 !important; color: #0b1220 !important; }

/* View tabs */
.stage-tab-btn { font-weight: 600; }
.stage-tab-btn > span { font-family: var(--font-body); }

/* Case queue: worklist rows. Left edge = severity; chip = status; identifiers in monospace only */
.case-card { border: 1px solid var(--border-subtle) !important; border-left: 4px solid var(--sev-low) !important; border-radius: 10px !important;
             background: var(--bg-surface) !important; box-shadow: none !important; padding: 0.7rem 0.8rem !important; }
.case-card::before { display: none !important; }
.case-card.sev-critical { border-left-color: var(--sev-critical) !important; }
.case-card.sev-high { border-left-color: var(--sev-high) !important; }
.case-card.sev-moderate { border-left-color: var(--sev-moderate) !important; }
.case-card:hover { background: var(--bg-deep) !important; }
.case-card.active { background: rgba(14, 116, 144, 0.07) !important; box-shadow: inset 0 0 0 1px #0e7490 !important; }
body.dark-theme .case-card.active { background: rgba(94, 234, 212, 0.08) !important; box-shadow: inset 0 0 0 1px #5eead4 !important; }
.case-card .case-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.case-name { font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; color: var(--text-main); line-height: 1.3; min-width: 0; }
.case-card .case-status-badge { flex-shrink: 0; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; text-transform: none;
                                letter-spacing: 0; padding: 0.12rem 0.55rem; border-radius: 999px; border: 0; white-space: nowrap; }
.case-card .status-open { background: var(--st-open-bg); color: var(--st-open-fg); }
.case-card .status-delayed { background: var(--st-delay-bg); color: var(--st-delay-fg); }
.case-card .status-closed { background: var(--st-closed-bg); color: var(--st-closed-fg); }
.case-card .case-title { font-size: 0.85rem; font-weight: 600; color: var(--text-main); line-height: 1.35; margin-top: 0.3rem; }
.case-card .case-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-top: 0.4rem;
                        font-size: 0.74rem; color: var(--text-muted); }
.case-card .case-sev { font-weight: 700; text-transform: capitalize; color: var(--sev-low); }
.case-card.sev-critical .case-sev { color: var(--sev-critical); }
.case-card.sev-high .case-sev { color: var(--sev-high); }
.case-card.sev-moderate .case-sev { color: var(--sev-moderate); }
.case-card .case-pid { font-family: var(--font-mono); margin-left: auto; color: var(--text-muted); }

/* Clinical overview: the case, the three facts, the actions. Illustrative scenario panels live in their own tab */
#view-summary .summary-comparison-container, #view-summary #survival-canvas-container { display: none !important; }
.summary-hero-card { border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; box-shadow: none !important;
                     background: var(--bg-surface) !important; }
#summary-patient-name { font-family: var(--font-body); font-size: 1.3rem !important; }
#summary-timer-text { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--text-muted) !important; }
#summary-deadline-lbl { letter-spacing: 0.04em; }
.badge-pill.badge-open { background: var(--st-open-bg); color: var(--st-open-fg); border: 0; font-weight: 700; }
.summary-q-card { border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; box-shadow: none !important;
                  background: var(--bg-surface) !important; }
.summary-q-card .q-title { font-size: 0.74rem !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700 !important;
                           color: var(--text-muted) !important; margin: 0; }
.summary-q-card .q-body { font-size: 0.92rem; color: var(--text-main); line-height: 1.5; }
.summary-action-btn { background: var(--bg-surface) !important; border: 1px solid var(--border-card) !important; box-shadow: none !important;
                      color: var(--text-main) !important; border-radius: 10px !important; }
.summary-action-btn:hover { background: var(--bg-deep) !important; transform: none !important; }
.summary-action-btn .btn-main-label { color: var(--text-main) !important; font-weight: 700; }
.summary-action-btn .btn-sub-label { color: var(--text-muted) !important; }
.summary-action-btn .btn-arrow { color: var(--text-muted) !important; font-size: 1.4rem; }

/* Right panel: deadline status, the missing step, the audit trail */
#clock-telemetry-title { color: var(--text-main); font-weight: 700; }
.action-box { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important;
              border-left: 4px solid var(--sev-critical) !important; border-radius: 12px !important; box-shadow: none !important; }
.action-box .action-header { color: var(--sev-critical) !important; }
.action-box .action-desc { color: var(--text-main) !important; }
.btn-close-loop { background: var(--bg-surface) !important; color: var(--text-main) !important; border: 1px solid var(--border-card) !important;
                  box-shadow: none !important; font-weight: 600 !important; border-radius: 8px !important; }
.btn-close-loop:hover { background: var(--bg-deep) !important; }
.audit-meta-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); font-size: 0.7rem; color: var(--text-muted); }
.card-widget { box-shadow: none !important; border-color: var(--border-subtle) !important; }

/* Ethics & safety charter */
.comparison-modal.charter { max-width: 760px; max-height: 90vh; overflow-y: auto; }
.charter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 0.8rem;
                border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.4rem; }
.charter-head h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-main); margin: 0; }
.charter-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.charter-head button { background: none; border: 0; font-size: 1.3rem; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.5rem; }
.charter h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 1.1rem 0 0.4rem; }
.charter-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; font-size: 0.88rem; line-height: 1.5; color: var(--text-main); }
.charter-list.muted { color: var(--text-muted); }
.charter-foot { display: flex; justify-content: flex-end; margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--border-subtle); }

@media (max-width: 640px) {
  .status-strip { padding: 0.5rem 0.9rem; }
  .status-strip .platform-status { flex-basis: 100%; align-items: flex-start; }
  .kpi-strip .impact-stat-item { padding: 0.15rem 0.55rem; }
}
/* Overview facts: the finding across the top, then why it matters and the action side by side */
.summary-questions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .summary-questions-grid { grid-template-columns: 1fr !important; } }
.summary-questions-grid > .summary-q-card:first-child { grid-column: 1 / -1; }
.summary-q-card .q-body { font-weight: 500 !important; }
.summary-q-card .q-body, .summary-q-card .q-body * { font-weight: 500 !important; }
.summary-q-card .q-body strong, .summary-q-card .q-body b { font-weight: 650 !important; }
/* The research score is not shown, so neither is its label; severity and identifiers in the body face */
.cockpit-sidebar-right .clock-display { display: none !important; }
.clock-stats .stat-val { font-family: var(--font-body) !important; }
#stat-severity { color: var(--sev-critical) !important; display: inline-block; text-transform: lowercase; }
#stat-severity::first-letter { text-transform: uppercase; }
.panel-header-compact .panel-badge, #triage-count, .triage-count { font-family: var(--font-body) !important; }
.evidence-step .step-sub, .evidence-chain .step-sub { font-family: var(--font-body) !important; }
.app-header--pro .theme-opt-btn, .app-header--pro .lang-opt-btn { justify-content: center; text-align: center; }

/* Clinical pages: notices are compact, and the data-feed and sign-off notices share one row */
.wrap > .banner { margin: 12px 0; padding: 8px 12px; font-size: 0.86rem; line-height: 1.45; }
.status-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.status-row > .feed { margin: 0; flex: 1 1 300px; padding: 8px 12px; font-size: 0.85rem; }
.status-row > .feed:empty { display: none; }
.wrap .chip { font-family: inherit; letter-spacing: 0.01em; }
html.static-demo .status-line { padding-top: 10px; }

/* ---- Legibility and touch on every device (Oct 2026 device check) ----
   Status labels were 10–11 px; links and checkboxes in tables were 17–20 px tall, under the 24 px
   minimum target (WCAG 2.2 SC 2.5.8). Touch screens get 44 px rows for links and controls. */
.api-status-pill, .biomcp-status-pill { font-size: 0.72rem !important; }
.case-status-badge, .case-card .case-status-badge, .stat-title { font-size: 0.72rem; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 3px; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 24px; display: inline-flex; align-items: center; gap: 0.35rem; }
td a, li a, a[href^="patient.html"] { display: inline-block; min-height: 24px; line-height: 24px; }
@media (pointer: coarse) {
  td a, li a, a[href^="patient.html"] { min-height: 32px; line-height: 32px; }
  button, select, input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="number"] { min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}
.step-sub, .step-icon { font-size: 0.72rem; }
.biomcp-tag-cyan, .biomcp-grade-badge, .biomcp-stream-label { font-size: 0.72rem; }
.filter-btn { min-height: 28px; }

/* Shared language controls: text remains readable if decorative images are unavailable. */
[data-language] { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
[data-language]::before { content: ""; display: inline-block; flex: 0 0 20px; width: 20px; height: 14px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(100,116,139,.35); }
[data-language="ko"]::before { background-image: url('../icons/flag-kr.svg'); }
[data-language="en"]::before { background-image: url('../icons/flag-us.svg'); }
.app-nav { min-width: 0; max-width: 100%; }
.app-nav:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }
@media (max-width: 1150px) {
  /* A single strip saves vertical space. Native scrolling and Tab keep every destination reachable. */
  nav.app-nav, .app-header--pro nav.app-nav, .wrap > header > nav.app-nav {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; max-width: 100%;
    width: 100%; margin-left: 0; margin-right: 0; padding: 4px 2px 8px;
    gap: 4px; justify-content: flex-start !important; scrollbar-width: thin; scroll-padding-inline: 8px; }
  nav.app-nav .app-nav-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; }
  .app-header--pro .lang-opt-btn, .app-header--pro .theme-opt-btn, #btn-lang { min-height: 44px; }
}
@media (max-width: 640px) {
  .app-header--pro .header-actions { gap: .35rem !important; }
  .app-header--pro .prominent-lang-pill button { font-size: .78rem !important; padding-inline: .2rem !important; gap: .25rem; }
  [data-language]::before { flex-basis: 18px; width: 18px; height: 13px; }
  /* Supporting pages share the same safe page gutter as the clinical screens. */
  body > nav.app-nav { margin-block: 0 1rem; }
  body:has(> nav.app-nav) { padding: 16px; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Shared content widths: use desktop space without stretching individual reading lines. */
.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: clamp(16px, 1.5vw, 40px);
}
body:has(> nav.app-nav) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: clamp(16px, 1.5vw, 40px);
}
.wrap > header { align-items: center; margin-bottom: 16px; }
.wrap > header .sub { max-width: 85ch; }
.inputs { align-items: start; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
.inputs > *, .eval > * { min-width: 0; }
.eval { width: fit-content; max-width: 100%; box-sizing: border-box; }
#snapshot-status { margin: 0 0 16px !important; padding: 10px 14px !important; }
@media (min-width: 1151px) {
  .cockpit-triage-panel { max-height: 100%; }
  .cockpit-center-stage { max-height: 100%; }
  .cockpit-sidebar-right { max-height: 100%; }
  .card-widget.fill-remaining { flex: 0 0 auto; }
  #view-summary, #view-privacy { height: auto !important; }
}
@media (max-width: 700px) {
  .inputs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .eval { width: 100%; }
}

@media (max-width: 360px) {
  .app-header--pro .prominent-lang-pill { grid-column: 1 / -1; justify-content: center; }
}

/* Workspaces use the available screen; cards remain as tall as their content. */
.report-workspace > header, .report-workspace > main {
  width: 100%; max-width: none; padding-inline: clamp(16px, 1.5vw, 40px);
}
.report-workspace > header .app-nav { justify-content: flex-start; }
.report-workspace > main, .grid2, .cols { align-items: start; }
.report-workspace > main { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.report-workspace .cases { max-height: 75vh; overflow-y: auto; }
.workspace-empty {
  padding: 18px; margin-block: 16px; border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px; color: var(--muted, #475569); line-height: 1.6;
}
.results:has(#results:not(:empty)) .workspace-empty,
.pane:has(#graph-wrap:not([hidden])) > .workspace-empty { display: none; }
.snapshot-tools { margin-block: 12px; }
.snapshot-tools > summary { padding: 10px 0; cursor: pointer; font-weight: 600; }
.snapshot-tools > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wrap input, .wrap select, .wrap button { min-height: 40px; }
.wrap input[type=checkbox], .wrap input[type=radio] { min-height: 0; }
@media (min-width: 2200px) {
  body:has(.wrap), .report-workspace { font-size: 18px; }
  .wrap label, .wrap .sub, .wrap .meta, .wrap .status-line { font-size: .9em; }
}
@media (max-width: 860px) {
  .report-workspace > main { grid-template-columns: minmax(0, 1fr); }
  .report-workspace .cases { max-height: 280px; }
}

/* Technical matching expressions retain their source language and stay optional on phones. */
.rule-patterns summary { cursor: pointer; overflow-wrap: anywhere; }
.rule-patterns pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 52ch; margin-block: 8px; }