*/
.hmi-tier {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
border: 2px solid transparent;
background: var(--tier-none-bg);
}
.hmi-tier__key { font-family: var(--font-mono); font-size: var(--size-caption); color: var(--text-secondary); }
.hmi-tier__val { font-family: var(--font-mono); font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums; }
.hmi-tier--good { background: var(--tier-good-bg); }
.hmi-tier--good .hmi-tier__val { color: var(--tier-good-fg); }
.hmi-tier--fair { background: var(--tier-fair-bg); }
.hmi-tier--fair .hmi-tier__val { color: var(--tier-fair-fg); }
.hmi-tier--poor { background: var(--tier-poor-bg); }
.hmi-tier--poor .hmi-tier__val { color: var(--tier-poor-fg); }
.hmi-tier--none .hmi-tier__val,
.hmi-tier--none .hmi-tier__key { color: var(--tier-none-fg); }
/* The current period. A neutral outline, never another colour — the fill
already carries the tier, and a second hue would collide with it. */
.hmi-tier--current { border-color: var(--text-primary); }
/* At distance the key label shrinks and the value grows: position already
tells the reader which period they are looking at. */
[data-viewing="far"] .hmi-tier { padding: var(--space-3) var(--space-5); }
[data-viewing="far"] .hmi-tier__key { font-size: var(--size-label); }
[data-viewing="far"] .hmi-tier__val { font-size: var(--size-value-md); font-weight: var(--weight-semibold); }
/* Tier legend — always label the bands. A tinted grid with no key is a puzzle. */
.hmi-tier-legend { display: flex; gap: var(--space-5); flex-wrap: wrap;
font-size: var(--size-caption); color: var(--text-secondary); }
.hmi-tier-legend i { font-style: normal; display: inline-flex; align-items: center; gap: var(--space-2); }
.hmi-tier-legend .chip { width: 16px; height: 16px; border-radius: 3px;
display: inline-block; border: 1px solid var(--border-default); }
/* ============================================================
HIGH CONTRAST / FORCED COLORS
Windows High Contrast Mode replaces every author color with a
system palette. The failure mode is not "wrong colors" — it is
elements that were distinguished ONLY by background disappearing
into a single flat surface.
The system survives this better than most because state always
carries a word, never just a color. These rules cover the rest.
============================================================ */
@media (forced-colors: active) {
/* Keep panel edges visible; backgrounds are flattened by the OS. */
.hmi-card,
.hmi-banner,
.hmi-field input,
.hmi-field select,
.hmi-field textarea,
.hmi-table th,
.hmi-table td {
border-color: CanvasText;
}
/* Buttons lose their fill distinction, so give every variant a
visible edge and let the primary read as the default action. */
.hmi-btn { border: 1px solid ButtonText; }
.hmi-btn--primary { border-width: 2px; }
.hmi-btn--destructive { border-width: 2px; border-style: double; }
.hmi-btn:disabled { color: GrayText; border-color: GrayText; }
/* Status dots become one flat color. Fill vs hollow is the only
channel left, so protect it. */
.hmi-dot { forced-color-adjust: none; background: CanvasText; }
.hmi-dot--hollow { background: Canvas; border-color: CanvasText; }
.hmi-dot--nodata,
.hmi-dot--idle { background: GrayText; }
/* The severity rule on a banner is structural, not decorative. */
.hmi-banner { border-left-width: 5px; border-left-color: CanvasText; }
.hmi-banner--critical { border-left-style: double; }
.hmi-banner--warning { border-left-style: dashed; }
.hmi-banner--info { border-left-style: solid; }
/* Selected rows keep their marker. */
.hmi-table tr[aria-selected="true"] {
outline: 2px solid Highlight;
outline-offset: -2px;
}
/* Focus must track the system highlight, not our Info token. */
:focus-visible { outline-color: Highlight; }
}
/* ============================================================
PREFERS-CONTRAST: MORE
The user asked for more separation without going all the way to
forced colors. Lift borders one step; leave type alone.
============================================================ */
@media (prefers-contrast: more) {
:root, [data-theme="light"], [data-theme="dark"] {
--border-subtle: var(--border-default);
--border-default: var(--border-interactive);
}
.hmi-card, .hmi-banner { border-width: 2px; }
:focus-visible { outline-width: 3px; }
}