/* Health: module styles. Chrome (surfaces, text, action, status) is the shell's:
   this file uses the role names from platform.css and never overrides them.
   The one thing Health owns is its DATA PALETTE below: a four-step severity
   scale and the confirmed/suspected pair have no token in the design system,
   so they are built from the system's danger and warning hues. Charts and
   severity scales may extend a status hue this way; nothing else may.
   Every text/ground pair here is 4.5:1 or better in its theme (tests/e2e/contrast.spec.js). */

body[data-module="health"] {
  /* severity: tint -> stronger tint -> danger -> deep danger, light theme (danger #b42318) */
  --sev-low-bg: #fbe9e7;      --sev-low-ink: #7a1a10;
  --sev-medium-bg: #f6cfc9;   --sev-medium-ink: #7a1a10;
  --sev-high-bg: #b42318;     --sev-high-ink: #ffffff;
  --sev-critical-bg: #7a1a10; --sev-critical-ink: #ffffff;
  /* visualisations: confirmed = danger, suspected = warning; the bar ramp steps are a
     shade stronger than the chip tints so a low bar still shows on the panel */
  --viz-confirmed: #b42318; --viz-suspected: #9a5200;
  --viz-sev-low: #f2b8b0; --viz-sev-medium: #e0675a; --viz-sev-high: #b42318; --viz-sev-critical: #7a1a10;
  --viz-health-green: var(--ok-ink); --viz-health-yellow: var(--warn-ink); --viz-health-red: var(--err-ink); --viz-health-unrated: var(--mute);
}
/* dark: the dark danger #ff8a7a is the full step, dark-danger grounds the tints, a lighter coral the deep step */
:root[data-theme="dark"] body[data-module="health"] {
  --sev-low-bg: #3a1a16;      --sev-low-ink: #ffb3a8;
  --sev-medium-bg: #552219;   --sev-medium-ink: #ffc9c1;
  --sev-high-bg: #ff8a7a;     --sev-high-ink: #1b0b08;
  --sev-critical-bg: #ffb3a8; --sev-critical-ink: #1b0b08;
  --viz-confirmed: #ff8a7a; --viz-suspected: #f0a54a;
  --viz-sev-low: #6b2a22; --viz-sev-medium: #a3453a; --viz-sev-high: #ff8a7a; --viz-sev-critical: #ffb3a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="health"] {
    --sev-low-bg: #3a1a16;      --sev-low-ink: #ffb3a8;
    --sev-medium-bg: #552219;   --sev-medium-ink: #ffc9c1;
    --sev-high-bg: #ff8a7a;     --sev-high-ink: #1b0b08;
    --sev-critical-bg: #ffb3a8; --sev-critical-ink: #1b0b08;
    --viz-confirmed: #ff8a7a; --viz-suspected: #f0a54a;
    --viz-sev-low: #6b2a22; --viz-sev-medium: #a3453a; --viz-sev-high: #ff8a7a; --viz-sev-critical: #ffb3a8;
  }
}
/* ---- end data palette ---- */

/* Row action icons (pencil edit, x remove, rotate-cw reactivate) — lead the row, never
   trail it (Sey is visual). Meaning also carried by title + aria-label. */
body[data-module="health"] a.icon-btn, body[data-module="health"] button.icon-btn {
  background: none; border: 0; padding: 0 .15rem; font: inherit; font-size: 1.05rem;
  color: var(--accent); cursor: pointer; text-decoration: none; line-height: 1;
}
body[data-module="health"] a.icon-btn:hover, body[data-module="health"] button.icon-btn:hover { color: var(--accent-hover); }
body[data-module="health"] .stars .star.off { color: var(--mute); }
body[data-module="health"] .stars .star.on svg.icon { fill: currentColor; }
body[data-module="health"] .stars svg.icon { width: 16px; height: 16px; }
body[data-module="health"] td.row-actions { width: 3.4rem; white-space: nowrap; }

body[data-module="health"] .notice {
  background: var(--warn-bg); color: var(--ink);
  border-radius: var(--radius-md); padding: .6rem .9rem;
}
@media (prefers-reduced-motion: reduce) { body[data-module="health"] * { transition: none !important; } }

/* Health and severity chips: soft ground + full-ink text, no border, always
   beside a word (never colour alone). Base .chip is the shell's. */
body[data-module="health"] .chip-green   { background: var(--ok-bg);    color: var(--ok-ink); }
body[data-module="health"] .chip-yellow  { background: var(--warn-bg);  color: var(--warn-ink); }
body[data-module="health"] .chip-red     { background: var(--err-bg);   color: var(--err-ink); }
body[data-module="health"] .chip-green::before  { content: "✓ "; }
body[data-module="health"] .chip-yellow::before { content: "● "; }
body[data-module="health"] .chip-red::before    { content: "✕ "; }
body[data-module="health"] .chip-dnc     { background: var(--purple-bg); color: var(--purple-ink); }   /* do-not-contact: its own hue, distinct from the health triad */
body[data-module="health"] .chip-unrated { background: var(--hover-row); color: var(--mute); }
body[data-module="health"] .chip-sev-low      { background: var(--sev-low-bg);      color: var(--sev-low-ink); }
body[data-module="health"] .chip-sev-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium-ink); }
body[data-module="health"] .chip-sev-high     { background: var(--sev-high-bg);     color: var(--sev-high-ink); }
body[data-module="health"] .chip-sev-critical { background: var(--sev-critical-bg); color: var(--sev-critical-ink); }

/* Filter bar */
body[data-module="health"] form.filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; }
body[data-module="health"] form.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--mute); gap: .15rem; }
body[data-module="health"] .panel label { line-height: 1.8; }
body[data-module="health"] .filter-actions { display: flex; align-items: center; gap: .75rem; }

body[data-module="health"] .field-error { color: var(--err-ink); font-size: .85rem; font-weight: 600; }

body[data-module="health"] .problem-card { padding: .7rem 0; border-bottom: 1px solid var(--line); }
body[data-module="health"] .problem-card:last-child { border-bottom: 0; }

/* Report: stat tiles (the shell's .tile, laid out in a grid) */
body[data-module="health"] .tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; margin-top: 1rem; }
body[data-module="health"] .tile-row .tile { padding: .85rem .95rem; }
body[data-module="health"] .tile-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--heading); }
body[data-module="health"] .tile .tile-sub, body[data-module="health"] .tile .tile-label span { display: inline; margin: 0; }
body[data-module="health"] .tile .tile-sub { font-size: .95rem; font-weight: 400; color: var(--mute); }
body[data-module="health"] .tile-label { color: var(--mute); font-size: .82rem; line-height: 1.35; margin-top: .15rem; }
/* Emphasis tiles: meaning, not decoration. Overdue and DNC-with-an-open-ticket
   are the err ground; the discipline tile is outlined. */
body[data-module="health"] .tile-rose      { background: var(--err-bg); border-color: transparent; }
body[data-module="health"] .tile-parchment { background: var(--warn-bg); border-color: transparent; }
body[data-module="health"] .tile-discipline { border-color: var(--accent); border-width: 2px; }

/* Report: HTML bar charts. Confirmed/suspected differ by lightness AND texture. */
body[data-module="health"] .barlist { display: flex; flex-direction: column; gap: .45rem; }
body[data-module="health"] .barrow { display: grid; grid-template-columns: 9rem 1fr max-content; gap: .6rem; align-items: center; }
body[data-module="health"] .barrow-label { font-size: .88rem; text-align: right; color: var(--mute); }
body[data-module="health"] .barrow-track { display: flex; gap: 2px; min-height: 14px; }
body[data-module="health"] .barrow-value { font-size: .85rem; color: var(--ink); white-space: nowrap; }
body[data-module="health"] .bar { display: inline-block; height: 14px; border-radius: 0 4px 4px 0; min-width: 3px; }
body[data-module="health"] .bar:first-child { border-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
body[data-module="health"] .bar-confirmed { background: var(--viz-confirmed); }
body[data-module="health"] .bar-suspected { background: var(--viz-suspected);
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.45) 4px 6px); }
body[data-module="health"] .bar-rate { background: var(--viz-sev-medium); }   /* magnitude meter — not the Confirmed hue */
body[data-module="health"] .bar-sev-low { background: var(--viz-sev-low); }
body[data-module="health"] .bar-sev-medium { background: var(--viz-sev-medium); }
body[data-module="health"] .bar-sev-high { background: var(--viz-sev-high); }
body[data-module="health"] .bar-sev-critical { background: var(--viz-sev-critical); }
body[data-module="health"] .chart-legend { font-size: .85rem; color: var(--mute); margin: .2rem 0 .8rem; }

/* Health trend: the status pairs' full-ink hues; Health is never colour alone. */
body[data-module="health"] .trend { display: flex; gap: 2px; align-items: flex-end; height: 140px; }
body[data-module="health"] .trendcol { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; }
body[data-module="health"] .trendseg { min-height: 2px; border-radius: 2px; }
body[data-module="health"] .trendseg-green { background: var(--viz-health-green); }
body[data-module="health"] .trendseg-yellow { background: var(--viz-health-yellow); }
body[data-module="health"] .trendseg-red { background: var(--viz-health-red); }
body[data-module="health"] .trendseg-unrated { background: var(--viz-health-unrated);
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.4) 4px 6px); }
body[data-module="health"] .trend-labels { display: flex; gap: 2px; margin-top: .25rem; }
body[data-module="health"] .trend-labels span { flex: 1; text-align: center; font-size: .72rem; color: var(--mute); }
body[data-module="health"] .swatch-health-green { background: var(--viz-health-green); }
body[data-module="health"] .swatch-health-yellow { background: var(--viz-health-yellow); }
body[data-module="health"] .swatch-health-red { background: var(--viz-health-red); }
body[data-module="health"] .swatch-health-unrated { background: var(--viz-health-unrated); }
body[data-module="health"] .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

/* Category dot (reports index): one small round mark. */
body[data-module="health"] .dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4rem; vertical-align: baseline; }
body[data-module="health"] .dot-rose { background: var(--err-ink); }

body[data-module="health"] .swatch-confirmed { background: var(--viz-confirmed); }
body[data-module="health"] .swatch-suspected { background: var(--viz-suspected);
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.45) 4px 6px); }
body[data-module="health"] .swatch-sev-low { background: var(--viz-sev-low); }
body[data-module="health"] .swatch-sev-medium { background: var(--viz-sev-medium); }
body[data-module="health"] .swatch-sev-high { background: var(--viz-sev-high); }
body[data-module="health"] .swatch-sev-critical { background: var(--viz-sev-critical); }
body[data-module="health"] .trend-line { stroke: var(--viz-confirmed); }
body[data-module="health"] .trend-dot { fill: var(--panel); stroke: var(--viz-confirmed); stroke-width: 2; }
body[data-module="health"] .trend-axis { fill: var(--mute); font-size: 11px; }

/* Timeline */
body[data-module="health"] ol.timeline { list-style: none; margin: 0; padding: 0; }
body[data-module="health"] .timeline-entry { padding: .6rem 0; border-bottom: 1px solid var(--line); }
body[data-module="health"] .timeline-entry:last-child { border-bottom: 0; }
body[data-module="health"] .timeline-entry.legacy { opacity: .65; }

/* Tabs */
/* The eight tabs wrap onto another row when the column is narrower than they are, so every tab, and the
   open one, stays in sight and the page never scrolls sideways (browser render pass 2026-10-31, decisions entry 5).
   Each tab is one line (icon and label never split) in the label type, and every tab carries the open tab's borders
   in transparent, so icons and labels sit at one height whichever tab is open (entry 23). */
body[data-module="health"] nav.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 2px solid var(--line); }
body[data-module="health"] nav.tabs .tab {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--mute);
  font-size: 14px; line-height: 20px; font-weight: 600;
  border: 1px solid transparent; border-top: 3px solid transparent; border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
body[data-module="health"] nav.tabs .tab svg.icon { width: 16px; height: 16px; vertical-align: 0; }
body[data-module="health"] nav.tabs .tab:hover { background: var(--hover-row); }
body[data-module="health"] nav.tabs .tab-active { color: var(--ink); background: var(--panel);
  border-color: var(--line); border-top-color: var(--accent);
  box-shadow: 0 2px 0 var(--panel); }

/* Quick-add: floating + bottom-right, everywhere, writers only. */
body[data-module="health"] .quick-add {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink); font-size: 1.7rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: background-color 120ms ease;
}
body[data-module="health"] .quick-add:hover { background: var(--accent-hover); }
body[data-module="health"] dialog#quick-add-dialog {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.25rem;
  background: var(--panel); color: var(--ink); width: min(24rem, 92vw);
}
body[data-module="health"] dialog#quick-add-dialog::backdrop { background: rgba(0, 0, 0, .45); }

/* Log-interaction modal (05 §4) */
body[data-module="health"] dialog#log-modal {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.25rem;
  background: var(--panel); color: var(--ink); width: min(34rem, 92vw);
}
body[data-module="health"] dialog#log-modal::backdrop { background: rgba(0, 0, 0, .45); }
body[data-module="health"] .field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
body[data-module="health"] .field-row label, body[data-module="health"] dialog#log-modal label { font-size: .85rem; color: var(--mute); }
body[data-module="health"] dialog#log-modal input, body[data-module="health"] dialog#log-modal select, body[data-module="health"] dialog#log-modal textarea { display: block; }
body[data-module="health"] fieldset.radio-row { border: 0; padding: 0; margin: .8rem 0 0; }
body[data-module="health"] fieldset.radio-row legend { font-size: .85rem; color: var(--mute); padding: 0 0 .25rem; }
body[data-module="health"] .radio-chip { display: inline-block; margin: 0 .35rem .35rem 0; }
body[data-module="health"] .radio-chip input { position: absolute; opacity: 0; }
body[data-module="health"] .radio-chip span {
  display: inline-block; padding: .3rem .8rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
body[data-module="health"] .radio-chip span:hover { border-color: var(--accent); }
body[data-module="health"] .radio-chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body[data-module="health"] .radio-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Today: reason filters and the reason column (spec 2026-10-12 §5) */
body[data-module="health"] nav.reason-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
body[data-module="health"] nav.reason-filters a {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); text-decoration: none; color: var(--ink); font-size: .9rem;
}
body[data-module="health"] nav.reason-filters a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body[data-module="health"] nav.reason-filters .count { font-size: .8rem; opacity: .8; }
body[data-module="health"] table.queue td.reason-cell { width: 2.2rem; color: var(--mute); }

/* Workbench grid (spec §6): rail · client · aside. The rail is a 44px strip until 1400px, where it may open to 210px. */
body[data-module="health"] .workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
body[data-module="health"] .rail .rail-list { display: none; }
body[data-module="health"] .rail .rail-strip { display: none; }
@media (min-width: 1100px) {
  body[data-module="health"] .workbench { grid-template-columns: 44px minmax(0, 1fr) 280px; }
  body[data-module="health"] .rail .rail-strip { display: flex; }
  body[data-module="health"] .workbench-aside, body[data-module="health"] .rail { position: sticky; top: var(--space-6); max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; }
   /* between 1100 and 1400 an open rail slides over the page instead of taking a track */
   /* overflow must be visible there: a scroll container would clip the 260px list to the 44px track */
  body[data-module="health"] .workbench[data-rail="open"] .rail { position: relative; overflow: visible; max-height: none; }
  body[data-module="health"] .workbench[data-rail="open"] .rail .rail-list { display: block; position: absolute; left: 0; top: 0; z-index: 25; width: 260px; box-shadow: var(--shadow-overlay); background: var(--panel); }
}
@media (min-width: 1400px) {
  body[data-module="health"] .workbench[data-rail="open"] .rail { position: sticky; }
  body[data-module="health"] .workbench[data-rail="open"] .rail { overflow-y: auto; max-height: calc(100vh - 2 * var(--space-6)); }
  body[data-module="health"] .workbench[data-rail="open"] { grid-template-columns: 210px minmax(0, 1fr) 280px; }
  body[data-module="health"] .workbench[data-rail="open"] .rail .rail-list { display: block; position: static; width: auto; box-shadow: none; }
  body[data-module="health"] .workbench[data-rail="open"] .rail .rail-strip { display: none; }
}
@media (max-width: 1099px) {
  /* below 1100px the aside (Actions, At a glance) comes before the tabs, as spec section 6 orders it */
  body[data-module="health"] .workbench-aside { order: -1; }
  body[data-module="health"] .rail { order: -2; }
  body[data-module="health"] .workbench[data-rail="open"] .rail .rail-list { display: block; }
}
body[data-module="health"] .rail-list { background: var(--hover-row); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2); }
body[data-module="health"] .rail-head { display: flex; align-items: center; justify-content: space-between; }
body[data-module="health"] .rail-head h2 { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--space-2); }
body[data-module="health"] .rail-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
body[data-module="health"] .rail-filters a { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 11px; line-height: 16px; text-decoration: none; color: var(--mute); }
body[data-module="health"] .rail-filters a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body[data-module="health"] .rail-filters svg.icon { width: 12px; height: 12px; }
body[data-module="health"] .rail-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: 6px 4px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: 13px; line-height: 18px; }
body[data-module="health"] .rail-row:hover { background: var(--panel); }
body[data-module="health"] .rail-row.rail-current { background: var(--info-bg); color: var(--heading); font-weight: 600; }
body[data-module="health"] .rail-row svg.icon { width: 16px; height: 16px; margin-top: 1px; color: var(--mute); }
body[data-module="health"] .rail-why { display: block; font-weight: 400; font-size: 11px; line-height: 14px; }
body[data-module="health"] .rail-foot { display: block; padding: 6px 4px; text-decoration: none; }
body[data-module="health"] .rail-strip { flex-direction: column; align-items: center; gap: 2px; width: 44px; padding: 6px 0; background: var(--hover-row); border: 1px solid var(--line); border-radius: var(--radius-md); }
body[data-module="health"] .rail-count { font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-pill); padding: 0 5px; margin-bottom: 4px; }
body[data-module="health"] .rail-dot { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--mute); }
body[data-module="health"] .rail-dot.rail-current { background: var(--info-bg); color: var(--info-ink); }
body[data-module="health"] .rail-dot.rail-alert { color: var(--err-ink); }
body[data-module="health"] .rail-dot svg.icon { width: 16px; height: 16px; }
body[data-module="health"] .rail button.icon { background: none; border: 0; padding: 4px; color: var(--accent); cursor: pointer; line-height: 0; }
body[data-module="health"] .queue-position { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; }
body[data-module="health"] .queue-position a { line-height: 0; }
body[data-module="health"] .rail-toggle-small { display: none; }
@media (max-width: 1099px) { body[data-module="health"] .rail-toggle-small { display: inline-flex; } }
body[data-module="health"] .workbench-main { min-width: 0; }
body[data-module="health"] .workbench-aside .panel { padding: var(--space-4); margin-bottom: var(--space-4); }
body[data-module="health"] .workbench-aside h2 { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--space-3); }
body[data-module="health"] .workbench-aside .actions { display: flex; flex-direction: column; gap: var(--space-2); background: var(--hover-row); }
body[data-module="health"] .workbench-aside .actions .btn, body[data-module="health"] .workbench-aside .actions form.sent, body[data-module="health"] .workbench-aside .actions div.sent { display: flex; width: 100%; }
body[data-module="health"] .workbench-aside .sent { flex-direction: column; gap: 2px; margin: 0; }
body[data-module="health"] .workbench-aside .sent .state { font-size: 12px; line-height: 16px; padding-left: var(--space-2); }
body[data-module="health"] .workbench-aside .btn { align-items: center; gap: var(--space-2); justify-content: flex-start; }
body[data-module="health"] .workbench-aside dl { margin: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: 14px; line-height: 20px; }
body[data-module="health"] .workbench-aside dt { color: var(--mute); white-space: normal; }
body[data-module="health"] .workbench-aside dd { margin: 0; overflow-wrap: break-word; }
body[data-module="health"] .workbench-aside dd .small { display: block; font-size: 12px; }
body[data-module="health"] .workbench-aside details.profile summary { cursor: pointer; }
body[data-module="health"] .workbench-aside details.profile dl { margin-top: var(--space-3); }
body[data-module="health"] .workbench-aside form.stacked { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
body[data-module="health"] .workbench-aside form.stacked label { display: flex; flex-direction: column; font-size: 12px; color: var(--mute); }
body[data-module="health"] .workbench-aside form.stacked input, body[data-module="health"] .workbench-aside form.stacked select, body[data-module="health"] .workbench-aside form.stacked textarea { width: 100%; }
body[data-module="health"] .set-health .signals { margin: .6rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--panel); }
body[data-module="health"] .workbench-aside .set-health .trail { font-size: 12px; line-height: 18px; }
body[data-module="health"] .workbench-aside .set-health .radio-chip { margin: 0 .25rem .25rem 0; }

/* Round 2 D2: Lost clients. One card per loss, its 90 days before and its Edit reason form inside it, so a form plainly
   belongs to the client at the card's top (Gail, 2026-10-20). In print the shared head (platform.css) replaces the shell,
   the filter, the CSV link and the Edit reason forms are left out, the 90 days before print open (platform.js), and a card
   never breaks across pages. */
body[data-module="health"] .loss-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-8); }
body[data-module="health"] .loss-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: var(--space-4) var(--space-6); }
body[data-module="health"] .loss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
body[data-module="health"] .loss-head h3 { margin: 0; font-size: 18px; line-height: 26px; }
body[data-module="health"] .loss-when { color: var(--mute); }
body[data-module="health"] .loss-reason { font-weight: 600; color: var(--ink); }
body[data-module="health"] .loss-mark { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; }
body[data-module="health"] .loss-note { margin: var(--space-2) 0 0; color: var(--ink); }
body[data-module="health"] dl.loss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3) var(--space-6); margin: var(--space-4) 0 0; }
body[data-module="health"] dl.loss-facts dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
body[data-module="health"] dl.loss-facts dd { margin: var(--space-1) 0 0; }
body[data-module="health"] .loss-card details { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
body[data-module="health"] .loss-card details + details { margin-top: var(--space-3); }
body[data-module="health"] .loss-card details ul { margin: var(--space-2) 0; padding-left: var(--space-6); }
body[data-module="health"] .loss-edit form { margin-top: var(--space-3); }
body[data-module="health"] .loss-edit .loss-note-field { flex: 1 1 20rem; }
@media print {
  body[data-module="health"] .report-filter, body[data-module="health"] .loss-edit { display: none; }
  body[data-module="health"] .loss-card { box-shadow: none; break-inside: avoid; }
  body[data-module="health"] h2 { break-after: avoid; }
}

/* Round 2 D5: Red, and why. Sey's reason keeps her line breaks. In print the shared head (platform.css) replaces the shell,
   the CSV line is left out (.report-filter above), the page turns landscape through a named page, each table's head repeats,
   and a row stays on one page where it fits (a row taller than a page still breaks). */
body[data-module="health"] table.red-report .rationale { white-space: pre-line; }
body[data-module="health"] table.red-report td { vertical-align: top; }
@page red-report { size: landscape; }
@media print {
  body[data-module="health"] .red-report-page { page: red-report; }
  body[data-module="health"] table.red-report thead { display: table-header-group; }
  body[data-module="health"] table.red-report tr { break-inside: avoid; }
}

/* The survey form's column letters: short boxes side by side, typed in capitals (Gail, 2026-10-20). */
body[data-module="health"] input.letter { min-width: 0; width: 5rem; text-transform: uppercase; }

/* Usage (usage plan Task 16): At a glance's Usage row, one line per quiet source, room to grow,
   staff; and the read-only Room to grow box on the success plan form and tab. The Usage tab
   itself is Deployments' shared block, styled in platform.css on both doors. */
body[data-module="health"] .glance-usage .glance-line { display: block; margin-bottom: var(--space-1); }
/* On the success plan form the box is a .panel (the shell's surface, padding and spacing, render pass 2026-10-31);
   inside the success tab's panel it is a bordered box on that panel's surface. */
body[data-module="health"] .room-to-grow:not(.panel) { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-4); }
body[data-module="health"] .room-to-grow h2, body[data-module="health"] .room-to-grow h3 { margin-top: 0; }
body[data-module="health"] .room-to-grow ul { margin: 0; padding-left: var(--space-4); }
body[data-module="health"] .room-to-grow li { margin: var(--space-1) 0; }

/* Usage across the book (usage plan Task 18, spec 2026-10-28 §7.2, C13). Tiles (the shell's .tile in Health's
   .tile-row, as the other reports), bar lists and the channel small multiples are links into the drill-down. The
   readings bars take the status tokens (quiet = warning, room to grow = action, all in use = success, no data = a
   rule); the bands take --action. The heat ramp is the Wall's map ramp
   (D21): one hue, --action mixed into the surface at 0, 25, 50 and 75 per cent, then --action itself. The cells hold
   body-size figures, so each step's ink is the one that clears 4.5:1 in its theme (checked 2026-10-31 from the token
   values): body ink on steps 0 to 2 and --on-action on step 4 in both; on step 3 body ink in light (4.6:1, where
   --on-action is 3.4:1) and --on-action in dark (5.3:1, where body ink is 2.8:1). Never colour alone: every cell
   prints its share, and its counts are in the title and the table under the chart. */
body[data-module="health"] .usage-book {
  --heat-3-ink: var(--ink);
  --heat-0: var(--surface-raised);
  --heat-1: color-mix(in srgb, var(--action) 25%, var(--surface));
  --heat-2: color-mix(in srgb, var(--action) 50%, var(--surface));
  --heat-3: color-mix(in srgb, var(--action) 75%, var(--surface));
  --heat-4: var(--action);
}
body[data-module="health"] .usage-book section.panel { margin-top: var(--space-4); }
body[data-module="health"] .usage-book details { margin-top: var(--space-3); }
body[data-module="health"] .usage-book a.tile:hover { border-color: var(--accent); }
body[data-module="health"] .usage-book a.barrow { color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
body[data-module="health"] .usage-book a.barrow:hover .barrow-label { color: var(--accent); text-decoration: underline; }
body[data-module="health"] .usage-book .barrow { grid-template-columns: minmax(7rem, 14rem) 1fr max-content; }
body[data-module="health"] .bar-usage-quiet { background: var(--warning); }
body[data-module="health"] .bar-usage-grow { background: var(--action); }
body[data-module="health"] .bar-usage-ok { background: var(--success); }
body[data-module="health"] .bar-usage-none { background: var(--border-strong); }
body[data-module="health"] .bar-usage-band { background: var(--action); }
body[data-module="health"] table.usage-heat td.heat-cell { padding: 0; }
body[data-module="health"] table.usage-heat td.heat-cell a { display: block; padding: var(--space-2) var(--space-3); text-align: right; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
body[data-module="health"] table.usage-heat td.heat-cell a:hover { text-decoration: underline; }
body[data-module="health"] .heat-0 a, body[data-module="health"] .heat-swatch-0 { background: var(--heat-0); }
body[data-module="health"] .heat-1 a, body[data-module="health"] .heat-swatch-1 { background: var(--heat-1); }
body[data-module="health"] .heat-2 a, body[data-module="health"] .heat-swatch-2 { background: var(--heat-2); }
body[data-module="health"] .heat-3 a, body[data-module="health"] .heat-swatch-3 { background: var(--heat-3); }
body[data-module="health"] .heat-4 a, body[data-module="health"] .heat-swatch-4 { background: var(--heat-4); }
body[data-module="health"] table.usage-heat td.heat-3 a { color: var(--heat-3-ink); }
body[data-module="health"] table.usage-heat td.heat-4 a { color: var(--on-action); }
:root[data-theme="dark"] body[data-module="health"] .usage-book { --heat-3-ink: var(--on-action); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="health"] .usage-book { --heat-3-ink: var(--on-action); }
}
/* The heat table's row heads are row labels, not column heads: the cell's body text, the chip kept whole, then the count
   in small (render pass 2026-10-31, decisions entry 26). Each legend step is kept whole too. */
body[data-module="health"] table.usage-heat tbody th[scope="row"] { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); }
body[data-module="health"] .usage-book .chip { white-space: nowrap; }
/* the drill's Last payment: the day kept whole, the source it belongs to on the line under it */
body[data-module="health"] .usage-book td.drill-last { white-space: nowrap; }
body[data-module="health"] .usage-book td.drill-last .small { display: block; }
body[data-module="health"] table.usage-heat thead th.num { text-align: right; }   /* over the right-aligned shares */
body[data-module="health"] .usage-ramp .ramp-step { display: inline-block; white-space: nowrap; margin-right: var(--space-2); }
body[data-module="health"] .usage-ramp .swatch { border: 1px solid var(--line); }
/* On a narrow panel (40rem of wrap or less) each rating's head takes a row of its own over its four cells, so the
   four sign columns share the wrap's full width and no column is cut (a container query, as the Usage block). */
body[data-module="health"] .usage-heat-wrap { container: usage-heat / inline-size; }
@container usage-heat (max-width: 40rem) {
  body[data-module="health"] table.usage-heat tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-module="health"] table.usage-heat thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  body[data-module="health"] table.usage-heat tbody th[scope="row"] { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); border-bottom: 0; padding-bottom: var(--space-1); }
  body[data-module="health"] table.usage-heat thead th { padding: var(--space-2) var(--space-1); overflow-wrap: break-word; }   /* breaks a word only on the narrowest phones (320) */
  body[data-module="health"] table.usage-heat td.heat-cell a { padding: var(--space-2) var(--space-1); }
}
body[data-module="health"] .usage-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); }
body[data-module="health"] a.usage-multiple { display: block; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--panel); color: var(--ink); text-decoration: none; }
body[data-module="health"] a.usage-multiple:hover { border-color: var(--accent); }
body[data-module="health"] a.usage-multiple h3 { margin: 0 0 var(--space-2); font-size: 16px; line-height: 24px; }
body[data-module="health"] a.usage-multiple .usage-bars { height: 48px; }
body[data-module="health"] .usage-multiple-change { display: block; margin-top: var(--space-2); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }