/* Recon preview — "what a scout sees".
 *
 * A walkthrough, not a working copy. It loads the REAL styles.css and uses the real component
 * classes, so the phones on this page are pixel-accurate to the app; only the words are made
 * up. That is the whole trick: nothing here re-implements a control, so nothing here can
 * quietly stop matching the thing it claims to show.
 *
 * The one thing this page cannot promise is that the SEQUENCE stays current — if a screen
 * changes shape, someone has to come back here. FEATURE_STATUS.md says so.
 */

/* styles.css sets `overflow-x: hidden` on html and body to stop the phone app ever scrolling
 * sideways. That is right for the app and quietly fatal here: `overflow` on ANY axis makes an
 * element a scroll container, and a scroll container between a sticky element and the thing
 * actually being scrolled makes `position: sticky` do nothing at all — no error, no warning,
 * it simply never sticks. Cost an hour once; writing it down so it costs nobody else one.
 *
 * `clip` prevents the same horizontal overflow WITHOUT creating a scroll container.
 */
html, body.pv { overflow-x: clip; }

body.pv { max-width: none; background: var(--bg); }

body.pv main {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s8) var(--s6) var(--s12);
}

.chead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.chead .ctag {
  font: 700 10px/1 Inter, sans-serif; letter-spacing: 2px;
  color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 4px 8px;
}
.chead .spacer { flex: 1; }
.chead a { color: var(--text-2); text-decoration: none; font-size: 13px; }
.chead a:hover { color: var(--green-hot); }

/* ---------------------------------------------------------------- intro */
.pvhead { max-width: 640px; margin-bottom: var(--s12); }
.pvhead h1 { font: 700 32px/1.15 Inter, sans-serif; margin: 0 0 var(--s4); }
.pvhead p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0 0 var(--s4); }

.caveat {
  background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.32);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.caveat strong { color: var(--gold-soft); }
.caveat a { color: var(--gold-soft); }

/* ---------------------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s12); align-items: stretch;
  padding-bottom: var(--s12); margin-bottom: var(--s12);
  border-bottom: 1px solid var(--border);
}
.steps > li.wide { grid-template-columns: minmax(0, 1fr); }
.steps > li:last-child { border-bottom: 0; }

/* Sticky, so the explanation stays beside the screen it explains instead of scrolling off
   and leaving 400px of empty column.
 *
 * `align-self: start` is required, not cosmetic: a stretched grid item fills its area and has
 * nowhere to stick. Sized to its content, it sticks within the taller grid area. */
.say { position: sticky; top: 80px; align-self: start; }
.say .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #1d4536; color: var(--green-hot);
  font: 700 14px/1 Inter, sans-serif; margin-bottom: var(--s3);
}
.say h2 {
  font: 700 22px/1.2 Inter, sans-serif; color: var(--text);
  letter-spacing: 0; text-transform: none; margin: 0 0 var(--s3);
}
.say p { color: var(--text-2); font-size: 15px; line-height: 1.65; margin: 0 0 var(--s3);
  max-width: 46ch; }
.say em { color: var(--text); font-style: normal; font-weight: 600; }
.say code { background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; font-size: 13px; }

/* ---------------------------------------------------------------- the phone */
/* A frame, not a photograph of a device. The bezel is thin enough to read as "this is a
   phone screen" without pretending to be a particular handset. */
.phone {
  align-self: start;   /* the row stretches so .say can stick; the phone must not */
  width: 376px; flex: 0 0 376px;
  border: 1px solid var(--border); border-radius: 26px;
  padding: 8px; background: #0a1410;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.scr {
  border-radius: 19px; overflow: hidden; background: var(--bg);
  max-height: 720px; overflow-y: auto;
}
/* The app's own `main` padding, applied to the preview's content wrapper instead. */
.scr .pad { padding: var(--s4); }
.scr .topbar { position: static; }

/* Two phones side by side for the live-scouting pair. */
.pair { display: flex; gap: var(--s8); flex-wrap: wrap; margin-top: var(--s6); }
.cap2 { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: var(--s6) 0 0;
  max-width: 70ch; }
.cap2 code { background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; font-size: 13px; }

/* Nothing on this page does anything. Say that with the cursor rather than only in prose. */
.scr button, .scr input, .scr textarea, .scr .slide { cursor: default; pointer-events: none; }

/* The sign-in view fills the phone's whole height in the app (min-height:100dvh). Inside a
   frame that is the viewport's height, not the frame's, so it has to be capped here. */
.scr .auth { min-height: 0; padding: var(--s8) 0; }

/* HOLD is sized off the viewport in the app, which inside a 376px frame would be wrong. */
.scr #hold, .scr .ring { width: 230px; }

.pvfoot { border-top: 1px solid var(--border); padding-top: var(--s6); max-width: 640px; }

@media (max-width: 1000px) {
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .say { position: static; }
  .phone { width: 100%; max-width: 376px; flex-basis: auto; }
  body.pv main { padding: var(--s6) var(--s4) var(--s12); }
}