/* ---------- Labs ---------- */
  .lab-controls{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:18px;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius-2);
    padding:12px 14px;box-shadow:var(--shadow-1);
  }
  /* "New results, not yet reviewed" — sits above the controls so it is read
     before the grid it is describing. */
  .lab-unreviewed{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:12px;padding:12px 14px;
    background:var(--crit-soft);border:1px solid var(--crit-border);
    border-radius:var(--radius-2);
  }
  .lab-workflow{
    margin-bottom:14px;padding:14px;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius-2);box-shadow:var(--shadow-1);
  }
  .lab-workflow-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--hairline)}
  .lab-workflow-row:first-of-type{border-top:0}
  .btn.active-toggle{background:var(--crit-soft);border-color:var(--crit-border);color:var(--crit);font-weight:600}
  .btn.active-toggle:hover{background:#fee2e2}
  .lab-search{position:relative;width:260px;max-width:100%}
  .lab-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
  .lab-search input{
    width:100%;padding:9px 12px 9px 35px;
    background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;
    font-size:14.5px;outline:none;
  }
  .lab-search input:focus{border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px var(--brand-ring)}

  .lab-section{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);overflow:hidden;
    margin-bottom:14px;box-shadow:var(--shadow-1);
  }
  .lab-section-head{
    padding:12px 16px;display:flex;align-items:center;gap:12px;
    background:var(--bg-soft);cursor:pointer;user-select:none;
    border-bottom:1px solid var(--border);
  }
  .lab-section-head:hover{background:var(--card-3)}
  .lab-section-head.collapsed{border-bottom:none}
  .lab-section-icon{
    width:30px;height:30px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  }
  .lab-section-icon svg{width:16px;height:16px}
  .lab-section-title{font-size:14px;font-weight:600;color:var(--ink);flex:1}
  .lab-section-badges{display:flex;gap:6px}
  .lab-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.lab-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .lab-table th{
    text-align:left;padding:10px 12px;
    font-size:10.5px;color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.05em;
    background:var(--bg-soft);white-space:nowrap;
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:5;
  }
  .lab-table th.col-test{position:sticky;left:0;z-index:6;min-width:180px;background:var(--bg-soft);border-right:1px solid var(--border)}
  .lab-table th.col-range{width:96px}
  .lab-table th.col-trend{width:90px;text-align:center}
  .lab-table th.col-time{text-align:center;min-width:96px}
  .lab-table th.col-latest{background:var(--brand-soft);color:var(--brand);border-left:1px solid #bfdbfe}
  .lab-table td{
    padding:9px 12px;border-bottom:1px solid var(--hairline);
    vertical-align:middle;color:var(--ink);
  }
  .lab-table td.cell-test{
    position:sticky;left:0;background:var(--card);z-index:4;
    font-weight:600;border-right:1px solid var(--border);
  }
  .lab-table td.cell-test small{display:block;font-size:10px;color:var(--faint);font-weight:400;margin-top:1px}
  .lab-table td.cell-range{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
  .lab-table td.cell-trend{text-align:center;padding:6px 8px}
  .lab-table td.cell-value{text-align:center;font-variant-numeric:tabular-nums}
  .lab-table td.cell-latest{background:#f8fbff;font-weight:700;border-left:1px solid var(--border)}
  /* .cell-test is a sticky column — mixed over --card so it stays opaque in
     dark, where --crit-soft/--warn-soft are translucent. */
  .lab-table tr.row-crit td.cell-test{border-left:3px solid var(--crit);background:color-mix(in srgb,var(--crit) 13%,var(--card))}
  .lab-table tr.row-crit td:not(.cell-test):not(.cell-latest){background:#fef7f7}
  .lab-table tr.row-crit td.cell-latest{background:var(--crit-soft)}
  .lab-table tr.row-warn td.cell-test{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 13%,var(--card))}
  .lab-table tr.row-warn td:not(.cell-test):not(.cell-latest){background:#fffaeb}
  .lab-table tr.row-warn td.cell-latest{background:var(--warn-soft)}
  .v-crit{color:var(--crit);font-weight:700}
  .v-warn{color:var(--warn);font-weight:700}
  .v-norm{color:var(--ink)}
  .v-miss{color:var(--faint)}
  /* Pulse animation for critical values (latest lab cell + current-hour monitoring cell). */
  @keyframes critPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,0.55); background-color:var(--crit-soft) }
    50%     { box-shadow:0 0 0 4px rgba(220,38,38,0)  ; background-color:#fee2e2 }
  }
  .lab-table td.cell-latest .v-crit{
    display:inline-block;padding:2px 6px;border-radius:6px;
    animation: critPulse 1.5s ease-in-out infinite;
  }
  .mon-table td.mon-cell.cell-now.crit{
    animation: critPulse 1.5s ease-in-out infinite;
  }
  .lab-arrow{color:var(--faint);font-size:10px;margin:0 3px;font-weight:400}
  .lab-ellipsis{
    display:inline-block;background:var(--bg-soft);border:1px solid var(--border);
    color:var(--muted);font-size:10px;padding:1px 5px;border-radius:8px;font-weight:600;
  }
  .cell-value{line-height:1.4}

  /* Cultures */
  .culture-card{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);overflow:hidden;
    margin-bottom:14px;box-shadow:var(--shadow-1);
  }
  .culture-head{
    padding:14px 16px;border-bottom:1px solid var(--hairline);
    display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  }
  .culture-head .grow{min-width:200px;flex:1}
  .culture-title{font-size:14px;font-weight:700;margin-bottom:4px}
  .culture-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px}
  .culture-body{padding:0 16px 14px}
  .culture-section{margin-top:14px}
  .culture-section h4{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
  .culture-organism{font-size:14px;font-weight:600;color:var(--ink-2);background:var(--bg-soft);padding:8px 12px;border-radius:8px;font-style:italic}
  .sens-table{width:100%;font-size:12.5px;border-collapse:collapse;margin-top:8px}
  .sens-table th,.sens-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--hairline)}
  .sens-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--bg-soft)}
  .sens-table tr:last-child td{border-bottom:none}

  /* ---------- Monitoring chart ---------- */
  .mon-wrap{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);overflow:hidden;box-shadow:var(--shadow-1);
  }
  .mon-toolbar{
    padding:12px 16px;border-bottom:1px solid var(--hairline);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-soft);
  }
  .mon-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.mon-table{
    width:100%;border-collapse:collapse;font-size:12.5px;
    font-variant-numeric:tabular-nums;
  }
  .mon-table th,.mon-table td{
    padding:8px 10px;border-bottom:1px solid var(--hairline);
    border-right:1px solid var(--hairline);
    text-align:center;white-space:nowrap;
  }
  .mon-table th{
    font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);font-weight:600;background:var(--bg-soft);
    position:sticky;top:0;z-index:5;
  }
  .mon-table th.col-row{
    text-align:left;position:sticky;left:0;z-index:6;
    min-width:140px;background:var(--bg-soft);border-right:1px solid var(--border);
  }
  .mon-table td.cell-row{
    text-align:left;font-weight:600;color:var(--ink);
    position:sticky;left:0;background:var(--card);z-index:4;
    border-right:1px solid var(--border);
  }
  .mon-table td.cell-row small{display:block;font-size:10px;color:var(--faint);font-weight:400;margin-top:1px}
  .mon-table th.col-now{background:var(--brand-soft);color:var(--brand);border-left:1px solid #bfdbfe}
  .mon-table td.cell-now{background:#f8fbff;font-weight:700;border-left:1px solid var(--border)}
  .mon-cell{
    position:relative;cursor:pointer;color:var(--ink);
  }
  .mon-cell.crit{color:var(--crit);font-weight:700}
  .mon-cell.warn{color:var(--warn);font-weight:700}
  .mon-cell.edited{
    background:var(--surface-edited);
  }
  .mon-cell.edited::after{
    content:"";position:absolute;top:3px;right:3px;
    width:6px;height:6px;border-radius:50%;background:var(--warn);
  }
  /* Masked-abnormal corner marker — a child <span>, NOT ::before, so it never
     collides with the flash ::before ping (::after is the edit dot). */
  .mon-mark{
    position:absolute; top:0; right:0; width:0; height:0; pointer-events:none;
    border-top:9px solid var(--crit); border-left:9px solid transparent;
  }
  .mon-cell.mark-warn .mon-mark{ border-top-color:var(--warn); }
  #mon-pop{ position:fixed; z-index:60; max-width:320px; background:var(--card); color:var(--ink);
    border:1px solid var(--border-2); border-radius:10px; padding:10px 12px; font-size:12px;
    box-shadow:var(--shadow-2); pointer-events:none; display:none; }
  #mon-pop .mp-h{ font-weight:600; margin-bottom:4px; }
  #mon-pop .mp-r{ display:flex; justify-content:space-between; gap:16px; color:var(--ink-2); margin:2px 0; }
  #mon-pop .lab-mp-r{display:block;margin:0;padding:6px 0;border-top:1px solid var(--hairline)}
  #mon-pop .lab-mp-r span{display:block;line-height:1.3}
  #mon-pop .lab-mp-r time{display:block;margin-top:2px;color:var(--faint);font-size:11px;line-height:1.3}
  #mon-pop .mp-alert{ margin:6px 0 4px; padding:6px 8px; border-radius:6px; }
  #mon-pop .mp-alert.crit{ background:rgba(255,82,102,.14); color:var(--crit); }
  #mon-pop .mp-alert.warn{ background:rgba(245,158,11,.16); color:var(--warn); }
  #mon-pop .mp-sources{margin-top:7px;padding-top:6px;border-top:1px solid var(--hairline)}
  #mon-pop .mp-source{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin-top:4px;color:var(--ink-2)}
  #mon-pop .mp-source b{font-size:10px;color:var(--brand-2);white-space:nowrap}
  #mon-pop .mp-source span{min-width:0;white-space:normal;line-height:1.3}
  #mon-pop .mp-foot{ color:var(--faint); margin-top:4px; }
  .lab-signal-chip{cursor:help}
  .mon-section-row td{
    background:var(--card-3);color:var(--ink-2);font-weight:700;
    font-size:11px;text-transform:uppercase;letter-spacing:.05em;
    text-align:left;
  }
  .mon-section-row td.cell-row{background:var(--card-3)}

  /* Shift header */
  .mon-shift-bar{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);padding:10px 14px;margin-bottom:14px;
    box-shadow:var(--shadow-1);
  }
  .mon-shift-bar .chip{padding:3px 10px}

  /* Sparkline strip */
  .mon-sparks{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1px;background:var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .mon-spark{background:var(--card);padding:10px 14px}
  .spark-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;gap:8px}
  .spark-label{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spark-now{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
  .spark-now small{font-size:10px;color:var(--faint);font-weight:400;margin-left:2px}
  .spark-now.crit{color:var(--crit)}
  .spark-now.warn{color:var(--warn)}
  .spark-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:3px;gap:8px}

  /* Full graph view */
  .mon-table-panel[hidden],.mon-graph-panel[hidden]{display:none}
  .mon-graph-panel{
    padding:14px;background:linear-gradient(180deg,var(--card),var(--bg-soft));
  }

  /* Segmented category tab row (Flow sheet · Vitals · Ventilation · …) */
  .mon-tab-row{
    display:flex;gap:4px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--hairline);
  }
  .btn.mon-tab{
    flex:0 0 auto;white-space:nowrap;border:1px solid transparent;background:transparent;
    color:var(--muted);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;
  }
  .btn.mon-tab:hover{color:var(--ink);background:var(--surface-hover)}
  .btn.mon-tab.active{
    background:var(--card);color:var(--brand-2);border-color:var(--border);box-shadow:var(--shadow-1);
  }
  .mon-graph-hint{margin-left:auto;color:var(--muted)}
  .mon-graph-hint b{color:var(--brand-2)}

  .mon-graph-section{margin-bottom:18px}
  .mon-graph-section:last-child{margin-bottom:0}
  .mon-graph-section-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:2px 2px 10px;
  }
  .mon-graph-section-title{
    font-size:11px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-2);font-weight:800;
  }
  .mon-graph-section-count{font-size:11px;color:var(--faint);font-weight:600}
  .mon-graph-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:12px;align-items:stretch;
  }
  .mon-graph-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:860px){.mon-graph-grid-2col{grid-template-columns:1fr}}
  .mon-graph-card{
    --graph-accent:var(--t-hr);
    position:relative;min-width:0;overflow:hidden;
    background:var(--card);border:1px solid var(--border);border-radius:5px;
    display:flex;flex-direction:column;
  }
  .mon-graph-card.status-warn{border-color:var(--warn-border)}
  .mon-graph-card.status-crit{border-color:var(--crit-border)}
  /* Compact monitor-style header: name (+swatch) · unit/source · readout · chip */
  .mon-graph-head{
    display:flex;align-items:center;gap:9px;min-width:0;
    padding:8px 11px;border-bottom:1px solid var(--border);background:var(--bg-soft);
  }
  .mon-graph-name{
    display:inline-flex;align-items:center;gap:6px;min-width:0;
    color:var(--graph-accent);font-size:12.5px;font-weight:800;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mon-graph-name::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--graph-accent)}
  .mon-graph-unit{flex:none;font-size:10px;color:var(--faint);font-weight:600}
  .mon-graph-now{
    margin-left:auto;flex:none;color:var(--ink);font-size:19px;line-height:1;
    font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .mon-graph-now small{font-size:10px;color:var(--faint);font-weight:600;margin-left:2px}
  .mon-graph-now.status-crit{color:var(--crit-on-fill)}
  .mon-graph-now.status-warn{color:var(--warn-on-fill)}
  .mon-graph-chip{
    flex:none;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    padding:2px 6px;border-radius:3px;border:1px solid var(--ok-border);background:var(--ok-soft);color:var(--ok);
  }
  .mon-graph-chip.st-warn{border-color:var(--warn-border);background:var(--warn-soft);color:var(--warn-on-fill)}
  .mon-graph-chip.st-crit{border-color:var(--crit-border);background:var(--crit-soft);color:var(--crit-on-fill)}
  .mon-graph-svg-wrap{height:196px;background:var(--card)}
  .mon-graph-svg{display:block;width:100%;height:100%}
  .mon-graph-gridmin{stroke:color-mix(in srgb,var(--hairline) 60%,transparent);stroke-width:.5}
  .mon-graph-gridmaj{stroke:color-mix(in srgb,var(--border) 60%,transparent);stroke-width:.8}
  .mon-graph-frame{stroke:var(--border-2);stroke-width:1.1;fill:none}
  .mon-graph-axis-label{fill:var(--muted);font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .mon-graph-time-label{fill:var(--faint);font-size:9px;font-weight:650;font-variant-numeric:tabular-nums}
  .mon-graph-normal-band{fill:var(--ok);opacity:.10}
  .mon-graph-threshold{stroke:var(--crit);stroke-width:1;stroke-dasharray:3 3;opacity:.7;fill:none}
  .mon-graph-threshold.warn{stroke:var(--warn);stroke-dasharray:2 3;opacity:.6}
  .mon-graph-line{fill:none;stroke:var(--graph-accent);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
  /* The high-low of every raw sample inside a plotted column. Without it a card
     of bucket means shows a patient who never had a bad minute. */
  .mon-graph-envelope{fill:var(--graph-accent);opacity:.15}
  /* Where a jump from a bedside lane lands. */
  .mon-graph-card.is-focused{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .mon-graph-line.dia{stroke-width:1.4;stroke-dasharray:3 3;opacity:.55}
  .mon-graph-point{stroke-width:0}
  .mon-graph-point.dia{fill:var(--muted)}
  .mon-graph-point.latest{stroke:var(--card);stroke-width:1.4}
  .mon-graph-last-label{fill:var(--ink);font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
  .mon-graph-seglabel{fill:var(--ink);font-size:9.5px;font-weight:700}
  /* Hover crosshair + snap dot (filled by the pointer handler). */
  .mon-graph-svg-wrap{cursor:crosshair}
  .mon-graph-cursor{pointer-events:none}
  .mon-graph-cursor-line{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3;opacity:.8}
  .mon-graph-cursor-dot{fill:var(--graph-accent);stroke:var(--card);stroke-width:1.4}
  .mon-graph-cursor-dot.dia{fill:var(--muted)}
  /* Floating value tooltip (appended to <body>, positioned in screen coords). */
  .mon-graph-tip{
    position:fixed;z-index:200;pointer-events:none;
    display:flex;flex-direction:column;gap:1px;
    padding:5px 9px;border-radius:7px;
    background:var(--ink);color:var(--card);
    border:1px solid var(--border-2);box-shadow:var(--shadow-2);
    font-size:12px;line-height:1.25;font-variant-numeric:tabular-nums;
  }
  .mon-graph-tip[hidden]{display:none}
  .mon-graph-tip-v{font-weight:800}
  .mon-graph-tip-t{font-size:10px;font-weight:600;opacity:.72}
  .mon-graph-empty{
    height:100%;display:flex;align-items:center;justify-content:center;
    color:var(--faint);font-size:12px;font-weight:600;
  }
  /* Parameter absent from this patient's feed — one quiet line, no dead plot.
     Self-aligns to the top of its grid row so it never stretches to card height. */
  .mon-graph-card.is-absent{align-self:start;border-style:dashed;opacity:.72}
  .mon-graph-card.is-absent .mon-graph-head{border-bottom:0}
  .mon-graph-absent-note{
    margin-left:auto;flex:none;font-size:10.5px;font-weight:700;color:var(--faint);
    letter-spacing:.02em;white-space:nowrap;
  }
  .mon-graph-foot{
    display:flex;gap:0;border-top:1px solid var(--border);background:var(--bg-soft);
  }
  .mon-graph-foot span{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:6px 4px;border-right:1px solid var(--border);
    font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  }
  .mon-graph-foot span:last-child{border-right:0}
  .mon-graph-foot b{font-size:13px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0}
  .mon-graph-foot .up b{color:var(--crit)}
  .mon-graph-foot .down b{color:var(--brand-2)}
  @media (max-width:720px){
    .mon-graph-panel{padding:10px}
    .mon-graph-grid{grid-template-columns:1fr}
    .mon-graph-section-head{align-items:flex-start;flex-direction:column;gap:3px}
  }

  /* Midnight column divider */
  .mon-table th.col-midnight,
  .mon-table td.cell-midnight{border-left:2px solid #cbd5e1}

  /* Touch-entry flash animation — fires when a touch widget pushes a value into the chart */
  @keyframes monFlash {
    0%   { box-shadow: inset 0 0 0 3px var(--brand); background:var(--brand-soft); transform:scale(1.10); color:var(--brand-2) }
    20%  { box-shadow: inset 0 0 0 3px var(--brand); background:var(--brand-soft); transform:scale(1.10) }
    100% { box-shadow: inset 0 0 0 0 transparent;   background:var(--warn-soft); transform:scale(1) }
  }
  @keyframes monPing {
    0%   { transform:scale(1);   opacity:0.55 }
    100% { transform:scale(2.2); opacity:0 }
  }
  .mon-cell.flash{
    animation: monFlash 1.6s ease-out;
    position:relative; z-index:5;
  }
  .mon-cell.flash::before{
    content:""; position:absolute; inset:-1px;
    border:2px solid var(--brand); border-radius:4px;
    animation: monPing 1.0s ease-out forwards;
    pointer-events:none;
  }

  /* Categorical cell styling */
  .mon-cell.cell-cat{font-size:11px;font-weight:600;letter-spacing:.02em}
  .mon-cell.cell-context{
    max-width:150px;overflow:hidden;text-overflow:ellipsis;
    text-align:left;font-size:11px;font-weight:600;
  }
  .mon-cell .dim{color:var(--faint)}
  .mon-table td.mon-cell.cell-now.crit{background:#fee2e2}
  .mon-table td.mon-cell.cell-now.warn{background:#fef3c7}

  /* Temperature row gets soft red tint to mirror paper plot strip */
  .mon-table tr.row-temp td.mon-cell{background:linear-gradient(180deg,var(--surface-edited) 0%,var(--card) 100%)}
  .mon-table tr.row-temp td.mon-cell.cell-now{background:#ffe4d6}
  .mon-table tr.row-temp td.mon-cell.crit{background:#fecaca}
  .mon-table tr.row-temp td.mon-cell.warn{background:#fed7aa}
  .mon-table tr.row-temp td.cell-row{background:linear-gradient(180deg,var(--surface-edited) 0%,var(--card) 100%)}

  /* Legend */
  .mon-legend{padding:10px 14px;border-top:1px solid var(--hairline);background:var(--bg-soft)}
  .mon-legend .ledot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
  .mon-legend .chip{font-weight:500;background:var(--card)}

  /* ---------- I/O (paper-faithful, hours-as-rows) ---------- */
  .io-controls{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);padding:10px 14px;margin-bottom:14px;
    display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    box-shadow:var(--shadow-1);
  }
  .io-layout{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
  }
  @media (min-width:1100px){
    .io-layout{ grid-template-columns: minmax(0,1fr) 280px }
  }
  .io-grid-wrap{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);overflow:auto;box-shadow:var(--shadow-1);
    max-height:72vh;
  }
  table.io-grid{
    width:100%;border-collapse:separate;border-spacing:0;
    font-size:12.5px;font-variant-numeric:tabular-nums;
  }
  .io-grid th,.io-grid td{
    border-bottom:1px solid var(--hairline);
    border-right:1px solid var(--hairline);
    padding:7px 8px;text-align:center;white-space:nowrap;
  }
  .io-grid thead th{
    background:var(--bg-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:600;
    position:sticky;top:0;z-index:5;
  }
  .io-grid thead tr:first-child th{top:0}
  .io-grid thead tr:nth-child(2) th{top:30px}
  .io-grid th.grp-in{background:var(--brand-soft);color:var(--brand);border-bottom:1px solid #bfdbfe}
  .io-grid th.grp-out{background:var(--info-soft);color:var(--info);border-bottom:1px solid #a5f3fc}
  .io-grid th.col-time,.io-grid td.col-time{
    position:sticky;left:0;background:var(--card);z-index:6;
    text-align:left;font-weight:600;color:var(--ink);
    border-right:1.5px solid var(--border);
    min-width:78px;
  }
  .io-grid thead th.col-time{z-index:8;background:var(--bg-soft)}
  .io-grid td.cell-num{cursor:pointer;color:var(--ink-2)}
  .io-grid td.cell-num:hover{background:var(--brand-soft)}
  .io-grid td.cell-num.has-val{color:var(--ink);font-weight:500}
  .io-grid td.cell-num.dim{color:var(--faint)}
  .io-grid td.cell-num.edited{background:#fef3c7;color:var(--warn);font-weight:700}
  .io-grid td.col-tin,.io-grid th.col-tin{background:var(--brand-soft);color:var(--brand);border-left:1.5px solid #bfdbfe;border-right:1.5px solid #bfdbfe}
  .io-grid td.col-tout,.io-grid th.col-tout{background:var(--info-soft);color:var(--info);border-left:1.5px solid #a5f3fc;border-right:1.5px solid #a5f3fc}
  /* Running balance pins to the right edge, mirroring the sticky time column on
     the left. It is the derived number the chart exists to produce, and it used
     to be the first thing to scroll out of view — clipped mid-word behind the
     summary rail at 1440px. Both anchors stay put while the intake and output
     columns scroll between them.
     The tint is mixed over --card rather than a flat #fffbeb so it stays opaque
     in dark mode (--warn-soft is translucent there, which would let the
     scrolling cells show through a sticky column). */
  .io-grid td.col-bal,.io-grid th.col-bal{
    position:sticky;right:0;z-index:6;
    background:color-mix(in srgb,var(--warn) 8%,var(--card));
    color:var(--ink);font-weight:600;
    border-left:1.5px solid var(--border);
  }
  .io-grid thead th.col-bal{z-index:8}
  .io-grid td.col-bal.pos{color:var(--ok)}
  .io-grid td.col-bal.neg{color:var(--warn)}
  .io-grid tr.row-now td{background:#f0f9ff}
  .io-grid tr.row-now td.col-time{background:#dbeafe;color:var(--brand-2);font-weight:700}
  .io-grid tr.row-now td.col-tin{background:#dbeafe}
  .io-grid tr.row-now td.col-tout{background:#cffafe}
  /* Current hour, still in the sticky column — opaque in both themes. */
  .io-grid tr.row-now td.col-bal{background:color-mix(in srgb,var(--warn) 20%,var(--card))}
  .io-grid tr.row-day td{border-top:2px solid #cbd5e1}
  .io-grid tr.row-totals td{
    background:var(--card-3);font-weight:700;color:var(--ink);
    position:sticky;bottom:0;z-index:4;border-top:2px solid var(--border-2);
  }
  .io-grid tr.row-totals td.col-time{background:var(--border)}
  .io-summary-panel{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);padding:16px;
    box-shadow:var(--shadow-1);
    align-self:start; position:sticky; top:115px;
  }
  .io-summary-grid{display:flex;flex-direction:column;gap:8px}
  .io-summary-grid > div{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
  .io-summary-grid .lbl{color:var(--muted);font-weight:500}
  /* A fluid balance is one number. "+3330 mL" was wrapping between the figure
     and its unit whenever the label ran long, which reads as two values. */
  .io-summary-grid .val{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;flex:none}
  .io-summary-grid .lbl{min-width:0}
  .io-summary-grid .val.pos{color:var(--ok)}
  .io-summary-grid .val.neg{color:var(--warn)}
  .io-summary-grid .sep{height:1px;background:var(--hairline);margin:4px 0}
  .io-summary-grid .hi{padding:8px 10px;background:var(--bg-soft);border-radius:8px;font-size:13.5px}
  .io-summary-grid .hi .val{font-size:16px;font-weight:700}

  /* legacy summary kept below for fallbacks */
  .io-wrap{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2);overflow:hidden;box-shadow:var(--shadow-1);
  }
  .io-summary{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--hairline);border-bottom:1px solid var(--hairline);
  }
  .io-stat{background:var(--card);padding:14px 16px}
  .io-stat .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .io-stat .val{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
  .io-stat.intake .val{color:var(--brand)}
  .io-stat.output .val{color:var(--info)}
  .io-stat.balance .val.pos{color:var(--ok)}
  .io-stat.balance .val.neg{color:var(--warn)}
  .io-stat .sub{font-size:11px;color:var(--muted);margin-top:2px}
  .io-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.io-table{
    width:100%;border-collapse:collapse;font-size:12.5px;
    font-variant-numeric:tabular-nums;
  }
  .io-table th,.io-table td{padding:8px 10px;border-bottom:1px solid var(--hairline);border-right:1px solid var(--hairline);text-align:center;white-space:nowrap}
  .io-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--bg-soft);position:sticky;top:0;z-index:5}
  .io-table th.col-row{text-align:left;position:sticky;left:0;z-index:6;min-width:170px;background:var(--bg-soft);border-right:1px solid var(--border)}
  .io-table td.cell-row{text-align:left;font-weight:500;color:var(--ink-2);position:sticky;left:0;background:var(--card);z-index:4;border-right:1px solid var(--border)}
  .io-table td.cell-row small{display:block;font-size:10px;color:var(--faint);font-weight:400;margin-top:1px}
  .io-table tr.section-intake td.cell-row{color:var(--brand)}
  .io-table tr.section-output td.cell-row{color:var(--info)}
  .io-table tr.subhead td{background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;text-align:left}
  .io-table tr.subhead.out td{background:var(--info-soft);color:var(--info)}
  .io-table tr.balance td{background:var(--warn-soft);color:var(--warn);font-weight:700}
  .io-table td.col-total{font-weight:700;background:var(--bg-soft)}
  .io-table th.col-total{background:var(--hairline)}