/* ==========================================================================
   Stage navigator — one navigable home for the 2026 Indiana Workforce Summit.

   Built 2026-09-21. It does NOT replace the scrolling console: /summit still
   reads top to bottom as the leave-behind, and every companion page still
   stands alone at its own path. This adds a fixed bar that steps forward and
   back through all nine views, showing the four companion surfaces in a
   same-origin overlay so nothing on stage depends on changing tabs.

   Layering: masthead is z-index 50, so the overlay sits at 200 and the bar at
   210 — the bar must stay clickable while the overlay is up.
   ========================================================================== */

/* ---------- the bar ---------- */
.stg-bar {
  position: fixed; z-index: 210;
  left: 50%; transform: translateX(-50%);
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  display: flex; align-items: stretch; gap: 2px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  max-width: min(94vw, 820px);
}

.stg-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--color-ink);
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.stg-btn:hover { background: var(--color-purple-10); }
.stg-btn:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; }
.stg-btn[disabled] { opacity: .3; cursor: default; }
.stg-btn[disabled]:hover { background: transparent; }

/* the two arrows */
.stg-arrow {
  width: 44px; min-height: 44px; flex: 0 0 44px;
  font-size: 20px; line-height: 1;
}
.stg-arrow svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* the middle: counter + title, opens the index */
.stg-now {
  flex: 1 1 auto; min-width: 0;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  text-align: left;
  justify-content: flex-start;
}
.stg-count {
  flex: 0 0 auto;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-purple);
  font-variant-numeric: tabular-nums;
}
.stg-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stg-caret { flex: 0 0 auto; opacity: .5; font-size: 10px; }

/* ---------- the index ---------- */
.stg-index[hidden] { display: none; }
.stg-index {
  position: fixed; z-index: 220; inset: 0;
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sp-5);
}
.stg-index-panel {
  width: min(560px, 100%);
  max-height: min(70vh, 640px); overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  margin-bottom: 76px; /* clear the bar */
}
.stg-index-h {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 var(--sp-3) var(--sp-2);
}
.stg-index ol { list-style: none; margin: 0; padding: 0; }
.stg-jump {
  display: flex; align-items: baseline; gap: var(--sp-3); width: 100%;
  text-align: left; padding: var(--sp-3);
  border: 0; border-radius: var(--radius); background: transparent;
  cursor: pointer; font-family: var(--font-ui); color: var(--color-ink);
}
.stg-jump:hover { background: var(--color-purple-10); }
.stg-jump:focus-visible { outline: 3px solid var(--color-purple); outline-offset: -3px; }
.stg-jump[aria-current="true"] { background: var(--color-purple-10); }
.stg-jump[aria-current="true"] .stg-jump-t { font-weight: var(--fw-bold); color: var(--color-purple); }
.stg-jump-n {
  flex: 0 0 1.6em; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: var(--color-purple); font-variant-numeric: tabular-nums;
}
.stg-jump-t { flex: 1 1 auto; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.stg-jump-k {
  flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--color-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}

/* ---------- the overlay that holds a companion surface ---------- */
.stg-stage[hidden] { display: none; }
.stg-stage {
  position: fixed; z-index: 200; inset: 0;
  background: var(--color-bg);
  display: flex; flex-direction: column;
}
.stg-stage-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.stg-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.stg-lockup img.stg-mark { width: 30px; height: 30px; }
.stg-wordmark {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--color-purple); line-height: 1;
}
.stg-stage-title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stg-stage-acts { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.stg-link {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-purple); text-decoration: none;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
}
.stg-link:hover { background: var(--color-purple-10); }
.stg-close { width: 36px; height: 36px; font-size: 18px; }

.stg-frames { flex: 1 1 auto; position: relative; min-height: 0; }
/* ⚠ The iframe stops SHORT of the bottom rather than running under the bar.
   Three of the four surfaces put something at their own bottom edge -- /aim's
   scene caption ("1 of 5 Jobs, pay and openings"), /web's act strip -- and a
   floating pill parked on top of it hides content the presenter is talking
   about. Reserving the strip here shortens the child's viewport instead, which
   every one of these pages already handles, and needs no change to any of them. */
.stg-frames iframe {
  /* ⚠ height must be explicit. An iframe is a REPLACED element, so with
     height:auto an absolutely positioned box takes its intrinsic 150px and
     ignores `bottom` entirely -- the child then renders into a 150px viewport
     and its layout stacks and overflows. Measured the hard way 2026-09-21:
     /aim's chart disappeared and only its controls showed. */
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: calc(100% - 76px);
  border: 0; display: block;
}
.stg-frames iframe[hidden] { display: none; }

.stg-wait {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--color-muted);
  background: var(--color-bg);
}
.stg-wait[hidden] { display: none; }

/* When the overlay is up, stop the console behind it from scrolling. */
body.stg-locked { overflow: hidden; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .stg-title { display: none; }
  .stg-now { padding: 0 var(--sp-3); }
  .stg-stage-title { display: none; }
  .stg-index-panel { margin-bottom: 72px; }
}

/* ---------- print + reduced motion ---------- */
@media print { .stg-bar, .stg-stage, .stg-index { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .stg-btn { transition: none; } }

/* Clearance for the floating bar at the very bottom of the console. Scoped here
   rather than in summit.css on purpose: deal.html also carries .su-body but does
   not load this file, so it keeps its own spacing. */
body.su-body { padding-bottom: 88px; }
@media print { body.su-body { padding-bottom: 0; } }