/* App-first entrance; isolated from the existing course and its capture layout. */
/* All eight apps show on a laptop or a phone screen; a short window scrolls the menu. */
.suite-nav { max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }
.lab-concept { max-width: 84rem; margin: 1.5rem auto; padding: clamp(1.25rem, 3vw, 3rem); }
.lab-concept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 22rem); align-items: center; gap: 2rem; border-bottom: 1px solid var(--control-edge); background: linear-gradient(110deg, var(--bg), transparent); }
.lab-concept h1 { font: 700 clamp(2rem, 4.2vw, 4.25rem)/1.07 var(--display); letter-spacing: -0.03em; margin: .8rem 0 1.5rem; max-width: 18ch; }
.lab-concept p { max-width: 52ch; }
.lab-concept > img { width: 100%; height: clamp(14rem, 28vw, 24rem); object-fit: contain; mask-image: linear-gradient(#000 70%, transparent); }
.lab-planner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0; }
/* Quiet buttons only. `.primary-action` carries its own accent fill, and the
   paper theme paints that label white on the assumption the fill survives —
   so capturing it here produced a white label on a white button. */
.lab-planner button:not(.primary-action), .lab-planner-actions a { display: inline-flex; align-items: center; border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 0.95rem/1.2 var(--display); text-decoration: none; }
@media (hover: hover) { .lab-planner button:not(.primary-action):hover, .lab-planner-actions a:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge); } }
.lab-planner input:not([type=checkbox]):not([type=file]) { width: 100%; min-height: 52px; padding: 14px 18px; font: inherit; font-weight: 600; }
.lab-planner section > label { display: block; margin: 1rem 0 .5rem; }
html:not(.capture-requested) .course-tool-card[data-tool] .lab-app-capture { aspect-ratio: 16 / 7; object-fit: contain; background: var(--screen); }
.lab-caption { font-size: .85rem; color: var(--text-dim); }
.lab-investigation-trail { max-width: 84rem; margin: 1rem auto; padding: 1.25rem; border: var(--ol) solid var(--edge); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--pop) var(--pop) 0 var(--edge); overflow-wrap: anywhere; }
.lab-investigation-trail button { min-height: 44px; padding: .6rem; }
.lab-concept[hidden] { display: none !important; }
.lab-tool-shell { display: flex; flex-direction: column; min-width: 0; }
html:not(.capture-requested) .lab-tool-shell .course-tool-card { flex: 1; margin: 0; }
.lab-tool-prepare { margin-top: 10px; padding: 0 16px; text-align: left; min-height: 44px; }
/* Eight tools: four across on wide screens gives two even rows; a three-column
   grid would leave 3+3+2. Scoped to #lab-apps so shared course styles are untouched. */
html:not(.capture-requested) #lab-apps .course-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 72rem) { html:not(.capture-requested) #lab-apps .course-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { html:not(.capture-requested) #lab-apps .course-tool-grid { grid-template-columns: minmax(0, 1fr); } }
.lab-planner { width: min(45rem, calc(100% - 32px)); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; }
.lab-planner > header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 14px 14px 14px 22px; position: sticky; top: 0; z-index: 1; }
.lab-planner h2 { font-size: 1.4rem; margin: .3rem 0; }
.lab-planner form, .lab-planner section { padding: 1.25rem; }
.lab-planner label { display: block; margin: 1.25rem 0 .4rem; font-weight: 800; }
.lab-planner textarea, .lab-planner select { width: 100%; padding: 14px 18px; font: inherit; font-weight: 600; }
/* The list's text stops before its chevron, and the list is a full 44px target (close-round 3, 360px). */
.lab-planner select { min-height: 52px; padding-right: 44px; text-overflow: ellipsis; }
.lab-planner textarea { resize: vertical; }
.lab-planner button, .lab-planner-actions a { min-height: 44px; padding: .65rem .9rem; }
.lab-planner footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: var(--ol-thin) solid var(--divider); padding: 1rem 1.25rem; font-size: .9rem; color: var(--text-dim); }
/* "Clear this draft" keeps its words on one line and centred, beside the note on a wide screen and across the
   sheet on a phone, so it reads as a button, not a field. */
.lab-planner footer button { flex: none; justify-content: center; text-align: center; white-space: nowrap; }
.lab-planner li { margin: .5rem 0; }
.lab-planner p { overflow-wrap: anywhere; }
.lab-planner [hidden] { display: none !important; }
.capture-requested .lab-concept { display: none; }
@media (max-width: 42rem) {
  html:not(.capture-requested) .course-tool-card[data-tool] .lab-app-capture { height: 6rem; aspect-ratio: auto; }
  .lab-concept { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .6rem; padding: 1.2rem; margin-top: .5rem; }
  .lab-concept > img { height: 12rem; align-self: start; margin-top: 2rem; }
  .lab-concept h1 { font-size: clamp(1.8rem, 6.7vw, 2.5rem); }
  .lab-planner footer { flex-direction: column; align-items: stretch; gap: .75rem; }
}

/* Sections folded into the drawers. As direct children of a .depth-drawer they
   take the drawer's section-shell framing; these rules cover only their content. */
.lab-device-examples h2, .lab-practice-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: .4rem 0 .8rem; }
.lab-device-examples ul { margin: 1rem 0; padding-left: 1.25rem; }
.lab-device-examples li { margin: .6rem 0; }

.lab-path-note { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--divider); color: var(--text-dim); }

/* Supporting CIDX/ComDyn exercises. Deliberately outside the numbered course:
   adding them to the 39-lesson portfolio would renumber existing evidence. */
.lab-exercise-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.25rem 0; }
.lab-exercise-columns > section { min-width: 0; }
.lab-exercise-columns h3 { margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--divider); }
.lab-exercise-columns h3 a { color: inherit; }
.lab-exercise-list { margin: 0; padding-left: 1.25rem; }
.lab-exercise-list li { margin: 0 0 1rem; padding-left: .25rem; }
.lab-exercise-list p { margin: .3rem 0; color: var(--text-dim); }
.lab-exercise-done { color: var(--text); }
.lab-exercise-list small { color: var(--text-dim); }
@media (max-width: 42rem) { .lab-exercise-columns { grid-template-columns: minmax(0, 1fr); } }

/* ---- The tool strip: pictures and names; limits one tap away ----------------- */
html:not(.capture-requested) #lab-apps .course-tool-tour-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
html:not(.capture-requested) #lab-apps .course-tool-tour-heading h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
html:not(.capture-requested) #lab-apps .lab-limits-intro { flex-basis: 100%; }
html:not(.capture-requested) #lab-apps:not([data-show-limits]) .lab-limits-intro,
html:not(.capture-requested) #lab-apps:not([data-show-limits]) .course-tool-card .course-tool-copy > :not(h3, p, .course-tool-kicker) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html:not(.capture-requested) #lab-apps:not([data-show-limits]) .course-tool-copy h3 { margin: .2rem 0 0; }

/* ---- Drawer summaries show their bold label until opened ---------------------- */
/* A sticker bar at every width: the title, its short line once opened, the round mark at the right. */
html:not(.capture-requested) .depth-drawer > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-areas: "title mark" "line mark";
  align-items: center;
  gap: 2px 16px;
  min-height: 64px;
  padding: 14px 16px 14px 20px;
}
html:not(.capture-requested) .depth-drawer > summary > strong { grid-area: title; font: 800 1.2rem/1.2 var(--display); letter-spacing: -0.02em; }
html:not(.capture-requested) .depth-drawer > summary > small { grid-area: line; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
html:not(.capture-requested) .depth-drawer > summary::after { grid-area: mark; }
html:not(.capture-requested) .depth-drawer:not([open]) > summary { grid-template-areas: "title mark"; }
html:not(.capture-requested) .depth-drawer > summary > span,
html:not(.capture-requested) .depth-drawer:not([open]) > summary > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 42rem) {
  html:not(.capture-requested) .depth-drawer > summary { padding: 12px 12px 12px 16px; gap: 2px 12px; }
  html:not(.capture-requested) .depth-drawer > summary > strong { font-size: 1.1rem; }
}

/* Digital Lab Entrance: the Desk's D mark, type and mono kicker, so the Lab reads as Desk's front door. */
.lead-entrance-mark {
  display: grid;
  flex: none;
  width: 1.7em;
  height: 1.7em;
  place-items: center;
  color: var(--text);
}
.lead-entrance-mark svg { width: 100%; height: 100%; }
/* The D, L and E read as letters: no drawn glyph, no colour of their own. */
.lead-entrance b { color: inherit; font-weight: inherit; }
.lead-glyph {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  color: inherit;
  background: none;
  -webkit-mask: none;
  mask: none;
}
/* The course map now sits under the tools (the header Map button lands here). */
.course-map { margin-top: clamp(1.75rem, 4vw, 2.75rem); padding-top: 1.25rem; border-top: 1px solid var(--divider); }
.course-map > h3 { margin: 0 0 1rem; font: 800 clamp(1.1rem, 2vw, 1.35rem)/1.15 var(--display); letter-spacing: -0.03em; }

/* The end of the page: a few words and the small "i". */
/* (a block, so the words stay centred when they wrap on a phone; the "i" rides after the last word) */
.lab-end {
  display: block;
  text-align: center;
  width: min(100% - 2rem, 60rem);
  margin: 0 auto;
  color: var(--text);
  font: 800 clamp(1.3rem, 3vw, 1.8rem)/1.2 var(--display);
  padding: 56px 16px;
  text-wrap: balance;
}
/* On a phone both short sentences fit on one line ("The apps show. You decide."), never broken mid-sentence. */
@media (max-width: 639px) { .lab-end { font-size: 1.05rem; padding: 40px 16px; } }
.lab-info-open {
  display: grid;
  flex: none; /* never squeezed below its 44px target beside a long heading */
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* About Digital Lab: one formatted sheet for the extra reading. */
.lab-info {
  width: min(100% - 32px, 42rem);
  max-height: min(88vh, 54rem);
  padding: 0;
  overflow: auto;
}
.lab-info-head {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 22px;
}
.lab-info-head .lead-entrance-mark { width: 1.8rem; height: 1.8rem; }
.lab-info-head h2 { min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
.lab-info-close {
  /* A long sheet title wraps; it never squeezes the only close control below 44px. */
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  line-height: 1;
  cursor: pointer;
}
.lab-info-body { padding: 4px 22px 22px; }
.lab-info-body > section {
  display: block;
  padding: 1rem 0;
  border: 0;
  border-bottom: var(--ol-thin) solid var(--divider);
}
.lab-info-body > section:last-child { border-bottom: 0; }
.lab-info-body h3 {
  margin: 0 0 0.45rem;
}
/* The sheet's text rules stop at a lesson video playing in it: the video's frame is drawn the
   same in the sheet as on its own page. */
.lab-info-body p:where(:not(.lesson-player *)),
.lab-info-body li:where(:not(.lesson-player *)) { margin: 0 0 0.45rem; line-height: 1.55; }
.lab-info-body ol:where(:not(.lesson-player *)),
.lab-info-body ul:where(:not(.lesson-player *)) { margin: 0; padding-left: 1.2rem; }
.lab-info-flow { color: var(--text-dim); font: 0.9rem/1.5 var(--display); }
.lab-info-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.lab-info .snapshot-actions { max-width: 24rem; }

/* Tool cards: a two-word name that says what it does, the real app name as a small tag, one line of purpose. */
html:not(.capture-requested) #lab-apps .course-tool-copy .course-tool-kicker {
  display: block;
}
html:not(.capture-requested) #lab-apps .course-tool-copy h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
html:not(.capture-requested) #lab-apps .course-tool-copy > p {
  margin: 0.4rem 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Inside the lesson library: the eight questions, on the same column as the lessons. */
html:not(.capture-requested) .depth-drawer > .course-map {
  width: min(100% - clamp(1.2rem, 4vw, 4rem), 106rem);
  margin: 0 auto;
  border-top: 0;
}
html:not(.capture-requested) .depth-drawer > .course-map { padding: clamp(2rem, 4vw, 3rem) 0 1.5rem; }

/* The plan action under each tool: says what it plans, compact, accent on hover. */
html:not(.capture-requested) .lab-tool-prepare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0.95rem;
}
html:not(.capture-requested) .lab-tool-prepare-arrow { color: inherit; transition: transform var(--t-press) var(--ease); }
html:not(.capture-requested) .lab-tool-prepare:hover .lab-tool-prepare-arrow,
html:not(.capture-requested) .lab-tool-prepare:focus-visible .lab-tool-prepare-arrow { transform: translateX(0.2rem); }
@media (prefers-reduced-motion: reduce) { html:not(.capture-requested) .lab-tool-prepare-arrow { transition: none; } }

/* "Starting": the one word that carries the entrance, capitalised; its highlight is theme.css's. */
.lead-starting { text-transform: capitalize; }

/* ---- Simple course: title, one line, Open; the rest behind "i" ---- */
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; }
.lesson-line, .guided-line { margin: .35rem 0 1rem; font-size: 1.05rem; line-height: 1.45; color: var(--text-dim); }
.lesson-opened { margin-left: .5rem; }
.workflow-card-line { display: block; margin-top: .35rem; color: var(--text-dim); font-size: .95rem; font-weight: 600; line-height: 1.4; }
html:not(.capture-requested) .workflow-card { min-height: 0; }
@supports (grid-template-rows: subgrid) {
  html:not(.capture-requested) .workflow-card { grid-row: span 3; }
  html:not(.capture-requested) .workflow-card > .workflow-card-line { grid-row: 3; }
}
.vertical-intro { display: flex; align-items: center; gap: .5rem; }
.vertical-card-heading { margin: 0; font: inherit; }
html:not(.capture-requested) .vertical-card-select { min-height: 3.5rem; height: auto; flex-direction: row; align-items: center; gap: .5rem; }
.vertical-chevron { margin-left: auto; transition: transform .15s; }
.vertical-card-select[aria-expanded="true"] .vertical-chevron { transform: rotate(180deg); }
.vertical-open { padding: 0 1rem 1rem; }
.vertical-line { margin: 0 0 .75rem; line-height: 1.45; }
.vertical-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.course-return-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.course-return-row strong { margin-right: auto; }
#verticals-info, #lessons-info { width: min(100% - 2rem, 60rem); }
#verticals-info .story-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#verticals-info .story-stage > div + div { border-left: 0; border-top: var(--ol-thin) solid var(--divider); }
#info-sheet .explanation-shot, #info-sheet .course-practice-picture { margin: 0; border: var(--ol-thin) solid var(--edge); border-radius: var(--r); background: var(--screen); overflow: hidden; }
#info-sheet .explanation-shot img, #info-sheet .course-practice-picture img { display: block; width: 100%; height: auto; max-height: 18rem; object-fit: contain; transform: none; }
#info-sheet .course-live-module iframe { width: 100%; min-height: 22rem; border: var(--ol-thin) solid var(--edge); border-radius: var(--r); }
#info-sheet .detail-chain { display: grid; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .vertical-chevron { transition: none; } }

/* The simple fronts, finished: nothing on them is longer than it needs to be. */
.lesson-top .back-action { min-height: 44px; padding-inline: .25rem .6rem; }
.lesson-top .lab-info-open { flex: none; }
html:not(.capture-requested) .workflow-detail { min-height: 0; }
html:not(.capture-requested) .workflow-detail .workflow-meta { justify-content: flex-start; }
html:not(.capture-requested) .workflow-detail h3 { margin: .4rem 0 0; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.03em; }
html:not(.capture-requested) .workflow-detail .detail-task-action { margin: 0; padding: 0; border: 0; }
html:not(.capture-requested) .workflow-card-title { margin-top: .7rem; }
html:not(.capture-requested) .portfolio-heading { align-items: center; }
html:not(.capture-requested) .portfolio-heading .result-count { margin-left: auto; }
html:not(.capture-requested) #vertical-grid { align-items: start; }
html:not(.capture-requested) #course-types-drawer .vertical-card-select .vertical-title { min-height: 0; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.vertical-card-select:focus-visible { outline-offset: -4px; }
.vertical-open[hidden] { display: none; }
html:not(.capture-requested) .guided-main .guided-line, html:not(.capture-requested) .guided-finish .guided-line { max-width: 40rem; }
html:not(.capture-requested) .guided-main > .lesson-opened { margin: 0 0 .75rem; }
.course-return-row .lab-info-open { margin-left: -.25rem; }
/* The sheets: section headings, readable blocks, and nothing that scrolls sideways. */
.lab-info:not(#lab-info) .lab-info-body { overflow-wrap: anywhere; }
.lab-info:not(#lab-info) .lab-info-body > * { min-width: 0; }
.lab-info:not(#lab-info) .lab-info-body h4 { margin: .9rem 0 .25rem; font-size: .95rem; }
#info-sheet .detail-chain { margin-top: .6rem; }
#info-sheet figcaption { padding: .5rem .7rem; font-size: .85rem; }
#info-sheet .guided-actions { margin-top: 0; }
#verticals-info .course-constellation { margin-top: 1rem; }
#verticals-info .story-deck, #lessons-info .lab-practice-section, #verticals-info .lab-device-examples { padding: 1rem 0; }
#verticals-info .section-title-row { flex-wrap: wrap; }
#verticals-info .story-tabs { justify-content: flex-start; }
#verticals-info .story-stage { margin-top: 1rem; }
@media (max-width: 42rem) {
  .lab-info:not(#lab-info) .lab-info-body { padding-inline: 1rem; }
  /* On a phone the heading and its "i" share a line and the count sits under them, all from the left edge
     like the fields and filters below (they were centred, with the count pushed right). */
  html:not(.capture-requested) .portfolio-heading { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .25rem .5rem; }
  html:not(.capture-requested) .portfolio-heading .result-count { flex-basis: 100%; margin-left: 0; }
}
html:not(.capture-requested) #course-types-drawer .vertical-intro h2 { max-width: none; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.lab-info:not(#lab-info) .lab-info-body h2 { margin: .3rem 0 .6rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.03em; }
html:not(.capture-requested) .guided-main > .lesson-opened { margin-top: .6rem; }
.lesson-receipt [data-society-receipt] dl { display: grid; gap: .25rem; margin: .35rem 0; }
.lesson-receipt [data-society-receipt] dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.lesson-receipt [data-society-receipt] dd { margin: 0; font-weight: 700; }
#verticals-info .story-tabs { display: flex; flex-wrap: wrap; }
#verticals-info .story-tab { flex: 1 1 12rem; }

/* ---- Digital Lab Entrance (2026-09-28): one column, one question per screen ----
   Every screen shares one shape in a 40rem column: the sign, a top row that never
   moves (← Back, ↺ Start over), one question at a fixed height, the answer chips and
   at most one filled button. The stage is anchored to the top, so opening "Pick a
   type" or changing screens never moves the sign or the question. Nothing here is
   position: fixed; the only sticky thing on the page is the header. */
:root { --header-h: 4.65rem; --lead-pad: clamp(1rem, 5svh, 3rem); }
@media (max-width: 42rem) { :root { --header-h: 62px; } }
html:not(.capture-requested) .lead-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: calc(100svh - var(--header-h));
  margin: 0;
  padding: var(--lead-pad) 0 0;
}
html:not(.capture-requested) .lead-stage:has(> .lead-card[hidden]) { min-height: 0; padding-top: 1rem; }
html:not(.capture-requested) .lead-stage > .guided-path:not([hidden]) { margin-top: 1rem; }
html:not(.capture-requested) .starter.lead-card {
  display: block;
  width: min(40rem, 100% - 32px);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}
html:not(.capture-requested) .starter.lead-card[hidden] { display: none; }
html:not(.capture-requested) .starter.lead-card::before { display: none; }
html:not(.capture-requested) #start .lead-step { padding: 0; }
/* The sign: big on the entrance, one quiet line above every other screen. Never a control. */
html:not(.capture-requested) .lead-card .lead-entrance {
  display: block;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  text-align: center;
  font: 800 1.1rem/1.2 var(--display);
}
html:not(.capture-requested) #start[data-lead-flow] .lead-entrance {
  height: 24px;
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 18px;
  white-space: nowrap;
}
html:not(.capture-requested) #start .lead-step h1 {
  max-width: none;
  margin: 0;
  font: 800 clamp(2rem, 4.4vw, 3.1rem)/1.04 var(--display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
/* The question takes focus only from the page (tabindex -1; never a Tab stop), so it shows no
   ring: a return from an app looks like every other screen change. */
html:not(.capture-requested) #start .lead-step h1:focus,
html:not(.capture-requested) #start .lead-step h1:focus-visible { outline: none; }
html:not(.capture-requested) #start .lead-step .primary-action { min-height: 3rem; padding: 0 24px; }
/* The entrance (E-states): centred, frameless. */
html:not(.capture-requested) .lead-entrance-body { text-align: center; }
html:not(.capture-requested) #start .lead-entrance-body h1 { margin: 0 0 24px; font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1.02; text-wrap: balance; }
.lead-idea-row { display: flex; align-items: flex-start; gap: 12px; max-width: 37.5rem; margin: 0 auto; }
html:not(.capture-requested) #start .lead-idea { position: relative; display: block; flex: 1; min-width: 0; margin: 0; }
html:not(.capture-requested) #start .lead-idea textarea,
html:not(.capture-requested) #start .lead-idea input {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: calc(3 * 1.45em + 2rem);
  padding: 14px 18px;
  font-size: 1.05rem;
  line-height: 1.45;
  text-align: left;
  resize: none;
  field-sizing: content;
}
html:not(.capture-requested) #start .lead-idea:has(.lead-clear) textarea { padding-right: 46px; }
/* Past three lines the box scrolls and ends on a whole line: no bottom padding for a fourth line to show in. */
html:not(.capture-requested) #start .lead-idea textarea[data-overflow] { max-height: calc(3 * 1.45em + 0.7rem + 2px); padding-bottom: 0; }
.lead-clear { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lead-idea-info { flex: none; }
.lead-idea-info[hidden] { display: none; }
/* With Jev on, the "i" sits inside the box's right edge, left of the × when there is one; the text keeps clear
   of both, so the row never changes width (final-round 1). Unseen before a line is typed. */
html:not(.capture-requested) #start .lead-idea .lead-idea-info { position: absolute; top: 6px; right: 6px; }
html:not(.capture-requested) #start .lead-idea:has(.lead-clear) .lead-idea-info { right: 50px; }
html:not(.capture-requested) #start .lead-idea:has(.lead-idea-info:not([hidden])) textarea { padding-right: 46px; }
html:not(.capture-requested) #start .lead-idea:has(.lead-clear):has(.lead-idea-info:not([hidden])) textarea { padding-right: 90px; }
.lead-idea-info[data-idle] { visibility: hidden; }
html:not(.capture-requested) #start .lead-submit { flex: none; display: grid; width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; place-items: center; border-radius: var(--r); }
/* One arrow everywhere (MERGE §9 E11): the outlined arrow draws like the filled ones, without the icon's accent
   square (on the filled button the square is the button's own colour and never shows). */
#start .lead-submit .ui-icon-accent, #start .lead-continue .ui-icon-accent { display: none; }
#start .lead-submit [data-ui-icon] { width: 26px; height: 26px; }
.lead-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.35rem; margin: 12px 0 0; }
.lead-types { margin: 0; }
.lead-types > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 0.35rem;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.lead-types > summary::-webkit-details-marker { display: none; }
.lead-dot { display: inline-block; width: 6px; height: 6px; overflow: hidden; border-radius: 50%; background: var(--text-dim); color: transparent; }
#start .lead-kinds { display: none; justify-content: center; max-width: 760px; margin: 16px auto 0; gap: 12px 10px; }
#start .lead-links:has(> .lead-types[open]) + .lead-kinds { display: flex; }
.lead-desk-door {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.35rem;
  margin: 24px 0 0;
}
.lead-resume-title { margin: 0 auto 4px; max-width: 32rem; }
.lead-title-button {
  display: -webkit-box;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  font: 800 1.15rem/1.3 var(--display);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  cursor: pointer;
}
.lead-resume-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 16px; color: var(--text-dim); font-size: 0.95rem; }
.lead-resume-go { margin: 0 0 24px; }
html:not(.capture-requested) #start .lead-continue { min-width: 12rem; min-height: 48px; }
.lead-undo-line { margin: 8px 0 0; color: var(--text-dim); font-size: 0.95rem; }
.lead-undo { display: inline-flex; align-items: center; gap: 0.25rem; }
.lead-undo .lead-text { margin-block: -6px; }
/* The three control roles besides the filled primary: outline and text. */
.lead-outline {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0.95rem;
}
.lead-text {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0 0.35rem;
  font-size: 0.95rem;
  cursor: pointer;
}
/* Answer chips: pills for answers only. Picked = the inverted sticker with a tick (theme.css). */
.lead-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.lead-chip {
  min-height: 46px;
  padding: 0 18px;
  cursor: pointer;
}
/* "Which stop instead?": a stop chip names the app and its question and may take two lines on a
   phone; then it reads as one left-aligned choice, not as a pill broken in two. */
#start[data-lead-screen="pickStop"] .lead-chip { padding-block: 0.55rem; border-radius: var(--r); text-align: left; }
/* The check sits in the chip's own padding (its sides trade width), so pressing, or a late
   pick moving the pre-press, never changes a chip's width: nothing reflows under the pointer. */
.lead-chip { position: relative; }
.lead-chip[aria-pressed="true"] { padding-right: 0.7rem; padding-left: 1.75rem; }
.lead-chip[aria-pressed="true"]::before { top: 50%; left: 0.75rem; }
@media (max-width: 399px) {
  .lead-chips { gap: 10px 8px; }
  .lead-chip { padding: 0 14px; font-size: 0.97rem; }
  .lead-chip[aria-pressed="true"] { padding-right: 0.45rem; padding-left: 1.5rem; }
  .lead-chip[aria-pressed="true"]::before { left: 0.6rem; }
}
/* In-flow skeleton (Q, G, B, D screens): left-aligned in the column. */
html:not(.capture-requested) .lead-flow { text-align: left; }
.lead-top { display: flex; height: 44px; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.lead-top .lead-back { padding-left: 0; }
.lead-strip {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 8px;
  padding: 0 14px;
  text-align: left;
  cursor: pointer;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 700 0.95rem/1 var(--display);
}
.lead-strip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-strip-count { flex: none; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.lead-marks { display: inline-flex; flex: none; align-items: center; gap: 4px; }
/* Before the type the strip has no count: a chevron says it opens something. */
/* A chevron drawn in CSS (the font has no "›"): the strip opens the case. */
.lead-strip-open { flex: none; width: 9px; height: 9px; margin: 0 4px 0 2px; overflow: hidden; border: solid var(--text); border-width: 0 2.5px 2.5px 0; color: transparent; font-size: 0; transform: rotate(-45deg); }
/* Phones: one rule at every phone width. The count stays, written short ("1/6"; the button's name
   says "Tried 1 of 6"), so the case title keeps room beside the seven marks. */
@media (max-width: 30rem) {
  .lead-strip { gap: 0.4rem; padding: 0 0.5rem; }
  .lead-strip .lead-marks { gap: 3px; }
  .lead-strip-count { font-size: 0; }
  .lead-strip-count::after { content: attr(data-short); font-size: 0.9rem; }
}
/* The kicker line holds its 44px "i" and Undo without reaching into the question below: they
   stand 8px up into the gap above (never into the top row) and end 2px above the line's bottom,
   clear of the H1's text box (close-round 2: a tap on the top of the H1's last word opened the "i"). */
.lead-kicker { display: flex; height: 38px; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--text-dim); font-size: 0.95rem; font-weight: 600; }
.lead-kicker-text { min-width: 0; white-space: nowrap; }
.lead-kicker .lead-info { flex: none; margin: -8px -8px 2px auto; }
/* Undo reads on the kicker's own line, in its size: the 44px target keeps its place (8px up, 2px short
   of the line's bottom), and its text sits 5px lower in it, on the words' line (close-round 3). */
.lead-kicker .lead-undo .lead-text { margin-block: -8px 2px; padding-top: 10px; font-size: inherit; }
.lead-tag { margin: 8px 0 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.4; }
.lead-tag label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.lead-flow .lead-chips { margin: 16px 0 0; justify-content: flex-start; }
.lead-primary-row { margin: 24px 0 0; }
.lead-primary-reserve { min-height: 48px; }
.lead-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.15rem; margin: 16px 0 0; }
.lead-more > :first-child { padding-left: 0; }
.lead-more .lead-text { min-width: 44px; }
.lead-by { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; }
/* The pick line keeps its word ("Growth:", "Starts from:") at every width, who decided beside the
   value, and "· Change" together; it may wrap to two lines. Change opens the list in its place
   (MERGE §8 D2); a second click of the same tap never picks from it (app.js). */
.lead-pick-line { display: flex; min-height: 44px; align-items: center; }
.lead-pick-line .lead-by, .lead-pick-change, .lead-pick-tail { white-space: nowrap; }
.lead-flow .lead-idea-row { margin: 16px 0 0; }
.lead-change {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-block: -12px;
  padding: 0 0.3rem;
  cursor: pointer;
}
.lead-who-row { display: flex; align-items: flex-start; gap: 8px; max-width: 24rem; margin: 16px 0 0; }
.lead-market-row { margin: 16px 0 0; }
.lead-case-choose { min-height: 52px; max-width: 100%; padding: 0 44px 0 16px; font: inherit; font-weight: 600; }
.lead-desk-line { margin-top: 4px; }
.lead-desk-line:first-of-type { margin-top: 8px; }
/* Marks by shape (theme.css): tried (filled), opened (half), ready (ring), needs an answer (dotted), not needed (dash). */
.lead-mark { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; }
/* Opened, not answered yet (MERGE §9 E4): half-filled; it counts as tried, and the answer fills it. */
.lead-mark[data-mark="none"] { width: 10px; height: 2px; border-radius: 0; }
.lead-mark[data-faint] { opacity: 0.35; }
[data-pulse] { animation: lead-pulse 1s ease-out; }
@keyframes lead-pulse { from { box-shadow: 0 0 0 0 var(--picked); } to { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { [data-pulse] { animation: none; } }
/* Your case: beside the question at 1280px and wider (the column never moves); behind the strip below. */
.lead-case-side { display: none; }
@media (min-width: 80rem) {
  .lead-strip { display: none; }
  /* The case beside the question always fits the screen (MERGE §9 E2): the aside runs down the stage and its
     body is sticky under the header, never taller than the screen below its top; the rows scroll inside it
     when they must, and "See whole case ↗" stays pinned at its foot, always in sight (close-round 4: at
     1440x900 a full case ran past the fold and the door sat under it). Being no taller than the first
     screen, it never runs into "Or open a tool" below. */
  html:not(.capture-requested) .lead-case-side:not([hidden]) {
    position: absolute;
    top: calc(var(--lead-pad) + 32px);
    bottom: 0;
    left: calc(50% + 21rem);
    display: block;
    /* 18rem at 1280px, up to 20rem where the screen has room (16px from its edge) (MERGE §8 D8), 16px clear of the
       column (it ends at 50% + 20rem). Inside its edge and padding the rows are a little wider than before the case
       became a card, so every app's short still fits one line at 1280px. */
    width: clamp(16rem, calc(50% - 21rem - 16px), 20rem);
    padding: 0;
  }
  html:not(.capture-requested) .lead-case-side:not([hidden]) > .lead-case-body {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - var(--header-h) - var(--lead-pad) - 32px - 16px - var(--pop-lg));
    /* The screen's featured card (theme.css: .lead-case-side > .lead-case-body). */
    padding: 14px 12px 10px;
  }
  html:not(.capture-requested) .lead-case-side .lead-case-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* The scroll box reaches 0.6rem left of the rows, so the current row's well and bar are never clipped. */
  html:not(.capture-requested) .lead-case-side .lead-case-scroll { margin-left: -0.6rem; padding-left: 0.6rem; }
  /* A focused row's ring is drawn inside the row (as the player's dots do), so the scroll box never cuts it
     on the right, above the first row or below the last. */
  html:not(.capture-requested) .lead-case-side .lead-case-scroll :focus-visible { outline-offset: -4px; }
  html:not(.capture-requested) .lead-case-side .lead-case-scroll[data-overflow]:not([data-end]) { mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
  /* Scrolled down, the rows above fade in at the top too, so a row under the title reads as one that continues. */
  html:not(.capture-requested) .lead-case-side .lead-case-scroll[data-overflow]:not([data-top]) { mask-image: linear-gradient(to bottom, transparent, #000 24px); }
  html:not(.capture-requested) .lead-case-side .lead-case-scroll[data-overflow]:not([data-top]):not([data-end]) { mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 32px), transparent); }
  html:not(.capture-requested) .lead-case-side .lead-case-body > .lead-case-skip { flex: none; margin-top: 8px; }
  html:not(.capture-requested) .lead-case-side .lead-case-body > .lead-case-all { flex: none; align-self: flex-start; margin-top: 4px; }
  /* The app whose stop is on screen: marked, without repeating who picked it (the card says it; MERGE §9 E5). */
  .lead-case-side .lead-case-app[data-current] {
    width: calc(100% + 0.6rem);
    margin-left: -0.6rem;
    padding-left: 0.6rem;
    border: var(--ol-thin) solid var(--control-edge);
    border-radius: var(--r);
    background: var(--bg);
    box-shadow: inset 6px 0 0 var(--picked);
  }
}
.lead-case-body { font-size: 0.92rem; text-align: left; }
.lead-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
/* In the sheet the count and the whole case's door share one centre line (close-round 4, MERGE §9 E11). */
.lead-case-body[data-mode="sheet"] .lead-case-head { align-items: center; }
.lead-case-head h2 { margin: 0;letter-spacing: -0.03em; font: 800 1.25rem/1.2 var(--display); }
.lead-case-head > span { color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }
/* In the sheet the head carries the whole case's door beside the count. */
.lead-case-head .lead-case-all { margin: 0 0 0 auto; align-self: center; }
.lead-case-title {
  display: -webkit-box;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  margin: 4px 0 4px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: none;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  cursor: pointer;
  font: 700 0.95rem/1.35 var(--display);
}
/* The chip path's title: a quiet door to write the idea, not a second name for the type. */
.lead-case-title[data-empty] { font-weight: 600; }
.lead-case-lines, .lead-case-apps { margin: 0; padding: 0; list-style: none; }
.lead-case-apps { margin-top: 8px; }
.lead-case-line, .lead-case-app {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  border-bottom: var(--ol-thin) solid var(--divider);
  /* buttons: the text's colour, never the browser's own button colour (pure white or black) */
  color: var(--text);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lead-case-key { min-width: 3.6rem; color: var(--text-dim); }
/* A value wraps to two lines before it is cut: "Win from rivals" reads whole beside its tag. */
.lead-case-value, .lead-case-status { display: -webkit-box; flex: 1; min-width: 0; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* A value is at most two lines, its tag under it in the small tag style: no row reads as a wall (MERGE §8 D8). */
.lead-case-status { color: var(--text-dim); }
.lead-case-name { min-width: 4.4rem; font-weight: 800; }
.lead-case-line .lead-by, .lead-case-app .lead-by { margin-left: auto; white-space: nowrap; }
.lead-case-market-open .lead-case-pick { min-height: 44px; flex-wrap: nowrap; gap: 0.45rem; border-bottom: var(--ol-thin) solid var(--divider); }
.lead-case-market-open .lead-case-choose { flex: 1; min-width: 0; }
/* Who decided sits right under its value, in the aside (1280px and wider) as in the sheet (MERGE
   §8 D8): the value keeps the row's width ("Business momentum each quarter" on one or two lines),
   and the tag is never a column away from what it describes. */
/* One value column for the whole case: an answer line's key spans the app rows' mark and name,
   so answer values, app statuses and their tags all start at one x (close-round 2: two grids). */
.lead-case-body { --case-name-width: 5.25rem; --case-column-gap: 0.65rem; }
.lead-case-body .lead-case-line { display: grid; grid-template-columns: calc(12px + var(--case-column-gap) + var(--case-name-width)) minmax(0, 1fr); column-gap: var(--case-column-gap); row-gap: 3px; align-content: center; padding: 8px 0; }
.lead-case-body .lead-case-app { display: grid; grid-template-columns: 12px var(--case-name-width) minmax(0, 1fr); column-gap: var(--case-column-gap); row-gap: 3px; align-content: center; padding: 8px 0; }
.lead-case-name { line-height: 1.25; overflow-wrap: anywhere; }
.lead-case-body .lead-case-line .lead-by { grid-column: 2; margin: 0; line-height: 1.3; }
.lead-case-body .lead-case-app .lead-by { grid-column: 3; margin: 0; line-height: 1.3; }
.lead-case-body .lead-case-key, .lead-case-body .lead-case-name { min-width: 0; }
/* In the sheet: the rows line up with the head (the sheet's list indent does not apply). */
#info-sheet .lead-case-lines, #info-sheet .lead-case-apps { padding: 0; }
#info-sheet .lead-case-lines > li, #info-sheet .lead-case-apps > li { margin: 0; }
.lead-case-skip { margin: 8px 0 0; color: var(--text-dim); font-size: 0.85rem; }
.lead-case-all { margin-top: 4px; padding-left: 0; }
/* Before the type: the seven marks, faint, under the idea; no sentence (MERGE §8 D3). */
.lead-case-marks { display: flex; min-height: 24px; align-items: center; margin: 4px 0 0; }
.lead-app-status { font-weight: 700; }
/* Who decided rides with the value's last word: a wrapped line never starts with "· You" (MERGE §9 E3). */
.lead-glue { white-space: nowrap; }
.lead-app-pick { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
/* In the narrow sheet the value moves as a whole ("Word of mouth"), who decided and Change stay together,
   and Change's 44px target ends clear of the Open below it (close-round 3, 360px). */
#info-sheet .lead-app-pick { padding-block: 8px 12px; }
.lead-pick-value, .lead-pick-whole-tail { display: inline-block; }
/* The sheet's pick: the value on its line, who decided and Change on the next, never starting with "·" (MERGE §9 E3). */
.lead-pick-whole { display: grid; justify-items: start; row-gap: 2px; }
.lead-pick-whole .lead-pick-whole-tail { white-space: nowrap; }
/* The model's own name, said once and quietly, only here (MERGE §8 D1). */
.lead-app-opens { margin-top: 0; color: var(--text-dim); font-size: 0.85rem; }
/* A Change list (MERGE §8 D2): each option names the pick in plain words, what it does under it. */
.lead-choice-word { margin: 8px 0 0; color: var(--text-dim); font-size: 0.9rem; }
/* The open list's own line: "Keep as is" at the list's own right edge (the list is 32rem), and its 44px target
   stays between the question above and the first option below (close-round 4, MERGE §9 E11: it reached 4px
   into the H1's box). */
.lead-choice-head { display: flex; max-width: 32rem; min-height: 30px; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lead-choice-head .lead-choice-keep { margin-block: -7px; }
.lead-choice-list { display: grid; gap: 4px; max-width: 32rem; margin: 8px 0 0; }
.lead-choice {
  position: relative;
  display: grid;
  min-height: 44px;
  gap: 2px;
  padding: 0.5rem 0.85rem 0.5rem 1.85rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lead-choice[aria-pressed="true"]::before { top: 1.05rem; left: 0.75rem; }
.lead-choice-label { font: 700 0.95rem/1.3 var(--display); }
.lead-choice-hint { color: var(--text-dim); font-size: 0.85rem; line-height: 1.35; }
.lead-choice[aria-pressed="true"] .lead-choice-hint { color: inherit; }
/* A short phone (360x740): tighter options, so with four fitting ones open the stop's Open still ends on screen
   (final-round 1: "Open Product →" ended at 758px of 740 with the growth list open). */
@media (max-width: 480px) and (max-height: 780px) {
  .lead-choice { gap: 0; padding-block: 0.3rem; padding-left: 1.6rem; border-width: var(--ol-thin); }
  .lead-choice-hint { font-size: 0.8rem; line-height: 1.2; }
  .lead-choice[aria-pressed="true"]::before { top: 0.85rem; left: 0.6rem; }
  /* The question in two lines a little smaller, so the stop's Open stays on a short phone's screen. */
  html:not(.capture-requested) #start[data-lead-flow] .lead-step h1 { font-size: 1.8rem; }
}
.lead-choice-more { justify-self: start; padding-left: 0; }
.lead-choice-group { margin: 8px 0 0; color: var(--text-dim); font-size: 0.85rem; }
.lead-app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
/* With a Change list open, the sheet's Open keeps the card's 24px from the last option (8/16/24 scale). */
#info-sheet .lead-pick-open ~ .lead-app-actions { margin-top: 24px; }
/* The market list in the case sheet reads at 16px, like every other entry control, so a phone never zooms in on it. */
#info-sheet .lead-case-choose { font-size: 16px; }
.lead-case-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* The sheet itself scrolls: the Desk text shows whole, never in a second scroll box that cuts it mid-line (close-round 3). */
#info-sheet .lead-desk-text { padding: 0.75rem 0.9rem; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; font: 500 0.92rem/1.45 var(--display); }
/* The brief shape Desk reads stays in the text that is copied and sent, out of sight (a builder token, not the person's words). */
#info-sheet .lead-desk-version { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The tools start below the first screen: 64px of space and a hairline. */
html:not(.capture-requested) #lab-apps { margin-top: 64px; padding-top: 1.5rem; border-top: var(--ol-thin) solid var(--divider); }
.course-full-start { width: min(100% - clamp(1.2rem, 4vw, 4rem), 106rem); margin: 1rem auto 0; }
/* The header's Lessons lands on the lessons drawer's bar, whole and 12px under the sticky header (the page's
   scroll padding is 7rem), never half hidden under it; the bar above it (Nine verticals) sits 20px away, so
   none of it, its hard shadow included, peeks out under the header there either. */
#workflow-drawer { margin-top: 1.25rem; }
#workflow-drawer > summary { scroll-margin-top: calc(var(--header-h) + 12px - 7rem); }
/* "All lesson videos" sits beside it, so the first screen of Lessons shows it at any width. */
.course-full-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
/* The meter: a small light in the header's own row; its words and spend behind a tap. */
.guide-meter {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.55rem;
  cursor: pointer;
  font-size: 0.76rem;
}
.guide-meter-light { flex: none; }
.guide-meter[data-state="checking"] .guide-meter-light { animation: guide-meter-pulse 1.2s ease-in-out infinite; }
@keyframes guide-meter-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .guide-meter[data-state="checking"] .guide-meter-light { animation: none; } }
/* Before Jev's first answer, and on phones, only the light shows (the words stay for screen readers). */
.guide-meter:not([data-answered]) .guide-meter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 40rem) { .guide-meter .guide-meter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
.guide-meter-panel {
  position: absolute;
  z-index: 21;
  top: calc(100% + 16px);
  right: 16px;
  width: max-content;
  max-width: min(22rem, calc(100vw - 32px));
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.guide-meter-panel[hidden] { display: none; }
/* A notch on the panel's top edge points at the meter that opened it (lead-global.mjs sets --notch). */
.guide-meter-panel::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--ol) - 7px);
  left: calc(var(--notch, 22px) - var(--ol) - 7px);
  width: 12px;
  height: 12px;
  border: inherit;
  border-width: var(--ol) 0 0 var(--ol);
  border-radius: 3px 0 0 0;
  background: inherit;
  transform: rotate(45deg);
}
.guide-meter-panel p { margin: 0 0 0.25rem; }
/* Plain words and at most one line of cost; no "i" inside the panel (MERGE §9 E9). */
.guide-meter-panel .guide-meter-cost { color: var(--text-dim); }
.guide-meter-panel .guide-meter-cost[hidden] { display: none; }
.guide-meter-panel .lead-text { padding-left: 0; }
@media print { .guide-meter, .guide-meter-panel { display: none; } }
.capture-requested .guide-meter, .capture-requested .guide-meter-panel { display: none; }
.guide-meter[hidden] { display: none; }

/* Lesson videos: a quiet "Watch how · 20 s" beside a stop's other quiet link, under a lesson's Open
   and a guided step's Open. It plays in #info-sheet, sized so the 16:9 frame and its controls fit. */
/* On a short, wide screen (a phone on its side) the height-based width would shrink the frame
   under 520px and switch the player to its tall layout; the sheet keeps at least 36rem there. */
#info-sheet[data-info^="watch:"] { width: min(100% - 2rem, 60rem, max(36rem, calc((88vh - 10rem) * 16 / 9))); }
#info-sheet[data-info^="watch:"] .lab-info-body { padding-top: 0.75rem; }
#info-sheet .lesson-watch-sheet { padding: 0; border: 0; }
/* On a phone the tall frame, its caption and the controls fit the sheet without a scroll; on a
   phone on its side the same tight spacing keeps the scroll short. */
@media (max-width: 30rem), (max-height: 30rem) {
  #info-sheet[data-info^="watch:"] .lab-info-head { padding-block: 0.4rem; }
  #info-sheet[data-info^="watch:"] .lab-info-body { padding-top: 0.25rem; padding-bottom: 0.6rem; }
  #info-sheet[data-info^="watch:"] .lesson-controls { margin-top: 0.35rem; row-gap: 0; }
}
/* On a phone the sheet keeps less room at its sides, so the frame is as wide as on the videos page
   (328 px on a 360 px phone): the strip's words and the captions fit as they do there. */
@media (max-width: 30rem) {
  #info-sheet[data-info^="watch:"] { width: calc(100% - 1rem); }
  #info-sheet[data-info^="watch:"] .lab-info-body { padding-inline: 0.5rem; }
  #info-sheet[data-info^="watch:"] .lesson-watch-answers { padding-inline: 0.5rem; }
  #info-sheet[data-info^="watch:"] .lab-info-head { padding-left: 1rem; }
}
#info-sheet .lesson-watch-poster { display: block; width: 100%; height: auto; }
.lesson-watch .nowrap { white-space: nowrap; }
.lesson-watch [data-ui-icon] { flex: none; }
.lead-more:has(.lesson-watch) { gap: 0 1.25rem; }
@media (max-width: 400px) {
  .lead-more:has(.lesson-watch) { flex-direction: column; align-items: flex-start; }
  .lead-more:has(.lesson-watch) > .lead-text { padding-left: 0; }
}
.detail-task-action:has(.lesson-watch) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.detail-task-action .lesson-watch { padding-left: 0; }
.lesson-watch-row { margin: 0.5rem 0 0; }
.lesson-watch-row .lesson-watch { padding-left: 0; }
.workflow-meta-end { display: inline-flex; align-items: center; gap: 0.5rem; }
/* "2 of 5" never breaks inside a card's kicker. */
.workflow-card .workflow-meta > span:first-child { flex: none; white-space: nowrap; }
.workflow-watch { display: inline-flex; align-items: center; gap: 0.25em; text-transform: none; letter-spacing: 0.04em; }
.workflow-watch [data-ui-icon] { width: 0.9em; height: 0.9em; }
.portfolio-videos { flex: none; white-space: nowrap; }

/* ---- The lesson path: eight questions, in order (tutorials/arc.json) ---- */
/* The big picture above the list: eight rows, each a way to jump to its question's lessons. */
.lesson-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.lesson-path-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: start; gap: 0 0.75rem; min-height: 44px; padding: 0.75rem 0; border-bottom: var(--ol-thin) solid var(--divider); color: var(--text); text-decoration: none; }
a.lesson-path-row:hover .lesson-path-copy strong { text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; }
/* A question with no lesson to show under the other filters: said, not linked. */
span.lesson-path-row { color: var(--text-dim); }
.lesson-path-n { font-size: 0.95rem; }
.lesson-path-copy { min-width: 0; }
.lesson-path-copy strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.lesson-path-copy small { display: block; margin-top: 0.2rem; color: var(--text-dim); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.lesson-path-count { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; line-height: 1.65; white-space: nowrap; }
@media (max-width: 52rem) {
  .lesson-path { grid-template-columns: minmax(0, 1fr); }
}
/* The list: one group per question. Its heading is a row across the grid; its cards stay the grid's own. */
.workflow-group { display: contents; }
.workflow-question { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; margin: 1.4rem 0 0.2rem; font-size: 1.2rem; font-weight: 800; line-height: 1.25; scroll-margin-top: 5rem; }
.workflow-group:first-child > .workflow-question { margin-top: 0; }
.workflow-question:focus-visible { outline-offset: 4px; }
/* The panel's kicker: the place and the app wrap together, after the question. */
.workflow-meta .nowrap { white-space: nowrap; }
/* The lesson's own question, under its title in the panel. */
.lesson-question { margin: 0.35rem 0 0; color: var(--text); font-size: 1.1rem; font-weight: 800; line-height: 1.35; }
/* The line above the video in the sheet: the question the lesson answers, or its place in it. */
#info-sheet .lesson-watch-answers { margin: 0 0 0.5rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.4; }
#info-sheet .lesson-watch-step { white-space: nowrap; }
/* The guided path's rail: one mark per question that has a step. */
html:not(.capture-requested) .chapter-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
html:not(.capture-requested) .chapter-rail .chapter-name { font-weight: inherit; }
@media (max-width: 47.5rem) {
  /* On a phone the rail is the questions' numbers; only the current one carries its words. */
  html:not(.capture-requested) .chapter-rail { display: flex; }
  html:not(.capture-requested) .chapter-rail li { flex: none; min-width: 2.25rem; font-size: 0.8rem; }
  html:not(.capture-requested) .chapter-rail li[aria-current="step"] { flex: 1; }
  html:not(.capture-requested) .chapter-rail li:not([aria-current="step"]) .chapter-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Small phones: the current question's words get the rail's room. Its number runs in the line with them, not
   beside the block at mid-height, and the other marks are a little narrower, so the words take two lines at most. */
@media (max-width: 399px) {
  html:not(.capture-requested) .chapter-rail li { min-width: 2rem; }
  html:not(.capture-requested) .chapter-rail li[aria-current="step"] { display: block; text-align: left; line-height: 1.3; }
  html:not(.capture-requested) .chapter-rail li[aria-current="step"] span { margin-right: 0.3rem; }
}

/* ---- The shared planner panels, inside the course's planner only (client.css and workspace.css are the
   apps' files and stay as they are; these course-scoped rules give them the site's roles) ---- */
.lab-planner .lab-assist { color: var(--text); background: var(--surface); border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); font: 500 1rem/1.5 var(--display); }
.lab-planner .lab-assist .la-eyebrow { color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.lab-planner .lab-assist h3 { font: 800 1.25rem/1.2 var(--display); letter-spacing: -0.02em; }
.lab-planner .lab-assist :is(input:not([type=checkbox]), textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); font-weight: 600; }
.lab-planner .lab-assist button { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-weight: 800; }
.lab-planner .lab-assist button:hover:not(:disabled) { border-color: var(--control-edge); }
.lab-planner .lab-assist [type=submit], .lab-planner .lab-assist button[type=submit]:is(:hover, :focus-visible):not(:disabled) { border-color: var(--edge); color: var(--on-accent); background: var(--accent); }
.lab-planner .lab-assist button:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; opacity: 1; }
.lab-planner .lab-assist :is(details, article) { border-color: var(--divider); }
.lab-planner .lab-assist :is(.la-status, .la-confirm) { border-color: var(--control-edge); }
.lab-planner .lab-assist :focus-visible, .lab-planner .lab-workspace :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lab-planner .lab-workspace { --lw-blue: var(--text-dim); --lw-ink: var(--text); --lw-bg: var(--surface); border-color: var(--control-edge); border-top-color: var(--control-edge); border-radius: var(--r-lg); font-family: var(--display); }
.lab-planner .lab-workspace :is(input, textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); }
.lab-planner .lab-workspace :is(button, .lw-link) { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-family: var(--display); font-weight: 800; }
.lab-planner .lab-workspace :is([data-lw-review], [data-lw-active]) { border-left-color: var(--picked); background: var(--bg); }
.lab-planner .lab-workspace [data-lw-status] { color: var(--text-dim); }
.lab-planner .lab-workspace :is(details, article, .lw-result-grid article, [data-lw-note-options] label) { border-color: var(--divider); background: transparent; }
.lab-planner .lab-workspace :is(small, .lw-result-grid dt) { color: var(--text-dim); }
.lab-planner .lab-workspace .lw-result-grid h5 { font-family: var(--display); }

/* The entrance's error sits under the idea box, as wide as it; in a flow screen it starts at the column's edge. */
#start .starter-error:not([hidden]) { box-sizing: border-box; max-width: 37.5rem; margin: 12px auto 0; }
#start .lead-flow .starter-error:not([hidden]) { margin-inline: 0; }
.lab-end > .lab-info-open { display: inline-grid; margin-left: 4px; vertical-align: middle; }
/* The open verticals sheet: the nine clay pictures are not shown (fewer colours; the words above say the same). */
#verticals-info .course-constellation { display: none; }