/* ==========================================================================
   heliqx OT PULSE UI - reference component styles (v0.9)
   --------------------------------------------------------------------------
   Plain CSS, tokens only (requires hx.tokens.css). This file is the
   reference implementation the guide describes and the preview renders.
   Frameworks wrap these classes (React components, Django templates); the
   class names are the shared vocabulary between design and code.

   Naming: block .hx-thing, modifier .hx-thing--variant, state .is-state.
   Every rule is scoped to a class. No element selectors outside .hx-root.
   ========================================================================== */

/* ---- Root and typography ------------------------------------------------- */
.hx-root {
  background: var(--hx-bg);
  color: var(--hx-fg);
  font-family: var(--hx-font-sans);
  font-size: var(--hx-text-base);
  line-height: var(--hx-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hx-root *, .hx-root *::before, .hx-root *::after { box-sizing: border-box; }
.hx-root a:not([class]) { color: var(--hx-accent-strong); text-decoration: none; }
.hx-root a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }
.hx-root :focus-visible { outline: none; box-shadow: var(--hx-focus-ring); border-radius: var(--hx-radius-input); }
.hx-root ::selection { background: var(--hx-accent-soft); }
.hx-root h1, .hx-root h2, .hx-root h3, .hx-root h4 { margin: 0; font-weight: 700; letter-spacing: var(--hx-tracking-tight); line-height: var(--hx-leading-tight); text-wrap: balance; }
.hx-root h1 { font-size: var(--hx-text-2xl); }
.hx-root h2 { font-size: var(--hx-text-xl); }
.hx-root h3 { font-size: var(--hx-text-lg); }
.hx-root h4 { font-size: var(--hx-text-md); font-weight: 600; }
.hx-root p { margin: 0; }
.hx-root code, .hx-mono { font-family: var(--hx-font-mono); font-size: 0.93em; }
.hx-root code { background: var(--hx-surface-sunk); border-radius: var(--hx-radius-tag); padding: 1px 5px; }

.hx-eyebrow { font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; color: var(--hx-fg-muted); }
.hx-eyebrow--accent { color: var(--hx-accent-strong); }
.hx-muted { color: var(--hx-fg-muted); }
.hx-subtle { color: var(--hx-fg-subtle); }
.hx-num { font-variant-numeric: tabular-nums; }
.hx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Shape helpers: the gap corner (0 R 0 R) ------------------------------ */
.hx-corner-panel   { border-radius: 0 var(--hx-corner-panel) 0 var(--hx-corner-panel); }
.hx-corner-card    { border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); }
.hx-corner-control { border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); }
.hx-corner-sm      { border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); }
.hx-corner-xs      { border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); }

/* ---- Layout primitives ------------------------------------------------------ */
.hx-stack { display: flex; flex-direction: column; gap: var(--hx-space-4); }
.hx-stack--tight { gap: var(--hx-space-2); }
.hx-row { display: flex; align-items: center; gap: var(--hx-space-3); }
.hx-row--between { justify-content: space-between; }
.hx-row--wrap { flex-wrap: wrap; }
.hx-spacer { flex: 1 1 auto; }
/* Responsive rule (README R18, D-018): the shell, content padding and control
   height follow the viewport (639 / 1023 / 1439); layout components follow
   the width of their own container (900 / 600 / 480 / 360 / 300). The grid, the
   sign-in page and the form row are containers; their children switch on
   @container. Browsers without container queries keep the viewport fallback
   under @supports not. A container has no intrinsic width: keep .hx-grid,
   .hx-signin and .hx-form-row in block or stretched flex contexts. */
.hx-grid { display: grid; gap: var(--hx-space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); container-type: inline-size; }
/* Two halves (facts beside a timeline) that stack below 900px of their own width */
.hx-split { display: grid; gap: var(--hx-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
.hx-split > * { min-width: 0; }
@container (max-width: 899px) { .hx-split > * { grid-column: 1 / -1; } }
@supports not (container-type: inline-size) { @media (max-width: 1023px) { .hx-split > * { grid-column: 1 / -1; } } }
.hx-col-3 { grid-column: span 3; } .hx-col-4 { grid-column: span 4; } .hx-col-6 { grid-column: span 6; }
.hx-col-8 { grid-column: span 8; } .hx-col-12 { grid-column: span 12; }
/* Thresholds follow a minimum column width of about 140px per tile: four
   col-3 tiles need 600px, two col-6 halves need 300px. */
@container (max-width: 599px) { .hx-col-3, .hx-col-4 { grid-column: span 6; } .hx-col-8 { grid-column: span 12; } }
@container (max-width: 299px) { .hx-col-3, .hx-col-4, .hx-col-6 { grid-column: span 12; } }
@supports not (container-type: inline-size) {
  @media (max-width: 1023px) { .hx-col-3, .hx-col-4 { grid-column: span 6; } .hx-col-8 { grid-column: span 12; } }
  @media (max-width: 639px)  { .hx-col-3, .hx-col-4 { grid-column: span 12; } }
}
/* Visibility helpers for header controls and similar: what leaves the screen
   on tablets (< 1024) and on phones (< 640). Chapter 02 section 3 names the
   controls that use them. */
@media (max-width: 1023px) { .hx-hide-tablet { display: none !important; } }
@media (max-width: 639px)  { .hx-hide-phone { display: none !important; } }

/* ---- The pulse line ---------------------------------------------------------- */
/* A flat accent line drawn entirely in CSS on an empty element:
     <span class="hx-pulse"></span>          under a title (parent has .hx-fit)
     <hr class="hx-pulse">                   full-width rule / separator
   The width is the container's width, so the line follows the text it
   belongs to (wrap title and pulse in .hx-fit, width: fit-content) or the
   full width of a section. No per-occurrence or per-translation widths.
   Colour = currentColor, default the accent. Sizes: default 20px (title),
   --md 28px (band, document title), --lg 40px (hero, sign-in).
   The heartbeat figure of earlier versions is retired and the line stays
   flat (D-028, management). --draw reveals the line once at load (480ms).
   Print and email: see chapter 05. */
.hx-pulse {
  --hx-pulse-h: var(--hx-pulse-h-sm);
  --hx-pulse-w: var(--hx-pulse-stroke);
  display: block; position: relative; box-sizing: border-box;
  width: 100%; height: var(--hx-pulse-h); margin: 0; padding: 0; border: 0;
  color: var(--hx-accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% var(--hx-pulse-w);
  background-position: 0 50%;
}
.hx-pulse--md { --hx-pulse-h: var(--hx-pulse-h-md); }
.hx-pulse--lg { --hx-pulse-h: var(--hx-pulse-h-lg); --hx-pulse-w: var(--hx-pulse-stroke-lg); }
.hx-pulse--muted { color: var(--hx-line-strong); }
.hx-pulse--rule { margin: var(--hx-space-4) 0; }
.hx-pulse--draw { -webkit-mask: linear-gradient(90deg, black 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, black 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; animation: hx-pulse-draw var(--hx-dur-slow) var(--hx-ease-out) forwards; }
@keyframes hx-pulse-draw { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hx-pulse--draw { -webkit-mask: none; mask: none; animation: none; } }
/* Loader: the heliqx mark turning to the heartbeat rhythm (the same figure and
   motion as .hx-spinner, D-025 and D-028). The indeterminate wait indicator
   for content areas (panels, pages, tables while the first data arrives) with
   a line of text (.hx-loading). Colour inherits fg-muted by default; --accent
   for the one loading state that is the page's main event. Sizes 20, --md 28,
   --lg 40. The full pulse line is never a loader. */
.hx-loader { display: inline-block; width: var(--hx-pulse-h-sm); height: var(--hx-pulse-h-sm); flex-shrink: 0; vertical-align: middle; color: var(--hx-fg-muted); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 50% 50%; animation: hx-spin-beat 2s linear infinite, hx-drift 12s linear infinite; }
.hx-loader--md { width: var(--hx-pulse-h-md); height: var(--hx-pulse-h-md); }
.hx-loader--lg { width: var(--hx-pulse-h-lg); height: var(--hx-pulse-h-lg); }
.hx-loader--accent { color: var(--hx-accent); }
@media (prefers-reduced-motion: reduce) { .hx-loader { animation: none; } }
/* The mark as a static glyph: the icon of an item that has no natural icon
   of its own (a generic entry), the list marker's sibling. Colour inherits;
   in a rail the active item turns it accent. */
.hx-mark-glyph { display: inline-block; width: 16px; height: 16px; margin: 0 2px; flex-shrink: 0; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hx-mark-glyph--sm { width: 12px; height: 12px; }
.hx-rail-item.is-active .hx-mark-glyph { color: var(--hx-accent); }
/* The OT PULSE wordmark inline in a headline, eyebrow or loader text: the cap height of the
   surrounding text (0.7em), on the baseline, brand orange; once per screen where possible
   (chapter 00 section 4). Markup: <svg class="hx-wordmark" viewBox="0 0 245.25 38.15"
   role="img" aria-label="OT Pulse"><use href="#hx-wordmark"/></svg> with the sprite symbol. */
.hx-wordmark { display: inline-block; height: 0.7em; width: auto; aspect-ratio: 245.25 / 38.15; vertical-align: baseline; margin: 0 0.04em; fill: currentColor; color: var(--hx-brand-orange); flex-shrink: 0; }
.hx-loading { display: inline-flex; align-items: center; gap: var(--hx-space-3); color: var(--hx-fg-muted); font-size: var(--hx-text-base); }
.hx-loading--block { display: flex; justify-content: center; padding: var(--hx-space-12) var(--hx-space-6); }
@media (prefers-reduced-motion: reduce) { .hx-loader { animation: none; } }
/* Width follower: a column whose width is its widest child (the title), so a
   pulse below matches the text. Use on .hx-page-title, hero title blocks, band eyebrow groups. */
.hx-fit { width: fit-content; max-width: 100%; display: flex; flex-direction: column; gap: var(--hx-space-2); }

/* ---- Shell: sidebar rail (>= 7 destinations or grouped navigation) --------- */
.hx-shell--rail { display: grid; grid-template-columns: var(--hx-rail-w) minmax(0, 1fr); min-height: 100vh; }
.hx-shell--rail.is-collapsed { grid-template-columns: var(--hx-rail-w-collapsed) minmax(0, 1fr); }
.hx-rail { background: var(--hx-band); color: var(--hx-band-fg); display: flex; flex-direction: column; gap: var(--hx-space-6); padding: var(--hx-space-5) var(--hx-space-3); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--hx-z-rail); }
/* Rail children never shrink: on a short viewport the rail scrolls instead of
   squeezing the brand block or the groups into each other. */
.hx-rail > * { flex-shrink: 0; }
.hx-rail-brand { display: flex; align-items: center; gap: var(--hx-space-3); padding: 0 var(--hx-space-2); min-height: 36px; }
.hx-rail-brand .hx-eyebrow { color: var(--hx-band-fg-muted); }
.hx-rail-group { display: flex; flex-direction: column; gap: 2px; }
.hx-rail-group-title { padding: var(--hx-space-3) var(--hx-space-3) var(--hx-space-1); font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; color: var(--hx-band-fg-muted); }
/* Items have a minimum height and vertical padding, never a fixed height:
   a label that wraps to two lines keeps 8px above and below (chapter 01
   section 3). */
.hx-rail-item { display: flex; align-items: center; gap: var(--hx-space-3); min-height: 40px; padding: var(--hx-space-2) var(--hx-space-3); line-height: 1.3; color: var(--hx-band-fg-muted); border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); font-weight: 500; text-decoration: none; transition: background var(--hx-dur-fast) var(--hx-ease), color var(--hx-dur-fast) var(--hx-ease); }
.hx-rail-item:hover { background: var(--hx-band-hover); color: var(--hx-band-fg); text-decoration: none; }
.hx-rail-item.is-active { background: var(--hx-band-hover); color: var(--hx-band-fg); position: relative; overflow: hidden; }
/* Tone and accent seams (rail item, attention card, toast): a 3px bar that
   spans the whole height of the element like a left border; the element
   clips it, so it follows the rounded bottom-left corner. */
.hx-rail-item.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hx-accent); }
.hx-rail-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-rail-item .hx-count { margin-left: auto; }
.hx-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--hx-space-2); border-top: 1px solid var(--hx-band-line); padding-top: var(--hx-space-4); }
.is-collapsed .hx-rail-item span:not(.hx-mark-glyph), .is-collapsed .hx-rail-group-title, .is-collapsed .hx-rail-brand .hx-eyebrow { display: none; }
.is-collapsed .hx-rail-item { justify-content: center; padding: 0; }
@media (max-width: 1023px) {
  .hx-shell--rail { grid-template-columns: minmax(0, 1fr); }
  .hx-rail { position: fixed; inset: 0 auto 0 0; width: var(--hx-rail-w); transform: translateX(-100%); transition: transform var(--hx-dur-base) var(--hx-ease); box-shadow: var(--hx-shadow-lg); }
  .hx-rail.is-open { transform: none; }
}

/* ---- Shell: top bar (<= 6 destinations, one level) --------------------------- */
.hx-topbar { background: var(--hx-band); color: var(--hx-band-fg); height: var(--hx-topbar-h); display: flex; align-items: center; gap: var(--hx-space-4); padding: 0 var(--hx-content-pad) 0 min(var(--hx-content-pad), var(--hx-space-6)); /* the brand sits closer to the edge than the content (24px on desktop) */ position: sticky; top: 0; z-index: var(--hx-z-rail); }
.hx-topbar-brand { display: flex; align-items: baseline; gap: var(--hx-space-3); margin-right: var(--hx-space-4); font-size: var(--hx-text-md); font-weight: 700; letter-spacing: var(--hx-tracking-tight); white-space: nowrap; flex-shrink: 0; }
/* the brand's artwork sits on the name's baseline: the wordmark's height is the name's cap height, the mark is centred */
.hx-topbar-brand .hx-wordmark, .hx-topbar-brand svg[data-brand="wordmark"] { height: 0.72em; }
.hx-topbar-brand svg:not([data-brand="wordmark"]):not(.hx-wordmark) { align-self: center; }
.hx-topbar-nav { display: flex; align-items: center; gap: var(--hx-space-1); height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hx-topbar-nav::-webkit-scrollbar { display: none; }
.hx-root .hx-topbar-nav a, .hx-topbar-nav a { display: inline-flex; align-items: center; gap: var(--hx-space-2); height: 36px; padding: 0 var(--hx-space-3); color: var(--hx-band-fg-muted); font-weight: 500; border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); text-decoration: none; position: relative; white-space: nowrap; flex-shrink: 0; }
.hx-root .hx-topbar-nav a:hover, .hx-topbar-nav a:hover { color: var(--hx-band-fg); background: var(--hx-band-hover); text-decoration: none; }
.hx-topbar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-topbar-nav a.is-active { color: var(--hx-band-fg); }
.hx-topbar-nav a.is-active::after { content: ""; position: absolute; left: var(--hx-space-3); right: var(--hx-space-3); bottom: -10px; height: 2px; background: var(--hx-accent); border-radius: 1px; }
.hx-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--hx-space-2); }
.hx-topbar .hx-iconwell { background: transparent; border-color: var(--hx-band-line); color: var(--hx-band-fg); }
.hx-topbar .hx-iconwell:hover { background: var(--hx-band-hover); }
.hx-topbar .hx-switch-ctx { background: transparent; border-color: var(--hx-band-line); color: var(--hx-band-fg); }
/* Burger: an icon well shown below 640px; it toggles .is-open on the nav,
   which then drops as a full-width sheet under the bar (chapter 02 section 3). */
.hx-topbar .hx-topbar-burger { display: none; }
.hx-topbar-nav .hx-switch-ctx { display: none; }
@media (max-width: 1023px) {
  .hx-topbar .hx-switch-ctx span { display: none; }
  .hx-topbar .hx-switch-ctx { padding: 0 var(--hx-space-2); }
}
@media (max-width: 639px) {
  .hx-topbar { gap: var(--hx-space-3); }
  .hx-topbar-brand { margin-right: 0; min-width: 0; }
  .hx-topbar-brand span { flex-shrink: 0; } /* the product name is always complete: the brand graphic leaves (.hx-hide-phone), the name never gets an ellipsis (chapter 06) */
  .hx-topbar-actions { gap: var(--hx-space-1); }
  .hx-topbar .hx-topbar-burger { display: inline-flex; flex-shrink: 0; }
  .hx-topbar-actions .hx-switch-ctx { display: none; }
  .hx-topbar-nav { display: none; }
  .hx-topbar-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: var(--hx-space-1); position: absolute; left: 0; right: 0; top: 100%; height: auto; padding: var(--hx-space-3) var(--hx-content-pad) var(--hx-space-4); background: var(--hx-band); box-shadow: var(--hx-shadow-lg); overflow: visible; }
  .hx-root .hx-topbar-nav.is-open a, .hx-topbar-nav.is-open a { height: var(--hx-control-h); border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); }
  .hx-topbar-nav.is-open a.is-active { background: var(--hx-band-hover); }
  .hx-topbar-nav.is-open a.is-active::after { display: none; }
  .hx-topbar-nav.is-open .hx-switch-ctx { display: inline-flex; margin-bottom: var(--hx-space-2); justify-content: space-between; }
  .hx-topbar-nav.is-open .hx-switch-ctx span { display: inline; }
}

/* Header controls shared by both shells */
.hx-iconwell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--hx-control-h); height: var(--hx-control-h); border: var(--hx-border-w) solid var(--hx-line); background: var(--hx-surface); color: var(--hx-fg); border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); cursor: pointer; }
.hx-iconwell:hover { background: var(--hx-surface-sunk); }
.hx-iconwell svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--hx-radius-pill); background: var(--hx-accent); color: var(--hx-accent-fg); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hx-iconwell .hx-count { position: absolute; top: -6px; right: -6px; }
.hx-switch-ctx { display: inline-flex; align-items: center; gap: var(--hx-space-2); height: var(--hx-control-h); padding: 0 var(--hx-space-3) 0 var(--hx-space-3); border: var(--hx-border-w) solid var(--hx-line); background: var(--hx-surface); color: var(--hx-fg); border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); font-size: 13px; font-weight: 500; cursor: pointer; }
.hx-switch-ctx svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-switch-ctx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.hx-avatar { border: 0; cursor: default; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); background: var(--hx-accent); color: var(--hx-accent-fg); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.hx-avatar--lg { width: 48px; height: 48px; font-size: 17px; border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); }

/* ---- Page anatomy --------------------------------------------------------------- */
.hx-page { max-width: var(--hx-content-max); margin: 0 auto; padding: var(--hx-space-8) var(--hx-content-pad) var(--hx-space-16); display: flex; flex-direction: column; gap: var(--hx-space-6); }
.hx-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hx-space-6); flex-wrap: wrap; }
.hx-page-title { display: flex; flex-direction: column; gap: var(--hx-space-2); width: fit-content; max-width: 100%; }
.hx-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--hx-space-2); flex-wrap: wrap; }
/* A page-level status (live, polling, read-only) sits beside the title, not among the actions; the pulse stays as wide as the title */
.hx-page-main { display: flex; align-items: flex-start; gap: var(--hx-space-4); min-width: 0; flex-wrap: wrap; }
.hx-page-status { display: flex; align-items: center; gap: var(--hx-space-2); height: calc(var(--hx-text-2xl) * 1.15); }
/* Single-task page (sign-in, request access, change password): one card, 640 wide, centred, its head inside */
.hx-page--task { align-items: center; }
.hx-page--task > .hx-card { width: 100%; max-width: 640px; }
.hx-section { display: flex; flex-direction: column; gap: var(--hx-space-4); }
.hx-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hx-space-4); }

/* ---- Buttons ------------------------------------------------------------------------ */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hx-space-2); height: var(--hx-control-h); padding: 0 var(--hx-space-4); border: var(--hx-border-w-strong) solid transparent; border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); font: inherit; font-size: var(--hx-text-base); font-weight: 600; line-height: 1; color: var(--hx-fg); background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--hx-dur-fast) var(--hx-ease), border-color var(--hx-dur-fast) var(--hx-ease), color var(--hx-dur-fast) var(--hx-ease); }
.hx-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hx-btn:hover { text-decoration: none; }
.hx-btn--primary { background: var(--hx-accent); color: var(--hx-accent-fg); border-color: var(--hx-accent); }
.hx-btn--primary:hover { background: var(--hx-accent-hover); border-color: var(--hx-accent-hover); }
.hx-btn--secondary { border-color: var(--hx-fg); color: var(--hx-fg); background: var(--hx-surface); }
.hx-btn--secondary:hover { background: var(--hx-surface-sunk); }
.hx-btn--ghost { border-color: var(--hx-line); background: var(--hx-surface); color: var(--hx-fg); font-weight: 500; }
.hx-btn--ghost:hover { background: var(--hx-surface-sunk); }
.hx-btn--link { padding: 0 var(--hx-space-1); height: auto; color: var(--hx-accent-strong); font-weight: 600; border: 0; border-radius: var(--hx-radius-tag); }
.hx-btn--link:hover { text-decoration: underline; text-underline-offset: 2px; }
.hx-btn--link.hx-btn--quiet { color: var(--hx-fg); font-weight: 500; } /* a control dressed as a link that filters or sorts, not navigates (D-048 S1) */
.hx-btn--link.hx-btn--quiet:hover { color: var(--hx-accent-strong); }
.hx-btn--danger { background: var(--hx-critical-dot); color: var(--hx-band-fg); border-color: var(--hx-critical-dot); }
.hx-btn--danger:hover { filter: brightness(0.92); }
.hx-btn--danger.hx-btn--outline { background: transparent; color: var(--hx-critical); border-color: var(--hx-critical-dot); }
.hx-btn--good { background: var(--hx-good-dot); color: var(--hx-band-fg); border-color: var(--hx-good-dot); }
.hx-btn--lg { height: var(--hx-control-h-lg); padding: 0 var(--hx-space-5); font-size: 15px; border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); }
.hx-btn--sm { height: var(--hx-control-h-sm); padding: 0 var(--hx-space-3); font-size: 13px; border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); }
/* A link button has no control height, whatever its size class: it sits on
   the text baseline inside key-value rows, toasts and card heads. */
.hx-btn--link, .hx-btn--link.hx-btn--sm { height: auto; line-height: var(--hx-leading-normal); padding: 0 var(--hx-space-1); border-radius: var(--hx-radius-tag); }
.hx-btn--icon { width: var(--hx-control-h); padding: 0; }
.hx-btn--icon.hx-btn--sm { width: var(--hx-control-h-sm); }
.hx-btn--block { width: 100%; }
.hx-btn:disabled, .hx-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.hx-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
/* The loading button shows the heliqx mark turning to the heartbeat (D-025)
   in the label colour of its variant; the label is hidden, the width is kept. */
.hx-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; background: var(--hx-fg); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: hx-spin-beat 2s linear infinite, hx-drift 12s linear infinite; transform-origin: 50% 50%; }
.hx-btn--primary.is-loading::after { background: var(--hx-accent-fg); }
.hx-btn--danger.is-loading::after, .hx-btn--good.is-loading::after { background: var(--hx-band-fg); }
@media (prefers-reduced-motion: reduce) { .hx-btn.is-loading::after { animation: none; } }
/* Every moving mark turns with the heartbeat rhythm (2s cycle): a quick half
   turn with a swell (180ms, eased in), a smooth settle, a smaller second
   half turn with a swell (140ms), a settle, then rest until the next cycle.
   Underneath, hx-drift turns the mark slowly and without pause (one turn in
   12s) on the separate rotate property, so the two compose: the beats add
   exactly one turn and hand the mark back to where the drift has carried
   it, and it never stands still. */
@keyframes hx-drift { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes hx-spin-beat {
  0%   { transform: rotate(0deg) scale(1); animation-timing-function: ease-in; }
  9%   { transform: rotate(165deg) scale(1.12); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  30%  { transform: rotate(180deg) scale(1); animation-timing-function: ease-in; }
  37%  { transform: rotate(345deg) scale(1.08); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  58%  { transform: rotate(360deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- Fields and forms ------------------------------------------------------------------ */
.hx-field { display: flex; flex-direction: column; gap: var(--hx-space-1); min-width: 0; }
.hx-label { font-size: 13px; font-weight: 500; color: var(--hx-fg); display: flex; align-items: baseline; gap: var(--hx-space-2); }
.hx-label .hx-req { color: var(--hx-critical); font-weight: 700; }
.hx-label .hx-optional { color: var(--hx-fg-muted); font-weight: 400; font-size: 12px; }
.hx-help { font-size: 12px; color: var(--hx-fg-muted); line-height: 1.45; }
.hx-error { font-size: 12px; color: var(--hx-critical); font-weight: 500; display: flex; gap: var(--hx-space-1); align-items: flex-start; }
.hx-error svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-input, .hx-select, .hx-textarea { width: 100%; height: var(--hx-control-h); padding: 0 var(--hx-space-3); border: var(--hx-border-w) solid var(--hx-line-strong); border-radius: var(--hx-radius-input); background: var(--hx-surface); color: var(--hx-fg); font: inherit; font-size: var(--hx-text-base); transition: border-color var(--hx-dur-fast) var(--hx-ease); }
.hx-input::placeholder, .hx-textarea::placeholder { color: var(--hx-fg-subtle); }
.hx-input:hover, .hx-select:hover, .hx-textarea:hover { border-color: var(--hx-fg-muted); }
.hx-input:focus-visible, .hx-select:focus-visible, .hx-textarea:focus-visible { border-color: var(--hx-fg); box-shadow: var(--hx-focus-ring); }
.hx-textarea { height: auto; min-height: 96px; padding: var(--hx-space-2) var(--hx-space-3); resize: vertical; line-height: var(--hx-leading-normal); }
.hx-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23606B70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.is-invalid .hx-input, .is-invalid .hx-select, .is-invalid .hx-textarea, .hx-input.is-invalid { border-color: var(--hx-critical-dot); }
.hx-input:disabled, .hx-select:disabled, .hx-textarea:disabled { background: var(--hx-surface-sunk); color: var(--hx-fg-subtle); cursor: not-allowed; }
.hx-input--mono { font-family: var(--hx-font-mono); }
.hx-input-group { position: relative; display: flex; align-items: center; }
.hx-input-group > svg { position: absolute; left: 10px; width: 16px; height: 16px; stroke: var(--hx-fg-muted); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hx-input-group .hx-input { padding-left: 34px; }
.hx-input-group .hx-btn { position: absolute; right: 4px; height: calc(var(--hx-control-h) - 8px); }
.hx-input-group:has(> .hx-btn) .hx-input { padding-right: 44px; }
.hx-input-group--trailing .hx-input { padding-left: var(--hx-space-3); padding-right: 40px; }
.hx-input-group--trailing > svg { left: auto; right: 10px; }
.hx-check, .hx-radio { display: inline-flex; align-items: flex-start; gap: var(--hx-space-2); font-size: var(--hx-text-base); cursor: pointer; line-height: 1.35; }
.hx-check input, .hx-radio input { appearance: none; width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; border: var(--hx-border-w-strong) solid var(--hx-line-strong); background: var(--hx-surface); cursor: pointer; display: grid; place-content: center; }
.hx-check input { border-radius: var(--hx-radius-tag); }
.hx-radio input { border-radius: 50%; }
.hx-check input:checked, .hx-radio input:checked { border-color: var(--hx-fg); background: var(--hx-fg); }
.hx-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--hx-surface); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.hx-radio input:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-surface); }
.hx-switch { display: inline-flex; align-items: center; gap: var(--hx-space-2); cursor: pointer; font-size: var(--hx-text-base); }
.hx-switch input { appearance: none; width: 36px; height: 20px; border-radius: var(--hx-radius-pill); background: var(--hx-line-strong); position: relative; cursor: pointer; transition: background var(--hx-dur-fast) var(--hx-ease); margin: 0; flex-shrink: 0; }
.hx-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--hx-surface); box-shadow: var(--hx-shadow); transition: transform var(--hx-dur-fast) var(--hx-ease); }
.hx-switch input:checked { background: var(--hx-fg); }
.hx-switch input:checked::after { transform: translateX(16px); }
.hx-form { display: flex; flex-direction: column; gap: var(--hx-space-6); max-width: 640px; container-type: inline-size; }
/* Below 480px of form width the actions stack full width, primary on top,
   destructive last (chapter 04 section 1). */
@container (max-width: 479px) {
  .hx-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .hx-form-actions .hx-btn { width: 100%; }
  .hx-form-actions .hx-spacer { display: none; }
  .hx-form-actions .hx-btn--danger, .hx-form-actions .hx-btn--link.is-danger { margin-right: 0; }
}
.hx-form-section { display: flex; flex-direction: column; gap: var(--hx-space-4); padding-top: var(--hx-space-6); border-top: 1px solid var(--hx-line); }
.hx-form-section:first-child { border-top: 0; padding-top: 0; }
.hx-form-row { display: grid; gap: var(--hx-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
@container (max-width: 479px) { .hx-form-row > .hx-field { grid-column: 1 / -1; } }
@supports not (container-type: inline-size) { @media (max-width: 639px) { .hx-form-row { grid-template-columns: minmax(0, 1fr); } } }
.hx-form-actions { display: flex; align-items: center; gap: var(--hx-space-3); padding-top: var(--hx-space-4); border-top: 1px solid var(--hx-line); flex-wrap: wrap; }
.hx-form-actions .hx-btn--danger, .hx-form-actions .hx-btn--link.is-danger { margin-right: auto; }
.hx-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hx-space-2); padding: var(--hx-space-6); border: var(--hx-border-w-strong) dashed var(--hx-line-strong); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); background: var(--hx-surface-sunk); color: var(--hx-fg-muted); text-align: center; cursor: pointer; }
.hx-dropzone.is-active { border-color: var(--hx-accent); background: var(--hx-accent-soft); color: var(--hx-fg); }
.hx-reqlist { display: flex; flex-direction: column; gap: var(--hx-space-1); font-size: 13px; color: var(--hx-fg-muted); }
.hx-reqlist li { display: flex; align-items: center; gap: var(--hx-space-2); list-style: none; }
.hx-reqlist li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hx-line-strong); flex-shrink: 0; }
.hx-reqlist li.is-met { color: var(--hx-good); }
.hx-reqlist li.is-met::before { border-color: var(--hx-good-dot); background: var(--hx-good-dot); }
.hx-reqlist li.is-failed { color: var(--hx-critical); }
.hx-reqlist li.is-failed::before { border-color: var(--hx-critical-dot); }

/* ---- Cards, tiles, bands ------------------------------------------------------------- */
a.hx-card, .hx-card--link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--hx-dur-fast) var(--hx-ease), box-shadow var(--hx-dur-fast) var(--hx-ease); }
a.hx-card:hover, .hx-card--link:hover { border-color: var(--hx-line-strong); box-shadow: var(--hx-shadow-lg); text-decoration: none; }
a.hx-card:focus-visible, .hx-card--link:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-card { background: var(--hx-surface); border: var(--hx-border-w) solid var(--hx-line); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); padding: var(--hx-space-5); display: flex; flex-direction: column; gap: var(--hx-space-3); }
.hx-card--flush { padding: 0; overflow: hidden; }
.hx-card--flush > .hx-card-head { padding: var(--hx-space-4) var(--hx-space-5); border-bottom: 1px solid var(--hx-line); }
.hx-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); }
.hx-card-title { font-size: var(--hx-text-md); font-weight: 600; }
.hx-card.is-attention { position: relative; overflow: hidden; }
.hx-card.is-attention::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hx-accent); }
.hx-tile { background: var(--hx-surface); border: var(--hx-border-w) solid var(--hx-line); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); padding: var(--hx-space-4) var(--hx-space-5); display: flex; flex-direction: column; gap: var(--hx-space-1); min-height: 96px; }
.hx-tile-label { font-size: 13px; color: var(--hx-fg-muted); font-weight: 500; }
.hx-tile-value { font-size: var(--hx-text-2xl); font-weight: 700; letter-spacing: var(--hx-tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hx-tile-value small { font-size: var(--hx-text-base); font-weight: 500; color: var(--hx-fg-muted); margin-left: 2px; }
.hx-tile-trend { font-size: 12px; color: var(--hx-fg-muted); display: flex; align-items: center; gap: var(--hx-space-1); }
.hx-tile-trend.is-up { color: var(--hx-good); } .hx-tile-trend.is-down { color: var(--hx-critical); }
.hx-band { background: var(--hx-band); color: var(--hx-band-fg); border-radius: 0 var(--hx-corner-panel) 0 var(--hx-corner-panel); padding: var(--hx-space-5) var(--hx-space-6); display: flex; align-items: center; gap: var(--hx-space-6); flex-wrap: wrap; }
.hx-band .hx-eyebrow { color: var(--hx-band-fg-muted); }
.hx-band-figure { font-size: var(--hx-text-xl); font-weight: 700; color: var(--hx-accent); font-variant-numeric: tabular-nums; }
.hx-root .hx-band a, .hx-band a { color: var(--hx-band-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hx-accent); }
.hx-stage { background: var(--hx-band); color: var(--hx-band-fg); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); overflow: hidden; display: flex; flex-direction: column; }
.hx-stage .hx-iconwell { background: transparent; border-color: var(--hx-band-line); color: var(--hx-band-fg); }
.hx-stage .hx-iconwell:hover { background: var(--hx-band-hover); }
.hx-stage-media { width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; } /* the media area keeps a ratio, never a height token (D-048 S2) */
.hx-stage-bar { display: flex; align-items: center; gap: var(--hx-space-2); padding: var(--hx-space-2) var(--hx-space-3); border-top: 1px solid var(--hx-band-line); }
.hx-lane { background: var(--hx-surface-sunk); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); padding: var(--hx-space-3); display: flex; flex-direction: column; gap: var(--hx-space-3); min-height: 160px; }
.hx-lane-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--hx-space-1); font-weight: 600; font-size: 13px; }
.hx-lane-head .hx-count { background: var(--hx-line-strong); color: var(--hx-fg); }
/* Board: lanes side by side while each keeps at least --hx-lane-min; in a
   narrow container they wrap to two columns, then one. */
.hx-board { display: grid; gap: var(--hx-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hx-lane-min)), 1fr)); }
/* Elements in one row share the row height (grid rows stretch by default;
   never align-items: start on a row of cards, tiles or lanes). Inside a
   stretched card the content sits at the top and .hx-card-foot at the bottom. */
.hx-card-foot { margin-top: auto; display: flex; align-items: center; gap: var(--hx-space-3); flex-wrap: wrap; }

/* ---- Status: pills, dots, tags ----------------------------------------------------------- */
/* Pills, tags, chips and counts set line-height 1: the flex box then centres
   the text whatever line height the parent has (D-020). */
.hx-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); font-size: var(--hx-text-sm); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--hx-neutral-soft); color: var(--hx-neutral); }
.hx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hx-neutral-dot); flex-shrink: 0; }
.hx-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-pill .hx-spinner, .hx-pill .hx-loader { width: 12px; height: 12px; color: currentColor; }
.hx-pill.has-icon::before { display: none; }
.hx-pill--good { background: var(--hx-good-soft); color: var(--hx-good); } .hx-pill--good::before { background: var(--hx-good-dot); }
.hx-pill--warning { background: var(--hx-warning-soft); color: var(--hx-warning); } .hx-pill--warning::before { background: var(--hx-warning-dot); }
.hx-pill--critical { background: var(--hx-critical-soft); color: var(--hx-critical); } .hx-pill--critical::before { background: var(--hx-critical-dot); }
.hx-pill--info { background: var(--hx-info-soft); color: var(--hx-info); } .hx-pill--info::before { background: var(--hx-info-dot); }
.hx-pill--live::before { animation: hx-live 1.6s ease-in-out infinite; }
@keyframes hx-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--hx-neutral-dot); flex-shrink: 0; }
.hx-dot--good { background: var(--hx-good-dot); } .hx-dot--warning { background: var(--hx-warning-dot); } .hx-dot--critical { background: var(--hx-critical-dot); } .hx-dot--info { background: var(--hx-info-dot); }
.hx-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border: var(--hx-border-w) solid var(--hx-line); border-radius: var(--hx-radius-tag); font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); line-height: 1; color: var(--hx-fg-muted); white-space: nowrap; }
.hx-tag svg { width: 12px; height: 12px; stroke: var(--hx-fg); fill: none; stroke-width: 1.75; }
.hx-tag--off { opacity: 0.5; text-decoration: line-through; }
.hx-tag--good { color: var(--hx-good); background: var(--hx-good-soft); border-color: transparent; }
.hx-tag--warning { color: var(--hx-warning); background: var(--hx-warning-soft); border-color: transparent; }
.hx-tag--info { color: var(--hx-info); background: var(--hx-info-soft); border-color: transparent; }
.hx-tag--critical { color: var(--hx-critical); background: var(--hx-critical-soft); border-color: transparent; }
/* A tag may be a button (an audit action that filters): the browser chrome goes, the tag's own type stays */
button.hx-tag { appearance: none; -webkit-appearance: none; background: transparent; font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); line-height: 1; cursor: pointer; margin: 0; }
button.hx-tag:hover { background: var(--hx-surface-sunk); color: var(--hx-fg); }
button.hx-tag:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
/* Tags on the band (top bar, rail, band panels) take the band colours; toned tags keep their tone */
.hx-topbar .hx-tag:not([class*="hx-tag--"]), .hx-rail .hx-tag:not([class*="hx-tag--"]), .hx-band .hx-tag:not([class*="hx-tag--"]), .hx-stage .hx-tag:not([class*="hx-tag--"]) { border-color: var(--hx-band-line); color: var(--hx-band-fg); }
.hx-topbar .hx-tag:not([class*="hx-tag--"]) svg, .hx-rail .hx-tag:not([class*="hx-tag--"]) svg, .hx-band .hx-tag:not([class*="hx-tag--"]) svg, .hx-stage .hx-tag:not([class*="hx-tag--"]) svg { stroke: var(--hx-band-fg); }
/* The band rule stops at a menu that opens from the band but sits on the page surface (D-048 C1) */
.hx-topbar .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]), .hx-rail .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]), .hx-band .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]), .hx-stage .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]) { border-color: var(--hx-line); color: var(--hx-fg-muted); }
.hx-topbar .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]) svg, .hx-rail .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]) svg, .hx-band .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]) svg, .hx-stage .hx-menu:not(.hx-menu--band) .hx-tag:not([class*="hx-tag--"]) svg { stroke: var(--hx-fg-muted); }

/* ---- Filters: chips, toolbar ------------------------------------------------------------- */
.hx-toolbar { display: flex; align-items: center; gap: var(--hx-space-2); flex-wrap: wrap; }
.hx-toolbar .hx-input-group { width: 280px; max-width: 100%; }
.hx-chiprow { display: flex; align-items: center; gap: var(--hx-space-2); flex-wrap: wrap; }
.hx-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--hx-control-h-sm); padding: 0 var(--hx-space-3); border: var(--hx-border-w) solid var(--hx-line); background: var(--hx-surface); color: var(--hx-fg-muted); border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.hx-chip:hover { background: var(--hx-surface-sunk); color: var(--hx-fg); }
.hx-chip.is-on { background: var(--hx-fg); border-color: var(--hx-fg); color: var(--hx-surface); }
.hx-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-chip .hx-count { background: var(--hx-surface-sunk); color: var(--hx-fg); }
.hx-chip.is-on .hx-count { background: var(--hx-band-hover); color: var(--hx-band-fg); }

/* ---- Tables ------------------------------------------------------------------------------- */
/* Frame on the wrapper, scrolling inside .hx-table-scroll, meta row outside
   the scroller so count and pager stay visible. Sticky header (the PolyGate
   mechanic, D-019): the scroller is the sole vertical scroller, capped at the
   viewport minus the page chrome, and the header cells stick to it. Use
   .hx-table-wrap--sticky whenever the table can grow taller than the screen;
   short lists stay auto height. The cap is not a guess at the chrome: put the
   table in a .hx-page--fill page (one viewport tall, the table flexes into what
   is left, 200px floor, below that the page scrolls) or set --hx-table-max on
   the table yourself. The 60vh fallback is for prototypes only.
   Needs border-collapse: separate (sticky breaks with collapse in Chrome) and
   no overflow on the table itself; the divider is an inset shadow because a
   cell border does not paint reliably on a sticky header. */
.hx-table-wrap { background: var(--hx-surface); border: var(--hx-border-w) solid var(--hx-line); border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); overflow: hidden; }
.hx-table-scroll { overflow-x: auto; }
.hx-table-wrap--sticky .hx-table-scroll { overflow: auto; max-height: var(--hx-table-max, 60vh); min-height: 200px; }
.hx-page--fill { height: 100dvh; overflow: auto; min-height: 0; }
.hx-topbar ~ .hx-page--fill { height: calc(100dvh - var(--hx-topbar-h)); }
.hx-page--fill > * { flex-shrink: 0; } /* only the sticky table gives up height (D-039); its own rule below outranks this */
.hx-page--fill > .hx-table-wrap--sticky { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hx-page--fill > .hx-table-wrap--sticky .hx-table-scroll { flex: 1 1 auto; max-height: none; min-height: 200px; }
.hx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hx-text-base); overflow: visible; }
.hx-table th { position: sticky; top: 0; z-index: 1; text-align: left; background: var(--hx-surface-sunk); color: var(--hx-fg-muted); font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); font-weight: 500; letter-spacing: var(--hx-tracking-caps); text-transform: uppercase; padding: 10px var(--hx-space-4); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--hx-line); white-space: nowrap; }
@media print { .hx-table-wrap--sticky .hx-table-scroll { overflow: visible; max-height: none; } .hx-table th { position: static; } }
.hx-table th.is-sortable { cursor: pointer; user-select: none; }
.hx-table th.is-sorted { color: var(--hx-fg); }
.hx-table th.is-sorted::after { content: " \2193"; }
.hx-table th.is-sorted.is-asc::after { content: " \2191"; }
.hx-table td { padding: 12px var(--hx-space-4); border-bottom: 1px solid var(--hx-line); vertical-align: middle; }
.hx-table tr:last-child td { border-bottom: 0; }
.hx-table tbody tr:hover td { background: color-mix(in srgb, var(--hx-surface-sunk) 60%, var(--hx-surface)); }
.hx-table tr.is-clickable { cursor: pointer; }
.hx-table tr.is-flagged td { background: var(--hx-warning-soft); }
.hx-table tr.is-selected td { background: var(--hx-accent-soft); }
.hx-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.hx-table .is-mono { font-family: var(--hx-font-mono); font-size: 13px; }
.hx-table .is-actions { text-align: right; white-space: nowrap; }
.hx-table .is-actions > .hx-btn { visibility: hidden; }
.hx-table tr:hover .is-actions > .hx-btn, .hx-table tr:focus-within .is-actions > .hx-btn { visibility: visible; }
@media (hover: none) { .hx-table .is-actions > .hx-btn { visibility: visible; } }
.hx-table .hx-cell-2 { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.hx-table .hx-cell-2 small { color: var(--hx-fg-muted); font-size: 12px; }
.hx-table--dense th { padding: 8px var(--hx-space-3); } .hx-table--dense td { padding: 8px var(--hx-space-3); font-size: 13px; }
.hx-table-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-3); padding: var(--hx-space-3) var(--hx-space-4); border-top: 1px solid var(--hx-line); font-size: 13px; color: var(--hx-fg-muted); flex-wrap: wrap; }
.hx-pager { display: inline-flex; align-items: center; gap: var(--hx-space-1); }
.hx-pager .hx-btn { min-width: var(--hx-control-h-sm); }
.hx-pager .is-current { background: var(--hx-fg); color: var(--hx-surface); border-color: var(--hx-fg); }
.hx-expand-row td { background: var(--hx-surface-sunk); padding: var(--hx-space-4) var(--hx-space-6); }
.hx-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--hx-space-1) var(--hx-space-6); font-size: 13px; container-type: inline-size; }
.hx-kv dt { color: var(--hx-fg-muted); } .hx-kv dd { margin: 0; min-width: 0; }
.hx-kv dd.hx-row { flex-wrap: wrap; }
/* Below 360px of container the facts stack: label above value. */
@container (max-width: 359px) { .hx-kv > dt, .hx-kv > dd { grid-column: 1 / -1; } .hx-kv > dt { margin-top: var(--hx-space-2); } .hx-kv > dt:first-child { margin-top: 0; } }

/* ---- Empty, loading, error states ------------------------------------------------------------ */
.hx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hx-space-2); padding: var(--hx-space-12) var(--hx-space-6); text-align: center; color: var(--hx-fg-muted); }
/* The illustration is the direct child; a button's icon inside the empty
   state keeps its own 18px size and colour. */
.hx-empty > svg { width: 32px; height: 32px; stroke: var(--hx-fg-subtle); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hx-empty .hx-btn { margin-top: var(--hx-space-2); }
.hx-empty b { color: var(--hx-fg); font-weight: 600; }
/* Inside a lane or a panel that sits beside filled ones: caption size, normal weight, no icon */
.hx-empty--inline { padding: var(--hx-space-4) var(--hx-space-3); gap: var(--hx-space-1); font-size: 13px; }
.hx-empty--inline > svg { display: none; }
.hx-empty--inline b { font-weight: 500; color: var(--hx-fg-muted); }
.hx-skeleton { display: block; height: 14px; border-radius: var(--hx-radius-tag); background: linear-gradient(90deg, var(--hx-surface-sunk) 25%, var(--hx-line) 50%, var(--hx-surface-sunk) 75%); background-size: 200% 100%; animation: hx-shimmer 1.4s linear infinite; }
@keyframes hx-shimmer { to { background-position: -200% 0; } }
/* Spinner (D-025): the heliqx mark turning to the heartbeat rhythm
   (hx-spin-beat), in the current text colour.
   For an action in progress (buttons, a blocking operation, the full-page
   loader). Content areas waiting for data use .hx-loader (the same mark);
   skeletons come first when the shape of the content is known. */
.hx-spinner { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; color: var(--hx-fg-muted); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: hx-spin-beat 2s linear infinite, hx-drift 12s linear infinite; transform-origin: 50% 50%; }
.hx-spinner--sm { width: 16px; height: 16px; } .hx-spinner--md { width: 28px; height: 28px; } .hx-spinner--lg { width: 48px; height: 48px; }
.hx-spinner--accent { color: var(--hx-accent); } .hx-spinner--ink { color: var(--hx-fg); }
.hx-band .hx-spinner, .hx-loader-page--band .hx-spinner { color: var(--hx-band-fg); }
@media (prefers-reduced-motion: reduce) { .hx-spinner { animation: none; } }
/* Full-page loader: the spinning mark centred on the page ground (or on the
   band for app start and sign-in), one line of text under it; blocks the
   page until the first data is there. Never after the first load. */
.hx-loader-page { position: fixed; inset: 0; z-index: var(--hx-z-dialog); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hx-space-4); background: var(--hx-bg); color: var(--hx-fg-muted); font-size: var(--hx-text-base); }
.hx-loader-page--band { background: var(--hx-band); color: var(--hx-band-fg-muted); }
.hx-loader-page.is-inline { position: relative; inset: auto; z-index: auto; min-height: 240px; border-radius: 0 var(--hx-corner-card) 0 var(--hx-corner-card); }

/* ---- Feedback: banners, toasts, notices ------------------------------------------------------- */
.hx-banner { display: flex; align-items: flex-start; gap: var(--hx-space-3); padding: var(--hx-space-3) var(--hx-space-4); border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); border: var(--hx-border-w) solid var(--hx-line); background: var(--hx-surface); color: var(--hx-fg); font-size: var(--hx-text-base); flex-wrap: wrap; }
.hx-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-banner b { font-weight: 600; }
.hx-banner .hx-body { flex: 1 1 220px; min-width: 0; }
.hx-banner .hx-btn { margin-left: auto; align-self: center; }
.hx-banner--good { background: var(--hx-good-soft); border-color: transparent; color: var(--hx-good); }
.hx-banner--warning { background: var(--hx-warning-soft); border-color: transparent; color: var(--hx-warning); }
.hx-banner--critical { background: var(--hx-critical-soft); border-color: transparent; color: var(--hx-critical); }
.hx-banner--info { background: var(--hx-info-soft); border-color: transparent; color: var(--hx-info); }
.hx-banner--good .hx-body, .hx-banner--warning .hx-body, .hx-banner--critical .hx-body, .hx-banner--info .hx-body { color: var(--hx-fg); }
.hx-toast-stack { position: fixed; right: var(--hx-space-6); bottom: var(--hx-space-6); display: flex; flex-direction: column; gap: var(--hx-space-2); z-index: var(--hx-z-toast); width: 360px; max-width: calc(100vw - 2 * var(--hx-space-6)); }
@media (max-width: 639px) { .hx-toast-stack { left: var(--hx-content-pad); right: var(--hx-content-pad); bottom: var(--hx-content-pad); width: auto; max-width: none; } }
.hx-toast { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: var(--hx-space-3); padding: var(--hx-space-3) var(--hx-space-4); background: var(--hx-band); color: var(--hx-band-fg); border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); box-shadow: var(--hx-shadow-lg); font-size: var(--hx-text-base); line-height: var(--hx-leading-normal); }
.hx-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hx-neutral-dot); }
.hx-toast--good::before { background: var(--hx-good-dot); }
.hx-toast--warning::before { background: var(--hx-warning-dot); }
.hx-toast--critical::before { background: var(--hx-critical-dot); }
.hx-toast > span { flex: 1 1 auto; min-width: 0; }
.hx-toast .hx-btn--link { color: var(--hx-accent); margin-left: auto; flex-shrink: 0; }
.hx-demo-banner { background: var(--hx-warning-soft); color: var(--hx-warning); text-align: center; font-size: 12px; font-weight: 600; padding: 6px var(--hx-space-4); border-bottom: 1px solid color-mix(in srgb, var(--hx-warning-dot) 30%, transparent); }
.hx-notice { padding: var(--hx-space-3) var(--hx-space-4); background: var(--hx-surface-sunk); border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); font-size: 13px; color: var(--hx-fg-muted); }

/* ---- Dialogs and drawers ------------------------------------------------------------------------- */
.hx-overlay { position: fixed; inset: 0; background: var(--hx-overlay); display: flex; align-items: center; justify-content: center; padding: var(--hx-space-6); z-index: var(--hx-z-dialog); animation: hx-fade var(--hx-dur-base) var(--hx-ease-out); }
@keyframes hx-fade { from { opacity: 0; } }
.hx-dialog { width: 100%; max-width: 480px; background: var(--hx-surface); color: var(--hx-fg); border-radius: 0 var(--hx-corner-panel) 0 var(--hx-corner-panel); box-shadow: var(--hx-shadow-lg); display: flex; flex-direction: column; animation: hx-rise var(--hx-dur-base) var(--hx-ease-out); container-type: inline-size; }
/* Below 480px of dialog width the actions stack full width, primary on top. */
@container (max-width: 479px) {
  .hx-dialog-foot { flex-direction: column-reverse; align-items: stretch; }
  .hx-dialog-foot .hx-btn { width: 100%; }
  .hx-dialog-foot .hx-btn--link { margin-right: 0; }
}
.hx-dialog--wide { max-width: 720px; }
@keyframes hx-rise { from { transform: translateY(8px); opacity: 0; } }
.hx-dialog-head { display: flex; align-items: flex-start; gap: var(--hx-space-3); padding: var(--hx-space-6) var(--hx-space-6) 0; }
.hx-dialog-title { font-size: var(--hx-text-lg); font-weight: 700; letter-spacing: var(--hx-tracking-tight); }
.hx-dialog-head .hx-btn--icon { margin-left: auto; margin-top: -6px; margin-right: -8px; }
.hx-dialog-body { padding: var(--hx-space-4) var(--hx-space-6); font-size: var(--hx-text-md); line-height: var(--hx-leading-relaxed); color: var(--hx-fg); display: flex; flex-direction: column; gap: var(--hx-space-4); }
.hx-dialog-body .hx-form { max-width: none; gap: var(--hx-space-4); }
.hx-dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--hx-space-3); padding: var(--hx-space-4) var(--hx-space-6) var(--hx-space-6); flex-wrap: wrap; }
.hx-dialog-foot .hx-btn--link { margin-right: auto; }
@media (max-width: 639px) {
  .hx-overlay { padding: var(--hx-space-4); }
  .hx-dialog-head { padding: var(--hx-space-5) var(--hx-space-5) 0; }
  .hx-dialog-body { padding: var(--hx-space-4) var(--hx-space-5); }
  .hx-dialog-foot { padding: var(--hx-space-4) var(--hx-space-5) var(--hx-space-5); }
}
.hx-dialog-alert { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 0 var(--hx-corner-sm) 0 var(--hx-corner-sm); background: var(--hx-critical-soft); color: var(--hx-critical); }
.hx-dialog-alert svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-dialog--confirm .hx-dialog-alert.is-warning { background: var(--hx-warning-soft); color: var(--hx-warning); }
.hx-drawer-overlay { position: fixed; inset: 0; background: var(--hx-overlay); z-index: var(--hx-z-drawer); }
.hx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--hx-surface); color: var(--hx-fg); box-shadow: var(--hx-shadow-lg); display: flex; flex-direction: column; z-index: calc(var(--hx-z-drawer) + 1); animation: hx-slide var(--hx-dur-base) var(--hx-ease-out); }
@keyframes hx-slide { from { transform: translateX(24px); opacity: 0; } }
/* The hidden attribute wins over the display of overlays, dialogs and
   drawers, so a closed one can be kept in the DOM with hidden. */
.hx-overlay[hidden], .hx-drawer-overlay[hidden], .hx-drawer[hidden], .hx-menu[hidden] { display: none; }
.hx-drawer-head { display: flex; align-items: center; gap: var(--hx-space-3); padding: var(--hx-space-4) var(--hx-space-5); border-bottom: 1px solid var(--hx-line); }
.hx-drawer-head h3 { font-size: var(--hx-text-md); }
.hx-drawer-head .hx-btn { margin-left: auto; }
.hx-drawer-body { overflow-y: auto; flex: 1; }
.hx-menu { min-width: 220px; background: var(--hx-surface); border: var(--hx-border-w) solid var(--hx-line); border-radius: 0 var(--hx-corner-control) 0 var(--hx-corner-control); box-shadow: var(--hx-shadow-lg); padding: var(--hx-space-2); display: flex; flex-direction: column; gap: 2px; }
.hx-menu-item { display: flex; align-items: center; gap: var(--hx-space-3); min-height: 36px; padding: var(--hx-space-2) var(--hx-space-3); line-height: 1.3; border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); color: var(--hx-fg); font-size: var(--hx-text-base); cursor: pointer; text-decoration: none; }
.hx-menu-item:hover { background: var(--hx-surface-sunk); text-decoration: none; }
/* Searchable select (D-043): an input group that filters a .hx-menu anchored below it; .is-up opens it above */
.hx-search-select { position: relative; }
.hx-search-select > .hx-menu { position: absolute; top: calc(100% + var(--hx-space-1)); left: 0; right: 0; min-width: 0; z-index: var(--hx-z-drawer); }
.hx-search-select.is-up > .hx-menu { top: auto; bottom: calc(100% + var(--hx-space-1)); }
button.hx-menu-item { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent; font: inherit; font-size: var(--hx-text-base); text-align: left; margin: 0; }
button.hx-menu-item:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
/* A menu that opens on the band (rail foot, top bar): raised band wash instead of the page surface */
.hx-menu--band { background: var(--hx-band-raised); border-color: var(--hx-band-line); color: var(--hx-band-fg); }
.hx-menu--band .hx-menu-item { color: var(--hx-band-fg); }
.hx-menu--band .hx-menu-item:hover { background: var(--hx-band-hover); }
.hx-menu--band .hx-menu-item.is-danger { color: var(--hx-critical-dot); }
.hx-menu--band .hx-menu-sep { background: var(--hx-band-line); }
.hx-menu--band .hx-muted { color: var(--hx-band-fg-muted); }
.hx-menu-item.is-danger { color: var(--hx-critical); }
.hx-menu-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hx-menu-sep { height: 1px; background: var(--hx-line); margin: var(--hx-space-1) 0; }

/* ---- Notifications --------------------------------------------------------------------------------- */
.hx-notif { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--hx-space-3); padding: var(--hx-space-3) var(--hx-space-5); border-bottom: 1px solid var(--hx-line); align-items: start; }
.hx-notif.is-unread { background: color-mix(in srgb, var(--hx-surface-sunk) 70%, var(--hx-surface)); }
.hx-notif .hx-dot { margin-top: 6px; }
.hx-notif-title { font-weight: 600; font-size: var(--hx-text-base); }
.hx-notif-body { font-size: 13px; color: var(--hx-fg-muted); margin-top: 2px; }
.hx-notif-time { font-size: 12px; color: var(--hx-fg-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Tabs ------------------------------------------------------------------------------------------ */
.hx-tabs { display: flex; gap: var(--hx-space-1); border-bottom: 1px solid var(--hx-line); overflow-x: auto; scrollbar-width: none; }
.hx-tabs::-webkit-scrollbar { display: none; }
/* Icon-only tabs below about 160px of strip width per tab (D-040): the strip carries data-count and
   becomes a container; the label is a .hx-tab-label span, kept as title and aria-label on the tab.
   A strip without data-count (glyph-only tabs) keeps its labels and scrolls. */
.hx-tabs[data-count] { container-type: inline-size; }
.hx-tab-label { white-space: nowrap; }
@container (width < 320px) { .hx-tabs[data-count="2"] .hx-tab-label { display: none; } }
@container (width < 480px) { .hx-tabs[data-count="3"] .hx-tab-label { display: none; } }
@container (width < 640px) { .hx-tabs[data-count="4"] .hx-tab-label { display: none; } }
@container (width < 800px) { .hx-tabs[data-count="5"] .hx-tab-label { display: none; } }
@container (width < 960px) { .hx-tabs[data-count="6"] .hx-tab-label { display: none; } }
.hx-tab { position: relative; height: 40px; padding: 0 var(--hx-space-3); display: inline-flex; align-items: center; gap: var(--hx-space-2); font: inherit; font-size: var(--hx-text-base); font-weight: 500; color: var(--hx-fg-muted); background: none; border: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.hx-tab:hover { color: var(--hx-fg); }
.hx-tab.is-active { color: var(--hx-fg); font-weight: 600; }
.hx-tab.is-active::after { content: ""; position: absolute; left: var(--hx-space-3); right: var(--hx-space-3); bottom: -1px; height: 2px; background: var(--hx-accent); }
.hx-tab .hx-count { background: var(--hx-surface-sunk); color: var(--hx-fg); }
.hx-tab svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Tinted button tabs (the FORCEGATE Insights group, D-022): each tab is a
   button with its icon and label on a soft tint of its colour, the icon and
   the underline in that colour. The colour is the accent by default; when the
   tabs stand for different data groups they take the categorical viz colours
   in fixed order (.hx-tab--viz-1 to 4; a group of five or six takes viz-5 and viz-6, named-view colours
   that are never chart series, D-041; viz-other is for a tab that is literally the rest). */
.hx-tabs--tinted { gap: var(--hx-space-1); --hx-tab-color: var(--hx-accent); }
.hx-tabs--tinted .hx-tab { padding: 0 var(--hx-space-4); border-radius: 0 var(--hx-corner-xs) 0 0; background: color-mix(in srgb, var(--hx-tab-color) 12%, transparent); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hx-tabs--tinted .hx-tab svg { color: var(--hx-tab-color); opacity: 0.8; }
.hx-tabs--tinted .hx-tab:hover { color: var(--hx-fg); background: color-mix(in srgb, var(--hx-tab-color) 18%, transparent); border-bottom-color: color-mix(in srgb, var(--hx-tab-color) 45%, transparent); }
.hx-tabs--tinted .hx-tab.is-active { color: var(--hx-fg); background: color-mix(in srgb, var(--hx-tab-color) 22%, transparent); border-bottom-color: var(--hx-tab-color); }
.hx-tabs--tinted .hx-tab.is-active::after { display: none; }
.hx-tabs--tinted .hx-tab.is-active svg { opacity: 1; }
.hx-tab--viz-1 { --hx-tab-color: var(--hx-viz-1); } .hx-tab--viz-2 { --hx-tab-color: var(--hx-viz-2); }
.hx-tab--viz-3 { --hx-tab-color: var(--hx-viz-3); } .hx-tab--viz-4 { --hx-tab-color: var(--hx-viz-4); } .hx-tab--viz-other { --hx-tab-color: var(--hx-viz-other); }
.hx-tab--viz-5 { --hx-tab-color: var(--hx-viz-5); } .hx-tab--viz-6 { --hx-tab-color: var(--hx-viz-6); }

/* ---- Timeline (audit trail, lifecycle) ---------------------------------------------------------------- */
/* The rail is drawn per item, from its dot to the next item's dot, so it
   ends at the last dot whatever the last item's height. */
.hx-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 28px; }
.hx-tl-item { position: relative; padding: 0 0 var(--hx-space-5); display: flex; flex-direction: column; gap: 2px; }
.hx-tl-item::after { content: ""; position: absolute; left: -19px; top: 16px; bottom: -4px; width: 2px; background: var(--hx-line); }
.hx-tl-item:last-child::after { display: none; }
.hx-tl-item::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--hx-neutral-dot); box-shadow: 0 0 0 3px var(--hx-surface); z-index: 1; }
.hx-tl-item.is-good::before { background: var(--hx-good-dot); } .hx-tl-item.is-warning::before { background: var(--hx-warning-dot); }
.hx-tl-item.is-critical::before { background: var(--hx-critical-dot); } .hx-tl-item.is-info::before { background: var(--hx-info-dot); } .hx-tl-item.is-accent::before { background: var(--hx-accent); }
.hx-tl-label { font-weight: 600; font-size: var(--hx-text-base); }
.hx-tl-meta { font-size: 12px; color: var(--hx-fg-muted); display: flex; gap: var(--hx-space-2); flex-wrap: wrap; }
.hx-tl-meta .hx-num { font-family: var(--hx-font-mono); }

/* ---- Meters and simple bars ------------------------------------------------------------------------------ */
.hx-meter { display: flex; flex-direction: column; gap: var(--hx-space-1); }
.hx-meter-track { height: 8px; background: var(--hx-surface-sunk); border-radius: 2px; overflow: hidden; display: flex; }
.hx-meter-fill { height: 100%; background: var(--hx-fg); border-radius: 2px 0 0 2px; }
.hx-meter-fill.is-good { background: var(--hx-good-dot); } .hx-meter-fill.is-warning { background: var(--hx-warning-dot); } .hx-meter-fill.is-critical { background: var(--hx-critical-dot); }
.hx-meter-fill.is-neutral { background: var(--hx-neutral-dot); } /* a span with nothing to judge yet (D-045) */
.hx-meter-fill.is-reserved { background: repeating-linear-gradient(135deg, var(--hx-warning-dot) 0 3px, transparent 3px 6px); opacity: 0.7; }
.hx-meter-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--hx-fg-muted); }
/* Two-part mono value that breaks only at its separator (D-048 S7); an inline cell with a live count pill after a name (S6) */
.hx-pair { display: inline-flex; flex-wrap: wrap; column-gap: var(--hx-space-1); }
.hx-pair > span { white-space: nowrap; }
.hx-cell-inline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-2); }
.hx-barlist { display: flex; flex-direction: column; gap: var(--hx-space-2); }
.hx-barlist-row { display: grid; grid-template-columns: minmax(80px, 160px) minmax(0, 1fr) 56px; align-items: center; gap: var(--hx-space-3); font-size: 13px; }
.hx-barlist-row .hx-num { text-align: right; font-weight: 600; }
/* The bar list shares the meter's drawing (D-042): 8px track, ink fill; only the highlight row takes the accent */
.hx-barlist-track { height: 8px; background: var(--hx-surface-sunk); border-radius: 2px; overflow: hidden; }
.hx-barlist-fill { height: 100%; background: var(--hx-fg); border-radius: 2px 0 0 2px; }
.hx-barlist-row.is-highlight .hx-barlist-fill { background: var(--hx-viz-highlight); }

/* ---- Sign-in page --------------------------------------------------------------------------------------------- */
.hx-signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 57%) minmax(0, 1fr); background: var(--hx-bg); container-type: inline-size; }
.hx-signin-brand { background: var(--hx-band); color: var(--hx-band-fg); padding: var(--hx-space-12) 72px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--hx-space-8); }
.hx-signin-brand h1 { font-size: 44px; color: var(--hx-band-fg); max-width: 14ch; }
.hx-signin-brand p { font-size: 17px; color: var(--hx-band-fg-muted); max-width: 480px; line-height: var(--hx-leading-normal); }
.hx-signin-status { display: flex; flex-direction: column; max-width: 480px; }
.hx-signin-status-row { display: flex; align-items: center; gap: var(--hx-space-3); padding: 10px 0; border-top: 1px solid var(--hx-band-line); font-size: var(--hx-text-base); }
.hx-signin-status-row .hx-muted { margin-left: auto; color: var(--hx-band-fg-muted); font-size: 12px; }
.hx-signin-form { display: flex; align-items: center; justify-content: center; padding: var(--hx-space-12) var(--hx-space-6); }
.hx-signin-card { width: 420px; max-width: 100%; background: var(--hx-surface); border: var(--hx-border-w) solid var(--hx-line); border-radius: 0 24px 0 24px; padding: var(--hx-space-10) var(--hx-space-10) var(--hx-space-8); display: flex; flex-direction: column; gap: var(--hx-space-5); }
.hx-sep { display: flex; align-items: center; gap: var(--hx-space-3); color: var(--hx-fg-muted); font-size: 12px; }
.hx-sep::before, .hx-sep::after { content: ""; flex: 1; height: 1px; background: var(--hx-line); }
/* Below 900px of container width the brand panel becomes a short header and
   the card follows underneath (chapter 04 section 8). */
@container (max-width: 899px) {
  .hx-signin-brand, .hx-signin-form { grid-column: 1 / -1; }
  .hx-signin-brand { padding: var(--hx-space-8) var(--hx-content-pad); gap: var(--hx-space-6); }
  .hx-signin-brand h1 { font-size: var(--hx-text-3xl); }
  .hx-signin-form { align-items: flex-start; padding: var(--hx-space-8) var(--hx-content-pad); }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1023px) { .hx-signin { grid-template-columns: minmax(0, 1fr); } .hx-signin-brand { padding: var(--hx-space-8) var(--hx-content-pad); } .hx-signin-brand h1 { font-size: var(--hx-text-3xl); } }
}

/* ---- Lists ------------------------------------------------------------------------------------------------- */
/* One marker, the heliqx mark (the two joined knots from the top right of
   the wordmark's x), in two roles (chapter 03 section 12, D-021, D-028): Ink
   for content lists in running text, help, dialogs and documents
   (--mark); accent for the few statements that carry the message (what
   happens next, the promise on the sign-in panel), at most once per screen
   (--pulse, the name kept from the beat era), muted for steps in quiet
   places. Masks that take the variant's colour; the path is brand/heliqx-mark.svg. */
.hx-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--hx-space-2); }
.hx-list--tight { gap: var(--hx-space-1); }
.hx-list li { position: relative; padding-left: 28px; line-height: var(--hx-leading-normal); }
.hx-list li::before { content: ""; position: absolute; left: 0; }
.hx-list--mark li::before { top: calc(0.725em - 6.5px); width: 13px; height: 13px; color: var(--hx-fg); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='110.51 0 13.49 13.28'%3E%3Cpath d='M120.69 0.01C119.81 0.01 118.98 0.35 118.35 0.96C117.82 1.49 117.44 2.61 117.23 4.3C117.11 5.24 117.08 6.11 117.08 6.47C116.71 6.48 115.83 6.51 114.86 6.63C113.15 6.83 112.01 7.21 111.48 7.73C110.85 8.34 110.51 9.16 110.51 10.03C110.51 10.9 110.85 11.72 111.48 12.33C112.1 12.94 112.93 13.28 113.81 13.28C114.7 13.28 115.53 12.95 116.15 12.33C116.69 11.8 117.07 10.68 117.28 9C117.39 8.05 117.42 7.18 117.43 6.82C117.8 6.81 118.68 6.79 119.64 6.67C121.35 6.46 122.49 6.09 123.03 5.56C123.65 4.95 124 4.13 124 3.26C124 2.39 123.66 1.58 123.03 0.96C122.41 0.35 121.58 0.01 120.69 0.01Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='110.51 0 13.49 13.28'%3E%3Cpath d='M120.69 0.01C119.81 0.01 118.98 0.35 118.35 0.96C117.82 1.49 117.44 2.61 117.23 4.3C117.11 5.24 117.08 6.11 117.08 6.47C116.71 6.48 115.83 6.51 114.86 6.63C113.15 6.83 112.01 7.21 111.48 7.73C110.85 8.34 110.51 9.16 110.51 10.03C110.51 10.9 110.85 11.72 111.48 12.33C112.1 12.94 112.93 13.28 113.81 13.28C114.7 13.28 115.53 12.95 116.15 12.33C116.69 11.8 117.07 10.68 117.28 9C117.39 8.05 117.42 7.18 117.43 6.82C117.8 6.81 118.68 6.79 119.64 6.67C121.35 6.46 122.49 6.09 123.03 5.56C123.65 4.95 124 4.13 124 3.26C124 2.39 123.66 1.58 123.03 0.96C122.41 0.35 121.58 0.01 120.69 0.01Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hx-list--pulse li::before { top: calc(0.725em - 8px); width: 16px; height: 16px; color: var(--hx-accent); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='597.38 234.81 49.08 49.08'%3E%3Cpath d='M634.43,234.81c-3.21,0-6.23,1.25-8.51,3.52-1.95,1.95-3.32,6.1-4.09,12.33-.43,3.5-.54,6.71-.56,8.04-1.33.03-4.54.14-8.04.56-6.23.76-10.38,2.14-12.33,4.09-2.27,2.27-3.52,5.29-3.52,8.51,0,3.21,1.25,6.23,3.52,8.51,2.27,2.27,5.29,3.52,8.51,3.52,3.21,0,6.23-1.25,8.51-3.52,1.95-1.95,3.32-6.1,4.09-12.33.43-3.5.54-6.71.56-8.04,1.33-.03,4.54-.14,8.04-.56,6.23-.76,10.38-2.14,12.33-4.09,2.27-2.27,3.52-5.29,3.52-8.51s-1.25-6.23-3.52-8.51c-2.27-2.27-5.29-3.52-8.51-3.52' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hx-list--muted li::before { color: var(--hx-fg-subtle); }
.hx-list--accent li::before { color: var(--hx-accent); }
.hx-band .hx-list--mark li::before, .hx-signin-brand .hx-list--mark li::before { color: var(--hx-band-fg); }
.hx-band .hx-list--muted li::before, .hx-signin-brand .hx-list--muted li::before { color: var(--hx-band-fg-muted); }
.hx-list .hx-list { margin-top: var(--hx-space-2); }

/* ---- Kbd, tooltip ------------------------------------------------------------------------------------------------- */
.hx-kbd { font-family: var(--hx-font-mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--hx-line-strong); border-bottom-width: 2px; border-radius: var(--hx-radius-tag); background: var(--hx-surface); color: var(--hx-fg-muted); }
.hx-tooltip { position: absolute; z-index: var(--hx-z-tooltip); background: var(--hx-band); color: var(--hx-band-fg); font-size: 12px; padding: 6px 10px; border-radius: 0 var(--hx-corner-xs) 0 var(--hx-corner-xs); box-shadow: var(--hx-shadow); max-width: 260px; }