/* Avakode Hub — the stage of a full scene, the part COMMON to every scene (lane 1.0b, plan §3, §5): the stage, the rail of
   beats, the caption with Replay, the «sample data» label and the parts every scene may use (.sc-head, .sc-panel).
   Loaded on a family page only when that page has a stage. What belongs to one scene — its columns, rows, letter, stamp —
   is assets/css/scenes/<scene>.css: queued by inc/scenes.php for every scene that has a stage on the page, when the file
   exists. Scene lanes add THEIR file and do not touch this one.
   A scene writes the markup of its FINAL frame: CSS shows every part as at the end of beat 3, the timeline hides what has
   not happened yet (so ?static=1 and reduced motion need no rules of their own beyond switching transitions off). GSAP
   moves transform and opacity only; the few CSS transitions do the same, on var(--ease). No shadows, no glass: depth is
   hairlines and the --bg-2 panels. */

.hub-scene {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); margin: 0;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--fg); font: 400 13.5px/1.45 var(--mono);
  container-type: inline-size;
}
/* before the module arrives: the height the scene will take, so nothing below it jumps. The scene sets its real heights in
   its own css (assets/css/scenes/<id>.css): --stage-h for the wide layout, --stage-h-narrow for the window <= 720px.
   The numbers here are only the fallback of a scene that sets none. */
.hub-scene[data-state="idle"],
.hub-scene[data-state="loading"] { min-height: var(--stage-h, 546px); }
/* nothing to show without scripts or when the module failed */
html:not(.hub-js) .hub-scene,
.hub-scene[data-state="error"] { display: none; }

.sc-rail { display: flex; flex-direction: column; gap: 4px; padding: 18px 8px 18px 8px; border-right: 1px solid var(--line); }
.sc-beat {
  position: relative; display: block; width: 100%; padding: 8px 6px 8px 12px; margin: 0;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer; text-align: left;
  font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.sc-beat i { display: block; margin-bottom: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.sc-beat::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--signal);
  opacity: 0; transform: scaleY(.3); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sc-beat[aria-pressed="true"],
.sc-beat[aria-pressed="true"] i { color: var(--signal-hot); }
.sc-beat[aria-pressed="true"]::before { opacity: 1; transform: none; }
.sc-beat:hover:not(:disabled) { color: var(--fg); }
.sc-beat:disabled { cursor: default; }

.sc-stage { position: relative; min-height: 500px; padding: 22px 22px 18px; overflow: hidden; }
.sc-foot {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 18px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
}
.sc-replay {
  margin: 0; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fg);
}
.sc-replay:hover { border-color: var(--signal); color: var(--signal-hot); }
.sc-replay[hidden] { display: none; }

/* parts every scene may use: .sc-head, .sc-sample, .sc-panel, .sc-stamp (the stamp of the proof frame; it sits on the top
   right corner of the nearest positioned panel, a scene may move it) */
.sc-head {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.sc-sample { color: var(--muted); }
.sc-panel { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); }
.sc-stamp {
  position: absolute; right: 14px; top: -14px; padding: 5px 10px;
  border: 1.5px solid var(--signal); border-radius: 6px; background: var(--bg);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-hot);
  transform: rotate(-4deg);
}

html.hub-static .sc-beat::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-beat::before { transition: none; }
}

@media (max-width: 720px) {
  .hub-scene { grid-template-columns: minmax(0, 1fr); font-size: 11.5px; }
  .hub-scene[data-state="idle"],
  .hub-scene[data-state="loading"] { min-height: var(--stage-h-narrow, 672px); }
  .sc-rail { flex-direction: row; gap: 2px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sc-beat { width: auto; flex: 1 1 0; padding: 8px 6px 8px 10px; }
  .sc-beat i { display: inline; margin: 0 4px 0 0; }
  .sc-stage { min-height: 0; padding: 16px; }
  .sc-foot { padding: 8px 12px; }
}