/* Exode Guide — Round 8. Production canvas, chrome, panel, and controls come
 * entirely from src/styles.css. This file composes only the exhibition ledger
 * and the semantic engineering record. */

/* Vite emits the shared production stylesheet after this public stylesheet.
 * Keep the Guide document selector more specific than the instrument's
 * deliberate `html, body` viewport lock so the semantic record can scroll in
 * both development and the built deployment. */
html.guide-document {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scroll-behavior: smooth;
}

body.guide-page {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  background: var(--ex-canvas);
}

.guide-page button,
.guide-page a { cursor: pointer; }

.guide-instrument {
  min-height: 568px;
  border-bottom: var(--ex-line-struct) solid var(--ex-line-2);
}

#exhibition-caption {
  position: absolute;
  top: 78px;
  left: 36px;
  z-index: 5;
  width: min(430px, calc(100vw - 480px));
  min-width: 280px;
  pointer-events: none;
}

#exhibition-caption .caption-rule {
  width: 100%;
  height: var(--ex-line-rib);
  margin-bottom: 18px;
  background: var(--ex-line-2);
}

#lesson-index,
#record-jump,
.record-kicker,
.record-number {
  color: var(--ex-ink-4);
  font-family: var(--ex-font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--ex-track-micro);
  line-height: 1.4;
  text-transform: uppercase;
}

#lesson-title {
  margin-top: 16px;
  color: var(--ex-ink-1);
  font-family: var(--ex-font-prose);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.04;
}

#lesson-command,
#lesson-result {
  max-width: 420px;
  font-family: var(--ex-font-prose);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

#lesson-command {
  margin-top: 14px;
  color: var(--ex-ink-2);
}

#lesson-result {
  min-height: 42px;
  margin-top: 10px;
  color: var(--ex-ink-3);
  font-family: var(--ex-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

#lesson-command .measure {
  color: var(--ex-ink-2);
  font-family: var(--ex-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.caption-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  margin-top: 15px;
}

#record-jump {
  display: inline-block;
  color: var(--ex-ink-4);
  pointer-events: auto;
  text-decoration: none;
  transition: color .2s ease;
}

#record-jump:hover,
#record-jump:focus-visible { color: var(--ex-ink-1); }

#record-jump[hidden] { display: none; }

#production-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ex-ink-1);
  font-family: var(--ex-font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ex-track-label);
  pointer-events: auto;
  text-decoration: none;
  text-transform: uppercase;
}

#production-cta[hidden] { display: none; }

#exhibition-progress {
  position: absolute;
  top: 27px;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  color: var(--ex-ink-4);
  font-family: var(--ex-font-mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

#exhibition-progress li {
  min-width: 24px;
  padding-bottom: 5px;
  border-bottom: var(--ex-line-hair) solid transparent;
  text-align: center;
}

#exhibition-progress li[aria-current="step"] {
  border-bottom-color: var(--ex-line-2);
  color: var(--ex-ink-2);
}

#exhibition-progress li.is-complete { color: var(--ex-ink-3); }

.no-script-note {
  position: absolute;
  right: 28px;
  bottom: 92px;
  z-index: 7;
  max-width: 290px;
  color: var(--ex-ink-3);
  font-family: var(--ex-font-prose);
  font-size: 14px;
  line-height: 1.5;
}

/* The public, visible source of truth for people, crawlers, print, and no-JS. */
#instrument-record {
  position: relative;
  /* The production panel belongs to the live instrument above. The record is
   * its own reading surface and covers fixed instrument chrome while in view. */
  z-index: 9;
  min-height: 100dvh;
  padding: 122px clamp(32px, 7.5vw, 132px) 112px;
  background: var(--ex-panel);
  color: var(--ex-ink-1);
}

.record-header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  column-gap: clamp(42px, 8vw, 150px);
  align-items: end;
  padding-bottom: 82px;
  border-bottom: var(--ex-line-struct) solid var(--ex-line-2);
}

.record-kicker { grid-column: 1 / -1; margin-bottom: 30px; }

.record-header h2 {
  max-width: 820px;
  font-family: var(--ex-font-prose);
  font-size: clamp(52px, 5.7vw, 82px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .98;
}

.record-lede,
.record-law {
  color: var(--ex-ink-2);
  font-family: var(--ex-font-prose);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
}

.record-law {
  grid-column: 2;
  margin-top: 24px;
  color: var(--ex-ink-3);
  font-style: normal;
}

.record-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-steps li {
  display: grid;
  grid-template-columns: 62px minmax(150px, .48fr) minmax(280px, 1fr);
  gap: clamp(22px, 4vw, 70px);
  align-items: baseline;
  padding: 52px 0 54px;
  border-bottom: var(--ex-line-hair) solid var(--ex-line);
}

.record-steps h3 {
  font-family: var(--ex-font-prose);
  font-size: clamp(30px, 3.2vw, 50px);
  font-weight: 300;
  line-height: 1;
}

.record-steps p {
  max-width: 820px;
  color: var(--ex-ink-2);
  font-family: var(--ex-font-prose);
  font-size: 18px;
  line-height: 1.55;
}

.record-steps code {
  grid-column: 3;
  display: block;
  margin-top: 14px;
  color: var(--ex-ink-3);
  font-family: var(--ex-font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  white-space: normal;
}

.law-equations span { display: block; }

.record-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .28fr);
  gap: 34px 70px;
  padding-top: 82px;
}

.record-footer p {
  max-width: 900px;
  color: var(--ex-ink-2);
  font-family: var(--ex-font-prose);
  font-size: 18px;
  line-height: 1.6;
}

.record-footer a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ex-ink-1);
  font-family: var(--ex-font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ex-track-label);
  text-decoration: none;
  text-transform: uppercase;
}

.record-footer a:hover,
.record-footer a:focus-visible { color: var(--ex-ink-1); }

@media (max-width: 900px) {
  #exhibition-caption { width: min(330px, calc(100vw - 450px)); min-width: 250px; }
  .record-header { grid-template-columns: 1fr; }
  .record-lede { margin-top: 30px; }
  .record-law { grid-column: 1; }
}

@media (max-width: 700px) {
  html { scroll-behavior: auto; }

  .guide-instrument { min-height: 568px; }
  .guide-page #brand-mark { left: 20px; }
  .guide-page #guide-link { right: 20px; }

  #exhibition-caption {
    top: 74px;
    right: 18px;
    left: 18px;
    width: auto;
    min-width: 0;
  }

  #exhibition-caption .caption-rule { margin-bottom: 12px; }
  #lesson-title { margin-top: 10px; font-size: 28px; }
  #lesson-command { max-width: none; font-size: 13px; line-height: 1.42; }
  #lesson-result { max-width: none; font-size: 11.5px; line-height: 1.42; }
  #lesson-command { margin-top: 9px; }
  #lesson-result { min-height: 36px; margin-top: 6px; }
  .caption-actions { gap: 6px 20px; margin-top: 8px; }
  #production-cta { min-height: 44px; }
  #exhibition-progress { display: none; }

  /* The native panel anatomy remains exact; only its exhibition framing moves
   * below the compact lesson ledger on a narrow viewport. */
  .guide-page #panel {
    top: 310px;
    right: 12px;
    width: calc(100vw - 24px);
    height: calc(100dvh - 324px);
    max-height: calc(100dvh - 324px);
  }

  #instrument-record { padding: 92px 22px 82px; }
  .record-header { padding-bottom: 46px; }
  .record-header h2 { font-size: 50px; }
  .record-lede, .record-law { font-size: 17px; }

  .record-steps li {
    grid-template-columns: 42px 1fr;
    gap: 12px 18px;
    padding: 32px 0 34px;
  }
  .record-steps h3 { font-size: 30px; }
  .record-steps p,
  .record-steps code { grid-column: 2; }
  .record-steps p { font-size: 16px; }

  .record-footer { grid-template-columns: 1fr; padding-top: 48px; }
  .record-footer a { grid-column: 1; grid-row: auto; }
}

@media (max-height: 620px) and (min-width: 701px) {
  #exhibition-caption { top: 64px; }
  #lesson-title { font-size: 28px; }
  #lesson-command, #lesson-result { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html.guide-document { scroll-behavior: auto; }
  #record-jump { transition: none; }
}

@media print {
  .guide-instrument { display: none; }
  #instrument-record { min-height: 0; padding: 24px; background: #fff; color: #111; }
  .record-header h2,
  .record-steps h3 { color: #111; }
  .record-lede,
  .record-law,
  .record-steps p,
  .record-steps code,
  .record-footer p { color: #333; }
  .record-footer a { display: none; }
}