/* ============================================================
   THE SOLUTION PAGES — photographs and figures (2026-10-06).
   What goes where, and why, is in shared/solution-figures.mjs.
   The photographs are photos.css's frames; this file lays them out
   on these pages and draws the figures.

   One ink system, the home page's plates':
     --rule        the paper: rules, grids, leaders
     --accent-dim  what supports the point
     --accent      the point — ours, or the run that works
     --flag        what waits: the hold, the licence, the hazard
   No panel round a figure: it sits on the section's own ground, and
   the only marks in it are the ones that mean something.
   ============================================================ */

/* ---------------- the first screen: the photograph beside the text ---------------- */
.page-hero__txt { display: grid; gap: 20px; align-content: start; min-width: 0; }
.page-hero__ph { margin-top: clamp(8px, 1.6vw, 20px); }
.page-hero__ph .ph__frame { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .page-hero__ph .ph__frame { aspect-ratio: 4 / 3; } }
@media (min-width: 1100px) {
  .page-hero--ph .page-hero__in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 88px);
    /* a one-line title is half the picture's height: the text sits
       level with the middle of the picture rather than over a gap */
    align-items: center;
  }
  .page-hero--ph .page-hero__in > .eyebrow { grid-column: 1 / -1; }
  .page-hero--ph .page-hero__ph { margin-top: 6px; }
  .page-hero--ph .page-hero__ph .ph__frame { aspect-ratio: 3 / 2; }
}

/* ---------------- the rail beside his text ----------------
   Under the heading on a narrow screen; on a wide one, in the column
   the heading leaves empty, held in view while his text runs past it
   (only where the screen is tall enough to hold all of it). */
.doc-part--rail > .block__head { align-content: start; }
.block__head > :is(.fig, .ph) { margin-top: clamp(14px, 2vw, 24px); max-width: 560px; }
@media (min-width: 1200px) {
  .doc-part--rail > .block__head { align-self: stretch; }
  .block__head > :is(.fig, .ph) { max-width: none; margin-top: clamp(28px, 3vw, 44px); }
}
@media (min-width: 1200px) and (min-height: 820px) {
  .block__head > :is(.fig, .ph) {
    position: sticky;
    top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 32px);
  }
}

/* ---------------- a figure ---------------- */
.fig { margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; }
.fig__body { position: relative; min-width: 0; }
.prose > .fig { margin-block: clamp(10px, 1.6vw, 22px); }
.fig .ph__cap { padding-top: 14px; border-top: 1px solid var(--rule); }
.fig__mono, .roles__head, .roles__k, .lit__k, .tl__unit, .prog__key, .fly__k {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------- IOR · who stands where ---------------- */
.roles .fig__body { padding-bottom: 30px; }
.roles__head { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.roles__head span:last-child { padding-left: 16px; }
.roles__rows { display: grid; }
.roles__row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-2);
}
.roles__k { grid-column: 1 / -1; letter-spacing: .06em; text-transform: none; font-size: .75rem; }
.roles__row--d .roles__k { padding-left: calc(50% + 16px); }
.roles__bar {
  grid-row: 2; display: grid; gap: 2px; min-width: 0;
  padding: 9px 12px 10px; border-radius: var(--radius);
}
.roles__row--o .roles__bar { grid-column: 1; margin-right: 16px; }
.roles__row--d .roles__bar { grid-column: 2; margin-left: 16px; }
.roles__row--both .roles__bar { grid-column: 1 / -1; }
.roles__bar b { font-family: var(--display); font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.roles__bar i { font-style: normal; font-family: var(--mono); font-size: .6875rem; line-height: 1.4; letter-spacing: .02em; }
.roles__bar--you { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.25px var(--ink); }
.roles__bar--you i { color: var(--ink-2); }
.roles__bar--us { background: var(--accent); color: #fff; }
.roles__bar--us i { color: rgba(255, 255, 255, .84); }
.roles__bar--us2 { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1.25px var(--accent); }
.roles__bar--us2 i { color: var(--ink-2); }
.roles__bar--dc { background: var(--ground); color: var(--ink-2); box-shadow: none; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
/* the border: drawn under the bars, so the one that crosses it is
   seen to cross it whole */
.roles__line { position: absolute; z-index: 0; top: 0; bottom: 30px; left: 50%; border-left: 1.25px dashed var(--ink-3); }
.roles__line span {
  position: absolute; top: calc(100% + 8px); left: 0; transform: translateX(-50%);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap;
}

/* ---------------- TC · one line item ---------------- */
.lit .fig__body { display: grid; margin-left: 5px; padding-left: 22px; border-left: 1.25px solid var(--accent-dim); }
.lit__stage { position: relative; display: grid; gap: 10px; padding-bottom: 24px; }
.lit__stage:last-child { padding-bottom: 0; }
.lit__stage::before {
  content: ""; position: absolute; left: -28.5px; top: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 1.25px var(--accent);
}
.lit__stage:last-child::before { background: var(--accent); }
.lit__inv {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 11px 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.lit__q { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }
.lit__d { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.lit__flag {
  margin-left: auto; padding: 3px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: .6875rem; color: var(--flag); background: var(--flag-wash);
}
.lit__spec { display: grid; margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.lit__spec div {
  display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--rule-2);
}
.lit__spec div:first-child { border-top: 0; }
.lit__spec dt { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
.lit__spec dd { margin: 0; }
.lit__spec i { display: block; width: var(--fill); height: 6px; border-radius: 1px; background: var(--accent-dim); }
.lit__out {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0;
  background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-dim);
}
.lit__out div { display: grid; gap: 4px; align-content: start; padding: 10px 12px; background: var(--surface); }
.lit__out dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lit__out dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: .9375rem; line-height: 1.25; color: var(--accent); }
@media (max-width: 420px) {
  .lit__spec div { grid-template-columns: minmax(0, 1fr) 30%; }
  .lit__out { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- TC · the illusion of progress ----------------
   The lines are SVG stretched to the plot, with strokes that do not
   stretch; every word and every dot is HTML laid over it, so neither
   is squashed with the plot on a phone. */
.prog__key { display: flex; flex-wrap: wrap; gap: 8px 22px; letter-spacing: .06em; }
.prog__key span::before {
  content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px;
  vertical-align: middle; background: currentColor;
}
.prog__key--late { color: var(--flag); }
.prog__key--ok { color: var(--accent); }
.prog__plot { position: relative; height: clamp(190px, 24vw, 250px); margin: 40px 0 34px 62px; }
.prog__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prog__plot path { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.prog__late { stroke: var(--flag); }
.prog__ok { stroke: var(--accent); }
.prog__lvl { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1%); border-top: 1px solid var(--rule); }
.prog__lvl--border { border-top: 1px dashed var(--ink-3); }
.prog__lvl b {
  position: absolute; right: calc(100% + 12px); top: 0; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 400; font-size: .6875rem; color: var(--ink-3);
}
.prog__held {
  position: absolute; left: 16%; width: 54%; top: calc(45% - 15px); height: 30px;
  background: repeating-linear-gradient(135deg, var(--flag-wash) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px rgba(138, 86, 16, .22);
}
.prog__held b, .prog__dot b, .prog__note, .prog__time {
  position: absolute; white-space: nowrap;
  font-family: var(--mono); font-weight: 400; font-size: .6875rem; letter-spacing: .02em;
}
.prog__held b { z-index: 2; right: 0; bottom: calc(100% + 6px); padding: 0 4px; color: var(--flag); background: var(--ground); }
.prog__dot {
  position: absolute; top: 0; left: calc(var(--x) * 1%);
  width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%);
}
.prog__dot--ok { background: var(--accent); }
.prog__dot--late { background: var(--flag); }
.prog__dot b { left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); }
.prog__dot--ok b { color: var(--accent); }
.prog__dot--late b { color: var(--flag); }
.prog__note { left: 0; top: calc(100% + 9px); color: var(--accent); }
.prog__time { right: 0; top: calc(100% + 9px); color: var(--ink-3); }
.prog__time::after { content: " \2192"; }

/* ---------------- freight · the 48-hour flight ---------------- */
.fly .fig__body { display: grid; gap: 30px; padding-bottom: 6px; }
.fly__row { display: grid; gap: 8px; }
.fly__row--late .fly__k { color: var(--flag); }
.fly__row--ok .fly__k { color: var(--accent); }
.fly__track { position: relative; height: 16px; margin: 26px 0 22px; }
.fly__seg { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); }
.fly__seg em, .fly__end em {
  position: absolute; left: 0; white-space: nowrap; font-style: normal;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .02em; color: var(--ink-2);
}
.fly__seg em { bottom: calc(100% + 6px); }
.fly__seg--fly { background: var(--ink-2); }
.fly__seg--prep { background: var(--accent); }
.fly__seg--prep em { color: var(--accent); }
.fly__seg--rel { background: var(--accent-dim); }
/* the hold has no end: it fades out rather than stopping. The fade is
   on a layer of its own, or it would take the label with it */
.fly__seg--held::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, var(--flag) 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
          mask-image: linear-gradient(to right, #000 55%, transparent);
}
.fly__row--late .fly__seg--held em { color: var(--flag); }
/* the labels that would run into the one before them go underneath */
.fly__row--late .fly__seg--held em,
.fly__row--ok .fly__seg--fly em { bottom: auto; top: calc(100% + 6px); }
.fly__end {
  position: absolute; top: 50%; left: calc(var(--a) * 1%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%);
}
/* beside the dot rather than over it: nothing runs after the delivery */
.fly__end em { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); color: var(--accent); }
.fly__axis { border-top: 1px solid var(--rule); padding-top: 8px; text-align: right; font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); }
.fly__axis span::after { content: " \2192"; }
/* on a phone the prep label is longer than the time before departure,
   so it moves under its bar and the flight's comes back up */
@media (max-width: 599px) {
  .fly__row--ok .fly__seg--prep em { bottom: auto; top: calc(100% + 6px); }
  .fly__row--ok .fly__seg--fly em { top: auto; bottom: calc(100% + 6px); }
  .fly__row--ok .fly__track { margin-bottom: 26px; }
}

/* ---------------- freight · the hazard label ---------------- */
.dg .fig__body { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 22px; align-items: start; }
.dg__label { width: 116px; height: 116px; display: block; }
.dg__list { display: grid; margin: 0; }
.dg__list div { display: grid; grid-template-columns: 4.8em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.dg__list div:first-child { padding-top: 2px; border-top: 0; }
.dg__list dt { font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--flag); padding-top: 1px; }
.dg__list dd { margin: 0; display: grid; gap: 3px; }
.dg__list b { font-family: var(--display); font-weight: 700; font-size: .875rem; line-height: 1.3; color: var(--ink); }
.dg__list span { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 479px) {
  .dg .fig__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dg__label { width: 92px; height: 92px; }
}

/* ---------------- the lead times, on one scale ---------------- */
.tl__axis, .tl__row {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px); align-items: center;
}
.tl__axis { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.tl__unit { letter-spacing: .12em; }
.tl__ticks { position: relative; height: 14px; }
.tl__ticks span {
  position: absolute; top: 0; left: calc(var(--at) / var(--max) * 100%); transform: translateX(-50%);
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); white-space: nowrap;
}
.tl__ticks span:first-child { transform: none; }
.tl__ticks span:last-child { transform: translateX(-100%); }
.tl__row { padding: 15px 0; border-bottom: 1px solid var(--rule-2); }
.tl__lbl { display: grid; gap: 3px; }
.tl__k { font-family: var(--display); font-weight: 700; font-size: .9375rem; color: var(--ink); }
.tl__v { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
/* the grid runs through the rows, so the weeks read straight down */
.tl__track {
  position: relative; align-self: stretch; margin-block: -15px;
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% * var(--step) / var(--max)));
}
.tl__row { --c: var(--accent); --c2: var(--accent-dim); }
.tl__row--flag { --c: var(--flag); --c2: rgba(138, 86, 16, .3); }
.tl__row--flag .tl__k { color: var(--flag); }
.tl__bar {
  position: absolute; left: 0; top: 50%; height: 12px; transform: translateY(-50%);
  width: max(4px, calc(var(--hi) / var(--max) * 100%));
  background: linear-gradient(to right, var(--c) 0 calc(var(--lo) / var(--hi) * 100%), var(--c2) 0);
  border-radius: 1px;
}
@media (max-width: 699px) {
  .tl__axis, .tl__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .tl__unit { display: none; }
  /* every other week, or the labels touch */
  .tl__ticks span:nth-child(even):not(:last-child) { visibility: hidden; }
  .tl__track { height: 12px; margin-block: 0; }
}
/* the chart runs the page's width; its caption keeps a measure */
:root .tl .ph__t { max-width: 78ch; }
/* what is left of the grid under the chart: an odd last row takes the width */
.tl + .kv .kv__row:last-child:nth-child(odd) { grid-column: 1 / -1; }