/*
 * The components of STS Exchange Platform, in plain CSS, on the tokens in tokens.css.
 *
 * Each block names where the component comes from: the file in the product's code, or "proposed"
 * when the product does not have it yet. A value is never written here; every color, radius, size
 * and duration is a token.
 *
 * STARTER: the few classes the showcase's own frame needs (brand tile, navigation link, buttons,
 * segmented control, tag, badge, card, table, spinner, icon). The Components phase restyles them to
 * the product and adds the rest, one block per section of components/index.html — the showcase's
 * menu then looks like the product's own sidebar.
 */

/* ── Brand tile: the mark and the product's name at the top of the menu — starter ── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--color-foreground);
  font-weight: 600;
  text-decoration: none;
}
.brand:hover { color: var(--color-foreground); }
.brand__mark {
  /* Until a mark is picked, a letter on the brand tile */
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
/* A picked mark is a tile of its own (plans/logo.md): it fills the box in the brand color, its glyph cut
   to the brand's foreground, as the letter was drawn */
.brand__mark:has(> svg) {
  --lg-ground: var(--color-primary-foreground);
  background: none;
  color: var(--color-primary);
}
.brand__mark svg { width: 28px; height: 28px; }

/* ── Navigation link: a menu item; the page on show carries aria-current — starter ── */
.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-control);
  color: var(--color-muted);
  text-decoration: none;
}
.navlink:hover,
.navlink.is-hover {
  background: var(--color-surface-muted);
  color: var(--color-foreground);
}
.navlink[aria-current='page'] {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* ── Icon: Lucide's 24 grid drawn with the current color, sized by --icon-size (px, a number) so the
   stroke stays --icon-stroke on screen at every size; the sprite is in assets/showcase.js (tools/genIcons.mjs) ── */
.icon { --icon-size: 16; width: calc(var(--icon-size) * 1px); height: calc(var(--icon-size) * 1px); fill: none; stroke: currentColor; stroke-width: calc(var(--icon-stroke) * 24 / var(--icon-size)); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--18 { --icon-size: 18; }
.icon--20 { --icon-size: 20; }
.icon--24 { --icon-size: 24; }

/* ── Button: the Figma's 34 px control with a 16 px icon, four variants, a small size and the at-work state — from the Figma's create-request and supplier-response; replaces "Button — starter" ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-3-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* At work: the loader stands where the icon was; the button keeps its size and ignores the pointer */
.btn[aria-busy='true'] { cursor: progress; pointer-events: none; }
.btn--sm { height: var(--size-control-sm); padding: 0 var(--space-2-5); gap: var(--space-1-5); }
.btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-emphasis); color: var(--color-foreground); box-shadow: var(--shadow-raised); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--color-surface-muted); }
.btn--ghost { background: transparent; color: var(--color-foreground); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-surface-muted); }
.btn--danger { background: var(--color-danger); color: var(--color-danger-foreground); }
.btn--danger:hover, .btn--danger.is-hover { background: var(--color-danger-hover); }
.btn--block { width: 100%; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading .spinner { position: absolute; }
/* Buttons side by side, and the variants of the Components page: a row per size */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btn-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.btn-rows__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* ── Spinner — starter ── */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin var(--duration-spin) linear infinite;
}
.btn.is-loading .spinner { color: var(--color-primary-foreground); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Loader: the picked mark, Linked blocks, in motion (design/loaders.html, plans/loaders.md). The
   tile is <rect class="ld__tile">, each block a <g class="ld__part" data-part="upper|lower"> the
   animation turns, moves or fades about the tile's centre. Every animation ends on the mark at rest,
   so under reduced motion a loader is the still mark. Sizes: --sm 16 (buttons, rows), --md 32, --lg 64 ── */
.ld { display: inline-block; flex: none; width: 32px; height: 32px; color: var(--color-primary); overflow: visible; }
.ld--sm { width: 16px; height: 16px; }
.ld--md { width: 32px; height: 32px; }
.ld--lg { width: 64px; height: 64px; }
/* In a button the tile takes the label's color and the glyph the button's fill */
.btn .ld { color: currentColor; }
.btn--primary .ld { --lg-ground: var(--color-primary); }
.ld__part, .ld__tile { transform-box: view-box; transform-origin: 50% 50%; }
/* Turn: the S a half turn, a rest, the other half */
.ld--turn .ld__part { animation: ld-turn var(--duration-loader) var(--ease-standard) infinite; }
@keyframes ld-turn { 0% { transform: rotate(0deg); } 40%, 50% { transform: rotate(180deg); } 90%, 100% { transform: rotate(360deg); } }
/* Lock: the blocks draw apart along the diagonal and lock again */
.ld--lock .ld__part { animation: ld-lock-upper var(--duration-loader) var(--ease-standard) infinite; }
.ld--lock .ld__part[data-part='lower'] { animation-name: ld-lock-lower; }
@keyframes ld-lock-upper { 0%, 15%, 85%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(-3px, -7px); } }
@keyframes ld-lock-lower { 0%, 15%, 85%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(3px, 7px); } }
/* Relay: the blocks in turn, the upper, then the lower, half a cycle apart */
.ld--relay .ld__part { animation: ld-relay var(--duration-loader) var(--ease-standard) infinite; }
.ld--relay .ld__part[data-part='lower'] { animation-delay: calc(var(--duration-loader) / -2); }
@keyframes ld-relay { 0%, 50%, 100% { opacity: 1; } 25% { opacity: 0.25; } }
/* Start: the blocks come in and lock, then the tile beats once */
.ld--start .ld__part { animation: ld-start-upper var(--duration-loader) var(--ease-enter) infinite; }
.ld--start .ld__part[data-part='lower'] { animation-name: ld-start-lower; }
.ld--start .ld__tile { animation: ld-start-tile var(--duration-loader) var(--ease-standard) infinite; }
@keyframes ld-start-upper { 0%, 10% { transform: translate(-6px, -14px); opacity: 0; } 45%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes ld-start-lower { 0%, 10% { transform: translate(6px, 14px); opacity: 0; } 45%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes ld-start-tile { 0%, 45%, 75%, 100% { transform: scale(1); } 58% { transform: scale(1.08); } }
/* The share known: a faint tile, and the tile filling from the bottom (style="--ld-share: 33%") */
.ld__track { opacity: 0.24; }
.ld__fill { clip-path: inset(calc(100% - var(--ld-share, 0%)) 0 0 0); transition: clip-path var(--duration-slow) var(--ease-standard); }
/* Not at once: a loader shows only after a short wait, so a quick answer never flashes it */
.ld-delayed { animation: ld-appear 0s linear var(--duration-loader-delay) both; }
@keyframes ld-appear { from { visibility: hidden; } to { visibility: visible; } }

/* ── Segmented control: the theme and language switches of this site — starter ── */
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-default);
  background: var(--color-surface-muted);
  border-radius: var(--radius-control);
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--size-control-sm) - 4px);
  padding: 0 10px;
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
}
.segmented__item .icon { --icon-size: 14; }
.segmented__item:hover { color: var(--color-foreground); }
.segmented__item[aria-pressed='true'] { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-card); }
.segmented__item:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }

/* ── Tag and badge: the Figma's status chip — a pill with a dot and a tint line; the tag is the same pill without the dot — from the Figma's exchange-records and overview ── */
.tag, .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.tag { background: var(--color-surface); }
/* The dot: the tone's solid color (a neutral chip's own text color); the one in progress is brand blue
   and pulses (.is-working, AI at work) */
.badge:not(.sc-proposed)::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--badge-dot, currentColor);
}
.badge.is-working { --badge-dot: var(--color-primary); }
.badge--success { --badge-dot: var(--color-success); background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
.badge--warning { --badge-dot: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge--danger { --badge-dot: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.badge--info { --badge-dot: var(--color-info); background: var(--color-info-soft); color: var(--color-info-text); border-color: var(--color-info-border); }
/* The set on the Components page: a row per kind of state, the party's tile beside its chip */
.badge-set { display: flex; flex-direction: column; gap: var(--space-3); }
.badge-set__row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: var(--space-4); }
.badge-set__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.badge-set__items .icon { color: var(--color-subtle); }
.badge-set__pair { display: inline-flex; align-items: center; gap: var(--space-1-5); }

/* ── Party: the four places of the chain, a letter tile and a chip — proposed. Always beside the
   party's name; the colors are the categorical tokens (SC-002). The chip is as tall as a badge. ── */
.party-tile {
  display: inline-grid; place-items: center; flex: none;
  width: var(--size-tile); height: var(--size-tile);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 9px; line-height: 10px; font-weight: 700;
}
.party-tile--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); border-radius: var(--radius-control); font-size: 12px; line-height: 16px; font-weight: 600; }
.party-chip {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.party--mine { --party: var(--color-category-mine); --party-fg: var(--color-category-mine-foreground); --party-soft: var(--color-category-mine-soft); --party-text: var(--color-category-mine-text); }
.party--carrier { --party: var(--color-category-carrier); --party-fg: var(--color-category-carrier-foreground); --party-soft: var(--color-category-carrier-soft); --party-text: var(--color-category-carrier-text); }
.party--refiner { --party: var(--color-category-refiner); --party-fg: var(--color-category-refiner-foreground); --party-soft: var(--color-category-refiner-soft); --party-text: var(--color-category-refiner-text); }
.party--customer { --party: var(--color-category-customer); --party-fg: var(--color-category-customer-foreground); --party-soft: var(--color-category-customer-soft); --party-text: var(--color-category-customer-text); }
.party-tile[class*='party--'] { background: var(--party); color: var(--party-fg); }
.party-chip[class*='party--'] { background: var(--party-soft); color: var(--party-text); }

/* ── Card: the Figma's white card — a 1 px line, a title row, a body; a link-card deepens its line on hover ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  color: var(--color-foreground);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3-5) var(--space-4-5) 0;
}
.card__head--line { padding-bottom: var(--space-3-5); border-bottom: 1px solid var(--color-default); }
/* The last item of the row — a link, an icon — goes to the right edge; a count stays beside the title */
.card__head > :last-child:not(:first-child) { margin-left: auto; }
.card__head > .card__count:last-child { margin-left: 0; }
.card__body { padding: var(--space-3) var(--space-4-5) var(--space-4-5); }
.card__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 11px; line-height: 16px; font-weight: 500;
}
.card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2-5) 0; }
.card__row + .card__row { border-top: 1px solid var(--color-default); }
.card__party { display: inline-flex; align-items: center; gap: var(--space-2-5); }
.card__sub { display: block; color: var(--color-caption); }
a.card, a.card:hover { display: block; color: var(--color-foreground); text-decoration: none; }
a.card, .card--link { cursor: pointer; }
a.card:hover, .card.is-hover { border-color: var(--color-emphasis); box-shadow: var(--shadow-soft); }

/* ── Table: the Figma's data table — a muted head of 38, rows of two lines, mono ids and times, a hover row; a row in error is tinted red ── */
/* position: an absolutely placed child (a screen-reader-only label in a cell) stays inside the scroller
   instead of widening the page */
.table-wrap { position: relative; overflow: auto; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; }
.table th, .table td { padding: var(--space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-default); }
.table th:first-child, .table td:first-child { padding-left: var(--space-4); }
.table th:last-child, .table td:last-child { padding-right: var(--space-4); }
.table th {
  height: var(--size-row-head);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover { background: var(--color-surface-muted); }
.table tbody tr.is-selected { background: var(--color-primary-soft); }
.table td.mono { letter-spacing: 0; white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__party { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; white-space: nowrap; }
.table__sub { display: block; color: var(--color-caption); font-size: 12px; line-height: 17px; font-weight: 400; }
/* A row in error: tinted, with a bar on its left edge; the missing item is named under the chip */
.table tbody tr.is-error, .table tbody tr.is-error:hover { background: var(--color-danger-soft); }
.table tr.is-error td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.table tr.is-error .table__sub { color: var(--color-danger-text); }

/* ── AI at work: the pulse of an in-progress state — generating, being interpreted, answering
   (D-032) — proposed. Still under reduced motion (site.css), the words stay. ── */
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.is-working::before {
  content: ''; display: inline-block; flex: none;
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: currentColor;
  animation: ai-pulse var(--duration-pulse) var(--ease-standard) infinite;
}

/* ── Response document: the prepared documents beside the drop zone, and the read-only viewer of one's own file — proposed ── */
.doc { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.doc__pick { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.doc__col { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; }
/* The file as it reads: a page of plain text in mono, on the muted surface so it looks like a document, not a card */
.doc__page { padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface-muted); color: var(--color-foreground); font-family: var(--font-mono); font-size: 12px; line-height: 20px; }
.doc__title { margin: 0 0 var(--space-4); font-weight: 600; }
.doc__lines { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-6); margin: 0; }
.doc__lines dt { color: var(--color-muted); }
.doc__lines dd { margin: 0; overflow-wrap: anywhere; }
.doc__foot { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-emphasis); color: var(--color-muted); }
.doc__note { display: flex; align-items: center; gap: var(--space-2); margin: 0; }

/* ── Response status: submitted, interpreted, in error and failed, in a card — proposed ── */
.resp-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); width: 100%; align-items: start; }
.resp, .outcome, .answer, .export { width: 100%; }
.resp__head, .outcome__head, .answer__head, .export__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); }
.resp__body, .outcome__body, .answer__body, .export__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.resp__steps { display: flex; flex-direction: column; gap: var(--space-2-5); margin: 0; padding: 0; list-style: none; }
.resp__step { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2-5); }
.resp__mark { display: inline-flex; color: var(--color-success-text); }
.resp__words { color: var(--color-muted); }
.resp__missing { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.resp__missing li { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger-border); border-radius: var(--radius-control); background: var(--color-danger-soft); }
.resp__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Review outcome: the decision with its note, and the decision taken — proposed ── */
.outcome-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); width: 100%; align-items: start; }
.outcome__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The note is the customer's only words to the supplier; a past note, answered by the replacement, goes quiet */
.outcome__note { margin: 0; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-warning); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-foreground); font-size: 13px; line-height: 19px; }
.outcome__note--past { border-left-color: var(--color-emphasis); background: var(--color-surface-muted); color: var(--color-muted); }

/* ── Query and answer: the box, an answer with citation chips, answering — proposed ── */
.query { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.query__box { display: flex; align-items: flex-end; gap: var(--space-2); }
.query__box .field { flex: 1; min-width: 0; }
.query__list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
/* Answering: where the answer will land, in the same place the first card will stand (D-032) */
.query__working { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); padding: var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); }
.query__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5); }
.answer__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.answer__row { display: grid; grid-template-columns: 180px 100px minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
.answer__row + .answer__row { border-top: 1px solid var(--color-default); }
/* Narrow: the party and its figure on one line, the citations under them */
@media (max-width: 560px) {
  .answer__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .answer__row > :nth-child(n+3) { grid-column: 1 / -1; }
}
.answer__figure { font-variant-numeric: tabular-nums; }
.answer__row--total .answer__figure { font-weight: 600; }
/* A citation chip: a button that opens the chain view with the transaction in focus; the chain view has the way back (D-038) */
.cite { display: inline-flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: var(--space-2); max-width: 100%; padding: var(--space-1) var(--space-2-5); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-foreground); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.cite:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.cite:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.cite__id { color: var(--color-primary-strong); font-weight: 500; }
.cite .icon { color: var(--color-caption); }

/* ── Export: the format and one action; nothing to export yet — proposed ── */
.export { max-width: 560px; }
.export.is-empty .export__formats { opacity: 0.5; }
.export__empty { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); }
.export__words { display: flex; flex-direction: column; gap: var(--space-0-5); }
.export__actions { display: flex; gap: var(--space-2); }

/* ── Synthetic data mark: a muted dashed pill, on every screen (A-087) — proposed ── */
.synthetic { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-0-5) var(--space-2-5); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.synthetic-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; height: var(--size-app-header); padding: 0 var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.synthetic-bar__where { display: flex; align-items: center; gap: var(--space-2); }

/* ── Text field: a labelled field, a unit suffix, an error — from the Figma's create-request and supplier-response; the error is proposed ── */
.field { display: flex; flex-direction: column; gap: var(--space-1-5); width: 100%; min-width: 0; }
.field__label { font-weight: 500; color: var(--color-foreground); }
.field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field__control:hover, .field.is-hover .field__control { border-color: var(--color-subtle); }
/* Focus is the Figma's 2 px blue border: the 1 px line and 1 px more */
.field__control:focus-within, .field.is-focus .field__control { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); }
.field__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; }
.field__input::placeholder { color: var(--color-subtle); }
.field__suffix { flex: none; font-size: 12px; line-height: 17px; color: var(--color-caption); white-space: nowrap; }
.field__error { display: none; font-size: 12px; line-height: 17px; color: var(--color-danger-text); }
.field.is-error .field__error { display: block; }
.field.is-error .field__hint { display: none; }
.field.is-error .field__control { border-color: var(--color-danger); }
.field.is-error .field__control:focus-within, .field.is-error.is-focus .field__control { box-shadow: 0 0 0 1px var(--color-danger); }
/* Fields side by side */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }

/* ── Choice cards: radio cards, one of a few — from the Figma's linked shipment card; the cards are proposed ── */
.choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); width: 100%; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.choice:hover, .choice.is-hover { border-color: var(--color-subtle); background: var(--color-surface-muted); }
.choice:has(.choice__input:focus-visible), .choice.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Chosen: the blue border, a soft blue ground, the radio filled */
.choice.is-checked, .choice:has(.choice__input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 1px var(--color-primary); }
.choice__input {
  appearance: none;
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  margin: var(--space-0-5) 0 0;
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  cursor: inherit;
}
.choice__input:checked, .choice.is-checked .choice__input { border: 5px solid var(--color-primary); background: var(--color-primary-foreground); }
.choice__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.choice__title { font-weight: 500; color: var(--color-foreground); }
.choice__meta { color: var(--color-muted); }

/* ── File upload and file card: the drop zone and the card a file becomes — from the Figma's supplier-response ── */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  width: 100%;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-panel);
  background: var(--color-surface-muted);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.upload > .icon { --icon-size: 20; color: var(--color-caption); }
.upload__text { font-weight: 500; color: var(--color-foreground); }
.upload__link { color: var(--color-primary-strong); text-decoration: underline; text-underline-offset: var(--space-0-5); }
.upload:hover, .upload.is-hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.upload:focus-within, .upload.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.file-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.file-card__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-avatar-lg); height: var(--size-avatar-lg); border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.file-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.file-card__name { overflow: hidden; font-weight: 500; color: var(--color-foreground); text-overflow: ellipsis; white-space: nowrap; }
.file-card__aside { display: flex; flex: none; align-items: center; gap: var(--space-2); }

/* ── Presenter's switch: the presenter's bar, the four parties to act as and Start over — proposed. A dashed edge marks it as the presenter's, not the product's; the party acted as takes its category color. ── */
.presenter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-emphasis); border-radius: var(--radius-panel);
  background: var(--color-surface-muted);
}
.presenter__label { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--color-muted); }
.presenter__parties { display: inline-flex; gap: var(--space-0-5); padding: var(--space-0-5); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.presenter__party {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: var(--size-control-sm); padding: 0 var(--space-2-5) 0 var(--space-1-5);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted);
  font: inherit; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.presenter__party:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.presenter__party:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.presenter__party.is-current { background: var(--party-soft); color: var(--party-text); box-shadow: inset 0 0 0 1px var(--party), var(--shadow-raised); }
.presenter__restart { margin-left: auto; }
.presenter--busy { min-height: var(--size-control); }
.presenter__note { font-size: 12px; line-height: 17px; color: var(--color-muted); }

/* ── Chain: mine → carrier → refiner → customer, step states and the transaction card — proposed, the Figma's status chips and activity timeline. ── */
.chain { display: flex; align-items: stretch; gap: var(--space-1); width: 100%; margin: 0; padding: 0; list-style: none; }
.chain__step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface);
}
.chain__step--end { border-style: dashed; background: var(--color-surface-muted); }
.chain__step--error { border-color: var(--color-danger-border); }
.chain__link { flex: none; align-self: center; display: grid; place-items: center; color: var(--color-subtle); }
.chain__head { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
.chain__who { display: flex; flex-direction: column; min-width: 0; }
.chain__name { font-weight: 500; }
.chain__place { font-size: 12px; line-height: 17px; color: var(--color-caption); }
.chain__state { min-height: 22px; }
.chain__quiet { margin: 0; font-size: 12px; line-height: 17px; color: var(--color-caption); }
.chain__wait {
  display: grid; place-items: center; min-height: 120px; padding: var(--space-3);
  border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control);
  font-size: 12px; line-height: 17px; text-align: center; color: var(--color-muted);
}
.chain__error {
  display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--color-danger-border); border-radius: var(--radius-control);
  background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 12px; line-height: 17px;
}
.chain__error-title { display: flex; align-items: center; gap: var(--space-1-5); font-size: 13px; font-weight: 500; }

/* ── Transaction card: the summary of one STS transaction at its chain step — id, event type, category, parent, review status, the two times — proposed. ── */
.tx { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.tx__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1-5); }
.tx__list { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; }
.tx__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.tx__list dt { font-size: 12px; line-height: 17px; color: var(--color-caption); }
.tx__list dd { margin: 0; text-align: right; }

/* ── Label fields: the six mandatory fields and the eight questions with their one-line meanings, an error row and the legend of special values — from the Figma's supplier response fields. ── */
.lbl { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.lbl__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2-5); }
.lbl__head > .badge { margin-left: auto; }
.lbl__note { margin: 0; font-size: 12px; line-height: 17px; color: var(--color-muted); }
.lbl__group { margin: var(--space-1) 0 0; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-default); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--color-muted); }
.lbl__list { display: flex; flex-direction: column; margin: 0; }
.lbl__row { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-2-5) 0; border-bottom: 1px solid var(--color-default); }
.lbl__row:last-child { border-bottom: 0; }
.lbl__row dt { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); }
.lbl__no { grid-row: span 2; font-family: var(--font-mono); font-size: 11px; line-height: 19px; color: var(--color-caption); }
.lbl__name { font-weight: 500; }
.lbl__meaning { grid-column: 2; font-size: 12px; line-height: 17px; color: var(--color-caption); }
.lbl__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-2); margin: 0; padding-left: var(--space-5); }
.lbl__id { word-break: break-all; }
.lbl__how { font-size: 12px; line-height: 17px; color: var(--color-caption); }
.lbl__parts { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.lbl__part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.lbl__part > span:first-child { flex: 1 1 100%; color: var(--color-muted); }
.lbl__part .num, .lbl__value .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.lbl__none { color: var(--color-subtle); }
.lbl__missing { color: var(--color-danger-text); font-weight: 500; }
.lbl__row.is-error { padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-sm); background: var(--color-danger-soft); border-bottom-color: transparent; }
.lbl__alert { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-3); border: 1px solid var(--color-danger-border); border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-danger-text); }
.lbl__alert .icon { margin-top: var(--space-0-5); }
.lbl__alert-text { display: flex; flex-direction: column; gap: var(--space-1); }
.lbl__legend { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-default); }
.lbl__special { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1-5) var(--space-2); }

/* ── Method flag: measured or estimated, beside an emission figure (D-033) — proposed. A filled dot for measured, a ring for estimated, a link for a figure passed on as reported; neutral on purpose, so it is never read as a status. ── */
.method {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 var(--space-2);
  border: 1px solid var(--color-default); border-radius: var(--radius-full); background: var(--color-surface);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--color-foreground);
}
.method::before { content: ''; box-sizing: border-box; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); }
.method--estimated::before { background: transparent; border: 1.5px solid var(--color-primary); }
.method--reported::before { content: none; }
.method .icon { --icon-size: 12; color: var(--color-muted); }

/* ── Special values: not stated, not applicable — no upstream party, no data in this chain — proposed. Italic and dashed: a reading, not a figure and not an error. ── */
.special {
  display: inline-block; padding: var(--space-0-5) var(--space-2);
  border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control);
  font-size: 12px; line-height: 16px; font-style: italic; color: var(--color-muted);
}

/* ── Roll-up: per party its own Scope 1–2 and the Scope 3 it received, by category, the rule beside the figures, a missing step named — from the Figma's metrics table. ── */
.rollup { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.rollup .table td.mono { white-space: nowrap; }
.rollup .table .num { white-space: nowrap; }
.rollup .table td:nth-child(4) { white-space: normal; }
.rollup__cat th, .rollup__cat td { background: var(--color-surface-muted); }
.rollup__cat th { font-size: 13px; font-weight: 600; letter-spacing: normal; color: var(--color-foreground); }
.rollup__cat td.num { font-weight: 600; }
.rollup .party-chip { white-space: nowrap; }
.rollup__unit { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--color-caption); }
.rollup__why { color: var(--color-muted); }
.rollup__gap { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--color-danger-text); font-weight: 500; }
.rollup__missing td { background: var(--color-danger-soft); }
.rollup__total th, .rollup__total td { padding: var(--space-3); border-top: 1px solid var(--color-emphasis); background: var(--color-surface-muted); font-weight: 600; font-size: 13px; letter-spacing: normal; color: var(--color-foreground); }
.rollup__total th { text-align: left; }
.rollup__sum { display: block; margin-top: var(--space-0-5); font-size: 12px; font-weight: 400; color: var(--color-muted); }
.rollup__equals { font-weight: 400; color: var(--color-muted); }
.rollup__rule { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-3-5) var(--space-4); border: 1px solid var(--color-info-border); border-radius: var(--radius-card); background: var(--color-info-soft); }
.rollup__rule p { margin: 0; color: var(--color-foreground); }
.rollup__rule-title { display: flex; align-items: center; gap: var(--space-1-5); font-weight: 600; color: var(--color-info-text); }
.rollup__rule-more { font-size: 12px; line-height: 17px; color: var(--color-muted); }
.tx__list > div { flex-wrap: wrap; }
.tx__list dd { margin-left: auto; }
.tx .mono { white-space: nowrap; }

/* ── Breadcrumbs: the Figma's small grey trail; the last crumb is the page — from the Figma's create-request ── */
.crumbs { font-size: 12px; line-height: 17px; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.crumbs__item { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--color-muted); }
.crumbs__item a, .crumbs__item a:hover { color: var(--color-muted); }
.crumbs__item a:hover { color: var(--color-foreground); text-decoration: underline; }
.crumbs__item .icon { --icon-size: 12; color: var(--color-subtle); }
.crumbs__item[aria-current='page'] { color: var(--color-foreground); font-weight: 500; }

/* ── Alert: the info callout and an error — from the Figma's create-request ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-panel);
  background: var(--color-info-soft);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 19px;
}
.alert > .icon { margin-top: var(--space-0-5); color: var(--color-info); }
.alert__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.alert__title { color: var(--color-info-text); font-weight: 600; }
.alert--danger { border-color: var(--color-danger-border); background: var(--color-danger-soft); }
.alert--danger > .icon { color: var(--color-danger); }
.alert--danger .alert__title { color: var(--color-danger-text); }

/* ── Confirmation: a dialog on a dimmed panel; on the page it sits over the page, here in place — proposed ── */
.dialog-scrim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-control);
  background: var(--color-overlay);
}
.dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 420px;
  padding: var(--space-5);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  color: var(--color-foreground);
}
.dialog__lead { color: var(--color-muted); }
.dialog__list { display: flex; flex-direction: column; gap: var(--space-2); }
.dialog__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.dialog__list .icon { margin-top: var(--space-0-5); color: var(--color-muted); }
.dialog__list--discards .icon { color: var(--color-danger); }
.dialog__keep {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 17px;
}
.dialog__keep .icon { margin-top: 1px; color: var(--color-success); }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); }

/* ── Empty state: an icon in a soft round tile, a title, a line and one action — proposed; the picture comes from the Illustrations step ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-card);
  text-align: center;
}
.empty__icon {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.empty__icon .icon { --icon-size: 20; }
.empty__text { max-width: 360px; color: var(--color-muted); }
.empty__action { margin-top: var(--space-2); }

/* ── Illustration: a picture from assets/illustrations.js, drawn with --ill-* tokens; the stroke,
   caps and joins set here are inherited into the symbol ── */
.ill { display: block; flex: none; fill: none; stroke: var(--ill-line); stroke-width: var(--ill-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ill--spot { width: 160px; height: 120px; }
.ill--panel { width: 320px; max-width: 100%; height: auto; aspect-ratio: 9 / 2; }
.ill--hero { width: 100%; height: auto; aspect-ratio: 9 / 2; }
.ill--thumb { width: 96px; height: 72px; }

/* ── Scenes: the moving parts of the layouts' pictures (tools/parts/illustrations/pictures.mjs, the
   Auth layout's band). Slow loops on the motion tokens; every animation ends on the complete picture
   and fills both ways, so under reduced motion (site.css) each stands still and whole ── */
.scn-wagon, .scn-tag, .scn-puff, .scn-halo, .scn-drift, .scn-beam, .scn-field, .scn-status, .scn-flow, .scn-check, .scn-bar, .scn-badge {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  transform-box: fill-box;
}
/* The truck rolls to the customer, fades, comes back from the refiner and rolls to where it rests */
.scn-wagon { animation: scn-roll var(--duration-scene) linear infinite both; }
@keyframes scn-roll {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(70px); opacity: 1; }
  50% { transform: translateX(70px); opacity: 0; }
  51% { transform: translateX(-72px); opacity: 0; }
  56% { transform: translateX(-72px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
.scn-tag { transform-origin: left bottom; animation: scn-sway var(--duration-sway) var(--ease-standard) infinite both; }
@keyframes scn-sway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(5deg); } }
.scn-puff { transform-origin: center; animation: scn-puff var(--duration-puff) var(--ease-standard) infinite both; }
.scn-puff--late { animation-delay: calc(var(--duration-puff) / -2); }
@keyframes scn-puff {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  80% { transform: translateY(-16px) scale(1.4); opacity: 0; }
  81% { transform: translateY(0) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* The chain's steps light up in turn: a halo grows round each and fades */
.scn-halo { transform-origin: center; animation: scn-halo-1 var(--duration-scene) var(--ease-standard) infinite both; }
.scn-halo--2 { animation-name: scn-halo-2; }
.scn-halo--3 { animation-name: scn-halo-3; }
.scn-halo--4 { animation-name: scn-halo-4; }
@keyframes scn-halo-1 { 0%, 14%, 100% { opacity: 0; transform: scale(0.5); } 6% { opacity: 1; transform: scale(1); } }
@keyframes scn-halo-2 { 0%, 25%, 39%, 100% { opacity: 0; transform: scale(0.5); } 31% { opacity: 1; transform: scale(1); } }
@keyframes scn-halo-3 { 0%, 50%, 64%, 100% { opacity: 0; transform: scale(0.5); } 56% { opacity: 1; transform: scale(1); } }
@keyframes scn-halo-4 { 0%, 75%, 89%, 100% { opacity: 0; transform: scale(0.5); } 81% { opacity: 1; transform: scale(1); } }
/* The wide scene's layers drift at two speeds */
.scn-drift { animation: scn-drift-far var(--duration-drift) var(--ease-standard) infinite alternate both; }
.scn-drift--near { animation-name: scn-drift-near; }
@keyframes scn-drift-far { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes scn-drift-near { from { transform: translateX(0); } to { transform: translateX(-28px); } }
/* The reading: the beam passes down the document; each line it passes fills a field of the label */
.scn-beam { animation: scn-beam var(--duration-scene-check) linear infinite both; }
@keyframes scn-beam {
  0% { transform: translateY(0); opacity: 1; }
  75% { transform: translateY(170px); opacity: 1; }
  80% { transform: translateY(170px); opacity: 0; }
  81% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.scn-field { transform-origin: left center; animation: scn-fill-1 var(--duration-scene-check) var(--ease-enter) infinite both; }
.scn-field--2 { animation-name: scn-fill-2; }
.scn-field--3 { animation-name: scn-fill-3; }
.scn-field--4 { animation-name: scn-fill-4; }
.scn-field--5 { animation-name: scn-fill-5; }
.scn-field--6 { animation-name: scn-fill-6; }
@keyframes scn-fill-1 { 0%, 5% { transform: scaleX(0); } 10%, 100% { transform: scaleX(1); } }
@keyframes scn-fill-2 { 0%, 19% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
@keyframes scn-fill-3 { 0%, 33% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes scn-fill-4 { 0%, 48% { transform: scaleX(0); } 53%, 100% { transform: scaleX(1); } }
@keyframes scn-fill-5 { 0%, 62% { transform: scaleX(0); } 67%, 100% { transform: scaleX(1); } }
@keyframes scn-fill-6 { 0%, 76% { transform: scaleX(0); } 81%, 100% { transform: scaleX(1); } }
.scn-status { transform-origin: left center; animation: scn-status var(--duration-scene-check) var(--ease-enter) infinite both; }
@keyframes scn-status { 0%, 82% { transform: scaleX(0); opacity: 0; } 88%, 100% { transform: scaleX(1); opacity: 1; } }
.scn-flow { animation: scn-flow var(--duration-sway) linear infinite both; }
@keyframes scn-flow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
/* The chain checked: each step's check draws in turn, then the roll-up fills and the badge appears */
.scn-check { stroke-dasharray: 1; animation: scn-check-1 var(--duration-scene-check) var(--ease-enter) infinite both; }
.scn-check--2 { animation-name: scn-check-2; }
.scn-check--3 { animation-name: scn-check-3; }
.scn-check--4 { animation-name: scn-check-4; }
@keyframes scn-check-1 { 0%, 6% { stroke-dashoffset: 1; } 14%, 100% { stroke-dashoffset: 0; } }
@keyframes scn-check-2 { 0%, 18% { stroke-dashoffset: 1; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes scn-check-3 { 0%, 30% { stroke-dashoffset: 1; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes scn-check-4 { 0%, 42% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
.scn-bar { transform-origin: left center; animation: scn-bar var(--duration-scene-check) var(--ease-standard) infinite both; }
@keyframes scn-bar { 0%, 52% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
.scn-badge { transform-origin: center; animation: scn-badge var(--duration-scene-check) var(--ease-enter) infinite both; }
@keyframes scn-badge { 0%, 72% { transform: scale(0); opacity: 0; } 78%, 100% { transform: scale(1); opacity: 1; } }

/* ── Auth layout (proposed, SC-027): the screens before the product, at 1280 × 800 — a form from
   Components and a composition with its moving scene (tools/genSignIn.mjs) ── */
.auth { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 360px; color: var(--color-foreground); }
.auth__brand { display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-4); }
.auth__mark { width: 36px; height: 36px; color: var(--color-primary); --lg-ground: var(--color-surface); flex: none; }
.auth__head { display: flex; flex-direction: column; gap: var(--space-1-5); }
.auth__title { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.auth__lead { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 21px; }
.auth__row { display: flex; justify-content: flex-end; margin-top: calc(var(--space-2) * -1); }
.auth__row a, .auth__foot a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.auth__submit { width: 100%; justify-content: center; height: 40px; }
.auth__foot { margin: 0; color: var(--color-caption); font-size: 12px; line-height: 18px; text-align: center; }
.auth__chip { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.auth__chip .icon { --icon-size: 24; }

.auth-screen { position: relative; width: 1280px; height: 800px; overflow: hidden; background: var(--color-surface); }
.auth-screen--split { display: grid; grid-template-columns: 1fr 1fr; }
.auth-screen__form { display: flex; align-items: center; justify-content: center; padding: var(--space-12); }
.auth-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); margin: var(--space-4); padding: var(--space-12) var(--space-10); border-radius: var(--radius-panel); overflow: hidden; }
.auth-panel--soft { background: var(--color-primary-soft); color: var(--color-foreground); }
.auth-panel__words { display: flex; flex-direction: column; gap: var(--space-3); max-width: 440px; }
.auth-panel__title { margin: 0; font-size: 34px; line-height: 42px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.auth-panel__text { margin: 0; font-size: 15px; line-height: 23px; color: var(--color-muted); }
.auth-panel__art { width: 100%; height: auto; }
.auth-panel__art--center { flex: 1; min-height: 0; }
/* The reading panel: dark in both themes (the Logo page's fixed dark ground), the pictures' tokens turned to it */
.auth-panel--inverted {
  background: var(--lg-dark-ground);
  border: 1px solid color-mix(in srgb, var(--lg-dark-text) 14%, var(--lg-dark-ground));
  color: var(--lg-dark-text);
  --ill-line: var(--lg-dark-text);
  --ill-fill: var(--lg-dark-ground);
  --ill-soft: color-mix(in srgb, var(--lg-dark-text) 10%, var(--lg-dark-ground));
  --ill-faint: color-mix(in srgb, var(--lg-dark-text) 45%, var(--lg-dark-ground));
  --ill-accent-soft: color-mix(in srgb, var(--ill-accent) 30%, var(--lg-dark-ground));
}
.auth-panel--inverted .auth-panel__text { color: color-mix(in srgb, var(--lg-dark-text) 70%, transparent); }
.auth-screen--world { display: grid; place-items: center; }
.auth-screen__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-card { position: relative; display: flex; justify-content: center; width: 440px; padding: var(--space-10) var(--space-10) var(--space-8); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.auth-screen--band { display: flex; flex-direction: column; }
.auth-band { display: grid; place-items: center; height: 300px; flex: none; background: var(--color-page); border-bottom: 1px solid var(--color-default); }
.auth-band__art { width: 620px; height: auto; }
.auth-screen__form--narrow { flex: 1; align-items: flex-start; padding-top: var(--space-10); }
.auth-screen { font-family: var(--font-sans); font-size: 13px; line-height: 19px; letter-spacing: var(--tracking-text); }
.auth-band { background: var(--color-primary-soft); }
/* The chain card floating over the journey */
.auth-float { align-self: center; display: flex; flex-direction: column; gap: var(--space-2); width: 400px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-overlay); animation: scn-float var(--duration-drift) var(--ease-standard) infinite both; }
.auth-float__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.auth-float__title { font-weight: 600; font-size: 14px; }
.auth-float__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-default); }
.auth-float__who { display: flex; flex-direction: column; }
.auth-float__who span { color: var(--color-caption); font-size: 12px; line-height: 17px; }
.auth-float__dot { width: 10px; height: 10px; border-radius: var(--radius-full); }
.auth-float__dot--mine { background: var(--color-category-mine); }
.auth-float__dot--carrier { background: var(--color-category-carrier); }
.auth-float__dot--refiner { background: var(--color-category-refiner); }
@keyframes scn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── App layout: the shells (tools/genAppLayout.mjs) at 1280 × 800 — the Figma's sidebar, a rail with a
   context panel, top navigation — around the page; the presenter's control in place of a user ── */
.app { display: flex; width: 1280px; height: 800px; overflow: hidden; background: var(--color-page); color: var(--color-foreground); font-family: var(--font-sans); font-size: 13px; line-height: 19px; letter-spacing: var(--tracking-text); }
.app-brand { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
.app-brand__mark { width: 32px; height: 32px; flex: none; color: var(--color-primary); --lg-ground: var(--color-page); }
.app-synthetic .icon { --icon-size: 12; }
.app-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-top { display: flex; align-items: center; gap: var(--space-4); height: 64px; flex: none; padding: 0 var(--space-4) 0 var(--space-2); }
.app-top .app-presenter { width: auto; margin-left: auto; padding: var(--space-1) var(--space-2); }
.app-crumbs { display: flex; align-items: center; gap: var(--space-1-5); color: var(--color-caption); white-space: nowrap; }
.app-crumbs span:last-child { color: var(--color-foreground); font-weight: 500; }
.app-panel { flex: 1; min-height: 0; margin: 0 var(--space-3) var(--space-3) 0; border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.app-panel--flush { margin-left: 0; }
.app-panel--wide { margin: 0 var(--space-4) var(--space-4); }

/* The Figma's sidebar */
.app-side { display: flex; flex-direction: column; gap: var(--space-4); width: 248px; flex: none; padding: var(--space-4) var(--space-3); }
.app-side__top { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-1); }
.app-fold { display: grid; place-items: center; color: var(--color-caption); }
.app-party { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.app-party__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-party__who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-party__who span { color: var(--color-caption); font-size: 12px; line-height: 17px; }
.app-menu { display: flex; flex-direction: column; gap: var(--space-0-5); }
.app-menu__item { display: flex; align-items: center; gap: var(--space-2-5); height: var(--size-menu-item); padding: 0 var(--space-2-5); border-radius: var(--radius-control); color: var(--color-muted); font-weight: 500; text-decoration: none; }
.app-menu__item:hover, .app-menu__item.is-hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.app-menu__item.is-current { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-card); }
.app-side__foot { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }
.app-walk { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.app-walk__head { display: flex; flex-direction: column; }
.app-walk__art { width: 100%; height: auto; aspect-ratio: 9 / 2; }
.app--figma.is-folded .app-side { width: 72px; align-items: center; }
.app--figma.is-folded .app-side__top { flex-direction: column; gap: var(--space-3); }
.app--figma.is-folded .app-party { padding: var(--space-1-5); }
.app--figma.is-folded .app-menu__item { justify-content: center; width: 40px; padding: 0; }

/* The rail and its context panel */
.app-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 68px; flex: none; padding: var(--space-4) 0; }
.app-rail__menu { display: flex; flex-direction: column; gap: var(--space-1); }
.app-rail__item { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); color: var(--color-muted); text-decoration: none; }
.app-rail__item:hover, .app-rail__item.is-hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.app-rail__item.is-current { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.app-states--rail .app-rail__item { width: auto; grid-auto-flow: column; gap: var(--space-2); padding: 0 var(--space-3); }
.app-rail__foot { margin-top: auto; }
.app-ctx { display: flex; flex-direction: column; gap: var(--space-3); width: 232px; flex: none; margin: var(--space-3) var(--space-3) var(--space-3) 0; padding: var(--space-4) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface); }
.app-ctx__head { display: flex; flex-direction: column; padding: 0 var(--space-1); }
.app-ctx__list { display: flex; flex-direction: column; gap: var(--space-0-5); }
.app-ctx__item { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2); border-radius: var(--radius-control); color: var(--color-foreground); text-decoration: none; }
.app-ctx__item.is-current { background: var(--color-surface-muted); }
.app-ctx__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-ctx__who span { color: var(--color-caption); font-size: 12px; line-height: 17px; }
.app-ctx__note { margin: 0; padding: 0 var(--space-1); }
.app-ctx__foot { margin-top: auto; }
.app-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.app-dot--success { background: var(--color-success); }
.app--rail .app-top { padding-left: 0; }

/* Top navigation */
.app--topnav { flex-direction: column; }
.app-nav { display: flex; align-items: center; gap: var(--space-8); height: 64px; flex: none; padding: 0 var(--space-6); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.app-tabs { display: flex; align-self: stretch; gap: var(--space-1); }
.app-tabs__item { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 2px solid transparent; color: var(--color-muted); font-weight: 500; text-decoration: none; }
.app-tabs__item:hover, .app-tabs__item.is-hover { color: var(--color-foreground); }
.app-tabs__item.is-current { border-bottom-color: var(--color-primary); color: var(--color-foreground); }
.app-states--tabs .app-tabs__item { height: 40px; }
.app-nav .app-synthetic { margin-left: auto; }
.app-bar { flex: none; padding: var(--space-3) var(--space-4); }

/* The page inside: head, chain, roll-up, drawer */
.app-page { display: flex; height: 100%; }
.app-page__main { display: flex; flex: 1; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-6); overflow: hidden; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.app-head__text { display: flex; flex-direction: column; gap: var(--space-1); }
.app-head__text h1 { margin: 0; }
.app-head__sub { margin: 0; color: var(--color-caption); }
.app-chain .chain__step { padding: var(--space-3); gap: var(--space-2); }
.app-chain .chain__step.is-open { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.app-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.app-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.app-table tr.is-selected td { background: var(--color-primary-soft); }
.app-who { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.app-drawer { display: flex; flex-direction: column; gap: var(--space-3); width: 320px; flex: none; padding: var(--space-5); border-left: 1px solid var(--color-default); overflow: hidden; }
.app-drawer__head { display: flex; align-items: center; gap: var(--space-2); }
.app-drawer__close { margin-left: auto; color: var(--color-caption); display: grid; }
.app-drawer__title { margin: 0; }
.app-drawer__tabs { align-self: flex-start; }
.app-field { display: flex; flex-direction: column; gap: var(--space-0-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-default); }
.app-field__label { color: var(--color-caption); font-size: 12px; line-height: 17px; }
.app-field__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.app-drawer__note { display: flex; align-items: center; gap: var(--space-2); margin: auto 0 0; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); font-size: 12px; line-height: 17px; }
/* The rail's header band: the journey under the page title */
.app-band { display: flex; flex-direction: column; gap: var(--space-2); margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; padding: var(--space-6) var(--space-6) 0; background: var(--color-primary-soft); border-bottom: 1px solid var(--color-default); }
.app-band__art { display: block; order: 2; width: 72%; height: auto; aspect-ratio: 9 / 2; margin-left: auto; }
/* The supplier's request */
.app-page--single .app-page__main { max-width: 760px; }
.app-asks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.app-asks li { display: flex; align-items: center; gap: var(--space-2); }
.app-asks .icon { color: var(--color-success); }

/* ── Not found page (proposed, SC-030; tools/genNotFound.mjs): its own full screen outside the shell,
   at 1280 × 800 — the mark, a picture with the 404 in it, the sentence and the way back ── */
.nf-screen { position: relative; display: flex; flex-direction: column; width: 1280px; height: 800px; overflow: hidden; padding: var(--space-8) var(--space-10); background: var(--color-page); color: var(--color-foreground); font-family: var(--font-sans); font-size: 13px; line-height: 19px; letter-spacing: var(--tracking-text); }
.nf-brand { display: flex; align-items: center; gap: var(--space-2-5); }
.nf-brand__mark { width: 32px; height: 32px; color: var(--color-primary); --lg-ground: var(--color-page); }
.nf-body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); text-align: center; }
.nf-art { width: 600px; height: auto; margin-bottom: var(--space-4); }
.nf-digit { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
.nf-title { margin: 0; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.nf-text { max-width: 440px; margin: 0; color: var(--color-muted); font-size: 15px; line-height: 23px; }
.nf-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
/* Its moving details, on the Scenes' terms: slow loops ending on the complete picture */
.nf-pulse, .nf-rock, .nf-reveal { transform-box: fill-box; animation-fill-mode: both; animation-iteration-count: infinite; }
.nf-pulse { transform-origin: center; animation: nf-pulse var(--duration-puff) var(--ease-standard) infinite both; }
@keyframes nf-pulse { 0% { transform: scale(1); opacity: 0; } 20% { opacity: 1; } 80% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
.nf-rock { transform-origin: center bottom; animation: nf-rock var(--duration-sway) var(--ease-standard) infinite both; }
@keyframes nf-rock { 0%, 100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-4px) rotate(-0.6deg); } 60% { transform: translateX(3px) rotate(0.4deg); } }
.nf-reveal { animation: nf-reveal var(--duration-scene-check) linear infinite both; }
@keyframes nf-reveal { 0%, 27% { opacity: 0; } 58%, 100% { opacity: 1; } }

/* ── Key screens: supplier — the stepper, the label's list, the two columns, the quiet outcome state (tools/parts/screens/supplier.mjs) ── */
.ks-main { gap: var(--space-4); }
/* The stepper across the top, the Figma's four bars: a bar and a label each; done and current take the brand bar, an error the danger one */
.ks-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ks-steps__item { display: flex; align-items: center; gap: var(--space-1-5); padding-top: var(--space-2); border-top: 3px solid var(--color-default); color: var(--color-caption); font-weight: 500; }
.ks-steps__item.is-done { border-top-color: var(--color-primary); color: var(--color-foreground); }
.ks-steps__item.is-done .icon { color: var(--color-success-text); }
.ks-steps__item.is-current { border-top-color: var(--color-primary); color: var(--color-foreground); font-weight: 600; }
.ks-steps__item.is-error { border-top-color: var(--color-danger); color: var(--color-danger-text); font-weight: 600; }
/* The request: what the label asks beside the response */
.ks-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ks-ask__group { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ks-ask__fields { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ks-ask__field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1-5) 0; border-top: 1px solid var(--color-default); }
.ks-ask__text { display: flex; flex-direction: column; min-width: 0; }
.ks-ask__title { display: flex; align-items: center; gap: var(--space-2); }
.ks-ask__questions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1-5) var(--space-4); margin: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-default); list-style: none; }
.ks-ask__questions li { display: flex; align-items: baseline; gap: var(--space-2); }
.ks-ask__questions .mono { flex: none; width: var(--space-3); }
.ks-pick .choice-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
/* Nothing addressed yet: the empty state fills the page */
.ks-empty { flex: 1; justify-content: center; }
/* The response: the dashed file card, the request line, the quiet state of the outcome panel */
.ks-file { border-style: dashed; background: var(--color-surface-muted); }
.ks-term { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: 11px; line-height: 15px; color: var(--color-caption); white-space: nowrap; }
.ks-part__name .ks-term { display: flex; }
.ks-term__name { color: var(--color-foreground); font-style: italic; }
.ks-term__kind { padding: 0 var(--space-1); border-radius: var(--radius-full); border: 1px solid var(--color-default); }
.ks-term__kind--own { border-color: var(--color-info-border); color: var(--color-info-text); }
.ks-arrives { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5) var(--space-2-5); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
.ks-arrives > .icon { flex: none; color: var(--color-caption); }
.ks-arrives__what { display: flex; align-items: center; gap: var(--space-2); }
.ks-arrives > .t-caption { flex: 1 1 16rem; min-width: 0; }
.ks-asked { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-panel); }
.ks-asked .icon { flex: none; color: var(--color-caption); }
.ks-asked .t-caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-mark--danger { color: var(--color-danger-text); }
.ks-quiet { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.ks-quiet > .icon { flex: none; margin-top: var(--space-0-5); color: var(--color-caption); }
.ks-quiet__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ks-side .outcome__head { flex-wrap: wrap; row-gap: var(--space-1); }
.ks-side .outcome__time { white-space: nowrap; }
.ks-side .outcome__note { margin: 0; }

/* ── Key screens: review and queries — the Review drawer grown from the Chain view's drawer; the query page with its answers, citations and export (tools/parts/screens/review.mjs) ── */
/* Review: the Chain view behind a wider drawer, so its strip is tight */
.ks-review .app-page__main { padding: var(--space-5); gap: var(--space-4); }
.ks-chain .chain__step { padding: var(--space-3) var(--space-2-5); }
.ks-chain .chain__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ks-chain .chain__error { padding: var(--space-2); }
.ks-chain .chain__link { margin: 0 calc(var(--space-1) * -1); }
.ks-roll .table th, .ks-roll .table td { padding-inline: var(--space-2); }
.ks-roll .table th:first-child, .ks-roll .table td:first-child { padding-left: var(--space-3); }
.ks-roll .table th:last-child, .ks-roll .table td:last-child { padding-right: var(--space-3); }
.ks-roll .table td .mono, .ks-roll .table td .special { white-space: nowrap; }
.ks-drawer { width: 440px; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.ks-drawer__ctx { margin: calc(var(--space-1) * -1) 0 0; }
.ks-drawer__names { margin: 0; }
/* The trail of the response: requested, submitted, interpreted with its time (D-036), the review waiting */
.ks-trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.ks-trail__step { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.ks-trail__mark { display: flex; align-items: center; height: 16px; color: var(--color-success-text); }
.ks-trail__step:not(:last-child) .ks-trail__mark::after { content: ''; flex: 1; height: 1px; margin: 0 var(--space-1-5); background: var(--color-emphasis); }
.ks-trail__ring { box-sizing: border-box; width: 12px; height: 12px; margin: 0 2px; border: 1.5px dashed var(--color-subtle); border-radius: var(--radius-full); }
.ks-trail__what { font-weight: 500; }
.ks-trail__step:not(.is-done) .ks-trail__what { color: var(--color-muted); }
.ks-trail__when { min-height: 17px; }
/* The labelled values: one row per field, the flag beside each emission figure */
.ks-vals { display: flex; flex-direction: column; margin: 0; }
.ks-val { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1-5) 0; border-bottom: 1px solid var(--color-default); }
.ks-val__label { color: var(--color-caption); font-size: 12px; line-height: 19px; }
.ks-val__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-0-5) var(--space-2); min-width: 0; margin: 0; }
.ks-val--block { display: flex; flex-direction: column; gap: var(--space-1-5); border-bottom: 0; }
.ks-val--block .ks-val__value { display: block; }
.ks-val.is-error { margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); border-radius: var(--radius-sm); background: var(--color-danger-soft); border-bottom-color: transparent; }
.ks-vals--readonly .ks-val:not(.is-error) .ks-val__value { color: var(--color-muted); }
.ks-parts { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.ks-part { display: grid; grid-template-columns: minmax(0, 1fr) 92px 84px; align-items: center; gap: var(--space-2); }
.ks-part__name { color: var(--color-muted); }
.ks-part__num { font-variant-numeric: tabular-nums; font-weight: 500; }
/* The decision at the drawer's foot: the note, the two actions */
.ks-decide { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-default); }
.ks-decide__actions { display: flex; gap: var(--space-2); }
.ks-note { height: auto; align-items: stretch; padding-block: var(--space-2); }
.ks-note .field__input { height: auto; resize: none; line-height: 19px; }
/* Queries and export: the box, the examples and the answers beside the export */
.ks-queries .app-page__main { gap: var(--space-3-5); padding-block: var(--space-5); }
.ks-q__cols { display: grid; grid-template-columns: minmax(0, 1fr) 264px; align-items: start; gap: var(--space-6); min-height: 0; }
.ks-q__main { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; }
.ks-examples { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ks-examples__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-1-5); }
.ks-example { height: 24px; padding: 0 var(--space-2-5); font: inherit; font-size: 12px; color: var(--color-foreground); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.ks-example:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ks-answers { display: flex; flex-direction: column; gap: var(--space-2-5); }
.ks-answers .answer__row { grid-template-columns: 148px 84px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1-5) 0; }
.ks-answers .answer__body { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
.ks-answers .answer__head { padding: var(--space-2-5) var(--space-4); }
.ks-answers .cite { text-decoration: none; }
.ks-nodata { align-items: flex-start; }
.ks-nodata p { margin: 0; color: var(--color-muted); }
.ks-qempty { padding: var(--space-8) var(--space-6); }
.ks-qempty h3 { margin: 0; }
.ks-export .choice { padding: var(--space-2-5) var(--space-3); }
.ks-export .choice-group { gap: var(--space-2); }

/* ── Key screens: customer — Setup, Label and request, Chain view (tools/parts/screens/customer.mjs). The
   screens are built from Components and App layout; these are the few pieces they add: the page's rhythm,
   a summary card's rows, the label's two tables, the generating state (D-032). ── */
.ks-c-page .app-page__main { gap: var(--space-4); }
.ks-c-head-actions { display: flex; align-items: center; gap: var(--space-3); }
.ks-c-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ks-c-fine { margin: 0; }
.ks-c-fine .mono { word-break: break-all; }

/* Setup: the form beside the summary card (the Figma's create-request) */
.ks-c-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.ks-c-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.ks-c-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.ks-c-title .icon { color: var(--color-primary); }
.ks-c-holds { gap: var(--space-2-5); }
.ks-c-kv { display: flex; flex-direction: column; }
.ks-c-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1-5) 0; }
.ks-c-kv__label { flex: none; color: var(--color-caption); }
.ks-c-kv__value { min-width: 0; text-align: right; }
.ks-c-parties { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; padding: var(--space-2-5) var(--space-3); list-style: none; border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.ks-c-parties li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ks-c-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); font-size: 12px; line-height: 17px; }
.ks-c-note .icon { flex: none; margin-top: var(--space-0-5); }

/* Setup, generating: the form takes no input, the card shows where the result will appear */
.ks-c-locked .field__control { background: var(--color-surface-muted); cursor: not-allowed; }
.ks-c-locked .field__input { color: var(--color-muted); cursor: not-allowed; }
.ks-c-gen { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); text-align: center; }
.ks-c-gen__text { color: var(--color-muted); font-size: 12px; line-height: 17px; }
.ks-c-skel { display: block; flex: none; width: 120px; height: 10px; border-radius: var(--radius-full); background: var(--color-default); animation: ai-pulse var(--duration-pulse) var(--ease-standard) infinite; }
.ks-c-kv--wait .ks-c-kv__row { align-items: center; padding: var(--space-2) 0; }

/* The menu while a generation runs: dimmed, nothing to open — the Setup screen is the only screen (D-032) */
.app.is-busy .app-menu { pointer-events: none; }
.app.is-busy .app-menu__item { color: var(--color-subtle); }
.app.is-busy .app-menu__item.is-current { background: var(--color-surface-muted); color: var(--color-muted); box-shadow: none; }
.app.is-busy .app-party__who strong { color: var(--color-muted); }

/* Label and request: the fields and the questions as two tables, what each supplier receives below */
.ks-c-industries { width: 100%; }
.ks-c-profile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
.ks-c-profile__what { display: flex; flex-direction: column; gap: var(--space-0-5); }
.ks-c-profile__places { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.ks-c-profile__places > li { display: flex; align-items: center; gap: var(--space-1-5); }
.ks-c-profile__who { display: flex; flex-direction: column; line-height: 1.2; }
.ks-c-profile__arrow { color: var(--color-caption); }
.ks-c-tables { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }
.ks-c-tables--def { grid-template-columns: 3fr 2fr; }
.ks-c-def__table td, .ks-c-def__table th { padding-top: var(--space-1-5); padding-bottom: var(--space-1-5); }
.ks-c-label .table td { padding-top: var(--space-1-5); padding-bottom: var(--space-1-5); }
.ks-c-no-col { width: 40px; }
.ks-c-no { font-family: var(--font-mono); font-size: 11px; color: var(--color-caption); }
.ks-c-label__name { display: block; font-weight: 500; }
.ks-c-receives { gap: var(--space-2); }
.ks-c-col > .ks-c-receives { flex: 1; }
.ks-c-kv--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
.ks-c-kv--grid .ks-c-kv__row, .ks-c-kv--lines .ks-c-kv__row + .ks-c-kv__row { border-top: 1px solid var(--color-default); }
.ks-c-act { text-align: right; }

/* Chain view: the roll-up under the strip, its rule in one line */
.ks-c-roll { display: flex; flex-direction: column; gap: var(--space-2); }
.ks-c-chain .rollup { gap: var(--space-2); }
.ks-c-chain .rollup .table tbody td, .ks-c-chain .rollup .table tbody th { padding-top: var(--space-1-5); padding-bottom: var(--space-1-5); }
.ks-c-chain .rollup__rule { flex-direction: row; align-items: baseline; gap: var(--space-3); padding: var(--space-2-5) var(--space-4); }
.ks-c-chain .rollup__rule-title { flex: none; }

/* ── Flows: sign-in — the error line of an Auth field: the icon and its words side by side (tools/genFlowSignIn.mjs) ── */
.auth .field.is-error .field__error { display: flex; align-items: center; gap: var(--space-1); }

/* ── Flows: review and queries — the confirmation in place on the dimmed panel, the decision line in the drawer, the locked examples (tools/genFlowReview.mjs, genFlowQueriesExport.mjs) ── */
.fl-rev-stage { position: relative; height: 100%; }
.fl-rev-scrim { position: absolute; inset: 0; border-radius: 0; }
.fl-rev-decided { display: flex; align-items: center; gap: var(--space-2); }
.fl-rev-locked .ks-example { color: var(--color-subtle); border-color: var(--color-default); background: var(--color-surface-muted); cursor: not-allowed; }

/* ── Flows: clarification and own document — the previous note in the drawer, the picker in the replacement's confirmation, the supplier's own statement in its viewer (tools/genFlowClarification.mjs, genFlowOwnDocument.mjs) ── */
.fl-new-wrap { height: auto; min-height: 22px; padding-block: var(--space-0-5); border-radius: var(--radius-control); white-space: normal; text-align: left; }
.ks-roll .fl-new-wrap { max-width: 88px; gap: var(--space-1); padding-inline: var(--space-1-5); }
.fl-new-prev { display: flex; flex-direction: column; gap: var(--space-1); }
.fl-new-prev .outcome__note { padding-block: var(--space-1-5); }
.fl-new-prev__head { display: flex; align-items: center; gap: var(--space-2); }
.fl-new-prev__head .mono { margin-left: auto; }
.fl-new-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.fl-new-pick .choice-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.fl-new-pick .choice { padding: var(--space-2-5) var(--space-3); }
.fl-new-viewer { max-width: 720px; gap: var(--space-3); padding: var(--space-4); }
.fl-new-viewer__bar { display: flex; align-items: center; gap: var(--space-3); }
.fl-new-viewer__name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* The statement as the refinery wrote it: a letterhead, numbered sections, a table of sources; its layout, not the label's */
.fl-new-paper { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-raised); color: var(--color-foreground); font-size: 12px; line-height: 17px; }
.fl-new-paper__letterhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2-5); border-bottom: 2px solid var(--color-foreground); }
.fl-new-paper__org { display: flex; flex-direction: column; }
.fl-new-paper__kicker { color: var(--color-muted); text-transform: uppercase; }
.fl-new-paper__title { font-size: 18px; line-height: 24px; font-weight: 600; }
.fl-new-paper__ref { display: flex; flex-direction: column; align-items: flex-end; color: var(--color-muted); }
.fl-new-paper__h { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: 13px; line-height: 19px; font-weight: 600; }
.fl-new-paper__h span { color: var(--color-caption); }
.fl-new-paper__p { margin: 0; color: var(--color-muted); }
.fl-new-paper__table { width: 100%; border-collapse: collapse; }
.fl-new-paper__table th, .fl-new-paper__table td { padding: var(--space-1) var(--space-2) var(--space-1) 0; border-bottom: 1px solid var(--color-default); text-align: left; vertical-align: top; }
.fl-new-paper__table th { color: var(--color-caption); font-weight: 500; }
.fl-new-paper__table tfoot td { border-bottom: 0; border-top: 1px solid var(--color-emphasis); font-weight: 600; }
.fl-new-paper__table .fl-new-paper__num { text-align: right; font-variant-numeric: tabular-nums; padding-right: var(--space-4); }
.fl-new-paper__foot { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px dashed var(--color-emphasis); color: var(--color-muted); }

/* ── Flows: failed response, start over, audit trail — the audit trail's table, its links and its roll-up rule (tools/genFlowAuditTrail.mjs) ── */
.fl-new2-tbl { table-layout: fixed; font-size: 12px; line-height: 17px; }
.fl-new2-c1 { width: 152px; } .fl-new2-c2 { width: 88px; } .fl-new2-c3 { width: 96px; } .fl-new2-c4 { width: 106px; } .fl-new2-c5 { width: 86px; } .fl-new2-c6 { width: auto; }
.fl-new2-tbl th, .fl-new2-tbl td { padding: var(--space-1); }
.fl-new2-tbl th:first-child, .fl-new2-tbl td:first-child { padding-left: var(--space-3); }
.fl-new2-tbl th:last-child, .fl-new2-tbl td:last-child { padding-right: var(--space-3); }
.fl-new2-tbl th.num, .fl-new2-tbl td.num { padding-right: var(--space-3); }
.fl-new2-tbl td .mono, .fl-new2-tbl .badge, .fl-new2-tbl .num, .fl-new2-tbl .table__sub { white-space: nowrap; }
.fl-new2-tbl td:first-child .table__sub { font-size: 11px; }
.fl-new2-tbl .special { display: inline-block; white-space: normal; }
.fl-new2-time { display: flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.fl-new2-link { color: var(--color-primary-strong); text-decoration: none; }
.fl-new2-link:hover { text-decoration: underline; }
.fl-new2-rule { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.fl-new2-rule .icon { flex: none; margin-top: var(--space-0-5); color: var(--color-info-text); }

/* ── Email templates — the template every letter is drawn in: header, picture, heading, message, detail, action, footer; the Template block's numbers (plans/emails.md, tools/parts/emails/letters.mjs) ── */
.em { background: var(--color-surface); color: var(--color-foreground); }
.em-part { position: relative; }
.em-head { display: flex; align-items: center; height: 56px; padding: 0 var(--space-8); border-bottom: 1px solid var(--color-default); }
.em-brand { display: inline-flex; align-items: center; gap: var(--space-2-5); }
.em-pic { display: flex; justify-content: center; padding: var(--space-6) var(--space-8); background: var(--color-primary-soft); }
.em-ill { width: 160px; height: 120px; }
.em-ill--chain { width: 480px; max-width: 100%; height: auto; aspect-ratio: 9 / 2; }
.em-ill--wide { width: 240px; height: 150px; }
.em-ill--reading { width: 180px; height: 120px; }
.em-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.em-title { margin: 0; }
.em-text { display: flex; flex-direction: column; gap: var(--space-2); }
.em-text p { margin: 0; }
.em-detail { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
.em-detail p, .em-detail dl, .em-detail dd, .em-detail blockquote { margin: 0; }
.em-rows { display: grid; gap: var(--space-2); }
.em-rows__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.em-code { font-family: var(--font-mono); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: 0.2em; text-align: center; }
.em-quote { display: grid; gap: var(--space-1); padding-left: var(--space-3); border-left: 3px solid var(--color-primary); }
.em-lines { display: flex; flex-direction: column; gap: var(--space-2); }
.em-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.em-line + .em-line { padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.em-line__who { display: flex; flex-direction: column; }
.em-figure { display: flex; align-items: baseline; gap: var(--space-1-5); }
.em-act { margin: 0; }
.em-btn { cursor: default; }
.em-foot { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-8); border-top: 1px solid var(--color-default); background: var(--color-surface-muted); }
.em-foot p { margin: 0; }
.em-foot .em-foot__mark { margin-top: var(--space-2); }
/* The Template block: the parts numbered on the drawn letter */
.em-no { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-foreground); font-size: 11px; line-height: 20px; font-weight: 600; text-align: center; }
.em--anatomy .em-body > .em-part > .em-no { top: 0; left: calc(-1 * var(--space-6)); }
.em-stage { padding: var(--space-6); }
.em-cap { margin-top: var(--space-3); }
.em-sub { margin: var(--space-8) 0 var(--space-3); }
.em-when { max-width: 880px; margin: 0 0 var(--space-4); }
.em-meta { margin-top: var(--space-5); }
.em-group { margin-top: var(--space-10); }
@media (max-width: 720px) {
  .em-head, .em-body, .em-foot { padding-left: var(--space-5); padding-right: var(--space-5); }
  .em-rows__row { grid-template-columns: 1fr; gap: var(--space-0-5); }
  .em-stage { padding: var(--space-3); }
}

/* ── Charts (SC-008; tools/genCharts.mjs, plans/charts.md): each use of a chart in its card, at its real size, on the product's page ground. The SVG's geometry is computed by the generator; its colors, its rounded data-end and the tooltip's fade come from here. ── */
.cx-stage { display: flex; flex-direction: column; gap: var(--space-5); max-width: 100%; overflow-x: auto; padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); color: var(--color-foreground); font-family: var(--font-sans); letter-spacing: var(--tracking-text); }
.cx-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); }
.cx-fig { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.cx-fig > figcaption { max-width: 720px; }
.cx-card { flex: none; width: 736px; }
.cx-card--sm { width: auto; max-width: 736px; }
.cx-card .card__body.cx-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
.cx-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cx-card__note { margin: 0; }
.cx-drawer { width: 408px; }
.cx-drawer.cx-card--sm { width: 408px; }
.cx-drawer .ks-parts { margin: 0; }
.cx-drawer .ks-part > .special { grid-column: 2 / -1; justify-self: start; }
.cx-drawer__error { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger-border); border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 12px; line-height: 17px; }
.cx-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.cx-hero__unit { color: var(--color-muted); }
.cx-hero__what { display: flex; flex-direction: column; gap: var(--space-0-5); }

.cx-svg { display: block; max-width: none; overflow: visible; }
.cx-svg text { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-text); fill: var(--color-foreground); font-variant-numeric: tabular-nums; }
.cx-svg .cx-muted { fill: var(--color-muted); }
.cx-svg .cx-mono { font-family: var(--font-mono); letter-spacing: 0; }
.cx-svg .cx-strong { font-weight: 600; }
.cx-svg .cx-italic { font-style: italic; }
.cx-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.cx-axis { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.cx-leader { stroke: var(--chart-axis); stroke-width: 1; }
.cx-marker { stroke: var(--color-foreground); stroke-width: 2; }
.cx-seg--mine { fill: var(--chart-mine); }
.cx-seg--carrier { fill: var(--chart-carrier); }
.cx-seg--refiner { fill: var(--chart-refiner); }
.cx-seg--received { fill: var(--chart-received); }
.cx-seg--total { fill: var(--chart-total); }
.cx-end { rx: var(--chart-end); ry: var(--chart-end); }
.cx-missing { stroke: var(--chart-missing); stroke-width: 1; stroke-dasharray: 3 2; }
.cx-nodata { fill: none; stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 3 2; rx: var(--radius-control); }
.cx-pat-missing__bg { fill: var(--color-surface); }
.cx-pat-missing__line { stroke: var(--chart-missing); stroke-width: 1.5; }
.cx-pat-mine__bg { fill: var(--color-category-mine-soft); }
.cx-pat-mine__line { stroke: var(--chart-mine); stroke-width: 2.5; }
.cx-pat-carrier__bg { fill: var(--color-category-carrier-soft); }
.cx-pat-carrier__line { stroke: var(--chart-carrier); stroke-width: 2.5; }
.cx-pat-refiner__bg { fill: var(--color-category-refiner-soft); }
.cx-pat-refiner__line { stroke: var(--chart-refiner); stroke-width: 2.5; }

/* A mark: a hit area larger than the shapes; hover or keyboard focus shows its tooltip */
.cx-mark { outline: none; }
.cx-hit { fill: transparent; }
.cx-mark:focus-visible .cx-hit { stroke: var(--color-ring); stroke-width: 2; rx: var(--radius-xs); }
.cx-tip { opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-enter); }
.cx-mark:is(:hover, :focus-visible) .cx-tip { opacity: 1; }
.cx-tip__box { fill: var(--color-surface); stroke: var(--color-default); rx: var(--radius-sm); filter: drop-shadow(var(--shadow-raised)); }
@media (prefers-reduced-motion: reduce) { .cx-tip { transition: none; } }

.cx-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 17px; color: var(--color-muted); }
.cx-legend__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.cx-swatch { flex: none; width: 10px; height: 10px; border-radius: var(--radius-xs); }
.cx-swatch--mine { background: var(--chart-mine); }
.cx-swatch--carrier { background: var(--chart-carrier); }
.cx-swatch--refiner { background: var(--chart-refiner); }
.cx-swatch--received { background: var(--chart-received); }
.cx-swatch--total { background: var(--chart-total); }
.cx-swatch--missing { border: 1px dashed var(--chart-missing); background: repeating-linear-gradient(45deg, var(--chart-missing) 0 1px, transparent 1px 4px); }

.cx-steps { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 17px; color: var(--color-muted); }
.cx-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cx-empty { padding: var(--space-4) 0; }

/* The answer's bars: name, bar, figure, citation on one row; the scale under them */
.cx-ans { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cx-ans__row { display: grid; grid-template-columns: 120px 180px 76px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.cx-ans--sm .cx-ans__row { grid-template-columns: 80px 180px 40px; }
.cx-ans .cite { flex-wrap: nowrap; white-space: nowrap; }
.cx-ans__axis { padding-top: 0; }
.cx-ans__axis .cx-svg { grid-column: 2; }
.cx-ans .answer__row--total { border-top: 1px solid var(--color-default); }

/* The page around the stage: the rules of the intro, the table view, where it appears */
.cx-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); max-width: 1040px; margin: 0; }
.cx-rules__row { display: flex; flex-direction: column; gap: var(--space-1); }
.cx-rules dd { margin: 0; }
.cx-table { margin-top: var(--space-4); max-width: 736px; }
.cx-table summary { cursor: pointer; color: var(--frame-link); font-size: 14px; }
.cx-table .table-wrap { margin-top: var(--space-2); }
.cx-appears { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin: var(--space-4) 0 0; }
@media (max-width: 860px) { .cx-rules { grid-template-columns: 1fr; } .cx-stage { padding: var(--space-4); } }

/* Architecture */
/* ── Architecture (tools/genArchitecture.mjs, plans/architecture.md): six diagrams drawn for the customer, each an inline SVG on the product's ground with its sentences and legend beside it. The geometry is the generator's; every color, radius and font comes from here, so both themes read. No motion. ── */
.ax-intro { max-width: 760px; margin: 0; color: var(--color-muted); }
.ax-stage { display: flex; flex-direction: column; gap: var(--space-6); max-width: 100%; padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); color: var(--color-foreground); font-family: var(--font-sans); letter-spacing: var(--tracking-text); }
.ax-stage--beside { display: grid; grid-template-columns: minmax(0, 780px) minmax(240px, 1fr); align-items: start; }
.ax-fig { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; margin: 0; }
.ax-scroll { overflow-x: auto; }
.ax-svg { display: block; width: 100%; min-width: 640px; height: auto; overflow: visible; }
.ax-about { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); gap: var(--space-4) var(--space-8); align-items: start; }
.ax-stage--beside .ax-about { grid-template-columns: minmax(0, 1fr); }
.ax-say { max-width: 680px; margin: 0; font-size: 14px; line-height: 22px; }

/* Text: the product's sans; a title in the ink, a line under it muted; an arrow's words on a halo of the ground */
.ax-svg text { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-text); fill: var(--color-muted); }
.ax-svg .ax-h { font-size: 14px; font-weight: 600; fill: var(--color-foreground); }
.ax-svg .ax-h--sm { font-size: 13px; }
.ax-svg .ax-h--lg { font-size: 18px; }
.ax-svg .ax-h--out { fill: var(--color-muted); }
.ax-svg .ax-s { fill: var(--color-muted); }
.ax-svg .ax-strong { font-weight: 600; }
.ax-svg .ax-m { font-family: var(--font-mono); letter-spacing: 0; }
.ax-svg .ax-em { font-style: italic; }
.ax-svg .ax-a { font-weight: 500; fill: var(--color-foreground); paint-order: stroke; stroke: var(--color-page); stroke-width: 4px; stroke-linejoin: round; }
.ax-svg .ax-k { font-size: 11px; fill: var(--color-caption); }
.ax-svg .ax-err { fill: var(--color-danger-text); }
.ax-svg .ax-priv { font-weight: 600; fill: var(--color-danger-text); paint-order: stroke; stroke: var(--color-page); stroke-width: 4px; stroke-linejoin: round; }

/* Boxes: a part on the surface; the product in the brand's soft tint; a service muted; what is outside or not set, dashed; a party in its category color */
.ax-box { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1; rx: var(--radius-control); }
.ax-box--product { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1.5; }
.ax-box--service { fill: var(--color-surface-muted); stroke: var(--color-muted); }
.ax-box--out { fill: none; stroke: var(--color-subtle); stroke-dasharray: 5 4; }
.ax-box--undecided { stroke: var(--color-muted); stroke-dasharray: 5 4; }
.ax-box--switch { stroke: var(--color-muted); stroke-dasharray: 4 3; }
.ax-box--state { stroke: var(--color-foreground); stroke-width: 1.5; }
.ax-box--person { stroke: var(--color-muted); }
.ax-box--mine { fill: var(--color-category-mine-soft); stroke: var(--color-category-mine); }
.ax-box--carrier { fill: var(--color-category-carrier-soft); stroke: var(--color-category-carrier); }
.ax-box--refiner { fill: var(--color-category-refiner-soft); stroke: var(--color-category-refiner); }
.ax-box--customer { fill: var(--color-category-customer-soft); stroke: var(--color-category-customer); }
.ax-region { fill: color-mix(in srgb, var(--color-primary) 4%, transparent); stroke: var(--color-primary); stroke-width: 1; stroke-dasharray: 2 3; rx: var(--radius-card); }
.ax-lane { fill: color-mix(in srgb, var(--color-category-carrier) 7%, transparent); stroke: none; rx: var(--radius-card); }
.ax-group { fill: none; stroke: var(--color-emphasis); stroke-width: 1; rx: var(--radius-panel); }
.ax-rule { stroke: var(--color-default); stroke-width: 1; }

/* A party's tile: its letter on its color */
.ax-tile { rx: var(--radius-xs); }
.ax-tile--mine { fill: var(--color-category-mine); }
.ax-tile--carrier { fill: var(--color-category-carrier); }
.ax-tile--refiner { fill: var(--color-category-refiner); }
.ax-tile--customer { fill: var(--color-category-customer); }
.ax-svg .ax-tile__t { font-size: 11px; font-weight: 600; }
.ax-svg .ax-tile__t--mine { fill: var(--color-category-mine-foreground); }
.ax-svg .ax-tile__t--carrier { fill: var(--color-category-carrier-foreground); }
.ax-svg .ax-tile__t--refiner { fill: var(--color-category-refiner-foreground); }
.ax-svg .ax-tile__t--customer { fill: var(--color-category-customer-foreground); }

/* Small things: a module's code, the "in the demo" pill, a document, the presenter's switch, a device */
.ax-code { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1; rx: var(--radius-sm); }
.ax-svg .ax-code__t { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0; fill: var(--color-primary-strong); }
.ax-pill { fill: var(--color-success-soft); stroke: var(--color-success-border); stroke-width: 1; rx: var(--radius-panel); ry: var(--radius-panel); }
.ax-svg .ax-pill__t { font-size: 11px; font-weight: 500; fill: var(--color-success-text); }
.ax-pill--undecided { fill: var(--color-surface); stroke: var(--color-muted); stroke-dasharray: 3 3; }
.ax-doc { fill: var(--color-surface); stroke: var(--color-muted); stroke-width: 1.25; stroke-linejoin: round; }
.ax-doc--file { stroke: var(--color-emphasis); }
.ax-doc--mine { fill: var(--color-category-mine-soft); stroke: var(--color-category-mine); }
.ax-doc--carrier { fill: var(--color-category-carrier-soft); stroke: var(--color-category-carrier); }
.ax-doc--refiner { fill: var(--color-category-refiner-soft); stroke: var(--color-category-refiner); }
.ax-toggle { fill: var(--color-primary); rx: var(--radius-control); ry: var(--radius-control); }
.ax-toggle__knob { fill: var(--color-primary-foreground); }
.ax-device { fill: var(--color-surface); stroke: var(--color-foreground); stroke-width: 1.5; rx: var(--radius-panel); }
.ax-device__bar { fill: var(--color-surface-muted); rx: var(--radius-xs); }
.ax-device__dot { fill: var(--color-emphasis); }
.ax-device__base { fill: var(--color-emphasis); stroke: var(--color-muted); stroke-width: 1; stroke-linejoin: round; }
.ax-stamp { fill: var(--color-warning-soft); stroke: var(--color-warning-border); stroke-width: 1.5; stroke-dasharray: 6 3; rx: var(--radius-sm); }
.ax-svg .ax-stamp__h { font-size: 13px; font-weight: 600; fill: var(--color-warning-text); }
.ax-svg .ax-stamp__s { fill: var(--color-foreground); }

/* Lines: what moves, solid with a head; an answer or a status back, dashed; one place or another, dotted; none, crossed */
.ax-line { fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-linejoin: round; }
.ax-line--return { stroke-dasharray: 5 4; }
.ax-line--maybe { stroke: var(--color-subtle); stroke-dasharray: 2 4; stroke-linecap: round; }
.ax-line--out { stroke: var(--color-subtle); stroke-dasharray: 5 4; }
.ax-head { fill: var(--color-muted); }
.ax-life { stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 4 4; }
.ax-privacy { stroke: var(--color-danger); stroke-width: 2.5; stroke-dasharray: 8 5; }
.ax-cross circle { fill: var(--color-page); stroke: none; }
.ax-cross line { stroke: var(--color-danger); stroke-width: 2; stroke-linecap: round; }
.ax-kept { fill: var(--color-primary); }
.ax-kept--doc { fill: var(--color-category-carrier); }
.ax-num circle { fill: var(--color-primary); }
.ax-svg .ax-num__t { font-size: 12px; font-weight: 600; fill: var(--color-primary-foreground); }

/* The legend and the numbered steps beside a diagram */
.ax-legend { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 17px; color: var(--color-muted); }
.ax-legend li { display: flex; align-items: center; gap: var(--space-2-5); }
.ax-key { flex: none; width: 28px; height: 16px; overflow: visible; }
.ax-steps { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ax-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ax-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-foreground); font-size: 12px; font-weight: 600; }
.ax-steps em { font-style: italic; }
@media (max-width: 1180px) { .ax-stage--beside { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .ax-stage { padding: var(--space-4); } .ax-about { grid-template-columns: minmax(0, 1fr); } }

/* ── Next steps: the queue and the ideas (tools/genNext.mjs, plans/next.md) — a numbered list of cards, the deferred questions inside the third, and the idea cards ── */
.nx-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 880px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nx;
}
.nx-item {
  counter-increment: nx;
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
}
.nx-item::before {
  content: counter(nx);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-family: var(--font-mono);
  font-weight: 600;
}
.nx-item__body,
.nx-idea { min-width: 0; }
.nx-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.nx-item__head,
.nx-idea__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.nx-item__head { justify-content: flex-start; align-items: center; }
.nx-item__body p,
.nx-idea p { margin: 0; color: var(--color-muted); }
.nx-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
}
.nx-sub {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.nx-sub > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-default);
}
.nx-sub h4 { margin: 0; }
.nx-idea {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
.nx-idea__head h3 { margin: 0; }
.nx-idea__from { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; }

/* ── Principles: do / don't pair (tools/genPrinciples.mjs, plans/principles.md) ── */
.tag--do { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
.tag--dont { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-border); }
/* The pair is two half columns: the chain stands upright, the confirmation and the dimmed panel fill their stage */
.pr-pair .chain { flex-direction: column; }
.pr-pair .chain__link .icon { transform: rotate(90deg); }
.pr-pair .dialog-scrim { flex: 1 1 100%; }
/* An answer row in a half column: the chip goes under the figure */
.pr-pair .answer__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
.pr-pair .answer__row > :nth-child(n+3) { grid-column: 1 / -1; }

/* ── Decisions: the list of cards, a card's rows, options, mark thumbnails, layout tiles, references (tools/genDecisions.mjs) ── */
.dc-list { display: flex; flex-direction: column; gap: var(--space-4); }
.dc-card { scroll-margin-top: var(--space-12); }
.dc-body { display: flex; flex-direction: column; gap: var(--space-3-5); }
.dc-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
.dc-row > .t-label { color: var(--color-muted); }
.dc-options { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-4-5); list-style: disc; }
.dc-choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.dc-choice .tag { flex: none; }
.dc-choice + .dc-swatches { margin-top: var(--space-3); }
.dc-swatches + .t-caption { margin-top: var(--space-2); }
.dc-body code { padding: 1px var(--space-1); border-radius: var(--radius-xs); background: var(--color-surface-muted); color: var(--color-foreground); }
.dc-refs { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
a.tag.mono:hover { border-color: var(--color-primary); color: var(--color-foreground); }
.dc-note { margin-top: var(--space-3); }
.dc-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dc-thumb {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5);
  min-width: 96px; padding: var(--space-3);
  border: 1px solid var(--color-default); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-foreground);
  text-align: center; text-decoration: none;
}
.dc-thumb:hover, .dc-thumb[data-selected] { border-color: var(--color-primary); }
.dc-thumb .lg { flex: none; }
.sc-main .dc-tile[data-selected] { border-color: var(--color-primary); }
.dc-tile__head { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 900px) {
  .dc-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ── Changelog: the entries, a date beside its title and bullets (tools/genChangelog.mjs) ── */
.cl-list { display: flex; flex-direction: column; }
.cl-entry { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--frame-border); scroll-margin-top: var(--space-12); }
.cl-entry__date { color: var(--color-muted); }
.cl-items { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-4-5); list-style: disc; max-width: 880px; }
.cl-items code { padding: 1px var(--space-1); border-radius: var(--radius-xs); background: var(--color-surface-muted); color: var(--color-foreground); }
@media (max-width: 900px) {
  .cl-entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ── Architecture: initials tiles for a technology with no mark (tools/genArchitecture.mjs) — a small radius, so a 14–18 px tile does not come out round ── */
.ax-initials { rx: var(--radius-sm); }

/* ── Questions (tools/genQuestions.mjs, SC-052): one card per question to confirm with AKFI ── */
.qs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.qs-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.qs-card__head { display: flex; align-items: baseline; gap: var(--space-2-5); }
.qs-card__no { flex: none; color: var(--color-caption); }
.qs-card__body { display: flex; flex-direction: column; gap: var(--space-2-5); margin: 0; }
.qs-card__body dd { margin: var(--space-0-5) 0 0; }
.qs-card__refs { margin: auto 0 0; }
/* What was already answered: AKFI's words on the left, what the demo does with them on the right */
.qs-read { display: flex; flex-direction: column; padding: 0; }
.qs-read__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); }
.qs-read__row + .qs-read__row { border-top: 1px solid var(--color-default); }
.qs-read__said, .qs-read__so { display: flex; flex-direction: column; gap: var(--space-1); }
.qs-read__so p { margin: 0; }
.qs-quote { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--color-default); font-style: italic; color: var(--color-muted); }
@media (max-width: 720px) { .qs-read__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

/* ── Key screens and flows, round 2 (tools/parts/screens/*.mjs, the product flows): what each chain step handled, the Context tab's eight answers, the
   answers' reason line, the preview of the CSV, the supplier's six fields, the document beside its label, the audit trail's detail line ── */
.ks-material { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--color-muted); font-size: 11px; line-height: 15px; letter-spacing: -0.01em; }
.app-chain .chain__step:has(.ks-material) { gap: var(--space-1-5); }
.ks-c-chain .rollup__rule p { margin: 0; font-size: 12px; line-height: 17px; }
.ks-c-chain .app-page__main { gap: var(--space-3); }
.ks-c-chain .rollup .table tbody td, .ks-c-chain .rollup .table tbody th, .ks-c-chain .rollup .table tfoot th, .ks-c-chain .rollup .table tfoot td { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ks-material .icon { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--color-caption); }
.ks-ctx { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ks-ctx__row { display: grid; grid-template-columns: 14px 116px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-default); font-size: 12px; line-height: 17px; }
.ks-ctx__no { color: var(--color-caption); }
.ks-ctx__q { color: var(--color-caption); }
.ks-ctx__a { min-width: 0; color: var(--color-foreground); }
.ks-answer__why { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.ks-answer__why .icon { flex: none; margin-top: var(--space-0-5); color: var(--color-info-text); }
.ks-answers .answer__row .table__sub { font-weight: 400; }
.ks-yours__parts { display: flex; flex-direction: column; gap: var(--space-1); }
.ks-yours__parts > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-0-5) var(--space-2); }
.ks-csv { max-width: 1160px; gap: var(--space-3); }
.ks-csv__head { display: flex; align-items: center; gap: var(--space-3); }
.ks-csv__name { display: flex; flex-direction: column; min-width: 0; }
.ks-csv__table { table-layout: fixed; font-family: var(--font-mono); font-size: 11px; line-height: 15px; }
.ks-csv__table th, .ks-csv__table td { padding: var(--space-1-5) var(--space-1); vertical-align: top; overflow-wrap: break-word; }
.ks-csv__c-sts_transaction_id { width: 88px; } .ks-csv__c-parent_sts { width: 86px; } .ks-csv__c-party { width: 70px; } .ks-csv__c-event { width: 100px; }
.ks-csv__c-own_emissions_tco2e { width: 66px; } .ks-csv__c-own_method { width: 76px; } .ks-csv__c-own_category { width: 56px; }
.ks-csv__c-received_cumulative_tco2e { width: 70px; } .ks-csv__c-reported_total_cumulative_tco2e { width: 72px; } .ks-csv__c-verification { width: 88px; } .ks-csv__c-review_status { width: 70px; }
.ks-csv__table th:last-child, .ks-csv__table td:last-child { padding-right: var(--space-2); }
/* The long texts of a row are cut to one line in the preview; the file holds them whole */
.ks-csv__table td.ks-csv__long { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-csv__table th:first-child, .ks-csv__table td:first-child { padding-left: var(--space-2); }
.ks-csv__table th { font-weight: 500; }
.ks-csv__table .ks-csv__adds { background: var(--color-success-soft); color: var(--color-success-text); font-weight: 600; }
.ks-csv__table .ks-csv__cum { color: var(--color-caption); }
.ks-csv__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-control); background: var(--color-success-soft); color: var(--color-success-text); font-weight: 500; }
.ks-csv__note .icon { flex: none; margin-top: var(--space-0-5); }
.ks-c-queries { padding: var(--space-3) var(--space-4); }
.ks-c-queries .ks-example { cursor: default; }
/* The document beside its label (tools/genFlowOwnDocument.mjs): the supplier's term on the left, the label's field on the right, both large
   enough to read on a projector — the moment "your format in, the same label out" */
.fl-map { gap: var(--space-3); }
.fl-map__grid { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; gap: var(--space-2) var(--space-2); }
.fl-map__col { padding: 0 var(--space-3); color: var(--color-caption); font-size: 13px; line-height: 19px; font-weight: 500; }
.fl-map__doc, .fl-map__sts { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-control); }
.fl-map__doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; align-content: center; column-gap: var(--space-3); }
.fl-map__doc .fl-map__where { grid-column: 2; grid-row: 1; }
.fl-map__doc .fl-map__term { grid-column: 1; grid-row: 1; }
.fl-map__doc .fl-map__docval { grid-column: 1 / -1; }
.fl-map__doc { border: 1px dashed var(--color-emphasis); background: var(--color-surface-muted); }
.fl-map__sts { border: 1px solid var(--color-info-border); background: var(--color-info-soft); }
.fl-map__where { color: var(--color-caption); font-size: 12px; line-height: 16px; }
.fl-map__term { color: var(--color-foreground); font-size: 17px; line-height: 23px; font-style: italic; font-weight: 500; }
.fl-map__docval { color: var(--color-muted); font-size: 14px; line-height: 20px; }
.fl-map__field { color: var(--color-info-text); font-size: 15px; line-height: 21px; font-weight: 600; }
.fl-map__val { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-foreground); font-size: 14px; line-height: 20px; }
.fl-map__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-caption); }
.fl-map__foot { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: 13px; line-height: 19px; }
.fl-map__foot .icon { flex: none; margin-top: var(--space-0-5); }
/* The audit trail: each transaction's method flag, verification and source of data on a line under it */
.fl-new2-tbl tr.fl-at-tx td { border-bottom: 0; padding-bottom: 0; }
.fl-at-detail td { padding-top: 0; padding-bottom: var(--space-1-5); }
.fl-at-detail td { white-space: normal; }
.fl-at-detail__item { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); color: var(--color-muted); font-size: 11px; line-height: 16px; }
.fl-new2-tbl td .table__sub { white-space: nowrap; }
/* The request's card of what the label asks, a little tighter, so the eight questions stay on the 800 px screen */
.ks-ask__field { padding-block: var(--space-1); }
.ks-ask__questions { row-gap: var(--space-1); }
.ks-part__name .ks-term { flex-wrap: wrap; white-space: normal; }