/* Homeplayr base.css v2: component classes on top of tokens.css (plain CSS, no build step, no framework).
   Import order: tokens.css, base.css. Fonts come from fonts/fonts.css (imported below).
   Conventions: .hp-<component>, modifiers --x, parts __x. States via :hover/:active/:focus-visible/:disabled,
   [aria-*]/[data-*] attributes, plus .is-hover/.is-pressed/.is-focus helpers (used by the gallery to show states statically).
   Put data-device / data-theme on <html>. */
@import url("fonts/fonts.css");

:root {
  --hp-ui-scale: var(--hp-type-scale);
  --hp-ctl: calc(var(--hp-touch-min) * var(--hp-ui-scale));
  --hp-ctl-lg: calc(var(--hp-touch-comfortable) * var(--hp-ui-scale));
  --hp-ctl-xl: calc(var(--hp-touch-scorer) * var(--hp-ui-scale));
  --hp-ctl-2xl: calc(var(--hp-touch-scorer-primary) * var(--hp-ui-scale));
  --hp-motion-fast: var(--hp-duration-fast) var(--hp-ease-standard);
  --hp-motion-base: var(--hp-duration-base) var(--hp-ease-standard);
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--hp-color-bg); color: var(--hp-color-text-primary); font: 400 var(--hp-type-body-size)/var(--hp-type-body-line) var(--hp-font-ui); -webkit-font-smoothing: antialiased; }
:focus-visible, .is-focus { outline: var(--hp-border-width-focus) solid var(--hp-color-focus-ring); outline-offset: var(--hp-border-width-focus-offset); }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* ---------- type helpers ---------- */
.hp-display, .hp-h1, .hp-h2, .hp-h3, .hp-h4, .hp-body-lg, .hp-body, .hp-body-sm, .hp-label, .hp-caption, .hp-numeric, .hp-numeric-lg, .hp-mono { margin: 0; }
.hp-display   { font: var(--hp-type-display-style) var(--hp-type-display-weight) var(--hp-type-display-size)/var(--hp-type-display-line) var(--hp-type-display-family); letter-spacing: var(--hp-type-display-tracking); text-transform: var(--hp-type-display-transform); }
.hp-h1        { font: var(--hp-type-h1-weight) var(--hp-type-h1-size)/var(--hp-type-h1-line) var(--hp-type-h1-family); letter-spacing: var(--hp-type-h1-tracking); text-transform: var(--hp-type-h1-transform); }
.hp-h2        { font: var(--hp-type-h2-weight) var(--hp-type-h2-size)/var(--hp-type-h2-line) var(--hp-type-h2-family); letter-spacing: var(--hp-type-h2-tracking); text-transform: var(--hp-type-h2-transform); }
.hp-h3        { font: var(--hp-type-h3-weight) var(--hp-type-h3-size)/var(--hp-type-h3-line) var(--hp-type-h3-family); letter-spacing: var(--hp-type-h3-tracking); }
.hp-h4        { font: var(--hp-type-h4-weight) var(--hp-type-h4-size)/var(--hp-type-h4-line) var(--hp-type-h4-family); }
.hp-body-lg   { font: var(--hp-type-body-lg-weight) var(--hp-type-body-lg-size)/var(--hp-type-body-lg-line) var(--hp-type-body-lg-family); }
.hp-body-sm   { font: var(--hp-type-body-sm-weight) var(--hp-type-body-sm-size)/var(--hp-type-body-sm-line) var(--hp-type-body-sm-family); }
.hp-label     { font: var(--hp-type-label-weight) var(--hp-type-label-size)/var(--hp-type-label-line) var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: var(--hp-type-label-transform); }
.hp-caption   { font: var(--hp-type-caption-weight) var(--hp-type-caption-size)/var(--hp-type-caption-line) var(--hp-type-caption-family); letter-spacing: var(--hp-type-caption-tracking); color: var(--hp-color-text-tertiary); }
.hp-numeric   { font: var(--hp-type-numeric-weight) var(--hp-type-numeric-size)/var(--hp-type-numeric-line) var(--hp-type-numeric-family); font-variant-numeric: tabular-nums; }
.hp-numeric-lg{ font: var(--hp-type-numeric-lg-weight) var(--hp-type-numeric-lg-size)/var(--hp-type-numeric-lg-line) var(--hp-type-numeric-lg-family); font-variant-numeric: tabular-nums; }
.hp-mono      { font: var(--hp-type-mono-weight) var(--hp-type-mono-size)/var(--hp-type-mono-line) var(--hp-type-mono-family); font-variant-numeric: tabular-nums; }
.hp-muted { color: var(--hp-color-text-secondary); }
.hp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icons ---------- */
.hp-icon { display: inline-flex; width: 1em; height: 1em; font-size: var(--hp-icon-size-md); flex: none; vertical-align: middle; }
.hp-icon > svg { width: 100%; height: 100%; }
.hp-icon--xs { font-size: var(--hp-icon-size-xs); } .hp-icon--sm { font-size: var(--hp-icon-size-sm); } .hp-icon--lg { font-size: var(--hp-icon-size-lg); }

/* ---------- buttons ---------- */
.hp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--hp-space-2); min-height: var(--hp-ctl); min-width: var(--hp-ctl); padding: 0 var(--hp-space-5); border: var(--hp-border-width-thin) solid transparent; border-radius: var(--hp-radius-md); background: var(--hp-color-accent); color: var(--hp-color-text-on-accent); font: var(--hp-type-label-weight) var(--hp-type-label-size)/1 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--hp-motion-fast), border-color var(--hp-motion-fast), transform var(--hp-motion-fast); }
.hp-btn:hover, .hp-btn.is-hover { background: var(--hp-color-accent-hover); }
.hp-btn:active, .hp-btn.is-pressed { background: var(--hp-color-accent-pressed); transform: scale(0.98); }
.hp-btn--secondary { background: var(--hp-color-surface-2); color: var(--hp-color-text-primary); border-color: var(--hp-color-border-strong); }
.hp-btn--secondary:hover, .hp-btn--secondary.is-hover { background: var(--hp-color-surface-3); }
.hp-btn--secondary:active, .hp-btn--secondary.is-pressed { background: var(--hp-color-surface-1); }
.hp-btn--ghost { background: transparent; color: var(--hp-color-accent-text); }
.hp-btn--ghost:hover, .hp-btn--ghost.is-hover { background: var(--hp-color-accent-subtle); }
.hp-btn--ghost:active, .hp-btn--ghost.is-pressed { background: var(--hp-color-accent-subtle-border); }
.hp-btn--danger { background: var(--hp-color-status-error-solid); color: var(--hp-color-status-error-on-solid); }
.hp-btn--danger:hover, .hp-btn--danger.is-hover { background: var(--hp-color-palette-crimson-500); color: var(--hp-color-palette-black); }
.hp-btn--danger:active, .hp-btn--danger.is-pressed { background: var(--hp-color-palette-crimson-600); color: var(--hp-color-palette-white); filter: brightness(0.85); }
.hp-btn--sm { min-height: 36px; min-width: 36px; padding: 0 var(--hp-space-3); } /* desktop/pointer-fine only: below the 44px touch minimum */
.hp-btn--lg, .hp-btn--large { min-height: var(--hp-ctl-lg); padding: 0 var(--hp-space-6); }
.hp-btn--xl { min-height: var(--hp-ctl-xl); padding: 0 var(--hp-space-8); font-size: calc(var(--hp-type-label-size) * 1.25); }
.hp-btn--icon { padding: 0; width: var(--hp-ctl); }
.hp-btn--icon.hp-btn--lg { width: var(--hp-ctl-lg); } .hp-btn--icon.hp-btn--sm { width: 36px; }
.hp-btn--block { display: flex; width: 100%; }
.hp-btn:disabled, .hp-btn[aria-disabled="true"] { background: var(--hp-color-surface-2); color: var(--hp-color-text-disabled); border-color: var(--hp-color-border); cursor: not-allowed; transform: none; filter: none; }
.hp-btn[aria-busy="true"] { cursor: progress; pointer-events: none; color: transparent; }
.hp-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--hp-color-text-on-accent); border-right-color: transparent; animation: hp-spin 800ms linear infinite; }
.hp-btn--secondary[aria-busy="true"]::after, .hp-btn--ghost[aria-busy="true"]::after { border-color: var(--hp-color-text-primary); border-right-color: transparent; }
.hp-btn--danger[aria-busy="true"]::after { border-color: var(--hp-color-status-error-on-solid); border-right-color: transparent; }
@keyframes hp-spin { to { transform: rotate(360deg); } }

/* switcher transition buttons */
.hp-btn--cut  { min-height: var(--hp-ctl-2xl); padding: 0 var(--hp-space-8); font: italic 800 calc(40px * var(--hp-ui-scale))/1 var(--hp-font-display); letter-spacing: 0.04em; border-radius: var(--hp-radius-lg); }
.hp-btn--take { min-height: var(--hp-ctl-xl); padding: 0 var(--hp-space-6); background: var(--hp-color-surface-2); color: var(--hp-color-accent-text); border: var(--hp-border-width-medium) solid var(--hp-color-accent); font: 800 calc(28px * var(--hp-ui-scale))/1 var(--hp-font-display); letter-spacing: 0.06em; border-radius: var(--hp-radius-lg); }
.hp-btn--take:hover, .hp-btn--take.is-hover { background: var(--hp-color-accent-subtle); }
.hp-btn--take:active, .hp-btn--take.is-pressed { background: var(--hp-color-accent-subtle-border); }

/* ---------- badges ---------- */
.hp-badge { display: inline-flex; align-items: center; gap: var(--hp-space-1); height: 24px; padding: 0 var(--hp-space-2); border-radius: var(--hp-radius-pill); background: var(--hp-color-surface-3); color: var(--hp-color-text-primary); font: var(--hp-type-label-weight) 11px/1 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; white-space: nowrap; }
.hp-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.hp-badge--live { background: var(--hp-color-status-live-solid); color: var(--hp-color-status-live-on-solid); }
.hp-badge--live::before { animation: hp-pulse var(--hp-duration-pulse) var(--hp-ease-standard) infinite; }
.hp-badge--offline { background: var(--hp-color-status-offline-solid); color: var(--hp-color-status-offline-on-solid); }
.hp-badge--warn, .hp-badge--stalled { background: var(--hp-color-status-warn-solid); color: var(--hp-color-status-warn-on-solid); }
.hp-badge--stalled::before, .hp-badge--warn::before { border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; } /* diamond: not color alone */
.hp-badge--ok { background: var(--hp-color-status-ok-solid); color: var(--hp-color-status-ok-on-solid); }
.hp-badge--error { background: var(--hp-color-status-error-solid); color: var(--hp-color-status-error-on-solid); }
.hp-badge--error::before { border-radius: 0; width: 7px; height: 7px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hp-badge--count { min-width: 24px; justify-content: center; padding: 0 var(--hp-space-2); background: var(--hp-color-accent); color: var(--hp-color-text-on-accent); font-variant-numeric: tabular-nums; }
.hp-badge--count::before, .hp-badge--plain::before { display: none; }
.hp-badge--plain { background: var(--hp-color-surface-3); }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- video placeholder (wireframe) ---------- */
.hp-video { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, var(--hp-color-surface-3) 0%, var(--hp-color-surface-1) 55%, var(--hp-color-surface-sunken) 100%); }
.hp-video::before { content: ""; position: absolute; left: 50%; bottom: -34%; width: 46%; aspect-ratio: 1; transform: translateX(-50%) rotate(45deg); border: 2px solid var(--hp-color-border-strong); opacity: 0.35; }
.hp-video > * { position: relative; z-index: 1; }

/* ---------- meters ---------- */
/* Scale: linear -60..0 dBFS. low 0-70% (to -18), mid 70-90% (-18..-6), high 90-100%. Set --hp-meter-level / --hp-meter-peak (e.g. 62%). */
.hp-meter { --hp-meter-level: 0%; --hp-meter-peak: 0%; position: relative; height: 8px; border-radius: var(--hp-radius-xs); background: linear-gradient(90deg, var(--hp-color-meter-audio-low) 0 70%, var(--hp-color-meter-audio-mid) 70% 90%, var(--hp-color-meter-audio-high) 90% 100%); overflow: hidden; }
.hp-meter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--hp-color-meter-audio-track), var(--hp-color-meter-audio-track)) right / calc(100% - var(--hp-meter-level)) 100% no-repeat, repeating-linear-gradient(90deg, transparent 0 5px, var(--hp-color-meter-audio-track) 5px 6px); }
.hp-meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hp-meter-peak); width: 2px; background: var(--hp-color-meter-audio-peak); }
.hp-meter--lg { height: 14px; }
.hp-meter--v { width: 12px; height: 160px; background: linear-gradient(0deg, var(--hp-color-meter-audio-low) 0 70%, var(--hp-color-meter-audio-mid) 70% 90%, var(--hp-color-meter-audio-high) 90% 100%); }
.hp-meter--v::before { background: linear-gradient(var(--hp-color-meter-audio-track), var(--hp-color-meter-audio-track)) top / 100% calc(100% - var(--hp-meter-level)) no-repeat, repeating-linear-gradient(0deg, transparent 0 5px, var(--hp-color-meter-audio-track) 5px 6px); }
.hp-meter--v::after { left: 0; right: 0; top: auto; bottom: var(--hp-meter-peak); width: auto; height: 2px; }
.hp-meter--muted { filter: grayscale(1) brightness(0.55); }
.hp-meter[data-clip="true"] { box-shadow: 0 0 0 1px var(--hp-color-meter-audio-clip); }
/* meter with clip lamp + dBFS ticks */
.hp-meterbox { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--hp-space-2); }
.hp-clip { width: 10px; height: 10px; border-radius: 2px; background: var(--hp-color-meter-audio-track); }
.hp-clip[data-clip="true"], .hp-clip.is-on { background: var(--hp-color-meter-audio-clip); box-shadow: 0 0 6px var(--hp-color-tally-program-glow); }
.hp-ticks { position: relative; height: 14px; grid-column: 1; font: 500 10px/14px var(--hp-font-mono); color: var(--hp-color-text-tertiary); }
.hp-ticks > span { position: absolute; top: 0; transform: translateX(-50%); }
.hp-ticks > span::before { content: ""; position: absolute; left: 50%; top: -4px; height: 3px; width: 1px; background: var(--hp-color-meter-audio-tick); }
.hp-ticks > span:first-child { transform: none; } .hp-ticks > span:last-child { transform: translateX(-100%); }
.hp-ticks--v { width: 30px; height: 160px; grid-column: auto; }
.hp-ticks--v > span, .hp-ticks--v > span:first-child, .hp-ticks--v > span:last-child { top: auto; left: 0; transform: translateY(50%); }
.hp-ticks--v > span:first-child { transform: none; } .hp-ticks--v > span:last-child { transform: translateY(100%); }
.hp-ticks--v > span::before { left: auto; right: 0; top: 50%; height: 1px; width: 4px; }
.hp-meter-v-wrap { display: flex; gap: var(--hp-space-1); align-items: flex-end; }
/* network / bitrate */
.hp-meter--network { background: var(--hp-color-meter-network-track); }
.hp-meter--network::before { background: var(--hp-color-meter-network-good); width: var(--hp-meter-level); right: auto; }
.hp-meter--network::after { display: none; }
.hp-meter--network[data-quality="fair"]::before { background: var(--hp-color-meter-network-fair); }
.hp-meter--network[data-quality="poor"]::before { background: var(--hp-color-meter-network-poor); }
.hp-meter--network[data-quality="none"]::before { background: var(--hp-color-meter-network-none); }
.hp-target { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--hp-color-text-secondary); left: var(--hp-target, 80%); z-index: 2; }
/* signal bars: data-bars 0-4, data-quality */
.hp-signal { --hp-sig: var(--hp-color-meter-network-good); display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.hp-signal > i { width: 4px; border-radius: 1px; background: var(--hp-color-meter-network-none); }
.hp-signal > i:nth-child(1) { height: 25%; } .hp-signal > i:nth-child(2) { height: 50%; } .hp-signal > i:nth-child(3) { height: 75%; } .hp-signal > i:nth-child(4) { height: 100%; }
.hp-signal[data-quality="fair"] { --hp-sig: var(--hp-color-meter-network-fair); } .hp-signal[data-quality="poor"] { --hp-sig: var(--hp-color-meter-network-poor); }
.hp-signal[data-bars="1"] > i:nth-child(-n+1), .hp-signal[data-bars="2"] > i:nth-child(-n+2), .hp-signal[data-bars="3"] > i:nth-child(-n+3), .hp-signal[data-bars="4"] > i:nth-child(-n+4) { background: var(--hp-sig); }
/* battery: --hp-level 0-100%, data-state ok|warn|low|charging */
.hp-battery { --hp-level: 100%; --hp-bat: var(--hp-color-status-ok); display: inline-flex; align-items: center; gap: var(--hp-space-1); font: 500 12px/1 var(--hp-font-mono); color: var(--hp-color-text-secondary); }
.hp-battery__cell { position: relative; width: 24px; height: 12px; border: 1.5px solid var(--hp-color-text-secondary); border-radius: 3px; padding: 1.5px; }
.hp-battery__cell::before { content: ""; display: block; width: var(--hp-level); height: 100%; background: var(--hp-bat); border-radius: 1px; }
.hp-battery__cell::after { content: ""; position: absolute; right: -4.5px; top: 2.5px; width: 2px; height: 4px; background: var(--hp-color-text-secondary); border-radius: 0 1px 1px 0; }
.hp-battery[data-state="warn"] { --hp-bat: var(--hp-color-status-warn); } .hp-battery[data-state="low"] { --hp-bat: var(--hp-color-status-error); color: var(--hp-color-status-error); }

/* ---------- tiles (camera/source) ---------- */
.hp-tile { position: relative; display: block; width: 100%; padding: 0; text-align: left; background: var(--hp-color-surface-1); border: var(--hp-border-width-thick) solid var(--hp-color-border); border-radius: var(--hp-radius-md); color: var(--hp-color-text-primary); cursor: pointer; overflow: hidden; transition: border-color var(--hp-motion-fast), background var(--hp-motion-fast); }
.hp-tile:hover, .hp-tile.is-hover { background: var(--hp-color-surface-2); border-color: var(--hp-color-border-strong); }
.hp-tile[data-tally="program"], .hp-tile[data-tally="program"]:hover { border-color: var(--hp-color-tally-program); box-shadow: 0 0 0 1px var(--hp-color-tally-program), 0 0 16px var(--hp-color-tally-program-glow); }
.hp-tile[data-tally="preview"], .hp-tile[data-tally="preview"]:hover { border-color: var(--hp-color-tally-preview); box-shadow: 0 0 0 1px var(--hp-color-tally-preview), 0 0 16px var(--hp-color-tally-preview-glow); }
.hp-tile[aria-selected="true"], .hp-tile.is-selected { background: var(--hp-color-surface-2); outline: var(--hp-border-width-medium) solid var(--hp-color-accent); outline-offset: 3px; }
.hp-tile[aria-selected="true"]:focus-visible, .hp-tile.is-selected.is-focus { outline-offset: 6px; }
.hp-tile[data-status="offline"] .hp-video { filter: grayscale(1) brightness(0.55); }
.hp-tile[data-status="offline"] .hp-tile__stats { color: var(--hp-color-text-tertiary); }
.hp-tile__video { position: relative; }
.hp-tile__num { position: absolute; left: var(--hp-space-2); top: var(--hp-space-2); min-width: 28px; height: 28px; padding: 0 var(--hp-space-2); display: grid; place-items: center; border-radius: var(--hp-radius-sm); background: #000000B3; font: 700 18px/1 var(--hp-font-display); font-variant-numeric: tabular-nums; }
.hp-tile__badge { position: absolute; right: var(--hp-space-2); top: var(--hp-space-2); }
.hp-tile__lamp { position: absolute; left: var(--hp-space-2); bottom: var(--hp-space-2); display: none; align-items: center; gap: var(--hp-space-1); height: 22px; padding: 0 var(--hp-space-2); border-radius: var(--hp-radius-sm); font: 800 12px/1 var(--hp-font-display); letter-spacing: 0.08em; }
.hp-tile[data-tally="program"] .hp-tile__lamp { display: inline-flex; background: var(--hp-color-tally-program); color: var(--hp-color-palette-black); }
.hp-tile[data-tally="preview"] .hp-tile__lamp { display: inline-flex; background: var(--hp-color-tally-preview); color: var(--hp-color-palette-black); }
.hp-tile__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--hp-space-1); color: var(--hp-color-text-secondary); text-align: center; }
.hp-tile__meta { display: grid; gap: var(--hp-space-1); padding: var(--hp-space-2) var(--hp-space-3) var(--hp-space-3); }
.hp-tile__name { font: 600 var(--hp-type-h4-size)/1.2 var(--hp-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-tile__stats { display: flex; align-items: center; gap: var(--hp-space-3); flex-wrap: wrap; font: 500 12px/1 var(--hp-font-mono); color: var(--hp-color-text-secondary); font-variant-numeric: tabular-nums; }
.hp-tile__stats .hp-icon { font-size: 16px; }
.hp-tile--compact .hp-tile__meta { padding: var(--hp-space-2) var(--hp-space-2) var(--hp-space-2); gap: var(--hp-space-1); }
.hp-tile--compact .hp-tile__name { font-size: var(--hp-type-body-sm-size); }
.hp-tile--compact .hp-tile__stats { gap: var(--hp-space-2); font-size: 11px; }
.hp-tile--empty { background: transparent; border-style: dashed; border-width: var(--hp-border-width-medium); display: grid; place-items: center; align-content: center; gap: var(--hp-space-1); color: var(--hp-color-text-secondary); min-height: 100%; }

/* ---------- tabs and segmented controls ---------- */
.hp-tabs { display: flex; gap: var(--hp-space-1); border-bottom: var(--hp-border-width-thin) solid var(--hp-color-divider); }
.hp-tab { display: inline-flex; align-items: center; gap: var(--hp-space-2); min-height: var(--hp-ctl); padding: 0 var(--hp-space-4); background: transparent; border: 0; border-bottom: var(--hp-border-width-medium) solid transparent; color: var(--hp-color-text-secondary); font: var(--hp-type-label-weight) var(--hp-type-label-size)/1 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; cursor: pointer; transition: color var(--hp-motion-fast); }
.hp-tab:hover, .hp-tab.is-hover { color: var(--hp-color-text-primary); background: var(--hp-color-surface-1); }
.hp-tab[aria-selected="true"] { color: var(--hp-color-accent-text); border-bottom-color: var(--hp-color-accent); }
.hp-tab:disabled { color: var(--hp-color-text-disabled); cursor: not-allowed; background: transparent; }
.hp-segmented { display: inline-flex; padding: var(--hp-space-1); gap: var(--hp-space-1); background: var(--hp-color-surface-2); border: var(--hp-border-width-thin) solid var(--hp-color-border); border-radius: var(--hp-radius-md); }
.hp-segmented > button { min-height: calc(var(--hp-ctl) - 12px); min-width: var(--hp-ctl); padding: 0 var(--hp-space-4); border: var(--hp-border-width-thin) solid transparent; border-radius: var(--hp-radius-sm); background: transparent; color: var(--hp-color-text-secondary); font: var(--hp-type-label-weight) var(--hp-type-label-size)/1 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; cursor: pointer; transition: background var(--hp-motion-fast); }
.hp-segmented > button:hover, .hp-segmented > button.is-hover { background: var(--hp-color-surface-3); color: var(--hp-color-text-primary); }
.hp-segmented > button[aria-checked="true"], .hp-segmented > button[aria-pressed="true"] { background: var(--hp-color-accent-subtle); border-color: var(--hp-color-accent-subtle-border); color: var(--hp-color-accent-text); }
.hp-segmented--lg > button { min-height: var(--hp-ctl); } /* 44px segments: use for touch / operator controls */
.hp-segmented > button:disabled { color: var(--hp-color-text-disabled); cursor: not-allowed; background: transparent; }

/* ---------- status bar ---------- */
.hp-statusbar { display: flex; align-items: center; gap: var(--hp-space-5); min-height: calc(var(--hp-touch-comfortable) * var(--hp-ui-scale)); padding: 0 var(--hp-space-5); background: var(--hp-color-surface-sunken); border-bottom: var(--hp-border-width-thin) solid var(--hp-color-border); }
.hp-statusbar--bottom { border-bottom: 0; border-top: var(--hp-border-width-thin) solid var(--hp-color-border); min-height: calc(var(--hp-touch-min) * var(--hp-ui-scale)); }
.hp-statusbar__group { display: flex; align-items: center; gap: var(--hp-space-5); }
.hp-statusbar__spacer { flex: 1; }
.hp-statusbar__item { display: inline-flex; align-items: center; gap: var(--hp-space-2); font: var(--hp-type-label-weight) var(--hp-type-body-sm-size)/1 var(--hp-font-ui); color: var(--hp-color-text-secondary); white-space: nowrap; }
.hp-statusbar__item b { color: var(--hp-color-text-primary); font: 500 var(--hp-type-body-sm-size)/1 var(--hp-font-mono); font-variant-numeric: tabular-nums; }
.hp-statusbar__item[data-state="ok"] .hp-icon { color: var(--hp-color-status-ok); }
.hp-statusbar__item[data-state="warn"] .hp-icon { color: var(--hp-color-status-warn); }
.hp-statusbar__item[data-state="error"] .hp-icon { color: var(--hp-color-status-error); }
.hp-statusbar__sep { width: 1px; align-self: stretch; margin: var(--hp-space-3) 0; background: var(--hp-color-divider); }
.hp-timecode { font: 500 calc(20px * var(--hp-ui-scale))/1 var(--hp-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--hp-color-text-primary); }
.hp-rec { display: inline-flex; align-items: center; gap: var(--hp-space-2); font: 700 var(--hp-type-label-size)/1 var(--hp-font-display); letter-spacing: 0.1em; color: var(--hp-color-status-live); }
.hp-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: hp-pulse var(--hp-duration-pulse) var(--hp-ease-standard) infinite; }
.hp-rec[data-on="false"] { color: var(--hp-color-text-tertiary); } .hp-rec[data-on="false"]::before { animation: none; background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.hp-brand { display: inline-flex; align-items: center; gap: var(--hp-space-3); }
.hp-brand img { height: 36px; width: auto; display: block; }
.hp-brand__word { font: italic 800 calc(24px * var(--hp-ui-scale))/1 var(--hp-font-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- cards / panels ---------- */
.hp-card { background: var(--hp-color-surface-1); border: var(--hp-border-width-thin) solid var(--hp-color-border); border-radius: var(--hp-radius-lg); padding: var(--hp-space-4); }
.hp-card--raised { background: var(--hp-color-surface-2); box-shadow: var(--hp-elevation-2); }
.hp-panel { display: flex; flex-direction: column; background: var(--hp-color-surface-1); border: var(--hp-border-width-thin) solid var(--hp-color-border); border-radius: var(--hp-radius-lg); overflow: hidden; }
.hp-panel__header { display: flex; align-items: center; gap: var(--hp-space-3); min-height: 48px; padding: 0 var(--hp-space-4); border-bottom: var(--hp-border-width-thin) solid var(--hp-color-divider); }
.hp-panel__title { margin: 0; flex: 1; font: 700 calc(18px * var(--hp-ui-scale))/1 var(--hp-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.hp-panel__body { padding: var(--hp-space-4); display: grid; gap: var(--hp-space-3); }
.hp-panel__body--flush { padding: 0; }
.hp-menu { background: var(--hp-color-surface-3); border: var(--hp-border-width-thin) solid var(--hp-color-border); border-radius: var(--hp-radius-md); box-shadow: var(--hp-elevation-3); z-index: var(--hp-z-dropdown); }

/* ---------- program / preview monitor ---------- */
.hp-monitor { position: relative; border: var(--hp-border-width-thick) solid var(--hp-color-border); border-radius: var(--hp-radius-md); background: var(--hp-color-bg); overflow: hidden; }
.hp-monitor[data-tally="program"] { border-color: var(--hp-color-tally-program); box-shadow: 0 0 0 1px var(--hp-color-tally-program), 0 0 24px var(--hp-color-tally-program-glow); }
.hp-monitor[data-tally="preview"] { border-color: var(--hp-color-tally-preview); box-shadow: 0 0 0 1px var(--hp-color-tally-preview), 0 0 24px var(--hp-color-tally-preview-glow); }
.hp-monitor__label { position: absolute; left: var(--hp-space-3); top: var(--hp-space-3); z-index: 3; display: inline-flex; align-items: center; gap: var(--hp-space-2); height: 32px; padding: 0 var(--hp-space-3); border-radius: var(--hp-radius-sm); font: 800 20px/1 var(--hp-font-display); letter-spacing: 0.1em; color: var(--hp-color-palette-black); background: var(--hp-color-border-strong); }
.hp-monitor[data-tally="program"] .hp-monitor__label { background: var(--hp-color-tally-program); }
.hp-monitor[data-tally="preview"] .hp-monitor__label { background: var(--hp-color-tally-preview); }
.hp-monitor__source { position: absolute; left: var(--hp-space-3); bottom: var(--hp-space-3); z-index: 3; padding: var(--hp-space-1) var(--hp-space-3); border-radius: var(--hp-radius-sm); background: #000000B3; font: 600 var(--hp-type-h4-size)/1.2 var(--hp-font-ui); }
.hp-monitor__tools { position: absolute; right: var(--hp-space-3); top: var(--hp-space-3); z-index: 3; display: flex; gap: var(--hp-space-2); }
.hp-monitor__tc { position: absolute; right: var(--hp-space-3); bottom: var(--hp-space-3); z-index: 3; padding: var(--hp-space-1) var(--hp-space-3); border-radius: var(--hp-radius-sm); background: #000000B3; font: 500 14px/1.2 var(--hp-font-mono); font-variant-numeric: tabular-nums; }
.hp-safe { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.hp-safe::before, .hp-safe::after { content: ""; position: absolute; border: 1px dashed var(--hp-color-text-secondary); }
.hp-safe::before { inset: 3.5%; }   /* action safe 93% */
.hp-safe::after { inset: 5%; border-color: var(--hp-color-accent); } /* title safe 90% */
.hp-monitor[data-safe="true"] .hp-safe { display: block; }

/* ---------- scoring pad ---------- */
.hp-padwrap { container-type: inline-size; width: 100%; }
.hp-pad { display: grid; gap: var(--hp-space-4); grid-template-columns: 1fr; }
.hp-pad__section { display: grid; gap: var(--hp-space-3); }
.hp-pad__title { grid-column: 1 / -1; margin: 0; color: var(--hp-color-text-secondary); font: var(--hp-type-label-weight) var(--hp-type-label-size)/1 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; }
.hp-pad__count { grid-column: 1 / -1; display: flex; gap: var(--hp-space-6); padding: var(--hp-space-3) var(--hp-space-4); background: var(--hp-color-surface-1); border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-lg); font: 800 calc(40px * var(--hp-ui-scale))/1 var(--hp-font-display); font-variant-numeric: tabular-nums; }
.hp-pad__count small { display: block; font: var(--hp-type-label-weight) 12px/1 var(--hp-font-ui); letter-spacing: 0.06em; color: var(--hp-color-text-secondary); text-transform: uppercase; margin-bottom: var(--hp-space-1); }
.hp-pad__grid { display: grid; gap: var(--hp-space-3); grid-template-columns: repeat(2, 1fr); }
.hp-pad__grid--4 { grid-template-columns: repeat(4, 1fr); }
.hp-pad__grid--3 { grid-template-columns: repeat(3, 1fr); }
.hp-pad__btn { display: grid; place-items: center; align-content: center; gap: var(--hp-space-1); min-width: var(--hp-ctl-xl); min-height: var(--hp-ctl-xl); padding: var(--hp-space-2); border: var(--hp-border-width-medium) solid var(--hp-color-border-strong); border-radius: var(--hp-radius-lg); background: var(--hp-color-surface-2); color: var(--hp-color-text-primary); font: 800 calc(26px * var(--hp-ui-scale))/1 var(--hp-font-display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; user-select: none; transition: background var(--hp-motion-fast), transform var(--hp-motion-fast); }
.hp-pad__btn small { font: 500 11px/1 var(--hp-font-ui); letter-spacing: 0.04em; color: var(--hp-color-text-secondary); text-transform: none; }
.hp-pad__btn:hover, .hp-pad__btn.is-hover { background: var(--hp-color-surface-3); }
.hp-pad__btn:active, .hp-pad__btn.is-pressed { background: var(--hp-color-accent-subtle-border); transform: scale(0.97); }
.hp-pad__btn--primary { min-height: var(--hp-ctl-2xl); font-size: calc(40px * var(--hp-ui-scale)); }
.hp-pad__btn--strike, .hp-pad__btn--out { border-color: var(--hp-color-accent); }
.hp-pad__btn--accent { background: var(--hp-color-accent); border-color: var(--hp-color-accent); color: var(--hp-color-text-on-accent); }
.hp-pad__btn--accent small { color: var(--hp-color-text-on-accent); }
.hp-pad__btn--accent:hover { background: var(--hp-color-accent-hover); }
.hp-pad__btn[aria-pressed="true"] { background: var(--hp-color-accent-subtle); border-color: var(--hp-color-accent); color: var(--hp-color-accent-text); }
.hp-pad__btn:disabled { color: var(--hp-color-text-disabled); background: var(--hp-color-surface-1); border-color: var(--hp-color-border); cursor: not-allowed; }
.hp-pad__runner { font-size: calc(18px * var(--hp-ui-scale)); }
.hp-pad__bases { display: grid; place-items: center; }
@container (min-width: 640px) {
  .hp-pad { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
  .hp-pad__count { grid-column: 1 / -1; }
  .hp-pad__section--primary .hp-pad__grid { grid-template-columns: repeat(2, 1fr); }
  .hp-pad__section--hits .hp-pad__grid { grid-template-columns: repeat(2, 1fr); }
  .hp-pad__section--runners .hp-pad__grid { grid-template-columns: 1fr; }
}
@container (min-width: 960px) { .hp-pad { grid-template-columns: 1.3fr 1.3fr 1fr; } }

/* ---------- lineup card ---------- */
.hp-lineup { display: grid; gap: var(--hp-space-1); margin: 0; padding: 0; list-style: none; }
.hp-lineup__row { display: grid; grid-template-columns: var(--hp-ctl) 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--hp-space-3); min-height: var(--hp-ctl-lg); padding: 0 var(--hp-space-3) 0 0; background: var(--hp-color-surface-1); border: var(--hp-border-width-thin) solid var(--hp-color-border); border-left: var(--hp-border-width-thick) solid transparent; border-radius: var(--hp-radius-md); }
.hp-lineup__handle { display: grid; place-items: center; height: 100%; color: var(--hp-color-text-secondary); cursor: grab; touch-action: none; }
.hp-lineup__order { font: 800 26px/1 var(--hp-font-display); font-variant-numeric: tabular-nums; color: var(--hp-color-text-secondary); text-align: center; }
.hp-lineup__name { display: grid; gap: 2px; min-width: 0; }
.hp-lineup__name b { font: 600 var(--hp-type-body-lg-size)/1.2 var(--hp-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-lineup__name span { font: 500 12px/1.2 var(--hp-font-mono); color: var(--hp-color-text-secondary); }
.hp-lineup__pos { min-width: 52px; text-align: center; padding: var(--hp-space-2) var(--hp-space-2); border: 1px solid var(--hp-color-border-strong); border-radius: var(--hp-radius-sm); background: var(--hp-color-surface-2); font: 800 18px/1 var(--hp-font-display); letter-spacing: 0.04em; }
.hp-lineup__row[data-current="true"] { border-left-color: var(--hp-color-accent); background: var(--hp-color-accent-subtle); border-color: var(--hp-color-accent-subtle-border); border-left-color: var(--hp-color-accent); }
.hp-lineup__row[data-current="true"] .hp-lineup__order { color: var(--hp-color-accent-text); }
.hp-lineup__row[data-sub="out"] { opacity: 0.8; } .hp-lineup__row[data-sub="out"] .hp-lineup__name b { text-decoration: line-through; color: var(--hp-color-text-tertiary); }
.hp-lineup__row[data-sub="in"] { border-left-color: var(--hp-color-status-ok); }
.hp-lineup__row[data-dragging="true"], .hp-lineup__row.is-dragging { background: var(--hp-color-surface-3); box-shadow: var(--hp-elevation-3); border-color: var(--hp-color-border-strong); transform: scale(1.01); }
.hp-lineup__row[data-drop="true"] { box-shadow: 0 -3px 0 0 var(--hp-color-accent); }

/* ---------- forms ---------- */
.hp-field { display: grid; gap: var(--hp-space-1); }
.hp-field > label, .hp-field__label { font: var(--hp-type-label-weight) var(--hp-type-label-size)/1.25 var(--hp-type-label-family); letter-spacing: var(--hp-type-label-tracking); text-transform: uppercase; color: var(--hp-color-text-secondary); }
.hp-field__help { font: var(--hp-type-caption-weight) var(--hp-type-caption-size)/1.33 var(--hp-font-ui); color: var(--hp-color-text-tertiary); }
.hp-field__error { display: flex; gap: var(--hp-space-1); align-items: center; font: 500 var(--hp-type-caption-size)/1.33 var(--hp-font-ui); color: var(--hp-color-status-error); }
.hp-input, .hp-select { width: 100%; min-height: var(--hp-ctl); padding: 0 var(--hp-space-4); background: var(--hp-color-surface-2); border: var(--hp-border-width-thin) solid var(--hp-color-border-strong); border-radius: var(--hp-radius-md); color: var(--hp-color-text-primary); font: 400 var(--hp-type-body-size)/1.3 var(--hp-font-ui); transition: border-color var(--hp-motion-fast); }
.hp-input::placeholder { color: var(--hp-color-text-tertiary); }
.hp-input:hover, .hp-select:hover { border-color: var(--hp-color-text-secondary); }
.hp-input:focus, .hp-select:focus, .hp-input.is-focus { outline: none; border-color: var(--hp-color-focus-ring); box-shadow: 0 0 0 var(--hp-border-width-focus) var(--hp-color-focus-ring); }
.hp-input[aria-invalid="true"] { border-color: var(--hp-color-status-error); border-width: var(--hp-border-width-medium); }
.hp-input:disabled, .hp-select:disabled { color: var(--hp-color-text-disabled); background: var(--hp-color-surface-1); border-color: var(--hp-color-border); cursor: not-allowed; }
.hp-input--mono { font-family: var(--hp-font-mono); font-variant-numeric: tabular-nums; }
.hp-select { appearance: none; -webkit-appearance: none; padding-right: var(--hp-space-10); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right var(--hp-space-3) center; background-size: 20px; }
.hp-toggle { display: inline-flex; align-items: center; gap: var(--hp-space-3); min-height: var(--hp-ctl); cursor: pointer; font: 500 var(--hp-type-body-size)/1.2 var(--hp-font-ui); }
.hp-toggle input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border-radius: var(--hp-radius-pill); background: var(--hp-color-surface-3); border: var(--hp-border-width-medium) solid var(--hp-color-border-strong); cursor: pointer; transition: background var(--hp-motion-base), border-color var(--hp-motion-base); }
.hp-toggle input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--hp-color-text-secondary); transition: transform var(--hp-motion-base), background var(--hp-motion-base); }
.hp-toggle input:checked { background: var(--hp-color-accent); border-color: var(--hp-color-accent); }
.hp-toggle input:checked::before { transform: translateX(20px); background: var(--hp-color-text-on-accent); }
.hp-toggle input:focus-visible { outline: var(--hp-border-width-focus) solid var(--hp-color-focus-ring); outline-offset: var(--hp-border-width-focus-offset); }
.hp-toggle input:disabled { opacity: var(--hp-opacity-disabled); cursor: not-allowed; }

/* ---------- toast / dialog ---------- */
.hp-toast { display: flex; align-items: center; gap: var(--hp-space-3); min-height: var(--hp-ctl); padding: var(--hp-space-2) var(--hp-space-2) var(--hp-space-2) var(--hp-space-4); max-width: 480px; background: var(--hp-color-surface-3); border: var(--hp-border-width-thin) solid var(--hp-color-border-strong); border-left: var(--hp-border-width-thick) solid var(--hp-toast, var(--hp-color-border-strong)); border-radius: var(--hp-radius-md); box-shadow: var(--hp-elevation-3); z-index: var(--hp-z-toast); animation: hp-toast-in var(--hp-duration-moderate) var(--hp-ease-enter); }
.hp-toast[data-kind="ok"] { --hp-toast: var(--hp-color-status-ok); } .hp-toast[data-kind="warn"] { --hp-toast: var(--hp-color-status-warn); } .hp-toast[data-kind="error"] { --hp-toast: var(--hp-color-status-error); } .hp-toast[data-kind="live"] { --hp-toast: var(--hp-color-status-live); } .hp-toast[data-kind="info"] { --hp-toast: var(--hp-color-accent); }
.hp-toast > .hp-icon { color: var(--hp-toast); }
.hp-toast__msg { flex: 1; font: 500 var(--hp-type-body-sm-size)/1.35 var(--hp-font-ui); }
@keyframes hp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--hp-opacity-scrim)); z-index: var(--hp-z-overlay); display: grid; place-items: center; padding: var(--hp-space-4); }
.hp-dialog { width: min(440px, 100%); background: var(--hp-color-surface-3); border: var(--hp-border-width-thin) solid var(--hp-color-border-strong); border-radius: var(--hp-radius-xl); box-shadow: var(--hp-elevation-4); z-index: var(--hp-z-modal); overflow: hidden; }
.hp-dialog__body { padding: var(--hp-space-6); display: grid; gap: var(--hp-space-3); }
.hp-dialog__title { margin: 0; font: 700 calc(24px * var(--hp-ui-scale))/1.2 var(--hp-font-display); letter-spacing: 0.015em; text-transform: uppercase; }
.hp-dialog__actions { display: flex; justify-content: flex-end; gap: var(--hp-space-3); padding: var(--hp-space-4) var(--hp-space-6); background: var(--hp-color-surface-2); border-top: 1px solid var(--hp-color-border); }

/* ---------- layout ---------- */
.hp-container { width: 100%; max-width: var(--hp-grid-max); margin-inline: auto; padding-inline: var(--hp-grid-margin); }
.hp-grid { display: grid; grid-template-columns: repeat(var(--hp-grid-columns), minmax(0, 1fr)); gap: var(--hp-grid-gutter); }
.hp-menu, .hp-card { color: var(--hp-color-text-primary); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-badge--live::before, .hp-rec::before, .hp-toast { animation: none; }
  .hp-btn[aria-busy="true"]::after { animation: none; border-right-color: var(--hp-color-text-on-accent); opacity: 0.6; } /* static ring */
  .hp-btn:active, .hp-pad__btn:active { transform: none; }
}
[data-reduced-motion="true"] .hp-badge--live::before, [data-reduced-motion="true"] .hp-rec::before, [data-reduced-motion="true"] .hp-toast, [data-reduced-motion="true"] .hp-btn[aria-busy="true"]::after { animation: none; }

/* ---------- v2 additions: layering inside tiles, pad ordering ---------- */
.hp-tile__num, .hp-tile__badge, .hp-tile__lamp, .hp-tile__center { z-index: 2; }
.hp-pad__section--primary { order: 3; } .hp-pad__section--hits { order: 2; } .hp-pad__section--runners { order: 1; } .hp-pad__count { order: 0; }
@container (min-width: 640px) { .hp-pad__section--primary, .hp-pad__section--hits, .hp-pad__section--runners { order: 0; } }
.hp-icon-btn-label { display: inline-flex; align-items: center; gap: var(--hp-space-2); }