/* Shared primitives. Component files own spacing and type variants. */
button, input, select, textarea { font: inherit; color: inherit; }
button { border-radius: 0; }
[hidden] { display: none !important; }
/* The white inner ring and ink outer ring remain visible on paper, heat fills
   and inverse buttons. Important keeps component focus rules from weakening it. */
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo) !important; }
::placeholder { color: var(--muted); opacity: 1; }
@media (max-width: 820px) {
  :is(button, summary, .hg-nav a, .hg-brand) { min-height: 40px; }
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { min-height: 40px; }
  :is(.check, .replay-control) { min-height: 40px; }
}
.eyebrow { color: var(--muted); }
:is(.badge, .badge-demo, .hg-demo) { display: inline-block; border: 1px dashed var(--amber); color: var(--ink); white-space: nowrap; }
.workflow-link { display: inline-block; color: var(--cool); font-size: 14px; margin-top: 12px; text-decoration: underline; text-underline-offset: 4px; }
.band-chip { display: inline-block; min-width: 68px; border: 1px solid var(--hair); padding: 2px 4px; font-size: var(--text-xs); text-align: center; }
.band-chip .nowrap { white-space: nowrap; }
.band-chip.band-low { background: var(--cool-soft); color: var(--ink); }
.band-chip.band-moderate, .band-chip.band-elevated { background: var(--amber); color: var(--ink); }
.band-chip.band-high { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Fixed schedule pins and ellipsised labels need room below the baseline. */
body .pin :is(span, b) { line-height: 1.4; flex-shrink: 0; }

/* Native fields keep the same square geometry as the surrounding controls. */
input, select, textarea { border-radius:var(--radius); }