/* ================================================================
   ORION Observatory — Gravity Well (Mock Interview)
   ================================================================ */

#view-gravity-well .gravity-score-value,
#view-gravity-well .metric-row__value,
#view-gravity-well .gravity-history b,
#view-gravity-well .gravity-timer {
  font-family: var(--f-mono);
}

#view-gravity-well .gravity-voice-action {
  min-width: 44px;
}

.gravity-setup__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gravity-setup__head h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 10px;
  max-width: 24ch;
}

/* Live-interview / follow-up prompt text — body copy, not a display headline.
   No 24ch clamp: that width was authored for the 38px setup headline and
   produced a 225px-tall, 232.65px-wide text column when reused here (F2). */
.gravity-live__prompt {
  margin-top: 10px;
  max-width: 65ch;
}

.gravity-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}

.gravity-setup-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gravity-setup-grid label span {
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gravity-prompt {
  border: 1px solid var(--hair2);
  border-radius: 16px;
  background: rgba(255,255,255,0.026);
  padding: 18px;
  margin-bottom: 16px;
}

.gravity-prompt span {
  color: var(--muted);
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.gravity-prompt strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
}

.gravity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.gravity-live {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.gravity-score {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px) {
  .gravity-live {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #view-gravity-well .section-heading {
    margin-bottom: 16px;
  }

  #view-gravity-well .section-heading__secondary {
    display: none;
  }

  #view-gravity-well .section-heading__copy {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    margin-top: 8px;
    overflow: hidden;
  }

  #view-gravity-well .gravity-setup__head {
    margin-bottom: 12px;
  }

  #view-gravity-well .gravity-setup__head h2 {
    font-size: var(--fs-lg);
    line-height: 1.1;
    margin-top: 6px;
    max-width: none;
  }

  #view-gravity-well .gravity-setup__head .orion-chip {
    display: none;
  }

  #view-gravity-well .orion-action,
  #view-gravity-well .gravity-step,
  #view-gravity-well .gravity-setup-grid .orion-input {
    min-height: 44px;
  }

  #view-gravity-well .gravity-mode-toggle .orion-action {
    min-width: 44px;
  }

  #view-gravity-well .gravity-voice-action {
    min-width: 44px;
  }
}

/* ── Phase C / mobile rule 3: Gravity Well (live) is a focus mode ──
   A live round (or its follow-up question) hides the 5-tab bottom nav
   entirely instead of sharing space with it, and Submit pins above the
   home indicator as a fixed footer. `body.gravity-focus` is toggled by
   mock.js render()/unmount() only while session.phase is 'live' or
   'followup' — setup and scored keep the normal tab bar. */
@media (max-width: 768px) {
  body.gravity-focus .bottom-nav {
    display: none;
  }

  /* The tab bar is gone, so its reserved bottom padding on the scroll
     container would just be dead space under our own fixed footer. */
  body.gravity-focus .main-content {
    padding-bottom: 0;
  }

  /* Rule 4 (heroes collapse): the outer "Practice the loop…" hero and the
     round-picker stepper are setup chrome, not part of the live question.
     The compact eyebrow + timer row inside .gravity-live__main (mono,
     one line, no paragraph) is what stays as the collapsed header. */
  body.gravity-focus #view-gravity-well .section-heading,
  body.gravity-focus #view-gravity-well .gravity-stepper {
    display: none;
  }

  /* Reserve room for the fixed .gravity-live__actions footer below so it
     never overlaps the assumptions/evidence text areas above it — measured
     73px rendered (12px top padding + 48px min-height buttons + 12px, plus
     safe-area-inset-bottom), plus a margin of breathing room above the fold. */
  body.gravity-focus #view-gravity-well {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  #view-gravity-well .gravity-live__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below --z-sidebar (10) and its scrim (9, design-system.css) on
       purpose: the hamburger drawer isn't hidden in focus mode (only the
       tab bar is), so opening it must cover this footer, not float above
       the overlay it's supposed to dim. */
    z-index: 8;
    margin-top: 0;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 7, 8, 0.94);
    border-top: 1px solid var(--hair);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  #view-gravity-well .gravity-live__actions .orion-action {
    flex: 1 1 0;
    min-height: 48px;
  }
}