/* Terminal methodology page (/terminal/methodology).

   Moved off the Terminal's own page on 2026-09-30: the app page is the tool,
   and eight steps of mathematics under it made it a long scroll most traders
   never reached. The layout and its reasoning came with it from
   alphapine-terminal/terminal.css; landing.css supplies the same tokens
   (--teal-deep, --surface, --line, --font-mono). */

/* --- Methodology (light again) ------------------------------------------- */

/* The methodology reads as one continuous argument, so the layout is built to
   pace it: a rail of eight numbered steps stays pinned while each step's
   explanation scrolls past at reading length. Native scrolling only — the rail
   follows the reader, the page never hijacks the wheel. */

.terminal-method {
  padding: 64px 0 56px;
}

.method-head {
  max-width: 700px;
}

.method-head .breadcrumb {
  margin-bottom: 18px;
}

.method-head .eyebrow-pill {
  margin-bottom: 16px;
}

.method-head h1 {
  margin: 0 0 16px;
  color: var(--text);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.method-head-actions {
  margin-top: 22px;
}

.method-head p {
  font-size: 0.98rem;
}

.method-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
  margin-top: 40px;
}

/* Defensive clipping for wide formulas/canvas interactions. `clip` avoids
   creating a scroll container that would break the sticky methodology rail. */
body { overflow-x: clip; }

.method-rail {
  position: sticky;
  top: 92px;
  /* Above the methodology figures and their shadows. */
  z-index: 4;
}

.method-rail ol {
  margin: 0;
  padding: 10px 16px 10px 10px;
  list-style: none;
  border-left: 1px solid var(--line);
  border-radius: 0 14px 14px 0;
  /* Frosted plate keeps the numbered rail legible over a long reading page. */
  background: rgba(255, 255, 255, 0.82);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.method-rail a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  margin-left: -1.5px;
  color: inherit;
  font-size: 0.86rem;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.method-rail a i {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.method-rail li.is-active a {
  border-left-color: var(--teal-deep);
  opacity: 1;
  font-weight: 600;
}

.method-rail a:hover { opacity: 1; }

.method-step {
  /* Reading length per step: tall enough that one step owns the viewport
     while it is being read, short enough that no step demands empty scroll. */
  min-height: 46vh;
  padding: 34px 0 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
  max-width: 640px;
}

.method-step:first-child { border-top: 0; padding-top: 6px; }

.method-step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 1.18rem;
}

.method-step h3 i {
  color: var(--teal-deep);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.1em;
}

.method-step p {
  margin: 0 0 14px;
  font-size: 0.94rem;
}

.method-formula {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  overflow-x: auto;
  white-space: nowrap;
}

.method-formula small {
  display: block;
  margin-top: 8px;
  font-family: inherit;
  font-size: 0.72rem;
  opacity: 0.65;
  white-space: normal;
}

/* The limits box: what none of the mathematics above should be read as
   claiming. Styled like a formula plate so it reads as part of the method,
   not as small print. */
.method-limits {
  margin-top: 48px;
  padding: 18px 24px 20px;
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.method-limits h3 {
  margin: 0 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.method-limits ul {
  margin: 0;
  padding-left: 18px;
}

.method-limits li {
  margin: 6px 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Reading column and figures --------------------------------------------
   Laid out like the First Passage guide, the site's standard for a long read:
   the page's own frame (margins matching the header), a 220px contents rail,
   a 72px gap and one article column of up to 800px, the pair centred in the
   frame. Everything in a step — text, formula plates, figures — fills that
   column, so their right edges and the step divider end on the same line.
   Text is the guide's: 16px, line-height 1.72, the site's muted grey. Each
   figure sits in the flow after its step's first formula, so it never
   separates a sentence ending in ":" from the formula it introduces.
   (Floating figures beside the text, the first layout here, let the text
   under them run the full 874px step: 150-164 characters a line.) */
.method-step.has-figure {
  max-width: 800px;
}

.method-figure {
  margin: 28px 0 30px;
}

/* The verdict panel is a portrait capture: at the column's width it would
   stand 1,400px tall, so it keeps a panel's own width and its caption wraps
   beneath it. */
.method-figure-tall {
  max-width: 340px;
}

/* On a wider screen it stands centred in the column, caption and all, so it
   reads as a portrait figure by design rather than one that stops short of
   the text's right edge. */
@media (min-width: 621px) {
  .method-figure.method-figure-tall {
    margin-inline: auto;
  }

  .method-figure-tall figcaption {
    text-align: center;
  }
}

/* On a phone the column is barely wider than 340px, and a panel stopping
   3-40px short of the text's edge read as a mistake; it spans the column. */
@media (max-width: 620px) {
  .method-figure-tall {
    max-width: none;
  }
}

/* The closing limits box ends on the same edge as the steps. */
.method-limits {
  max-width: 800px;
}

@media (min-width: 981px) {
  .method-grid {
    grid-template-columns: 220px minmax(0, 800px);
    gap: 20px 72px;
    justify-content: center;
  }

  .method-step h3 {
    margin-bottom: 14px;
    font-size: 20px;
  }

}

/* The guide's body text at every width, phones included (First Passage
   sets its article at 16px / 1.72 on a phone too). */
.method-step p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.method-step p + p {
  margin-top: 18px;
}

/* The image's window: rounded, shadowed, clipping only its content. */
.method-shot {
  overflow: clip;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(2, 24, 18, 0.18);
}

/* Each figure is a crop of one panel, read for its numbers — so it opens in
   the site's shot viewer at full resolution, the same way blog figures do. */
.method-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.method-zoom:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.3);
  outline-offset: -3px;
}

.method-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(29, 29, 31, 0.72);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  .method-zoom-hint {
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .method-zoom:hover .method-zoom-hint,
  .method-zoom:focus-visible .method-zoom-hint {
    opacity: 1;
  }
}

/* Nothing here crops a figure: each fills its figure's width at the
   capture's own ratio (its width/height attributes). */
.method-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #0b0f14;
}

.method-figure figcaption {
  margin-top: 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  opacity: 0.6;
}

/* One column below 980px — the First Passage guide's breakpoint, so the two
   long reads stack at the same width. The figure spans the text column. */
@media (max-width: 980px) {
  .method-figure {
    margin: 20px 0 22px;
  }

  .method-step.has-figure .method-figure figcaption { margin: 8px 0 0; }
}

@media (max-width: 980px) {
  /* minmax(0,…), not bare 1fr: a bare fr keeps min-width:auto, which lets a
     nowrap formula set the column minimum and push the whole document wider
     than the viewport instead of scrolling inside its own box. */
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .method-rail {
    top: 64px;
    z-index: 5;
    padding: 8px 0;
    background: var(--bg, #fff);
  }
  .method-rail ol {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-left: 0;
  }
  .method-rail a { padding: 6px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .method-rail a span { display: none; }
  .method-rail li.is-active a { border-bottom-color: var(--teal-deep); }
  .method-step { min-height: 0; }
}


/* ---- Method figures arriving from their own side --------------------------
   A right-hand figure comes in from the right edge, a left-hand one from the
   left: the motion says which side of the page the illustration belongs to
   before the reader's eye gets there.

   The hidden state hangs off .is-observed, which methodology.js adds only once
   the observer is running. Without the module — or with reduced motion, where
   the function returns before adding it — every figure is simply visible
   where the layout puts it. An illustration that needs JavaScript to appear
   at all is a worse trade than no animation.

   .method-grid clips the horizontal travel so the entrance cannot widen the
   page. `overflow-x: clip` rather than `hidden`: clip leaves the other axis
   genuinely visible, so the pinned rail still sticks and no shadow is cut. */

.method-grid {
  overflow-x: clip;
}

.method-steps.is-observed .method-step.has-figure .method-figure {
  opacity: 0;
  transform: translate3d(var(--method-enter, 0), 0, 0);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.method-steps.is-observed .method-step.figure-right .method-figure { --method-enter: 72px; }
.method-steps.is-observed .method-step.figure-left .method-figure { --method-enter: -72px; }

.method-steps.is-observed .method-step.is-shown .method-figure {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Closing call to action ------------------------------------------------ */
.method-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 80px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

/* The text runs the full width of its box, the buttons beneath it; `pretty`
   keeps a sentence just longer than one line from ending on a lone word. */
.method-cta > div:first-child {
  flex: 1 1 100%;
}

.method-cta p {
  text-wrap: pretty;
}

.method-cta-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
}

.method-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.method-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 620px) {
  .terminal-method {
    padding-top: 40px;
  }

  .method-cta {
    padding: 22px;
  }

  .method-cta-actions,
  .method-cta-actions .button {
    width: 100%;
  }
}

/* --- Centred page head (2026-09-30) -----------------------------------------
   The head is the page's introduction, set like the site's other intros (the
   home page sections, the Terminal's own): pill, title, paragraph and button
   on the centre line, so the right half of a wide screen is no longer empty.
   The breadcrumb stays where every page has it, on the content's left edge;
   the steps below stay left-aligned for reading. `balance` keeps the title
   from leaving "chart" alone on its second line. */
.method-head {
  max-width: none;
  text-align: center;
}

.method-head h1 {
  text-wrap: balance;
}

.method-head p {
  max-width: 720px;
  margin-inline: auto;
}

/* A formula's second clause (α = 2/(n+1), S ∈ [−1, +1], × overlap haircut)
   sits after a gap on a wide screen and on its own line on a phone, where the
   whole expression was 40-90px wider than its plate and had to be scrolled
   sideways to be read. The smaller size lets every first clause fit at 360px. */
/* The plate lays its clauses out as wrapping flex items: `column-gap` spaces
   two clauses sharing a line and vanishes when the second wraps, so a dropped
   clause starts flush and the gap never counts toward the plate's minimum
   width. The note underneath takes a line of its own. */
.method-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.9em;
  white-space: normal;
}

.formula-head,
.formula-tail {
  white-space: nowrap;
}

.method-formula small {
  flex-basis: 100%;
}

/* A divisor continues its expression, so on a shared line it sits a single
   space from the numerator rather than a clause-gap away. */
.formula-divisor {
  margin-left: calc(0.6em - 0.9em);
}

@media (max-width: 620px) {
  .method-formula {
    padding: 14px;
    font-size: 0.84rem;
  }

  .formula-tail {
    flex-basis: 100%;
    margin-top: 4px;
  }

  .formula-divisor {
    margin-left: 0;
  }

  /* All eight step numbers fit across a 360px phone without a scrollbar. */
  .method-rail ol {
    justify-content: space-between;
    gap: 0;
    padding: 6px 8px;
    scrollbar-width: none;
  }

  .method-rail a {
    padding: 6px 7px;
  }
}

/* The shrinkage estimate (p̂) is the longest single clause; on a 320px phone
   it needs one more step down to fit its plate. */
@media (max-width: 359px) {
  .method-formula {
    font-size: 0.78rem;
  }
}