/* Sacred Command Center · home module styles. Owned by the home module agent. Use the semantic tokens from theme.css only (no hex, no rgba): tests/static.mjs S-a2 fails the build on a literal color. */

/* ── The grid: a band of key numbers, then components dealt into columns (1 on a phone, 2, 3 on a wide screen) ── */
.module--home .hgrid { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hband { min-width: 0; }
.hcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; min-width: 0; }
.hcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hcols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hcol { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hc, .hc-body { min-width: 0; }
.hc-body > .ctr, .hc-body > .hcard { scroll-margin-top: calc(var(--head-h) + var(--top) + var(--s-3)); }
.hhidden { margin-top: var(--s-3); }

/* ── Key numbers: one number, its label and the oldest age; the tile opens the list it counts ── */
.hkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.hkpi { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.hkpi-main { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 92px; padding: var(--s-2) var(--s-3); color: var(--text); text-align: left; text-decoration: none; border-radius: var(--r-card); transition: background-color var(--t-feedback) var(--ease-out); }
.hkpi-main:active { background: var(--hover); }
@media (hover: hover) { .hkpi-main:hover { background: var(--hover); } }
.hkpi:has(.hkpi-plus) .hkpi-l { padding-right: 3.25rem; }
.hkpi-l { font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; letter-spacing: var(--caption-ls); color: var(--text-2); }
.hkpi-v { margin-top: auto; font-size: 2rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.hkpi-v.is-none { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; line-height: 2rem; color: var(--text-3); }
.hkpi-m { display: flex; align-items: center; gap: 4px; min-height: 1.3em; font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hkpi-m.is-bad { color: var(--text); font-weight: 600; }
.hkpi-m .i { color: var(--accent-mark); }
.hkpi-plus { position: absolute; top: 6px; right: 6px; }
.hkpi-x { position: absolute; top: 4px; right: 4px; background: var(--surface-2); }
.hc.is-edit .hkpi-l { padding-right: 2.25rem; }
.hkpi-plus .i { margin-left: 0; }

/* ── Container bodies: dense rows. 14 px text, one or two lines, actions on the right ── */
.module--home .ctr-title { font-size: var(--fs-body); }
.module--home .ctr-sum { font-size: var(--fs-cell); }
.module--home .ctr-head { --ctr-act-w: 0px; padding: var(--s-2) var(--s-3); min-height: 56px; }
/* The one action sits in its own column beside the head (vertically centred), so a long summary never runs under it. */
.module--home .ctr-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.module--home .ctr-act { position: static; grid-column: 2; align-self: center; padding-right: var(--s-3); }
.module--home .ctr-in { container-type: inline-size; container-name: hc; }
.hlist { display: flex; flex-direction: column; }
.hrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "lead main meta acts more"; align-items: center; column-gap: var(--s-2); min-height: 48px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); color: var(--text); }
.hrow > .hrow-lead { grid-area: lead; }
.hrow > .hrow-main { grid-area: main; }
.hrow > .hrow-meta { grid-area: meta; }
.hrow > .hrow-acts { grid-area: acts; }
.hrow > .hrow-more { grid-area: more; position: relative; z-index: 1; display: inline-flex; margin-right: calc(var(--s-1) * -1); }
.hrow--empty { min-height: 44px; }
.hrow-lead { position: relative; z-index: 1; flex: none; width: 40px; display: grid; place-items: center; color: var(--text); }
.hrow-lead:has(.hrow-when) { width: 84px; place-items: start; }
.hrow-lead:has(.check) { margin-left: -12px; width: 44px; }
.hrow:not(:has(> .hrow-lead)) { grid-template-areas: "main meta acts more"; grid-template-columns: minmax(0, 1fr) auto auto auto; }
.hrow-lead .avatar { width: 28px; height: 28px; }
.hrow-n { font-size: var(--fs-body); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.hrow-n--money { font-size: var(--fs-caption); }
.hrow-n.is-strong { color: var(--text); }
.hrow-n.c3 { color: var(--text-3); }
.hrow-mark { width: 20px; height: 20px; color: var(--accent-mark); }
.hrow-mark--dim { color: var(--text-3); }
.hrow-main { min-width: 0; display: flex; flex-direction: column; padding: 4px 0; color: var(--text); text-align: left; text-decoration: none; }
a.hrow-main:hover { text-decoration: none; }
.hrow--link .hrow-main::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link; the lead and the actions sit above it */
.hrow--link .hrow-main:focus-visible { outline: none; }
.hrow--link .hrow-main:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-button); }
@media (hover: hover) { .hrow--link:hover { background: var(--hover); } }
.hrow--link:active { background: var(--hover); }
.hrow-t { font-size: var(--fs-cell); font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.hrow-t--wrap { font-weight: 500; }
.hrow-s { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--caption-ls); color: var(--text-3); }
.hrow-line { color: var(--text-2); }
.hrow-meta { position: relative; z-index: 1; display: inline-flex; justify-self: end; align-items: center; gap: var(--s-1); font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hrow-word { font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.hrow-word.is-red { color: var(--text); font-weight: 700; }
.hrow-acts { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s-1); justify-self: end; }
.hrow-chev { color: var(--text-3); width: 20px; height: 20px; }
.hrow-must { margin-right: 6px; padding: 1px 6px; border-radius: var(--r-button); background: var(--surface-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); color: var(--text); }
.hrow-when { display: flex; flex-direction: column; line-height: 1.25; }
.hrow-when b { font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.hrow-when span { font-size: var(--fs-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.hrow-retry { cursor: pointer; }
.hrow.is-done .hrow-t { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
.hrow.is-late .hrow-s { color: var(--text-2); }
.hrow .age { font-size: var(--fs-caption); }
.hrow .btn--sm { text-transform: none; letter-spacing: 0; font-size: var(--fs-cell); font-weight: 600; }
.hrow .tbtn { min-height: 32px; }
.hgroup { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3) 2px; border-top: 1px solid var(--line); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.hlist > .hgroup:first-child { border-top: 0; }
.hlist > li + .hgroup { border-top: 1px solid var(--line); }
.hgroup .num { color: var(--text-2); }
.hdisc { border-top: 1px solid var(--line); }
.hdisc-b { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 40px; padding: 0 var(--s-3); font-size: var(--fs-cell); font-weight: 600; color: var(--text-2); text-align: left; }
@media (hover: hover) { .hdisc-b:hover { background: var(--hover); color: var(--text); } }
.hdisc-i { transition: transform var(--t-feedback) var(--ease-out); color: var(--text-3); }
.hdisc-i.is-open { transform: rotate(90deg); }
.hdisc-n { margin-left: auto; color: var(--text-3); }
.htools { display: flex; align-items: center; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.hfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); min-height: 40px; padding: var(--s-1) var(--s-3); border-top: 1px solid var(--line); }
.hfoot .caption { margin-right: auto; }
.hnote { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-caption); line-height: 1.45; color: var(--text-2); }
.hnote .i { margin-top: 1px; color: var(--accent-mark); flex: none; }
.hpad { padding: var(--s-3); }
.hsub { padding: var(--s-2) var(--s-3) 2px; border-top: 1px solid var(--line); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.hwk-unset { padding-top: 0; }

/* Narrow container: the ... menu stays on the title line; the word and the actions drop under the title */
@container hc (max-width: 480px) {
  .hrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main more" ". meta meta" ". acts acts"; }
  .hrow > .hrow-meta { justify-self: start; margin: 0 0 2px; }
  .hrow > .hrow-acts { justify-self: start; flex-wrap: wrap; margin: 2px 0 var(--s-1); }
  .hrow:not(:has(> .hrow-lead)) { grid-template-areas: "main more" "meta meta" "acts acts"; grid-template-columns: minmax(0, 1fr) auto; }
}

/* ── Progress ── */
.htallies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.htally { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--surface); }
.htally-b { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-2) 0; text-align: left; border-radius: var(--r-button); }
@media (hover: hover) { .htally-b:hover { background: var(--hover); } }
.htally-l { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-2); }
.htally-n { font-size: 1.75rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.htally-plus { margin: var(--s-1) var(--s-2) var(--s-2); align-self: flex-start; }
.hweek { margin-top: var(--s-2); }
@media (max-width: 420px) { .htallies { grid-template-columns: repeat(3, minmax(0, 1fr)); } .htally-n { font-size: 1.5rem; } }

.hyest { border-top: 1px solid var(--line); }
.hyest-ul { margin: var(--s-1) 0 var(--s-2); }
.hyest-ul li { position: relative; padding-left: var(--s-3); color: var(--text-2); font-size: var(--fs-cell); }
.hyest-ul li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 2px; background: var(--text-3); }

/* ── Week ahead ── */
.hdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.hday { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; border: 1px solid var(--line); border-radius: var(--r-button); color: var(--text-2); }
.hday.is-today { border-color: var(--text-3); color: var(--text); }
.hday-w { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.hday-n { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.hday-m { width: 8px; height: 8px; border-radius: 2px; background: transparent; }
.hday-m.on { background: var(--gilt); }

/* ── Pipeline: grey steps, crimson only on the stage that needs attention ── */
.hstage { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.25rem minmax(0, 7rem); align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); }
.hstage-l { font-size: var(--fs-cell); font-weight: 600; color: var(--text); }
.hstage-bar { align-self: center; }
.hstage-n { text-align: right; font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.hstage-v { text-align: right; font-size: var(--fs-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstage .state-cell { font-size: var(--fs-caption); font-weight: 500; }
.hstage--h { min-height: 28px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.hstage--h .hstage-n, .hstage--h .hstage-v { color: var(--text-3); font-weight: 600; font-size: var(--fs-caption); }
.hstage--off { grid-template-columns: 6.5rem minmax(0, 1fr); }
.hstage-off { color: var(--text-3); }
@container hc (max-width: 380px) { .hstage { grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; } .hstage-v { display: none; } }

/* ── Money ── */
.hmoney + .hmoney { border-top: 1px solid var(--line); }
.hmoney-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 6px 0; }
.hmoney-row + .hmoney-row, .hmoney-row + .caption { }
.hmoney-l { font-size: var(--fs-cell); font-weight: 600; color: var(--text); }
.hmoney .eyebrow + * { margin-top: var(--s-1); }
.hmoney .caption { margin: 0 0 var(--s-1); }
.hmoney-row .num { font-size: var(--fs-body); font-weight: 700; color: var(--text); }

/* ── Brief, quick links, the password card ── */
.hbrief p { margin: 0 0 var(--s-2); color: var(--text-2); }
.hbrief .eyebrow { margin: var(--s-3) 0 var(--s-1); }
.hbrief .eyebrow:first-child { margin-top: 0; }
.hbrief-ul { margin: 0 0 var(--s-2); }
.hbrief-ul li { position: relative; padding-left: var(--s-3); color: var(--text-2); }
.hbrief-ul li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 2px; background: var(--text-3); }
.hlinks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hcard { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.hcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--s-2) 0; text-align: left; }
.hcard-t { font-size: var(--fs-cell); font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.2em; }
.hcard-s { font-size: var(--fs-caption); color: var(--text-3); }

/* ── Swipe rows on a phone (the same classes HQ's swipe hook paints; every swipe has a visible button too) ── */
.swipe { position: relative; overflow: hidden; }
.swipe-under { position: absolute; inset: 0; pointer-events: none; }
.swipe-under span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--s-4); font-weight: 700; opacity: 0; }
.swipe-under .l { background: var(--gilt); color: var(--on-gilt); justify-content: flex-start; }
.swipe-under .r { background: var(--raised); color: var(--text); justify-content: flex-end; }
.swipe-top { position: relative; z-index: 1; background: var(--surface); touch-action: pan-y; }
.swipe-top:not(.dragging) { transition: transform var(--t-feedback) var(--ease-out); }
.hlist > .swipe + .swipe, .hlist > .swipe + li, .hlist > li + .swipe { border-top: 1px solid var(--line); }

/* ── Customize Home ── */
.hbar { position: sticky; top: calc(var(--head-h) + var(--top)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.hbar-t { display: flex; flex-direction: column; min-width: 0; }
.hbar-b { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hc.is-edit { position: relative; }
/* While arranging, the controls sit on the component's own header (its name is already there); the key numbers have no header, so their bar stands above them. */
.hc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: 4px var(--s-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-button) var(--r-button) 0 0; border-bottom: 0; }
.hc-stage { position: relative; }
.hc.is-edit:not(.is-row) .hc-bar { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 3; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-button); }
.hc.is-edit:not(.is-row) .hc-body > .ctr .ctr-act { display: none; }
.hc.is-edit:not(.is-row) .hc-body > .ctr .ctr-head { padding-right: 14rem; }
.hc.is-edit:not(.is-row) .hc-body > .ctr { border-radius: var(--r-card); }
.hc-note { margin: 0; padding: var(--s-1) var(--s-3); font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-button) var(--r-button) 0 0; border-bottom: 0; }
.hc-note + .hc-stage .hc-body > .ctr { border-top-left-radius: 0; border-top-right-radius: 0; }
.tbtn--ico { padding: 0 var(--s-1); min-width: 32px; justify-content: center; }
.hc-grip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-button); color: var(--text-3); cursor: grab; }
@media (hover: hover) { .hc-grip:hover { background: var(--hover); color: var(--text); } }
.hc-grip:active { cursor: grabbing; }
.hc-name { font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.hc-note { font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); }
.hc-btns { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.hc.is-edit.is-row .hc-body > .ctr, .hc.is-edit.is-row .hc-body > .hcard { border-top-left-radius: 0; border-top-right-radius: 0; }
.hc.is-edit .hc-body > .ctr { pointer-events: none; }
.hc.is-edit .hc-body > .ctr .btn--primary { background: transparent; border-color: var(--line-strong); color: var(--text); }   /* the one filled button while arranging is Done */
.hc.is-edit .hkpis { pointer-events: auto; }
.hc.is-edit .hkpi-main, .hc.is-edit .hkpi-plus { pointer-events: none; }
.hc.drop-before::before, .hc.drop-after::after { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.hc.drop-before::before { margin-bottom: 4px; }
.hc.drop-after::after { margin-top: 4px; }
.hshelf { margin-top: var(--s-4); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.hshelf-b { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.hpage { max-width: 14rem; }
.hpage > span, .hpage { overflow: hidden; text-overflow: ellipsis; }

/* ── Sheets: the task editor, the number stepper, the partner's week, linked lead ── */
.htask { display: flex; align-items: flex-start; gap: var(--s-2); }
.htask-title { min-height: 88px; font-size: var(--fs-h3); font-weight: 600; }
.hbtns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hstep { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-4) 0; }
.hstep-in { width: 8rem; min-height: 64px; text-align: center; font-size: var(--fs-stat); font-weight: 900; padding: 0 var(--s-2); }
.hstep-b { width: 56px; height: 56px; border: 1px solid var(--line-strong); }
.hsec { display: flex; flex-direction: column; gap: var(--s-2); }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.hstat { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-button); }
.hstat b { font-size: 1.75rem; font-weight: 900; line-height: 1.1; color: var(--text); }
.hstat span { font-size: var(--fs-caption); color: var(--text-3); }
.hlinked { display: flex; flex-direction: column; gap: var(--s-2); }
.sheet .hlist { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); }
.sheet .hrow--link:hover { background: var(--hover); }
.sheet .hsec .chips .chip { min-height: 32px; }

/* ── Phone ── */
@media (max-width: 719px) {
  /* the key numbers scroll sideways on a phone, so Due now is on the first screen */
  .hkpis { display: grid; grid-auto-flow: column; grid-auto-columns: 9.5rem; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .hkpis > .hkpi { scroll-snap-align: start; }
  .hkpi-main { min-height: 84px; }
  .hrow { min-height: var(--tap); }
  .hc-btns { margin-left: 0; width: 100%; }
  .hc.is-edit:not(.is-row) .hc-bar { position: static; flex-wrap: wrap; border-radius: var(--r-button) var(--r-button) 0 0; border-bottom: 0; }
  .hc.is-edit:not(.is-row) .hc-body > .ctr .ctr-act { visibility: visible; }
  .hc.is-edit:not(.is-row) .hc-body > .ctr .ctr-head { padding-right: var(--s-3); }
  .hc.is-edit:not(.is-row) .hc-body > .ctr { border-top-left-radius: 0; border-top-right-radius: 0; }
  .hbar-b { width: 100%; }
}

/* a phone: the action goes under the head, in line with the title */
@media (max-width: 559px) {
  .module--home .ctr-hd { grid-template-columns: minmax(0, 1fr); }
  .module--home .ctr-act { grid-column: 1; justify-self: start; padding: 0 var(--s-3) var(--s-2) calc(var(--s-3) + 24px + var(--s-2)); }
}

/* ── Pipeline funnel ── */
.hfunnel { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); margin: 0; list-style: none; }
.hfun { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--s-3); min-height: 32px; }
.hfun-l { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-2); }
.hfun-bar { display: flex; justify-content: center; height: 20px; background: var(--chart-track); border-radius: var(--r-button); overflow: hidden; }
.hfun-i { display: block; height: 100%; background: var(--chart-2); }
.hfun-i.c1 { background: var(--chart-1); }
.hfun-i.focal { background: var(--chart-focal); }
.hfun-n { text-align: right; font-weight: 700; }

/* The Critical band (P6 C-13) sits above the key numbers, outside the page layout. */
.hband--crit { margin-bottom: var(--s-3); }
.crit-meta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; }
.crit-meta-n { font-size: var(--fs-caption); font-weight: 500; color: var(--text-3); }