/* Archetypes web system: the device. A portal is a sharp-cornered opening; nothing draws an outline round it.
   The door's light (section 18, round seven's option B) is its own sky, mirrored on the floor and skewed 20 degrees
   toward the copy. The only soft things on any page are the reflection's far layer and the glow, both sky-coloured. */

/* Zero specificity, so a page can place a portal (position: absolute; inset: 0) without fighting this rule. */
:where(.portal) { position: relative; overflow: hidden; }
.portal > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* The door: the page sets its width and height (1:2, a whole number of pixels tall, so the foot sits on a pixel row).
   The light hangs off its foot and is never clipped by its section; the page clips nothing but the viewport's edge. */
.door { position: relative; }
.door-sky { position: absolute; inset: 0; z-index: 3; }
.door > canvas.door-drift { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
/* Each layer starts one row above the foot, under the door's sky, and skews about the foot row (transform-origin 0 1px):
   the skew softens a layer's top edge, and that softened row is the hidden one. */
.door-refl { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; transform-origin: 0 1px; transform: skewX(calc(-1 * var(--light-skew))); pointer-events: none; }
.door.to-right .door-refl { transform: skewX(var(--light-skew)); }
.door-refl canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* Near layer: sharp, --light-reach (0.4) of the door's height, masked from --light-near (60 %) to 0: round seven's
   option B exactly, over a sky of its own, flipped (device.js). It begins on the foot row at the door's x extent, a
   step lighter than the door, and fades; no gap, no sill. */
.door-refl.near { z-index: 2; height: calc(var(--light-reach) * 100% + 1px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--light-near)), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--light-near)), rgba(0, 0, 0, 0)); }
/* Far layer, behind it: --light-far-reach (0.7) of the height, blurred --light-blur (22 px), masked from --light-far
   (45 %) to 0. */
.door-refl.far { z-index: 1; height: calc(var(--light-far-reach) * 100% + 1px); filter: blur(var(--light-blur));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--light-far)), rgba(0, 0, 0, 0)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--light-far)), rgba(0, 0, 0, 0)); }
/* The glow, unchanged from round eight: sky-light, radial, blurred 18 px, 1.6 door widths wide and 0.3 door heights
   tall, centred on the foot. */
.door-glow { position: absolute; z-index: 0; left: -30%; width: 160%; top: 85%; height: 30%; pointer-events: none;
  background: radial-gradient(closest-side, var(--sky-light), rgba(222, 242, 252, 0)); filter: blur(18px); }

/* ---------- How a study works (walk.js): 500 vh with a sticky stage. The step list in columns 1 to 3; the question
   block and the stage in columns 5 to 12, the stage at 10:7 on the content's right edge, no taller than 64 svh; the
   group centred in the viewport. Heading to list 40, list rows 24, number to title 12, title to its line 8; question to
   headline 12, headline to stage 24. Under 1024 the list stands over the stage at the content width. ---------- */
.walk { position: relative; height: 500vh; }
/* The pinned view keeps the nav's 64 px band clear, so the bar can return over it on a scroll up without covering the heading. */
.walk-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-top: 64px; }
.walk-grid { height: 100%; align-content: safe center; align-items: start; }
.walk-steps { grid-column: 1 / span 3; opacity: var(--list, 1); }
.walk-main { grid-column: 5 / span 8; display: flex; flex-direction: column; align-items: flex-end; }
.walk-q { align-self: stretch; margin-bottom: var(--s5); }
.walk-q .wq-q { color: var(--ink-2); }
.walk-q .wq-h { margin-top: var(--s3); font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; }
.walk-q .wq-k { font: 500 var(--ui)/1 var(--sans); color: var(--ink-2); margin-right: var(--s1); vertical-align: 0.2em; }
.walk-q > * { opacity: 0; }
/* the stage's height is the room under the heading: 64 svh, and never more than the view less 200 (the nav's 64, the
   question block and the gaps around the group), so a short view shrinks the chart rather than cutting it */
.walk-box { width: min(100%, calc(64svh * 10 / 7), calc((100svh - var(--s13)) * 10 / 7)); aspect-ratio: 10 / 7; }
.walk-canvas { position: absolute; left: 0; top: 0; pointer-events: none; outline: none; }
.walk-canvas:focus-visible { outline: none; }
.walk-pin:has(.walk-canvas:focus-visible) .walk-box { outline: 2px solid var(--ink); outline-offset: 6px; }
/* The step list is A.steps' layout, compact (round ten): number above title above line, 12 and 8 apart, 48 between
   steps (controls.css .steps). */
.walk-h + .walk-list { margin-top: var(--s7); }
/* The current step in ink, the others ink-3. --on (0 to 1) is set from the scroll by walk.js, crossing over 0.02 of the
   progress at each breakpoint, so the list is a function of the scroll too and never runs on a clock. */
.wstep { --on: 0; }
.wstep.on { --on: 1; }
.wstep .step-n { color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--ink-3)); }
.wstep .step-t { color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--ink-3)); }
.wstep .step-x { color: color-mix(in srgb, var(--ink-2) calc(var(--on) * 100%), var(--ink-3)); }
/* A still (A.still): the canvas lies over the box, out of flow, so drawing it never changes the box it is sized to. */
.still > .still-canvas { position: absolute; left: 0; top: 0; display: block; }
/* The overlay on the stage: the result, the axis words and the sample line, placed by walk.js. */
.walk-over { position: absolute; pointer-events: none; }
.walk-over > * { position: absolute; opacity: 0; }
.walk-over .wo-big { display: flex; align-items: baseline; gap: var(--s5); white-space: nowrap; }
.walk-over .wo-n { font-size: 56px; }
.walk-over .wo-a { font: 500 24px/1 var(--sans); font-feature-settings: var(--num-features); color: var(--ink-2); }
.walk-over .wo-l { margin-top: var(--s4); color: var(--ink-2); font-weight: 400; }
/* The two options under the share: the letter, a tally, the share, 8 apart; on a stage 900 or wider the headline
   stands between the letter and the tally, so the rows never run into the pile on a narrower stage. */
.walk-over .wo-cmp { margin-top: var(--s4); display: grid; row-gap: var(--s2); width: max-content; max-width: 100%; }
.walk-over .wo-cmp li { display: grid; grid-template-columns: 14px 96px 40px; column-gap: var(--s3); align-items: center; font: 400 14px/1 var(--sans); font-feature-settings: var(--num-features); }
.walk-over .wo-k { font-weight: 500; color: var(--ink); }
.walk-over .wo-t { display: none; color: var(--ink-2); white-space: nowrap; }
.walk-over .wo-cmp .wo-v { text-align: right; }
.walk-over.wide .wo-cmp li { grid-template-columns: 14px auto 120px 40px; }
.walk-over.wide .wo-t { display: block; }
.walk-over.narrow .wo-cmp li { grid-template-columns: 14px 72px 40px; }
/* The survey still's bands: each line in white over the sky, the share and the answer on the first row at the UI
   size, one persona's reason on the second, 8 apart; the band's marks 12 under. */
.walk-over .wo-grp { display: flex; flex-direction: column; gap: var(--s2); font: 400 var(--body)/1.4 var(--sans); color: #fff; font-feature-settings: var(--num-features); text-wrap: pretty; }
.walk-over .wo-grp .wo-h { display: flex; gap: var(--s3); text-box: trim-both cap alphabetic; }
.walk-over .wo-grp .wo-v { color: #fff; font-weight: 500; }
.walk-over .wo-grp .wo-q { font-size: var(--ui); opacity: 0.85; }
.walk-over .wo-grp .wo-who { opacity: 0.8; }
/* On paper: ink lines, the persona in ink-2. */
.walk-over.paper .wo-grp, .walk-over.paper .wo-grp .wo-v { color: var(--ink); }
.walk-over.paper .wo-grp .wo-q { opacity: 1; }
.walk-over.paper .wo-grp .wo-who { opacity: 1; color: var(--ink-2); }
.walk-over .wo-ax, .walk-over .wo-mean { font: 400 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap; display: flex; gap: var(--s3); font-feature-settings: var(--num-features); }
.walk-over .wo-v { color: var(--ink); font-weight: 500; }
.walk-over .wo-mean { transform: translateX(-50%); }
.walk-over .wo-cap { color: var(--ink-2); text-wrap: pretty; }
/* A narrow stage: the numbers on the first row with the mean, the words on the second, 8 below. */
.walk-over.narrow .wo-ax { flex-direction: column; gap: var(--s2); }
.walk-over.narrow .wo-ax.r { align-items: flex-end; }
.walk-over.narrow .wo-ax.r .wo-v { order: -1; }
/* The persona's line (A.placeTip): a small white panel with a 1 px line, beside the mark, 160 ms in and out. The walk,
   a portal with hover and the drift share it: right of the mark if it fits the box, else left, else above it. */
.walk-tip, .mark-tip { position: absolute; z-index: 6; left: 0; top: 0; padding: var(--s2) var(--s3); background: var(--page); box-shadow: inset 0 0 0 1px var(--ink);
  font: 400 14px/1.3 var(--sans); color: var(--ink); white-space: nowrap; transform: translateY(-50%); opacity: 0; pointer-events: none;
  transition: opacity var(--t1) var(--ease); }
.walk-tip { z-index: 2; }
.walk-tip.flip, .mark-tip.flip { transform: translate(-100%, -50%); }
.walk-tip.up, .mark-tip.up { transform: translateY(-100%); white-space: normal; text-wrap: pretty; }
.walk-tip.on, .mark-tip.on { opacity: 1; }
.has-hover { cursor: default; }
/* Stills and reduced motion: one viewport, in flow. Reduced motion: unpinned, at p = 1, every step in ink. */
.walk-still { height: auto; }
.walk-still .walk-pin { position: relative; }
.walk-still .walk-box { width: 100%; }   /* not pinned, the stage keeps its columns' width whatever the view's height */
@media (max-width: 1023px) {
  .walk-steps, .walk-main { grid-column: 1 / -1; }
  .walk-main { margin-top: var(--s6); align-items: stretch; }
  .walk-box { width: 100%; }
  .walk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (max-width: 767px) {
  .walk-h + .walk-list { margin-top: var(--s5); }
  .walk-list { column-gap: var(--s4); }   /* three abreast over the stage, numbers over their titles, the lines hidden */
  .wstep .step-x { display: none; }
  .walk-main { margin-top: var(--s5); }
  .walk-q .wq-h { font-size: 20px; }
}
/* Under 480 three titles abreast wrap to two lines each in 358 px, so the steps stand in one column, the number beside
   its title, 12 between steps, the list-row gap (round twelve). */
@media (max-width: 479px) {
  .walk-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .wstep { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); align-items: start; }
  .wstep .step-t { margin-top: 0; }
  .walk-box { aspect-ratio: 3 / 4; }
  .walk-over .wo-n { font-size: 40px; }
  .walk-over .wo-a { font-size: 17px; }
}