/* =====================================================================================================
   Duit website: the demo page (SPEC6), demo.html. Body in the build's parts/demo-page.html; behaviour js/tour.js,
   which builds the Duit window and the map from js/tour-data.js. Needs site.css (tokens, buttons, glyphs, .sr) and
   window.css (.dw-*) first. Sky ground for the whole walkthrough.

   PAGE     .tour (main) > .tour-intro (eyebrow with the Example tag, h1, lede, the note) · .tour-stage · .tour-end
   STAGE    .tour-bar (sticks under the header: .tour-steps, 1 Set up · 2 Ask · 3 Who sees what, aria-current="step";
            .tour-ctl, Back, Play/Stop, Next) · .tour-scene (k label, h2, line; .tour-scene-a: the owner's button
            .tour-follow, Replay) · .tour-picks (act 2: the four cards; act 3: the four people) · .tour-panes
            (.tour-pane-win: the Duit window; .tour-pane-map: the map) · .tour-after (act 3: three facts) ·
            .tour-live (polite live region). [data-act] on .tour-stage says which act is shown.
            Wide (>= 1180px) the window and the map sit side by side; narrower they stack, window first. Phones
            (< 760px): the bar opens up and only the controls stick.
   WINDOW   a .dw (window.css) with real controls in it, so not aria-hidden. .tw-* inside it: Setup (.ts-*), the
            conversation (.dw-user, .dw-duit, chips as button.dw-cite, the leads table .tw-table, the draft and
            its confirm bar), a static composer, the source drawer (.tw-drawer, a sheet from the window's foot)
            and the toast. Mike's window is .is-phone, in a phone frame (.tw-phone; on phones, rounder corners).
   MAP      .tm, role="img" (js keeps its label in words). .tm-grid lays out three columns (tools · Duit ·
            people) when the map is 700px or wider (container query; --tm-flow: row), else a stack (people ·
            Consortium · Omphalos · tools; --tm-flow: column). svg.tm-wires over the nodes (the check badge over
            it): js draws every wire from the nodes' boxes (1px, on the half pixel), a lit copy of each in the
            accent, square ports on the boxes' edges, and the moving packets with what came back. In three columns
            each layer keeps a bus inside its outer edge (Omphalos's left, Consortium's right), so the layers pad
            their text clear of it. States: .is-off (not connected: dashed, its name and "not connected"),
            .is-read (read for this answer: its border, its label in the accent), .is-shut (a room asked for that
            the person may not read), .is-ask (the person asking), .is-dim (act 3: out of that person's reach,
            still 4.5:1), .is-reach (in reach). The accent is only for data on the move and what came back.
   MOTION   Every transition here stops under html.motion-off and reduced motion (site.css). js moves packets and
            draws lines only while motion is on; otherwise the finished state shows at once. */

.tour { padding-block: clamp(28px, 3.6vw, 52px) clamp(56px, 7vw, 96px); }

/* ---------- Intro ---------- */
.tour-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 48px; align-items: end; }
@media (min-width: 980px) { .tour-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); } }
.tour-intro .eyebrow { display: flex; align-items: center; gap: 12px; }
.tour-intro h1 { font-size: clamp(27px, 1.7vw + 15px, 42px); line-height: 1.1; max-width: 22ch; }
.tour-intro .lede { font-size: clamp(16px, .2vw + 15px, 18px); }
.tour-tag {
  display: inline-block; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 4px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
}
.tour-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--faint); font-size: 14px; line-height: 1.5; color: var(--soft); }

.tour-nojs { margin-top: 32px; max-width: 70ch; color: var(--soft); }
.tour-nojs ol { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 8px; }
.tour-nojs b { font-weight: 600; color: var(--text); }
.tour-stage:not([hidden]) ~ .tour-nojs, .has-tour .tour-nojs { display: none; }

/* ---------- Stage ---------- */
.tour-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(24px, 3vw, 40px); }

/* the bar: the stepper and the controls, stuck under the header while the stage scrolls by */
.tour-bar {
  position: sticky; z-index: 6; top: var(--head-h); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding-block: 8px; background: var(--bg); border-bottom: 1px solid var(--faint);
}

/* the stepper: three acts joined by a hairline */
.tour-steps ol { display: flex; align-items: center; min-width: 0; }
.tour-steps li { display: flex; align-items: center; min-width: 0; }
.tour-steps li + li::before { content: ""; flex: none; width: clamp(14px, 3.2vw, 44px); height: 1px; margin: 0 12px; background: var(--line-strong); }
.tour-step {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border: 0; background: none;
  font-family: var(--mono); font-size: 13px; line-height: 1.25; letter-spacing: .01em; color: var(--soft); text-align: left;
  transition: color .15s;
}
.tour-step-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--soft); transition: background-color .2s, border-color .2s, color .2s;
}
.tour-step:hover { color: var(--text); }
.tour-step.is-done .tour-step-n { border-color: var(--soft); color: var(--text); }
.tour-step[aria-current="step"] { color: var(--text); }
.tour-step[aria-current="step"] .tour-step-n { background: var(--text); border-color: var(--text); color: var(--bg); }

.tour-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.tour-ctl svg, .tour-scene-a svg { width: 14px; height: 14px; }
.tour-back svg { margin-left: -4px; }
.tour-next svg { margin-right: -4px; }
.tour-ctl button:disabled { cursor: default; transform: none; }
/* off reads as off: --dim is the site's token for disabled states */
.tour-ctl .btn-primary:disabled, .tour-ctl .btn-ghost:disabled { background: transparent; border-color: var(--faint); color: var(--dim); }
.tour-play { min-width: 92px; }
.tour-i-stop, .tour-play.is-on .tour-i-play { display: none; }
.tour-play.is-on .tour-i-stop { display: block; }

/* the scene line: what this step is, the owner's button and Replay */
.tour-scene { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-top: 4px; }
.tour-scene-copy { min-width: 0; }
.tour-scene-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tour-scene-h { margin-top: 0; font-size: clamp(19px, .5vw + 16px, 23px); line-height: 1.25; scroll-margin-top: calc(var(--head-h) + 72px); }
.tour-scene-h:focus { outline: none; }
.tour-scene-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.tour-scene-p { margin-top: 4px; max-width: 96ch; font-size: 15px; line-height: 1.55; color: var(--soft); }
.tour-scene-a { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tour-scene-a [hidden] { display: none; }
.tour-follow::before { content: "\2192"; content: "\2192" / ""; order: 1; margin-left: -2px; font-weight: 400; } /* ::after keeps the 44px target */

/* act 2: the four pain points (number, title, the pain in a line). act 3: the four people */
.tour-picks:empty { display: none; }
.tour-cards, .tour-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tour-card, .tour-pick {
  position: relative; display: grid; align-content: start; min-width: 0; min-height: 44px; padding: 9px 13px 10px;
  border: 1px solid var(--faint); border-radius: 8px; background: transparent; color: var(--soft); text-align: left;
  transition: border-color .15s, background-color .15s;
}
.tour-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.tour-card:hover, .tour-pick:hover { border-color: var(--line-strong); }
.tour-card[aria-current="step"], .tour-pick[aria-pressed="true"] { border-color: var(--soft); background: var(--surface); }
.tour-card-n { font-family: var(--mono); font-size: 12px; line-height: 20px; letter-spacing: .06em; color: var(--soft); }
.tour-card[aria-current="step"] .tour-card-n { color: var(--text); }
.tour-card-t { font-size: 14.5px; font-weight: 600; line-height: 20px; color: var(--text); }
.tour-card-p { grid-column: 2; margin-top: 2px; font-size: 13px; line-height: 1.45; }
.tour-pain { display: none; }
.tour-pick { grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 9px 12px; }
.tour-pick-i {
  grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text);
}
.tour-pick[aria-pressed="true"] .tour-pick-i { border-color: var(--text); }
.tour-pick-n { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text); }
.tour-pick-r { font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-pick-a::before { content: " · "; content: " · " / ""; }

/* ---------- The two panes ---------- */
.tour-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 1180px) {
  .tour-panes { grid-template-columns: minmax(320px, 344px) minmax(0, 1fr); gap: 20px; }
}
.tour-pane-win { display: flex; flex-direction: column; min-width: 0; height: 540px; }
/* side by side, the map sets the row's height and the window fills it, scrolling inside (contain: size: a long
   Setup or answer never grows the row) */
@media (min-width: 1180px) { .tour-pane-win { height: auto; min-height: 480px; contain: size; } }
.tour-pane-map { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- The Duit window ---------- */
/* clip, not hidden: find-in-page or a scrollIntoView can never scroll the frame itself and leave the composer adrift */
.tour-win { flex: 1 1 auto; min-height: 0; border-color: var(--line-strong); overflow: hidden; overflow: clip; }
.tour-win .dw-bar { height: 38px; font-size: 14px; }
.tour-win .dw-tag { border-color: var(--line-strong); }
.tw-body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent;
}
.tour-win :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-win button { font: inherit; color: inherit; }
.tour-win button.dw-cite { color: var(--soft); }
.tour-win button.dw-btn-primary { color: var(--on-accent); }

/* Mike's phone */
.tour-pane-win.is-phone { align-items: center; }
.tw-phone {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: min(318px, 100%); padding: 7px;
  border: 1px solid var(--line-strong); border-radius: 30px; background: var(--bg);
}
.tw-phone::before { content: ""; flex: none; align-self: center; width: 54px; height: 5px; margin: 2px 0 7px; border-radius: 3px; background: var(--faint); }
.tw-phone .tour-win { border-radius: 23px; border-color: var(--faint); }
.tw-phone .dw-bar { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
.tw-phone .dw-lights { display: none; }
.tw-phone .dw-title { justify-self: start; }

/* Setup */
.ts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ts-h { font-size: 16px; font-weight: 600; line-height: 1.3; }
.ts-sub { margin-top: 2px; font-size: 12.5px; color: var(--soft); }
.ts-all { flex: none; }
.ts-group + .ts-group { margin-top: 4px; }
.ts-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--faint); }
.ts-label span:last-child:not(:first-child) { letter-spacing: .04em; text-transform: none; }
.ts-tools { margin: 0; padding: 0; list-style: none; }
.ts-tool {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--faint);
}
.ts-name { font-size: 14px; line-height: 1.35; }
.ts-what { grid-column: 1 / -1; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--soft); }
.ts-btn, .ts-all {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; font-size: 12.5px; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ts-btn:hover, .ts-all:hover { background: var(--surface); border-color: var(--soft); }
.ts-btn::after, .ts-all::after { content: ""; position: absolute; inset: -7px -2px; }
/* the first thing to press, until a tool connects */
.tour-win .ts-all.is-go { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.tour-win .ts-all.is-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ts-btn[aria-disabled="true"], .ts-all[aria-disabled="true"] {
  border-color: transparent; background: transparent; color: var(--soft); cursor: default; padding-inline: 0;
}
.ts-btn[aria-disabled="true"] .g, .ts-all[aria-disabled="true"] .g { margin-right: 2px; }
.ts-btn.is-on { min-width: 1.1ch; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th, .ts-table td { padding: 8px 0; border-bottom: 1px solid var(--faint); text-align: left; vertical-align: baseline; font-weight: 400; }
.ts-table th { color: var(--text); padding-right: 12px; }
.ts-table td { color: var(--soft); text-align: right; }
.ts-ai { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ts-ai li { display: flex; align-items: center; gap: 9px; min-height: 36px; border-bottom: 1px solid var(--faint); font-size: 13px; }
.ts-agent { color: var(--soft); }
.ts-fine { margin-top: 8px; font-size: 12.5px; color: var(--soft); }
.ts-ini, .tw-ini {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text);
}

/* the conversation */
.tour-win .dw-user { margin-top: 2px; }
.tour-win .dw-who-user { font-size: 12.5px; }
.tour-win .dw-who { font-size: 12.5px; margin-bottom: 4px; }
/* who answered on one line, what Duit checked on the next: a wrap never leaves a "·" at a line's end */
.tour-win .dw-who > span:last-child { flex-basis: 100%; }
.tour-win .dw-who > span[aria-hidden]:nth-last-child(2) { display: none; }
.tour-win .dw-who .g { margin-right: .25em; }
.tour-win .dw-line { font-size: 14.5px; line-height: 1.62; overflow-wrap: anywhere; }
.tw-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--soft); animation: tw-blink 1s steps(2) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.tour-win .dw-cites { margin-top: 10px; }
button.dw-cite {
  position: relative; background: transparent; cursor: pointer; font-size: 12px; transition: background-color .15s, border-color .15s;
}
button.dw-cite:hover, button.dw-cite[aria-expanded="true"] { background: var(--sel); border-color: var(--soft); }
.tw-rise { animation: tw-rise .45s var(--ease) both; }
@keyframes tw-rise { from { opacity: 0; transform: translateY(6px); } }

.tw-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.tw-table th { padding: 0 8px 6px 0; border-bottom: 1px solid var(--faint); text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.tw-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--faint); vertical-align: top; color: var(--soft); }
.tw-table th:last-child, .tw-table td:last-child { padding-right: 0; }
.tw-table td:first-child { color: var(--text); }
.tw-table .tw-via { display: block; font-family: var(--mono); font-size: 11px; color: var(--soft); }
.tw-table tr.is-flag td { color: var(--text); }
.tw-table tr.is-flag .g { margin-right: 5px; }

.tour-win .dw-draft { margin-top: 12px; }
.tour-win .dw-confirm { margin-top: 10px; }
.tour-win button.dw-btn-primary { border: 0; cursor: pointer; font-size: 13px; transition: background-color .15s; }
.tour-win button.dw-btn-primary:hover { background: var(--accent-hover); }

/* the composer: the look of the app's, not a field (the questions here are scripted) */
.tw-compose { flex: none; padding: 0 14px 14px; }
.tw-compose .dw-composer { padding: .5em .5em .5em .9em; }
.tw-compose .dw-ph { font-size: 13.5px; }
.tw-compose .dw-agent { flex: none; }

/* the source drawer: a sheet from the window's foot */
.tw-drawer {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 72%; display: flex; flex-direction: column;
  background: var(--bg); border-top: 1px solid var(--line-strong); border-radius: 12px 12px 0 0;
  transform: translateY(102%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s .32s;
}
.tw-drawer.is-open { transform: none; visibility: visible; transition: transform .32s var(--ease); }
.tw-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 4px 4px 4px 16px; border-bottom: 1px solid var(--faint); }
.tw-drawer-t { font-size: 13.5px; min-width: 0; }
.tw-drawer-t b { font-weight: 400; color: var(--text); }
.tw-drawer-t span { color: var(--soft); }
.tw-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--soft);
}
.tw-x:hover { background: var(--surface); color: var(--text); }
.tw-x svg { width: 14px; height: 14px; }
.tour-win .tw-x:focus-visible { outline-offset: -4px; }
.tw-drawer-body { overflow-y: auto; padding: 14px 16px 16px; }
.tw-passage {
  padding: 11px 13px; background: var(--surface); border: 1px solid var(--faint); border-radius: 8px;
  font-size: 13.5px; line-height: 1.85; color: var(--soft);
}
.tw-passage mark { padding: 1px 3px; border-radius: 2px; background: var(--mark); color: var(--text); }
.tw-note { margin-top: 10px; font-size: 12px; color: var(--soft); }
.tw-scrim { position: absolute; z-index: 2; inset: 0; background: color-mix(in oklab, var(--bg) 55%, transparent); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.tw-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .25s; }

/* the toast, over the composer (a static look-alike): right under the Confirm that called it, never over it */
.tw-toast {
  position: absolute; z-index: 4; bottom: 12px; left: 50%; width: max-content; max-width: calc(100% - 24px);
  padding: 9px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 13px; line-height: 1.5; opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
  transition: opacity .2s, transform .3s var(--ease);
}
.tw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tw-toast-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--soft); }

/* act 3: who can see what */
.tw-whoami { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--faint); border-radius: 8px; background: var(--surface); }
.tw-whoami-n { font-size: 14px; }
.tw-whoami-r { font-size: 12.5px; color: var(--soft); }
.tw-areas { margin: 0; padding: 0; list-style: none; }
.tw-areas li {
  display: grid; grid-template-columns: 1.1ch minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--faint); font-size: 13.5px;
}
.tw-areas .tw-a-who { font-size: 12.5px; color: var(--soft); }
.tw-areas li.is-no .tw-a-n { color: var(--soft); }
.tw-sum { font-size: 13px; line-height: 1.6; color: var(--soft); }

/* ---------- The map ---------- */
.tm {
  position: relative; container: tm / inline-size; min-width: 0;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
}
.tm-top, .tm-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 0 14px;
  font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--soft);
}
.tm-top { min-height: 36px; border-bottom: 1px solid var(--faint); letter-spacing: .12em; text-transform: uppercase; }
/* the legend: under the map when it is narrow; in the top line, at its right, when there is room */
.tm-legend { min-height: 34px; padding-block: 7px; border-top: 1px solid var(--faint); }
@container tm (min-width: 720px) {
  .tm-legend { position: absolute; top: 0; right: 0; min-height: 36px; padding-block: 0; border-top: 0; }
}
.tm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tm-legend i { font-style: normal; }
.tm-lg-line { width: 18px; height: 1px; background: var(--line-strong); }
.tm-lg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.tm-lg-tag { padding: 0 4px; border: 1px solid var(--faint); border-radius: 3px; font-size: 11px; line-height: 15px; }

.tm-grid { --tm-flow: column; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 34px; padding: 16px 14px 18px; }
/* the wires, over the nodes; the check badge over them, so a route runs through it like a checkpoint */
.tm-wires { position: absolute; z-index: 2; top: 0; left: 0; overflow: visible; pointer-events: none; }
.tm-col, .tm-duit { position: relative; min-width: 0; }
.tm-h {
  margin-bottom: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
.tm-list { margin: 0; padding: 0; list-style: none; }

/* nodes */
.tm-node {
  position: relative; min-width: 0; background: var(--bg); border: 1px solid var(--faint); border-radius: 6px;
  transition: border-color .3s, background-color .3s, opacity .35s;
}
.tm-node.is-off { border-style: dashed; background: transparent; }
.tm-person.is-off > * { visibility: hidden; }
/* dimmed (act 3): still 4.5:1 for every line of text in it (.65 of --soft on --bg), and dashed so it reads as out */
.tm-node.is-dim { opacity: .65; border-style: dashed; }
.tm-tool { padding: 3px 10px 4px; }
.tm-main { display: grid; min-width: 0; }
.tm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.45; color: var(--text); }
.tm-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--soft); }
.tm-val { color: var(--accent); }
.tm-sub .tm-val:empty, .tm-sub:has(.tm-val:not(:empty)) .tm-what, .tm-offt { display: none; }
/* not connected: the tool's name and "not connected"; its rooms keep their place, unseen */
.tm-tool.is-off .tm-name { color: var(--soft); }
.tm-tool.is-off .tm-what { display: none; }
.tm-tool.is-off .tm-offt { display: inline; }
.tm-tool.is-off .tm-rooms { visibility: hidden; }
.tm-tool.is-read { border-color: var(--soft); }
.tm-tool.is-reach { border-color: var(--line-strong); }

/* Pacific Solutions' rooms, as a small tree */
.tm-rooms { margin: 2px 0 0; padding: 0; list-style: none; }
.tm-room {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 21px; padding-left: 16px;
  font-size: 12px; color: var(--soft); transition: color .3s, opacity .35s;
}
.tm-room::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; border-left: 1px solid var(--faint); }
.tm-room:last-child::before { bottom: 50%; }
.tm-room::after { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; border-top: 1px solid var(--faint); transition: border-color .3s; }
.tm-room-n { flex: none; }
.tm-room .tm-val { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; }
.tm-room .tm-val:empty { display: none; }
.tm-lock {
  margin-left: auto; flex: none; padding: 0 5px; border: 1px solid var(--faint); border-radius: 3px;
  font-family: var(--mono); font-size: 11px; line-height: 15px; color: var(--soft); white-space: nowrap;
  transition: border-color .3s, color .3s;
}
.tm-lock[hidden] { display: none; }
.tm-room .tm-val:not(:empty) ~ .tm-lock { display: none; }
.tm-room.is-read { color: var(--text); }
.tm-room.is-read::after { border-color: var(--accent); }
/* asked for, not open to the one asking: the room stays dark, its tag stands out */
.tm-room.is-shut .tm-lock { border-color: var(--soft); color: var(--text); }
.tm-room.is-dim { opacity: .65; }

/* people */
.tm-person { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 7px 9px; }
.tm-ini {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text); transition: border-color .3s, background-color .3s, color .3s;
}
.tm-pname { font-size: 13px; line-height: 1.35; color: var(--text); }
.tm-prole, .tm-pagent { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--soft); }
.tm-person.is-ask { border-color: var(--soft); background: var(--surface); }
.tm-person.is-ask .tm-ini { border-color: var(--text); background: var(--text); color: var(--bg); }
/* before Google Workspace: one slot where the people will be */
.tm-people { position: relative; }
.tm-ppl-wait {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 27px; display: grid; place-items: center; padding: 8px 12px;
  border: 1px dashed var(--faint); border-radius: 6px; background: var(--bg);
  font-size: 12px; line-height: 1.45; color: var(--soft); text-align: center; text-wrap: balance;
}
.tm-ppl-wait[hidden] { display: none; }

/* Duit: Omphalos and Consortium */
.tm-duit { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cons" "h" "omph"; row-gap: 0; }
.tm-h-duit { grid-area: h; display: flex; align-items: center; height: 34px; margin: 0; }
.tm-h-duit span { padding-right: 8px; }
.tm-layer {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 12px 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.tm-omph { grid-area: omph; }
.tm-cons { grid-area: cons; }
.tm-layer-n { font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.tm-layer-s { font-size: 12px; line-height: 1.45; color: var(--soft); }
.tm-layer-stat { margin-top: 2px; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--soft); }
.tm-mem {
  align-self: flex-start; margin-top: 6px; padding: 3px 7px; border: 1px solid var(--faint); border-radius: 4px; background: var(--bg);
  font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--soft);
}
.tm-check {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.1ch minmax(0, 1fr); column-gap: 6px; row-gap: 3px; margin-top: 8px; padding: 7px 8px 8px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12px; line-height: 1.35;
  transition: border-color .3s;
}
.tm-check:not(.is-on) { border-style: dashed; border-color: var(--line-strong); }
.tm-check:not(.is-on) .tm-check-who { color: var(--soft); }
.tm-check:not(.is-on) .tm-check-may { display: none; }
.tm-check > .g:first-child { grid-row: span 2; line-height: 1.35; }
.tm-check [hidden] { display: none; }
.tm-check-who { color: var(--text); }
.tm-check-may { display: block; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--soft); }
.tm-check-no { margin-top: 3px; color: var(--text); }
.tm-check > .g:nth-child(4) { margin-top: 3px; line-height: 1.35; }

/* wires (js), over the nodes */
.tm-w { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: 0; transition: opacity .3s, stroke .35s; }
.tm-w.is-on { opacity: 1; }
.tm-w.is-reach { stroke: var(--soft); }
.tm-w.is-dim { stroke: var(--faint); }
.tm-wl { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; }
.tm-wl.is-lit { opacity: 1; }
.tm-port { fill: var(--line-strong); opacity: 0; transition: opacity .3s, fill .3s; }
.tm-port.is-on { opacity: 1; }
.tm-port.is-reach { fill: var(--soft); }
.tm-port.is-dim { fill: var(--faint); }
.tm-port.is-lit { fill: var(--accent); }
.tm-routes { visibility: hidden; }
.tm-routes path { fill: none; stroke: none; }
.tm-pk-halo { fill: var(--accent); opacity: .16; }
.tm-pk-dot { fill: var(--accent); }
/* what came back, riding its packet */
.tm-pk-r { fill: var(--bg); stroke: color-mix(in oklab, var(--accent) 55%, var(--bg)); stroke-width: 1; }
.tm-pk-t { font-family: var(--mono); font-size: 11px; fill: var(--accent); }

/* stacked map (default, under 700px): people, Consortium, Omphalos, tools. People four across, their wires meeting
   over Consortium; one line straight down through both layers; tools in a list, each on its own lane in the
   channel to its left (the lanes are js's). A tool's name and short line share a row. */
.tm-people .tm-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tm-people .tm-person { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 1px; padding: 8px 4px 7px; text-align: center; }
.tm-people .tm-ini { grid-row: auto; margin-bottom: 4px; }
.tm-people .tm-prole { overflow-wrap: break-word; }
@container tm (max-width: 340px) {
  .tm-people .tm-person { padding-inline: 2px; }
}
.tm-tools .tm-list { display: grid; gap: 5px; padding-left: 34px; }
.tm-tools .tm-h { padding-left: 34px; }
.tm-layer-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
@container tm (max-width: 699.98px) {
  .tm-grid { row-gap: 26px; padding: 14px 12px 16px; }
  .tm-h { margin-bottom: 6px; }
  .tm-people .tm-person { padding: 6px 3px 5px; }
  .tm-people .tm-ini { margin-bottom: 3px; }
  .tm-h-duit { height: 26px; }
  .tm-layer { padding: 9px 12px 10px; gap: 3px; }
  /* room for a question's two lines from the start: the stack never shifts when the badge fills */
  .tm-check { min-height: 52px; align-content: center; margin-top: 5px; }
  .tm-main { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  .tm-sub { text-align: right; }
  .tm-tool { padding: 4px 10px; }
  .tm-rooms { margin-top: 0; }
  .tm-room { height: 20px; }
  .tm-tools .tm-list { gap: 4px; }
  .tm-mem { display: none; }
  .tm-ppl-wait { top: 23px; }
}

/* three columns (the map 700px or wider): tools · wires · Duit (Omphalos | Consortium) · wires · people. Each
   tool's wire runs into Omphalos and along its bus; each person's into Consortium, along its bus to the badge; one
   bridge between the two. The layers pad their text clear of their bus. */
@container tm (min-width: 700px) {
  .tm-grid {
    --tm-flow: row;
    grid-template-columns: minmax(178px, 196px) minmax(40px, 1fr) minmax(240px, 300px) minmax(40px, 1fr) minmax(142px, 176px);
    grid-template-areas: "tools . duit . people"; row-gap: 0; padding: 14px 18px 16px;
  }
  .tm-tools { grid-area: tools; }
  .tm-duit { grid-area: duit; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "h h" "omph cons"; column-gap: 24px; }
  .tm-people { grid-area: people; display: flex; flex-direction: column; }
  .tm-tools .tm-list { padding-left: 0; gap: 5px; }
  .tm-tools .tm-h { padding-left: 0; }
  .tm-people .tm-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
  .tm-people .tm-person { grid-template-columns: 26px minmax(0, 1fr); justify-items: start; row-gap: 0; padding: 7px 9px; text-align: left; }
  .tm-people .tm-ini { grid-row: 1 / span 3; margin-bottom: 0; }
  /* "DUIT" as a dimension line over both layers */
  .tm-h-duit { height: auto; margin-bottom: 10px; justify-content: center; gap: 8px; }
  .tm-h-duit::before, .tm-h-duit::after { content: ""; flex: 1; height: 5px; border-top: 1px solid var(--line-strong); }
  .tm-h-duit::before { border-left: 1px solid var(--line-strong); }
  .tm-h-duit::after { border-right: 1px solid var(--line-strong); }
  .tm-h-duit span { padding: 0; }
  .tm-h-duit, .tm-h-duit::before, .tm-h-duit::after { align-self: stretch; }
  .tm-h-duit { align-items: center; }
  .tm-h-duit::before, .tm-h-duit::after { margin-top: 6px; }
  .tm-layer { padding: 11px 10px 10px; }
  .tm-omph { padding-left: 19px; }
  .tm-cons { padding-right: 19px; }
  .tm-layer-row { display: contents; }
  .tm-layer-s { order: 1; }
  .tm-layer-stat { order: 2; margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--faint); }
  .tm-check, .tm-mem { order: 3; }
  .tm-check { margin-block: auto; }
  .tm-mem { margin-top: auto; }
  .tm-ppl-wait { top: 25px; }
}

/* the line under the map (act 3) and the three facts */
.tour-rule { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--text); }
.tour-rule[hidden] { display: none; }
.tour-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.tour-facts li { padding-top: 12px; border-top: 1px solid var(--faint); font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.tour-facts b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }

/* ---------- End of the page ---------- */
.tour-end { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); }
.tour-end > * { max-width: 62ch; }
.tour-end h2 { font-size: clamp(24px, 1.6vw + 16px, 36px); }
.tour-end-p { margin-top: 12px; font-size: 16px; color: var(--soft); }
.tour-end-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.tour-home { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 14px; color: var(--text); }

/* ---------- Narrower ---------- */
@media (max-width: 979.98px) {
  .tour-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 759.98px) {
  .tour-stage { row-gap: 12px; }
  /* the bar opens up: the stepper scrolls away, the controls stay to hand under the header */
  .tour-bar { display: contents; }
  .tour-ctl {
    position: sticky; z-index: 6; top: var(--head-h); margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter);
    background: var(--bg); border-block: 1px solid var(--faint); justify-content: space-between;
  }
  .tour-ctl .btn-sm { min-height: 44px; flex: 1 1 0; padding-inline: 10px; }
  .tour-ctl .btn-sm::after { inset: 0; }
  .tour-steps ol { justify-content: space-between; }
  .tour-steps li { flex: 1 1 0; }
  .tour-steps li:first-child { flex: 0 1 auto; }
  .tour-steps li + li::before { flex: 1 1 auto; width: auto; min-width: 8px; margin: 0 8px; }
  .tour-step { gap: 8px; font-size: 12.5px; }
  .tour-scene { align-items: flex-start; flex-direction: column; padding-top: 2px; }
  .tour-scene-p { font-size: 14.5px; }
  .tour-scene-a { justify-content: flex-start; }
  .tour-card { padding: 9px 12px 10px; }
  .tour-card-t { font-size: 14px; }
  .tour-card-p { display: none; }
  .tour-pain { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--soft); }
  .tour-pick { padding: 8px 10px; }
  .tour-pick-r { white-space: normal; }
  .tour-pick-r > span { display: block; }
  .tour-pick-a::before { content: none; }
  .tour-pane-win { height: 520px; }
  .tw-compose { padding: 0 10px 10px; }
  button.dw-cite { height: auto; min-height: 30px; padding-block: 5px; line-height: 1.3; white-space: normal; text-align: left; }
  button.dw-cite::after { content: ""; position: absolute; inset: -7px -3px; }
  .tour-win button.dw-btn-primary { height: 44px; }
  .ts-btn, .ts-all { height: 34px; }
  .tour-note { font-size: 13.5px; }
  /* a phone on a phone: no bezel, a phone's corners */
  .tw-phone { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
  .tw-phone::before { content: none; }
  .tw-phone .tour-win { border-radius: 18px; border-color: var(--line-strong); }
  .tw-toast { bottom: 9px; }
}
@media (max-width: 400px) {
  .tour-steps li { align-items: flex-start; flex: 1 1 auto; }
  .tour-steps li + li::before { flex: 1 1 0; min-width: 6px; margin: 12px 6px 0; }
  .tour-step { flex-direction: column; gap: 3px; padding-block: 2px; text-align: center; font-size: 11.5px; }
  .tour-step-n { width: 22px; height: 22px; }
}