/* Hardpoint - component styles. Colours, spacing, chamfers and shadows come from tokens.css. */

/* ---------- Edition roles: each theme picks its fonts ---------- */
:root, [data-theme="mk1"] {
  --hp-f-display: var(--font-chakra); --hp-f-body: var(--font-chakra);
  --hp-f-label: var(--font-chakra); --hp-f-mono: var(--font-share-mono);
  --hp-w-display: 700; --hp-w-body: 500; --hp-w-label: 600; --hp-label-size: 13px;
  --hp-glow: 0 0 4px currentColor;
  --hp-scan: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, rgba(0,0,0,0) 1px 3px);
  --hp-texture: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.10));
}
[data-theme="mk2"], [data-theme="mk5"] {
  --hp-f-display: var(--font-ubuntu); --hp-f-body: var(--font-ubuntu);
  --hp-f-label: var(--font-ubuntu-condensed); --hp-f-mono: var(--font-ubuntu-mono);
  --hp-w-display: 700; --hp-w-body: 400; --hp-w-label: 400; --hp-label-size: 14px;
}
[data-theme="mk3"] {
  --hp-f-display: var(--font-stencil); --hp-f-body: var(--font-saira);
  --hp-f-label: var(--font-saira); --hp-f-mono: var(--font-plex-mono);
  --hp-w-display: 400; --hp-w-body: 500; --hp-w-label: 700; --hp-label-size: 13px;
  --hp-texture: repeating-linear-gradient(90deg, rgba(255,220,180,.025) 0 1px, rgba(0,0,0,0) 1px 4px), radial-gradient(120% 80% at 20% 0%, rgba(255,170,90,.07), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
}
[data-theme="mk4"] {
  --hp-f-display: var(--font-plex-cond); --hp-f-body: var(--font-plex-cond);
  --hp-f-label: var(--font-plex-cond); --hp-f-mono: var(--font-plex-mono);
  --hp-w-display: 600; --hp-w-body: 400; --hp-w-label: 600; --hp-label-size: 13px;
  --hp-glow: none;
  --hp-scan: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, rgba(0,0,0,0) 1px 3px);
  --hp-texture: repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.04));
}
[data-theme="mk5"] { --hp-glow: none; --hp-scan: none; --hp-texture: none; }

body { margin: 0; background: var(--hull-900); color: var(--ink); font-family: var(--hp-f-body); font-weight: var(--hp-w-body); font-size: 15px; line-height: 22px; }

/* Role classes for consumers */
.hp-display { font-family: var(--hp-f-display); font-weight: var(--hp-w-display); font-size: 40px; line-height: 44px; letter-spacing: .04em; text-transform: uppercase; }
.hp-title   { font-family: var(--hp-f-display); font-weight: var(--hp-w-display); font-size: 22px; line-height: 28px; letter-spacing: .03em; }
.hp-label   { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.hp-body    { font-family: var(--hp-f-body); font-weight: var(--hp-w-body); font-size: 15px; line-height: 22px; }
.hp-readout { font-family: var(--hp-f-mono); font-size: 16px; line-height: 20px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hp-caption { font-family: var(--hp-f-body); font-weight: var(--hp-w-body); font-size: 12px; line-height: 16px; }

/* Shared metal */
.hp-metal { background-color: var(--hull-700); background-image: var(--hp-texture); }
.hp-chamfer-sm { clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); }
.hp-drop { filter: drop-shadow(0 2px 0 var(--seam)); }
.hp-well { position: relative; background: var(--hull-800); box-shadow: var(--shadow-well); }
.hp-well::after { content: ""; position: absolute; inset: 0; background: var(--hp-scan); pointer-events: none; }
[data-theme="mk5"] .hp-well { outline: 1px solid var(--rim); outline-offset: -1px; }
.hp-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.hp-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes hp-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes hp-static { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 -120px, 37px 0; } }

/* ---------- Panel ---------- */
.hp-panel-wrap { filter: drop-shadow(0 2px 0 var(--seam)); }
.hp-panel {
  position: relative; color: var(--ink);
  background-color: var(--hull-700); background-image: var(--hp-texture);
  box-shadow: var(--shadow-plate);
  clip-path: polygon(var(--chamfer-md) 0, calc(100% - var(--chamfer-md)) 0, 100% var(--chamfer-md), 100% calc(100% - var(--chamfer-md)), calc(100% - var(--chamfer-md)) 100%, var(--chamfer-md) 100%, 0 calc(100% - var(--chamfer-md)), 0 var(--chamfer-md));
}
[data-theme="mk5"] .hp-panel { outline: 2px solid var(--rim); outline-offset: -2px; }
.hp-panel::before, .hp-panel::after { content: ""; position: absolute; width: var(--chamfer-md); height: var(--chamfer-md); pointer-events: none; }
.hp-panel::before { top: 0; left: 0; background: linear-gradient(135deg, rgba(0,0,0,0) calc(50% - 1px), var(--edge-hi) calc(50% - 1px), var(--edge-hi) calc(50% + 0px), rgba(0,0,0,0) calc(50% + 0px)); }
.hp-panel::after { bottom: 0; right: 0; background: linear-gradient(135deg, rgba(0,0,0,0) 50%, var(--edge-lo) 50%, var(--edge-lo) calc(50% + 1px), rgba(0,0,0,0) calc(50% + 1px)); }
.hp-panel__hazard { height: 8px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--hazard-ink) 10px 20px); box-shadow: inset 0 -1px 0 var(--seam); }
.hp-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6) var(--space-2); border-bottom: var(--rule-3) solid var(--seam); box-shadow: 0 1px 0 var(--edge-hi); background: rgba(0,0,0,.12); }
[data-theme="mk4"] .hp-panel__head { background: rgba(0,0,0,.05); }
.hp-panel__title { font-family: var(--hp-f-display); font-weight: var(--hp-w-display); font-size: 18px; line-height: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0; }
.hp-panel__meta { white-space: nowrap; font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.hp-panel__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.hp-panel--tight .hp-panel__body { padding: var(--space-3) var(--space-4); }
.hp-rivets { position: absolute; inset: 7px; pointer-events: none;
  --r: radial-gradient(circle at 50% 50%, var(--edge-hi) 0 1px, var(--rivet) 1.2px 3px, var(--edge-lo) 2.8px 3.8px, rgba(0,0,0,0) 4.2px);
  background: var(--r) 0 0 / 12px 12px no-repeat, var(--r) 100% 0 / 12px 12px no-repeat, var(--r) 0 100% / 12px 12px no-repeat, var(--r) 100% 100% / 12px 12px no-repeat; }

/* ---------- Button ---------- */
.hp-btn-wrap { display: inline-flex; filter: drop-shadow(0 2px 0 var(--seam)); }
.hp-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); border: 0; margin: 0; cursor: pointer;
  font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background-color: var(--hull-600); background-image: var(--hp-texture);
  box-shadow: var(--shadow-plate);
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
  transition: transform 40ms linear;
}
.hp-btn:hover { filter: brightness(1.12); }
.hp-btn:active, .hp-btn[data-pressed="true"] { box-shadow: var(--shadow-pressed); transform: translateY(1px); }
.hp-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--hull-900); }
.hp-btn--primary { background-color: var(--signal); color: var(--on-signal); }
.hp-btn--caution { background-color: var(--amber); color: var(--on-amber); }
.hp-btn--danger  { background-color: var(--alert); color: var(--on-alert); }
.hp-btn--sm { min-height: 32px; padding: 0 var(--space-3); }
.hp-btn--lg { min-height: 48px; padding: 0 var(--space-5); }
.hp-btn:disabled { cursor: not-allowed; background-color: var(--hull-700); color: var(--ink-muted); filter: none; transform: none; box-shadow: var(--shadow-well); }
.hp-btn__glyph { display: inline-flex; }
.hp-hk { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--amber); }
.hp-btn--primary .hp-hk, .hp-btn--caution .hp-hk, .hp-btn--danger .hp-hk { text-decoration-color: currentColor; }
.hp-btn__key { font-family: var(--hp-f-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; padding: 0 4px; margin-left: var(--space-1); color: inherit; opacity: .8; border: 1px solid currentColor; }
[data-theme="mk5"] .hp-btn { outline: 2px solid var(--rim); outline-offset: -2px; }
[data-theme="mk5"] .hp-btn:focus-visible { outline-color: var(--focus); }

/* ---------- Glyph ---------- */
.hp-glyph { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- CommandCard ---------- */
.hp-cmd { display: inline-flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.hp-cmd__grid { display: grid; gap: var(--space-1); }
.hp-cmd__slot {
  position: relative; width: var(--space-7); height: var(--space-7); padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--phosphor);
  background-color: var(--hull-600); background-image: var(--hp-texture); box-shadow: var(--shadow-plate);
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}
.hp-cmd__slot .hp-glyph { filter: drop-shadow(var(--hp-glow)); }
[data-theme="mk4"] .hp-cmd__slot, [data-theme="mk5"] .hp-cmd__slot { color: var(--ink); }
.hp-cmd__slot:hover { filter: brightness(1.15); }
.hp-cmd__slot:active { box-shadow: var(--shadow-pressed); transform: translateY(1px); }
.hp-cmd__slot:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--hull-900); }
.hp-cmd__slot[aria-pressed="true"] { color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber), var(--shadow-pressed); }
.hp-cmd__slot:disabled { cursor: not-allowed; color: var(--ink-muted); opacity: .55; filter: none; }
.hp-cmd__slot--empty { cursor: default; background: var(--hull-800); box-shadow: var(--shadow-well); }
.hp-cmd__key { position: absolute; right: 4px; bottom: 2px; font-family: var(--hp-f-mono); font-size: 11px; line-height: 12px; color: var(--ink-muted); }
.hp-cmd__info { min-height: 20px; padding: 2px var(--space-2); font-family: var(--hp-f-mono); font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--phosphor); text-shadow: var(--hp-glow); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-theme="mk5"] .hp-cmd__slot { outline: 2px solid var(--rim); outline-offset: -2px; }

/* ---------- Readout ---------- */
.hp-readout-box { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 120px; }
.hp-readout-box__label { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.hp-readout-box__screen { padding: var(--space-2) var(--space-3); clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); }
.hp-readout-box__value { position: relative; z-index: 1; font-family: var(--hp-f-mono); font-size: 22px; line-height: 28px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--phosphor); text-shadow: var(--hp-glow); white-space: nowrap; }
.hp-readout-box--lg .hp-readout-box__value { font-size: 36px; line-height: 40px; }
.hp-readout-box--amber .hp-readout-box__value { color: var(--amber); }
.hp-readout-box--alert .hp-readout-box__value { color: var(--alert); }
.hp-readout-box__ghost { color: var(--phosphor-dim); text-shadow: none; }
.hp-readout-box__unit { font-size: .55em; margin-left: .35em; letter-spacing: .1em; }
.hp-readout-box__caret { display: inline-block; width: .55em; height: .9em; margin-left: .15em; vertical-align: -.08em; background: currentColor; animation: hp-blink 1s steps(1) infinite; }

/* ---------- ResourceBar ---------- */
.hp-res { display: inline-flex; align-items: center; gap: var(--space-5); padding: var(--space-2) var(--space-5); }
.hp-res__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.hp-res__icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--phosphor); }
[data-theme="mk4"] .hp-res__icon, [data-theme="mk5"] .hp-res__icon { color: var(--ink); }
.hp-res__label { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: 11px; line-height: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.hp-res__value { font-family: var(--hp-f-mono); font-size: 18px; line-height: 20px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hp-res__item--capped .hp-res__value { color: var(--alert); }
.hp-res__item--capped .hp-res__icon { color: var(--alert); }

/* ---------- Gauge ---------- */
.hp-gauge { display: flex; flex-direction: column; gap: var(--space-1); min-width: 200px; }
.hp-gauge__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.hp-gauge__label { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.hp-gauge__value { font-family: var(--hp-f-mono); font-size: 14px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.hp-gauge__value--ok { color: var(--ink); }
.hp-gauge__value--warn { color: var(--amber); }
.hp-gauge__value--crit { color: var(--alert); }
.hp-gauge__track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; height: 20px; box-sizing: border-box; }
.hp-gauge--lg .hp-gauge__track { height: 28px; }
.hp-gauge__seg { position: relative; z-index: 1; border-radius: var(--radius-1); background: var(--phosphor-dim); }
.hp-gauge__seg--on { box-shadow: var(--shadow-glow); }
.hp-gauge--ok .hp-gauge__seg--on { background: var(--phosphor); }
.hp-gauge--warn .hp-gauge__seg--on { background: var(--amber); }
.hp-gauge--crit .hp-gauge__seg--on { background: var(--alert); }
[data-theme="mk4"] .hp-gauge__seg:not(.hp-gauge__seg--on), [data-theme="mk5"] .hp-gauge__seg:not(.hp-gauge__seg--on) { background: rgba(0,0,0,0); box-shadow: inset 0 0 0 1px var(--rim); }

/* ---------- StatusLight ---------- */
.hp-status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.hp-status__led { width: 10px; height: 10px; border-radius: var(--radius-round); box-shadow: inset -1px -1px 0 rgba(0,0,0,.35), 0 0 0 2px var(--seam); flex: none; }
.hp-status--online .hp-status__led { background: var(--phosphor); box-shadow: inset -1px -1px 0 rgba(0,0,0,.35), 0 0 0 2px var(--seam), 0 0 8px var(--phosphor); }
.hp-status--standby .hp-status__led { background: var(--amber); }
.hp-status--offline .hp-status__led { background: var(--hull-800); box-shadow: inset 0 0 0 1px var(--rim), 0 0 0 2px var(--seam); }
.hp-status--offline { color: var(--ink-muted); }
.hp-status--alert .hp-status__led { background: var(--alert); box-shadow: inset -1px -1px 0 rgba(0,0,0,.35), 0 0 0 2px var(--seam), 0 0 8px var(--alert); }
.hp-status--alert { color: var(--alert); }
.hp-status--blink .hp-status__led { animation: hp-blink .8s steps(1) infinite; }
[data-theme="mk4"] .hp-status--online .hp-status__led { background: var(--signal); box-shadow: 0 0 0 2px var(--seam); }

/* ---------- Toggle ---------- */
.hp-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; border: 0; padding: 0; background: none; color: var(--ink); font: inherit; }
.hp-toggle__label { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.hp-toggle__housing { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 88px; height: 32px; padding: 3px; box-sizing: border-box; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); box-shadow: inset 0 0 0 1px var(--rim), var(--shadow-well); }
.hp-toggle__housing::after { display: none; }
.hp-toggle__side { position: relative; z-index: 1; display: grid; place-items: center; font-family: var(--hp-f-mono); font-size: 11px; line-height: 12px; letter-spacing: .1em; color: var(--ink-muted); }
.hp-toggle__knob { position: absolute; z-index: 2; top: 3px; bottom: 3px; left: 50%; width: calc(50% - 3px); background-color: var(--hull-600); background-image: var(--hp-texture); box-shadow: var(--shadow-plate); transition: left 90ms steps(3); display: grid; place-items: center; }
.hp-toggle__knob::before { content: ""; width: 14px; height: 10px; background: repeating-linear-gradient(90deg, var(--edge-lo) 0 2px, rgba(0,0,0,0) 2px 4px); }
.hp-toggle[aria-checked="true"] .hp-toggle__knob { left: 3px; }
.hp-toggle[aria-checked="true"] .hp-toggle__housing { background: var(--signal); }
.hp-toggle[aria-checked="true"] .hp-toggle__side--on { color: var(--on-signal); }
.hp-toggle[aria-checked="false"] .hp-toggle__housing { background: var(--hull-800); }
.hp-toggle:focus-visible { outline: none; }
.hp-toggle:focus-visible .hp-toggle__housing { box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--hull-900); }
.hp-toggle:disabled { cursor: not-allowed; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .hp-toggle__knob { transition: none; } }

/* ---------- Input ---------- */
.hp-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 220px; }
.hp-field__label { font-family: var(--hp-f-label); font-weight: var(--hp-w-label); font-size: var(--hp-label-size); line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.hp-field__box { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); height: 40px; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); box-shadow: inset 0 0 0 1px var(--rim), var(--shadow-well); }
.hp-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--focus), var(--shadow-well); }
.hp-field__prefix { position: relative; z-index: 1; font-family: var(--hp-f-mono); font-size: 16px; color: var(--phosphor); text-shadow: var(--hp-glow); }
.hp-field__input { position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; font-family: var(--hp-f-mono); font-size: 16px; line-height: 20px; letter-spacing: .04em; color: var(--phosphor); caret-color: var(--amber); text-shadow: var(--hp-glow); }
.hp-field__input::placeholder { color: var(--ink-muted); opacity: 1; text-shadow: none; }
.hp-field__hint { font-family: var(--hp-f-body); font-weight: var(--hp-w-body); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.hp-field--error .hp-field__box { box-shadow: inset 0 0 0 2px var(--alert), var(--shadow-well); }
.hp-field--error .hp-field__hint { color: var(--alert); }

/* ---------- Transmission ---------- */
.hp-tx { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); }
.hp-tx__portrait { display: flex; flex-direction: column; gap: var(--space-1); }
.hp-tx__screen { height: 96px; overflow: hidden; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); }
.hp-tx__static { position: absolute; inset: 0; opacity: .55;
  background-image: repeating-linear-gradient(0deg, var(--phosphor-dim) 0 1px, rgba(0,0,0,0) 1px 2px, var(--phosphor-dim) 2px 3px, rgba(0,0,0,0) 3px 7px), repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 3px, var(--hull-800) 3px 5px, rgba(0,0,0,0) 5px 11px);
  animation: hp-static .5s steps(6) infinite; }
.hp-tx__sig { position: absolute; inset: 0; display: grid; place-items: center; color: var(--phosphor); }
.hp-tx__sig .hp-glyph { width: 40px; height: 40px; filter: drop-shadow(var(--hp-glow)); }
.hp-tx__call { font-family: var(--hp-f-mono); font-size: 11px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.hp-tx__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.hp-tx__from { font-family: var(--hp-f-display); font-weight: var(--hp-w-display); font-size: 18px; line-height: 24px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.hp-tx__msg { padding: var(--space-3); min-height: 72px; }
.hp-tx__text { position: relative; z-index: 1; margin: 0; font-family: var(--hp-f-mono); font-size: 15px; line-height: 22px; color: var(--phosphor); text-shadow: var(--hp-glow); white-space: pre-wrap; }
.hp-tx__cursor { display: inline-block; width: .6em; height: 1em; vertical-align: -.15em; background: currentColor; animation: hp-blink .7s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .hp-tx__static, .hp-tx__cursor, .hp-readout-box__caret, .hp-status--blink .hp-status__led { animation: none; } }

/* ---------- SoundBoard ---------- */
.hp-sb { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-sb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.hp-sb__vol { display: inline-flex; align-items: center; gap: var(--space-2); }
.hp-sb__vol input { accent-color: var(--amber); width: 140px; }
.hp-sb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.hp-sb__pad { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); text-align: left; }
.hp-sb__name { font-family: var(--hp-f-mono); font-size: 14px; line-height: 18px; color: var(--phosphor); text-transform: none; letter-spacing: .04em; text-shadow: var(--hp-glow); }
[data-theme="mk4"] .hp-sb__name, [data-theme="mk5"] .hp-sb__name { color: var(--ink); }
.hp-sb__use { font-family: var(--hp-f-body); font-weight: var(--hp-w-body); font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.hp-sb__pad.hp-btn { align-items: flex-start; }