<- active panel: display: contents
Three consequences the selectors below depend on:
(a) A TAB HEADER also carries .mud-tab-panel, so any panel rule must be scoped
under .mud-tabs-panels or it inflates the strip (a bare .mud-tab-panel
padding rule took tabs to ~53px tall).
(b) The active panel is display: contents and IGNORES padding -- pad the
.mud-tabs-panels container instead.
(c) MinimumTabWidth defaults to "160px" and lands as an INLINE style. CSS cannot
beat that without !important, so tabs are 160px wide unless the caller passes
MinimumTabWidth="0" on MudTabs. Pass it wherever the label set is short.
There is NO .hav-tab / aria-selected element in the output, so target the real
.mud-tab* classes. Decision: HIDE the animated .mud-tab-slider and draw a static
2px steel underline on .mud-tab-active (precise, blueprint-correct -- no sliding
motion). Labels are Barlow Condensed uppercase ~13px; square corners throughout.
Colour is token-only, so dark mode (--mud-palette-* rewritten on :root) just works.
-------------------------------------------------------------------------- */
.hav-tabs .mud-tabs-tabbar { border-bottom: 1px solid var(--hav-line); min-height: 0; }
.hav-tabs .mud-tabs-tabbar-inner,
.hav-tabs .mud-tabs-tabbar-content,
.hav-tabs .mud-tabs-tabbar-wrapper { min-height: 0; background: transparent; }
.hav-tabs .mud-tab {
font-family: var(--hav-font-head); text-transform: uppercase; letter-spacing: .04em;
font-size: 13px; font-weight: 500; color: var(--hav-text);
border-radius: 0; min-height: 0; padding: 10px 16px;
border-bottom: 2px solid transparent;
/* min-width is set INLINE by MinimumTabWidth (default 160px) -- see (c) above. */
}
.hav-tabs .mud-tab:hover { color: var(--hav-accent); background: color-mix(in srgb, var(--hav-accent) 6%, transparent); }
.hav-tabs .mud-tab.mud-tab-active { color: var(--hav-accent); font-weight: 600 !important; border-bottom-color: var(--hav-accent); }
/* Tabs are focusable DIVs (role=tab, tabindex=0), so in Chromium a MOUSE CLICK
triggers :focus-visible -- the ring shows on click, not only on keyboard. At
offset -2px it sat flush against the strip hairline and the tab seams and read
as a box overlapping the neighbour; -6px frames the label area instead. */
.hav-tabs .mud-tab:focus-visible { outline: 2px solid var(--hav-accent); outline-offset: -6px; }
/* R3: 9.x carries the generic state class .mud-disabled (the "mud-tab-disabled" name never existed). */
.hav-tabs .mud-tab.mud-disabled { color: var(--hav-text-muted); opacity: .45; }
.hav-tabs .mud-tab-slider { display: none; } /* replaced by the static underline above */
/* Ripple guard: .mud-tab carries overflow: visible (S11.15, so a label is never cut)
which also unclips MudBlazor's ripple -- a ~320px circle centred on a ~160px tab,
visibly bleeding over both neighbours on click. The hover tint and the underline
are the feedback; the ripple has no job here. */
.hav-tabs .mud-ripple-effect { display: none; }
/* Panels only -- NOT the tab headers, which share the .mud-tab-panel class. Padding
lands on the container because the active panel is display: contents. */
.hav-tabs .mud-tabs-panels { padding-top: 18px; }
/* Overflow: 9.x renders scroll buttons as .mud-tabs-scroll-button (plural "tabs");
.mud-tab-scroll-button was the pre-9.x name and matched nothing. Recolour to the
accent -- the strip scrolls horizontally on its own otherwise. */
.hav-tabs .mud-tabs-scroll-button { color: var(--hav-text-muted); }
.hav-tabs .mud-tabs-scroll-button:hover { color: var(--hav-accent); }
/* Fallback for a hand-rolled (non-MudTabs) strip + the static audit mockup.
Opt in with .hav-tabs--plain so it never fights MudTabs' own layout on .hav-tabs. */
.hav-tabs--plain { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--hav-line); overflow-x: auto; }
.hav-tab { font-family: var(--hav-font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: var(--hav-text); padding: 10px 16px; border: 0; background: transparent; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.hav-tab:hover { color: var(--hav-accent); }
.hav-tab.active, .hav-tab[aria-selected="true"] { color: var(--hav-accent); border-bottom-color: var(--hav-accent); font-weight: 600; }
.hav-tab:focus-visible { outline: 2px solid var(--hav-accent); outline-offset: -2px; }
.hav-tab:disabled, .hav-tab[aria-disabled="true"] { color: var(--hav-text-muted); opacity: .45; cursor: not-allowed; }
.hav-tabs__overflow { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 34px; color: var(--hav-text-muted); }
/* --------------------------------------------------------------------------
Onboarding step header (v2) -- shell-less first-run wizard progress.
-------------------------------------------------------------------------- */
.hav-step-header { display: flex; flex-direction: column; gap: 9px; }
.hav-step-count { font-family: var(--hav-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--hav-text-muted); }
.hav-step-progress { height: 5px; background: var(--hav-line); }
.hav-step-progress > span { display: block; height: 100%; background: var(--hav-accent); transition: width var(--hav-dur-dialog) linear; } /* §5: a determinate fill is linear (v1.108.0) */
@media (prefers-reduced-motion: reduce) { .hav-step-progress > span { transition: none; } }
/* --------------------------------------------------------------------------
Entity detail 8/4 (v2) -- record view. Entity header + KPI plates carry the
registration marks; standards card, main content and the right rail are plain
hairline. Collapses to one column below ~960px.
-------------------------------------------------------------------------- */
.hav-detail { display: grid; grid-template-columns: 8fr 4fr; gap: 20px; align-items: start; }
.hav-rail { display: flex; flex-direction: column; gap: 16px; }
/* The rail NARROWS before it moves: 4fr does that on its own down to ~960, where the
side menu docks to icons and gives ~200px back. Stacking at 960 would throw away
the width the dock just recovered -- the responsive ladder stacks at 760. */
@media (max-width: 760px) { .hav-detail { grid-template-columns: 1fr; } }
/* S11.8 -- A populated region takes the width (HAV2132). The grid collapses on the
ABSENCE OF THE RAIL, not on a second parameter somebody has to remember after
setting the first: a page with ShowAnchorPanel="false", a permission-hidden rail
or an empty timeline would otherwise hold 4 of 12 columns of dead ground. */
.hav-detail:not(:has(.hav-rail)) { grid-template-columns: 1fr; }
.hav-detail > :only-child { grid-column: 1 / -1; }
/* --------------------------------------------------------------------------
S11.7 -- Attribute READOUT (HAV2131). Attributes are a readout; metrics are
plates. "Category: Safety Critical" is not a measurement and must never take
a 38px Condensed numeral or a 96px plate. Label left, value right, hairline
between rows. Promoted from the journey-detail note -- every detail page needs
it, so it is not bespoke to one page. Works on MudList or plain rows.
-------------------------------------------------------------------------- */
.hav-readout { display: flex; flex-direction: column; }
.hav-readout__row,
.hav-readout .mud-list-item {
display: flex; align-items: baseline; gap: 12px;
min-height: 36px; padding: 8px 0;
border-bottom: 1px solid var(--hav-line);
background: none;
font-family: var(--hav-font-body); font-size: 14px;
}
.hav-readout__row:last-child,
.hav-readout .mud-list-item:last-child { border-bottom: 0; }
.hav-readout__label,
.hav-readout .mud-list-item-text { color: var(--hav-text-label); }
.hav-readout__value { margin-left: auto; text-align: right; font-weight: 600; color: var(--hav-text); }
/* --------------------------------------------------------------------------
S11.10 -- Panel geometry (HAV2134). "Sticky footer" is a description; this is
the geometry that makes it true. The panel spans the viewport, the commit bar
pins to the PANEL's bottom edge, and the body is the only scroll region. The
body's bottom padding equals the bar height, so the last field can never sit
under it -- which is why a panel footer may pin where a table footer may not
(S11.2). Put .hav-panel on the MudDrawer.
-------------------------------------------------------------------------- */
.hav-panel,
.mud-drawer.hav-panel {
display: flex; flex-direction: column;
height: 100dvh; max-height: 100dvh;
top: 0; bottom: 0;
background: var(--hav-panel);
}
.hav-panel__header {
flex: 0 0 auto; min-height: 56px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 0 20px; border-bottom: 1px solid var(--hav-line);
}
.hav-panel__body {
flex: 1 1 auto; overflow-y: auto;
padding: 20px 20px calc(20px + 64px); /* clears the pinned commit bar */
}
.hav-panel__footer {
flex: 0 0 auto; min-height: 64px;
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
padding: 0 24px;
border-top: 1px solid var(--hav-line);
background: var(--hav-surface-chrome);
}
/* --------------------------------------------------------------------------
S11.6 -- A row fills its width (HAV2130). A row of cards is a surface and a
surface has no holes: two items in a three-column row leave a dead track
that reads as a card which failed to load. Lay the row out from the ITEM's
minimum width, never from a column count -- auto-fit then wraps on its own
at any item count and any viewport, with no breakpoint to maintain.
Use INSTEAD of MudGrid + MudItem md= wherever the count comes from a query.
-------------------------------------------------------------------------- */
.hav-row {
display: grid;
gap: 16px;
/* Self-declared, not inherited (v1.120.0). Custom properties inherit, so without this a
.hav-row nested inside a solo row took the parent's definite cap and auto-fit collapsed it
to one column. The solo rule below still wins on the solo row itself (later, and :has adds
specificity). */
--hav-row-track: 1fr;
/* min(floor, 100%) -- a bare floor cannot shrink below itself, so a narrow
column would overflow instead of wrapping. This collapses the floor to the
container when the container is smaller: no media query, no breakpoint. */
grid-template-columns: repeat(auto-fit, minmax(min(var(--hav-row-min, 280px), 100%), var(--hav-row-track, 1fr)));
/* A short row is left-aligned and filled, never centred (two holes instead
of one). --hav-row-track caps the track only where a lone item must not
sprawl; it is not a centring device. */
justify-content: start;
align-items: stretch;
}
/* Track floors from the token contract. */
.hav-row--alert { --hav-row-min: 320px; }
.hav-row--kpi { --hav-row-min: 240px; }
.hav-row--insight { --hav-row-min: 220px; }
/* The lone-item cap (v1.118.0). Automatic for a row with one child; .hav-row--solo is
the opt-in for a row whose items must ALL stay to the measure. Delete any local
`--hav-row-track: 1fr` override once this lands -- it restates the default. */
.hav-row:has(> :only-child),
.hav-row--solo { --hav-row-track: var(--hav-row-track-solo); }
/* .hav-row--fill (v1.120.0): the opt-out for a lone-child row that is the page's structural
shell, not an insight -- a dashboard layout row whose one child is the whole page body.
(0,2,0) and later, so it beats .hav-row:has(> :only-child). Replaces the app's scoped
.dashboard-layout-row exemption; delete that when this lands. Never on a row of peers. */
.hav-row.hav-row--fill { --hav-row-track: 1fr; }
/* The card IS the grid item. A wrapper carrying its own width or flex-basis
re-creates the dead column inside the cell. */
.hav-row > * { min-width: 0; }
/* --------------------------------------------------------------------------
Calendar / scheduling (v4 -- R3, attested against Heron.MudCalendar 4.1.0).
Put Class="hav-cal" on
. Month view renders: