/* ============================================================================
   Likidera — Forecasting page layer
   Consumes tokens/base/components. Seven blocks: opening (.page-head, shared)
   · #how · #methods · #accuracy (the tinted centre of gravity) · #learning ·
   #scenarios · #questions, then the handoff run and the closing card.
   Only what this page invents lives here; everything else is shared.
   ============================================================================ */

/* ═══════════════ HERO FAN — five projections from the TODAY node ═══════════ */
.fan { display: block; width: 100%; height: auto; }
.fan__realized {
  fill: none;
  stroke: var(--chart-realized);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fan__projection {
  fill: none;
  stroke: var(--chart-forecast);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  opacity: 0.45;
}
/* The recommended method is the one the copy says arrives with its own error
   figure, so it is the only projection drawn at full strength. */
.fan__projection--lead { stroke-width: 2.2; opacity: 1; }
.fan__axis { stroke: var(--chart-today); stroke-width: 1; }
.fan__label {
  fill: var(--text-faint);
  font-size: 13px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-data);
}
.fan__label--today { fill: var(--text-muted); }

.hero-fan { margin: 0; margin-top: var(--space-6); }
.hero-fan .fan { max-height: clamp(200px, 22vw, 320px); }
/* The fan closes the opening under the lead. The page head is one column, so
   source order places it; no explicit row, which would put it above the lead. */
@media (min-width: 900px) {
  .hero-fan { margin-top: var(--space-5); }
}


/* ═══════════════ #how — six inputs, one figure per day ═══════════════
   The six inputs are labelled inside the drawing, so the section states them
   once instead of twice. At 15 user units the labels render 10.5px in the
   836px frame at 1000 and 13.4px at 1440. */
.intake__label {
  font-size: 15px;
  font-weight: var(--weight-medium);
  fill: var(--text-muted);
}
/* Below 1000 the frame is too narrow for the labels to be legible, so the
   list states the six inputs there and the diagram is hidden. */
.intake-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.intake-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.intake-list .icon { color: var(--brand); margin-top: 0.15em; }
@media (min-width: 640px) {
  .intake-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
  }
}
@media (min-width: 1000px) {
  .intake-list { display: none; }
}
.methods__cta { margin-top: var(--space-5); }
@media (max-width: 999px) {
  .how__diagram { display: none; }
}
.how__diagram {
  margin-top: var(--space-6);
  /* Below 900 the six inputs need height; from 900 the diagram runs wide. */
  --frame-ratio: 4 / 3;
}
@media (min-width: 900px) {
  .how__diagram { --frame-ratio: 16 / 9; }
}
/* Two captures under the diagram, stacked at the full measure: the calendar
   the diagram's daily figure lands on, then the weekly roll-up of the same
   line. A two-up row was measured and rejected — at 584 the calendar is 165px
   tall against the rolling forecast's 335, and neither table can be read at
   36%. Stacked, the pair has its own height budget: the rolling forecast is
   1625x855 and renders 640px tall at 1216, 108 over the shared cap, and a
   letterboxed table on its own ground is worse than a taller frame. Below
   1000 the diagram is gone and the pair takes the exhibit column's 560 cap.
   The pair is the site's one T5: from 900 the rolling forecast sits 28px down
   and right behind the calendar, so the two read as one workflow at two
   resolutions. .shot-pair owns the grid; what stays here is the height budget
   and the space above. */
.how__exhibits {
  margin-top: var(--space-6);
  --shot-real-h: clamp(280px, 56vw, 700px);
}
.how__handoff,
.scenarios__handoff,
.accuracy__handoff {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.how__handoff p,
.scenarios__handoff p,
.accuracy__handoff p { color: var(--text-muted); max-width: 54ch; }


/* ═══════════════ #methods — the comparison ladder ═══════════════
   Not cards: a grid of five would read as a menu to pick from, and all five
   methods run at once. Five rows on one shared column grid, hairline between,
   so the eye compares by scanning down two constant columns. */
.method-ladder { margin-top: var(--space-6); }
.method {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
  align-items: start;
}
.method + .method { border-top: 1px solid var(--rule); }
.method:first-child { padding-top: 0; }

.method__glyph { min-width: 0; }
/* Identical axes and an identical realized segment in all five: only the
   right half of the plot differs, which is what makes them comparable. */
.method__plot { width: 88px; height: auto; }
.method__name {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.method__title {
  margin-top: var(--space-2);
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 30ch;
}
.method__plain {
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.method__body { min-width: 0; }
.method__prose {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 54ch;
}
.method__uses {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.method__uses-label { color: var(--text-faint); }

.method-ladder__legend { margin-top: var(--space-5); }
/* Moved into the rail: it was an orphan under the ladder, and the rail stood
   empty for ~560px below its legend. */
.methods__note {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .method {
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: var(--space-6);
  }
  .method__plot { width: 132px; }
  .method__glyph { grid-row: 1 / span 3; }
}
/* The row carries the leftover width in a fourth column of real content rather
   than in a rail beside it: whatever three columns leave over becomes a void
   either way (elegance pass R7). */
@media (min-width: 1000px) {
  .method {
    grid-template-columns: 112px minmax(0, 1fr) 240px;
    column-gap: var(--space-6);
  }
  .method__plot { width: 112px; }
  .method__glyph { grid-row: 1 / span 2; }
  .method__body { grid-column: 2; grid-row: 1; }
  .method__prose { grid-column: 2; grid-row: 2; max-width: none; }
  /* The Uses value is the second constant column; it must not wrap. */
  .method__uses {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
    display: grid;
    gap: var(--space-1);
    align-content: start;
  }
  .method__uses-label {
    display: block;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }
  .method__uses-value { display: block; color: var(--text); }
}
@media (min-width: 1180px) {
  .method {
    /* Question 300 not 340 (R7 fallback: the body ran four lines at 1180).
       Uses 240 not 220: the longest value that can hold one line, EN
       "Recorded due and transaction dates", measures 225px at this size
       (2026-10-26), and R7 requires it on one line. The receivables-aging
       value (314px EN, 334px TR) takes two lines at any width this column
       can have. */
    grid-template-columns: 112px minmax(0, 300px) minmax(0, 1fr) 240px;
  }
  .method__glyph { grid-row: 1; }
  .method__prose { grid-column: 3; grid-row: 1; }
  .method__uses { grid-column: 4; grid-row: 1; }
}


/* ═══════════════ #accuracy — the centre of gravity ═══════════════
   The tint band plus extra padding makes this read as a room, not a stripe. */
#accuracy { padding-block: calc(var(--section-y) + var(--space-5)); }
.accuracy__steps { margin-top: var(--space-7); }
/* The .record construct from components.css, run as one column at every
   width: the capture earns the full container — a 4x4 matrix at 1216px is
   read, where at 7 of 12 columns it was looked at — with the horizon axis
   under it, and the key drops beneath as the four hairline-divided columns
   components.css already gives it from 900. The callout is the block's
   conclusion and follows as a row of the same grid, so .record's own row gap
   separates it and the stacked margin goes, or the space doubles. Scoped
   because the base margin rule is later in the file and a media query adds
   no specificity of its own. */
.record--accuracy { margin-top: var(--space-7); }
.accuracy__frame { min-width: 0; }
/* The thin-data badge over the matrix it was cut from: 56% of the frame renders
   the 685px crop at its own pixels, and the overlap is set as a share of the
   plate's width so it stays inside the 41 source px of ground the capture
   leaves under its last row — 27px at 1216, 21px at 976 — and no cell, arrow or
   trend mark is covered at any width. The axis follows the detail rather than
   the frame, which is the one thing this treatment costs the section. */
.accuracy__stack {
  --stack-w: 56%;
  --stack-native: 685px;
  --stack-inset: 24px;
  --stack-overlap: 2.2%;
}
@media (min-width: 1000px) {
  .record--accuracy { grid-template-columns: minmax(0, 1fr); }
  .record--accuracy .accuracy__callout { margin-top: 0; }
}
.accuracy__callout { margin-top: var(--space-5); }

/* A column axis, not a timeline: four even ticks, no TODAY node, no dash
   split. Same instrument family as the hero ruler, visibly different job. */
.ruler--axis { height: 3.25rem; }
.ruler--axis .ruler__track {
  background:
    linear-gradient(var(--ruler-line), var(--ruler-line)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ruler-tick) 0 1px, transparent 1px 25%)
      0 0 / 100% 7px no-repeat;
}
.ruler--axis [data-tick="1"] { --at: 12.5%; }
.ruler--axis [data-tick="7"] { --at: 37.5%; }
.ruler--axis [data-tick="30"] { --at: 62.5%; }
.ruler--axis [data-tick="90"] { --at: 87.5%; }
/* The unit sits on its own line under the tick labels (which are centred on
   their ticks at top: 14px). Sharing that line put it on top of the last tick
   at every frame width; a separate line costs ~18px and cannot collide. */
.ruler--axis .ruler__unit {
  position: absolute;
  right: 0;
  top: 2.25rem;
  line-height: 1;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-data);
  color: var(--text-faint);
}
.ruler--axis .ruler__label { background: transparent; }
/* Below 640 only the outer two ticks are labelled. */
@media (max-width: 639px) {
  /* The unit is hidden here, so the second line is not needed either. */
  .ruler--axis { height: 2.25rem; }
  .ruler--axis .ruler__label--mid,
  .ruler--axis .ruler__unit { display: none; }
}


/* ═══════════════ #learning — three drawn blocks ═══════════════ */
.learning-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.learning__art { max-width: 132px; margin-bottom: var(--space-4); }
.learning h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.learning p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 46ch;
}
/* Block, not the base inline-flex: the TR chip has its bold term mid-sentence,
   and flex split the sentence into three columns around it. */
.learning .chip { display: inline-block; margin-top: var(--space-3); }
@media (min-width: 640px) {
  .learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-grid > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .learning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-grid > :last-child { grid-column: auto; }
}
/* The patterns table under the three blocks, at the full measure: 1502px of
   capture renders at 81% on 1216, where its cycle column can be read. */
.learning__exhibit { margin-top: var(--space-6); }
@media (max-width: 999px) {
  .how__exhibits,
  .learning__exhibit { width: 100%; max-width: 560px; margin-inline: auto; }
}


/* ═══════════════ #scenarios — the comparison frame beside its lists ════════
   The capture is the smallest on the site — 725x303, the three-scenario
   table alone, the rest of that screen being empty — so across the container
   it would be a 1216px window around 300px of content. From 1000 it takes 7
   of 12 columns, 681px at 1440, close to its native size, and the two lists
   stack beside it, centred on the height the frame has. Below 1000 the frame
   takes the measure and the lists follow it in their two columns. */
.scenarios__layout {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.scenario-lists {
  display: grid;
  gap: var(--space-6);
}
.scenario-lists h3 {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.scenario-lists ul {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.scenario-lists li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.scenario-lists li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  margin-top: 0.55em;
  background: var(--brand);
}
@media (min-width: 640px) {
  .scenario-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
  .scenario-lists__types ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .scenarios__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-7);
    align-items: center;
  }
  .scenarios__frame { min-width: 0; }
  .scenario-lists {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}


/* ═══════════════ #questions — two questions, then two exits ═══════════════ */
/* .questions__layout and .questions__links moved to components.css when the
   FAQ page became their second consumer — five more groups there than here. */


/* ═══════════════ HANDOFF RUN ═══════════════
   Two teasers that close the argument outward. No --lead variant: nothing on
   an inner page outranks its own H1, and these are exits, not arguments. */
.teaser-run--handoff { padding-block-start: calc(var(--section-y) + var(--space-5)); }
.teaser-run--handoff { --teaser-gap: var(--space-6); }
.teaser-run--handoff .teaser__media { --teaser-media-h: clamp(240px, 24vw, 300px); }
/* 28px: this section's H3s render at 19px, and an H2 within 6px of an H3
   stops reading as a level above it. */
.teaser-run--handoff .teaser__title { font-size: 1.75rem; }