/* ============================================================================
   reperform-spine.css — Pass 3: step gating, spine nav, export stage
   ----------------------------------------------------------------------------
   Loaded after reperform-rack.css so it can lean on the rack tokens.
   Gating is CSS-only: the spine adds classes, nothing is removed from the DOM.
   ========================================================================== */

/* ---- gating -------------------------------------------------------------- */
/* Hard gate for steps 1-3: the step you are on is the only one open. */
body.rp-spine .rp-spine-future { display: none !important; }

/* Soft gate for steps 4-5: visible and usable, but visibly not yet the focus. */
body.rp-spine .rp-spine-soft {
  opacity: .58;
  filter: saturate(.7);
  transition: opacity .2s, filter .2s;
}
body.rp-spine .rp-spine-soft:hover,
body.rp-spine .rp-spine-soft:focus-within { opacity: .92; filter: none; }

/* Completed steps collapse to their heading, which doubles as a jump-back. */
body.rp-spine .rp-spine-past > *:not(h4) { display: none !important; }
body.rp-spine .rp-spine-past > h4 {
  cursor: pointer;
  margin-bottom: 0;
  opacity: .72;
}
body.rp-spine .rp-spine-past > h4:hover { opacity: 1; }
body.rp-spine .rp-spine-past > h4::after {
  content: "\2713";
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--rk-phos);
  opacity: .8;
}

/* Master stays open on Export - it is the receipt for what is being delivered,
   so it keeps its body and only gains the tick. */
body.rp-spine .rp-spine-past-open > h4 {
  cursor: pointer;
  opacity: .88;
}
body.rp-spine .rp-spine-past-open > h4:hover { opacity: 1; }
body.rp-spine .rp-spine-past-open > h4::after {
  content: "\2713";
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--rk-phos);
  opacity: .8;
}

/* The export stage starts hidden and stays hidden unless the spine says so,
   including on the utility tabs where the spine stands down entirely. */
#rp-export-stage.rp-spine-hidden { display: none !important; }

/* Run furniture belongs to Perform and Master. */
body.rp-spine .rp-spine-hidden { display: none !important; }

/* ---- spine nav bar ------------------------------------------------------- */
body.rp-spine .rp-spine-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.rp-spine .rp-spine-hint {
  flex: 1 1 220px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7d8a9e;
  text-align: center;
}

body.rp-spine .rp-spine-nav .rp-btn { min-width: 132px; }
body.rp-spine .rp-spine-nav .rp-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ---- rail: clickable, with a locked state -------------------------------- */
body.rp-spine .rk-rp-rail .rk-st {
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
body.rp-spine .rk-rp-rail .rk-st:focus-visible {
  outline: 2px solid var(--rk-phos);
  outline-offset: 2px;
}
body.rp-spine .rk-rp-rail .rk-st.locked { opacity: .42; cursor: not-allowed; }
body.rp-spine .rk-rp-rail .rk-st.locked .rk-led { box-shadow: none; }

/* ---- export stage -------------------------------------------------------- */
body.rp-spine #rp-export-stage {
  margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 12px;
  padding: 16px 17px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.rp-spine #rp-export-stage > h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8b98ab;
}

body.rp-spine .rp-export-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

body.rp-spine .rp-export-panel {
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 10px;
  padding: 12px 13px;
  background: rgba(0, 0, 0, .16);
}

body.rp-spine .rp-export-panel > h5 {
  margin: 0 0 9px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c6779;
}

body.rp-spine .rp-export-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.rp-spine .rp-export-item {
  width: 100%;
  text-align: left;
  font-size: 12px;
}

body.rp-spine .rp-export-empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #7d8a9e;
}

body.rp-spine .rp-export-spec {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.rp-spine .rp-export-spec li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: #7d8a9e;
}
body.rp-spine .rp-export-spec b {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--rk-phos);
  font-weight: 700;
}

body.rp-spine #rp-export-stamp {
  display: block;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #6f7c90;
  white-space: pre-wrap;
  word-break: break-word;
}

body.rp-spine .rp-export-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 820px) {
  body.rp-spine .rp-export-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body.rp-spine .rp-spine-nav { padding: 10px 11px; gap: 8px; }
  body.rp-spine .rp-spine-hint { flex: 1 1 100%; order: -1; text-align: left; }
  body.rp-spine .rp-spine-nav .rp-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* On a phone the nav is pinned to the thumb zone. It sits in exactly the slot
   the old #rp-dock occupied, so the reach is the same but the button now means
   "advance the spine" instead of "start the render". position:fixed rather than
   sticky because .reperform-panel sets overflow:hidden, which stops sticky
   dead. The panel reserves the room the bar covers. */
@media (max-width: 820px) {
  body.rp-spine .rp-spine-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--rk-edge);
    border-radius: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(20, 23, 29, .92), rgba(12, 14, 18, .985) 42%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .55), inset 0 1px 0 var(--rk-hi);
  }
  body.rp-spine #panel-reperform { padding-bottom: 124px; }
}

/* The phone shell builds its own scroll-spy step rail. Once the spine owns
   step state that rail would contradict it, so the spine's nav takes over. */
body.rp-spine .rp-steprail { display: none !important; }

/* On a phone the fixed thumb-zone dock sits on top of the spine nav, and its
   primary button is the module's own start button - which stops meaning
   anything once the spine has carried the user past Perform. The spine nav is
   the call to action now, so the dock stands down and the panel gets the
   bottom room the dock used to reserve. */
@media (max-width: 820px) {
  body.rp-spine.rp-on .rp-dock { display: none !important; }
  /* Reserve the room the pinned spine nav covers. This selector is the most
     specific one that touches the panel's bottom padding, so it has to carry
     the full height of the bar (106px) plus breathing room. */
  body.rp-spine.rp-on #panel-reperform { padding-bottom: 124px; }
}