/* A handover, today and with OTTO, drawn with the homepage pictures' own figures (assets/how/figures.svg,
   from tools/how_figures.py): the bearded engineer, crews in hard hats at their sites, the client in teal,
   OTTO in its ring. Three kinds of line, the same as on the homepage: dashed grey is a call between
   a crew and the engineer, amber is OTTO and the training's path, teal is the client: their calls (dashed)
   and their approval (solid).
   On the How it works page it is the hero's moving background, and "See it step by step" opens it
   larger, a tab for each state, with its story and steps. */

/* The hero: the title and lede over the drawing. From 80rem the drawing fills the hero and leaves the top
   left to the words; narrower, it sits under them. */
.how-hero { position: relative; display: grid; padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem); }
.how-hero-text { position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; gap: 1.25rem; }
.how-hero h1 { font: 600 var(--fs-display)/1.02 var(--sans); letter-spacing: -0.035em; }
.how-hero .lede { max-width: 46ch; }
/* Step by step sits at the top right of the hero; on a phone, above the title at the right. */
.how-steps-open { gap: .5rem; }
.how-steps-open svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 40rem) {
  .how-hero-text { padding-right: 15rem; }
  .how-steps-open { position: absolute; top: .5rem; right: var(--gutter); }
}
@media (max-width: 39.99rem) {
  .how-steps-open { order: -1; justify-self: end; }
}

/* Today and With OTTO under the lede: the pair over PR #2's problem pictures. With OTTO is amber, and
   fills amber while it is shown. */
.how-states { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.state-pick { appearance: none; min-height: 2.25rem; padding: .35rem .75rem; border: 0; border-radius: var(--r); background: var(--surface); color: var(--ink); font: 500 var(--fs-small)/1.4 var(--sans); cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease); }
.state-pick.is-otto { color: var(--amber); }
.state-pick:hover { background: var(--border); color: var(--ink); }
.state-pick.is-otto:hover { background: var(--amber-tint); color: var(--amber); }
.state-pick[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.state-pick.is-otto[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }
.state-pick:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (pointer: coarse) {
  .state-pick { min-height: 2.75rem; }
}
.how-hero-art { position: relative; order: 2; width: calc(100% - 2 * var(--gutter)); max-width: 48rem; margin: 2rem auto 0; aspect-ratio: 640 / 440; }
.how-hero-art .swap { display: grid; }
.how-hero-art .swap > * { grid-area: 1 / 1; }
.hero-lines-wide { display: none; }
/* Behind the words only where there is room beside them. */
@media (min-width: 80rem) {
  .how-hero { min-height: min(46rem, calc(100svh - var(--bar-h))); }
  .how-hero-art { position: absolute; inset: 0; order: 0; width: auto; max-width: calc(var(--page) - 2 * var(--gutter)); margin: 0 auto; aspect-ratio: auto; }
  .hero-lines-wide { display: block; }
  .hero-lines-narrow { display: none; }
  .how-hero-art .hand-node, .how-hero-art .hand-hub, .how-hero-art .hand-tag, .how-hero-art .hand-call { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
  .how-hero .how-hero-art > * { --fig: 6.25rem; }
  .how-hero-art .hand-node { width: 11rem; }
  .how-hero-art .hand-hub { width: 9rem; }
  .how-hero-art .hand-tag { max-width: 11rem; }
}

/* The drawing: figures and their captions in HTML over an SVG of connectors that stretches with its box
   (strokes and dashes keep their size). Every figure is drawn to one scale, --fig tall, set from the
   drawing's own width. The arrowheads live in a zero-size SVG of their own, so they still draw when the
   connectors that first held them are hidden. */
.how-hero-art, .hand-diagram { container-type: inline-size; }
.how-hero-art > *, .hand-diagram > * { --fig: clamp(3.25rem, 12cqw, 5.5rem); }
.hand-diagram { position: relative; aspect-ratio: 640 / 440; }
.hand-lines, .hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hand-lines path, .hero-lines path { vector-effect: non-scaling-stroke; }
.hand-calls { stroke: var(--muted); stroke-dasharray: 9 8; }
/* Today's calls come and go. The two between a crew and the engineer take turns, five seconds each. The
   three to and from the client are the client's teal and quicker, two seconds each, one after another. Two
   or three calls are always under way. Without motion they all show at once. */
.talk.is-client { stroke: var(--teal); color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .talk { animation: talk 10s linear calc(var(--i) * 5s - 10s) infinite; }
  .talk.is-client { animation: talk-quick 4s linear calc(var(--i) * 1.333s - 4s) infinite; }
  .how-hero-art[data-state="with"]:not(.is-intro) .talk { animation-play-state: paused; }
}
@keyframes talk { 0%, 58%, 100% { opacity: 0; } 8%, 50% { opacity: 1; } }
@keyframes talk-quick { 0%, 60%, 100% { opacity: 0; } 10%, 50% { opacity: 1; } }
.hand-flow { stroke: var(--amber); }
.hand-check { stroke: var(--teal); }
.hand-defs { position: absolute; width: 0; height: 0; }
.hand-defs path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h-call { stroke: var(--muted); }
.h-amber { stroke: var(--amber); }
.h-teal { stroke: var(--teal); }

.hand-node, .hand-hub, .hand-tag, .hand-call { position: absolute; left: calc(var(--nx) * 1%); top: calc(var(--ny) * 1%); transform: translate(-50%, -50%); }
.hand-node, .hand-hub, .hand-tag { display: grid; justify-items: center; gap: .4rem; border-radius: var(--r); text-align: center; text-wrap: balance; }
.hand-node { width: 30%; color: var(--ink); font: 500 clamp(.75rem, .9vw, .875rem)/1.25 var(--sans); }
.hand-node.is-client { color: var(--teal); }
.hand-art { display: block; width: auto; height: var(--fig); overflow: visible; }
.hand-art.is-paper { height: calc(var(--fig) * .62); }
.hand-art .w { transform-box: fill-box; transform-origin: center; }
.hand-hub { width: 22%; color: var(--amber); font: 600 clamp(.75rem, .9vw, .875rem)/1.25 var(--sans); }
/* OTTO in its ring, as on the homepage: the ring is as tall as a figure. */
.hand-hub .logo { box-sizing: content-box; width: calc(var(--fig) * .56); padding: calc(var(--fig) * .245); border: 3px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 50%; background: var(--bg); fill: var(--amber); }
.hand-tag { max-width: 34%; color: var(--muted); font: 500 .75rem/1.25 var(--sans); }
.hand-tag .hand-art { transition: opacity .45s var(--ease); }
/* The drawing the engineer would be working on waits, dimmed, while the calls come in. */
.hand-tag.is-waiting { color: var(--subtle); }
.hand-tag.is-waiting .hand-art, .how-hero-art[data-state="today"] .is-project .hand-art { opacity: .4; }
/* A call on its line, in the line's colour. */
.hand-call { color: var(--muted); }
.hand-call svg { display: block; width: auto; height: calc(var(--fig) * .4); }

/* The hero's drawing shows one state at a time, chosen by Today and With OTTO; a change crossfades, the
   training's parts arriving one after another. On a first visit it plays once by itself: Today's calls
   come and go, then the training takes their place, in under five seconds; then it rests on With OTTO. A
   press on either button ends that play. Without motion, or without the script, it shows With OTTO. */
.how-hero-art .t, .how-hero-art .w { transition: opacity .45s var(--ease), scale .45s var(--ease); }
.how-hero-art[data-state="with"] .t { opacity: 0; }
.how-hero-art[data-state="today"] .w { opacity: 0; scale: .94; }
@media (prefers-reduced-motion: no-preference) {
  .how-hero-art[data-state="with"] .w { transition-delay: calc(.2s + var(--d, 0s)); }
  .how-hero-art[data-state="today"] .t { transition-delay: calc(.15s + var(--d, 0s)); }
  .how-hero-art.is-intro .hand-node, .how-hero-art.is-intro .hand-tag { animation: hero-in .5s var(--ease) both; }
  .how-hero-art.is-intro .t { animation: hero-today 2.4s var(--ease) var(--d, 0s) both; }
  .how-hero-art.is-intro .w { animation: hero-with .7s var(--ease) calc(2.2s + var(--d, 0s)) both; }
}
@media (prefers-reduced-motion: reduce) {
  .how-hero-art .t, .how-hero-art .w { transition: none; }
}
@keyframes hero-in { from { opacity: 0; } }
@keyframes hero-today { 0% { opacity: 0; } 18% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-with { from { opacity: 0; scale: .94; } }

/* Step by step: the flow dialog's frame, the tabs held under its title, each drawing beside its story and
   numbered steps. The steps play one after another by themselves, each lighting the part it describes
   with the focus ring's outline; pointing at a step or focusing it holds the play there, and it carries
   on from that step afterwards. Full screen on a phone. */
/* Its head: the title in the page's own headline face, Today and With OTTO right beside it, Close at the
   far end. With OTTO is amber, and fills amber while it is shown, as on the homepage's problem pictures. */
.handover-view .flowmodal-top { grid-template-columns: auto auto minmax(0, 1fr); gap: .75rem 1.5rem; padding-block: .5rem; }
.handover-view .flowmodal-top h1 { font: 600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.handover-view .flowmodal-close { justify-self: end; }
.handover-view .chips { margin: 0; padding: .125rem; }
.handover-view .chip[aria-selected="true"] { font-weight: 600; }
.handover-view .chip.is-otto { color: var(--amber); }
.handover-view .chip.is-otto:hover { background: var(--amber-tint); color: var(--amber); }
.handover-view .chip.is-otto[aria-selected="true"] { background: var(--amber); color: var(--on-amber); }
@media (max-width: 39.99rem) {
  .handover-view .flowmodal-top { grid-template-columns: minmax(0, 1fr) auto; }
  .handover-view .chips { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .hand-panel:not([hidden]) { animation: hand-in .35s var(--ease); }
}
@keyframes hand-in { from { opacity: 0; } }
.hand-diagram [data-part].is-lit { outline: 2px solid var(--amber); outline-offset: 3px; }
.hand-hub.is-lit { outline: 0; }
.hand-hub.is-lit .logo { outline: 2px solid var(--amber); outline-offset: 3px; }
.handover-view .hand-more h3 { font: 600 var(--fs-lead)/1.3 var(--display); letter-spacing: -0.012em; }
.handover-view .hand-more p { margin-top: .75rem; max-width: 46ch; color: var(--ink); }
.hand-steps { display: grid; gap: .35rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.hand-steps li { position: relative; padding: .55rem .75rem .55rem 2.25rem; border-radius: var(--r); color: var(--ink); font: 400 var(--fs-small)/1.45 var(--sans); cursor: default; counter-increment: step; transition: background-color .25s var(--ease), color .25s var(--ease); }
.hand-steps li::before { content: counter(step); position: absolute; left: .75rem; top: .55rem; width: 1rem; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; transition: color .25s var(--ease); }
.hand-steps li:hover, .hand-steps li:focus-visible, .hand-steps li.is-on { background: var(--surface); color: var(--amber); }
.hand-steps li:hover::before, .hand-steps li:focus-visible::before, .hand-steps li.is-on::before { color: var(--amber); }
@media (min-width: 64rem) {
  .handover-view .hand-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .handover-view .hand-diagram { grid-row: 1 / span 2; }
  .handover-view .hand-more { grid-column: 2; }
  .handover-view .hand-steps { grid-column: 2; }
}
@media (max-width: 63.99rem) {
  .handover-view .hand-more { margin-top: 1.25rem; }
}

@media (max-width: 39.99rem) {
  .how-hero-art, .hand-diagram { aspect-ratio: 1; }
  .hand-lines, .hero-lines { stroke-width: 2.5; }
  .hand-node, .hand-hub, .hand-tag { gap: .25rem; font-size: .7rem; }
  .hand-node { width: 31%; }
  .hand-hub { width: 26%; }
  .handover-view { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@media (forced-colors: active) {
  .hand-lines path, .hero-lines path { stroke: CanvasText; }
  .hand-diagram [data-part].is-lit { outline-color: Highlight; }
}