/* ══════════════════════════════════════════════════════════════════════════
   TGI · THE HMIS EXCHANGE — integration console at max scale
   Pairs with assets/tgi-hmis-console.js. No build step, no dependency.

   Scope discipline: every selector is prefixed .hx-. Tokens come from
   index.html :root and assets/tgi-viz.css; no new colour is invented here.
   Motion is transform/opacity only, and prefers-reduced-motion removes it.
   Every interactive element clears the 44px floor.
   ══════════════════════════════════════════════════════════════════════════ */

.hx-root { max-width: 1210px; margin: 0 auto; font-family: var(--fs, 'Roboto', sans-serif);
  color: var(--tgi-ink, #271107); }
.hx-root *, .hx-root *::before, .hx-root *::after { box-sizing: border-box; }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.hx-mast { background: linear-gradient(160deg, var(--tgi-navy-dk, #0D2747), #122F52 55%, #173A63);
  border-radius: var(--r-lg, 20px); padding: clamp(20px, 4vw, 30px); color: #E6EEF7;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(26,65,116,.16)); }
.hx-mast-crumb { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: #9FB6D2; margin-bottom: 8px; }
.hx-mast h1 { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700; color: #fff; letter-spacing: -.01em; margin: 0 0 6px; line-height: 1.15; }
.hx-mast h1 em { font-style: italic; color: var(--tgi-gold-lt, #F4C576); }
.hx-mast p { font-size: 13.5px; line-height: 1.7; color: #C3D3E6; max-width: 92ch; margin: 0; }
.hx-mode { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hx-mode .m { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 99px; font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  background: rgba(255,255,255,.09); color: #D5E1F0; border: 1px solid rgba(255,255,255,.18); }
.hx-mode .m.sim  { border-style: dashed; color: var(--tgi-gold-lt, #F4C576); border-color: rgba(244,197,118,.5); }
.hx-mode .m.real { color: #A9E7C9; border-color: rgba(46,168,100,.45); }

/* ── Role lens ────────────────────────────────────────────────────────────── */
.hx-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.hx-lens-lbl { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: #9FB6D2; }
.hx-lens-group { display: inline-flex; flex-wrap: wrap; max-width: 100%;
  background: rgba(255,255,255,.08); border-radius: 22px;
  padding: 3px; border: 1px solid rgba(255,255,255,.16); }
.hx-lens button { min-height: 44px; padding: 9px 18px; border-radius: 99px; border: none;
  background: none; cursor: pointer; color: #C3D3E6; font-family: var(--fc, 'Roboto Condensed', sans-serif);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  transition: background .16s linear, color .16s linear; }
.hx-lens button[aria-pressed="true"] { background: #fff; color: var(--tgi-navy, #1A4174); }
.hx-lens button:focus-visible { outline: 2px solid var(--tgi-cyan, #00A9D7); outline-offset: 2px; }
.hx-lens-note { font-size: 11.5px; color: #9FB6D2; line-height: 1.5; flex-basis: 100%; }

/* ── Sections & reveal (opacity/transform only) ───────────────────────────── */
.hx-sect { margin-top: 34px; scroll-margin-top: 18px; }
.hx-in { opacity: 0; transform: translateY(14px); }
.hx-on { opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1); }
.hx-h2 { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 21px; font-weight: 600;
  color: var(--tgi-navy, #1A4174); margin: 0 0 4px; }
.hx-h3 { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 16px; font-weight: 600;
  color: var(--tgi-navy, #1A4174); margin: 0; }
.hx-sub { font-size: 13.5px; color: var(--tgi-slate, #4A5862); line-height: 1.65; margin: 2px 0 16px;
  max-width: 86ch; }
.hx-card { background: var(--tgi-white, #fff); border: 1px solid var(--tgi-mist, #E0E6E8);
  border-radius: var(--r-lg, 20px); padding: 20px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,65,116,.08)); }
.hx-note { font-size: 12.5px; line-height: 1.65; color: var(--tgi-slate, #4A5862);
  background: var(--tgi-pearl, #F8FAFB); border: 1px solid var(--tgi-mist, #E0E6E8);
  border-radius: 10px; padding: 10px 13px; }
.hx-note b { color: var(--tgi-ink, #271107); }
.hx-cite { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 11px;
  letter-spacing: .04em; line-height: 1.6; color: var(--tgi-stone, #7A8A94);
  border-top: 1px dashed var(--tgi-mist, #E0E6E8); margin-top: 12px; padding-top: 9px; }

/* ── Chips — the whole vocabulary, no synonyms ────────────────────────────── */
.hx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 99px; font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1.35;
  background: var(--tgi-cloud, #F3F6F8); color: var(--tgi-slate, #4A5862); max-width: 100%;
  text-align: left; }
.hx-chip[data-t="never"]        { background: #E7ECEF; color: #42525C; }
.hx-chip[data-t="awaiting"]     { background: #E8D4EF; color: #5B216B; }
.hx-chip[data-t="credentialed"] { background: #FBE7C6; color: #8A5A12; }
.hx-chip[data-t="enabled"]      { background: #CFEFDC; color: #1E6B3F; }
.hx-chip[data-t="degraded"]     { background: #FADED1; color: #A8471A; }
.hx-chip[data-t="quarantined"]  { background: #F8D7D4; color: #8E2A22; }
.hx-chip[data-t="sim"]     { background: #FFF3D6; color: #7A4E0D; border: 1px dashed #EFD9A8; }
.hx-chip[data-t="policy"]  { background: #DDE5F1; color: #1A4174; border: 1px dashed rgba(26,65,116,.4); }
.hx-chip[data-t="owned"]   { background: #D3F0FA; color: #0A6D8B; }
.hx-chip[data-t="lock"]    { background: var(--tgi-navy, #1A4174); color: #fff; }
.hx-chip[data-t="retired"] { background: #F3F6F8; color: #8B98A1; text-decoration: line-through; }
.hx-chip[data-t="baa"]     { background: #F8D7D4; color: #8E2A22; border: 1px solid rgba(142,42,34,.35); }
.hx-chip[data-t="warn"]    { background: #FBE7C6; color: #8A5A12; }

/* Field-state chips (the five-plus-two legend) */
.hx-fs { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px;
  font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.hx-fs[data-s="answered"] { background: #CFEFDC; color: #1E6B3F; }
.hx-fs[data-s="dk"]       { background: #FBE7C6; color: #8A5A12; }   /* 8 client doesn't know */
.hx-fs[data-s="refused"]  { background: #E8D4EF; color: #5B216B; }   /* 9 prefers not to answer */
.hx-fs[data-s="missing"]  { background: #FADED1; color: #A8471A; }   /* 99 data not collected */
.hx-fs[data-s="depnull"]  { background: #E7F6FB; color: #0A6D8B; border: 1px dashed #7BD3F7; } /* correct, not missing */
.hx-fs[data-s="never"]    { background: var(--tgi-navy, #1A4174); color: #fff; }
.hx-fs[data-s="owned"]    { background: #D3F0FA; color: #0A6D8B; }

/* ── THE EXCHANGE — two Continuums, the county line, lanes in motion ──────── */
.hx-exchange { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  gap: 14px; align-items: stretch; }
.hx-coc { display: flex; flex-direction: column; gap: 12px; }
.hx-coc-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; }
.hx-coc-kicker { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94); }
.hx-coc-name { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 19px; font-weight: 700;
  color: var(--tgi-navy, #1A4174); line-height: 1.2; }
.hx-coc-lead { font-size: 12px; color: var(--tgi-slate, #4A5862); line-height: 1.5; }
.hx-mech { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-mech .mc { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10.5px;
  letter-spacing: .04em; background: var(--tgi-cloud, #F3F6F8); border: 1px solid var(--tgi-mist, #E0E6E8);
  border-radius: 7px; padding: 3px 8px; color: var(--tgi-slate, #4A5862); }

.hx-spine { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 4px; position: relative; }
.hx-spine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 2px dashed var(--tgi-orange, #D55E27); opacity: .75; }
.hx-spine-lbl { position: relative; font-family: var(--fc, 'Roboto Condensed', sans-serif);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--tgi-orange, #D55E27); background: var(--tgi-pearl, #F8FAFB); padding: 3px 8px;
  border-radius: 6px; }
.hx-spine-node { position: relative; background: linear-gradient(135deg, var(--tgi-navy, #1A4174), var(--tgi-navy-dk, #0D2747));
  color: #fff; border-radius: 14px; padding: 13px 12px; text-align: center; width: 100%;
  border: 1px solid var(--tgi-cyan, #00A9D7); }
.hx-spine-node b { display: block; font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 13.5px;
  letter-spacing: .02em; }
.hx-spine-node span { display: block; font-family: var(--fc, 'Roboto Condensed', sans-serif);
  font-size: 9.5px; letter-spacing: .09em; color: #B8E5F2; margin-top: 3px; text-transform: uppercase; }
.hx-spine-stat { position: relative; font-size: 11.5px; color: var(--tgi-slate, #4A5862);
  background: #fff; border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 10px;
  padding: 8px 10px; text-align: center; line-height: 1.5; width: 100%; }
.hx-spine-stat b { color: var(--tgi-navy, #1A4174); }

/* Lanes: direction, label, state, and a pulse that moves by transform only. */
.hx-lane { border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 12px; padding: 10px 12px;
  background: var(--tgi-pearl, #F8FAFB); }
.hx-lane-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hx-lane-dir { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--tgi-stone, #7A8A94); }
.hx-lane-name { font-size: 13px; font-weight: 600; color: var(--tgi-ink, #271107); }
.hx-lane-track { position: relative; height: 8px; margin: 9px 0 3px; border-radius: 99px;
  background: var(--tgi-cloud, #F3F6F8); overflow: hidden; }
.hx-lane-track::before { content: ''; position: absolute; inset: 3px 0; border-top: 2px dashed var(--tgi-mist, #E0E6E8); }
.hx-pulse { position: absolute; top: 50%; left: 0; width: 26px; height: 6px; margin-top: -3px;
  border-radius: 99px; opacity: 0; background: var(--tgi-cyan, #00A9D7);
  animation: hx-flow 2.8s cubic-bezier(.3,.1,.6,.9) infinite; }
.hx-lane[data-t="degraded"] .hx-pulse { background: var(--tgi-orange, #D55E27); animation-duration: 4.6s; }
.hx-lane[data-t="never"] .hx-pulse, .hx-lane[data-t="awaiting"] .hx-pulse,
.hx-lane[data-t="credentialed"] .hx-pulse, .hx-lane[data-t="quarantined"] .hx-pulse { animation: none; opacity: 0; }
@keyframes hx-flow {
  0%   { transform: translateX(-30px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(100vw / 3)); opacity: 0; }
}
.hx-lane-sub { font-size: 11.5px; color: var(--tgi-stone, #7A8A94); line-height: 1.5; }

/* Native run metadata — the spec's own six fields, plus the honest counters */
.hx-run { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.hx-run .rv { background: #fff; border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 10px;
  padding: 8px 10px; }
.hx-run .rv .k { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94); display: block; }
.hx-run .rv .v { font-size: 13px; font-weight: 600; color: var(--tgi-ink, #271107);
  font-variant-numeric: tabular-nums; margin-top: 2px; display: block; overflow-wrap: anywhere; }
.hx-run .rv .v small { font-weight: 400; color: var(--tgi-stone, #7A8A94); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.hx-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 12px; }
.hx-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 660px; }
.hx-tbl th { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94);
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--tgi-mist, #E0E6E8);
  background: var(--tgi-pearl, #F8FAFB); white-space: nowrap; }
.hx-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--tgi-cloud, #F3F6F8);
  vertical-align: top; line-height: 1.55; }
.hx-tbl tr:last-child td { border-bottom: none; }
.hx-tbl td.num, .hx-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hx-tbl .mono { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  color: var(--tgi-navy, #1A4174); overflow-wrap: anywhere; }
.hx-tbl .grp td { background: var(--tgi-cloud, #F3F6F8); font-family: var(--fc, 'Roboto Condensed', sans-serif);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--tgi-navy, #1A4174); border-bottom: 1px solid var(--tgi-mist, #E0E6E8); }
.hx-tbl .said { font-style: italic; color: var(--tgi-ink, #271107); }
.hx-strike { text-decoration: line-through; color: var(--tgi-stone, #7A8A94); }

/* ── Error / verbatim blocks ──────────────────────────────────────────────── */
.hx-err { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  line-height: 1.65; background: #0D2747; color: #F3C9B7; border-radius: 9px; padding: 11px 13px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.hx-err b { color: #FFD9C4; font-weight: 700; }
.hx-pre { margin: 0; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.65; background: var(--tgi-cloud, #F3F6F8);
  color: var(--tgi-slate, #4A5862); border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 9px;
  padding: 11px 13px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* ── System panels ────────────────────────────────────────────────────────── */
.hx-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hx-panel { display: flex; flex-direction: column; gap: 11px; }
.hx-panel-hd { display: flex; align-items: flex-start; gap: 11px; }
.hx-panel-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; background: var(--tgi-cloud, #F3F6F8);
  color: var(--tgi-navy, #1A4174); }
.hx-panel-role { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94); margin-top: 2px; }
.hx-kv { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tgi-slate, #4A5862); }
.hx-kv dt { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94); margin: 9px 0 2px; }
.hx-kv dd { margin: 0; color: var(--tgi-ink, #271107); }
.hx-fail { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.65;
  color: var(--tgi-slate, #4A5862); }
.hx-fail li { margin-bottom: 5px; }
.hx-fail li::marker { color: var(--tgi-orange, #D55E27); }

/* Throttle meter — magnitude against a limit, never a person */
.hx-meter { display: grid; grid-template-columns: minmax(96px, .9fr) 1fr auto; gap: 8px 12px;
  align-items: center; padding: 7px 0; min-height: 44px; border-top: 1px solid var(--tgi-cloud, #F3F6F8); }
.hx-meter:first-of-type { border-top: none; }
.hx-meter .lb { font-size: 12px; color: var(--tgi-ink, #271107); line-height: 1.35; }
.hx-meter .lb small { display: block; font-size: 10.5px; color: var(--tgi-stone, #7A8A94); }
.hx-meter .tr { height: 8px; border-radius: 99px; background: var(--tgi-cloud, #F3F6F8);
  overflow: hidden; position: relative; }
.hx-meter .fl { position: absolute; inset: 0 auto 0 0; border-radius: 99px;
  background: var(--seq-400, #3191B3); }
.hx-meter[data-hot] .fl { background: var(--div-warm-1, #E86426); }
.hx-meter .vv { font-size: 12px; font-weight: 600; color: var(--tgi-ink, #271107);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Credential countdown */
.hx-cd { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 12px;
  border-radius: 10px; background: var(--tgi-pearl, #F8FAFB); border: 1px solid var(--tgi-mist, #E0E6E8); }
.hx-cd b { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 19px;
  color: var(--tgi-navy, #1A4174); font-variant-numeric: tabular-nums; }
.hx-cd[data-t="warn"] { border-color: rgba(155,97,9,.4); background: #FFFCF6; }
.hx-cd[data-t="warn"] b { color: var(--st-warning, #9B6109); }
.hx-cd small { font-size: 11px; color: var(--tgi-stone, #7A8A94); line-height: 1.4; }

/* ── Severed edge (42 CFR Part 2) ─────────────────────────────────────────── */
.hx-sever { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.hx-sever .nd { border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 12px; padding: 12px 14px;
  background: #fff; font-size: 12.5px; line-height: 1.5; color: var(--tgi-slate, #4A5862); }
.hx-sever .nd b { display: block; color: var(--tgi-navy, #1A4174); font-size: 13.5px; margin-bottom: 3px; }
.hx-sever .cut { text-align: center; color: var(--st-critical, #B4241B);
  font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; line-height: 1.5; }
.hx-consent { border: 1px solid rgba(107,41,125,.35); background: rgba(107,41,125,.04);
  border-radius: 14px; padding: 14px 16px; }
.hx-consent .t { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--tgi-plum, #6B297D);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.hx-notice { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
  color: var(--tgi-plum, #6B297D); border-top: 1px dashed rgba(107,41,125,.35); margin-top: 10px;
  padding-top: 8px; line-height: 1.6; }

/* ── The role matrix ──────────────────────────────────────────────────────── */
.hx-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 12px; }
.hx-matrix { border-collapse: collapse; font-size: 12px; min-width: 940px; width: 100%; }
.hx-matrix th { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94);
  padding: 8px 8px; border-bottom: 1px solid var(--tgi-mist, #E0E6E8);
  background: var(--tgi-pearl, #F8FAFB); text-align: center; vertical-align: bottom; line-height: 1.35; }
.hx-matrix th.rowh { text-align: left; min-width: 230px; }
.hx-matrix td { padding: 6px 6px; border-bottom: 1px solid var(--tgi-cloud, #F3F6F8);
  text-align: center; line-height: 1.4; }
.hx-matrix td.rowh { text-align: left; font-size: 12.5px; color: var(--tgi-ink, #271107);
  font-weight: 600; }
.hx-matrix td.rowh small { display: block; font-weight: 400; font-size: 11px;
  color: var(--tgi-stone, #7A8A94); }
.hx-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  min-height: 26px; padding: 3px 7px; border-radius: 7px;
  font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10.5px; letter-spacing: .05em;
  font-weight: 700; cursor: help; }
.hx-cell[data-v="F"]  { background: var(--tgi-navy, #1A4174); color: #fff; }
.hx-cell[data-v="Fo"] { background: #DDE5F1; color: var(--tgi-navy, #1A4174);
  box-shadow: inset 0 0 0 1px rgba(26,65,116,.5); }
.hx-cell[data-v="S"]  { background: #D3F0FA; color: #0A6D8B; }
.hx-cell[data-v="M"]  { background: #FBE7C6; color: #8A5A12; }
.hx-cell[data-v="N"]  { background: var(--tgi-cloud, #F3F6F8); color: #9AA7AF; }
.hx-mx-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 12px;
  color: var(--tgi-slate, #4A5862); align-items: center; }
.hx-mx-legend .lg { display: inline-flex; align-items: center; gap: 7px; }

/* ── Roster / checklist / queue rows ──────────────────────────────────────── */
.hx-days { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
  font-weight: 600; }
.hx-days .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--st-good, #12894F); }
.hx-days[data-t="amber"] .dot { background: var(--st-warning, #9B6109); }
.hx-days[data-t="red"] .dot { background: var(--st-critical, #B4241B); }
.hx-check { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--tgi-cloud, #F3F6F8); font-size: 13px; line-height: 1.5; }
.hx-check:first-of-type { border-top: none; }
.hx-check .ic { color: var(--st-good, #12894F); padding-top: 1px; }
.hx-check[data-t="open"] .ic { color: var(--st-warning, #9B6109); }
.hx-check .meta { font-size: 11.5px; color: var(--tgi-stone, #7A8A94); }

/* ── Exec tiles ───────────────────────────────────────────────────────────── */
.hx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hx-tile { background: #fff; border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 16px;
  padding: 15px 16px; }
.hx-tile .k { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tgi-stone, #7A8A94);
  line-height: 1.5; }
.hx-tile .v { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: clamp(24px, 3vw, 31px);
  font-weight: 700; color: var(--tgi-navy, #1A4174); line-height: 1.1; margin-top: 4px;
  font-variant-numeric: proportional-nums lining-nums; }
.hx-tile .d { font-size: 11.5px; color: var(--tgi-slate, #4A5862); margin-top: 4px; line-height: 1.5; }

/* Dark honesty ledger */
.hx-dark { background: linear-gradient(160deg, var(--tgi-navy-dk, #0D2747), #122F52 55%, #173A63);
  border-radius: var(--r-lg, 20px); padding: clamp(20px, 4vw, 30px); color: #E6EEF7; }
.hx-dark h3 { font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tgi-gold-lt, #F4C576); margin: 0 0 10px; }
.hx-dark .big { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: clamp(19px, 3vw, 26px);
  font-weight: 700; line-height: 1.35; color: #fff; margin: 0 0 8px; }
.hx-dark .big em { font-style: italic; color: var(--tgi-gold-lt, #F4C576); }
.hx-dark ul { margin: 10px 0 0; padding-left: 19px; font-size: 13px; line-height: 1.75; color: #D5E1F0; }
.hx-dark li { margin-bottom: 7px; }
.hx-dark li::marker { color: var(--tgi-gold, #E19225); }
.hx-dark b { color: #fff; }

/* ── Caseworker four-fact cards ───────────────────────────────────────────── */
.hx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hx-fact { border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 16px; background: #fff;
  padding: 16px 18px; }
.hx-fact .n { display: inline-flex; align-items: center; justify-content: center; width: 26px;
  height: 26px; border-radius: 99px; background: var(--tgi-navy, #1A4174); color: #fff;
  font-family: var(--fc, 'Roboto Condensed', sans-serif); font-size: 12px; font-weight: 700;
  margin-bottom: 8px; }
.hx-fact h4 { font-family: var(--fh, 'Cabin', Georgia, serif); font-size: 15.5px; font-weight: 600;
  color: var(--tgi-navy, #1A4174); margin: 0 0 6px; }
.hx-fact p { font-size: 13px; line-height: 1.6; color: var(--tgi-slate, #4A5862); margin: 0 0 8px; }
.hx-fact p b { color: var(--tgi-ink, #271107); }

/* Person picker */
.hx-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hx-pick button { min-height: 44px; padding: 9px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--tgi-mist, #E0E6E8); background: #fff; font-size: 13px; font-weight: 600;
  color: var(--tgi-navy, #1A4174); transition: border-color .16s linear, background .16s linear; }
.hx-pick button[aria-pressed="true"] { background: var(--tgi-navy, #1A4174); color: #fff;
  border-color: var(--tgi-navy, #1A4174); }
.hx-pick button:focus-visible { outline: 2px solid var(--tgi-cyan, #00A9D7); outline-offset: 2px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; min-width: 44px; padding: 10px 17px; border-radius: 12px;
  border: 1px solid transparent; font-family: var(--fs, 'Roboto', sans-serif); font-size: 13px;
  font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, var(--tgi-navy, #1A4174), var(--tgi-navy-dk, #0D2747));
  color: #fff; transition: transform .16s linear, box-shadow .16s linear, border-color .16s linear; }
.hx-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 18px rgba(26,65,116,.1)); }
.hx-btn.ghost { background: #fff; border-color: var(--tgi-mist, #E0E6E8);
  color: var(--tgi-slate, #4A5862); }
.hx-btn.ghost:hover { border-color: var(--tgi-cyan, #00A9D7); color: var(--tgi-cyan-dk, #0088B0);
  box-shadow: none; }
.hx-btn:focus-visible { outline: 2px solid var(--tgi-cyan, #00A9D7); outline-offset: 2px; }
.hx-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* Details (native disclosure — keyboard for free) */
.hx-d { border: 1px solid var(--tgi-mist, #E0E6E8); border-radius: 11px;
  background: var(--tgi-pearl, #F8FAFB); }
.hx-d + .hx-d { margin-top: 8px; }
.hx-d summary { list-style: none; display: flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 10px 13px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--tgi-navy, #1A4174); }
.hx-d summary::-webkit-details-marker { display: none; }
.hx-d summary .chev { transition: transform .16s linear; flex: none; color: var(--tgi-stone, #7A8A94); }
.hx-d[open] summary .chev { transform: rotate(90deg); }
.hx-d summary:focus-visible { outline: 2px solid var(--tgi-cyan, #00A9D7); outline-offset: 2px; }
.hx-d .bd { padding: 0 13px 13px; }

/* Grids — children get min-width:0 so inner overflow-x containers can work */
.hx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hx-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hx-grid2 > *, .hx-grid3 > *, .hx-panels > *, .hx-exchange > *, .hx-facts > * { min-width: 0; }

/* Owner line */
.hx-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--tgi-slate, #4A5862); }
.hx-owner b { color: var(--tgi-navy, #1A4174); font-weight: 600; }

/* Foot */
.hx-foot { margin-top: 30px; font-size: 12px; color: var(--tgi-stone, #7A8A94); line-height: 1.75; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hx-exchange { grid-template-columns: 1fr; }
  .hx-spine { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 4px; }
  .hx-spine::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 0;
    border-left: none; border-top: 2px dashed var(--tgi-orange, #D55E27); }
  .hx-spine-node, .hx-spine-stat { width: auto; flex: 1 1 220px; }
}
@media (max-width: 860px) {
  .hx-panels, .hx-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hx-panels, .hx-grid2, .hx-grid3, .hx-facts { grid-template-columns: minmax(0, 1fr); }
  .hx-sever { grid-template-columns: 1fr; }
  .hx-sever .cut { padding: 4px 0; }
}

/* ── Reduced motion: the final state paints immediately, in full ──────────── */
@media (prefers-reduced-motion: reduce) {
  .hx-in { opacity: 1; transform: none; }
  .hx-on { transition: none; }
  .hx-pulse { animation: none !important; opacity: .5; transform: translateX(40%); }
  .hx-btn, .hx-lens button, .hx-pick button, .hx-d summary .chev { transition: none; }
  .hx-btn:hover { transform: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .hx-mast, .hx-dark { background: #fff !important; color: #000; border: 1px solid #999; }
  .hx-mast h1, .hx-dark .big, .hx-dark b { color: #000; }
  .hx-mast p, .hx-dark ul { color: #222; }
  .hx-lens, .hx-btn { display: none; }
  .hx-card, .hx-tile { break-inside: avoid; border-color: #999; }
  .hx-pulse { display: none; }
}