/* ui/casemix_lab.css — owned by W60, for W52's ui/casemix_lab.js.  EVERY selector is .cml-*
   prefixed (SHELL_CONTRACT §3.2): an unprefixed rule silently restyles somebody else's
   surface, and the last one loaded wins.

   WHY THIS FILE DID NOT EXIST UNTIL NOW
   -------------------------------------
   It never did. W52 mounted the casemix lab onto the demo surface — 72 homes, 26 exposed,
   Drysdale Grove +13.07 — and shipped it correct, reachable, and completely unstyled, next to
   W14's fully-styled cards. Measured on the live page before this file was written:

       .cml- rules in every stylesheet the browser had loaded ......... 0
       elements on the page carrying a cml- class .................... 407

   407 to 0. Not a regression, not drift: the stylesheet for a live panel had simply never been
   authored. The panel showing Andrew's best product story looked like a spreadsheet someone
   had pasted under the product.

   WHAT THIS IS NOT
   ---------------
   It is not a design. There is one already: W14's cmfront cards sit directly above this panel
   on the same tab, and the two are read in one downward glance. So the host below takes
   .cmf-panel's geometry — white surface, 0.67px hairline, 24px pad — and cmfront's type scale.
   Inventing a second visual language six inches under the first is how a product starts
   looking like four products.

   ONE DELIBERATE 2px OF DISAGREEMENT, AND THE CAPTION THAT ALMOST LIED ABOUT IT
   ----------------------------------------------------------------------------
   This paragraph first read "...0.67px hairline, 12px radius, 24px pad", because 12px is what
   .cmf-panel says and I had just finished reading it. The rule below says var(--r-md), and
   --r-md IS 14px. So the sentence describing my own file was FALSE the moment I wrote it, and
   nothing would ever have failed because of it: a prose claim has no compiler (#1). I caught it
   by measuring the rendered panel — getComputedStyle said 14px — rather than by re-reading what
   I had typed. An hour after adding #16 to the index. Knowing the rule is not the same as being
   unable to break it.

   The 2px stays, and it is a choice, not an oversight: the radius scale is --r-sm 10 / --r-md 14
   / --r-lg 18, and NO token equals 12px. .cmf-panel's 12px is off-scale — the same drift as its
   hardcoded #4330F5, from the same era, for the same reason. Copying it to look tidy today is
   how a drift becomes the standard; taking the token means this panel is already right when W14
   migrates. **W14/W53: .cmf-panel's border-radius:12px is off the token scale.** Flagged, not
   silently matched — and not silently diverged from either, which is what this paragraph is for.

   TOKENS, NOT HEXES (W53)
   -----------------------
   cmfront.css predates the brand slice and hardcodes #4330F5 / #271257 / #E5E7EB. Those are
   now --accent / --russian-violet / --line, and the values are the same — so taking the tokens
   matches W14's cards to the pixel AND follows the palette when W53 moves it. A hex here would
   match today and drift the day the brand lands, which is failure mode #1 with a colour picker.
   The anchor is --russian-violet. --accent (#4330F5) is a -30% tint of Tropical Indigo, not a
   primary, so it is used for emphasis and never for a large field.

   COLOUR CARRIES MEANING HERE, NOT DECORATION
   -------------------------------------------
   casemix_lab.js:34 maps four levels — exposed / watch / easing / steady — onto both the table
   row and the verdict block. They are ordered facts, so they take the semantic tokens
   (--neg / --warn / --pos), not four pretty shades. And cml-unknown is the fifth: a home the
   Department has not published. It is NOT a zero and must never read as a bad score — the only
   sanctioned zero is the agency one. It renders muted and italic, and it is the one row state
   with no tint at all, because tinting an absence invents a verdict about it.
*/

.cml-host {
  /* .cmf-panel's geometry, deliberately. Same tab, same glance, same card.
     Fallbacks are the TOKEN's value, never a nearby one: a fallback that renders something the
     token does not is a second design hiding inside a default, and it only ever appears on the
     one machine where the token failed to load — which is the machine nobody is looking at. */
  background: var(--surface, #FFFFFF);
  border: 0.67px solid var(--line, #E5E5EB);
  border-radius: var(--r-md, 14px);
  padding: 24px;
  margin: 20px 0 0;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--ink, #171717);
  font-size: 14px;
  line-height: 1.6;
}

.cml-host h3 {
  font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--russian-violet, #271257);
}

/* The lede explains what a casemix target IS. It is prose, so it gets a measure — a 120ch
   line of 14px text is not read, it is skimmed, and this paragraph is the one that stops a
   CFO misreading every number under it. */
.cml-lede {
  margin: 0 0 18px;
  max-width: 96ch;
  color: var(--ink2, #3A3A42);
}

/* ---------- THE ALARM. "25 of your homes are walking toward a breach." ---------- */
/* This is the sentence the panel exists to deliver. It is not a warning chip: it is the
   finding. Left rule + wash, matching .cmf-warn's shape one card above. */
.cml-alarm {
  background: var(--warn-wash, #FBF1DE);
  border-left: 3px solid var(--warn, #C9871F);
  border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
  padding: 14px 16px;
  margin: 0 0 20px;
  max-width: 100ch;
  font-weight: 500;
  color: var(--warn-ink, #8A5A00);
}

/* ---------- THE ROSTER. 72 homes, every one of them addressable. ---------- */
.cml-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 0 18px;
}

.cml-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #646464);
  padding: 0 12px 8px;
  border-bottom: 0.67px solid var(--line, #E5E5EB);
  white-space: nowrap;
}

.cml-row {
  border-bottom: 0.67px solid var(--line, #E5E5EB);
  cursor: pointer;
  transition: background-color 90ms linear;
}
.cml-row:last-child { border-bottom: 0; }
.cml-row td { padding: 9px 12px; vertical-align: middle; }
.cml-row:hover { background: var(--hover, #F5F6FE); }

/* Focus is not decoration on a 72-row table: it is how the keyboard finds the row it is on.
   Offset inward so the ring is not clipped by the cell border. */
.cml-row:focus-visible {
  outline: 2px solid var(--accent, #4330F5);
  outline-offset: -2px;
}

/* Numbers align on the decimal, because they are compared DOWN the column, not read across.
   tabular-nums stops 217.52 and 223.19 dancing a pixel apart. */
.cml-num,
.cml-delta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The delta already carries its own ▲ / ▼ / — glyph from the module, so colour here is a
   SECOND channel, never the only one. A red triangle and a green triangle are the same
   triangle to eight percent of the men who will look at this screen. */
.cml-delta { font-weight: 600; }

/* ---------- THE FOUR LEVELS (casemix_lab.js:34). Ordered facts, semantic tokens. ----------
   A left rule rather than a full row wash: 26 of 72 rows are exposed, and 26 washed rows is a
   striped table, not a signal. The rule marks the row; the delta carries the direction. */
.cml-row.cml-exposed  { box-shadow: inset 3px 0 0 var(--neg, #C0435A); }
.cml-row.cml-watch    { box-shadow: inset 3px 0 0 var(--warn, #C9871F); }
.cml-row.cml-steady   { box-shadow: inset 3px 0 0 var(--line2, #D2D2DB); }
.cml-row.cml-easing   { box-shadow: inset 3px 0 0 var(--pos, #2E9E6B); }

.cml-exposed .cml-delta { color: var(--neg-ink, #A3243C); }
.cml-watch   .cml-delta { color: var(--warn-ink, #8A5A00); }
.cml-easing  .cml-delta { color: var(--pos-ink, #0F6B42); }
.cml-steady  .cml-delta { color: var(--muted-ink, #52525C); }

/* THE SELECTED ROW. It drives the lab below, so it must be obvious which home the 215.13 is
   about — the whole panel is a claim about THIS row. */
.cml-row.cml-selected {
  background: var(--accent-wash, #E4E9FC);
}
.cml-row.cml-selected td { font-weight: 600; }
.cml-row.cml-selected:hover { background: var(--wash-lavender, #DDD8FE); }

/* ABSENCE IS NOT ZERO. A home the Department has not published carries no tint, no rule and
   no number — it must not read as "worst" on any sort, and it must not read as a verdict.
   It is findable, and it says why, and that is all it is allowed to say. */
.cml-row.cml-unknown { box-shadow: none; }
.cml-row.cml-unknown td { color: var(--faint, #6E6E78); }
.cml-muted {
  font-style: italic;
  color: var(--faint, #6E6E78);
  font-variant-numeric: normal;
}

/* ---------- THE FOOTNOTE. Provenance, not decoration. ---------- */
.cml-foot {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #646464);
  max-width: 100ch;
}
.cml-foot strong { color: var(--ink2, #3A3A42); font-weight: 600; }

/* ---------- THE VERDICT for the selected home. ----------
   Same four level classes as the rows (casemix_lab.js:77 appends LEVEL_CLASS[v.level] here
   too), so one token change moves the row rule and the verdict together and they can never
   disagree about what "exposed" looks like. That is the point of reusing the class. */
.cml-verdict {
  border-radius: var(--r-sm, 10px);
  padding: 16px 18px;
  margin: 22px 0 16px;
  border-left: 3px solid var(--line2, #D2D2DB);
  background: var(--surface-2, #FBFBFD);
  max-width: 100ch;
  line-height: 1.6;
}
.cml-verdict.cml-exposed { border-left-color: var(--neg,  #C0435A); background: var(--neg-wash,  #FBE9ED); }
.cml-verdict.cml-watch   { border-left-color: var(--warn, #C9871F); background: var(--warn-wash, #FBF1DE); }
.cml-verdict.cml-easing  { border-left-color: var(--pos,  #2E9E6B); background: var(--pos-wash,  #C9F0DD); }
.cml-verdict.cml-steady  { border-left-color: var(--line2, #D2D2DB); }

/* ---------- WHERE THIS LEVER RUNS OUT. ----------
   A product that only ever shows what a control CAN do is a brochure. This block is the one
   that says casemix alone will not close the gap — it is the most trustworthy thing on the
   panel and it is styled to be read, not skipped. */
.cml-limits {
  border: 0.67px solid var(--line, #E5E5EB);
  border-radius: var(--r-sm, 10px);
  padding: 16px 18px;
  margin: 16px 0;
  background: var(--wash-violet, #F3EFFC);
  max-width: 100ch;
}
.cml-limit-verdict {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--russian-violet, #271257);
}

/* THE PRE-FILL CAVEAT. "This is NOT your class mix. We do not have it."
   A caveat is a claim (FAILURE_MODES #1) and this one is load-bearing: every number in the
   lab below is computed from a mix we INVENTED. If a reader misses this sentence, the whole
   panel becomes a lie about their homes. So it is not small print — it is a bordered
   statement directly above the sliders it governs, and it never collapses. */
.cml-prefill {
  border: 1px dashed var(--hairline, #A6A6B0);
  border-radius: var(--r-sm, 10px);
  padding: 12px 14px;
  margin: 16px 0 0;
  background: var(--surface, #FFFFFF);
  color: var(--ink2, #3A3A42);
  font-size: 13px;
  max-width: 100ch;
}

/* ---------- THE LAB. Move a slider, watch the target move. ---------- */
.cml-lab {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 20px;
  border: 0.67px solid var(--line, #E5E5EB);
  border-radius: var(--r-md, 14px);
  background: var(--surface-2, #FBFBFD);
}

/* The readout is the answer. It sticks while the sliders scroll, because the entire point of
   a lab is watching THIS number move as you drag — a readout you have to scroll back to is a
   report. */
.cml-readout {
  flex: 0 0 220px;
  position: sticky;
  top: 12px;
  padding: 16px 18px;
  border-radius: var(--r-sm, 10px);
  background: var(--russian-violet, #271257);
  color: #FFF;
}
.cml-big {
  font-family: var(--font-head, 'Sansation', 'Poppins', sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cml-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tropical-indigo, #ADA5FB);
  margin-top: 4px;
}
/* RN minutes are a SEPARATE statutory test from total minutes — a home can pass one and fail
   the other, so this never merges into the big number above it. */
.cml-rn {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--tropical-indigo) 35%, transparent);
  font-size: 13px;
  font-weight: 600;
  color: var(--tropical-indigo, #ADA5FB);
  font-variant-numeric: tabular-nums;
}
.cml-moved,
.cml-res {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lavender, #D9DFFC);
  font-variant-numeric: tabular-nums;
}

/* 13 AN-ACC classes. A two-column grid, so the list is scannable rather than a 13-deep
   ladder that pushes the readout off the screen. */
.cml-sliders {
  flex: 1 1 380px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 20px;
  min-width: 0;
}
.cml-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink2, #3A3A42);
  min-width: 0;
}
.cml-slider label,
.cml-slider > span {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The control. Full-width, thumb big enough to hit on a touch screen in a boardroom —
   this gets demoed on an iPad across a table, not only on a mouse. */
.cml-range {
  width: 100%;
  accent-color: var(--accent, #4330F5);
  cursor: pointer;
  min-width: 0;
}
.cml-range:focus-visible {
  outline: 2px solid var(--accent, #4330F5);
  outline-offset: 3px;
}

/* ---------- SMALL SCREENS ---------- */
/* The readout un-sticks: a sticky block on a short viewport eats the sliders it exists to
   explain. And the roster scrolls sideways rather than crushing six columns into 380px —
   a target of "223.19" wrapped onto two lines is not a figure, it is a rumour. */
@media (max-width: 720px) {
  .cml-host { padding: 18px; }
  .cml-lab { padding: 14px; gap: 16px; }
  .cml-readout { position: static; flex: 1 1 100%; }
  .cml-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- PRINT ---------- */
/* This panel lands in board packs. The rules are box-shadows, and box-shadows do not print:
   without this, every row state silently vanishes on paper and 26 exposed homes print
   identically to 23 steady ones. Re-stated as borders, which do. */
@media print {
  .cml-host { border-color: var(--hairline, #A6A6B0); break-inside: avoid; }
  .cml-readout { position: static; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cml-row { box-shadow: none !important; }
  .cml-row.cml-exposed { border-left: 3px solid var(--neg,  #C0435A); }
  .cml-row.cml-watch   { border-left: 3px solid var(--warn, #C9871F); }
  .cml-row.cml-easing  { border-left: 3px solid var(--pos,  #2E9E6B); }
  .cml-row.cml-steady  { border-left: 3px solid var(--line2, #D2D2DB); }
  .cml-row.cml-unknown { border-left: 3px solid transparent; }
}