/* Hapster Factory lab: page layout, stage chrome, transport, controls, inspector, story overlay and legends.
   Components and tokens come from hapster-theme.css. White cards on the signature wash. */

body.hf-body { background: #eaf0e9; }
/* The wash is painted once on a fixed layer so a long page does not stretch the gradient. */
body.hf-body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--hap-wash); pointer-events: none; }

/* ── Header ── */
.hf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 24px;
  background: var(--hap-paper);
  box-shadow: var(--sh-1);
  position: relative;
  z-index: 10;
}
.hf-header-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hf-logo { width: auto; height: 28px; }
.hf-readout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--hap-paper-3);
  font-size: 13px;
  color: var(--hap-ink-soft);
  white-space: nowrap;
}
.hf-readout .hf-num { color: var(--hap-ink); }
.hf-readout-sep { color: var(--hap-teal-200); }
.hf-readout-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hap-steel); box-shadow: 0 0 0 3px rgba(85,155,180,.2); }
.hf-readout-captured .hf-num { display: inline-block; border-radius: 6px; transition: background-color var(--dur-slow) var(--ease-out); }
.hf-readout-captured.is-ticked .hf-num { animation: hf-tick .9s var(--ease-out); }
@keyframes hf-tick { 0% { background: var(--hap-gold-300); box-shadow: 0 0 0 3px var(--hap-gold-300); } 100% { background: transparent; box-shadow: 0 0 0 3px transparent; } }

/* ── Page ── */
.hf-main { max-width: 1680px; margin: 0 auto; padding: 20px 24px 32px; }
.hf-heading { display: grid; gap: 6px; margin: 4px 0 18px; }
/* Desktop: title and subtitle share one row so the stage gets the height. */
@media (min-width: 1000px) {
  .hf-heading { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 24px; row-gap: 2px; margin: 0 0 14px; }
  .hf-heading .hf-eyebrow { grid-column: 1 / -1; }
  .hf-subtitle { justify-self: end; text-align: right; }
}
.hf-heading h1 { font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--hap-teal-900); text-wrap: balance; }
.hf-subtitle { font-size: 15px; color: var(--hap-ink-soft); max-width: 60ch; }

.hf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: 'stage side' 'controls side' 'legends side';
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  align-items: start;
}
.hf-stage-card { grid-area: stage; }
.hf-side { grid-area: side; position: sticky; top: 16px; min-width: 0; }
.hf-controls { grid-area: controls; }
.hf-legends { grid-area: legends; }

/* ── Stage card ── */
.hf-stage-card { position: relative; display: flex; flex-direction: column; box-shadow: var(--sh-2); container: stage-card / inline-size; }
.hf-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 10px 20px 10px; }
.hf-topline-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.hf-scene-meta { font-size: 12px; font-weight: 600; color: var(--hap-ink-mute); font-variant-numeric: tabular-nums; }
.hf-hint { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--hap-gold-100); color: var(--hap-gold-text); font-size: 12px; font-weight: 600; }
.hf-hint svg { width: 14px; height: 14px; color: var(--hap-gold-600); }
.hf-hint-touch { display: none; }
@media (pointer: coarse) { .hf-hint-pointer { display: none; } .hf-hint-touch { display: inline; } }

.hf-viewport {
  position: relative;
  height: clamp(420px, calc(100vh - 352px), 900px);
  margin: 0 12px;
  border-radius: 16px;
  background: var(--hap-wash);
  overflow: hidden;
  isolation: isolate;
}
.hf-viewport:fullscreen { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
.hf-viewport:-webkit-full-screen { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }

.hf-stage { position: absolute; inset: 0; margin: auto; overflow: hidden; contain: layout paint; }
.hf-stage[data-aspect="vertical"] {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  box-shadow: 0 0 0 1px rgba(48,114,137,.22), var(--sh-3);
}
/* Registration marks frame the vertical export; DOM only, never recorded. */
.hf-stage[data-aspect="vertical"]::before,
.hf-stage[data-aspect="vertical"]::after {
  content: '';
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border: 0 solid var(--hap-teal-400);
}
.hf-stage[data-aspect="vertical"]::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-top-left-radius: 4px; }
.hf-stage[data-aspect="vertical"]::after { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-bottom-right-radius: 4px; }

/* Engine-owned canvas (class set by the shared canvas module). */
.iso-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); touch-action: pan-y; }
.hf-stage.is-ready .iso-canvas { opacity: 1; }
.iso-canvas.is-pickable { cursor: pointer; }
.iso-canvas.is-explore { cursor: grab; touch-action: none; }
.iso-canvas.is-explore:active { cursor: grabbing; }
.iso-canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(48,114,137,.55), inset 0 0 0 6px rgba(255,192,69,.35); }

/* Overlays */
.hf-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,.35) 72%), var(--hap-wash);
}
.hf-overlay h2 { font-size: 22px; max-width: 26ch; color: var(--hap-teal-900); }
.hf-overlay-text { max-width: 44ch; font-size: 14px; color: var(--hap-ink-soft); }
.hf-overlay-reason { max-width: 52ch; font-size: 12px; color: var(--hap-ink-mute); overflow-wrap: anywhere; }
.hf-overlay-reason:empty { display: none; }
.hf-error .hf-overlay-reason { color: var(--hap-error); }
.hf-overlay .hf-btn { margin-top: 6px; }
.hf-overlay-mark { width: 30px; height: auto; margin-bottom: 4px; }
.hf-loading { transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow); }
.hf-loading.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.hf-loader { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background: var(--hap-paper); box-shadow: var(--sh-2); }
.hf-loader img { width: 28px; height: auto; }
.hf-loader::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--hap-teal-400) 75%, var(--hap-gold-500) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: hf-spin 1.1s linear infinite;
}
@keyframes hf-spin { to { transform: rotate(1turn); } }

.hf-perf {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 600;
  color: var(--hap-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.hf-stage[data-aspect="vertical"] .hf-perf { top: 30px; }

.hf-rec-chip {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--hap-teal-800);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  pointer-events: none;
}
.hf-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hap-gold-500); animation: hf-blink 1s steps(1, end) infinite; }
.hf-rec-bar { position: relative; width: 64px; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); overflow: hidden; }
.hf-rec-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--hap-gold-500); transform: scaleX(0); transform-origin: 0 50%; }

/* Zone labels (created by the engine zone-labels module): eyebrow chips anchored over zones. */
.iso-zone-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.iso-zone-labels[hidden] { display: none !important; }
.iso-zone-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.84);
  box-shadow: var(--sh-1);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hap-ink-soft);
  will-change: transform;
  transition: opacity var(--dur) var(--ease-out);
}
.iso-zone-label::before { content: ''; width: 3px; height: 9px; border-radius: 2px; background: var(--hap-gold-500); }
/* overlay-declutter.js places each tag with an inline `translate` (composed with the engine's centring transform) and
   hides tags that fall outside the stage or under a story chip or a higher-priority pin. */
.iso-zone-label { opacity: 0; }
.iso-zone-label.is-placed:not(.is-cluttered) { opacity: 1; }

/* ── Story overlay: machine-anchored chips (positions written by story-overlay.js) ── */
.hf-story-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hf-story-chip { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
/* Leader from a parked chip's pointer to the action it describes, ending in a dot (story-overlay.js). */
.hf-story-leader {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: var(--hap-teal-400);
  color: var(--hap-teal-400);
  transform-origin: 0 50%;
  pointer-events: none;
}
.hf-story-leader[hidden] { display: none; }
.hf-story-leader::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--hap-paper);
}
.hf-story-leader[data-kind="captured"] { background: var(--hap-gold-600); color: var(--hap-gold-600); }
.hf-story-leader[data-kind="validation"] { background: var(--hap-teal-500); color: var(--hap-teal-500); }
.hf-story-chip-body {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-pill);
  background: var(--hap-paper);
  box-shadow: var(--sh-3);
  max-width: 300px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--hap-ink);
  transform: translate(-50%, calc(-100% - 12px));
  transform-origin: 50% 100%;
}
.hf-story-chip-body::after {
  content: '';
  position: absolute;
  left: clamp(18px, calc(50% + var(--tip, 0px)), calc(100% - 18px));
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 2px 0;
}
.hf-story-chip-text { display: inline; }
.hf-story-chip-text span:not([hidden])::before { content: ' · '; }
.hf-story-chip-text span { font-weight: 500; }
.hf-story-chip.is-entering .hf-story-chip-body { animation: hf-chip-in var(--dur-slow) var(--ease-spring); }
@keyframes hf-chip-in { from { transform: translate(-50%, calc(-100% - 6px)) scale(.6); } }
.hf-story-icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hap-paper-3); }
.hf-story-icon img { width: 12px; height: auto; }
.hf-story-icon svg { width: 12px; height: 12px; }
.hf-story-chip[data-kind="capture"] .hf-story-icon { background: #fbe9e1; }
.hf-story-chip[data-kind="capture"] .hf-story-icon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hap-error); animation: hf-blink 1s steps(1, end) infinite; }
.hf-story-chip[data-kind="captured"] .hf-story-chip-body { background: var(--hap-gold-100); box-shadow: 0 0 0 2px var(--hap-gold-500), var(--glow-gold); }
.hf-story-chip[data-kind="captured"] .hf-story-icon { background: var(--hap-paper); }
.hf-story-chip[data-kind="practice"] .hf-story-icon { background: var(--hap-sage-tint); color: var(--hap-sage-dark); }
.hf-story-chip[data-kind="validation"] .hf-story-chip-body { background: var(--hap-teal-500); color: #fff; }
.hf-story-chip[data-kind="validation"] .hf-story-icon { background: rgba(255,255,255,.18); color: #fff; }

/* Keyboard machine list: out of sight until it holds focus, then it floats over the stage. */
.hf-machines:not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hf-machines:focus-within {
  position: absolute;
  top: 60px;
  left: 24px;
  z-index: 8;
  width: min(320px, calc(100% - 48px));
  max-height: min(60%, 520px);
  overflow: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--hap-paper);
  box-shadow: var(--sh-3);
}
.hf-machines-title { padding: 6px 10px 2px; }
.hf-machines-hint { padding: 0 10px 8px; font-size: 11.5px; line-height: 1.5; color: var(--hap-ink-mute); }
.hf-machines-hint kbd { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px; font: inherit; font-weight: 600; text-align: center; color: var(--hap-ink-soft); background: var(--hap-paper-3); box-shadow: inset 0 -1px 0 var(--hap-line); }
.hf-machines ul { list-style: none; display: grid; gap: 2px; }
.hf-machine-btn {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 6px 10px;
  border-radius: var(--r-dense);
  text-align: left;
}
.hf-machine-btn:hover { background: var(--hap-paper-3); }
.hf-machine-btn[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--hap-teal-500); }
.hf-machine-btn:focus-visible { box-shadow: var(--focus-ring); }
.hf-machine-btn .hf-dot { grid-row: span 2; width: 10px; height: 10px; }
.hf-machine-name { font-size: 13px; font-weight: 600; }
.hf-machine-sub { grid-column: 2; font-size: 11.5px; color: var(--hap-ink-mute); }

/* ── Caption strip ── */
.hf-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  min-height: 72px;
  padding: 12px 20px;
}
.hf-caption.is-hidden { visibility: hidden; }
.hf-caption-text { order: -1; flex: 1 1 320px; min-width: 0; }
.hf-caption-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--hap-teal-900); }
.hf-caption-body { margin-top: 2px; font-size: 13px; color: var(--hap-ink-soft); }
.hf-caption-body:empty { display: none; }
.hf-caption.is-changed .hf-caption-text { animation: hf-caption-in var(--dur) var(--ease-out); }
@keyframes hf-caption-in { from { opacity: 0; transform: translateY(4px); } }
.hf-beats { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.hf-beats li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--hap-paper-3);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hap-ink-mute);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.hf-beats li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hap-meter-empty); transition: background-color var(--dur) var(--ease-out); }
.hf-beats li.is-done { color: var(--hap-teal-600); }
.hf-beats li.is-done::before { background: var(--hap-teal-300); }
.hf-beats li.is-active { background: var(--hap-gold-100); color: var(--hap-gold-text); }
.hf-beats li.is-active::before { background: var(--hap-gold-500); }

/* Narrower stage cards: only the active beat keeps its label; the others collapse to dots. */
@container stage-card (max-width: 900px) {
  .hf-scene-meta { display: none; }
  .hf-beats li:not(.is-active) { width: 24px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}

/* ── Transport ── */
.hf-transport {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--hap-line-soft);
  min-width: 0;
}
.hf-play .hf-icon-pause { display: none; }
.hf-play[aria-pressed="true"] .hf-icon-pause { display: block; }
.hf-play[aria-pressed="true"] .hf-icon-play { display: none; }
.hf-play:disabled { opacity: .45; }
.hf-scrub { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.hf-timecode { font-size: 13px; color: var(--hap-ink); white-space: nowrap; }
.hf-timecode-total { color: var(--hap-ink-mute); font-weight: 600; font-variant-numeric: tabular-nums; }

.hf-scrubber {
  --iso-progress: 0%;
  flex: 1;
  min-width: 80px;
  height: var(--tap);
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: var(--r-pill);
}
.hf-scrubber:disabled { cursor: not-allowed; opacity: .55; }
.hf-scrubber::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--hap-teal-500) var(--iso-progress), var(--hap-teal-100) var(--iso-progress));
}
.hf-scrubber::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--hap-teal-100); }
.hf-scrubber::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--hap-teal-500); }
.hf-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 3px solid var(--hap-teal-500);
  border-radius: 50%;
  background: var(--hap-paper);
  box-shadow: var(--sh-2);
}
.hf-scrubber::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--hap-teal-500); border-radius: 50%; background: var(--hap-paper); }
.hf-scrubber:focus-visible { box-shadow: none; }
.hf-scrubber:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.hf-scrubber:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

.hf-switch--compact { width: auto; gap: 8px; padding: 0 6px; }
.hf-speed .hf-toggle span { min-width: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }

/* ── Controls card ── */
.hf-controls { container-type: inline-size; padding: 20px; }
.hf-controls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hf-control-group { display: grid; align-content: start; gap: 10px; min-width: 0; }
.hf-control-group fieldset { display: grid; gap: 8px; }
.hf-control-look { gap: 14px; }
.hf-control-title { padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hap-ink-mute); line-height: 1.3; }
.hf-toggle--wide { display: grid; width: 100%; }
.hf-note { font-size: 12px; line-height: 1.5; color: var(--hap-ink-mute); }
.hf-switch-list { display: grid; }
.hf-switch-list .hf-switch + .hf-switch { border-top: 1px solid var(--hap-line-soft); border-radius: 0; }
.hf-capture-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hf-capture-row .hf-btn { padding: 0 14px; }
.hf-record-row { display: grid; gap: 8px; }
.hf-record { gap: 10px; }
.hf-record-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--hap-error); flex: none; }
.hf-record.is-recording { background: var(--hap-teal-800); color: #fff; }
.hf-record.is-recording .hf-record-mark { border-radius: 2px; background: var(--hap-gold-500); }
.hf-status-line { font-size: 12.5px; color: var(--hap-ink); overflow-wrap: anywhere; }
.hf-status-line:empty { display: none; }
.hf-status-line.is-error { color: var(--hap-error); }

@container (min-width: 520px) {
  .hf-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .hf-control-capture { grid-column: 1 / -1; }
}
@container (min-width: 900px) {
  .hf-controls-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .hf-control-capture {
    grid-column: 1 / -1;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--hap-line-soft);
  }
  .hf-control-capture .hf-control-title { grid-column: 1; }
  .hf-record-row { grid-template-columns: minmax(180px, 220px) auto; justify-content: end; }
  .hf-control-capture .hf-status-line, .hf-control-capture .hf-note { grid-column: 1 / -1; }
}

/* ── Inspector ── */
.hf-inspector {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.hf-inspector-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 36px;
  text-align: center;
}
.hf-inspector-empty > img { width: 32px; height: auto; }
.hf-inspector-empty p { max-width: 24ch; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--hap-ink-soft); }
.hf-empty-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--hap-sidebar); }
.hf-empty-mark img { width: 32px; height: auto; }
.hf-ghost { display: grid; gap: 10px; width: 100%; max-width: 250px; margin-top: 12px; }
.hf-ghost span { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-dense); background: var(--hap-paper-3); }
.hf-ghost span::after { content: ''; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--hap-teal-200) var(--w, 60%), var(--hap-meter-empty) var(--w, 60%)); }
.hf-ghost .hf-pie path.is-on { fill: var(--hap-teal-200); }

.hf-insp-view { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: hf-insp-in var(--dur-slow) var(--ease-spring); }
@keyframes hf-insp-in { from { opacity: 0; transform: translateY(8px); } }
.hf-insp-view.is-handover { animation: none; }
.hf-sheet-handle { display: none; }
.hf-insp-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 0 20px; }
.hf-insp-head > img { width: 17px; height: 20px; flex: none; }
.hf-insp-head .hf-eyebrow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-insp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 20px 20px;
  scrollbar-width: thin;
  /* Content scrolling under the fixed card header fades instead of being cut. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%);
}
.hf-insp-title { display: grid; justify-items: start; gap: 8px; margin-bottom: 16px; }
.hf-insp-title h2 { font-size: 1.35rem; color: var(--hap-teal-900); scroll-margin-top: 12px; }
/* The title takes focus programmatically so screen readers land on it; it is not a control, so no ring. */
.hf-insp-title h2:focus, .hf-insp-title h2:focus-visible { box-shadow: none; }

.hf-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin-bottom: 16px; font-size: 13px; }
.hf-meta dt { color: var(--hap-ink-mute); }
.hf-meta dd { color: var(--hap-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hf-meta dd .hf-chip { margin-top: 4px; min-height: 22px; padding: 0 8px; font-size: 11.5px; }
.hf-mono-id { font-weight: 600; letter-spacing: .02em; }

.hf-ready { display: grid; gap: 10px; margin-bottom: 18px; padding: 16px; border-radius: 16px; background: var(--hap-paper-3); }
.hf-ready-top { display: flex; align-items: center; gap: 12px; }
.hf-ready-big { flex: none; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--hap-teal-900); font-variant-numeric: tabular-nums; }
.hf-ready-big small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--hap-ink-mute); }
.hf-ready-caption { font-size: 12.5px; line-height: 1.35; color: var(--hap-ink-soft); }
.hf-ready-tree { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--hap-ink-soft); }
.hf-ready-tree svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--hap-steel); }
.hf-ready-tree:empty { display: none; }
.hf-ready.is-gap .hf-ready-big { color: var(--hap-error); }
.hf-ready.is-changed .hf-ready-big { animation: hf-pop var(--dur-slow) var(--ease-spring); }
@keyframes hf-pop { 40% { transform: scale(1.12); color: var(--hap-teal-500); } }

/* Stacked level bar: 5 segments + a tick at the Autonomous boundary */
.hf-levelbar { position: relative; flex: 1; min-width: 0; height: 8px; }
.hf-levelbar-track { display: flex; height: 100%; border-radius: var(--r-pill); overflow: hidden; background: var(--lvl-0); gap: 1px; }
.hf-levelbar-track i { display: block; flex: 0 0 auto; min-width: 0; transition: flex-grow var(--dur-slow) var(--ease-out); }
.hf-levelbar-track i[data-level="0"] { background: var(--lvl-0); }
.hf-levelbar-track i[data-level="1"] { background: var(--lvl-1); }
.hf-levelbar-track i[data-level="2"] { background: var(--lvl-2); }
.hf-levelbar-track i[data-level="3"] { background: var(--lvl-3); }
.hf-levelbar-track i[data-level="4"] { background: var(--lvl-4); }
.hf-levelbar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--hap-ink); box-shadow: 0 0 0 1.5px var(--hap-paper); transition: left var(--dur-slow) var(--ease-out); }
.hf-levelbar--lg { height: 10px; }

/* Tabs */
.hf-tabs { display: flex; gap: 20px; margin: 0 0 12px; border-bottom: 1px solid var(--hap-line); }
.hf-tab { position: relative; min-height: 35px; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--hap-ink-mute); border-radius: 6px 6px 0 0; }
.hf-tab:hover { color: var(--hap-ink); }
.hf-tab[aria-selected="true"] { color: var(--hap-ink); }
.hf-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--hap-teal-500); }
.hf-tab .hf-num { color: var(--hap-ink-mute); font-weight: 600; }

/* Skill rows */
.hf-skill-list { list-style: none; display: grid; gap: 8px; }
.hf-skill { border-radius: var(--r-dense); background: var(--hap-paper); box-shadow: inset 0 0 0 1px var(--hap-line); transition: box-shadow var(--dur) var(--ease-out); }
.hf-skill:hover, .hf-skill.is-open { box-shadow: inset 0 0 0 2px var(--hap-teal-500); }
.hf-skill-head { display: grid; gap: 6px; width: 100%; min-height: 56px; padding: 11px 12px 12px 14px; text-align: left; border-radius: var(--r-dense); }
.hf-skill-head:focus-visible { box-shadow: var(--focus-ring); }
.hf-skill-line1 { display: flex; align-items: flex-start; gap: 8px; }
.hf-skill-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--hap-ink); }
.hf-skill-line1 .hf-chip--type { margin-top: 1px; }
.hf-chevron { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--hap-grey-icon); transition: transform var(--dur) var(--ease-out); }
.is-open .hf-chevron { transform: rotate(180deg); }
.hf-skill-line2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--hap-ink-soft); font-variant-numeric: tabular-nums; }
.hf-kp-dots { display: inline-flex; gap: 3px; }
.hf-skill-line3 { display: flex; align-items: center; gap: 10px; min-height: 16px; font-size: 12.5px; }
.hf-skill-count { flex: none; min-width: 30px; text-align: right; font-weight: 600; color: var(--hap-ink); font-variant-numeric: tabular-nums; }
.hf-skill-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--hap-gold-text); }
.hf-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--hap-error); box-shadow: 0 0 0 3px rgba(162,58,0,.16); animation: hf-breathe 1s ease-in-out infinite; }

.hf-skill[data-state="capturing"] { background: linear-gradient(180deg, var(--hap-gold-100), var(--hap-paper) 70%); box-shadow: inset 0 0 0 2px var(--hap-gold-500); }
.hf-skill[data-state="capturing"]:hover, .hf-skill[data-state="capturing"].is-open { box-shadow: inset 0 0 0 2px var(--hap-gold-600); }
.hf-skill[data-state="pending"] { background: var(--hap-paper-3); box-shadow: inset 0 0 0 1px var(--hap-line); }
.hf-skill[data-state="pending"]:hover { box-shadow: inset 0 0 0 1px var(--hap-outline); }
.hf-skill[data-state="pending"] .hf-skill-head { cursor: default; }
.hf-skill[data-state="pending"] .hf-skill-name { color: var(--hap-ink-soft); }
.hf-pending-note { display: inline-flex; align-items: center; gap: 8px; color: var(--hap-ink-mute); }
.hf-pending-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--hap-grey-icon); }

.hf-skill-details { display: grid; gap: 12px; padding: 2px 14px 14px; font-size: 12.5px; color: var(--hap-ink-soft); }
.hf-skill-details[hidden] { display: none; }
.hf-detail-lines { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--hap-line-soft); }
.hf-detail-lines b { font-weight: 600; color: var(--hap-ink); }
.hf-formats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hf-formats .hf-chip { min-height: 22px; font-size: 11.5px; }
.hf-steps { list-style: none; display: grid; gap: 10px; counter-reset: step; }
.hf-step { display: grid; gap: 6px; }
.hf-step-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hap-ink); }
.hf-step-name::before { counter-increment: step; content: counter(step); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--hap-teal-100); color: var(--hap-teal-700); font-size: 11px; font-weight: 700; }
.hf-kps { list-style: none; display: grid; gap: 6px; padding-left: 28px; }
.hf-kp-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.hf-kp-item .hf-chip { justify-content: center; width: 34px; min-height: 20px; padding: 0; gap: 4px; font-size: 11px; }
.hf-tabpanel:focus-visible { border-radius: var(--r-dense); }
.hf-kp-item .hf-dot { width: 6px; height: 6px; }
.hf-kp-name { font-weight: 600; color: var(--hap-ink); line-height: 1.35; }
.hf-kp-reason { grid-column: 2; color: var(--hap-ink-soft); line-height: 1.4; }

.hf-level-legend { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hap-line-soft); font-size: 12px; color: var(--hap-ink-soft); }
.hf-level-legend li { display: flex; align-items: center; gap: 8px; }
.hf-level-legend .hf-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Machine tab */
.hf-machine-tab { display: grid; gap: 16px; font-size: 13px; }
.hf-machine-tab p { color: var(--hap-ink-soft); line-height: 1.55; }
.hf-machine-tab h3 { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--hap-ink); }
.hf-prereq { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hf-prereq .hf-chip { min-height: 26px; white-space: normal; }
.hf-status-meaning { list-style: none; display: grid; gap: 8px; }
.hf-status-meaning li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--hap-ink-soft); }
.hf-status-meaning li .hf-dot { width: 10px; height: 10px; transform: translateY(1px); }
.hf-status-meaning li.is-current { color: var(--hap-ink); font-weight: 600; }

/* Footer actions */
.hf-insp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hap-line-soft); }
.hf-insp-actions .hf-btn { flex: 1 1 140px; padding: 0 14px; font-size: 13.5px; }
.hf-helper { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--hap-ink-mute); }
.hf-helper svg { width: 13px; height: 13px; color: var(--hap-grey-icon); }

/* ── Legends ── */
.hf-legends { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.hf-legend { padding: 16px 18px 18px; box-shadow: var(--sh-1); }
.hf-legend-list { list-style: none; display: grid; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--hap-ink); }
.hf-legend-list li { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.hf-legend-list small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--hap-ink-mute); }
.hf-lamp { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.hf-legend-levels .hf-num { width: 10px; color: var(--hap-ink-mute); }
.hf-person { width: 20px; height: 24px; flex: none; }
.hf-legend-kp .hf-chip { min-width: 40px; justify-content: center; }

/* ── Footer ── */
.hf-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 16px 24px;
  background: var(--hap-paper);
  font-size: 12px;
  color: var(--hap-ink-mute);
}
.hf-footer p:last-child { font-weight: 600; }

/* ── Responsive ── */
@media (min-width: 1000px) and (max-height: 820px) {
  .hf-main { padding-top: 14px; }
  .hf-heading { gap: 2px; margin: 0 0 12px; }
  .hf-heading h1 { font-size: 1.5rem; }
  .hf-subtitle { font-size: 14px; }
  .hf-viewport { height: clamp(340px, calc(100vh - 350px), 860px); }
  .hf-caption { min-height: 60px; padding-block: 8px; }
  .hf-transport { padding-block: 8px 10px; }
}

@media (max-width: 1199px) {
  .hf-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .hf-main { padding-inline: 16px; }
}

@media (max-width: 999px) {
  .hf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'stage stage' 'side controls' 'legends legends'; grid-template-rows: none; }
  .hf-side { position: static; }
  .hf-inspector { max-height: 720px; }
  .hf-viewport { height: clamp(380px, 62vw, 640px); }
  .hf-legends { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .hf-controls { padding: 16px; }
  .hf-header { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px 10px; }
  .hf-logo { height: 26px; }
  .hf-readout { order: 2; width: 100%; justify-content: center; gap: 2px 5px; font-size: 11px; padding: 5px 10px; letter-spacing: -0.01em; }
  .hf-readout-live { display: none; }
  .hf-main { padding: 16px 16px 28px; }
  .hf-heading { margin-bottom: 14px; }
  .hf-subtitle { font-size: 14px; }
  .hf-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'stage' 'controls' 'legends' 'side'; gap: 12px; }
  .hf-topline { padding: 12px 14px 10px; }
  .hf-scene-meta { display: none; }
  .hf-hint { min-height: 28px; }
  /* Phones: a vertical 9:16 stage across the card width. */
  .hf-viewport { height: auto; aspect-ratio: 9 / 16; max-height: 86svh; margin: 0 8px; border-radius: 14px; }
  .hf-stage, .hf-stage[data-aspect] { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
  .hf-stage[data-aspect]::before, .hf-stage[data-aspect]::after { display: none; }
  .hf-story-chip-body { max-width: 240px; white-space: normal; border-radius: 16px; padding: 6px 12px 6px 6px; font-size: 12px; }
  .hf-caption { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding: 12px 14px 10px; }
  .hf-caption-text { order: 0; flex: none; }
  .hf-caption-title { font-size: 15px; }
  .hf-beats { order: -1; flex-wrap: nowrap; gap: 3px; }
  .hf-beats li { flex: 1; min-width: 0; min-height: 4px; height: 4px; padding: 0; font-size: 0; background: var(--hap-meter-empty); }
  .hf-beats li::before { display: none; }
  .hf-beats li.is-done { background: var(--hap-teal-300); }
  .hf-beats li.is-active { background: var(--hap-gold-500); }
  .hf-transport { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px 12px; }
  .hf-switch--compact { padding: 0 2px; gap: 6px; }
  .hf-speed .hf-toggle { padding: 3px; }
  .hf-speed .hf-toggle span { min-width: 42px; padding: 0 2px; }
  .hf-scrub { order: -1; flex-basis: 100%; }
  .hf-speed { margin-left: auto; }
  .hf-legends { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hf-footer { padding: 14px 16px; }

  /* Inspector becomes a bottom sheet over the lower 60% of the screen. */
  .hf-side { position: static; min-height: 0; }
  .hf-inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -40px;
    z-index: 40;
    height: calc(60vh + 40px);
    height: calc(60dvh + 40px);
    min-height: 0;
    max-height: none;
    padding-bottom: 40px;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(19,46,55,.18);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .hf-inspector[data-state="machine"] { transform: translateY(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-spring), visibility 0s; }
  /* skills-inspector.js marks the page while the sheet is open: the page behind it stops scrolling. */
  .hf-sheet-open, .hf-sheet-open body { overflow: hidden; }
  .hf-inspector[data-state="empty"] .hf-inspector-empty { display: none; }
  .hf-sheet-handle { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--r-pill); background: var(--hap-outline); flex: none; }
  .hf-insp-head { padding: 4px 8px 0 16px; }
  .hf-insp-body { padding: 8px 16px 16px; }
  .hf-tab { min-height: var(--tap); }
}

@media (pointer: coarse) {
  .hf-tab { min-height: var(--tap); }
  .hf-toggle span { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-inspector, .hf-inspector[data-state="machine"] { transition: none; }
}

/* ── Hover tooltip (hover-tooltip.js): machine name and live status, follows the pointer ── */
.hf-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  max-width: 240px;
  padding: 8px 12px 9px;
  border-radius: var(--r-dense);
  background: var(--hap-paper);
  box-shadow: var(--sh-3);
  pointer-events: none;
  will-change: transform;
}
.hf-tooltip[hidden] { display: none; }
.hf-tooltip-name { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--hap-ink); }
.hf-tooltip-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }