/* =========================================
   ALERT Nursing Risk Assessment Tool A8.03 (10 July 2026)
   Copyright © 2025-2026 Casey Bond
   Developed for South Metropolitan Health Service ALERT Team
   MIT License - https://opensource.org/licenses/MIT
   ========================================= */

/* The hidden attribute means hidden, everywhere, whatever else claims otherwise.
   The browser hides [hidden] from its own stylesheet, which any author rule setting display
   outranks - so a class like .checks-strip { display: flex } quietly overrode it, and an
   element the JS had correctly marked hidden stayed on screen as an empty dashed box under
   Readmission Risks. Six rules already carried their own .foo[hidden] { display: none }
   guard, one written each time the bug was found again; two did not. This is that guard,
   written once, for every element that will ever be toggled this way. Anything that needs to
   be laid out must not be carrying the attribute in the first place. */
[hidden] { display: none !important; }


/* Inter v4 (latin subset, variable) - SIL Open Font License 1.1.
   Self-hosted deliberately: the tool has no other external runtime dependency, so it
   must render identically offline and on locked-down hospital networks. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../assets/fonts/inter-variable.woff2') format('woff2');
}

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #5a6675;
  --text: #334155; /* body copy - was referenced in 4 rules but never defined */
  --accent: #0f766e; /* Updated to Teal for consistency */
  --red: #ef4444;
  --amber: #f59e0b;
  --green: #10b981;
  --line: #e1e8ed;
  --input-bg: #ffffff;
  --blue-hint: #2563eb;
  /* Red / amber / green mean CAT 1 / 2 / 3 and nothing else, so the modes and destinations
     that used to borrow them have their own hues. */
  --quick: #6d28d9;      /* Quick Review mode */
  --quick-soft: #f5f3ff;
  --maroon: #7f1d3a;     /* REDCap export */
  --toast-bg: rgba(0,0,0,0.8);
  --toast-color: #fff;
  --sidebar-w: 85px; /* Width of the sidebar */

  /* --- Typography ---------------------------------------------------------
     One scale, 7 steps. Replaces the 25 ad-hoc sizes this file accumulated.
     Smallest step is 12px: 10px hint text is too small to read clinical data. */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-hint: 0.75rem;   /* 12px - range hints, sub-hints */
  --fs-xs: 0.8125rem;   /* 13px - sub-labels, dense chips */
  --fs-sm: 0.875rem;    /* 14px - labels, secondary text */
  --fs-base: 1rem;      /* 16px - body, inputs */
  --fs-lg: 1.125rem;    /* 18px - card and section headings */
  --fs-xl: 1.375rem;    /* 22px - ADDS value, category badge */
  --fs-2xl: 1.75rem;    /* 28px - calculator total, page title */
  --fs-3xl: 2.25rem;    /* 36px - category badge only; the headline clinical output */

  --fw-normal: 400;
  --fw-medium: 500;     /* labels */
  --fw-semibold: 600;   /* headings, emphasis */
  --fw-bold: 700;       /* reserved: category badge, ADDS value */

  --lh-tight: 1.25;     /* headings, buttons, single-line controls */
  --lh-body: 1.5;       /* prose, textareas */
}

html { height: auto; }
body { height: auto; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding-bottom: 70px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  padding-left: var(--sidebar-w); /* Push body for sidebar */
}

/* Clinical values: tabular figures stop digits shifting width as they're typed and
   keep the bloods grid aligned; slashed zero separates 0 from O in entered results. */
#adds, #calc_total_display, .blood-item input, .prev-datum, #handoverLine,
#b_rr, #b_spo2, #c_hr, #c_nibp, #e_temp, #e_bsl, #e_uop,
#icuLos, #ptAge, #ptWeight, #ptMrn, #ptBed {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* --- Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100%;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    z-index: 100;
}

.sidebar-logo {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--red);
    margin-bottom: 24px;
}

.sidebar-label {
    font-size: var(--fs-hint);
    font-weight: var(--fw-semibold);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    text-align: center;
}

.nav-item {
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    text-align: center;
    border-radius: 10px;
    width: 80%;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.nav-item .nav-icon {
    font-size: 1.3rem; /* emoji icon, not text - deliberately off the type scale */
    margin-bottom: 3px;
    display: block;
    line-height: 1;
}

.nav-item .nav-label {
    font-size: var(--fs-hint);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.nav-item:hover {
    background: var(--bg);
    color: var(--accent);
    border-color: var(--line);
    transform: translateY(-1px);
}

.nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--bg);
    color: var(--accent);
}

#sidebar-risk-badges {
    display: inline-block;
    font-size: var(--fs-hint);
    margin-left: 2px;
    font-weight: var(--fw-bold);
}

#sidebar-risk-badges .badge {
    display: inline-block;
    margin-left: 2px;
}

/* --- Header --- */
header { 
  padding: 18px 24px; 
  border-bottom: 1px solid var(--line); 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  flex-wrap: wrap; 
  background: var(--card); 
  z-index: 30; 
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

header h1 { 
  font-size: var(--fs-2xl); 
  font-weight: var(--fw-bold); 
  color: var(--accent); 
  letter-spacing: -0.4px; 
  margin: 0; 
  text-align: left; 
}

header h1 .logo-em { 
  color: var(--red); 
  margin: 0 4px; 
  font-weight: var(--fw-bold); 
}

.header-controls { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.top-meta { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.last-saved { font-size: var(--fs-sm); color: var(--muted); }

/* --- Layout & Grid --- */
.container { max-width: 980px; margin: 12px auto; padding: 12px 12px 320px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px; row-gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); scroll-margin-top: 100px; transition: box-shadow 0.2s; }

/* Canonical card heading. Replaces four copy-pasted inline h2 treatments that had
   drifted to 1.1 / 1.15 / 1.2 / 1.4rem. */
.card-title {
  margin: 0 0 12px 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--ink);
}
/* --- Patient details ------------------------------------------------------ */
.patient-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.patient-header-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.review-strip label {
  display: block;
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
/* Primary action for the whole card, so it reads as a filled button rather than the
   dashed outline it used to have - that looked like a drop zone, not something to click.
   Doubled class beats plain .btn; the HTML must not add .small or padding is lost again. */
.btn.btn-import {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-weight: var(--fw-semibold);
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  margin: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.btn.btn-import:hover { background: #0b5c56; border-color: #0b5c56; color: #fff; }
.btn.btn-import:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.28); }

/* Everything about the review itself, separated from the patient's own details.
   Grid rather than flex-wrap so every field gets an identical column - that is what
   keeps the four toggles the same width despite their labels being different lengths. */
.review-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
  align-items: end;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.rs-field { min-width: 0; }
.rs-field input { margin: 0; }

/* Reviewer: pulled to the front of the strip and given a standing outline, because an
   unsigned note is the one gap the tool can't fill in for the clinician. The "required"
   tag and the amber state clear the moment something is typed - see markReviewerState(). */
.rs-field-reviewer { order: -1; }
/* Sized between the two mistakes: a full-width box invited a full name, 7ch looked like a
   stamp stuck on the form. It reads as a short code but still sits as a proper field beside
   its neighbours, and maxlength is what actually enforces initials.
   [type="text"] is needed to outrank the global input rule's width:100% - same specificity
   otherwise, and the global one comes later in the file. */
.rs-field-reviewer input[type="text"] {
  width: 100%;
  max-width: 130px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The initials half of the DMR prompt. Centred like everything else in this dialog, and sized
   to what it holds - a full-width box for three characters read as a comment field. */
/* The DMR dialog: one divided row per question - icon, label, answer - so each reads as its
   own line rather than a stack of centred fragments. */
.review-prompt { max-width: 540px; }
.prompt-rows { text-align: left; margin: 4px 0 20px; border-bottom: 1px solid var(--line); }
.prompt-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: 14px 2px;
  border-top: 1px solid var(--line);
}
.prompt-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.prompt-row-label { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink); }
.prompt-row-hint { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: normal; color: var(--muted); }
.prompt-row-wide { grid-column: 2 / -1; }
/* A small box sits beside its label rather than out at the far edge of the dialog. */
.prompt-row-inline { grid-template-columns: 36px auto 1fr; }
.prompt-row-inline > input { justify-self: start; margin-left: 8px; }
.prompt-row-actions { display: flex; gap: 8px; }
.prompt-row-link {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.prompt-row-link:hover { text-decoration: underline; }
/* Four answers on one line, joined into a single control. */
.prompt-seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.prompt-seg button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  border: 0;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}
.prompt-seg button + button { border-left: 1px solid var(--line); }
.prompt-seg button:hover { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.prompt-seg button.active { background: var(--accent); color: #fff; }
/* The type selector is needed to outrank the global input[type="text"] width further down. */
.prompt-row input.prompt-row-initials[type="text"] {
  width: 4.5em;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-align: center;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .prompt-row-actions, .prompt-seg { grid-column: 1 / -1; }
  .prompt-seg button { font-size: var(--fs-xs); padding: 8px 2px; }
}
.rs-field-reviewer.reviewer-missing input {
  border-color: var(--amber);
  background: rgba(245, 158, 11, 0.08);
}
/* Each group fills its grid cell, and its two options split that cell evenly. */
.review-strip .radio-segmented-group { width: 100%; max-width: none; }
.review-strip .radio-segmented-group label { flex: 1 1 0; min-width: 0; }
.review-strip .segmented-group { width: 100%; max-width: none; margin: 0; }
.review-strip .segmented-group .seg-btn { flex: 1 1 0; min-width: 0; }

/* Field labels: kept for verification, but quieter so they stop competing with the data.
   Scoped to the field's own label - the labels *inside* a segmented group are the options
   themselves and must keep their selected-state colour. */
#section-patient .grid > div > label,
#section-patient .rs-field > label {
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

/* --- Quick Review mode ---------------------------------------------------- */

/* Offer modal: shown after a DMR scrape or once >24h past stepdown. JS sets display:flex. */
.qr-modal { max-width: 520px; text-align: center; gap: 10px; border-top: 5px solid var(--quick); }
.qr-modal-icon { font-size: 2.5rem; line-height: 1; }
.qr-modal-title { margin: 0; font-size: var(--fs-xl); color: var(--ink); }
.qr-modal-detail { font-size: var(--fs-base); color: var(--muted); }
.qr-modal-detail span + span:not(:empty)::before { content: '\00a0\00b7\00a0'; }
.qr-modal-risks {
  display: none;
  text-align: left;
  font-size: var(--fs-sm);
  color: #92400e;
  background: #fffbeb;
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 10px 12px;
}
.qr-modal-risks ul { margin: 4px 0 0 0; padding-left: 18px; }
.qr-modal-help { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.qr-modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.qr-modal-actions .btn { flex: 1 1 180px; padding: 14px 18px; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
#btnQuickReview { background: var(--quick); border-color: var(--quick); color: #fff; }
#btnFullReview { background: var(--input-bg); color: var(--ink); }

/* Quick Review toggle button */
/* Review Depth toggle: violet marks Quick Review everywhere, never a category colour. */
#reviewDepthToggle input:checked + span,
#reviewDepthToggle label:has(input[value="quick"]:checked) {
  background: var(--quick);
  color: #fff;
}


/* Minimised bloods controls shown in place of the full grid */
#bloods_quick_controls { padding: 12px 0 4px 0; }
#bloods_quick_controls .segmented-group { margin-bottom: 8px; }
#btnBloodsDetailsToggle { width: 100%; }

/* --- Quick Review one-page workspace -------------------------------------
   enableQuickReviewMode() moves the live nodes into #quickGrid; these rules only
   describe the layout they land in. Left rail = the things you touch (ADDS, bloods,
   lines, category); right = what you write (issues, notes); bottom spans both and
   carries the computed category + ALERT actions, which Quick Review never skips. */
#quickGrid { display: none; }
/* Quick Review used to widen the container to 1100px and shrink every card, title and button
   inside it. Switching modes then resized the whole page, which read as two different tools.
   The page measure, the card padding and the control sizes are now the ones Full Review uses;
   only the arrangement of the cards differs between the modes. */
/* The banner used to be pulled out to the container's padding edge with negative side
   margins. Between about 768px and 1024px the container fills the space it's given, so that
   put the banner hard against the window while every card below it kept a gutter - which is
   what read as the right-hand side being clipped. It now lines up with the cards. */
body.quick-review-active #quickGrid {
  display: grid;
  /* Near-equal columns. The old minmax(300px,1fr) 2fr gave two thirds of the width to the
     cards that collapse when nothing was scraped, which is what left a void down the middle.
     At the standard 980px measure the rail lands near 460px, still clear of the ~356px a
     .device-row needs to stay on one line. */
  grid-template-columns: minmax(360px, 0.9fr) 1fr;
  gap: 16px;
  /* stretch, not start: both columns take the row's height so the write-up panel below can
     flex into whatever the other column left over. */
  align-items: stretch;
  margin-bottom: 16px;
  /* Clear the sticky Quick Review banner when scrollIntoView lands here. */
  scroll-margin-top: 90px;
}
#qgLeft, #qgRight { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#qgTop, #qgBottom { grid-column: 1 / -1; }

/* Patient Details spans the top of the workspace: it's a form to fill in, not a rail tile,
   and the identifiers have to stay editable in Quick Review. It is otherwise the same card
   at the same size as in Full Review - the fields used to be enlarged here to stop them
   being skipped, which made switching modes resize the form under the clinician. What keeps
   them from being skipped now is position and state: the reviewer sits first in the strip and
   outlines itself until it's filled, and the completeness notice names what's missing. */
#quickGrid #section-patient label[for="ptName"],
#quickGrid #section-patient label[for="ptMrn"],
#quickGrid #section-patient label[for="ptBed"] { color: var(--ink); }

/* --- Notice region -------------------------------------------------------------------
   One banner at a time, shared by every source that used to have a strip of its own. Loud
   enough to read, never loud enough to take the page away from you. */
.notice[hidden] { display: none; }
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--card);
  animation: noticeIn 0.25s ease;
}
@keyframes noticeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.notice-red { border-color: var(--red); background: #fef2f2; }
.notice-amber { border-color: var(--amber); background: #fffbeb; }
.notice-info { border-color: var(--line); background: var(--bg); }

.notice-body { flex: 1 1 320px; min-width: 0; }
.notice-title { font-weight: var(--fw-semibold); color: var(--ink); }
.notice-list { margin: 8px 0 0 0; padding-left: 20px; font-size: var(--fs-sm); }
.notice-list li.red { color: var(--red); font-weight: var(--fw-semibold); }
.notice-list li.amber { color: #b45309; font-weight: var(--fw-semibold); }
.notice-foot { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.notice-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Nothing is hidden, it is just queued - this says how much is waiting behind the one shown. */
.notice-more {
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}
/* Cards inside the grid supply their own gap; kill the stacked-flow margins. */
#quickGrid > div > .card,
#quickGrid > div > .accordion-wrapper,
#quickGrid > div > .input-box { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ADDS tile: the moved #adds_wrapper, out of the risk grid and into the rail.
   height:auto is load-bearing. .input-box carries height:100%, which .risk-gates-grid
   cancels - and that cancellation stops applying the moment the card is moved here. With
   the rail stretched to the row height it inflated to ~300px around ~170px of controls,
   which read as a broken empty card. Cards in the rail size to their contents. */
#quickGrid #adds_wrapper {
  height: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;   /* the same card padding Full Review uses */
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
}
#quickGrid .input-box { height: auto; }
/* Only the write-up panel is allowed to absorb slack; the rail ends where its content does. */
#qgLeft { align-content: flex-start; }
#quickGrid #adds_wrapper .quick-select-container { margin-bottom: 0 !important; }
#quickGrid #addsCalculatorContainer { margin-top: 10px; padding-bottom: 12px !important; }

/* Bloods square: the three status buttons stacked over an inline Details drawer. */
body.quick-review-active #bloods_quick_controls { padding: 0; }
body.quick-review-active #bloods_quick_controls .segmented-group { flex-wrap: wrap; }
#quickGrid #section-bloods, #quickGrid #section-devices {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* The accordion header reads as this card's title, so it loses its own frame and padding -
   the card supplies both. Its type size stays the .card-title / .accordion size it has in
   Full Review; only the chrome around it goes. */
#quickGrid .accordion { padding: 0 0 12px 0; background: none; border: none; }
#quickGrid .panel { padding: 12px 0 0 0; border: none; }

/* The full bloods grid is unreadable squeezed into the rail, so in Quick Review the
   Details drawer opens as a centred overlay instead of inline. */
#qrBackdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 290; }
#qrBackdrop[hidden] { display: none; }
body.quick-review-active #section-bloods.qr-expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  z-index: 300;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}
body.quick-review-active #section-bloods.qr-expanded #btnBloodsDetailsToggle::after { content: ' (close)'; }
/* An unambiguous way out of a floating card, in the place people look for one. Hidden
   entirely outside the overlay state - these cards are ordinary tiles the rest of the time.
   Sticky rather than absolute or fixed: the overlay scrolls its own contents, and both of
   those scroll away with them - position:fixed included, because a transformed ancestor
   becomes the containing block and takes its scrolling with it. Sticky stays put, which is
   the whole requirement: the way out must never scroll off. */
.qr-overlay-close { display: none; }
.qr-expanded > .qr-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 4;
  margin-left: auto;
  margin-bottom: -30px;   /* the heading sits alongside it, not pushed below */
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.qr-expanded > .qr-overlay-close:hover,
.qr-expanded > .qr-overlay-close:focus-visible { color: var(--ink); border-color: var(--accent); }
/* Second way out, at the end of the panel. The corner ✕ is sticky and so never scrolls off,
   but it is still at the top of a card the length of the bloods grid - having reached the
   bottom of the grid, the exit should be right there. Full width and labelled rather than a
   bare glyph: at the end of a long panel it reads as the end of the card, not as decoration. */
.qr-overlay-close-bottom { display: none; }
.qr-expanded > .qr-overlay-close-bottom {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.qr-expanded > .qr-overlay-close-bottom:hover,
.qr-expanded > .qr-overlay-close-bottom:focus-visible { color: var(--ink); border-color: var(--accent); }
/* Keep the card's own heading clear of it. */
.qr-expanded > .accordion, .qr-expanded .gate-trigger-area > .question-label { padding-right: 44px; }
/* Same treatment for the ADDS calculator, which is also too wide for the rail. */
body.quick-review-active #adds_wrapper.qr-expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  z-index: 300;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}

/* Lines: only the five common add-buttons until "More" is expanded. */
body.quick-review-active .device-add-group .btn[data-device-type]:not([data-common]) { display: none; }
body.quick-review-active .device-add-group.show-all .btn[data-device-type] { display: inline-flex; }
/* Full review shows every add-button, so the More toggle is Quick Review only.
   Class doubled to outrank the .btn display rule that follows later in this file. */
.btn.device-more-toggle { display: none; }
body.quick-review-active .btn.device-more-toggle { display: inline-flex; color: var(--accent); }
/* Buttons keep their Full Review size; only the stacking margin goes. */
body.quick-review-active .device-add-group { margin-bottom: 0; }

/* Risks carried forward from the previous DMR note: answered as Yes on import so they count
   toward the category, but visibly provisional until the clinician confirms or clears them. */
.input-box.carried-forward {
  border-color: var(--quick);
  box-shadow: inset 0 0 0 1px var(--quick);
}
.input-box.carried-forward::before {
  content: '↻ From last note - confirm or clear';
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  color: var(--quick);
  background: var(--quick-soft);
  border: 1px solid var(--quick);
  border-radius: 999px;
  padding: 2px 10px;
  width: fit-content;
}

/* "From the last review" card. Deliberately quiet - a question, not a demand. */
.cf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cf-row:last-child { border-bottom: none; }
.cf-row-text { min-width: 0; }
.cf-row-title { font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-sm); }
.cf-row-was { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.cf-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.cf-chip { padding: 7px 12px; font-size: var(--fs-xs); background: var(--input-bg); color: var(--ink); }
.btn.cf-chip:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }

/* ADDS manual-override control */
.adds-lock-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.adds-lock-btn {
  flex: 1 1 auto;
  font-size: var(--fs-xs);
  padding: 6px 10px;
  background: var(--input-bg);
  color: var(--muted);
  text-align: left;
}
.adds-lock-btn.active { background: #fffbeb; border-color: var(--amber); color: #92400e; font-weight: var(--fw-semibold); }
.adds-calc-hint { display: none; font-size: var(--fs-xs); color: #92400e; font-weight: var(--fw-semibold); }
#adds_override_box label { font-size: var(--fs-xs); margin-bottom: 4px; }
#adds_override_box input { font-size: var(--fs-sm); }

/* Select Category */
.override-auto-hint { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 10px; }
.override-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.override-btn-row { flex-wrap: nowrap; }
.override-btn-row .override-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  font-size: var(--fs-sm);
  text-align: center;
  justify-content: center;
}
.override-btn.green.active { background-color: var(--green); color: #fff; border-color: var(--green); }
.override-btn.clear { flex: 0 1 auto; color: var(--muted); }
#override_downgrade_warn {
  font-size: var(--fs-xs);
  color: #b45309;
  background: #fffbeb;
  border: 1px solid var(--amber);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
#override_reason_required { font-size: var(--fs-xs); color: var(--red); margin-top: 4px; }
#override_reason_box.reason-missing input { border-color: var(--red); }

/* Issues: dense enough that a dozen fit without scrolling. */
.issues-count { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--muted); }

/* Quick Review section chips: what this card is holding, for cards that hide their own
   contents. Quiet by design - they confirm, they don't compete with the data. Shown only
   when they have something to say, and only in Quick Review, where the panels are shut. */
.qr-chip { display: none; }
body.quick-review-active .qr-chip[data-filled] {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  vertical-align: middle;
}
/* .accordion is a space-between flex row, which would strand the chip in the middle of the
   bar between the title and the chevron. The auto margin eats the free space to its right so
   the chip sits against the title it belongs to and the chevron keeps the far edge. */
body.quick-review-active .accordion .qr-chip[data-filled] { margin-right: auto; }
.issue-add-row { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.issue-add-row input { flex: 1; min-width: 0; margin: 0; }
.issue-add-row .btn { flex: 0 0 auto; padding: 8px 14px; font-weight: var(--fw-semibold); }

/* --- The write-up panel ---------------------------------------------------------------
   Review List and Quick Notes are two cards that mean the same thing: what the reviewer
   concluded. In Quick Review they are joined into one panel that grows to fill the column,
   so the space left over when little was scraped becomes the place you type rather than a
   hole. The list is the part that stretches; the notes box keeps a fixed, generous height. */
/* Quick-Review-only cards. Hidden by default in both directions - see the note beside
   QUICK_REVIEW_SECTIONS_TO_HIDE in ui.js for why this moved out of JS. */
#quick_notes_wrapper { display: none; }
body.quick-review-active #quick_notes_wrapper { display: block; }
/* Readmission Risks is no longer Quick-Review-only. It was hidden here unconditionally while
   the importer went on staging carried risks into it and the note went on printing them, so a
   Full Review wrote lines nobody had seen. Whether it shows is decided by whether it is
   holding anything - renderScrapedIssuesList sets the hidden attribute, and the guard at the
   top of this sheet makes that stick against these display rules. */
#scraped_risks_wrapper { display: block; }
body.quick-review-active #scraped_risks_wrapper { display: flex; }

#quickGrid #scraped_risks_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 220px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
/* The inline padding is load-bearing. Setting overflow-y:auto makes overflow-x compute to
   auto too, so this box clips sideways - and inputs carry a 3px box-shadow focus ring that
   sits outside their border. A full-width field inside had its ring shaved off at both edges
   the moment it was clicked. The negative margin keeps the rows lined up with the card. */
#quickGrid #scraped_issues_list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px;
  margin: 0 -4px;
}
#quickGrid #scraped_risks_wrapper .issue-add-row { flex: 0 0 auto; }
#quickGrid #quick_notes_wrapper {
  flex: 0 0 auto;
  margin-top: -14px !important;   /* close the column gap: one panel, not two cards */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#quickGrid #quick_notes_wrapper .card-title { color: var(--muted); font-size: var(--fs-sm); }
body.quick-review-active #quickNotes { min-height: 110px; }


/* Bottom row: category KPIs and ALERT actions side by side rather than stacked. */
body.quick-review-active #qgBottom .kpi { margin-bottom: 12px; }
body.quick-review-active #alert_actions_section { margin-top: 12px; padding-top: 12px; }

/* --- Category band -------------------------------------------------------------------
   The calculated category and the buttons that overrule it, in one block. */
#override_card {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
.override-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.override-head .override-auto-hint { margin-bottom: 0; }
/* Quick Review leaves this empty whenever it would only repeat the category shown above it.
   An empty flex child still eats the row's gap, so it stands down entirely rather than
   pushing the heading off centre with a blank. */
.override-auto-hint:empty { display: none; }

/* The ICU-only instruction under the Pre-Stepdown rounding toggle. Bordered rather than plain
   text because it asks for an action off the screen - a phone call - which nothing else on
   this page does, and which nothing here can confirm happened. */
.icu-call-prompt {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

@media (max-width: 900px) {
  body.quick-review-active #quickGrid { grid-template-columns: 1fr; }
  /* Back to a plain stack: nothing needs to absorb slack in a single column. */
  #quickGrid #scraped_risks_wrapper {
    flex: 0 0 auto;
    min-height: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 16px;
  }
  #quickGrid #scraped_issues_list { overflow-y: visible; }
  #quickGrid #quick_notes_wrapper { margin-top: 0 !important; border-radius: 16px; }
}

/* Scraped Risks staging list */
.scraped-issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.scraped-issue-row:last-child { border-bottom: none; }
/* Was a bare checkbox. It marks an entry dealt with - kept on screen, left out of the
   handover line - which is not something a tickbox can say on its own. */
.scraped-issue-resolve {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 10px;
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.scraped-issue-resolve:hover, .scraped-issue-resolve:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
.scraped-issue-row.resolved .scraped-issue-resolve { color: var(--accent); border-color: var(--accent); }
.scraped-issue-text {
  flex: 1;
  cursor: text;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text);
}
.scraped-issue-text:hover { text-decoration: underline dotted; }
/* Informational entries carried over for context - never counted as risks. */
.scraped-issue-note-tag {
  flex: 0 0 auto;
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.scraped-issue-edit {
  flex: 1;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
}
/* The edit affordance. Quiet by design - the row's job is to be read, and this only has to
   say "you can change this". Still a 32px target, because it gets used on a ward tablet. */
.scraped-issue-edit-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.scraped-issue-row:hover .scraped-issue-edit-btn { color: var(--accent); }
.scraped-issue-edit-btn:hover, .scraped-issue-edit-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
/* Resolving an entry means "dealt with", not "gone" - it stays readable and reversible. */
.scraped-issue-row.resolved .scraped-issue-text { text-decoration: line-through; color: var(--muted); }
/* The tool's reading of today's numbers, above the risks it isn't. No controls: these apply
   or they don't, and they change the moment the value does. */
.checks-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.checks-strip-label {
  font-size: var(--fs-hint);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.checks-strip-item {
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
}
.scraped-issue-row.resolved .scraped-issue-note-tag { opacity: 0.6; }

/* Grid Spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; } 
.col-3 { grid-column: span 3; } 
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }

.col-6 { grid-column: span 6; } 
.col-8 { grid-column: span 8; } 
.col-12 { grid-column: span 12; }

/* --- Inputs & Typography --- */
label { display: block; font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--muted); margin-bottom: 6px; font-weight: var(--fw-medium); }

/* A-E Assessment section labels should use teal accent color for consistency */
#panel_ae label { color: var(--accent); font-weight: var(--fw-semibold); }

.sub-label { 
    display: block; 
    font-size: var(--fs-xs); 
    color: var(--muted); 
    margin-top: -4px; 
    margin-bottom: 10px; 
    font-style: italic; 
}

input[type="text"], input[type="number"], input[type="date"], input[type="time"], textarea, select {
  font-family: inherit;
  line-height: var(--lh-tight);
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); box-sizing: border-box;
  background: var(--input-bg); color: var(--ink); outline: none; font-size: var(--fs-base);
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

input:focus, textarea:focus, select:focus { 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px rgba(0,122,122,0.12); 
  outline: none;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

textarea { min-height: 80px; resize: vertical; max-height: 240px; }

/* Clinical Summary Styling */
#summary {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    white-space: pre-wrap;
    min-height: 240px;
}

/* --- THE SCRAPED DATA CLASS (BLUE TEXT) --- */
.scraped-data {
    color: #2563eb !important;
    font-weight: var(--fw-semibold);
    background: rgba(37, 99, 235, 0.07) !important;
    border-color: #93c5fd !important;
    border-radius: 12px;
}

.concern-note { margin-top: 8px; }
.concern-note textarea { min-height: 40px; font-size: var(--fs-base); }

/* --- THE INPUT BOX (Teal Box) --- */
.input-box {
    background: linear-gradient(to bottom, #fafbfc, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-bottom: 0; 
    position: relative; 
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Inputs inside boxes */
.input-box input, .input-box select {
    background: var(--card);
    border-color: var(--line);
}

/* --- Buttons --- */
.btn, .override-btn, .select-btn, .seg-btn { 
  font-family: inherit;
  line-height: var(--lh-tight);
  background-color: var(--card); 
  color: var(--muted); 
  border: 1px solid var(--line); 
  padding: 9px 14px; 
  border-radius: 12px; 
  cursor: pointer; 
  font-weight: var(--fw-semibold); 
  transition: all 0.2s ease; 
  min-height: 44px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Focus styles for buttons to prevent outline clipping and fully highlight the box */
.btn:focus, .btn:focus-visible,
.override-btn:focus, .override-btn:focus-visible,
.select-btn:focus, .select-btn:focus-visible,
.seg-btn:focus, .seg-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
  z-index: 2; /* Keep above adjacent borders in flex groups */
}

/* Specific focus highlights for true/positive/Yes elements */
.seg-btn[data-value="true"]:focus, .seg-btn[data-value="true"]:focus-visible,
.seg-btn[data-value="positive"]:focus, .seg-btn[data-value="positive"]:focus-visible {
  background-color: rgba(15, 118, 110, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 3px var(--accent) !important;
}

/* Specific focus highlights for false/negative/No elements */
.seg-btn[data-value="false"]:focus, .seg-btn[data-value="false"]:focus-visible,
.seg-btn[data-value="negative"]:focus, .seg-btn[data-value="negative"]:focus-visible {
  background-color: rgba(15, 118, 110, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 3px var(--accent) !important;
}

/* When a seg-btn or select-btn is already active AND focused, show a strong white inner ring inside the background color */
.select-btn.active:focus, .select-btn.active:focus-visible,
.seg-btn.active:focus, .seg-btn.active:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px var(--accent) !important;
}

.seg-btn[data-value="false"].active:focus, .seg-btn[data-value="false"].active:focus-visible,
.seg-btn[data-value="negative"].active:focus, .seg-btn[data-value="negative"].active:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px var(--accent) !important;
}

/* Active primary buttons focus */
.btn.primary:focus, .btn.primary:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px var(--accent);
}

/* Segmented group vertical focus overrides */
.segmented-group.vertical .seg-btn[data-value="discharge"]:focus,
.segmented-group.vertical .seg-btn[data-value="discharge"]:focus-visible {
  background-color: rgba(147, 51, 234, 0.12) !important;
  color: #9333ea !important;
  box-shadow: inset 0 0 0 3px #9333ea;
}
.segmented-group.vertical .seg-btn[data-value="discharge"].active:focus,
.segmented-group.vertical .seg-btn[data-value="discharge"].active:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px #9333ea !important;
}

.segmented-group.vertical .seg-btn[data-value="pending_bloods"]:focus,
.segmented-group.vertical .seg-btn[data-value="pending_bloods"]:focus-visible {
  background-color: rgba(234, 88, 12, 0.12) !important;
  color: #ea580c !important;
  box-shadow: inset 0 0 0 3px #ea580c;
}
.segmented-group.vertical .seg-btn[data-value="pending_bloods"].active:focus,
.segmented-group.vertical .seg-btn[data-value="pending_bloods"].active:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px #ea580c !important;
}

.segmented-group.vertical .seg-btn[data-value="handover"]:focus,
.segmented-group.vertical .seg-btn[data-value="handover"]:focus-visible {
  background-color: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
  box-shadow: inset 0 0 0 3px #0284c7;
}
.segmented-group.vertical .seg-btn[data-value="handover"].active:focus,
.segmented-group.vertical .seg-btn[data-value="handover"].active:focus-visible {
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px #0284c7 !important;
}

.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 3px rgba(0, 122, 122, 0.2); }
.btn.danger { background: transparent; color: var(--red); border-color: rgba(239,68,68,0.2); }
.btn.small { padding: 7px 12px; font-size: var(--fs-sm); min-height: 40px; }

.override-btn:hover, .select-btn:hover, .seg-btn:hover { 
  background-color: var(--bg); 
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
}

.override-btn.amber.active { background-color: var(--amber); color: white; border-color: var(--amber); }
.override-btn.red.active { background-color: var(--red); color: white; border-color: var(--red); }

.select-btn.active, .seg-btn.active { background: var(--accent); color: white !important; border-color: var(--accent); }
.select-btn.safe.active { background-color: var(--muted); border-color: var(--muted); color: #fff; opacity: 0.8; }

.button-group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* --- Segmented Controls --- */
.segmented-group { 
  display: flex; width: 100%; max-width: 400px; 
  background: var(--input-bg); border: 1px solid var(--line); 
  border-radius: 12px; overflow: hidden; 
}

.segmented-group.vertical {
  flex-direction: column;
  max-width: 100%;
}

.segmented-group.vertical .seg-btn {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
  text-align: left;
  padding: 12px 16px;
  min-height: 48px;
}

.segmented-group.vertical .seg-btn:last-child {
  border-bottom: none;
}

.segmented-group.vertical .seg-btn[data-value="discharge"].active {
  background: #9333ea;
  border-color: #9333ea;
}
.segmented-group.vertical .seg-btn[data-value="pending_bloods"].active {
  background: #ea580c;
  border-color: #ea580c;
}
.segmented-group.vertical .seg-btn[data-value="handover"].active {
  background: #0284c7;
  border-color: #0284c7;
}
.segmented-group.vertical .seg-btn[data-value="medical_rounding"].active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

.seg-btn { 
  flex: 1; border: none; border-radius: 0; margin: 0; 
  background: transparent; min-height: 44px; color: var(--muted); 
  min-width: 60px;
}
.seg-btn:first-child { border-right: 1px solid var(--line); }
.seg-btn[data-value="false"].active { background: var(--muted); opacity: 0.8; color: white; border-color: var(--muted); } 
.seg-btn[data-value="true"].active { background: var(--accent); }
.seg-btn[data-value="negative"].active { background: var(--muted); opacity: 0.8; color: white; border-color: var(--muted); }
.seg-btn[data-value="positive"].active { background: var(--accent); }
/* Make lactate Stable button grey like Hb Stable */
.btn.quick-select[data-value="Stable"].active { background: var(--muted); opacity: 0.8; color: white; border-color: var(--muted); }

/* --- Radio & Checkbox Segmented Groups --- */
.radio-segmented-group {
  display: flex;
  width: 100%;
  max-width: 400px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.radio-segmented-group:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2) !important;
}

.radio-segmented-group label {
  flex: 1;
  margin-bottom: 0 !important;
  text-align: center;
  padding: 10px 10px;
  white-space: nowrap;   /* "Post-Stepdown" was wrapping to a second line */
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
}

.radio-segmented-group label:last-child {
  border-right: none;
}

/* A grade that doesn't exist for the selected team. display:none rather than visibility, so
   the remaining buttons take the whole width instead of leaving a gap. */
.radio-segmented-group label[hidden] { display: none; }
/* :last-child is structural and doesn't follow what's on screen, so the visible end of a
   group with a hidden button is marked by JS - otherwise its divider doubles the border. */
.radio-segmented-group label.rsg-edge { border-right: none; }

.radio-segmented-group input[type="radio"],
.radio-segmented-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.radio-segmented-group label:has(input:checked) {
  background: var(--accent);
  color: white;
}

/* Radio segmented group label focus styles */
.radio-segmented-group label:focus-within {
  background-color: rgba(15, 118, 110, 0.12) !important;
  box-shadow: inset 0 0 0 3px var(--accent) !important;
  color: var(--accent) !important;
  z-index: 2;
}

.radio-segmented-group label:has(input:checked):focus-within {
  background-color: var(--accent) !important;
  color: white !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
  z-index: 2;
}

/* --- Chips (Fixed Layout) --- */
.comorbidity-group-label {
    width: 100%;
    font-size: var(--fs-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    font-weight: var(--fw-semibold);
    margin-top: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
}
.comorbidity-group-label:first-of-type { margin-top: 0; }

.toggle-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; 
  background-color: var(--card); 
  padding: 9px 14px; border-radius: 10px; 
  border: 1px solid var(--line); cursor: pointer; transition: all 0.2s ease; 
  margin-bottom: 0; font-weight: var(--fw-medium); color: var(--muted); font-size: var(--fs-sm);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.toggle-label:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08); }
.toggle-label input[type="checkbox"]:focus-visible + .toggle-label,
.toggle-label:has(input:focus-visible),
.toggle-label:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.toggle-label.active { background-color: var(--accent); color: white; border-color: var(--accent); }
.toggle-label .state { font-weight: var(--fw-semibold); font-size: var(--fs-xs); color: var(--muted); }
.toggle-label.active .state { color: #fff; }
.toggle-label .state::after { content: "+"; }
.toggle-label.active .state::after { content: "✓"; }

/* Grid Layout for Chips */
.comorbidity-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
  gap: 8px; 
  width: 100%; 
  margin-bottom: 12px; 
}

/* --- KPI / Dashboard --- */
.kpi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; }
.kpi .box { background: linear-gradient(to bottom, #ffffff, #fafbfc); border: 1px solid var(--line); padding: 14px; border-radius: 12px; text-align: center; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }

#categoryBox { padding: 18px 14px; border-width: 2px; transition: all 0.2s; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); }
#categoryBox h3 { font-size: var(--fs-3xl); margin-top: 4px; font-weight: var(--fw-bold); }

.kpi .box h3 { margin: 0; font-size: var(--fs-2xl); }
.kpi .box small { color: var(--muted); font-size: var(--fs-sm); }

/* Flags listed under their own count. */
.kpi .box.flag-box { text-align: left; }
.kpi .box.flag-box small { display: block; text-align: center; }
.kpi .box.flag-box h3 { text-align: center; }
.kpi .box.flag-box.red h3 { color: var(--red); }
.kpi .box.flag-box.amber h3 { color: var(--amber); }
.flag-box-list { margin: 8px 0 0 0; padding: 0; list-style: none; }
.flag-box-list:empty { display: none; }
.flag-box-list li {
  font-size: var(--fs-xs);
  line-height: 1.35;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.flag-box.red .flag-box-list li { color: #b91c1c; }
.flag-box.amber .flag-box-list li { color: #92400e; }

/* Risks the rules deliberately discounted. */
.suppressed-list {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.suppressed-list:empty { display: none; }
.suppressed-list .suppressed-title {
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

/* #completeness_nudge removed - it is a notice now, styled by .notice-info. */

.status { font-weight: var(--fw-semibold); }
.status.red { color: var(--red); } 
.status.amber { color: var(--amber); } 
.status.green { color: var(--green); }

/* --- Unified Headings --- */
.section-title, .question-label, .bold-heading { 
    margin-bottom: 10px; 
    font-size: var(--fs-lg); 
    font-weight: var(--fw-semibold); 
    color: var(--accent); 
    display: block;
    letter-spacing: -0.01em;
}

/* --- Bloods Grid (Specific) --- */
.bloods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;}
.blood-item { position: relative; } 
.blood-item label { margin-bottom: 4px; font-weight: var(--fw-semibold); color: var(--accent); }
.blood-item input { font-size: var(--fs-base); padding: 8px; width: 100%; }

.trend-buttons { display: flex; justify-self: end; margin-top:4px;}
.trend-btn { 
  font-size: var(--fs-xs); border: 1px solid var(--line); background: transparent; 
  border-radius: 6px; width: 24px; height: 24px; display: flex; 
  align-items: center; justify-content: center; cursor: pointer; 
  color: var(--muted); padding: 0; margin-left: 2px;
}
.trend-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* --- Highlights --- */
.flag-amber { 
    box-shadow: 0 0 0 2px var(--amber) !important; 
    border-color: var(--amber) !important; 
    z-index: 5;
}
.flag-red { 
    box-shadow: 0 0 0 2px var(--red) !important; 
    border-color: var(--red) !important; 
    z-index: 5;
}

.blood-abnormal { 
    border-color: var(--red) !important; 
    background-color: rgba(239,68,68,.08) !important; 
}
.blood-abnormal input {
    border-color: var(--red);
    color: var(--red);
    font-weight: var(--fw-semibold);
}

.range-subtext {
    font-size: var(--fs-hint);
    color: var(--muted);
    margin-top: 4px;
    display: block;
    text-align: right;
    width: 100%;
}

/* Therapeutic target for INR and APTT. Deliberately quiet - it sits under the value and only
   earns attention when it is empty on a patient whose clotting is deranged. */
.target-input {
    font-size: var(--fs-hint);
    margin-top: 4px;
    padding: 3px 6px;
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--text);
}

.target-input:focus {
    border-style: solid;
    border-color: var(--accent);
}

/* --- Animations --- */
@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(0, 122, 122, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(0, 122, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 122, 122, 0); }
}

.follow-up-plan {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
}

.follow-up-plan .section-title { margin-bottom: 6px; }

/* Discharge prompt. Was a block of inline styles built in logic.js, and pulsed - which meant
   it was animating for attention at the same time as several other banners. */
.discharge-prompt-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.discharge-prompt-question {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: 16px;
}

/* Offered suppression. Quiet by design - it is proposing that a risk be discounted, which
   should never look like an alert. */
.downtrend-suggestion[hidden] { display: none; }
.downtrend-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--muted);
    border: 1px dashed var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

/* Shared by the age and LOS mitigators - both were inline styles on the input. */
.mitigate-reason-input {
    font-size: var(--fs-hint);
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text);
}

.bloods-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bloods-date-row label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: var(--fw-medium);
}

.bloods-date-row input { width: auto; flex: 0 1 auto; }

.bloods-panel-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.prev-bloods-hint[hidden] { display: none; }
.prev-bloods-hint {
    font-size: var(--fs-xs);
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

/* --- Importer Styles --- */
.prev-datum { 
    color: var(--blue-hint); 
    font-size: var(--fs-xs); 
    font-weight: var(--fw-semibold); 
    margin-left: 8px; 
    display: inline-block; 
    font-style: italic;
    white-space: normal;
    max-width: 100%;
}

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; justify-content: center; align-items: center; }
.modal-content { background: var(--card); padding: 24px; border-radius: 12px; width: 90%; max-width: 600px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 16px; }
.modal-textarea { width: 100%; height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-body); resize: vertical; }

/* Delimited line destined for Excel - fixed width makes it scannable before pasting. */
#handoverLine { font-family: var(--font-mono); font-size: var(--fs-sm); }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }

/* Small centred confirmation dialog. Previously each of these was a block of inline styles
   repeating the overlay geometry; they now share .modal-overlay / .modal-content. */
.modal-confirm { max-width: 460px; text-align: center; padding: 28px; gap: 0; }
.modal-confirm-icon { font-size: var(--fs-2xl); margin-bottom: 12px; }
.modal-confirm-title { margin: 0 0 12px 0; color: var(--accent); font-size: var(--fs-lg); }
.modal-confirm-body { margin: 0 0 20px 0; color: var(--text); font-size: var(--fs-base); line-height: var(--lh-body); }
.modal-confirm-note { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.modal-confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal-confirm-actions .btn { padding: 10px 24px; }
.btn-confirm-yes { background: var(--green); color: #fff; border-color: var(--green); }

#prevRisksBox {
    display: none;
    margin-top: 12px;
    padding: 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    color: #3730a3;
    font-size: var(--fs-sm);
}
#prevRisksBox h4 { margin: 0 0 6px 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
#prevRisksList { margin: 0; padding-left: 16px; }


/* --- Footer --- */
footer { 
  position: fixed; bottom: 0; left: 0; width: 100%; background: var(--card); 
  border-top: 1px solid var(--line); padding: 8px 16px; 
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
  gap: 8px 12px; box-sizing: border-box; z-index: 50; 
  padding-left: calc(var(--sidebar-w) + 16px); /* Adjust for sidebar */
}

.footer-item { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.footer-item.reason { flex: 1 1 auto; min-width: 120px; }
.footer-score { padding: 6px 12px; border-radius: 8px; font-weight: var(--fw-semibold); text-align: center; flex-shrink: 0;}
.footer-buttons { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.footer-buttons .btn { white-space: nowrap; }

/* One button system rather than three ad-hoc inline treatments. */
.btn.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--fw-semibold); }
.btn.btn-primary:hover { background: #0b5d57; border-color: #0b5d57; color: #fff; }
.btn.btn-neutral { background: var(--input-bg); border: 1px solid var(--line); color: var(--text); font-weight: var(--fw-medium); }
.btn.btn-neutral:hover { background: var(--bg); color: var(--ink); }
.btn.btn-redcap { background: var(--maroon); border-color: var(--maroon); color: #fff; font-weight: var(--fw-semibold); }
.btn.btn-redcap:hover { background: #651630; border-color: #651630; color: #fff; }

.mobile-text { display: none; }

.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-sm); margin: 2px; border: 1px solid; font-weight: var(--fw-semibold); }
.tag.red { background: rgba(239,68,68,.08); color: var(--red); border-color: rgba(239,68,68,.2); }
.tag.amber { background: rgba(245,158,11,.08); color: var(--amber); border-color: rgba(245,158,11,.18); }
.tag.green { background: rgba(16,185,129,.07); color: var(--green); border-color: rgba(16,185,129,.12); }

hr { border: none; height: 1px; background-color: var(--line); margin: 24px 0 18px 0; }

/* --- Accordions --- */
.accordion-wrapper { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
.accordion-wrapper:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2) !important;
}
.accordion { 
  background-color: transparent; color: var(--ink); cursor: pointer; padding: 14px; 
  width: 100%; border: none; border-bottom: 1px solid var(--line); text-align: left; 
  outline: none; font-size: var(--fs-lg); font-weight: var(--fw-semibold); display: flex; 
  align-items: center; justify-content: space-between; 
  transition: background-color 0.15s;
}
.accordion:hover { background-color: var(--bg); }
.accordion:focus, .accordion:focus-visible {
    outline: none !important;
    background-color: rgba(15, 118, 110, 0.05) !important;
}
/* Chevron drawn from aria-expanded, so the open/closed marker can never drift out of
   step with the panel the way the old hand-written [+] / [-] strings did. */
.accordion .icon { color: var(--muted); font-size: var(--fs-lg); margin-left: 8px; }
.accordion .icon::before {
  content: '\203A'; /* › */
  display: inline-block;
  font-size: 1.4em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.accordion[aria-expanded="true"] .icon::before { transform: rotate(90deg); }
/* Open/closed is a class, not an inline style: #panel_devices used to carry an inline
   display:flex that outranked this rule, so it was open on every load whatever the chevron
   said, and Clear Data only appeared to fix it until the next reload. */
.panel { padding: 14px; background-color: transparent; display: none; overflow: hidden; }
.panel.open { display: block; }
#panel_devices.open { display: flex; flex-direction: column; gap: 12px; }

/* --- Dynamic Lists --- */
.device-entry { margin-bottom: 8px; }
.device-entry textarea { width: 100%; min-height: 44px; font-size: var(--fs-base); background: var(--input-bg); }

/* One device per row; wraps only when there genuinely isn't width for it. */
.device-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
}
.device-row .device-type {
  flex: 0 0 auto;
  min-width: 78px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--ink);
}
.device-row .device-date {
  flex: 0 0 auto;
  width: 128px;
  padding: 4px 6px;
  font-size: var(--fs-xs);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0;
}
.device-row .device-textarea {
  flex: 1 1 140px;
  min-width: 0;
  padding: 5px 8px;
  font-size: var(--fs-xs);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0;
}
.device-row .device-info-text {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.remove-entry {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--red);
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--fw-semibold);
}
.remove-entry:hover { background: #fef2f2; border-color: var(--red); }

/* --- Toasts --- */
.toast { 
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 110px; 
  background: var(--toast-bg); color: var(--toast-color); padding: 10px 14px; 
  border-radius: 8px; z-index: 60; display: none; font-weight: var(--fw-semibold); text-align: center; 
}
.toast.show { display: block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* --- Quick Selects --- */
.quick-select-group { margin-bottom: 6px; }
.btn.quick-select { padding: 4px 8px; font-size: var(--fs-xs); min-height: 28px; background: var(--bg); border-color: var(--line); color: var(--muted); font-weight: var(--fw-medium); }
.btn.quick-select:hover { background: var(--line); }
.btn.quick-select.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: var(--fw-semibold); }
.input-with-trend { display: grid; grid-template-columns: 1fr 80px; gap: 6px; align-items: center; }
.input-with-trend .trend-buttons { justify-self: end; }
.quick-select-container { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;}

.devices-subtitle { font-weight: var(--fw-semibold); color: var(--accent); margin-top: 10px; margin-bottom: 4px; font-size: var(--fs-base); }
.devices-input-group { margin-bottom: 12px; }

/* --- Override Buttons --- */
.override-btn {
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  border-radius: 8px;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s;
}
.override-btn.red {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}
.override-btn.amber {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.3);
}
/* CAT 3 was the one option left grey: it now carries its category colour like the other
   two, so the row reads as red / amber / green at a glance. */
.override-btn.green {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.3);
}
.override-btn.red:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}
.override-btn.green:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
}
.override-btn.amber:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}
.override-btn.amber.active { background: var(--amber); color: white; border-color: var(--amber); }
.override-btn.red.active { background: var(--red); color: white; border-color: var(--red); }

/* --- Media Queries --- */
@media (max-width: 900px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-8 { grid-column: span 12; }
  .grid { column-gap: 10px; row-gap: 12px; }
  input, textarea { font-size: var(--fs-lg); padding: 12px; }
  .btn, .select-btn, .seg-btn { padding: 10px 12px; font-size: var(--fs-base); min-height: 48px; }
  .segmented-group { max-width: 100%; }
  .review-strip { grid-template-columns: repeat(2, 1fr); }
  .btn.btn-import { min-height: 48px; width: 100%; }
  .patient-header-actions { width: 100%; }
}

@media (max-width: 600px) {
    .review-strip { grid-template-columns: 1fr; }

    body { padding-left: 0; padding-top: 60px; } /* Push down for top nav */
    .sidebar {
        width: 100%;
        height: 50px;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-top: 0;
        justify-content: space-around;
    }
    .sidebar-logo { display: none; }
    .nav-item { 
        margin-bottom: 0; 
        width: auto; 
        font-size: var(--fs-sm);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .nav-item .nav-icon {
        height: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-item .nav-label {
        display: none;
    }
    
    footer { padding-left: 16px; }

    .desktop-text { display: none; }
    .mobile-text { display: inline; }
    
    .footer-buttons .btn {
        padding: 8px 10px;
        font-size: var(--fs-xs);
    }
}

/* --- Floating Nav Button (Mobile/Tablet) --- */
.floating-nav-btn {
    position: fixed;
    bottom: 120px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 122, 122, 0.3);
    cursor: pointer;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    transition: transform 0.2s, box-shadow 0.2s;
}

.floating-nav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 122, 122, 0.4);
}

.floating-nav-btn:active {
    transform: scale(0.95);
}

/* Floating button hidden - header navigation already available on mobile */
@media (max-width: 768px) {
    .floating-nav-btn {
        display: none;
    }
}

/* Mobile Nav Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.mobile-nav-overlay.active {
    display: flex;
}

.mobile-nav-content {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-nav-link .nav-icon {
    font-size: 1.5rem; /* emoji icon, not text - deliberately off the type scale */
    flex-shrink: 0;
}

.mobile-nav-link .nav-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    flex: 1;
}

.mobile-nav-link:hover {
    background: var(--line);
    border-color: var(--accent);
}

.mobile-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--line);
}

#mobile-risk-badges {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

#mobile-risk-badges .badge {
    display: inline-block;
    margin-left: 4px;
}

/* Disclaimer Modal Specific Styling */
#disclaimerModal .modal-content {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A-E Section Cards */
.ae-section-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}
.ae-section-heading {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    margin-bottom: 10px;
}
.ae-comment-label {
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--muted) !important;
    margin-bottom: 4px !important;
}
.ae-section-card textarea {
    font-size: var(--fs-sm);
}

/* --- Unified Risk Gates Grid --- */
.risk-gates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 16px;
    align-items: start; /* Align cards at the top of each row to prevent stretching */
}

.risk-gates-grid .input-box {
    margin: 0 !important;
    padding: 14px !important;
    height: auto; /* Height fits content dynamically */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.gate-trigger-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px; /* Highly compact symmetrical baseline height to keep all trigger controls vertically aligned */
    width: 100%;
    box-sizing: border-box;
}

.risk-gates-grid .question-label,
.risk-gates-grid .section-title,
.risk-gates-grid .bold-heading {
    font-size: var(--fs-base) !important; /* Slightly smaller premium typography to fit text on a single line */
    margin-bottom: 4px !important;
}

.risk-gates-grid .segmented-group {
    max-width: 100%;
    margin-top: 8px;
}

/* Sub-panels nested inside trigger cards */
.risk-nested-panel {
    width: 100%;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    box-sizing: border-box;
}

/* The gates grid is three cards wide, so a drawer inside one card has roughly a third of
   the page to work with. The global 12-column spans are sized against the full page: a
   col-3 field lands at ~70px here, which clips a number input and its label (HFNP was the
   worst of it). Re-span against the card instead. */
.risk-nested-panel .grid > * { min-width: 0; }
.risk-nested-panel .grid > .col-3 { grid-column: span 6; }
.risk-nested-panel .grid > .col-6 { grid-column: span 12; }
/* NIV carries three fields that do read on one row - short numbers, short labels. */
.risk-nested-panel .grid > .nivOnly { grid-column: span 4; }

/* Subtle active outline highlight when a trigger is positive */
.risk-gates-grid .input-box:has(.seg-btn.active[data-value="true"]),
.risk-gates-grid .input-box:has(.seg-btn.active[data-value="positive"]),
.risk-gates-grid .input-box:has(.quick-select.active[data-value="Stable"]),
.risk-gates-grid .input-box:has(.quick-select.active[data-value="Worsening"]),
.risk-gates-grid .input-box:has(.quick-select.active[data-value="Improving"]) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(15, 23, 42, 0.05);
}

@media (max-width: 900px) {
    .risk-gates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .risk-gates-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Compact Age Mitigate Button --- */
.age-mitigate-btn {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: var(--card);
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-hint);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 6px;
}

.age-mitigate-btn:hover {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.15);
  transform: translateY(-1px);
}

.age-mitigate-btn.mitigated {
  border-color: var(--line);
  color: var(--muted);
  background: var(--input-bg);
  font-weight: var(--fw-semibold);
  box-shadow: none;
  cursor: default;
}

.age-mitigate-btn.mitigated:hover {
  background: var(--input-bg);
  color: var(--muted);
  box-shadow: none;
  transform: none;
}

/* --- Dynamic Column Alert Wrapper --- */
.age-column-wrapper {
  position: relative;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
  border-radius: 10px;
}

/* --- Sleek Compact Patient Details --- */
#section-patient {
    padding: 16px;
}

#section-patient h2 {
    font-size: var(--fs-lg) !important;
    margin-bottom: 0 !important;
}

#section-patient .grid {
    row-gap: 10px;
    column-gap: 10px;
}

#section-patient label {
    font-size: var(--fs-xs);
    margin-bottom: 3px;
    font-weight: var(--fw-semibold);
}

#section-patient input[type="text"],
#section-patient input[type="number"],
#section-patient input[type="date"],
#section-patient input[type="time"],
#section-patient textarea,
#section-patient select {
    padding: 7px 10px;
    font-size: var(--fs-sm);
    border-radius: 8px;
    min-height: 34px;
}

#section-patient textarea {
    min-height: 48px !important;
}

#section-patient .radio-segmented-group label {
    min-height: 34px;
    font-size: var(--fs-xs);
    padding: 5px 10px;
}

/* One height and one radius for every control in the review strip. These have to live
   here, after the #section-patient block above, or they lose to it on source order -
   the earlier .review-strip sizing rules were dead for exactly that reason. */
#section-patient .review-strip .radio-segmented-group,
#section-patient .review-strip input {
    border-radius: 10px;
}
/* 34px + the group's own 1px borders = the 36px the inputs get from box-sizing,
   so toggles and inputs finish exactly the same height. */
#section-patient .review-strip .radio-segmented-group label { min-height: 34px; }
#section-patient .review-strip input { min-height: 36px; }
#section-patient .review-strip .radio-segmented-group label,
#section-patient .review-strip input {
    padding: 6px 10px;
    font-size: var(--fs-xs);
}

#section-patient .quick-select-container {
    margin-top: 4px;
}

#section-patient .btn.small.quick-select {
    font-size: var(--fs-hint);
    padding: 4px 8px;
    min-height: 28px;
}

#section-patient .sub-label {
    margin-top: 2px;
    font-size: var(--fs-hint);
}

/* Touch targets for the review strip. Must come after the #section-patient sizing block
   above - same specificity, so source order is the only thing that decides it. */
@media (max-width: 600px) {
    #section-patient .review-strip .radio-segmented-group label { min-height: 42px; }
    #section-patient .review-strip input { min-height: 44px; }
    #section-patient .review-strip .radio-segmented-group label,
    #section-patient .review-strip input { font-size: var(--fs-sm); }
}




/* --- Print --------------------------------------------------------------
   Paper is the one copy of a review that leaves the building, survives the tab
   closing, and depends on someone remembering the confidential waste bin. The
   tool has no reason to be printed - its output goes to the DMR by clipboard -
   so an accidental Ctrl+P produces a notice rather than a patient's review. */
@media print {
    body * { visibility: hidden; }
    body::before {
        visibility: visible;
        content: "ALERT Nursing Risk Assessment Tool — printing is disabled. Reviews are transferred to the DMR by copy and paste; no paper copy should be created.";
        display: block;
        position: fixed;
        inset: 0;
        padding: 2cm;
        font-family: var(--font-ui);
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
        background: #fff;
    }
}


/* The discharge question, asked once the category is chosen because its answer depends on
   the category. Quiet on purpose: it is a question, not a recommendation, and certainly not
   a one-click discharge. */
.qr-discharge-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--quick);
  border-radius: 8px;
}
.qr-discharge-prompt.answered { border-left-color: var(--line); }
.qr-discharge-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.qr-discharge-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}


/* Ward and bed are one location, so they share one slot of the patient row and it stays six
   even boxes wide. min-width:0 on both halves because a grid/flex child defaults to its
   content's minimum width, and a select full of ward names will happily push the pair wider
   than the slot it is meant to sit in. */
.ward-bed-pair { display: flex; gap: 8px; align-items: flex-end; }
/* Bed is sized to what it has to hold and does not shrink: real labels are three characters -
   "24B", "3-2", "A4" - and a clipped bed number is unusable, where a clipped ward name is not.
   68px is three characters at the base size plus the 12px side padding and the border.
   The ward takes whatever is left and truncates, which is safe: almost every ward here is
   numbers and letters, and the few with long names are rare destinations. */
.ward-bed-pair .wb-bed  { flex: 0 0 68px; }
.ward-bed-pair .wb-ward { flex: 1 1 0; min-width: 0; }
.ward-bed-pair select,
.ward-bed-pair input { width: 100%; min-width: 0; }
.ward-bed-pair .wb-ward select { text-overflow: ellipsis; }
@media (max-width: 900px) {
  .ward-bed-pair { display: block; }
  .ward-bed-pair .wb-bed { margin-top: 12px; }
  .ward-bed-pair .wb-bed input { width: 100%; }
}

/* Quick Review only: what belongs on the Patient Factors and Readmission Risks lists, on
   hover or focus. Quick Review is where the two cards sit side by side with nothing else on
   screen to explain them; Full Review has the whole assessment around them for context, and
   adding a tooltip to every heading there is the clutter this mode exists to avoid.
   :focus-visible as well as :hover so it is reachable by keyboard and by tap. */
body.quick-review-active .card-title[data-hint] { position: relative; cursor: help; }
body.quick-review-active .card-title[data-hint]::before {
  content: '?';
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 10px; font-weight: var(--fw-semibold); color: var(--muted);
  vertical-align: middle;
}
body.quick-review-active .card-title[data-hint]:hover::after,
body.quick-review-active .card-title[data-hint]:focus-visible::after {
  content: attr(data-hint);
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  /* The card is narrow, so the tooltip is allowed to reach past it rather than wrapping to
     five lines - but never past the viewport on a phone. */
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  background: var(--ink); color: var(--card);
  border-radius: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-normal); line-height: 1.4;
  white-space: normal; text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* The Patient Factors add row is Quick Review's. In Full Review the card only ever shows what
   the last note carried in - mobility, diet, nutrition, PICS, sleep and the psych answer are
   all asked in the A-E panel, and a free-text box beside them is a second place to record the
   same thing, in wording the rules cannot read. The card's visibility is set in state.js. */
body:not(.quick-review-active) #patient_factors_wrapper .issue-add-row { display: none; }