/* home-edge.css — homepage H07 Adjustable challenge (#edge): the Level
   trace on a Difficulty scale (Alessandro, 8 Oct 2026: "1 · Difficulty
   scale", chosen on the 8 Oct review page, since removed). Classes lt-;
   behaviour in home-edge.js.

   .lt-grid      the copy in 5 columns, the figure in 7 (from 1024 px)
   .lt-fig       the figure (no pause button since 9 Oct 2026: it runs
                 only on screen with the tab shown, and rests under
                 reduced motion)
   .lt-frame     the drawing; the scale's end words
                 ("Harder", "Easier") in a column on its left, level with
                 the top and bottom rungs (above and below the drawing on
                 phones). The words are HTML at 16 px, so they stay legible
                 at every width while the drawing scales. All aria-hidden.
   .lt-svg       an axis with an arrow at each end, one rung per level,
                 longer and heavier towards Harder (the current rung
                 Chalk); level
                 lines; the run of one bout: Vermilion bars for runs of
                 clean trials (a hollow cell is a miss), risers at each
                 step, a Chalk head, a dotted Chalk line from the current
                 rung to the head and, while the level steps, a Vermilion
                 chevron ahead of the head; the end word it moves towards
                 lights with a small Vermilion mark.
   Colours: the Ink roles only (Vermilion the level, Chalk the current
   position, Soft Line secondary marks and words, Muted Plum the scale).
   Default style = the static state written in the markup (bout one
   complete): the reduced-motion and no-JS composition. That markup is
   generated from the script's geometry by scripts/gen-home-edge.mjs
   (npm run gen:home-edge; node scripts/gen-home-edge.mjs --check verifies
   it), which writes it into partials/home-sections.html. */

.lt-grid { align-items: center; row-gap: var(--space-7); }
.lt-section .prose p { margin: 0; }
.lt-fig { width: 100%; max-width: 760px; margin-inline: auto; }
/* copy 5 columns, graphic 7 (no layout.css start class for column 6) */
@media (min-width: 1024px) { .grid > .lt-col { grid-column: 6 / span 7; } }
.lt-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* the chart frame: the drawing, the scale's end words in a column on its
   left, level with the ends of the scale (above and below the
   drawing on phones) */
.lt-frame {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  column-gap: var(--space-2);
  font-size: var(--text-ui);
  line-height: 1.25;
}
.lt-ends { position: relative; grid-column: 1; grid-row: 2; }
.lt-frame > .lt-svg { grid-column: 2; grid-row: 2; }
.lt-end {
  position: absolute;
  right: 18px;                        /* room for the direction mark */
  top: var(--y, 50%);
  transform: translateY(-50%);
}
.lt-end { color: var(--on-muted); white-space: nowrap; transition: color var(--duration-enter) var(--ease-out); }
/* the direction mark: a small Vermilion triangle beside the word the level
   is stepping towards, shown while it steps */
.lt-end::after {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  margin-top: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0;
  transition: opacity var(--duration-enter) var(--ease-out);
}
[data-lt-end="hi"]::after { border-bottom: 8px solid var(--color-action-bg); }
[data-lt-end="lo"]::after { border-top: 8px solid var(--color-action-bg); }
.lt-end.is-on { color: var(--on-text); }
.lt-end.is-on::after { opacity: 1; }

/* the scale: an axis with an arrow at each end (Harder up, Easier down) and
   one rung per level, the current one lit */
.lt-axis { fill: none; stroke: var(--on-muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lt-tip { fill: none; stroke: var(--on-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lt-tick { fill: var(--on-line); }
.lt-tick.is-on { fill: var(--on-text); }

/* the trace: level lines, Vermilion cells (hollow = miss), Soft Line
   risers, a Chalk head and the dotted line back to the scale */
.lt-gl { stroke: var(--on-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-cell { fill: var(--color-action-bg); }
.lt-cell.is-miss { fill: var(--on-bg); stroke: var(--color-action-bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lt-riser { stroke: var(--on-muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lt-lead { fill: none; stroke: var(--on-text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; vector-effect: non-scaling-stroke; }
.lt-head { fill: var(--on-text); stroke: var(--on-bg); stroke-width: 3; vector-effect: non-scaling-stroke; }
/* the direction at the step: a Vermilion chevron, up after a clean run,
   down after misses, shown while the level steps (no words) */
.lt-dir {
  fill: none;
  stroke: var(--color-action-bg);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--duration-enter) var(--ease-out);
}
.lt-dir.is-on { opacity: 1; }
/* the run fades out between bouts */
.lt-run { transition: opacity 420ms var(--ease-out); }
.lt-run.is-out { opacity: 0; }

/* phones: the end words leave the side column and sit at the ends of the
   axis (above and below the drawing), so the drawing gets the full width */
@media (max-width: 639px) {
  .lt-frame { grid-template-columns: minmax(0, 1fr); }
  .lt-ends { display: contents; }
  .lt-end { position: relative; right: auto; top: auto; grid-column: 1 / -1; justify-self: start; transform: none; }
  .lt-end[data-lt-end="hi"] { grid-row: 2; margin-bottom: var(--space-3); }
  .lt-frame > .lt-svg { grid-column: 1; grid-row: 3; }
  .lt-end[data-lt-end="lo"] { grid-row: 4; margin-top: var(--space-3); }
}

/* a phone on its side (under 500 px tall): the figure no wider than lets
   the whole drawing, "Harder" to "Easier", fit the screen under the
   header (svg 600 x 380 beside the 5 rem column of end words; under
   640 px the words sit above and below it, about 4.5 rem together) */
@media (max-height: 500px) and (orientation: landscape) {
  .lt-fig { max-width: calc((100svh - var(--header-h) - var(--space-6)) * 600 / 380 + 5rem + var(--space-2)); }
}
@media (max-width: 639px) and (max-height: 500px) and (orientation: landscape) {
  .lt-fig { max-width: calc((100svh - var(--header-h) - var(--space-6) - 4.5rem) * 600 / 380); }
}

@media (prefers-reduced-motion: reduce) {
  .lt-section *, .lt-section *::before, .lt-section *::after { transition: none !important; }
}