/*
 * The showcase's own additions to the frame in showcase.css: the bands and root sections of the
 * menu, the language switch, presentation mode, the flow player, variants and the "Selected" mark,
 * device frames, and reduced motion. Every color is a token; nothing here is the product's style.
 */

/* ── Menu: root sections, their groups set apart by a gap ── */

.sc-side__gap {
  margin: 12px 12px;
  border: 0;
  border-top: 1px solid var(--color-default);
}

/* The title of a root is a link inside the <summary>: the chevron folds, the title opens the page */
.sc-side__title { display: flex; align-items: center; gap: 6px; }
.sc-side__title .navlink--page { flex: 1; padding-left: 0; }
.navlink--page { font-weight: 500; }

/* The row is the <summary>, chevron and title together: the hover and the mark of the page on show
   are drawn on it, never on the link alone, or the highlight would start after the chevron. While
   its root is open, the page on show is marked in the list under the title, so the row keeps no
   background. Folded, the row carries the mark: aria-current="page" for a page in sections, "true"
   for the root of a child page on show (a flow). */
.sc-side__title .navlink--page,
.sc-side__title .navlink--page:hover,
.sc-side__title .navlink--page[aria-current] { background: transparent; }
.sc-side__title:hover .navlink--page { color: var(--color-foreground); }
.sc-side__group:not([open]) > .sc-side__title:has(> .navlink--page[aria-current]) {
  background: var(--color-primary-soft);
}
.sc-side__group:not([open]) > .sc-side__title:has(> .navlink--page[aria-current]),
.sc-side__group:not([open]) > .sc-side__title > .navlink--page[aria-current] {
  color: var(--color-primary-strong);
}

/* ── Technology marks on the Stack page: files in assets/tech/ (tools/fetchTechMarks.mjs) in their
   brand colors; a black or white mark (mono) turns white on the dark theme; a technology with no mark
   shows its initials on a tile ── */

.tech-mark { display: block; width: 40px; height: 40px; object-fit: contain; flex: none; }
.tech-mark[src$=".png"] { border-radius: var(--radius-control); }
.tech-mark--initials {
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-weight: 600;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tech-mark--mono { filter: invert(1); }
}
:root[data-theme='dark'] .tech-mark--mono { filter: invert(1); }

/* ── Top bar: language and presentation ── */

.sc-lang:empty { display: none; }
.sc-top__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-present[aria-pressed='true'] { color: var(--color-primary); }

/* ── Presentation mode: the page alone, larger ── */

html.present .sc-side,
html.present .sc-scrim,
html.present .sc-top { display: none; }
/* Without the menu and the top bar the page is the only thing left: out of the frame's grid, or it
   would fall into the menu's column */
html.present body { display: block; }
html.present .sc-main {
  margin-left: 0;
  max-width: none;
  padding: 48px clamp(24px, 6vw, 96px);
  font-size: 17px;
}
html.present .sc-pager { display: none; }
html.present .sc-present-exit { display: inline-flex; }
.sc-present-exit {
  display: none;
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: var(--z-header);
}

/* ── The flow player ── */

/* The player is a container: its bar and its step lay out by the player's own width, which differs
   on the page, in presentation mode and in full screen */
.flow {
  container: flow / inline-size;
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.flow__bar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface-muted);
}
.flow__counter { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow__bar .btn { flex: none; }
.flow__bar .btn[disabled] { opacity: 0.4; }

/* Who acts in the step on show (flow.js reads it from the presenter's control): a pill in the party's
   colour, its tile, "Acting as: <company> · <role>" */
.flow__actor {
  --actor: var(--color-emphasis);
  --actor-soft: var(--color-surface);
  --actor-text: var(--color-foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 100%;
  min-width: 0;
  padding: 3px 12px 3px 4px;
  border-radius: var(--radius-full);
  background: var(--actor-soft);
  box-shadow: inset 0 0 0 1px var(--actor);
  color: var(--actor-text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow__actor[hidden] { display: none; }
.flow__actor strong { font-weight: 600; }
.flow__actor .party-tile { flex: none; }
.flow__actor-lead { opacity: 0.8; }
.flow__actor[data-party='mine'] { --actor: var(--color-category-mine); --actor-soft: var(--color-category-mine-soft); --actor-text: var(--color-category-mine-text); }
.flow__actor[data-party='refiner'] { --actor: var(--color-category-refiner); --actor-soft: var(--color-category-refiner-soft); --actor-text: var(--color-category-refiner-text); }
.flow__actor[data-party='carrier'] { --actor: var(--color-category-carrier); --actor-soft: var(--color-category-carrier-soft); --actor-text: var(--color-category-carrier-text); }
.flow__actor[data-party='customer'] { --actor: var(--color-category-customer); --actor-soft: var(--color-category-customer-soft); --actor-text: var(--color-category-customer-text); }

/* A player too narrow for one row: the step — back, counter, title, forward — on the first, who acts
   and the view buttons on the second (the bar's ::after is the line break) */
@container flow (max-width: 1100px) {
  .flow__bar { flex-wrap: wrap; }
  .flow__bar::after { content: ''; order: 6; flex-basis: 100%; height: 0; }
  .flow__bar > [data-flow-prev] { order: 1; }
  .flow__bar > .flow__counter { order: 2; }
  .flow__bar > .flow__title,
  .flow__bar > .flow__end { order: 3; }
  .flow__bar > [data-flow-next] { order: 5; }
  .flow__bar > .flow__actor { order: 7; }
  .flow__bar > [data-flow-all],
  .flow__bar > [data-flow-full],
  .flow__bar > [data-flow-hints] { order: 8; }
  .flow__bar > [data-flow-all] { margin-left: auto; }
}
/* A phone: back, counter and forward; the title on a row of its own, in full; who acts; the view buttons */
@container flow (max-width: 560px) {
  .flow__bar > .flow__title { order: 5; flex-basis: 100%; white-space: normal; }
  .flow__bar > .flow__end { order: 5; }
  .flow__bar > .flow__actor { order: 5; }
  .flow__bar > [data-flow-next] { order: 3; margin-left: auto; }
  .flow__bar > [data-flow-all] { margin-left: 0; }
  .flow__actor { white-space: normal; }
  .flow__step { padding: 12px; }
  .flow .flow__screen:has(> .flow-shot) { padding: var(--space-1); }
}
.flow__steps { list-style: none; margin: 0; padding: 0; }
.flow__step { display: none; padding: 24px; }
.flow__step.is-current { display: block; }
.flow__screen {
  background: var(--color-page);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: auto;
}
.flow__note {
  margin: 12px 0 0;
  color: var(--color-muted);
}
.flow__note strong { color: var(--color-foreground); }

/* "All steps": every step in order, numbered, the current one marked */
.flow--all .flow__step { display: block; border-top: 1px solid var(--color-default); }
.flow--all .flow__step:first-child { border-top: 0; }
.flow--all .flow__step.is-current { box-shadow: inset 3px 0 0 var(--color-primary); }
.flow__step-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; color: var(--color-muted); }
.flow__step-head strong { color: var(--color-foreground); }
.flow:not(.flow--all) .flow__step-head { display: none; }

/* Full screen: the browser's own, or a fixed overlay where it is not available. One step fills the
   window without a scroll: the bar, the step's note in a strip under it, and the screen in the rest,
   scaled by flow.js to its width and height. "All steps" in full screen scrolls as on the page. */
.flow--full,
.flow:fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
}
.flow--full .flow__steps,
.flow:fullscreen .flow__steps { flex: 1; min-height: 0; overflow: auto; }
:is(.flow--full, .flow:fullscreen).flow--all .flow__step.is-current { padding: 32px clamp(16px, 4vw, 64px); }
:is(.flow--full, .flow:fullscreen):not(.flow--all) .flow__steps { overflow: hidden; }
:is(.flow--full, .flow:fullscreen):not(.flow--all) .flow__step.is-current {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
:is(.flow--full, .flow:fullscreen):not(.flow--all) .flow__note {
  order: -1;
  flex: none;
  max-height: 30vh;
  margin: 0;
  padding: 10px clamp(16px, 4vw, 64px);
  overflow: auto;
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface);
  color: var(--color-foreground);
  font-size: 16px;
  line-height: 24px;
}
:is(.flow--full, .flow:fullscreen):not(.flow--all) .flow__screen {
  flex: 1;
  min-height: 0;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 16px;
}

/* A control that leads to a screen not drawn yet: the bar says so for a moment */
.flow__end { display: none; color: var(--color-warning-text); white-space: nowrap; }
.flow--end .flow__end { display: inline; }
.flow [data-go] { cursor: pointer; }

/* What the user acts on in a step (data-flow-target="1", "2", … in the order of acting): ringed while
   its step is on show, numbered in a badge at its corner, the emphasis walking from one to the next
   (flow.js). The rules sit in :where(), so a component's own position and ::after win over them —
   which is why a control that draws its own ::after (a switch, a checkbox) is marked on its wrapper.
   The Hints button (flow--plain) turns it all off. */
.flow:not(.flow--plain) .flow__step.is-current :where([data-flow-target]),
.flow--all:not(.flow--plain) :where([data-flow-target]) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* A wrapper with square corners (a field's label) gets the controls' radius, so its ring is soft */
:where(.flow [data-flow-target]) { position: relative; border-radius: var(--radius-control); }
:where(.flow:not(.flow--plain) [data-flow-target]:not([data-flow-target='']))::after,
.flow__mark {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font: 600 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
:where(.flow:not(.flow--plain) [data-flow-target]:not([data-flow-target='']))::after {
  content: attr(data-flow-target);
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  pointer-events: none;
}
.flow:not(.flow--plain) .is-flow-now { animation: flow-now calc(var(--duration-slow) * 2) var(--ease-standard) infinite; }
@keyframes flow-now {
  50% { outline-width: 3px; outline-offset: 7px; }
}
/* The same number in the note under the screen: flowMark(1) in tools/lib/html.mjs. It reads as the
   marker on the screen, not as a word of the sentence: the badge in a ring, set apart from its words */
.flow__mark {
  min-width: 18px;
  height: 18px;
  margin: 0 4px;
  font-size: 11px;
  vertical-align: 1px;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-primary);
}

/* ── Variants and the Selected mark ── */

.variant { position: relative; }
.variant__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag--selected {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-color: transparent;
}
.tag--alternative { color: var(--color-muted); }

/* ── Device frames: a phone, a tablet and a desktop window around a screen ── */

.device {
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-emphasis);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.device--phone { width: 390px; max-width: 100%; aspect-ratio: 390 / 844; border-radius: 40px; border-width: 8px; }
.device--tablet { width: 820px; max-width: 100%; aspect-ratio: 820 / 1180; border-radius: 24px; border-width: 10px; }
.device--desktop { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); }
.device__screen { width: 100%; height: 100%; overflow: auto; background: var(--color-page); }
.devices { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* ── Email frame: a 600 px letter as a mail client shows it ── */

.mail {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.mail__meta {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 13px;
}
.mail__meta strong { color: var(--color-foreground); }

/* ── Reduced motion: every animation has a still version ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Contrast verdict: showcase.js writes <span class="pill pill--success|danger"> into each row ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pill--success { background: var(--color-success-soft); color: var(--color-success-text); }
.pill--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* ── Frame theme: apiko.com's look (SC-011) ──
   The site's own frame — the page, the menu, the top bar, the page heads, the text, the site's cards
   and tiles — in the --frame-* tokens and apiko.com's type. What shows the product (components, stages,
   device and browser frames, shells, letters, flow screens) keeps the product's tokens and font. */

body { background: var(--frame-page); color: var(--frame-ink); font-family: var(--font-frame); font-size: 14px; line-height: 22px; letter-spacing: normal; }
:where(.btn, .badge, .card, .table, .sc-stage, .sc-sample, .frame, .device, .shell-sample, .mail, .flow__screen, .sc-row__items) {
  font-family: var(--font-sans);
}
:where(.sc-stage, .frame, .device, .shell-sample, .mail, .flow__screen) { color: var(--color-foreground); font-size: 13px; line-height: 19px; letter-spacing: var(--tracking-text); }
:where(.sc-stage, .frame, .device, .shell-sample, .mail, .flow__screen) a { color: var(--color-primary); }

.sc-side, .sc-top { background: var(--frame-surface); border-color: var(--frame-border); }
.sc-side__gap { border-top-color: var(--frame-border); }
.sc-side .brand { font-family: var(--font-frame); color: var(--frame-ink); }
.sc-side .navlink, .sc-side__title, .sc-side__title .navlink--page { font-family: var(--font-frame); color: var(--frame-ink); }
.sc-side .navlink, .sc-side__title { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.sc-side .navlink:hover, .sc-side .navlink.is-hover, .sc-side__title:hover { background: var(--frame-hover); color: var(--frame-accent-strong); }
/* Focus in the frame: the frame's ink, drawn inside the row so it never overlaps the next one */
.sc-side :focus-visible { outline: 2px solid var(--frame-accent-strong); outline-offset: -2px; }
.sc-top :focus-visible { outline-color: var(--frame-accent-strong); }
.sc-side .navlink[aria-current],
.sc-side__group:not([open]) > .sc-side__title:has(> .navlink--page[aria-current]) {
  background: var(--frame-accent-soft);
  color: var(--frame-accent-strong);
}
.sc-side__group:not([open]) > .sc-side__title > .navlink--page[aria-current] { color: var(--frame-accent-strong); }
/* The open root's title is marked by its color only; the item on show carries the tint */
.sc-side__title .navlink--page[aria-current] { background: transparent; color: var(--frame-accent-strong); }
.sc-side__planned, .sc-side__planned:hover { color: var(--frame-muted); }

.sc-crumb { color: var(--frame-muted); }
.sc-crumb__page { color: var(--frame-ink); }
.sc-top .segmented { font-family: var(--font-frame); background: var(--frame-page); border-color: var(--frame-border); border-radius: var(--radius-frame); }
.sc-top .segmented__item { color: var(--frame-muted); border-radius: var(--radius-frame); }
.sc-top .segmented__item:hover { color: var(--frame-ink); }
.sc-top .segmented__item[aria-pressed='true'] { background: var(--frame-surface); color: var(--frame-ink); }
.sc-top .btn, .sc-present-exit { font-family: var(--font-frame); color: var(--frame-ink); border-radius: var(--radius-frame); }
.sc-top .btn:hover { background: var(--frame-hover); }
.sc-present[aria-pressed='true'] { color: var(--frame-accent-strong); }

/* Page and section heads: apiko.com's serif display over its sans text */
.sc-hero .t-page-title { font-family: var(--font-frame-display); font-weight: 400; font-size: 44px; line-height: 52px; letter-spacing: 0; }
.sc-block > .sc-hero .t-page-title { font-size: 34px; line-height: 42px; }
.sc-section__head .t-section-title { font-family: var(--font-frame-display); font-weight: 400; font-size: 26px; line-height: 34px; }
.sc-hero__overline { color: var(--frame-accent-strong); font-family: var(--font-frame); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-hero p, .sc-section__head p, .sc-source { color: var(--frame-muted); }
.sc-section__head, .sc-block, .sc-pager { border-color: var(--frame-border); }
.sc-main a:not(.btn) { color: var(--frame-link); }
/* A link inside a sample is the product's, not the frame's: the brand blue, and a link-card keeps its ink */
.sc-main :is(.sc-stage, .frame, .device, .shell-sample, .mail, .flow__screen) a:not(.btn):not(.card) { color: var(--color-primary); }
.sc-main :is(.sc-stage, .frame, .device, .shell-sample, .mail, .flow__screen) a.card { color: var(--color-foreground); }
.sc-pager__link, .sc-pager__link:hover { color: var(--frame-ink); }
.sc-note { color: var(--frame-muted); }

/* The site's own cards and tiles: white on the page, a thin line, apiko.com's small corners */
.sc-main :is(.sc-card, .sc-tile, .sc-list.card, .sc-cycle__step) {
  font-family: var(--font-frame);
  background: var(--frame-surface);
  color: var(--frame-ink);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-frame);
  box-shadow: none;
}
.sc-main a.sc-tile:hover { border-color: var(--frame-ink); color: var(--frame-ink); }
.sc-main :is(.sc-card, .sc-tile, .sc-cycle__step) p { color: var(--frame-muted); }
.sc-main :is(.sc-card, .sc-tile, .sc-cycle__step) .t-card-title { font-size: 16px; line-height: 24px; }
.sc-main :is(.sc-card, .sc-tile, .sc-list.card) .t-caption { color: var(--frame-muted); }
.sc-main .sc-icon-chip { background: var(--frame-accent-soft); color: var(--frame-accent-strong); border-radius: var(--radius-frame); }
.sc-main .sc-avatar { background: var(--frame-page); color: var(--frame-ink); }
.sc-main .sc-cycle__step::before { background: var(--frame-ink); color: var(--frame-surface); }
.sc-main .sc-card__foot .tag, .sc-main .sc-card__foot .badge { font-family: var(--font-frame); border-radius: var(--radius-full); }
.sc-main .table-wrap.card { font-family: var(--font-frame); background: var(--frame-surface); border-color: var(--frame-border); border-radius: var(--radius-frame); box-shadow: none; }
.sc-main .table-wrap.card .table { font-family: var(--font-frame); }
.sc-main .table-wrap.card .table th { background: var(--frame-page); color: var(--frame-muted); }
.sc-main .table-wrap.card :is(th, td) { border-color: var(--frame-border); }

/* ── Foundation pages: the layout of their samples (tools/genFoundations.mjs) ── */
.fd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fd-gap { width: var(--space-3); }
.fd-system { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
.fd-system__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.fd-brand { display: flex; align-items: center; gap: var(--space-2); }
.fd-brand__tile { background: var(--color-primary); color: var(--color-primary-foreground); }
.fd-card, .fd-party, .fd-face, .fd-shape-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5);
}
.fd-card {
  align-self: stretch;
  padding: var(--space-4) var(--space-4-5);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.fd-party { gap: var(--space-3); }
.fd-party .sc-swatches { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-face__sample { font-size: 28px; line-height: 36px; color: var(--color-foreground); }
.fd-type-sample { color: var(--color-foreground); font-family: var(--font-sans); letter-spacing: var(--tracking-text); }
.fd-bar { display: block; height: var(--space-3); border-radius: var(--radius-xs); background: var(--color-primary); }
.fd-size { display: block; border: 1px dashed var(--color-primary); border-radius: var(--radius-xs); background: var(--color-primary-soft); }
.fd-shape { width: 96px; height: 64px; border: 1px solid var(--color-primary); background: var(--color-primary-soft); }
.fd-lift {
  display: flex; flex-direction: column; gap: var(--space-1-5);
  min-height: 96px; padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* The shell as drawn at 1440, shown at half size */
.fd-shell { display: grid; grid-template-columns: calc(var(--size-sidebar) / 2) minmax(0, 1fr); width: 720px; max-width: 100%; height: 450px; padding: 0; overflow: hidden; }
.fd-shell__side { padding: var(--space-2); }
.fd-shell__panel {
  display: flex; flex-direction: column;
  margin: calc(var(--size-app-inset) / 2) calc(var(--size-app-inset) / 2) calc(var(--size-app-inset) / 2) 0;
  border: 1px solid var(--color-default);
  border-radius: calc(var(--radius-panel) / 2);
  background: var(--color-surface);
}
.fd-shell__bar { height: calc(var(--size-app-header) / 2); padding: 0 var(--space-2); border-bottom: 1px solid var(--color-default); display: flex; align-items: center; }
.fd-shell__content { display: grid; grid-template-columns: calc(var(--size-main) / 2) calc(var(--size-aside) / 2); gap: calc(var(--space-4) / 2); padding: calc(var(--space-7) / 2); flex: 1; }
.fd-shell__main, .fd-shell__aside { border: 1px dashed var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary-soft); padding: var(--space-1) var(--space-2); }
.fd-shell .t-label { color: var(--color-primary-strong); }

/* A motion token replayed: the box slides on the token's duration and easing */
@keyframes fd-slide { from { transform: translateX(0); } to { transform: translateX(160px); } }
.fd-slide { animation: fd-slide var(--mo-duration) var(--mo-ease) both; }

/* ── Logo page: the marks on their grounds (tools/genLogo.mjs). A ground sets the mark's ink and the
   color its glyph is cut to (--lg-ground); light and dark are fixed, so both show in either theme ── */
.lg { display: block; flex: none; color: var(--color-primary); }
.lg-ground {
  --lg-ground: var(--color-surface);
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-foreground);
}
/* The page: a white glyph on the page grey, as the Figma's sidebar draws it */
.lg-ground--page { background: var(--color-page); }
.lg-ground--light { --lg-ground: var(--lg-light-ground); background: var(--lg-light-ground); color: var(--lg-light-text); }
.lg-ground--light .lg { color: var(--lg-light-ink); }
.lg-ground--dark { --lg-ground: var(--lg-dark-ground); background: var(--lg-dark-ground); color: var(--lg-dark-text); border-color: transparent; }
.lg-ground--dark .lg { color: var(--lg-dark-ink); }
:is(.lg-ground--light, .lg-ground--dark) :is(.t-label, .t-caption, code) { color: inherit; }
:is(.lg-ground--light, .lg-ground--dark) code { background: none; }
/* On the brand color the tile turns to the brand's foreground and the glyph keeps the brand */
.lg-ground--brand { --lg-ground: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); border-color: transparent; }
.lg-ground--brand .lg { color: var(--color-primary-foreground); }
/* What not to do: the tile on its own color; the tile on a party's color; the tile in another color */
.lg-ground--brand-bad { --lg-ground: var(--color-primary-foreground); background: var(--color-primary); color: var(--color-primary-foreground); border-color: transparent; }
.lg-ground--party { --lg-ground: var(--color-primary-foreground); background: var(--color-category-mine); color: var(--color-category-mine-foreground); border-color: transparent; }
.lg-ground--recolor .lg { color: var(--color-category-refiner); }
:is(.lg-ground--brand, .lg-ground--brand-bad, .lg-ground--party) .t-caption { color: inherit; }

.lg-grounds { margin-bottom: var(--space-6); }
.lg-ground__label { margin-bottom: var(--space-3); }
.lg-set { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-5); }
.sc-stage.lg-set { margin-bottom: var(--space-6); }
.lg-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 88px; text-align: center; }
.lg-cell__name { display: flex; flex-direction: column; align-items: center; }
.lg-menu, .lg-lockup { display: flex; align-items: center; gap: 10px; }
/* A browser tab around the 16 px mark */
.lg-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-default); border-bottom: none;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: var(--color-page);
}
.lg-word { display: flex; flex-direction: column; }
.lg-word .t-caption { color: inherit; opacity: 0.72; }
.lg-show { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.lg-show__large { display: grid; place-items: center; padding: var(--space-6); }
.lg-show__side { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-2); }
.lg-sizes .lg-cell { min-width: 0; }
/* The clear space: a quarter of the mark on every side */
.lg-clear { display: inline-block; padding: 24px; outline: 1px dashed var(--color-primary); background: var(--color-primary-soft); }
.lg-clear__text { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-rules { margin-bottom: var(--space-6); }
.lg-rule { display: flex; align-items: center; gap: var(--space-3); }
.lg-rule__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.lg-lockup--stacked { flex-direction: column; justify-content: center; text-align: center; }
.lg-lockup--stacked .lg-word { align-items: center; }
@media (max-width: 720px) { .lg-show { grid-template-columns: minmax(0, 1fr); } }

/* ── Loaders page: the loaders at their sizes and in place (tools/genLoaders.mjs) ── */
.ldp-kind { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ldp-sizes { display: flex; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-2); }
.ldp-size, .ldp-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ldp-cell { text-align: center; }
.ldp-place { display: flex; flex-direction: column; gap: var(--space-2); }
.ldp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ldp-step { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ldp-status { display: inline-flex; align-items: center; gap: var(--space-3); }
.ldp-status--column { flex-direction: column; text-align: center; gap: var(--space-2); max-width: 360px; }
.ldp-panel { display: flex; align-items: center; justify-content: center; min-height: 220px; }
/* The start on the brand color: the tile in the brand's foreground, the blocks in the brand */
.ldp-start {
  --lg-ground: var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.ldp-start .ld { color: var(--color-primary-foreground); }
.ldp-start .lg-word { align-items: center; }

/* ── Components page: the heads and stages of a component's block (tools/parts/components/lib.mjs).
   A state's stage fills its column, so a field, a table or a chain is drawn at its working width ── */
.cmp-head { margin-top: var(--space-2); }
.cmp-states .sc-state > .cmp-stage { align-self: stretch; }
.cmp-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }

/* ── Icons page (tools/genIcons.mjs): cells of icons with their names, the grid enlarged, the sizes,
   the status icons ── */
.icp-group { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.icp-group .t-card-title { margin: 0; }
.icp-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.icp-cells--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.icp-cell {
  display: flex; flex-direction: column; gap: var(--space-1-5);
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-foreground);
}
.icp-cell__marks { display: flex; align-items: flex-end; gap: var(--space-3); min-height: var(--space-6); margin-bottom: var(--space-1); }
.icp-cell__name { align-self: flex-start; }
.icp-figure, .icp-sizes, .icp-alone, .icp-status { display: flex; flex-direction: column; gap: var(--space-3); }
.icp-grid { width: 192px; height: 192px; align-self: center; color: var(--color-foreground); }
.icp-grid__lines { stroke: var(--color-default); stroke-width: 0.06; }
.icp-grid__pad { fill: none; stroke: var(--color-primary); stroke-width: 0.06; stroke-dasharray: 0.4 0.3; }
.icp-grid__glyph { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.icp-size { display: grid; grid-template-columns: auto 2.5em 1fr; align-items: center; gap: var(--space-3); color: var(--color-foreground); }
.icp-size__marks { display: flex; align-items: center; gap: var(--space-3); }
.icp-alone__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.icp-status__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.icp-status__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); color: var(--color-foreground); }
.icp-status__item > .icon { color: var(--color-muted); }
.icp-status__item--success > .icon { color: var(--color-success); }
.icp-status__item--warning > .icon { color: var(--color-warning); }
.icp-status__item--danger > .icon { color: var(--color-danger); }
.icp-status__item--info > .icon { color: var(--color-info); }
.icp-status__item code { color: var(--color-caption); }

/* ── Illustrations page (tools/genIllustrations.mjs): a card per picture, the scene at hero and panel size ── */
.ilp-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ilp-card .t-card-title, .ilp-card p, .ilp-scene p, .ilp-scene .t-card-title { margin: 0; }
.ilp-card__art { align-self: stretch; display: flex; justify-content: center; padding: var(--space-4) 0; margin-bottom: var(--space-2); border-radius: var(--radius-control); background: var(--color-page); }
.ilp-hero { padding: var(--space-6); margin-bottom: var(--space-4); }
.ilp-scene { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: start; margin-bottom: var(--space-4); }
.ilp-scene__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ilp-scene__small { display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 720px) { .ilp-scene { grid-template-columns: 1fr; } }

/* ── States page (tools/genStates.mjs): a table per group, the action and the picture in their cells ── */
.stp-table td { vertical-align: top; }
.stp-words { min-width: 220px; }
.stp-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stp-cell--art { min-width: 180px; }
.stp-cell .alert { width: 100%; }

/* ── Auth layout page (tools/genSignIn.mjs): a 1280 × 800 screen scaled into a desktop frame; the small
   screens beside it; .is-still shows the scene at rest ── */
.auth-shot { --k: 0.68; flex: none; width: calc(1280px * var(--k)); height: calc(800px * var(--k)); max-width: 100%; overflow: hidden; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.auth-shot--sm { --k: 0.26; }
.auth-shot__screen { width: 1280px; height: 800px; transform: scale(var(--k)); transform-origin: 0 0; }
.auth-shot.is-still * { animation: none !important; }
.auth-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
/* A small shot opens large (showcase.js): it says so to the pointer and the keyboard */
.auth-shot--sm[data-zoom] { cursor: zoom-in; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.auth-shot--sm[data-zoom] > * { pointer-events: none; }
.auth-shot--sm[data-zoom]:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card); }
.auth-shot--sm[data-zoom]:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* The shot shown large: the site's dialog over the dimmed page, the picture at the scale the window
   allows, the caption under it */
html.sc-zoom-open { overflow: hidden; }
.sc-zoom {
  margin: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  color: var(--color-foreground);
}
.sc-zoom[open] { display: flex; flex-direction: column; gap: var(--space-3); animation: sc-zoom-in var(--duration-base) var(--ease-standard); }
.sc-zoom::backdrop { background: var(--color-overlay); }
.sc-zoom__close { align-self: flex-end; }
.sc-zoom__stage .auth-shot { max-width: none; box-shadow: none; }
.sc-zoom__caption { margin: 0; color: var(--color-muted); }
@keyframes sc-zoom-in { from { opacity: 0; transform: scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .sc-zoom[open] { animation: none; }
  .auth-shot--sm[data-zoom] { transition: none; }
}
.auth-fig { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.auth-moves { margin-top: var(--space-4); max-width: 820px; }
/* Links inside the shots and the menu's states: the product's own colors, not the frame's */
.sc-main :is(.auth-shot, .app-states) a { color: var(--color-primary); }
.sc-main :is(.auth-shot, .app-states) :is(.app-menu__item, .app-rail__item, .app-tabs__item) { color: var(--color-muted); }
.sc-main :is(.auth-shot, .app-states) :is(.app-menu__item, .app-tabs__item):is(:hover, .is-hover, .is-current),
.sc-main :is(.auth-shot, .app-states) .app-rail__item:is(:hover, .is-hover),
.sc-main :is(.auth-shot, .app-states) .app-ctx__item { color: var(--color-foreground); }
.sc-main :is(.auth-shot, .app-states) .app-rail__item.is-current { color: var(--color-primary-strong); }
/* App layout page: the menu's states at their real size */
.app-states { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); background: var(--color-page); }
.app-states__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.app-states__item > a { min-width: 180px; }
.app-states__title { margin: var(--space-6) 0 var(--space-3); }

/* ── Key screens page (tools/genScreens.mjs): who looks at a screen and when, what it is for, the flows
   it serves — a short definition list above the screen; a group's heading over its screens ── */
.ks-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); max-width: 1040px; margin: 0 0 var(--space-5); }
.ks-meta__row { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.ks-meta dt { color: var(--color-caption); }
.ks-meta dd { margin: 0; }
.ks-group { margin-top: var(--space-10); }
@media (max-width: 860px) { .ks-meta { grid-template-columns: 1fr; } }

/* ── Flows: a 1280 × 800 screen of the product scaled into the player's step (tools/parts/flows/flow.mjs
   › flowShot); full size in the player's full screen. The hero's who · start · end above the player. ── */
.flow-shot { --k: 0.68; flex: none; width: calc(1280px * var(--k)); height: calc(800px * var(--k)); margin: 0 auto; overflow: hidden; }
.flow-shot__screen { width: 1280px; height: 800px; transform: scale(var(--k)); transform-origin: 0 0; }
@media (min-width: 1600px) { .flow-shot { --k: 0.8; } }
@media (min-width: 1800px) { .flow-shot { --k: 0.9; } }
:is(.flow--full, .flow:fullscreen) .flow-shot { --k: 1; }
/* flow.js sets --k on each screen from the room it has; these are the scales before it does */
.flow__screen:has(> .flow-shot) { display: flex; justify-content: center; padding: var(--space-3); }
.flow-hero { margin: 0; }
/* The product's own link colors inside the screen, over the frame's rule for links in a stage */
.sc-main .flow__screen .flow-shot a:not(.btn):not(.app-menu__item) { color: var(--color-primary); }
.sc-main .flow__screen .flow-shot a.app-menu__item:not(.btn) { color: var(--color-muted); }
.sc-main .flow__screen .flow-shot a.app-menu__item:not(.btn):is(:hover, .is-hover, .is-current) { color: var(--color-foreground); }

/* ── The idea in one picture, on the Product page (SC-053): the container's path left to right, a stop
   per party — its own document, the AI, its STS transaction, the embedded emissions growing — and the
   customer's Scope 3 at the end. The box rides the track; every figure is markup, so the still
   version (reduced motion) shows the whole story ── */

.st-lead { max-width: 72ch; font-size: 17px; line-height: 28px; color: var(--frame-ink); }
.st-story {
  margin: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--frame-surface);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-frame);
}
.st-story__head { display: flex; flex-direction: column; gap: 4px; max-width: 80ch; }
.st-story__head p { margin: 0; color: var(--frame-muted); }
.st-stop--mine { --st-c: var(--color-category-mine); --st-soft: var(--color-category-mine-soft); --st-text: var(--color-category-mine-text); --st-fg: var(--color-category-mine-foreground); }
.st-stop--refiner { --st-c: var(--color-category-refiner); --st-soft: var(--color-category-refiner-soft); --st-text: var(--color-category-refiner-text); --st-fg: var(--color-category-refiner-foreground); }
.st-stop--carrier { --st-c: var(--color-category-carrier); --st-soft: var(--color-category-carrier-soft); --st-text: var(--color-category-carrier-text); --st-fg: var(--color-category-carrier-foreground); }
.st-stop--customer { --st-c: var(--color-category-customer); --st-soft: var(--color-category-customer-soft); --st-text: var(--color-category-customer-text); --st-fg: var(--color-category-customer-foreground); }

/* The track runs from the middle of the first stop to the middle of the last: a leg per hand-over,
   named by what travels on it */
.st-track { position: relative; display: flex; padding: 14px 12.5% 0; }
.st-track__leg { flex: 1; position: relative; padding-top: 14px; text-align: center; }
.st-track__leg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 2px dashed var(--frame-border); }
.st-track__leg::after { content: ''; position: absolute; top: -4px; right: -1px; border: 5px solid transparent; border-left: 7px solid var(--frame-muted); border-right: 0; }
.st-track__leg .t-caption { color: var(--frame-muted); font-family: var(--font-mono); font-size: 11px; }
.st-track__box {
  position: absolute;
  top: 0;
  left: 12.5%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: var(--frame-ink);
  color: var(--frame-surface);
  animation: st-ride 12s var(--ease-standard) infinite;
  z-index: 1;
}
@keyframes st-ride {
  0%, 8% { left: 12.5%; }
  25%, 33% { left: 37.5%; }
  50%, 58% { left: 62.5%; }
  75%, 100% { left: 87.5%; }
}

.st-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
/* Each stop spans the five rows of the list — party, document, AI, transaction, what it carries — so
   the same row lines up across the stops */
.st-stop {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 12px;
  padding: 16px;
  border: 1px solid var(--frame-border);
  border-top: 4px solid var(--st-c);
  border-radius: var(--radius-frame);
  background: var(--frame-surface);
}
.st-party { display: flex; align-items: center; gap: 10px; }
.st-party > div { display: flex; flex-direction: column; line-height: 20px; }
.st-party .t-caption { color: var(--frame-muted); }
.st-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: var(--st-c);
  color: var(--st-fg);
  font-weight: 600;
}

/* The party's document: a small page drawn in its own layout, its name and the terms it used */
.st-doc { margin: 0; display: flex; gap: 12px; align-items: flex-start; }
.st-doc figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-doc figcaption .t-label { color: var(--frame-muted); }
.st-doc figcaption .t-caption { color: var(--frame-muted); font-size: 12px; line-height: 18px; }
.st-doc__page {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 58px;
  padding: 8px 7px;
  border: 1px solid var(--frame-border);
  border-radius: 3px;
  background: var(--frame-page);
}
.st-doc__page > i { display: block; }
.st-doc__page > .st-doc__row { display: flex; }
.st-doc__row { display: flex; gap: 3px; }
.st-doc__row b { height: 6px; flex: 1; background: var(--frame-border); }
.st-doc__row b + b { flex: 0 0 9px; background: var(--st-c); opacity: 0.6; }
.st-doc__head { height: 6px; width: 70%; background: var(--st-c); opacity: 0.6; }
.st-doc__line { height: 3px; background: var(--frame-border); }
.st-doc__line--short { width: 60%; }
.st-doc__field { height: 9px; border: 1px solid var(--frame-border); border-radius: 2px; padding: 2px; }
.st-doc__field b { display: block; height: 3px; width: 50%; background: var(--st-c); opacity: 0.6; }

.st-ai { display: flex; align-items: center; gap: 6px; color: var(--frame-accent-strong); font-size: 13px; font-weight: 500; }

/* The STS transaction: the party's figures in the label's own words, and what it passes on */
.st-label {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--st-soft);
  color: var(--st-text);
  font-size: 13px;
  line-height: 18px;
  animation: st-glow 12s ease-in-out infinite;
  animation-delay: calc(var(--st-i) * 3s);
}
@keyframes st-glow {
  0%, 2% { box-shadow: 0 0 0 0 transparent; }
  6%, 14% { box-shadow: 0 0 0 3px var(--st-c); }
  22%, 100% { box-shadow: 0 0 0 0 transparent; }
}
.st-label__id { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.st-row > :last-child { flex: none; }
.st-sub { display: block; margin-top: 2px; font-size: 11px; line-height: 16px; opacity: 0.85; }
.st-row--muted { color: var(--frame-muted); font-style: italic; }
.st-row--total { padding-top: 6px; border-top: 1px solid currentColor; font-weight: 600; }
.st-flag { display: inline-block; padding: 0 6px; border-radius: var(--radius-full); border: 1px solid currentColor; font-size: 11px; line-height: 16px; }

/* What the material carries after the stop: one segment per party, against the customer's total */
.st-carry { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.st-carry .t-caption { color: var(--frame-muted); }
.st-bar { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--frame-page); }
.st-bar__seg--mine { background: var(--chart-mine); }
.st-bar__seg--refiner { background: var(--chart-refiner); }
.st-bar__seg--carrier { background: var(--chart-carrier); }
.st-bar__seg + .st-bar__seg { border-left: 2px solid var(--frame-surface); }

/* The customer: its Scope 3 for the container, the categories under the bar, and a cited answer */
.st-scope { grid-row: span 2; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.st-scope .t-label { color: var(--frame-muted); }
.st-scope__total { font-size: 28px; line-height: 34px; font-weight: 600; color: var(--frame-ink); }
.st-brace { display: flex; font-family: var(--font-mono); font-size: 11px; color: var(--frame-muted); }
.st-brace span { border-top: 2px solid var(--frame-muted); margin-right: 2px; padding-top: 2px; text-align: center; overflow: visible; white-space: nowrap; }
.st-ask { align-self: start; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--frame-page); font-size: 13px; }
.st-ask__q { display: flex; gap: 6px; align-items: center; color: var(--frame-ink); }
.st-ask .t-caption { color: var(--frame-muted); }
.st-never { margin: 0; align-self: end; color: var(--frame-muted); }

/* The short way through the site */
.st-tour { display: flex; flex-direction: column; gap: 12px; }
.st-tour__head p { margin: 0; color: var(--frame-muted); }
.st-tour__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: tour; }
.st-tour__list li { counter-increment: tour; display: flex; }
.sc-main a.st-tour__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-frame);
  background: var(--frame-surface);
  color: var(--frame-ink);
  text-decoration: none;
}
.st-tour__link::before { content: counter(tour); font-family: var(--font-frame-display); font-size: 22px; line-height: 26px; color: var(--frame-accent-strong); }
.sc-main a.st-tour__link:hover { border-color: var(--frame-ink); }
.st-tour__link .t-caption { color: var(--frame-muted); }

@media (max-width: 1100px) {
  .st-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .st-track { display: none; }
  .st-tour__list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 640px) {
  .st-stops { grid-template-columns: minmax(0, 1fr); }
  .st-story { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-track__box { animation: none; left: 87.5%; }
  .st-label { animation: none; }
}

/* Card grids with a fixed count, so no card sits alone on the last row */
.sc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sc-cards--4, .sc-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sc-cards--4, .sc-cards--3 { grid-template-columns: minmax(0, 1fr); } }

/* ── The demo specification as a page (SC-055): a document to read and print, at a reading width ── */

.spec { max-width: 76ch; font-size: 15px; line-height: 24px; }
.spec h2 { font-family: var(--font-frame-display); font-weight: 400; font-size: 24px; line-height: 32px; margin: 32px 0 8px; }
.spec ul, .spec ol { padding-left: 22px; margin: 8px 0; }
.spec li { margin: 4px 0; }
.spec li > ul, .spec li > ol { margin: 4px 0; }
.spec__print { margin: 0 0 8px; }

/* ── Print: the page alone, no frame — the spec, the questions and the Product page print as documents ── */

@media print {
  .sc-side, .sc-top, .sc-pager, .sc-present-exit, .spec__print, [data-nav-toggle] { display: none !important; }
  body { background: none; }
  .sc-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .sc-main :is(.sc-card, .sc-tile, .st-story, .st-stop, .table-wrap) { break-inside: avoid; }
  .st-track__box, .st-label { animation: none !important; }
  a { color: inherit !important; text-decoration: none; }
}