/*
 * The components of Luxury Resale Marketplace, 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 {
  /* A picked mark is drawn in currentColor with its knockouts in --lg-ground: here the tile's own fill */
  --lg-ground: var(--color-primary);
  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);
}
.brand__mark svg { width: 18px; height: 18px; }

/* ── 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: a 16 px grid, drawn with the current color; the sprite is in assets/showcase.js ── */
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; stroke-width: 1.5; }

/* ── 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 { width: 14px; height: 14px; }
.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; }

/* ── Logo: the marks on their grounds, the lockup with the wordmark, sizes and clear space
   (design/logo.html, tools/genLogo.mjs) — proposed. A mark is drawn in currentColor with its
   knockouts in --lg-ground; every ground below sets both to tokens ── */
.lg-mark { display: block; flex: none; }
.lg-mark--16 { width: 16px; height: 16px; }
.lg-mark--18 { width: 18px; height: 18px; }
.lg-mark--24 { width: 24px; height: 24px; }
.lg-mark--32 { width: 32px; height: 32px; }
.lg-mark--64 { width: 64px; height: 64px; }
.lg-mark--128 { width: 128px; height: 128px; }

.lg-on-page { --lg-ground: var(--color-page); background: var(--color-page); color: var(--color-primary); }
.lg-on-inverted { --lg-ground: var(--color-surface-inverted); background: var(--color-surface-inverted); color: var(--color-inverted); }
.lg-on-brand { --lg-ground: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }

/* Side by side: a label column, then one column per mark; scrolls inside itself on a narrow screen */
.lg-compare { overflow-x: auto; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
/* Side by side: written a column per mark (one label column, then one per mark; six rows: names,
   page, inverted, brand, menu, tab), so the grid takes as many columns as there are marks */
.lg-compare__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-template-columns: minmax(120px, max-content); grid-auto-columns: minmax(96px, 1fr); min-width: max-content; }
.lg-compare__label { display: flex; align-items: center; padding: var(--space-3) var(--space-4); }
.lg-compare__head { display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3) var(--space-2); text-align: center; }
.lg-compare__cell { display: grid; place-items: center; min-height: 104px; padding: var(--space-4) var(--space-2); }
.lg-compare__cell--small { min-height: 64px; padding: var(--space-3) var(--space-2); }

/* A browser tab, as the favicon is seen in it */
.lg-tab {
  --lg-ground: var(--color-surface-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-default);
  border-bottom: 0;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: var(--color-surface-muted);
  color: var(--color-primary);
}
.lg-tab__title { overflow: hidden; max-width: 72px; color: var(--color-foreground); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* A variant: the mark large beside its lockups */
.lg-variant { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.lg-stage { display: grid; place-items: center; padding: var(--space-8); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.lg-lockups { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-lockup { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
/* The gap is a quarter of the 32 px mark, its clear space. The wordmark: the site's sans in capitals, tracked wide — text, never an outlined font */
.lg-wordmark { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .lg-variant { grid-template-columns: minmax(0, 1fr); } }

/* Sizes and clear space */
.lg-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.lg-size { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.lg-clear-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
/* The clear space is a quarter of the mark: 32 px around the 128 px mark */
.lg-clear { --lg-ground: var(--color-accent-soft); padding: var(--space-8); border: 1px dashed var(--color-accent); background: var(--color-accent-soft); color: var(--color-primary); }
.lg-clear__mark { --lg-ground: var(--color-page); background: var(--color-page); outline: 1px solid var(--color-accent); }
.lg-clear__note { max-width: 420px; color: var(--color-muted); }

/* A variant: why the mark fits, under its idea */
.lg-why { max-width: 760px; color: var(--color-muted); }
/* The two drawings of a crafted mark: detailed at 64 px and up, simplified at 32 px and below */
.lg-drawings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
.lg-drawing { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.lg-drawing__row { display: flex; align-items: flex-end; gap: var(--space-4); min-height: 64px; }
@media (max-width: 640px) { .lg-drawings { grid-template-columns: minmax(0, 1fr); } }

/* ── Foundations: the samples of design/index, colors, typography, spacing, shape and motion
   (tools/genFoundations.mjs) — showcase only, not product components ── */
.fd-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.fd-group { display: flex; flex-direction: column; gap: var(--space-3); }
.fd-group__head { display: flex; flex-direction: column; gap: var(--space-1); }
.fd-pairing__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fd-bullets { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; color: var(--color-muted); }
.fd-rule { display: block; width: var(--space-12); border-top: 2px solid var(--color-accent); }

/* The system at a glance */
.fd-glance { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.fd-glance__colors { grid-column: 1 / -1; }
.fd-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.fd-color { display: flex; flex-direction: column; gap: var(--space-2); }
.fd-color__fill { height: var(--space-20); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.fd-color__fill--primary { background: var(--color-primary); }
.fd-color__fill--accent { background: var(--color-accent); }
.fd-color__fill--page { background: var(--color-page); }
.fd-color__fill--success { background: var(--color-success); }
.fd-color__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.fd-type-row { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-default); }
.fd-statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* A listing card, as the samples draw it (the Components page owns the real one) */
.fd-listing { display: flex; flex-direction: column; overflow: hidden; }
.fd-listing__photo { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-surface-muted); color: var(--color-muted); }
.fd-listing__photo svg { width: var(--space-24); height: var(--space-24); }
.fd-listing__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); }
.fd-listing__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.fd-listing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }

/* Colors */
.fd-scheme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.fd-scheme__panel { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); min-height: calc(var(--space-24) * 3); padding: var(--space-8); border-radius: var(--radius-card); background: var(--color-primary); color: var(--color-primary-foreground); }
.fd-scheme__panel .t-label { color: inherit; }
.fd-tones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fd-tones .sc-tone-card .sc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fd-cats .fd-panel { gap: var(--space-3); padding: var(--space-4); }
.fd-cat-1 { --fd-cat: var(--color-category-1); }
.fd-cat-2 { --fd-cat: var(--color-category-2); }
.fd-cat-3 { --fd-cat: var(--color-category-3); }
.fd-cat-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-full); background: var(--color-surface); font-weight: var(--weight-medium); }
.fd-cat-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--fd-cat); }
.fd-cat-bar { display: block; height: var(--space-1); background: var(--fd-cat); }
.fd-group-row th { color: var(--color-foreground); font-weight: var(--weight-semibold); }

/* Typography */
.fd-pairings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.fd-pairing { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.fd-pairing__names { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-default); }
.fd-pairing__specimen { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fd-face-display { font-family: var(--font-display); }
.fd-face-sans { font-family: var(--font-sans); }
.fd-face-mono { font-family: var(--font-mono); }
.fd-face-display-alt { font-family: var(--font-display-alt); }
.fd-face-sans-alt { font-family: var(--font-sans-alt); }
.fd-family { font-size: var(--text-lg); line-height: var(--leading-lg); white-space: nowrap; }
.fd-weights { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-lg); line-height: var(--leading-lg); }
.fd-weights > span { white-space: nowrap; }
.fd-w-400 { font-weight: var(--weight-regular); }
.fd-w-500 { font-weight: var(--weight-medium); }
.fd-w-600 { font-weight: var(--weight-semibold); }
.fd-w-700 { font-weight: var(--weight-bold); }
.fd-styles td { vertical-align: middle; }
.fd-styles td:not(:nth-child(2)) { white-space: nowrap; }
.fd-style-sample { display: block; min-width: calc(var(--space-24) * 3); }

/* Spacing and layout */
.fd-bar { display: block; height: var(--space-4); border-radius: var(--radius-control); background: var(--color-primary); }
.fd-columns { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gutter); }
.fd-columns span { display: grid; place-items: end center; height: var(--space-24); padding-bottom: var(--space-2); border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary-strong); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.fd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.fd-btn-lg { height: var(--size-control-lg); padding: 0 var(--space-8); }

/* Radius and shadows */
.fd-shape { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.fd-shape__sample { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); min-height: calc(var(--space-24) + var(--space-4)); margin-bottom: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); }
.fd-field { display: flex; align-items: center; width: 100%; height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-subtle); }
.fd-box { display: block; width: 100%; height: var(--space-16); border: 1px solid var(--color-default); background: var(--color-surface); }
.fd-box--card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.fd-box--overlay { border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); }
.fd-elevations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-10) var(--space-8); }
.fd-elev { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: calc(var(--space-24) + var(--space-12)); padding: var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fd-elev--card { box-shadow: var(--shadow-card); }
.fd-elev--raised { box-shadow: var(--shadow-raised); }
.fd-elev--overlay { border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); }

/* Motion: a box travels its track once on load, again on Replay (showcase.js › data-replay) */
.fd-track { position: relative; align-self: stretch; height: var(--space-12); border-bottom: 1px dashed var(--color-emphasis); }
.fd-move { position: absolute; top: 0; left: 0; animation: fd-travel var(--fd-duration, var(--duration-slow)) var(--fd-ease, var(--ease-standard)) var(--duration-slow) both; }
.fd-move--fast { --fd-duration: var(--duration-fast); }
.fd-move--base { --fd-duration: var(--duration-base); }
.fd-move--slow { --fd-duration: var(--duration-slow); }
.fd-move--slower { --fd-duration: var(--duration-slower); }
.fd-move--enter { --fd-ease: var(--ease-enter); }
.fd-move--exit { --fd-ease: var(--ease-exit); }
@keyframes fd-travel { from { left: 0; } to { left: calc(100% - var(--space-12)); } }

@media (max-width: 900px) {
  .fd-glance, .fd-scheme, .fd-pairings, .fd-tones, .fd-cats { grid-template-columns: minmax(0, 1fr); }
  .fd-colors, .fd-elevations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-columns { gap: var(--grid-gutter-sm); }
  .fd-elevations { padding: var(--space-6) var(--space-4); gap: var(--space-4); }
}

/*
 * The States page (design/states.html, tools/genStates.mjs) — showcase only, not product components.
 * Classes st-…; every value is a token of tokens.css. It reuses .btn, .card, .badge, .tag, .table and
 * .icon by name and styles nothing of theirs. To be merged into the site's stylesheet.
 */

/* ── The state itself: the picture, the words, the one action, where it appears ── */
.st-specimen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; }
.st-specimen__art { position: relative; display: grid; place-items: center; padding: var(--space-12) var(--space-6) var(--space-10); background: var(--color-page); border-right: 1px solid var(--color-default); }
.st-specimen__replay { position: absolute; top: var(--space-3); right: var(--space-3); }
.st-specimen__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4); padding: var(--space-10) var(--space-10); }
.st-specimen__lead { max-width: var(--size-prose); color: var(--color-muted); font-size: var(--text-lg); line-height: var(--leading-lg); }
.st-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-self: stretch; margin: var(--space-2) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-default); }
.st-facts dt { margin-bottom: var(--space-1); }
.st-facts dd { margin: 0; color: var(--color-foreground); }
.st-specimen .st-ld--lg { width: var(--space-24); height: var(--space-24); }

.st-cases-label { margin-top: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-default); }

/* ── The cases: each a small screen with its name, who sees it, and one line under it ── */
.st-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8) var(--space-6); align-items: start; }
.st-cases--2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.st-cases--offline { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.st-cases--offline .st-case:first-child { grid-row: span 2; }
.st-case { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; min-width: 0; }
.st-case__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.st-case__head .tag { color: var(--color-muted); }
.st-case__note { max-width: var(--size-prose); }

/* ── A web screen: a bar with the page's name, then the body ── */
.st-screen { display: flex; flex-direction: column; overflow: hidden; }
.st-screen__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--space-12); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.st-screen__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--color-page); flex: 1; }
.st-screen__body--toast { position: relative; min-height: calc(var(--space-24) * 2); }
.st-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── The mobile app's frame ── */
.st-phone { display: flex; flex-direction: column; width: 100%; max-width: calc(var(--space-24) * 3 + var(--space-8)); min-height: calc(var(--space-24) * 4); margin: 0 auto; overflow: hidden; border: var(--space-1) solid var(--color-device); border-radius: var(--space-8); box-shadow: var(--shadow-raised); background: var(--color-page); }
.st-phone__status { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); background: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.st-phone__island { width: var(--space-12); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-muted); }
.st-phone__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.st-phone__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
.st-phone__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.st-phone__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.st-phone__tab { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; color: var(--color-muted); font-size: var(--text-2xs); line-height: var(--leading-2xs); }
.st-phone__tab.is-on { color: var(--color-primary-strong); font-weight: var(--weight-semibold); }

/* ── A state inside a panel ── */
.st-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); text-align: center; }
.st-empty .btn { margin-top: var(--space-2); }
.st-empty__text { max-width: calc(var(--space-24) * 3); color: var(--color-muted); }

/* ── A message in the flow of a screen ── */
.st-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1px solid transparent; }
.st-banner .icon { margin-top: var(--space-1); }
.st-banner__text { flex: 1; }
.st-banner .btn { align-self: center; }
.st-banner--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.st-banner--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.st-banner--info { background: var(--color-info-soft); color: var(--color-info-text); }
.st-banner--success { background: var(--color-success-soft); color: var(--color-success-text); }
.st-banner .btn--secondary { color: var(--color-foreground); }

.st-toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.st-toast .icon { margin-top: var(--space-1); }
.st-toast--success .icon { color: var(--color-success); }
.st-screen__body--toast .st-toast { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }

/* ── Listing parts drawn small ── */
.st-photo { position: relative; display: grid; place-items: center; flex: none; width: var(--space-12); aspect-ratio: 4 / 3; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.st-photo::after { content: ''; width: 50%; aspect-ratio: 1; border: 1px solid var(--color-emphasis); border-radius: var(--radius-full); }
.st-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.st-line__name { flex: 1; min-width: 0; font-weight: var(--weight-medium); }
.st-line--ro { opacity: 0.85; }
.st-minigrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.st-mini { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
.st-mini .st-photo { width: 100%; margin-bottom: var(--space-1); }

/* ── Search and filters ── */
.st-search { 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); color: var(--color-muted); }
.st-search__q { color: var(--color-foreground); }
.st-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--weight-medium); }
.st-chip .icon { width: 12px; height: 12px; }
.st-tabs { display: inline-flex; gap: var(--space-1); }
.st-tab { padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); color: var(--color-muted); font-weight: var(--weight-medium); }
.st-tab.is-on { background: var(--color-primary-soft); color: var(--color-primary-strong); }

/* ── Skeletons: the shape of what is coming, resting; a calm sweep passes over ── */
.st-sk { display: block; border-radius: var(--radius-control); background: linear-gradient(90deg, var(--color-surface-muted) 0%, var(--color-default) 50%, var(--color-surface-muted) 100%); background-size: 200% 100%; animation: st-sweep calc(var(--duration-loader) * 1.5) var(--ease-standard) infinite; }
@keyframes st-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.st-sk--photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.st-sk--big { border-radius: var(--radius-card); }
.st-sk--line { height: var(--space-3); }
.st-sk--short { width: 60%; }
.st-sk--title { height: var(--space-6); }
.st-sk--price { width: 40%; height: var(--space-5); }
.st-sk--price.st-sk--big { height: var(--space-8); border-radius: var(--radius-control); }
.st-sk--chip { width: var(--space-20); height: var(--space-6); }
.st-sk--thumb { flex: 1; aspect-ratio: 1; }
.st-sk--pill { width: var(--space-16); height: var(--space-6); border-radius: var(--radius-full); }
.st-sk--button { width: 100%; height: var(--size-control-lg); }
.st-skgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.st-skgrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-skgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.st-skcard { display: flex; flex-direction: column; overflow: hidden; }
.st-skcard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.st-sklisting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.st-sklisting__photos, .st-sklisting__info { display: flex; flex-direction: column; gap: var(--space-3); }
.st-sklisting__thumbs, .st-sklisting__badges { display: flex; gap: var(--space-2); }

/* The loader: the site's mark turning once per cycle (the loaders page owns the real set) */
.st-ld { color: var(--color-primary); }
.st-ld__turn { animation: st-turn var(--duration-loader) var(--ease-standard) infinite; }
@keyframes st-turn { to { transform: rotate(360deg); } }

/* Skeleton or loader */
.st-rule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-rule__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
.st-rule__col + .st-rule__col { border-left: 1px solid var(--color-default); }
.st-rule__demo { display: flex; align-items: center; align-self: stretch; min-height: var(--space-16); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-page); }
.st-rule__demo--lines { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-2); }
.st-rule__text { color: var(--color-muted); }
.st-rule__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; font-weight: var(--weight-medium); }

/* Authentication pending */
.st-pending { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-5); }
.st-pending__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.st-steps { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.st-step { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.st-step.is-done .icon { color: var(--color-muted); }
.st-step.is-now { color: var(--color-foreground); font-weight: var(--weight-medium); }
.st-step .ld--sm { width: 16px; height: 16px; }
.st-pending__art .st-ld--lg { width: var(--space-16); height: var(--space-16); margin: var(--space-4); }

/* ── Errors ── */
.st-twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); }
.st-twin__ok { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.st-inline-error { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-card); background: var(--color-surface); }
.st-inline-error > .icon { color: var(--color-danger); }
.st-form { display: flex; flex-direction: column; gap: var(--space-3); }
.st-form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.st-input { display: flex; align-items: center; height: var(--size-control); padding: 0 var(--space-3); border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); }
.st-input.is-error { border-color: var(--color-danger); }
.st-form__error { color: var(--color-danger-text); font-size: var(--text-xs); line-height: var(--leading-xs); }
.st-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.st-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.st-later { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--color-emphasis); }
.st-table { border-radius: 0; border-width: 1px 0 0; }

/* ── Access ── */
.st-gate { position: relative; min-height: calc(var(--space-24) * 3); overflow: hidden; border-radius: var(--radius-card); }
.st-gate__page { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.st-gate--toast { min-height: calc(var(--space-24) * 3); }
.st-gate--toast .st-toast { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); }
.st-scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.st-dialog { position: absolute; bottom: var(--space-4); left: 50%; display: flex; flex-direction: column; gap: var(--space-2); width: calc(100% - var(--space-8)); max-width: calc(var(--space-24) * 3 + var(--space-8)); padding: var(--space-5); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); transform: translateX(-50%); }
.st-same { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.st-same__in { display: flex; flex-direction: column; gap: var(--space-2); }
.st-address { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface); }
.st-same__arrow { align-self: center; color: var(--color-muted); }

/* ── Offline ── */
.st-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-queue__col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.st-queue__col + .st-queue__col { border-left: 1px solid var(--color-default); }
.st-q { display: flex; flex-direction: column; gap: var(--space-2); }
.st-q__row { display: flex; align-items: center; gap: var(--space-2); }
.st-q__row .icon { color: var(--color-warning); }
.st-q--blocked .st-q__row { color: var(--color-muted); }
.st-q--blocked .st-q__row .icon { color: var(--color-subtle); }

/* ── Certificate ── */
.st-cert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-8); border-color: var(--color-accent); }
.st-cert__art { display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-accent-soft); }
.st-cert__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.st-cert .st-empty__text { max-width: var(--size-prose); }

@media (max-width: 900px) {
  .st-specimen, .st-rule, .st-queue, .st-pending, .st-cert { grid-template-columns: minmax(0, 1fr); }
  .st-specimen__art { border-right: 0; border-bottom: 1px solid var(--color-default); }
  .st-specimen__text { padding: var(--space-6); }
  .st-rule__col + .st-rule__col, .st-queue__col + .st-queue__col { border-left: 0; border-top: 1px solid var(--color-default); }
  .st-cases--2, .st-cases--offline { grid-template-columns: minmax(0, 1fr); }
  .st-cases--offline .st-case:first-child { grid-row: auto; }
  .st-facts { grid-template-columns: minmax(0, 1fr); }
  .st-sklisting, .st-twin { grid-template-columns: minmax(0, 1fr); }
  .st-cert { padding: var(--space-5); }
}

/*
 * Components, group 4 — the product's own, A: listing card, authenticity seal and certificate,
 * inspection stepper, price breakdown, offer card. Proposed (the product has none yet).
 * Values are tokens only; brass (--color-accent) is decoration — a seal's ring, a rule — never text,
 * never an action.
 */

/* ── Still-life placeholder: a photo drawn on tokens ── */
.still { display: block; width: 100%; height: 100%; }
.still__bg { fill: var(--color-surface-muted); }
.still__arch { fill: var(--color-primary-soft); }
.still__shadow { fill: var(--color-default); }
.still__strap { fill: var(--color-emphasis); opacity: 0.85; }
.still__crown { fill: var(--color-emphasis); }
.still__case { fill: var(--color-surface); stroke: var(--color-foreground); stroke-width: 2.5; stroke-linejoin: round; }
.still__brass { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.still__bezel { stroke-width: 5; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.still__dial { fill: var(--color-page); stroke: var(--color-default); stroke-width: 1.5; }
.still__sub { fill: none; stroke: var(--color-default); stroke-width: 1.5; }
.still__hand { fill: none; stroke: var(--color-foreground); stroke-width: 2; stroke-linecap: round; }
.still__hand--thick { stroke-width: 3.5; }
.still__pin { fill: var(--color-accent); }
.still__quilt { fill: none; stroke: var(--color-default); stroke-width: 1.5; }
.still__chain { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-dasharray: 6 3; stroke-linecap: round; }
.still__clasp { fill: var(--color-accent); stroke: var(--color-foreground); stroke-width: 1.5; }
.still__band { fill: none; stroke: var(--color-foreground); stroke-width: 3; }
.still__gem { fill: var(--color-surface); stroke: var(--color-foreground); stroke-width: 1.5; }

/* Samples laid out beside each other */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-6); align-items: start; }
.listing-grid > .sc-state { align-items: stretch; }
.listing-compact-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--size-form); }

/* ── Listing card ── */
.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-foreground);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.listing-card:hover,
.listing-card.is-hover { box-shadow: var(--shadow-raised); border-color: var(--color-emphasis); }
.listing-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-muted); }
.listing-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4); }
.listing-card__meta { margin: 0; }
.listing-card__title { margin: 0; color: var(--color-foreground); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.listing-card__title--sans { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.listing-card__link { color: inherit; text-decoration: none; }
.listing-card__link::after { content: ''; position: absolute; inset: 0; }
.listing-card__link:hover { color: inherit; }
.listing-card:has(.listing-card__link:focus-visible),
.listing-card.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.listing-card__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); margin-top: var(--space-2); font-variant-numeric: tabular-nums lining-nums; }
.listing-card__amount { font-family: var(--font-sans); font-size: var(--text-figure-sm); line-height: var(--leading-figure-sm); font-weight: var(--weight-semibold); }
.listing-card__approx { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.listing-card__approx-note { font-size: var(--text-xs); color: var(--color-subtle); }
.listing-card__auth { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--color-success-text); }

/* The availability chip sits on the photo, opaque so it reads on any picture */
.listing-card__chip { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; }
.listing-card__chip--inline { position: static; align-self: flex-start; margin-bottom: var(--space-1); }
.listing-card__chip--reserved { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning-text); }
.listing-card__time { font-variant-numeric: tabular-nums; }
.listing-card__chip--sold { background: var(--color-surface-inverted); color: var(--color-inverted); }
.listing-card__chip--gone { background: var(--color-surface); border-color: var(--color-emphasis); color: var(--color-muted); }

/* The save heart: a 32 px disc with a 44 px target */
.listing-card__save { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); padding: 0; border: 0; background: transparent; cursor: pointer; }
.listing-card__save::before { content: ''; position: absolute; inset: calc(var(--space-1) * -1.5); }
.listing-card__save-disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-default); color: var(--color-foreground); box-shadow: var(--shadow-card); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.listing-card__save:hover .listing-card__save-disc { background: var(--color-surface-muted); }
.listing-card__save:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-full); }
.listing-card__heart { width: 18px; height: 18px; }
.listing-card__save[aria-pressed='true'] .listing-card__heart { fill: var(--color-primary); stroke: var(--color-primary); }

/* Sold and gone: the photo recedes, the card still opens the page */
.listing-card.is-sold .still,
.listing-card.is-gone .still { filter: grayscale(1); opacity: 0.55; }
.listing-card.is-sold .listing-card__title,
.listing-card.is-gone .listing-card__title,
.listing-card.is-sold .listing-card__amount,
.listing-card.is-gone .listing-card__amount { color: var(--color-muted); }
.listing-card.is-gone .listing-card__approx,
.listing-card.is-sold .listing-card__approx { color: var(--color-subtle); }
.listing-card.is-gone .listing-card__amount,
.listing-card.is-sold .listing-card__amount { text-decoration: line-through; text-decoration-thickness: 1px; }

/* List: the photo at the start of a row */
.listing-card--list { flex-direction: row; align-items: stretch; }
.listing-card--list .listing-card__media { position: static; flex: 0 0 clamp(120px, 28%, 220px); aspect-ratio: auto; min-height: 140px; }
.listing-card--list .listing-card__body { flex: 1; justify-content: center; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5); }
.listing-card--list .listing-card__title { -webkit-line-clamp: 1; line-clamp: 1; }
.listing-card--list .listing-card__save { top: var(--space-3); right: var(--space-3); }

/* Compact: a thumbnail row */
.listing-card--compact { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2); padding-right: var(--space-12); box-shadow: none; }
.listing-card--compact .listing-card__media { flex: none; width: 72px; aspect-ratio: 1; border-radius: var(--radius-control); }
.listing-card--compact .listing-card__body { padding: 0; gap: 0; }
.listing-card--compact .listing-card__meta { font-size: var(--text-2xs); }
.listing-card--compact .listing-card__price { margin-top: var(--space-1); }
.listing-card--compact .listing-card__amount { font-size: var(--text-base); line-height: var(--leading-base); }
.listing-card--compact .listing-card__save { top: 50%; right: var(--space-2); margin-top: calc(var(--size-control-sm) / -2); }
.listing-card--compact .listing-card__chip--inline { height: 20px; margin-bottom: var(--space-1); }
.listing-card--compact .listing-card__save-disc { box-shadow: none; border-color: transparent; background: transparent; }

/* Loading: shapes in the card's own proportions, a slow pulse */
.listing-card--loading { box-shadow: none; }
.listing-card__sk { display: block; height: var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); animation: listing-pulse var(--duration-loader) var(--ease-standard) infinite; }
.listing-card__media.listing-card__sk { height: auto; border-radius: 0; }
.listing-card__sk--short { width: 40%; height: var(--space-3); }
.listing-card__sk--mid { width: 60%; height: var(--space-5); margin-top: var(--space-2); }
.listing-card--loading .listing-card__body { gap: var(--space-3); padding-bottom: var(--space-6); }
@keyframes listing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Authenticity seal ── */
.auth-seal { --seal-bg: var(--color-surface-muted); --seal-fg: var(--color-muted); --seal-line: var(--color-emphasis); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-3) 0 var(--space-1); border: 1px solid transparent; border-radius: var(--radius-full); background: var(--seal-bg); color: var(--seal-fg); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.auth-seal__mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--seal-line); color: var(--seal-fg); }
.auth-seal__mark .icon { width: 12px; height: 12px; stroke-width: 2; }
.auth-seal__text { min-width: 0; }

/* Passed and issued: the provider's positive finding. The only seals with a brass ring */
.auth-seal--passed,
.auth-seal--issued { --seal-bg: var(--color-success-soft); --seal-fg: var(--color-success-text); --seal-line: var(--color-accent); }
.auth-seal--passed .auth-seal__mark,
.auth-seal--issued .auth-seal__mark { border-width: 2px; }
/* Submitted: waiting. Dashed, quiet, no tick */
.auth-seal--submitted { --seal-bg: var(--color-surface); --seal-fg: var(--color-muted); border-style: dashed; border-color: var(--color-emphasis); }
.auth-seal--submitted .auth-seal__mark { border-style: dashed; }
/* Inconclusive: a caution, not a pass */
.auth-seal--inconclusive { --seal-bg: var(--color-warning-soft); --seal-fg: var(--color-warning-text); --seal-line: var(--color-warning); }
/* Failed and revoked */
.auth-seal--failed { --seal-bg: var(--color-danger-soft); --seal-fg: var(--color-danger-text); --seal-line: var(--color-danger); }
.auth-seal--revoked { --seal-bg: var(--color-danger-soft); --seal-fg: var(--color-danger-text); --seal-line: var(--color-danger); border-style: dashed; border-color: var(--color-danger); }
/* Resolved by staff: neutral on purpose, no provider result */
.auth-seal--resolved { --seal-bg: var(--color-surface-muted); --seal-fg: var(--color-foreground); --seal-line: var(--color-emphasis); }

.auth-seal--sm { min-height: 22px; gap: var(--space-1); padding-right: var(--space-2); font-size: var(--text-2xs); }
.auth-seal--sm .auth-seal__mark { width: 16px; height: 16px; }
.auth-seal--sm .auth-seal__mark .icon { width: 10px; height: 10px; }

/* Large: the result panel */
.auth-seal--lg { display: flex; align-items: flex-start; gap: var(--space-4); min-height: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); white-space: normal; font-size: var(--text-sm); line-height: var(--leading-sm); }
.auth-seal--lg .auth-seal__mark { width: 36px; height: 36px; border-width: 2px; }
.auth-seal--lg .auth-seal__mark .icon { width: 18px; height: 18px; }
.auth-seal__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.auth-seal__title { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-semibold); }
.auth-seal__finding { color: var(--seal-fg); }
.auth-seal__next { margin-top: var(--space-1); color: var(--color-foreground); font-weight: var(--weight-regular); }
.auth-states { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.auth-panels { align-items: stretch; }
.auth-certs { align-items: stretch; gap: var(--space-6); }
.auth-certs > .sc-state { align-items: stretch; }
.auth-certs .certificate { flex: 1; }

/* ── Certificate card ── */
.certificate { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8) var(--space-6) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.certificate::before { content: ''; position: absolute; inset: var(--space-2); border: 1px solid var(--color-accent); border-radius: var(--radius-control); opacity: 0.55; pointer-events: none; }
.certificate__seal { width: 96px; height: 96px; }
.certificate__scallop { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1.5; }
.certificate__disc { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.5; }
.certificate__ring { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 48px 48px; animation: certificate-draw var(--duration-slower) var(--ease-enter) both; }
.certificate__mark { fill: none; stroke: var(--color-success-text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.certificate__slash { fill: none; stroke: var(--color-danger); stroke-width: 4; stroke-linecap: round; }
.certificate__seal--revoked .certificate__scallop,
.certificate__seal--revoked .certificate__disc,
.certificate__seal--revoked .certificate__ring { stroke: var(--color-emphasis); }
.certificate__seal--revoked .certificate__scallop { fill: var(--color-surface-muted); }
.certificate__seal--revoked .certificate__mark { stroke: var(--color-subtle); }
@keyframes certificate-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.certificate__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.certificate__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.certificate__title { margin: 0; }
.certificate__facts { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-default); border-bottom: 1px solid var(--color-default); }
.certificate__row { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr; gap: var(--space-3); align-items: baseline; }
.certificate__row dt { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.certificate__row dd { margin: 0; font-weight: var(--weight-medium); }
.certificate__number { font-weight: var(--weight-medium); letter-spacing: 0.02em; color: var(--color-foreground); }
.certificate__checked ul { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.certificate__checked li { position: relative; padding-left: var(--space-4); color: var(--color-foreground); }
.certificate__checked li::before { content: ''; position: absolute; left: 0; top: calc(var(--leading-sm) / 2 - 1px); width: var(--space-2); border-top: 1px solid var(--color-accent); }
.certificate__alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-danger-text); }
.certificate__alert .icon { margin-top: 2px; }
.certificate__finding { margin: 0; }
.certificate--revoked .certificate__number { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--color-muted); }
.certificate--revoked .certificate__title { color: var(--color-muted); }
@media (max-width: 520px) { .certificate { grid-template-columns: minmax(0, 1fr); } }

/* ── Inspection stepper ── */
.inspection { --dot: 28px; container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.inspection__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.inspection__title { margin: 0; }
.inspection__hub { margin: 0; color: var(--color-muted); }
.inspection__apart { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.inspection__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inspection__step { position: relative; display: flex; flex-direction: column; gap: 2px; padding-right: var(--space-3); }
.inspection__step::after { content: ''; position: absolute; top: calc(var(--dot) / 2 - 1px); left: calc(var(--dot) + var(--space-2)); right: var(--space-2); height: 2px; background: var(--color-default); }
.inspection__step:last-child::after { display: none; }
.inspection__step.is-done::after { background: var(--color-primary); }
.inspection__dot { display: grid; place-items: center; width: var(--dot); height: var(--dot); margin-bottom: var(--space-2); border: 2px solid var(--color-emphasis); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary-foreground); }
.inspection__dot .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.inspection__label { font-weight: var(--weight-semibold); color: var(--color-foreground); }
.inspection__date { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.inspection__note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.inspection__step.is-todo .inspection__label { color: var(--color-muted); font-weight: var(--weight-medium); }
.inspection__step.is-done .inspection__dot { background: var(--color-primary); border-color: var(--color-primary); }
.inspection__step.is-current .inspection__dot { border-color: var(--color-primary); box-shadow: inset 0 0 0 5px var(--color-surface), inset 0 0 0 14px var(--color-primary); }
.inspection__step.is-current .inspection__dot .icon { display: none; }
.inspection__step.is-passed .inspection__dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-success-foreground); }
.inspection__step.is-failed .inspection__dot { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-danger-foreground); }
.inspection__step.is-failed .inspection__label { color: var(--color-danger-text); }
.inspection__step.is-held .inspection__dot { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning-text); }
.inspection__step.is-held .inspection__label { color: var(--color-warning-text); }
.inspection__step.is-cancelled .inspection__dot { background: var(--color-surface-muted); border-color: var(--color-subtle); color: var(--color-muted); }
.inspection__step.is-cancelled .inspection__label { color: var(--color-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.inspection__step.is-cancelled::after,
.inspection__step.is-held::after { background: repeating-linear-gradient(90deg, var(--color-emphasis) 0 4px, transparent 4px 8px); }
.inspection__step.is-cancelled-after .inspection__dot { border-style: dashed; }

/* The outcome beneath the steps */
.inspection__outcome { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.inspection__outcome > .icon { width: 20px; height: 20px; margin-top: 2px; }
.inspection__outcome > div { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; }
.inspection__outcome-title { font-weight: var(--weight-semibold); }
.inspection__outcome--passed { background: var(--color-success-soft); color: var(--color-success-text); }
.inspection__outcome--failed { background: var(--color-danger-soft); color: var(--color-danger-text); }
.inspection__outcome--held { background: var(--color-warning-soft); color: var(--color-warning-text); }
.inspection__outcome p { color: inherit; }
.inspection__next { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) 0; color: var(--color-foreground); }
.inspection__next li { display: flex; gap: var(--space-2); align-items: flex-start; }
.inspection__next .icon { margin-top: 2px; color: var(--color-danger-text); }
.inspection-stack > .sc-state { align-items: stretch; }
.inspection-pair { align-items: start; }
.inspection-pair > .sc-state { align-items: stretch; }

/* Vertical: by request, and whenever the stepper's container is narrow */
.inspection--vertical .inspection__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.inspection--vertical .inspection__step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: var(--space-3); padding-right: 0; }
.inspection--vertical .inspection__dot { grid-row: 1 / span 3; margin-bottom: 0; }
.inspection--vertical .inspection__step::after { top: calc(var(--dot) + var(--space-1)); bottom: calc(var(--space-5) * -1 + var(--space-1)); left: calc(var(--dot) / 2 - 1px); right: auto; width: 2px; height: auto; }
.inspection--vertical .inspection__step.is-cancelled::after,
.inspection--vertical .inspection__step.is-held::after { background: repeating-linear-gradient(180deg, var(--color-emphasis) 0 4px, transparent 4px 8px); }
@container (max-width: 520px) {
  .inspection__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .inspection__step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: var(--space-3); padding-right: 0; }
  .inspection__dot { grid-row: 1 / span 3; margin-bottom: 0; }
  .inspection__step::after { top: calc(var(--dot) + var(--space-1)); bottom: calc(var(--space-5) * -1 + var(--space-1)); left: calc(var(--dot) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .inspection__step.is-cancelled::after,
  .inspection__step.is-held::after { background: repeating-linear-gradient(180deg, var(--color-emphasis) 0 4px, transparent 4px 8px); }
}

/* The one-line form */
.inspection-pills { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.inspection-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.inspection-pill .icon { width: 14px; height: 14px; }
.inspection-pill--received { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-strong); }
.inspection-pill--passed { background: var(--color-success-soft); border-color: transparent; color: var(--color-success-text); }
.inspection-pill--failed { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger-text); }

/* ── Price breakdown ── */
.price-pair { align-items: stretch; }
.price-pair > .sc-state { align-items: stretch; }
.price-pair > .sc-state .price-breakdown { flex: 1; }
.price-breakdown { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); font-variant-numeric: tabular-nums lining-nums; }
.price-breakdown__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.price-breakdown__head .t-card-title { margin: 0; }
.price-breakdown__charged { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-muted); }
.price-breakdown__rows { display: flex; flex-direction: column; margin: 0; }
.price-breakdown__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-default); }
.price-breakdown__row dt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.price-breakdown__label { color: var(--color-muted); }
.price-breakdown__sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.price-breakdown__value { margin: 0; text-align: right; white-space: nowrap; font-weight: var(--weight-medium); color: var(--color-foreground); }
.price-breakdown__was { margin-right: var(--space-2); color: var(--color-subtle); font-weight: var(--weight-regular); text-decoration-thickness: 1px; }
.price-breakdown__tbc { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font-weight: var(--weight-regular); }
.price-breakdown__row--deduct .price-breakdown__value { color: var(--color-foreground); }
.price-breakdown__row--total { align-items: center; margin-top: var(--space-1); padding-top: var(--space-4); border-top: 2px solid var(--color-accent); border-bottom: 0; }
.price-breakdown__row--total .price-breakdown__label { color: var(--color-foreground); font-weight: var(--weight-semibold); }
.price-breakdown__foot { margin: 0; }
.price-breakdown__hold { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-foreground); }
.price-breakdown__hold .icon { margin-top: 2px; color: var(--color-muted); }
.price-breakdown--compact { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

.price-bar { max-width: var(--size-form); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.price-bar > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.price-bar > summary::-webkit-details-marker { display: none; }
.price-bar__total { display: flex; flex-direction: column; }
.price-bar__label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.price-bar__amount { font-size: var(--text-figure-sm); line-height: var(--leading-figure-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.price-bar__toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-primary); }
.price-bar__toggle .icon { transition: transform var(--duration-base) var(--ease-standard); }
.price-bar[open] .price-bar__toggle .icon { transform: rotate(180deg); }
.price-bar > summary:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.price-bar .price-breakdown--compact { border-width: 0; border-top: 1px solid var(--color-default); border-radius: 0; }

/* ── Offer card ── */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); align-items: stretch; }
.offer-grid > .sc-state .offer-card { flex: 1; }
.offer-grid > .sc-state { align-items: stretch; }
.offer-note { max-width: var(--size-prose); }
.offer-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card); font-variant-numeric: tabular-nums lining-nums; }
.offer-card__top { display: flex; align-items: center; gap: var(--space-3); }
.offer-card__thumb { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.offer-card__listing { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.offer-card__listing .badge { margin-bottom: var(--space-1); }
.offer-card__title { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.offer-card__who { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.offer-card__amounts { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.offer-card__amounts p { margin: 0; }
.offer-card__amount { font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-figure); }
.offer-card__listed { text-align: right; }
.offer-card__listed-price { color: var(--color-muted); font-weight: var(--weight-medium); }
.offer-card__scale { height: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface-muted); overflow: hidden; }
.offer-card__fill { display: block; width: var(--share); height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.offer-card__gap { margin: 0; }
.offer-card__time { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-foreground); font-weight: var(--weight-medium); }
.offer-card--pending .offer-card__time { background: var(--color-warning-soft); color: var(--color-warning-text); }
.offer-card--accepted .offer-card__time { background: var(--color-success-soft); color: var(--color-success-text); }
.offer-card__why { background: transparent; padding: 0; color: var(--color-muted); font-weight: var(--weight-regular); }
.offer-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--size-control-sm); }
.offer-card__wait { font-size: var(--text-sm); color: var(--color-muted); }
.offer-card__link { font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; }
.offer-card--closed .offer-card__amount { color: var(--color-muted); }
.offer-card--closed .offer-card__fill { background: var(--color-emphasis); }
.offer-card--closed .offer-card__thumb .still { filter: grayscale(1); opacity: 0.6; }

.offer-rows { display: flex; flex-direction: column; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.offer-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-default); }
.offer-row:last-child { border-bottom: 0; }
.offer-row__thumb { width: 44px; height: 44px; }
.offer-row__main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.offer-row__title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-row__sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.offer-row__amount { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 640px) { .offer-row { flex-wrap: wrap; } .offer-row__main { flex-basis: 60%; } }

/*
 * Components, group 2 — Display: badge, avatar, card, tile, table, pagination, tabs, breadcrumbs,
 * progress, stepper. Every value is a token (tokens.css); no color, family or radius is written here.
 *
 * To merge into components.css:
 *  - the "Tag and badge — starter", "Card — starter" and "Table — starter" blocks are REPLACED by the
 *    blocks below (the .tag rule is kept as it was: site.css builds .tag--selected on it);
 *  - the rest is new. `.table-wrap` keeps its meaning and gets a quieter frame.
 */

/* ── Tag (unchanged from the starter: the showcase's own marks sit on it) ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ── Badge ──
   A status or a count. The tone says what kind of news it is (success: passed, published, paid;
   warning: waiting; danger: failed; info: under way; neutral: at rest); an icon or a dot always
   repeats it, so color is never the only signal. */
.badge {
  --badge-bg: var(--color-surface-muted);
  --badge-fg: var(--color-muted);
  --badge-solid-bg: var(--color-primary);
  --badge-solid-fg: var(--color-primary-foreground);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; stroke-width: 1.75; }
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

.badge--brand { --badge-bg: var(--color-primary-soft); --badge-fg: var(--color-primary-strong); }
.badge--success { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); --badge-solid-bg: var(--color-success); --badge-solid-fg: var(--color-success-foreground); }
.badge--warning { --badge-bg: var(--color-warning-soft); --badge-fg: var(--color-warning-text); --badge-solid-bg: var(--color-warning); --badge-solid-fg: var(--color-warning-foreground); }
.badge--danger { --badge-bg: var(--color-danger-soft); --badge-fg: var(--color-danger-text); --badge-solid-bg: var(--color-danger); --badge-solid-fg: var(--color-danger-foreground); }
.badge--info { --badge-bg: var(--color-info-soft); --badge-fg: var(--color-info-text); --badge-solid-bg: var(--color-info); --badge-solid-fg: var(--color-info-foreground); }

/* Outline: on a photo or a busy surface, or where a status should stay quiet */
.badge--outline { background: transparent; border-color: var(--color-default); }
.badge--outline.badge--success, .badge--outline.badge--warning, .badge--outline.badge--danger, .badge--outline.badge--info, .badge--outline.badge--brand { border-color: currentColor; }
/* Solid: one at a time, for what needs the eye first */
.badge--solid { background: var(--badge-solid-bg); color: var(--badge-solid-fg); }
.badge--sm { height: 20px; padding: 0 6px; font-size: var(--text-2xs); line-height: var(--leading-2xs); }
.badge--sm .icon { width: 12px; height: 12px; }
/* Count: a number in a pill, on a tab or a menu item */
.badge--count { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; font-size: var(--text-2xs); line-height: var(--leading-2xs); }

/* ── Avatar ──
   A person is round, a business is a rounded square: the shape repeats the marker. */
.avatar {
  --avatar-size: 40px;
  --avatar-font: var(--text-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--avatar-font);
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.avatar--xs { --avatar-size: 24px; --avatar-font: var(--text-2xs); }
.avatar--sm { --avatar-size: 32px; --avatar-font: var(--text-xs); }
.avatar--lg { --avatar-size: 56px; --avatar-font: var(--text-lg); }
.avatar--xl { --avatar-size: 72px; --avatar-font: var(--text-xl); }
.avatar .icon { width: 50%; height: 50%; }
.avatar--business { border-radius: var(--radius-card); background: var(--color-accent-soft); color: var(--color-foreground); box-shadow: inset 0 0 0 1px var(--color-accent); }
.avatar--empty { background: var(--color-surface-muted); color: var(--color-subtle); }
.avatar--photo { background: linear-gradient(135deg, var(--color-accent-soft), var(--color-primary-soft)); color: var(--color-primary-strong); overflow: hidden; }
.avatar--photo .icon { width: 62%; height: 62%; stroke-width: 1.25; transform: translateY(12%); }
.avatar__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* The marker: who the seller is, small, on the corner. Not drawn under 32 px (the name says it). */
.avatar__mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: max(14px, 36%);
  height: max(14px, 36%);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 0 0 1.5px var(--color-surface), inset 0 0 0 1px var(--color-default);
}
.avatar__mark .icon { width: 70%; height: 70%; }
.avatar--xs .avatar__mark { display: none; }
.avatar--business .avatar__mark { border-radius: var(--radius-control); color: var(--color-foreground); }

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--color-surface); }
.avatar-stack .avatar + .avatar { margin-left: calc(var(--space-1) * -1); }
.avatar--more { background: var(--color-surface-muted); color: var(--color-muted); text-transform: none; }

/* A person beside their name: the seller on a listing, a row in a table */
.person { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.person__text { display: flex; flex-direction: column; min-width: 0; }
.person__name { font-weight: var(--weight-medium); color: var(--color-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__meta { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }

/* ── Card ── */
.card {
  --card-pad: var(--space-5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-foreground);
}
.card--compact { --card-pad: var(--space-4); }
.card--muted { background: var(--color-surface-muted); box-shadow: none; }
.card--outlined { box-shadow: none; }
.card--selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
a.card, .card--interactive { cursor: pointer; text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
a.card:hover, .card--interactive:hover, .card.is-hover { border-color: var(--color-emphasis); box-shadow: var(--shadow-raised); color: var(--color-foreground); }
.card--disabled { opacity: 0.55; pointer-events: none; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--card-pad); }
.card__head + .card__body { padding-top: 0; }
.card__head--ruled { border-bottom: 1px solid var(--color-default); }
.card__head--ruled + .card__body { padding-top: var(--card-pad); }
.card__titles { display: flex; flex-direction: column; min-width: 0; }
.card__title { font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: var(--weight-semibold); }
.card__sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.card__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-pad); }
.card__body--flush { padding: 0; }
.card__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--card-pad); border-top: 1px solid var(--color-default); background: var(--color-surface-muted); border-radius: 0 0 var(--radius-card) var(--radius-card); }
/* A table that runs from edge to edge of a card: the card is its frame */
.card .table-wrap { border: 0; border-radius: 0; background: transparent; }
.card > .card__head--ruled + .table-wrap { border-top: 0; }

/* A key and its value, inside a card */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); }
.kv dt { color: var(--color-muted); }
.kv dd { color: var(--color-foreground); font-variant-numeric: tabular-nums; }

/* ── Skeleton: the shape of what is coming. A slow pulse, not a shimmer. ── */
.skeleton { display: block; height: 12px; border-radius: var(--radius-control); background: var(--color-surface-muted); animation: skeleton-pulse var(--duration-loader) var(--ease-standard) infinite; }
.skeleton--short { width: 40%; }
.skeleton--mid { width: 70%; }
.skeleton--figure { height: 32px; width: 56%; }
.skeleton--round { width: 32px; height: 32px; border-radius: var(--radius-full); }
@keyframes skeleton-pulse { 50% { opacity: 0.45; } }

/* ── Stat tile ── */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-foreground);
}
a.tile { text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
a.tile:hover, .tile.is-hover { border-color: var(--color-emphasis); box-shadow: var(--shadow-raised); color: var(--color-foreground); }
.tile__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.tile__figure { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums lining-nums; }
.tile__unit { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); color: var(--color-muted); letter-spacing: 0; }
.tile__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tile__delta .icon { width: 12px; height: 12px; }
.tile__delta--worse { color: var(--color-warning-text); }
.tile__delta--worse-strong { color: var(--color-danger-text); }
/* One figure per currency: money is never added across currencies */
.tile__lines { display: flex; flex-direction: column; gap: var(--space-1); }
.tile__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-variant-numeric: tabular-nums lining-nums; }
.tile__line-figure { font-size: var(--text-figure-sm); line-height: var(--leading-figure-sm); font-weight: var(--weight-semibold); }
.tile__code { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; color: var(--color-muted); }
/* Needs a person: a rule on the left edge in the waiting tone (with the label, never alone) */
.tile--attention { box-shadow: inset 3px 0 0 var(--color-warning), var(--shadow-card); }
.tile--compact { padding: var(--space-4); }
.tile--loading .tile__label > .skeleton { width: 55%; }

/* ── Data table ── */
.table-wrap { position: relative; overflow: auto; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-foreground); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-default); }
.table th { position: relative; padding-top: var(--space-2); padding-bottom: var(--space-2); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.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 td { background: var(--color-page); }
.table tbody tr.is-selected td, .table tbody tr[aria-selected='true'] td { background: var(--color-primary-soft); }
.table .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.table--compact th, .table--compact td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.table--sticky th { position: sticky; top: 0; z-index: 1; }
.table--fixed { table-layout: fixed; }
.table__cell { display: flex; flex-direction: column; min-width: 0; }
.table__name { font-weight: var(--weight-medium); color: var(--color-foreground); }
.table__meta { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.table__actions { width: 1%; white-space: nowrap; text-align: right; }
/* A sortable head is a button; the arrow shows the order in use */
.table__sort { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table__sort:hover { color: var(--color-foreground); }
.table__sort .icon { width: 12px; height: 12px; }
.table th[aria-sort] { color: var(--color-foreground); }
/* A state that takes the place of the rows: one cell across the table */
.table__state { padding: var(--space-12) var(--space-6); text-align: center; }
.table__state-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 360px; margin: 0 auto; }
.table__state-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); }
.table__state-icon .icon { width: 20px; height: 20px; }
.table__state-icon--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.table__state-title { font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: var(--weight-semibold); }
.table__state-text { color: var(--color-muted); }
.table__state-inner .btn { margin-top: var(--space-2); }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-default); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }

/* ── Pagination ── */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.pagination__item:hover, .pagination__item.is-hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.pagination__item:focus-visible, .pagination__item.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.pagination__item[aria-current='page'] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground); font-weight: var(--weight-semibold); cursor: default; }
.pagination__item:disabled, .pagination__item[aria-disabled='true'] { color: var(--color-subtle); opacity: 0.6; cursor: not-allowed; background: transparent; }
.pagination__item--step { padding: 0 var(--space-3); border-color: var(--color-emphasis); }
.pagination__item--step:disabled, .pagination__item--step[aria-disabled='true'] { border-color: var(--color-default); }
.pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-control-sm); color: var(--color-subtle); }
.pagination__summary { padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pagination--spread { justify-content: space-between; }
@media (max-width: 640px) {
  .pagination__item { min-width: var(--size-touch); height: var(--size-touch); }
}

/* ── Tabs ── */
.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--color-default); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  height: var(--size-touch);
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color var(--duration-base) var(--ease-standard); }
.tab:hover, .tab.is-hover { color: var(--color-foreground); }
.tab:hover::after, .tab.is-hover::after { background: var(--color-emphasis); }
.tab[aria-current='page'] { color: var(--color-foreground); }
.tab[aria-current='page']::after { background: var(--color-primary); }
.tab:focus-visible, .tab.is-focus { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.tab:disabled, .tab[aria-disabled='true'] { color: var(--color-subtle); opacity: 0.6; cursor: not-allowed; }
.tab:disabled::after { background: transparent; }
.tab .icon { width: 16px; height: 16px; }
.tabs--stretch { gap: 0; }
.tabs--stretch .tab { flex: 1 1 0; justify-content: center; }

/* ── Breadcrumbs ── */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.crumbs li + li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 var(--space-1) 0 var(--space-1); border-top: 1.5px solid var(--color-subtle); border-right: 1.5px solid var(--color-subtle); transform: rotate(45deg); }
.crumbs a, .crumbs__fold { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-1); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); font: inherit; text-decoration: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.crumbs a:hover, .crumbs__fold:hover, .crumbs a.is-hover { color: var(--color-foreground); background: var(--color-surface-muted); }
.crumbs a:focus-visible, .crumbs__fold:focus-visible, .crumbs a.is-focus { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.crumbs [aria-current='page'] { padding: 2px var(--space-1); color: var(--color-foreground); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .icon { width: 14px; height: 14px; }
/* On a phone the path shrinks to one step up */
.crumbs--back a { padding-left: 0; }

/* ── Progress and meter ── */
.progress { --progress-fill: var(--color-primary); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); }
.progress__label { font-weight: var(--weight-medium); color: var(--color-foreground); }
.progress__value { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress__track { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-muted); box-shadow: inset 0 0 0 1px var(--color-default); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: calc(var(--value, 0) * 1%); border-radius: inherit; background: var(--progress-fill); transition: width var(--duration-slow) var(--ease-standard); }
.progress__note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.progress--sm .progress__track { height: 4px; }
.progress--lg .progress__track { height: 12px; }
.progress--success { --progress-fill: var(--color-success); }
.progress--warning { --progress-fill: var(--color-warning); }
.progress--danger { --progress-fill: var(--color-danger); }
.progress--danger .progress__value, .progress--danger .progress__note { color: var(--color-danger-text); }
.progress--warning .progress__value { color: var(--color-warning-text); }
/* Unknown length: a short bar travels the track */
.progress--indeterminate .progress__bar { width: 35%; animation: progress-travel var(--duration-loader) var(--ease-standard) infinite; }
@keyframes progress-travel { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
/* Slots: n of N, one segment each (photos, steps) */
.progress__segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); }
.progress__segment { height: 8px; border-radius: var(--radius-control); background: var(--color-surface-muted); box-shadow: inset 0 0 0 1px var(--color-default); }
.progress__segment.is-filled { background: var(--progress-fill); box-shadow: none; }
.progress--sm .progress__segment { height: 4px; }

/* ── Stepper ── */
.stepper { display: flex; align-items: center; }
.stepper__step { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.stepper__step:last-child { flex: none; }
.stepper__step:not(:last-child)::after { content: ''; flex: 1; min-width: var(--space-6); height: 2px; margin-right: var(--space-3); border-radius: var(--radius-full); background: var(--color-default); transition: background-color var(--duration-slow) var(--ease-standard); }
.stepper__step[data-state='done']:not(:last-child)::after { background: var(--color-primary); }
.stepper__marker {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-emphasis);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.stepper__marker .icon { width: 14px; height: 14px; stroke-width: 2; }
.stepper__text { display: flex; flex-direction: column; min-width: 0; }
.stepper__label { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); color: var(--color-muted); white-space: nowrap; }
.stepper__hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.stepper__step[data-state='done'] .stepper__marker { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground); }
.stepper__step[data-state='done'] .stepper__label { color: var(--color-foreground); }
.stepper__step[data-state='current'] .stepper__marker { border-color: var(--color-primary); border-width: 2px; background: var(--color-primary-soft); color: var(--color-primary-strong); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.stepper__step[data-state='current'] .stepper__label { color: var(--color-foreground); font-weight: var(--weight-semibold); }
.stepper__step[data-state='error'] .stepper__marker { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-text); }
.stepper__step[data-state='error'] .stepper__label { color: var(--color-danger-text); font-weight: var(--weight-semibold); }
.stepper__step[data-state='error'] .stepper__hint { color: var(--color-danger-text); }

/* Vertical: the connector runs down from each marker; room for a hint */
.stepper--vertical { flex-direction: column; align-items: stretch; }
.stepper--vertical .stepper__step { position: relative; flex: none; align-items: flex-start; padding-bottom: var(--space-6); }
.stepper--vertical .stepper__step:last-child { padding-bottom: 0; }
.stepper--vertical .stepper__step:not(:last-child)::after { position: absolute; left: 13px; top: calc(28px + var(--space-1)); bottom: var(--space-1); width: 2px; height: auto; min-width: 0; margin: 0; flex: none; }
.stepper--vertical .stepper__text { padding-top: 4px; }

/* Compact (a phone): the step in words, the path as segments */
.stepper-compact { display: flex; flex-direction: column; gap: var(--space-2); }
.stepper-compact__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); }
.stepper-compact__step { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.stepper-compact__name { font-weight: var(--weight-semibold); }

/* The showcase's own scaffolding for this group: a frame of a fixed width for narrow samples */
.dsp-narrow { max-width: 360px; width: 100%; }
.dsp-wide { width: 100%; }
.sc-state.dsp-wide { align-items: stretch; }
@media (max-width: 640px) {
  .stepper:not(.stepper--vertical) .stepper__label { display: none; }
  .stepper:not(.stepper--vertical) .stepper__step[data-state='current'] .stepper__label { display: block; }
}

/*
 * Components, group 5: the product's own, B — order timeline, reputation (stars and star input),
 * photo uploader, chat notice, and the reserve: countdown, currency selector, seller type.
 * Proposed: the product has no such files yet. Only tokens: no color, font, radius or duration is written here.
 */

/* ── Order timeline: proposed ── */
.timeline { --tl-marker: var(--space-6); display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline__step { position: relative; display: grid; grid-template-columns: var(--tl-marker) minmax(0, 1fr); column-gap: var(--space-4); padding-bottom: var(--space-5); }
.timeline__step:last-child { padding-bottom: 0; }
/* the line from this step's marker to the next one's */
.timeline__step::before,
.timeline__legline {
  content: '';
  position: absolute;
  left: calc(var(--tl-marker) / 2 - 1px);
  top: var(--tl-marker);
  bottom: 0;
  width: 2px;
  background: var(--color-default);
}
.timeline__step:last-child::before { display: none; }
.timeline__step.is-done::before { background: var(--color-primary); }
.timeline__marker {
  display: grid;
  place-items: center;
  width: var(--tl-marker);
  height: var(--tl-marker);
  border: 2px solid var(--color-emphasis);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  box-sizing: border-box;
}
.timeline__marker .icon { width: var(--space-3); height: var(--space-3); stroke-width: 2.25; }
.is-done > .timeline__marker { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-foreground); }
.is-current > .timeline__marker { border-color: var(--color-primary); box-shadow: 0 0 0 var(--space-1) var(--color-primary-soft); }
.is-current > .timeline__marker::after { content: ''; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-primary); }
.is-upcoming > .timeline__marker { border-color: var(--color-default); }
.is-exception > .timeline__marker,
.is-dispute > .timeline__marker { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning-text); }
.is-cancelled > .timeline__marker { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-text); }
.is-cancelled::before { display: none; }

.timeline__body { min-width: 0; padding-bottom: var(--space-1); }
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: var(--tl-marker); }
.timeline__title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); color: var(--color-foreground); }
.is-upcoming .timeline__title { color: var(--color-muted); font-weight: var(--weight-regular); }
.timeline__time { margin-left: auto; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.timeline__text { margin-top: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); max-width: var(--size-prose); }
.is-upcoming .timeline__text { color: var(--color-subtle); }
.timeline__panel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
.timeline__panel-title { color: var(--color-muted); }

/* A leg of a hub-inspection order: a label on the line */
.timeline__leg { position: relative; display: grid; grid-template-columns: var(--tl-marker) minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); }
.timeline__leg .t-label { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) var(--space-2); width: fit-content; border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.timeline__legline { top: 0; }
.timeline__leg.is-done .timeline__legline { background: var(--color-primary); }

/* Tracking of the leg: carrier, reference, last event, exception flag */
.timeline__track { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.timeline__track-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); }
.timeline__track-line:empty { display: none; }
.timeline__track-line .icon { color: var(--color-muted); }
.timeline__ref { color: var(--color-muted); }
.timeline__status { color: var(--color-foreground); }
.timeline__track--exception { border-color: var(--color-warning); background: var(--color-warning-soft); }
.timeline .badge .icon { width: var(--space-3); height: var(--space-3); }

/* Compact: a row of six, for an order's row */
@media (min-width: 640px) {
  .timeline--row { flex-direction: row; }
  .timeline--row .timeline__step { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); padding: 0 var(--space-2) 0 0; }
  .timeline--row .timeline__step::before { left: calc(var(--tl-marker) + var(--space-2)); right: var(--space-2); top: calc(var(--tl-marker) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .timeline--row .timeline__head { flex-direction: column; align-items: flex-start; min-height: 0; }
  .timeline--row .timeline__step { align-content: start; }
  .timeline--row .timeline__time { display: none; }
  .timeline--row .timeline__body { padding-bottom: 0; }
}

/* ── Reputation: proposed ── */
.rating__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rating { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.rating__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rating__stars { position: relative; display: inline-flex; flex: none; }
.rating__row { display: inline-flex; gap: var(--space-1); }
.rating__row--fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fill, 100%); overflow: hidden; }
.rating__star { width: var(--space-4); height: var(--space-4); flex: none; fill: none; stroke: var(--color-emphasis); stroke-width: 1; stroke-linejoin: round; }
.rating__row--fill .rating__star { fill: var(--color-accent); stroke: var(--color-accent); }
.rating__value { font-weight: var(--weight-semibold); }
.rating__count { color: var(--color-muted); }
.rating__none { color: var(--color-muted); }
.rating__note { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.rating__note .icon { color: var(--color-subtle); }
.rating--compact { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-1); }
.rating--compact .rating__stars { margin-right: var(--space-1); }
.rating__compact-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rating__sample { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); align-items: flex-start; }
.rating__sample .rating,
.rating__sample .rating__compact-row,
.rating__sample .rating-input { align-self: stretch; }
.rating__sample .t-label { color: var(--color-muted); }

/* Hidden: what stands where the reputation would be */
.rating-hidden { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--size-form); }
.rating-hidden__profile { display: flex; align-items: center; gap: var(--space-3); }
.rating-hidden__profile p { margin-bottom: var(--space-1); }
.rating-hidden__avatar,
.seller-type__avatar,
.chat-notice__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-control);
  height: var(--size-control);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
}
.rating-hidden__slot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* The 1–5 star input: radios in a row-reverse group, so a star and those before it fill together */
.rating-input { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.rating-input__legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); }
.rating-input__stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; width: max-content; gap: var(--space-1); }
.rating-input__radio { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.rating-input__star { display: grid; place-items: center; width: var(--size-touch); height: var(--size-touch); border-radius: var(--radius-control); color: var(--color-emphasis); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
.rating-input__star svg { width: var(--space-8); height: var(--space-8); fill: transparent; stroke: currentColor; stroke-width: 0.9; stroke-linejoin: round; transition: fill var(--duration-fast) var(--ease-standard); }
.rating-input__star:hover,
.rating-input__star:hover ~ .rating-input__star,
.rating-input__radio:checked ~ .rating-input__star { color: var(--color-primary); }
.rating-input__star:hover svg,
.rating-input__star:hover ~ .rating-input__star svg,
.rating-input__radio:checked ~ .rating-input__star svg { fill: currentColor; }
.rating-input__radio:focus-visible + .rating-input__star { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.rating-input--sent .rating-input__star { cursor: default; color: var(--color-emphasis); }
.rating-input--sent .rating-input__radio:checked ~ .rating-input__star { color: var(--color-muted); }
.rating-input--sent .rating-input__star:hover { color: var(--color-emphasis); }
.rating-input--sent .rating-input__star:hover svg { fill: transparent; }
.rating-input--sent .rating-input__radio:checked ~ .rating-input__star:hover { color: var(--color-muted); }
.rating-input--sent .rating-input__radio:checked ~ .rating-input__star:hover svg { fill: currentColor; }
.rating-input__sent { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }

/* ── Photo uploader: proposed ── */
.uploader { display: flex; flex-direction: column; gap: var(--space-3); }
.uploader__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.uploader__count { font-size: var(--text-sm); color: var(--color-muted); }
.uploader__sample { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.uploader__sample .t-label { color: var(--color-muted); }
.uploader__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.uploader__grid--wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.uploader__tile { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); color: var(--color-subtle); transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.uploader__tile:nth-child(3n+2) { background: var(--color-primary-soft); }
.uploader__tile:nth-child(3n) { background: var(--color-accent-soft); }
.uploader__ph { position: absolute; top: 0; left: 0; right: 0; margin: var(--space-2) auto 0; width: 60%; height: calc(100% - var(--space-12)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.uploader__cover { position: absolute; top: var(--space-2); left: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-primary-foreground); font-size: var(--text-2xs); line-height: 1; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.uploader__index { position: absolute; top: var(--space-2); right: var(--space-2); min-width: var(--space-5); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-2xs); line-height: var(--leading-xs); text-align: center; }
.uploader__actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: var(--space-1); padding: var(--space-1); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.uploader__btn { display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-foreground); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.uploader__btn:hover { background: var(--color-surface-muted); }
.uploader__btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.uploader__btn[disabled] { color: var(--color-subtle); opacity: 0.5; cursor: not-allowed; background: transparent; }
.uploader__grid--wide .uploader__btn { width: var(--size-touch); }
.uploader__state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-12); text-align: center; }
.uploader__state-label { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--color-foreground); }
.uploader__file { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); }
.uploader__progress { width: 100%; height: var(--space-1); border-radius: var(--radius-full); background: var(--color-default); overflow: hidden; }
.uploader__progress > span { display: block; width: var(--value); height: 100%; background: var(--color-primary); }
.uploader__tile.uploader__tile--busy { background: var(--color-surface); }
.uploader__tile.uploader__tile--error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.uploader__tile--error .uploader__state .icon { color: var(--color-danger-text); }
.uploader__tile--error .uploader__state-label { color: var(--color-danger-text); }
.uploader__tile--error .uploader__actions { background: var(--color-danger-soft); border-top-color: transparent; }
.uploader__tile.uploader__tile--add { border-style: dashed; border-color: var(--color-emphasis); background: transparent; }
.uploader__add { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border: 0; background: transparent; color: var(--color-foreground); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.uploader__add:hover { background: var(--color-surface-muted); }
.uploader__add:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -4px; }
.uploader__add[disabled] { opacity: 0.5; cursor: not-allowed; }
.uploader__tile.uploader__tile--slot { border: 2px dashed var(--color-primary); background: var(--color-primary-soft); }
.uploader__tile.is-dragging { border-color: var(--color-primary); box-shadow: var(--shadow-raised); transform: scale(1.03); z-index: 1; }
.uploader__drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); text-align: center; background: var(--color-surface); }
.uploader__drop p { max-width: 36ch; }
.uploader__drop .btn { margin-top: var(--space-2); }
.uploader__drop-icon { display: grid; place-items: center; width: var(--size-control-lg); height: var(--size-control-lg); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.uploader__drop.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); }
.uploader__msg { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); }
.uploader__msg .icon { margin-top: 0; }
.uploader__msg--danger { color: var(--color-danger-text); }
.uploader__msg--info { color: var(--color-muted); }
.uploader__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ── Chat notice: proposed ── */
.chat-notice__sample { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.chat-notice__sample .t-label { color: var(--color-muted); }
.chat-notice__thread { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.chat-notice__msg { align-self: flex-end; max-width: 88%; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-card); background: var(--color-primary-soft); color: var(--color-primary-strong); font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
.chat-notice__msg--blocked { border: 1px dashed var(--color-emphasis); background: var(--color-surface); color: var(--color-muted); }
.chat-notice__msg--held { border-color: var(--color-default); background: var(--color-surface); color: var(--color-foreground); }
.chat-notice__msg--in { align-self: flex-start; border-color: var(--color-default); background: var(--color-surface); color: var(--color-foreground); }
.chat-notice__meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.chat-notice__msg--blocked .chat-notice__meta { color: var(--color-danger-text); }
.chat-notice__msg--held .chat-notice__meta { color: var(--color-info-text); }
.chat-notice__under { align-self: flex-start; }
.chat-notice__link { padding: 0; border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.chat-notice__link:hover { color: var(--color-foreground); }

.chat-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-foreground); }
.chat-notice__icon { display: grid; place-items: center; flex: none; height: var(--leading-sm); }
.chat-notice__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.chat-notice__title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.chat-notice__text { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.chat-notice__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chat-notice--blocked { border-color: var(--color-warning); background: var(--color-warning-soft); }
.chat-notice--blocked .chat-notice__icon,
.chat-notice--blocked .chat-notice__title { color: var(--color-warning-text); }
.chat-notice--review { background: var(--color-info-soft); }
.chat-notice--review .chat-notice__icon,
.chat-notice--review .chat-notice__title { color: var(--color-info-text); }
.chat-notice--success { background: var(--color-success-soft); }
.chat-notice--success .chat-notice__icon,
.chat-notice--success .chat-notice__title { color: var(--color-success-text); }
.chat-notice--neutral { border-color: var(--color-default); }
.chat-notice--neutral .chat-notice__icon { color: var(--color-muted); }
.chat-notice__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-default); }
.chat-notice__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.chat-notice__bar-actions { display: flex; gap: var(--space-1); }

/* ── Countdown: proposed (reserve) ── */
.countdown { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); white-space: nowrap; }
.countdown .icon { color: var(--color-muted); }
.countdown__label { color: var(--color-muted); }
.countdown__time { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.countdown--urgent { background: var(--color-warning-soft); color: var(--color-warning-text); }
.countdown--urgent .icon,
.countdown--urgent .countdown__label { color: var(--color-warning-text); }
.countdown--expired { background: var(--color-danger-soft); color: var(--color-danger-text); }
.countdown--expired .icon,
.countdown--expired .countdown__label { color: var(--color-danger-text); }
.countdown__sample { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
.countdown__row { display: flex; flex-direction: column; gap: var(--space-2); }
.countdown__row .t-label { color: var(--color-muted); }
.countdown__items { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.countdown-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); }
.countdown-card__head { display: flex; align-items: center; gap: var(--space-2); }
.countdown-card__head .icon { color: var(--color-muted); }
.countdown-card__time { font-size: var(--text-figure); line-height: var(--leading-figure); letter-spacing: var(--tracking-figure); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.countdown__bar { align-self: stretch; height: var(--space-1); border-radius: var(--radius-full); background: var(--color-default); overflow: hidden; }
.countdown__bar > span { display: block; width: var(--left); height: 100%; background: var(--color-primary); transition: width var(--duration-slow) var(--ease-standard); }
.countdown-card--urgent .countdown-card__head .icon,
.countdown-card--urgent .countdown-card__time { color: var(--color-warning-text); }
.countdown-card--urgent .countdown__bar > span { background: var(--color-warning); }
.countdown-card--expired .countdown-card__head .icon,
.countdown-card--expired .countdown-card__time { color: var(--color-danger-text); }

/* ── Currency selector: proposed (reserve) ── */
.currency__sample { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.currency__sample .t-label { color: var(--color-muted); }
.currency__seg { display: inline-flex; width: max-content; max-width: 100%; border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); overflow: hidden; background: var(--color-surface); }
.currency__seg-item { height: var(--size-control); padding: 0 var(--space-4); border: 0; border-right: 1px solid var(--color-emphasis); background: transparent; color: var(--color-foreground); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.currency__seg-item:last-child { border-right: 0; }
.currency__seg-item:hover { background: var(--color-surface-muted); }
.currency__seg-item[aria-checked='true'] { background: var(--color-primary); color: var(--color-primary-foreground); }
.currency__seg-item:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -3px; }
.currency__menu-host { position: relative; display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.currency__trigger { display: inline-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); color: var(--color-foreground); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.currency__trigger:hover { background: var(--color-surface-muted); }
.currency__trigger:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.currency__code { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.currency__sym { color: var(--color-muted); }
.currency__menu { min-width: 14rem; margin: 0; padding: var(--space-1); list-style: none; border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-raised); }
.currency__option { display: grid; grid-template-columns: 3rem minmax(0, 1fr) var(--space-4); align-items: center; gap: var(--space-2); height: var(--size-control); padding: 0 var(--space-3); border-radius: var(--radius-control); font-size: var(--text-sm); cursor: pointer; }
.currency__option:hover { background: var(--color-surface-muted); }
.currency__option.is-selected { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.currency__name { color: var(--color-muted); }
.currency__option.is-selected .currency__name { color: var(--color-primary-strong); }
.currency__check { display: grid; place-items: center; }
.currency__price { display: flex; flex-direction: column; gap: var(--space-2); }
.currency__amount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.currency__approx { text-transform: none; }
.currency__orig { display: flex; align-items: baseline; gap: var(--space-2); }
.currency__checkout { display: flex; flex-direction: column; gap: var(--space-3); }
.currency__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.currency__fieldset legend { padding: 0; margin-bottom: var(--space-2); }
.currency__charges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.currency__charge { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-surface); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.currency__charge:hover { background: var(--color-surface-muted); }
.currency__charge.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.currency__charge:has(:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.currency__charge-amount { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.currency__charged { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-primary-strong); }
.currency__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-default); }

/* ── Seller type: proposed (reserve) ── */
.seller-type { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--space-6); padding: 0 var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-control); font-size: var(--text-xs); line-height: 1; font-weight: var(--weight-medium); white-space: nowrap; }
.seller-type--individual { background: var(--color-surface); color: var(--color-muted); border-color: var(--color-emphasis); }
.seller-type--business { background: var(--color-primary-soft); color: var(--color-primary-strong); border-color: transparent; }
.seller-type__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.seller-type__row--stack { flex-direction: column; align-items: stretch; gap: var(--space-4); }
.seller-type__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.seller-type__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.seller-type__head { display: flex; align-items: center; gap: var(--space-3); }
.seller-type__who { flex: 1; min-width: 0; }
.seller-type__company { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-default); }
.seller-type__company dt { color: var(--color-muted); margin-bottom: var(--space-1); }
.seller-type__company dd { margin: 0; }
.seller-type__card .seller-type__note { margin-top: auto; }

/* Email templates (emails/index.html, tools/genEmails.mjs): the one letter layout, the facts beside
   each letter, the mail client's changes. Every value is a token of tokens.css. To merge into
   assets/site.css under "Email frame". */

/* ── The page: groups of letters ── */

.em-group .sc-section__head {
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-3);
}

.em-letters {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* A letter's block sits under a group heading, so its own title steps down from the page-title size */
.em-letters .sc-block > .sc-hero > h2 {
  font-size: var(--text-section-title);
  line-height: var(--leading-section-title);
}

.em-variant {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.em-variant + .em-variant {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-default);
}

/* ── A letter and its facts ── */

.em-case,
.em-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: var(--space-8);
  align-items: start;
}

.em-anatomy {
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
}

.em-case .mail,
.em-anatomy .mail {
  margin: 0;
  width: 100%;
}

@media (max-width: 1100px) {
  .em-case,
  .em-anatomy {
    grid-template-columns: minmax(0, 1fr);
  }
}

.em-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-default);
  border-bottom: 1px solid var(--color-default);
}

.em-spec__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.em-spec dt {
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.em-spec dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.em-spec__subject {
  font-weight: var(--weight-semibold);
}

.em-spec__addr {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
  color: var(--color-muted);
}

/* ── The letter itself: a 600 px column on the surface color ── */

.em-letter {
  background: var(--color-surface);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

.em-head,
.em-pic,
.em-heading,
.em-p,
.em-cta,
.em-part,
.em-why,
.em-note,
.em-links,
.em-company {
  position: relative;
}

.em-head {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-10);
  border-bottom: 1px solid var(--color-default);
}

/* The mark in the primary color on the surface, its knockouts in the surface; the name beside it, a quarter of the mark apart */
.em-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  --lg-ground: var(--color-surface);
}

.em-lockup .lg-wordmark {
  color: var(--color-foreground);
  font-size: var(--text-sm);
}

.em-pic {
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--space-10) 0;
}

.em-pic .ill {
  --ill-size: 280px;
}

.em-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-10) var(--space-8);
}

.em-copy--table {
  padding-top: 0;
}

.em-heading {
  margin: 0 0 var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-page-title);
}

/* A short brass rule under the heading: decoration only */
.em-heading::after {
  content: '';
  display: block;
  width: var(--space-10);
  height: 2px;
  margin: var(--space-3) auto 0;
  background: var(--color-accent);
}

.em-p {
  margin: 0;
}

.em-p:first-of-type {
  font-weight: var(--weight-medium);
}

.em-cta {
  margin: var(--space-2) 0 0;
  text-align: center;
}

.em-button {
  height: var(--size-control-lg);
  padding: 0 var(--space-8);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.em-fallback {
  margin: 0;
  text-align: center;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-muted);
}

.em-url {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  color: var(--color-foreground);
  word-break: break-all;
}

.em-details {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.em-details th,
.em-details td {
  padding: var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-default);
}

.em-details tr:last-child th,
.em-details tr:last-child td {
  border-bottom: 1px solid var(--color-default);
}

.em-details th {
  width: 40%;
  padding-right: var(--space-4);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}

.em-details td {
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.em-details td .badge {
  font-weight: var(--weight-medium);
}

.em-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-10);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.em-foot p {
  margin: 0;
}

.em-links {
  display: flex;
  gap: var(--space-3);
}

.em-links a {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

/* ── The numbered parts of the Template block ── */

.em-pin {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--space-8));
  display: grid;
  place-items: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: 1;
}

.em-head > .em-pin,
.em-pic > .em-pin {
  left: var(--space-2);
}

.em-head > .em-pin {
  top: 50%;
  margin-top: calc(var(--space-5) / -2);
}

.em-pic > .em-pin {
  top: var(--space-8);
}

.em-heading > .em-pin {
  top: var(--space-2);
}

.em-cta > .em-pin {
  top: var(--space-3);
}

.em-pin--static {
  position: static;
  flex: none;
}

.em-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.em-legend__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-legend__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
}

.em-legend__item p {
  margin: 0;
}

.em-legend__item p + p {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.em-legend__item .em-pin {
  margin-top: var(--space-1);
}

.em-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.em-rule {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.em-rule p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* ── What a mail client changes: the letter cut short and at half size, three ways ── */

.em-clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.em-client {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.em-client p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.em-mini {
  zoom: 0.5;
  width: 600px;
  pointer-events: none;
  user-select: none;
}

.em-mini .mail {
  margin: 0;
}

/* Dark: the way a client that inverts a letter shows it */
.em-mini--dark .mail {
  filter: invert(1) hue-rotate(180deg);
}

/* Images off: the mark and the picture are blocked, their room stays */
.em-mini--images .lg-mark,
.em-mini--images .em-pic .ill {
  visibility: hidden;
}

.em-mini--images .em-pic {
  margin: var(--space-6) var(--space-10) 0;
  padding: var(--space-8) 0 0;
  border: 1px dashed var(--color-emphasis);
}

/* A phone: one column at the screen's width, the button across the row */
.em-mini--phone {
  zoom: 0.8;
  width: 375px;
}

.em-mini--phone .mail {
  width: 100%;
}

.em-mini--phone .em-head,
.em-mini--phone .em-pic,
.em-mini--phone .em-copy {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.em-mini--phone .em-heading {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}

.em-mini--phone .em-button {
  width: 100%;
}

.em-mini--phone .em-pic .ill {
  --ill-size: 240px;
}

/*
 * Components, group 1 — Actions and inputs: button, text field, select, checkbox / radio / switch,
 * date picker, file upload. Proposed: the product has no component styles yet.
 *
 * MERGE: the first two blocks (Button, Spinner) REPLACE the starter blocks "Button — starter" and
 * "Spinner — starter" of components.css, whole (the starter rule `.btn.is-loading .spinner` must go:
 * the spinner takes the button's own text color here). The rest is added. Source of the look: the
 * emphasis border (3:1) for every control, the ring for focus, 2 px radius, calm motion.
 */

/* ── Focus: a ring of 2 px, offset 2 px; `.is-focus` shows it on a static sample ── */
.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* ── Button — replaces the starter ──
   A variant sets three custom properties (fill, text, border); hover only changes the fill. */
.btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-surface-muted);
  --btn-fg: var(--color-foreground);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover, .btn.is-hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.btn .icon { width: 16px; height: 16px; }

.btn--primary { --btn-bg: var(--color-primary); --btn-bg-hover: var(--color-primary-hover); --btn-fg: var(--color-primary-foreground); }
.btn--secondary { --btn-bg: var(--color-surface); --btn-bg-hover: var(--color-surface-muted); --btn-border: var(--color-emphasis); }
.btn--ghost { --btn-bg: transparent; --btn-bg-hover: var(--color-surface-muted); }
.btn--danger { --btn-bg: var(--color-danger); --btn-bg-hover: var(--color-danger-hover); --btn-fg: var(--color-danger-foreground); }

.btn--sm { height: var(--size-control-sm); padding: 0 var(--space-3); }
.btn--lg { height: var(--size-control-lg); padding: 0 var(--space-8); font-size: var(--text-base); }
.btn--lg .icon { width: 18px; height: 18px; }
.btn--icon { width: var(--size-control); padding: 0; }
.btn--icon.btn--sm { width: var(--size-control-sm); }
.btn--icon.btn--lg { width: var(--size-control-lg); }
.btn--block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Loading: the label and icons stay in the layout (the width does not move) but are hidden;
   the spinner takes their place in the button's own text color */
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading > :not(.spinner) { visibility: hidden; }
.btn > .spinner { display: none; }
.btn.is-loading > .spinner { display: block; position: absolute; inset: 0; margin: auto; }

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

/* ── Field: the label, the bordered control, the hint or the error — proposed ──
   The border is the emphasis color (3:1 against surface and page, WCAG 1.4.11); the control draws
   the focus ring when its input is focused by keyboard. Used by text field, select, date picker. */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { display: block; padding: 0; color: var(--color-foreground); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); }
.field__optional { color: var(--color-muted); font-weight: var(--weight-regular); }
.field__hint { color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.field__error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-danger-text); font-size: var(--text-small); line-height: var(--leading-small); }
.field__error .icon { width: 14px; height: 14px; margin-top: 1px; }

.field__control {
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--size-control);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.field__control:hover, .field__control.is-hover { border-color: var(--color-foreground); }
.field__control:has(:focus-visible), .field__control:focus-visible, .field__control.is-focus { border-color: var(--color-ring); outline: 2px solid var(--color-ring); outline-offset: 2px; }

.field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  outline: 0;
}
.field__input::placeholder { color: var(--color-subtle); opacity: 1; }
.field__input--num { font-variant-numeric: tabular-nums lining-nums; }
.field__icon { flex: none; margin-left: var(--space-3); color: var(--color-muted); }
.field__icon + .field__input { padding-left: var(--space-2); }
.field__icon--end { display: inline-flex; margin: 0 var(--space-3) 0 0; }
.field__input[type='search']::-webkit-search-cancel-button { display: none; }

/* An affix is a segment of the control with its own ground: a currency, a unit, a label */
.field__affix {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  flex: none;
  padding: 0 var(--space-3);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}
.field__affix--start { border-right: 1px solid var(--color-default); border-radius: calc(var(--radius-control) - 1px) 0 0 calc(var(--radius-control) - 1px); }

/* An action inside the border: Show / Hide, the calendar */
.field__action {
  flex: none;
  align-self: stretch;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.field__action:hover { color: var(--color-primary-hover); background: var(--color-surface-muted); }
.field__action:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.field__action--icon { display: inline-flex; align-items: center; color: var(--color-muted); }
.field__action--icon:hover { color: var(--color-foreground); }
.field__action:disabled { cursor: not-allowed; color: var(--color-subtle); background: transparent; }

.field--sm .field__control { height: var(--size-control-sm); }
.field--lg .field__control { height: var(--size-control-lg); }
.field--lg .field__input { font-size: var(--text-base); }

.field__control--area { align-items: stretch; height: auto; }
.field__input--area { min-height: 96px; padding: var(--space-3); line-height: var(--leading-sm); resize: vertical; }

.field--error .field__control { border-color: var(--color-danger); }
.field--error .field__control:has(:focus-visible), .field--error .field__control.is-focus { border-color: var(--color-danger); }
.field--disabled .field__label { color: var(--color-muted); }
.field--disabled .field__control, .field__control:has(> :disabled) { border-color: var(--color-default); background: var(--color-surface-muted); color: var(--color-subtle); cursor: not-allowed; }
.field--disabled .field__input { cursor: not-allowed; }
.field--readonly .field__control { border-color: var(--color-default); background: var(--color-surface-muted); }
.field--readonly .field__control:hover { border-color: var(--color-default); }
.field--readonly .field__icon { color: var(--color-subtle); }

/* ── Select: the field's control with a native select inside, a chevron, the list that opens ── */
.select__control { position: relative; }
.select__chevron { position: absolute; right: var(--space-3); top: 50%; margin-top: -8px; color: var(--color-muted); pointer-events: none; transition: transform var(--duration-fast) var(--ease-standard); }
.select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__value--placeholder { color: var(--color-subtle); }
.select__box { position: relative; }
.select--compact { display: inline-flex; }
.select--compact .field__control { min-width: 216px; }
.select--compact .field__affix { font-weight: var(--weight-medium); letter-spacing: 0; font-size: var(--text-xs); }

/* Keyboard keys in the tables of the select and the date picker */
.kbd {
  display: inline-block;
  min-width: 24px;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  text-align: center;
}

/* ── Checkbox, radio, switch — proposed ── */
.check, .radio { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--color-foreground); }
.check__input, .radio__input { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: inherit; }
.check__box, .radio__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-emphasis);
  background: var(--color-surface);
  color: var(--color-primary-foreground);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.check__box { position: relative; border-radius: var(--radius-control); }
.check.is-focus, .radio.is-focus { outline: 0; }
.radio__dot { border-radius: var(--radius-full); }
.check__box .icon { width: 14px; height: 14px; stroke-width: 2.25; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.check__input:checked + .check__box { border-color: var(--color-primary); background: var(--color-primary); }
.check__input:checked + .check__box .icon { opacity: 1; }
.check__input:indeterminate + .check__box { border-color: var(--color-primary); background: var(--color-primary); }
.check__input:indeterminate + .check__box .icon { opacity: 0; }
.check__input:indeterminate + .check__box::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: var(--radius-full); background: currentColor; }
.radio__input:checked + .radio__dot { border-color: var(--color-primary); }
.radio__input:checked + .radio__dot::after { content: ''; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-primary); }

.check:hover .check__input:not(:checked):not(:indeterminate):not(:disabled) + .check__box,
.check.is-hover .check__input:not(:checked):not(:indeterminate) + .check__box,
.radio:hover .radio__input:not(:checked):not(:disabled) + .radio__dot,
.radio.is-hover .radio__input:not(:checked) + .radio__dot { border-color: var(--color-foreground); }
.check:hover .check__input:checked:not(:disabled) + .check__box,
.check.is-hover .check__input:checked + .check__box { background: var(--color-primary-hover); }

.check__input:focus-visible + .check__box, .check.is-focus .check__box,
.radio__input:focus-visible + .radio__dot, .radio.is-focus .radio__dot { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.check__input:disabled + .check__box, .radio__input:disabled + .radio__dot { border-color: var(--color-default); background: var(--color-surface-muted); }
.check__input:disabled:checked + .check__box { border-color: var(--color-emphasis); background: var(--color-emphasis); color: var(--color-surface); }
.radio__input:disabled:checked + .radio__dot { border-color: var(--color-emphasis); }
.radio__input:disabled:checked + .radio__dot::after { background: var(--color-emphasis); }
.check:has(:disabled), .radio:has(:disabled) { cursor: not-allowed; }
.check:has(:disabled) .check__label, .radio:has(:disabled) .check__label { color: var(--color-subtle); }

.check--error .check__box { border-color: var(--color-danger); }

.check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check__label { font-size: var(--text-sm); line-height: var(--leading-sm); }
.check__desc { color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }

.choice-group { gap: var(--space-3); }
.choice-group > .field__label { margin-bottom: var(--space-1); }
.choice-group__nested { display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-8); }

/* A radio as a card: a choice that carries a price or an explanation */
.radio--card {
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.radio--card:hover { border-color: var(--color-emphasis); }
.radio--card:has(:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 1px var(--color-primary); }
.radio--card:has(:disabled) { background: var(--color-surface-muted); }
.radio--card .check__text { flex: 1; }
.radio__aside { flex: none; margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* The matrix of states: the controls are centered in their cells */
.table--controls td { vertical-align: middle; }
.table--controls td .check, .table--controls td .radio { display: inline-flex; }

/* Switch: a button with role="switch"; the thumb slides 16 px; the track is the emphasis border when off */
.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-muted);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.switch:hover, .switch.is-hover { border-color: var(--color-foreground); }
.switch[aria-checked='true'] { border-color: var(--color-primary); background: var(--color-primary); }
.switch[aria-checked='true'] .switch__thumb { transform: translateX(16px); background: var(--color-primary-foreground); }
.switch[aria-checked='true']:hover, .switch[aria-checked='true'].is-hover { background: var(--color-primary-hover); }
.switch:focus-visible, .switch.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.switch:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.switch-list { display: flex; flex-direction: column; max-width: var(--size-form); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.switch-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); }
.switch-field + .switch-field { border-top: 1px solid var(--color-default); }
.switch-field__control { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.switch__state { min-width: 32px; text-align: right; }

/* ── Date picker — proposed ──
   The panel is a card of the raised level; a day is a 40 px target (36 px button, 2 px gap for the ring) */
.datepicker { position: relative; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.datepicker > .field { width: 100%; max-width: var(--size-form); }
.datepicker.w-full > .field { max-width: none; }
.datepicker__panel {
  width: calc(7 * var(--size-control) + 2 * var(--space-4));
  max-width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.datepicker__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.datepicker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.datepicker__grid th { height: var(--size-control-sm); padding: 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); text-align: center; }
.datepicker__cell { height: var(--size-control); padding: 2px; text-align: center; }
.datepicker__day {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.datepicker__day:hover, .datepicker__day.is-hover { background: var(--color-surface-muted); }
.datepicker__day.is-outside { color: var(--color-subtle); }
.datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--color-emphasis); font-weight: var(--weight-semibold); }
.datepicker__day.is-selected { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: var(--weight-semibold); box-shadow: none; }
.datepicker__day.is-selected:hover { background: var(--color-primary-hover); }
.datepicker__day:focus-visible, .datepicker__day.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; position: relative; }
.datepicker__day:disabled { color: var(--color-subtle); opacity: 0.55; cursor: not-allowed; background: transparent; text-decoration: line-through; }
/* A range reads as one band: the days between are tinted across their whole cell; the ends are half bands */
.datepicker__cell.is-range { background: var(--color-primary-soft); }
.datepicker__cell.is-range .datepicker__day:not(.is-selected) { color: var(--color-primary-strong); }
.datepicker__cell.is-range-start { background: linear-gradient(to right, transparent 50%, var(--color-primary-soft) 50%); }
.datepicker__cell.is-range-end { background: linear-gradient(to left, transparent 50%, var(--color-primary-soft) 50%); }
.datepicker__foot { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-default); }

/* ── File upload — proposed ── */
.upload { display: flex; flex-direction: column; gap: var(--space-3); }
.upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.upload__zone:hover, .upload__zone.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); }
.upload__zone.is-over { border-style: solid; }
.upload__zone.is-disabled { border-color: var(--color-default); background: var(--color-surface-muted); color: var(--color-subtle); }
.upload__icon { display: grid; place-items: center; width: var(--size-control); height: var(--size-control); margin-bottom: var(--space-1); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.upload__zone.is-disabled .upload__icon { background: var(--color-default); color: var(--color-muted); }
.upload__title { color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.upload__zone.is-disabled .upload__title { color: var(--color-muted); }
.upload__hint { max-width: 36ch; color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.upload__zone .btn { margin-top: var(--space-2); }
.upload__zone:hover .btn:not([aria-disabled='true']) { --btn-bg: var(--color-surface); }
.upload__zone:has(.sr-only:focus-visible) .btn { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.upload__list { display: flex; flex-direction: column; gap: var(--space-2); }
.upload__file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.upload__file.is-error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.upload__thumb { display: grid; place-items: center; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); }
.upload__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.upload__name { overflow: hidden; color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.upload__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.upload__line .icon { width: 14px; height: 14px; }
.upload__size::after { content: '·'; margin-left: var(--space-2); }
.upload__status--error { color: var(--color-danger-text); }
.upload__line > .icon { color: var(--color-danger-text); }
.upload__actions { display: flex; align-items: center; gap: var(--space-1); }
.upload__state { color: var(--color-success-text); }
.upload__file.is-error .upload__state { color: var(--color-danger-text); }
.upload__bar { display: block; height: 4px; border-radius: var(--radius-full); background: var(--color-default); overflow: hidden; }
.upload__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--duration-slow) var(--ease-standard); }
.upload--compact { gap: var(--space-2); }
.upload__row { display: flex; align-items: center; gap: var(--space-3); }

/* A sample that fills its cell */
.w-full { width: 100%; }

.sc-state > .field, .sc-state > .upload, .sc-state > .datepicker { align-self: stretch; }
.upload__zone.is-over .upload__icon { background: var(--color-surface); }

/* ── Loader: the picked mark, the Armillary, in motion (design/loaders.html, written by
   tools/genLoaders.mjs) — replaces the starter Loader block.
   Every loader is the mark's own drawing (tools/parts/logo/emblems.mjs), its parts grouped:
     <svg class="ld ld--md ld--<id>"><g transform="translate(32 32) rotate(-28)">
       sphere ( axis, rings ( equator, zodiac ) ) · meridian · graduations · pivot
     </g></svg>
   and ld--<id> says which parts move. The parts are drawn about the mark's centre — the origin of
   their frame — so they turn and scale about 0 0. The meridian never moves: it is the fixed measure
   the rest turns against. Sizes: --sm 16 (controls, rows) and --md 32 (panels) draw the simplified
   drawing, --lg 64 (long waits, the start) the detailed one. Every animation sits under
   prefers-reduced-motion: no-preference, so with reduced motion a loader is the still, whole mark. ── */
.ld { display: inline-block; flex: none; width: 32px; height: 32px; color: var(--color-primary); overflow: visible; vertical-align: middle; }
.ld--sm { width: 16px; height: 16px; }
.ld--md { width: 32px; height: 32px; }
.ld--lg { width: 64px; height: 64px; }
.btn .ld { color: currentColor; }
.ld__part { transform-box: view-box; transform-origin: 0 0; }

/* Measure, the determinate loader: the meridian fills clockwise from the axis's north pole over a faint
   track. The app sets one value on the svg: style="--ld-progress: 0.3" (0–1). */
.ld__track { opacity: 0.2; }
.ld__fill { stroke-dasharray: 1 1; stroke-dashoffset: calc((1 - var(--ld-progress, 0)) * 1px); }

/* Words that stand in for the motion: read by screen readers always, shown only with reduced motion */
.ld-still { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ld-still { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Sweep — controls, 16 px: the axis and its rings turn half a round inside the meridian and settle
     (the rings stay square to their axis, so the small drawing never reads as a "no entry" sign) */
  .ld--sweep .ld__part--sphere { animation: ld-half-turn var(--duration-loader) var(--ease-standard) infinite; }

  /* Orbit — panels: the equator, then the zodiac band, tumble over their line of nodes */
  .ld--orbit .ld__part--equator,
  .ld--orbit .ld__part--zodiac { animation: ld-tumble calc(var(--duration-loader) * 2) var(--ease-standard) infinite; }
  .ld--orbit .ld__part--zodiac { animation-delay: calc(var(--duration-loader) * -0.5); }

  /* Precession — long waits: the axis and its rings lean slowly to the mirrored tilt and back */
  .ld--precess .ld__part--sphere { animation: ld-precess calc(var(--duration-loader) * 4) var(--ease-standard) infinite; }

  /* Assembly — the start: the axis and the rings draw in, the meridian sets last, the mark holds and
     fades to begin again */
  .ld--assemble { --ld-cycle: calc(var(--duration-loader) * 2); animation: ld-gather var(--ld-cycle) var(--ease-standard) infinite; }
  .ld--assemble .ld__part--axis path,
  .ld--assemble .ld__part--equator :is(path, ellipse),
  .ld--assemble .ld__part--zodiac path:not([stroke-dasharray]) { stroke-dasharray: 1 2; }
  .ld--assemble .ld__part--axis path { animation: ld-draw-axis var(--ld-cycle) var(--ease-standard) infinite; }
  .ld--assemble .ld__part--equator :is(path, ellipse) { animation: ld-draw-equator var(--ld-cycle) var(--ease-standard) infinite; }
  .ld--assemble .ld__part--equator.ld__part--back path { animation-name: ld-draw-equator-back; }
  .ld--assemble .ld__part--equator.ld__part--front path { animation-name: ld-draw-equator-front; }
  .ld--assemble .ld__part--zodiac.ld__part--back path:not([stroke-dasharray]) { animation: ld-draw-zodiac-back var(--ld-cycle) var(--ease-standard) infinite; }
  .ld--assemble .ld__part--zodiac.ld__part--front path:not([stroke-dasharray]) { animation: ld-draw-zodiac-front var(--ld-cycle) var(--ease-standard) infinite; }
  .ld--assemble .ld__part--meridian { animation: ld-set var(--ld-cycle) var(--ease-enter) infinite; }
  .ld--assemble .ld__part--axis circle,
  .ld--assemble .ld__part--zodiac path[stroke-dasharray],
  .ld--assemble .ld__part--graduations,
  .ld--assemble .ld__part--pivot { animation: ld-late var(--ld-cycle) var(--ease-standard) infinite; }

  /* Measure glides to each new value */
  .ld__fill { transition: stroke-dashoffset var(--duration-slow) var(--ease-standard); }
}

@keyframes ld-half-turn { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes ld-tumble { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
@keyframes ld-precess { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(56deg); } }
@keyframes ld-draw-axis { 0% { stroke-dashoffset: 1.5; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-draw-equator { 0%, 8% { stroke-dashoffset: 1.5; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-draw-equator-back { 0%, 8% { stroke-dashoffset: 1.5; } 28%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-draw-equator-front { 0%, 20% { stroke-dashoffset: 1.5; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-draw-zodiac-back { 0%, 18% { stroke-dashoffset: 1.5; } 38%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-draw-zodiac-front { 0%, 30% { stroke-dashoffset: 1.5; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-set { 0%, 44% { opacity: 0; transform: scale(1.08); } 64%, 100% { opacity: 1; transform: scale(1); } }
@keyframes ld-late { 0%, 56% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes ld-gather { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* ── The Loaders page's layout (ld-…): each loader on a stage, the progress steps, the samples in use.
   A stage sets --lg-ground to its own fill, so the detailed drawing's knockouts match it ── */
.ld-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--space-4); }
.ld-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.ld-card code { font-family: var(--font-mono); font-size: var(--text-mono); }
.ld-stage { --lg-ground: var(--color-surface-muted); display: flex; align-items: flex-end; justify-content: center; gap: var(--space-8); padding: var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.ld-stage--start { justify-content: flex-start; }
.ld-size { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ld-size .t-caption { color: var(--color-muted); }
.ld-line { display: flex; flex-direction: column; gap: var(--space-1); }
.ld-line .t-label { color: var(--color-subtle); text-transform: uppercase; letter-spacing: var(--tracking-label); }

.ld-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.ld-step { --lg-ground: var(--color-surface); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); }
.ld-step__text { display: flex; flex-direction: column; }
.ld-figure { font-size: var(--text-figure-sm); line-height: var(--leading-figure-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.ld-uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--space-4); }
.ld-use { --lg-ground: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.ld-use__sample { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ld-use__note { color: var(--color-muted); }
.ld-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }

.ld-btn-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.btn[aria-busy='true'] { cursor: progress; }
.btn--primary[aria-busy='true'] { background: var(--color-primary-hover); }

.ld-panel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); width: 100%; padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.ld-gallery { --lg-ground: var(--color-surface-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); aspect-ratio: 4 / 3; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.ld-panel__info { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.ld-panel__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-medium); }

.ld-wait { display: flex; align-items: center; gap: var(--space-5); width: 100%; padding: var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ld-wait__text { display: flex; flex-direction: column; gap: var(--space-1); }

.ld-upload { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.ld-upload__head { display: flex; align-items: center; gap: var(--space-3); }
.ld-upload__head .ld-step__text { flex: 1; }
.ld-thumbs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-1); }
.ld-thumb { --lg-ground: var(--color-surface-muted); display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-success); }
.ld-thumb--waiting { border: 1px dashed var(--color-emphasis); background: transparent; }

.ld-start { --lg-ground: var(--color-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 220px; border-radius: var(--radius-card); background: var(--color-primary); color: var(--color-primary-foreground); }
.ld-start .ld { color: var(--color-primary-foreground); }

.ld-reduced { --lg-ground: var(--color-surface); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-5); }
.ld-rules code { white-space: nowrap; }

/*
 * Components, group 3 — overlays and feedback: menu, tooltip and popover, alert and toast, modal,
 * drawer, empty state, app shell. Proposed (the product has no code for them yet); every color,
 * radius, size, shadow and duration is a token of tokens.css. The classes `.ov-*` are the
 * showcase's own staging for the samples, not product components.
 */

/* ── Shared: the way an overlay arrives (calm: it settles, nothing overshoots) and the round-corner
   close button every overlay carries ── */
@keyframes ov-in {
  from { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); }
  to { opacity: 1; transform: none; }
}
@keyframes ov-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ov-rise {
  from { opacity: 0; transform: translateY(var(--space-3)); }
  to { opacity: 1; transform: none; }
}
@keyframes ov-slide {
  from { opacity: 0; transform: translateX(var(--space-6)); }
  to { opacity: 1; transform: none; }
}

.alert__close,
.toast__close,
.modal__close,
.drawer__close,
.shell__icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.alert__close:hover, .alert__close.is-hover,
.toast__close:hover, .toast__close.is-hover,
.modal__close:hover, .drawer__close:hover,
.shell__icon-btn:hover, .shell__icon-btn.is-hover {
  background: var(--color-surface-muted);
  color: var(--color-foreground);
}
.alert__close:focus-visible, .alert__close.is-focus,
.toast__close:focus-visible, .modal__close:focus-visible, .drawer__close:focus-visible,
.shell__icon-btn:focus-visible, .shell__icon-btn.is-focus {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}

/* ── Menu — proposed. A short list of actions on one thing, opened from a button. The sample opens
   with <details>; the product's menu is a button with aria-haspopup="menu" and role="menu" ── */
.menu-wrap { position: relative; display: inline-block; }
.menu-wrap > summary { list-style: none; cursor: pointer; }
.menu-wrap > summary::-webkit-details-marker { display: none; }
.menu-wrap > .menu {
  position: absolute;
  z-index: var(--z-header);
  top: calc(100% + var(--space-1));
  inset-inline-start: 0;
  animation: ov-in var(--duration-base) var(--ease-enter);
}
.menu-wrap--end > .menu { inset-inline-start: auto; inset-inline-end: 0; }

.menu {
  display: flex;
  flex-direction: column;
  min-width: calc(var(--space-12) * 5);
  max-width: 100%;
  padding: var(--space-1);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.menu__trigger {
  display: inline-grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.menu__trigger:hover, .menu__trigger.is-hover { background: var(--color-surface-muted); }
.menu__trigger:focus-visible, .menu__trigger.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.menu__trigger[aria-expanded='true'], details[open] > .menu__trigger { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-strong); }

.menu__label { padding: var(--space-2) var(--space-3) var(--space-1); }
.menu__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.menu__head-text { display: flex; flex-direction: column; min-width: 0; }
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.menu__item .icon { color: var(--color-muted); }
.menu__item:hover, .menu__item.is-hover { background: var(--color-surface-muted); color: var(--color-foreground); }
.menu__item:focus-visible, .menu__item.is-focus { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.menu__item[aria-checked='true'] { font-weight: var(--weight-medium); }
.menu__check { margin-inline-start: auto; color: var(--color-primary); }
.menu__item[aria-disabled='true'] { background: transparent; color: var(--color-subtle); cursor: not-allowed; }
.menu__item[aria-disabled='true'] .icon { color: var(--color-subtle); }
.menu__item--danger, .menu__item--danger .icon { color: var(--color-danger-text); }
.menu__item--danger:hover, .menu__item--danger.is-hover { background: var(--color-danger-soft); color: var(--color-danger-text); }
.menu__item--danger:focus-visible { outline-color: var(--color-danger); }
.menu__hint { margin-inline-start: auto; color: var(--color-subtle); font-size: var(--text-xs); }
.menu__sep { height: 0; margin: var(--space-1) var(--space-2); border: 0; border-top: 1px solid var(--color-default); }

/* ── Tooltip — proposed. A hint on hover or keyboard focus: text only, never the only home of a
   fact. Shown after a short pause; on touch the same fact sits in the page. ── */
.tip { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); }
.tip__target { border-bottom: 1px dotted var(--color-muted); cursor: help; }
.tip__target:focus-visible, .tip__target.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.tooltip {
  position: absolute;
  z-index: var(--z-header);
  bottom: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  width: max-content;
  max-width: calc(var(--space-16) * 4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-overlay);
  background: var(--color-surface-inverted);
  color: var(--color-inverted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-regular);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);
}
.tooltip::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  bottom: calc(var(--space-1) * -1);
  width: var(--space-2);
  height: var(--space-2);
  margin-inline-start: calc(var(--space-1) * -1);
  background: inherit;
  transform: rotate(45deg);
}
.tip:hover > .tooltip,
.tip:focus-within > .tooltip { opacity: 1; visibility: visible; transition-delay: var(--duration-base); }
.tip.is-open > .tooltip { opacity: 1; visibility: visible; }
.tooltip--bottom { bottom: auto; top: calc(100% + var(--space-2)); }
.tooltip--bottom::after { bottom: auto; top: calc(var(--space-1) * -1); }
.tooltip--end { bottom: auto; top: 50%; inset-inline-start: calc(100% + var(--space-2)); transform: translateY(-50%); }
.tooltip--end::after { bottom: auto; inset-inline-start: calc(var(--space-1) * -1); top: 50%; margin-inline-start: 0; margin-top: calc(var(--space-1) * -1); }

/* ── Popover — proposed. A small panel opened by a click on its trigger: a title, a few words, at
   most one link or button. Closes on Escape or a click outside. ── */
.pop { position: relative; display: inline-block; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > .popover {
  position: absolute;
  z-index: var(--z-header);
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  animation: ov-in var(--duration-base) var(--ease-enter);
}
.popover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: min(100vw - var(--space-8), calc(var(--space-16) * 5));
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  color: var(--color-foreground);
  font-weight: var(--weight-regular);
  text-align: left;
}
.popover__title { font-weight: var(--weight-semibold); }
.popover__text { color: var(--color-muted); }
.popover__link { font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--space-1); }
.popover__foot { display: flex; gap: var(--space-2); margin-top: var(--space-1); }

/* ── Alert — proposed. A message that stays in the page until the reason for it is gone. The tone
   is never alone: an icon and a title say it too. ── */
.alert {
  --alert-tone: var(--color-info);
  --alert-soft: var(--color-info-soft);
  --alert-text: var(--color-info-text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--alert-soft);
  box-shadow: inset var(--space-1) 0 0 var(--alert-tone);
  padding-inline-start: var(--space-5);
  color: var(--color-foreground);
}
.alert--success { --alert-tone: var(--color-success); --alert-soft: var(--color-success-soft); --alert-text: var(--color-success-text); }
.alert--warning { --alert-tone: var(--color-warning); --alert-soft: var(--color-warning-soft); --alert-text: var(--color-warning-text); }
.alert--danger { --alert-tone: var(--color-danger); --alert-soft: var(--color-danger-soft); --alert-text: var(--color-danger-text); }
.alert__icon { display: grid; place-items: center; height: var(--leading-sm); color: var(--alert-tone); }
.alert__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.alert__title { color: var(--alert-text); font-weight: var(--weight-semibold); }
.alert__text { color: var(--color-foreground); }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-1); }
.alert__action {
  color: var(--alert-text);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}
.alert__action:hover, .alert__action.is-hover { color: var(--color-foreground); }
.alert__action:focus-visible, .alert__action.is-focus { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-control); }
.alert__close { margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0; color: var(--alert-text); }
.alert--compact { align-items: center; padding-block: var(--space-3); }
.alert--compact .alert__icon { height: auto; }
.alert--banner { border-inline: 0; border-radius: 0; }

/* ── Toast — proposed. A short confirmation or report that leaves by itself after five seconds
   (longer under the pointer). assets/showcase.js builds the same markup into .toaster ── */
.toaster {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline-end: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100vw - var(--space-8), var(--size-form));
}
.toast {
  --toast-tone: var(--color-info);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  padding-inline-start: var(--space-5);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: inset var(--space-1) 0 0 var(--toast-tone), var(--shadow-overlay);
  color: var(--color-foreground);
  animation: ov-rise var(--duration-slow) var(--ease-enter);
}
.toast--success { --toast-tone: var(--color-success); }
.toast--warning { --toast-tone: var(--color-warning); }
.toast--danger { --toast-tone: var(--color-danger); }
.toast__icon { display: grid; place-items: center; height: var(--leading-sm); color: var(--toast-tone); }
.toast__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.toast__title { font-weight: var(--weight-semibold); }
.toast__text { color: var(--color-muted); }
.toast__action { align-self: flex-start; margin-top: var(--space-1); color: var(--color-primary-strong); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--space-1); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.toast__close { margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0; }
.toast.is-hover { background: var(--color-surface); box-shadow: inset var(--space-1) 0 0 var(--toast-tone), var(--shadow-overlay); border-color: var(--color-emphasis); }

/* ── Modal — proposed. One question, two ways out. The scrim covers the page; focus stays inside
   and returns to the button that opened it; Escape closes. On a phone it becomes a sheet ── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--color-overlay);
  animation: ov-fade var(--duration-base) var(--ease-standard);
}
.scrim[hidden] { display: none; }
.scrim--end { place-items: stretch end; padding: 0; }
html.modal-open { overflow: hidden; }

.modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(100%, var(--size-dialog));
  max-height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  animation: ov-rise var(--duration-slow) var(--ease-enter);
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.modal__title { color: var(--color-foreground); }
.modal__close { margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0; }
.modal__lead { display: flex; align-items: flex-start; gap: var(--space-4); }
.modal__mark { display: grid; place-items: center; flex: none; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-full); background: var(--color-danger-soft); color: var(--color-danger-text); }
.modal__mark--info { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.modal__body { display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-muted); }
.modal__body strong { color: var(--color-foreground); font-weight: var(--weight-medium); }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.modal--sheet { width: 100%; border-end-start-radius: 0; border-end-end-radius: 0; }

/* ── Drawer — proposed. A panel from the side for details and forms that belong to the page behind
   it: head, a body that scrolls, a foot that stays. On a phone it fills the screen ── */
.drawer {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--size-drawer));
  height: 100%;
  border-inline-start: 1px solid var(--color-default);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  animation: ov-slide var(--duration-slow) var(--ease-enter);
}
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-default); }
.drawer__heading { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.drawer__close { margin-inline-end: calc(var(--space-2) * -1); }
.drawer__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-6); padding: var(--space-6); overflow: auto; }
.drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.drawer__group { display: flex; flex-direction: column; gap: var(--space-3); }
.drawer__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.drawer__chip {
  display: inline-flex;
  align-items: center;
  height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.drawer__chip:hover { background: var(--color-surface-muted); }
.drawer__chip[aria-pressed='true'] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--weight-medium); }
.drawer__range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.drawer__input {
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font-variant-numeric: tabular-nums;
}
.drawer__input::placeholder { color: var(--color-subtle); }
.drawer__list { display: flex; flex-direction: column; }
.drawer__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-default); }
.drawer__row dt { color: var(--color-muted); }
.drawer__row dd { text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.drawer__row--total { border-bottom: 0; }
.drawer__row--total dt { color: var(--color-foreground); font-weight: var(--weight-semibold); }
.drawer__row--total dd { font-weight: var(--weight-semibold); }
.drawer__center { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-muted); text-align: center; }
.drawer__center .ld, .drawer__center .spinner { color: var(--color-primary); }

/* ── Empty state — proposed. The picture, one sentence, one thing to do next ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--size-form);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.empty__title { color: var(--color-foreground); }
.empty__text { color: var(--color-muted); font-size: var(--text-base); line-height: var(--leading-base); }
.empty__text--lead { color: var(--color-foreground); }
.empty--card { width: 100%; margin-inline: 0; max-width: none; border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-surface); }
.empty--page { max-width: var(--size-prose); padding-block: var(--space-12); }
.empty--compact {
  width: 100%;
  margin-inline: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: none;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-card);
  text-align: left;
}
.empty--compact .empty__lead { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); }
.empty--compact .empty__text { font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ── App shell — proposed. The frame around a screen: a sidebar that folds, a top bar with search
   and the account menu, the page. Neutral here; the real variants are on the Layouts page ── */
.shell {
  --shell-side: var(--size-sidebar);
  position: relative;
  display: grid;
  grid-template-columns: var(--shell-side) minmax(0, 1fr);
  height: calc(var(--space-24) * 4.5);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-page);
  overflow: hidden;
  transition: grid-template-columns var(--duration-base) var(--ease-standard);
}
.shell--folded { --shell-side: var(--space-16); }
.shell__side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-inline-end: 1px solid var(--color-default); background: var(--color-surface); }
.shell__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.shell__nav .navlink { height: var(--size-control); padding: 0 var(--space-3); font-weight: var(--weight-medium); white-space: nowrap; }
.shell__nav .tip { display: block; }
.shell__nav .navlink { width: 100%; }
.shell:not(.shell--folded) .shell__nav .tooltip { display: none; }
.shell__nav .navlink:focus-visible, .shell__nav .navlink.is-focus { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.shell__foot { margin-top: auto; }
.shell .brand { padding: 0 var(--space-1); }
.shell__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.shell__top { display: flex; align-items: center; gap: var(--space-3); height: var(--size-header); padding: 0 var(--space-4); border-bottom: 1px solid var(--color-default); background: var(--color-surface); flex: none; }
.shell__search { position: relative; flex: 1; max-width: var(--size-form); min-width: 0; }
.shell__search .icon { position: absolute; top: 50%; inset-inline-start: var(--space-3); transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.shell__search input { width: 100%; height: var(--size-control-sm); padding: 0 var(--space-3) 0 var(--space-8); border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-foreground); }
.shell__search input::placeholder { color: var(--color-subtle); }
.shell__search input:focus-visible, .shell__search input.is-focus { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.shell__top-end { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.shell__account { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-control); padding: 0 var(--space-2) 0 var(--space-1); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-foreground); font-weight: var(--weight-medium); cursor: pointer; }
.shell__account:hover, .shell__account.is-hover { background: var(--color-surface-muted); }
.shell__avatar { display: grid; place-items: center; flex: none; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.shell__page { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); min-height: 0; padding: var(--space-6); overflow: hidden; }
.shell__ph { display: grid; place-items: center; min-height: var(--space-16); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); color: var(--color-subtle); }
.shell__ph--tall { flex: 1; }
.shell__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.shell__scrim { display: none; }

/* Folded: icons only, the labels go and a tooltip names each link */
.shell--folded .shell__label,
.shell--folded .brand__name { display: none; }
.shell--folded .shell__nav .navlink { justify-content: center; padding: 0; }
.shell--folded .brand { justify-content: center; padding: 0; }

/* Compact (a phone): the sidebar leaves the page and returns over it */
.shell--compact { --shell-side: 0; grid-template-columns: minmax(0, 1fr); height: calc(var(--space-24) * 3.5); }
.shell--compact .shell__side { display: none; }
.shell--compact .shell__name { display: none; }
.shell--compact .shell__cols { grid-template-columns: minmax(0, 1fr); }
.shell--compact .shell__page { padding: var(--space-4); }
.shell--compact.is-open .shell__side { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; display: flex; width: var(--size-sidebar); box-shadow: var(--shadow-overlay); animation: ov-slide var(--duration-slow) var(--ease-enter); }
.shell--compact.is-open .shell__scrim { position: absolute; z-index: 1; inset: 0; display: block; background: var(--color-overlay); }

/* ── Showcase staging for the samples (not product components) ── */
.ov-stage { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-height: calc(var(--space-24) * 2.5); padding: var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); }
.ov-stage--tall { min-height: calc(var(--space-24) * 4); }
.ov-stage--center { align-items: center; justify-content: center; }
.ov-stage--plain { min-height: 0; }
.ov-stage--surface { background: var(--color-surface); }
.ov-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ov-cell { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ov-cell > .ov-stage, .ov-cell > .ov-drawer-stage { flex: 1; }
.ov-stage .shell__search { flex: none; width: 100%; max-width: none; }
.ov-navlink { height: var(--size-control); padding: 0 var(--space-3); }
.ov-link { color: var(--color-primary-strong); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--space-1); }
/* A dialog drawn where it stands: the scrim is the muted ground, so the sample reads calmly */
.ov-scrim { display: grid; place-items: center; padding: var(--space-8) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.ov-scrim--sheet { align-items: end; padding: var(--space-8) 0 0; min-height: calc(var(--space-24) * 3); overflow: hidden; }
.ov-drawer-stage { display: flex; justify-content: flex-end; height: calc(var(--space-24) * 6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); overflow: hidden; }
.ov-drawer-stage--short { height: calc(var(--space-24) * 3.75); }
.ov-phone { width: min(100%, calc(var(--space-24) * 3.75)); }
.ov-shell-note { max-width: var(--size-prose); }
.ov-rules { display: flex; flex-direction: column; gap: var(--space-2); max-width: 880px; padding: var(--space-1) 0 var(--space-1) var(--space-5); list-style: disc; color: var(--color-muted); }
.ov-toasts { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--size-form); }

@media (max-width: 900px) {
  .shell:not(.shell--compact) { min-width: calc(var(--space-24) * 6); }
  .shell-scroll { overflow-x: auto; }
  .modal { padding: var(--space-5); }
}
@media (max-width: 640px) {
  .toaster { inset-inline-end: var(--space-4); bottom: var(--space-4); }
}

/* ── App layout (layouts/appLayout.html, tools/genAppLayout.mjs) — proposed ──
   The two shells drawn inside the device frames: the marketplace (al-mk-…) and the admin web (al-ad-…,
   al-side). Every value is a token; the frames' screens clip what runs past them, the way a screenshot
   does, and a screen narrower than its layout adapts through container queries on .al-app. Motion:
   menus, the drawer and the hover name arrive once; an overdue count breathes slowly; nothing moves
   when the device asks for reduced motion. */

/* The frames: desktops one under another, the tablet and the phone side by side */
.al-shots { display: flex; flex-direction: column; gap: var(--space-8); }
.al-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-8); }
.al-shot { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.al-shot--desktop { width: 100%; }
.al-shot--tablet { width: min(100%, 744px); }
.al-shot--phone { width: min(100%, 390px); }
.al-shot .device { width: 100%; }
.al-shot .device__screen { overflow: hidden; }
.al-shot__cap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); min-height: var(--size-control-sm); text-align: center; }

/* ── A screen ── */
.al-app {
  --al-rail: var(--space-16);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: var(--color-page);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.al-app .icon { flex: none; }
.al-app button { cursor: default; }
.al-page { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.al-page::-webkit-scrollbar { display: none; }
.al-page__inner { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
.al-page__inner--phone { gap: var(--space-4); padding: var(--space-4); }
.al-muted { color: var(--color-subtle); }

/* The browser's bar on a desktop, the status bar on a tablet and a phone */
.al-chrome { display: flex; align-items: center; gap: var(--space-3); flex: none; height: var(--space-8); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-default); background: var(--color-surface-muted); }
.al-chrome__dots { display: flex; gap: var(--space-1); }
.al-chrome__dots i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-default); }
.al-chrome__url { flex: 0 1 calc(var(--space-24) * 4); margin: 0 auto; padding: 0 var(--space-3); overflow: hidden; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-subtle); font-size: var(--text-2xs); line-height: var(--leading-xs); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.al-status { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--space-8); padding: 0 var(--space-6); background: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.al-status__icons { display: flex; gap: var(--space-1); }

/* The lockup: the armillary and the wordmark; its knockouts take the bar's surface */
.al-lockup { --lg-ground: var(--color-surface); display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--color-primary); }
.al-lockup .lg-wordmark { color: var(--color-foreground); }
.al-lockup--lg { gap: var(--space-4); }
.al-lockup--lg .lg-wordmark { font-size: var(--text-lg); letter-spacing: 0.28em; }
.al-lockup--sm { gap: var(--space-2); }
.al-lockup--sm .lg-wordmark { font-size: var(--text-xs); letter-spacing: 0.2em; }
.al-mark { --lg-ground: var(--color-surface); color: var(--color-primary); }

/* Small controls of the bars */
.al-link { color: var(--color-primary); font-weight: var(--weight-medium); white-space: nowrap; }
.al-link--quiet { color: var(--color-muted); font-weight: var(--weight-regular); }
.al-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  height: var(--size-control);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-foreground);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.al-iconbtn.is-active { background: var(--color-surface-muted); }
.al-iconbtn--avatar { padding: 0 var(--space-1); gap: var(--space-1); border-radius: var(--radius-full); }
.al-iconbtn--sm { height: var(--size-control-sm); font-size: var(--text-xs); color: var(--color-muted); }
.al-iconbtn--sm .icon { width: var(--space-3); height: var(--space-3); }
.al-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-4);
  height: var(--space-4);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-size: var(--text-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.al-count--dot { position: absolute; top: var(--space-2); right: var(--space-2); min-width: var(--space-2); width: var(--space-2); height: var(--space-2); padding: 0; background: var(--color-danger); }
.al-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-control);
  height: var(--size-control);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.al-avatar--sm { width: var(--space-8); height: var(--space-8); font-size: var(--text-2xs); }
.al-avatar--lg { width: var(--space-16); height: var(--space-16); font-size: var(--text-lg); }
.al-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-subtle);
}
.al-search__text,
.al-search__query { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-search__query { color: var(--color-foreground); }
.al-search--quiet { max-width: calc(var(--space-24) * 3); border-color: transparent; border-bottom-color: var(--color-emphasis); border-radius: 0; background: transparent; padding-left: 0; }
.al-search--wide { flex: 1; height: var(--size-control); padding-right: var(--space-1); }
.al-search__scope { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; height: 100%; margin-right: var(--space-1); padding-right: var(--space-3); border-right: 1px solid var(--color-default); color: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.al-search__go { flex: none; }
.al-search--admin { flex: 0 1 calc(var(--space-24) * 3); height: var(--size-control-sm); background: var(--color-page); border-color: var(--color-default); font-size: var(--text-xs); }
.al-anchor { position: relative; display: inline-flex; }
.al-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.al-actions--start { justify-content: flex-start; }

/* ── The marketplace's top bar ── */
.al-mk-top { position: relative; z-index: 2; flex: none; border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.al-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--space-8); padding: 0 var(--space-8); border-bottom: 1px solid var(--color-default); color: var(--color-muted); font-size: var(--text-xs); }
.al-strip__note { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-strip__note .icon { color: var(--color-success); }
.al-strip__links { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.al-mk-top__main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-8) var(--space-4); }
.al-mk-top__main--tablet { padding: var(--space-3) var(--space-5); }
.al-mk-top__search { padding: 0 var(--space-5) var(--space-3); }
.al-mk-top__row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); }
.al-mk-top__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6); border-top: 1px solid var(--color-default); }
.al-sub-links { display: flex; gap: var(--space-5); font-size: var(--text-xs); }

/* Categories: centred under a brass rule on the editorial bar, a slim row on the compact one */
.al-cats { display: flex; align-items: center; gap: var(--space-8); min-width: 0; height: var(--space-12); padding: 0 var(--space-6); overflow: hidden; }
.al-cats--center { justify-content: center; border-top: 1px solid var(--color-default); }
.al-mk-top--editorial .al-cats--center { box-shadow: inset 0 1px 0 var(--color-accent-soft); }
.al-cats--start { gap: var(--space-6); height: var(--size-control); padding: 0; }
.al-cat { position: relative; display: inline-flex; align-items: center; height: 100%; color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.02em; white-space: nowrap; }
.al-cat--quiet { color: var(--color-muted); font-weight: var(--weight-regular); }
.al-cat.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); }
.al-cats--start .al-cat { font-size: var(--text-xs); }
.al-cats__sep { width: 1px; height: var(--space-4); background: var(--color-default); }

/* A menu dropped from the bar: the account (Buying / Selling), the currency */
.al-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: calc(var(--space-24) * 3);
  padding: var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  text-align: left;
}
.al-menu--narrow { width: calc(var(--space-24) * 2 + var(--space-16)); }
.al-menu__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3); }
.al-menu__who,
.al-profile__who,
.al-side__who { display: flex; flex-direction: column; min-width: 0; }
.al-menu__who > *,
.al-side__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-menu__switch { display: flex; margin: 0 var(--space-1) var(--space-2); }
.al-menu__switch .segmented__item,
.al-switch .segmented__item { flex: 1; justify-content: center; }
.al-menu__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-control-sm); padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--color-foreground); font-size: var(--text-sm); }
.al-menu__item .icon { color: var(--color-muted); }
.al-menu__item.is-current { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.al-menu__item.is-current .icon { color: currentColor; }
.al-menu__text { flex: 1; min-width: 0; }
.al-menu__meta { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.al-menu__code { width: var(--space-8); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }
.al-menu__sep { margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--color-default); }
.al-menu__label { padding: var(--space-2) var(--space-2) var(--space-1); }
.al-menu__note { padding: var(--space-1) var(--space-2) var(--space-2); }

/* ── The home hero ── */
.al-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-10); padding: var(--space-12) var(--space-10) var(--space-10); border-bottom: 1px solid var(--color-default); background: var(--color-page); }
.al-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.al-hero__lede { max-width: calc(var(--space-24) * 5); color: var(--color-muted); font-size: var(--text-base); line-height: var(--leading-base); }
.al-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.al-hero__art { display: grid; place-items: center; min-width: 0; padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.al-hero__art--bare { width: 100%; padding: 0; border: 0; background: transparent; }
.al-hero--stacked { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-10); text-align: center; }
.al-hero--stacked .al-hero__text,
.al-hero--phone .al-hero__text { align-items: center; }
.al-hero--stacked .al-hero__actions,
.al-hero--stacked .al-trust { justify-content: center; }
.al-hero--phone { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-6); text-align: center; }
.al-hero--phone .ill { --ill-size: 168px; }
.al-hero--phone .al-hero__lede { font-size: var(--text-sm); line-height: var(--leading-sm); }
.al-hero--phone .al-hero__actions { align-self: stretch; }
.al-title-phone { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.al-rule { display: block; width: var(--space-12); border-top: 2px solid var(--color-accent); }
.al-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.al-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.al-trust .icon { color: var(--color-success); }

/* ── Blocks, cards, chips ── */
.al-block { display: flex; flex-direction: column; gap: var(--space-4); }
.al-blockhead,
.al-pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.al-blockhead--phone .t-section-title { font-size: var(--text-xl); }
.al-pagehead__title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.al-grid { display: grid; gap: var(--space-5); }
.al-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.al-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.al-photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-surface-muted); color: var(--color-subtle); }
.al-photo__art { width: 38%; height: auto; aspect-ratio: 1; fill: var(--color-surface); stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.al-photo__heart { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); box-shadow: var(--shadow-card); }
.al-photo__heart.is-on { color: var(--color-danger); }
.al-photo__heart.is-on .icon { fill: currentColor; }
.al-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; }
.al-card__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-card__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: var(--weight-medium); min-height: calc(var(--leading-body) * 2); }
.al-card__sub { display: flex; gap: var(--space-1); min-width: 0; overflow: hidden; white-space: nowrap; }
.al-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); }
.al-card__foot .badge .icon { width: var(--space-3); height: var(--space-3); }
.al-chips { display: flex; gap: var(--space-2); flex: none; padding: var(--space-3) var(--space-4); overflow: hidden; border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.al-chip { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; height: var(--size-control-sm); padding: 0 var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.al-chip .icon { width: var(--space-3); height: var(--space-3); color: var(--color-muted); }
.al-chip.is-active { border-color: transparent; background: var(--color-primary); color: var(--color-primary-foreground); }
.al-chip__n { color: inherit; opacity: 0.7; font-variant-numeric: tabular-nums; }
.al-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.al-filters__sort { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }

/* Empty states: the picture, a heading, a sentence, one action */
.al-empty-card { display: grid; place-items: center; }
.al-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: calc(var(--space-24) * 4 + var(--space-8)); padding: var(--space-10) var(--space-6); text-align: center; }
.al-empty--wide { max-width: calc(var(--space-24) * 5); }
.al-empty__text { color: var(--color-muted); }
.al-empty .btn { margin-top: var(--space-1); }

/* ── The phone: its bars and the account ── */
.al-phone-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); flex: none; height: var(--size-header); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.al-phone-top__side { display: flex; min-width: 0; }
.al-phone-top__side--end { justify-content: flex-end; }
.al-phone-top--title { display: flex; justify-content: space-between; padding: 0 var(--space-4); }
.al-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: none; padding: var(--space-1) var(--space-1) var(--space-5); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.al-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: var(--size-touch); color: var(--color-muted); font-size: var(--text-2xs); line-height: var(--leading-2xs); font-weight: var(--weight-medium); }
.al-tab .icon { width: var(--space-5); height: var(--space-5); }
.al-tab.is-active { color: var(--color-foreground); }
.al-tab.is-active::before { content: ''; position: absolute; top: calc(var(--space-1) * -1); width: var(--space-6); height: 2px; background: var(--color-accent); }
.al-tab__sell { display: grid; place-items: center; width: var(--space-8); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-foreground); }
.al-tab--sell .icon { width: var(--space-4); height: var(--space-4); }
.al-tab__dot { position: absolute; top: var(--space-1); left: calc(50% + var(--space-2)); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-danger); }
.al-profile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.al-switch { display: flex; }
.al-list { display: flex; flex-direction: column; overflow: hidden; }
.al-listrow { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch); padding: 0 var(--space-4); border-top: 1px solid var(--color-default); }
.al-listrow:first-child { border-top: 0; }
.al-listrow > .icon:first-child { color: var(--color-muted); }
.al-listrow > .icon:last-child { color: var(--color-subtle); }
.al-listrow__text { flex: 1; min-width: 0; }
.al-listrow__meta { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }

/* ── The admin web: the sidebar that folds ── */
.al-ad { position: relative; display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); flex: 1; min-height: 0; }
.al-ad--folded { grid-template-columns: var(--al-rail) minmax(0, 1fr); }
.al-ad--phone { grid-template-columns: minmax(0, 1fr); }
.al-ad-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.al-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; padding: var(--space-3); border-right: 1px solid var(--color-default); background: var(--color-surface); }
.al-side__brand { display: flex; align-items: center; gap: var(--space-2); height: var(--size-control); margin-bottom: var(--space-2); }
.al-side__brand .brand__mark { --lg-ground: var(--color-primary); }
.al-side__name { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.1; }
.al-side__name .lg-wordmark { font-size: var(--text-2xs); letter-spacing: 0.2em; }
.al-side__name .t-label { color: var(--color-accent); letter-spacing: 0.08em; font-size: var(--text-2xs); }
.al-side__fold { height: var(--size-control-sm); color: var(--color-muted); }
.al-side__label { padding: var(--space-4) var(--space-2) var(--space-1); color: var(--color-subtle); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.al-nav { position: relative; gap: var(--space-3); min-height: calc(var(--size-control-sm) + var(--space-1)); padding: 0 var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
.al-nav__text { flex: 1; min-width: 0; padding: var(--space-1) 0; white-space: normal; line-height: var(--leading-xs); }
.al-nav[aria-current='page'] { font-weight: var(--weight-medium); box-shadow: inset 2px 0 0 var(--color-accent); }
.al-nav__count { flex: none; font-variant-numeric: tabular-nums; }
.al-side__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: var(--space-3) var(--space-1) 0; border-top: 1px solid var(--color-default); font-size: var(--text-xs); }

/* Folded: the rail keeps the icons and the counts; a group's label turns into a hairline */
.al-ad--folded .al-side { align-items: center; padding: var(--space-3) var(--space-2); }
.al-ad--folded .al-side__name,
.al-ad--folded .al-side__who,
.al-ad--folded .al-nav__text,
.al-ad--folded .al-hubchip__text { display: none; }
.al-ad--folded .al-side__brand { flex-direction: column; justify-content: center; gap: var(--space-2); height: auto; }
.al-ad--folded .al-side__fold .icon { transform: scaleX(-1); }
.al-ad--folded .al-side__label { width: 100%; height: 1px; margin: var(--space-3) 0; padding: 0; overflow: hidden; background: var(--color-default); color: transparent; }
.al-ad--folded .al-nav { justify-content: center; width: var(--size-control); padding: 0; }
.al-ad--folded .al-nav[aria-current='page'] { box-shadow: none; }
.al-ad--folded .al-nav__count { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); height: var(--space-4); padding: 0 var(--space-1); font-size: var(--text-2xs); }
.al-ad--folded .al-side__foot { justify-content: center; padding-left: 0; padding-right: 0; width: 100%; }
.al-tip { display: none; }
.al-ad--folded .al-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-3));
  z-index: 4;
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-surface-inverted);
  color: var(--color-inverted);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transform: translateY(-50%);
}
.al-ad--folded .al-nav:has(.al-tip) { background: var(--color-surface-muted); color: var(--color-foreground); }

/* The phone: the sidebar as a drawer over the page */
.al-drawer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: min(85%, calc(var(--size-sidebar) + var(--space-10))); box-shadow: var(--shadow-overlay); }
.al-scrim { position: absolute; inset: 0; z-index: 2; background: var(--color-overlay); }

/* The admin top bar */
.al-ad-top { display: flex; align-items: center; gap: var(--space-4); flex: none; height: var(--size-header); padding: 0 var(--space-6); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.al-ad-top--phone { gap: var(--space-3); padding: 0 var(--space-3); }
.al-ad-top--phone > strong,
.al-ad-top__hub { flex: 1; min-width: 0; }
.al-ad-top__hub { display: flex; flex-direction: column; line-height: var(--leading-xs); }
.al-ad-top__gap { flex: 1; }
.al-crumbs { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; overflow: hidden; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.al-crumbs__here { overflow: hidden; color: var(--color-foreground); font-weight: var(--weight-medium); text-overflow: ellipsis; }

/* Queue tabs and rows */
.al-qtabs { display: flex; gap: var(--space-6); overflow: hidden; border-bottom: 1px solid var(--color-default); }
.al-qtab { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; padding: var(--space-2) 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.al-qtab.is-active { color: var(--color-foreground); font-weight: var(--weight-medium); box-shadow: inset 0 -2px 0 var(--color-primary); }
.al-qtab .badge { height: var(--space-5); padding: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.al-table td { vertical-align: middle; }
.al-table th,
.al-table td { white-space: nowrap; }
.al-col-listing { width: 100%; white-space: normal; }
.al-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.al-item__text { display: flex; flex-direction: column; min-width: 0; }
.al-item__sub { display: flex; gap: var(--space-1); }
.al-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.al-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
.al-stat--danger .t-figure { color: var(--color-danger-text); }
.al-promo { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); border-left: 2px solid var(--color-accent); }
.al-promo__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.al-promo__lede { color: var(--color-muted); }
.al-thumb { display: grid; place-items: center; flex: none; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-subtle); }
.al-thumb svg { width: var(--space-6); height: var(--space-6); fill: var(--color-surface); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.al-caserow { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-default); }
.al-caserow:first-child { border-top: 0; }
.al-caserow > .icon { color: var(--color-muted); }
.al-caserow__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.al-caserow__text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-caserow__item { font-size: var(--text-sm); }

/* The operator's workspace: one hub, its queue */
.al-hubchip { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-page); }
.al-hubchip > .icon { color: var(--color-accent); }
.al-hubchip__text { display: flex; flex-direction: column; min-width: 0; line-height: var(--leading-xs); }
.al-ad--folded .al-hubchip { justify-content: center; width: var(--size-control); height: var(--size-control); padding: 0; }
.al-hublist { display: flex; flex-direction: column; overflow: hidden; }
.al-hubrow { --al-action: calc(var(--space-24) + var(--space-8)); display: grid; grid-template-columns: var(--size-control) minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 1.2fr) var(--al-action); align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-default); }
.al-hubrow:first-child { border-top: 0; }
.al-hubrow__item,
.al-hubrow__state,
.al-hubrow__ship { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.al-hubrow__item > *,
.al-hubrow__state > .t-caption { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-hubrow__action { justify-self: stretch; }
.al-hublist--stack .al-hubrow { grid-template-columns: var(--size-control-lg) minmax(0, 1fr) var(--al-action); grid-template-areas: 'thumb item action' 'thumb state ship'; row-gap: var(--space-2); }
.al-hublist--stack .al-thumb { grid-area: thumb; align-self: start; width: var(--size-control-lg); height: var(--size-control-lg); }
.al-hublist--stack .al-hubrow__item { grid-area: item; }
.al-hublist--stack .al-hubrow__state { grid-area: state; flex-direction: row; align-items: center; gap: var(--space-2); }
.al-hublist--stack .al-hubrow__ship { grid-area: ship; flex-direction: row; align-items: baseline; gap: var(--space-2); text-align: right; }
.al-hublist--stack .al-hubrow__action { grid-area: action; height: var(--size-touch); }
.al-hublist--phone .al-hubrow { grid-template-columns: var(--size-control) minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-4); }
.al-hublist--phone .al-thumb { grid-row: span 2; align-self: start; }
.al-hublist--phone .al-hubrow__state { flex-direction: row; align-items: center; gap: var(--space-2); }
.al-hublist--phone .al-hubrow__ship { display: none; }
.al-hublist--phone .al-hubrow__action { grid-column: 1 / -1; justify-self: stretch; height: var(--size-touch); }
.al-note { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.al-note .icon { margin-top: 1px; }

/* ── A screen narrower than its layout (the frame shrinks with the window) ── */
@container (max-width: 1040px) {
  .al-strip__note { display: none; }
  .al-strip { justify-content: flex-end; }
  .al-mk-top__main .al-iconbtn > [data-i18n] { display: none; }
  .al-mk-top__row .al-iconbtn > [data-i18n] { display: none; }
  .al-sub-links { display: none; }
  .al-col-seller { display: none; }
}
@container (max-width: 900px) {
  .al-col-assignee,
  .al-qtab:nth-child(n+5) { display: none; }
}
@container (max-width: 860px) {
  .al-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-hero { grid-template-columns: minmax(0, 1fr); }
  .al-hero__art:not(.al-hero__art--bare) { display: none; }
  .al-hublist:not(.al-hublist--stack):not(.al-hublist--phone) .al-hubrow { grid-template-columns: var(--size-control) minmax(0, 1fr) minmax(0, 1fr) var(--al-action); }
  .al-hublist:not(.al-hublist--stack):not(.al-hublist--phone) .al-hubrow__ship { display: none; }
  .al-search--admin { display: none; }
  .al-ad:not(.al-ad--folded):not(.al-ad--phone) { grid-template-columns: calc(var(--size-sidebar) - var(--space-10)) minmax(0, 1fr); }
}

@container (max-width: 560px) {
  .al-promo { flex-direction: column; align-items: flex-start; }
}

/* ── Motion: what arrives, arrives once; an overdue count breathes; still under reduced motion ── */
@media (prefers-reduced-motion: no-preference) {
  .al-menu { animation: al-rise var(--duration-slow) var(--ease-enter) var(--duration-base) both; }
  .al-drawer { animation: al-slide var(--duration-slow) var(--ease-enter) var(--duration-base) both; }
  .al-scrim { animation: al-fade var(--duration-slow) var(--ease-standard) both; }
  .al-ad--folded .al-tip { animation: al-fade var(--duration-base) var(--ease-standard) var(--duration-slower) both; }
  .al-ageing { animation: al-breathe calc(var(--duration-loader) * 2) var(--ease-standard) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .al-menu,
  .al-drawer,
  .al-scrim,
  .al-tip,
  .al-ageing { animation: none; }
}
@keyframes al-rise { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } to { opacity: 1; transform: none; } }
@keyframes al-slide { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes al-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-breathe { 50% { opacity: 0.6; } }

/* ── Auth layout (layouts/signIn.html, tools/genSignIn.mjs) — the screens before the product in four
   variants: Split atelier, Still life, Certificate, Back office. Classes au-…; buttons are the plain
   .btn--primary / .btn--secondary / .btn--ghost, fields are the layout's own (au-field). Every color,
   radius, size and duration is a token of tokens.css; the motion stops under reduced motion. ── */

/* The layout's own roles, per theme: the deep green of the panel (ivory text on it in both themes),
   brass made readable on that green, and the window light of the still life */
/* The roles hold on any screen of the layout too, so a flow can draw one without the showcase around it */
.au-show, .au-screen {
  --au-green: var(--color-primary);
  --au-on-green: var(--color-primary-foreground);
  --au-brass: color-mix(in srgb, var(--color-accent) 55%, var(--color-primary-foreground));
  --au-glow: color-mix(in srgb, var(--ill-paper) 55%, transparent);
}
.au-show {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.au-show, .au-screen) {
    --au-green: var(--color-primary-soft);
    --au-on-green: var(--color-foreground);
    --au-brass: var(--color-accent);
    --au-glow: color-mix(in srgb, var(--ill-line) 7%, transparent);
  }
}
:root[data-theme='dark'] :is(.au-show, .au-screen) {
  --au-green: var(--color-primary-soft);
  --au-on-green: var(--color-foreground);
  --au-brass: var(--color-accent);
  --au-glow: color-mix(in srgb, var(--ill-line) 7%, transparent);
}

/* ── The showcase around the screens: the desktop, then rows of phones and states ── */
.au-fig { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: 0; min-width: 0; }
.au-fig > figcaption { max-width: 34ch; text-align: center; }
.au-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); align-items: start; }
.au-phones .device--phone { zoom: 0.64; }
.au-fig--wide { grid-column: span 2; align-self: center; }
/* The app's top is a desktop crop: drawn at its own width and shown at the phones' scale */
.au-fig--wide .au-snip { width: 860px; max-width: none; zoom: 0.64; }
@media (max-width: 640px) { .au-fig--wide .au-snip { width: 100%; zoom: 1; } }
@media (max-width: 1180px) { .au-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .au-phones { grid-template-columns: minmax(0, 1fr); }
  .au-fig--wide { grid-column: auto; }
}

/* ── A screen inside a device frame ── */
.au-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-page);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  text-align: left;
}

/* Brand lockup: the Armillary (SITE.mark) and the wordmark in tracked capitals */
.au-lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); }
.au-mark { display: inline-flex; flex: none; }
.au-mark svg { display: block; width: var(--space-6); height: var(--space-6); }
.au-wordmark {
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-foreground);
  white-space: nowrap;
}
.au-lockup--on, .au-lockup--on .au-wordmark { color: var(--au-on-green); }
.au-rule { display: block; width: var(--space-12); border-top: 1px solid var(--color-accent); }
.au-rule--center { margin-inline: auto; }

/* Headings and text */
.au-head { display: flex; flex-direction: column; gap: var(--space-1); }
.au-title {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: var(--leading-page-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-page-title);
  color: var(--color-foreground);
  text-wrap: balance;
}
.au-title--sm { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.au-lead { color: var(--color-muted); text-wrap: pretty; }
.au-alt { color: var(--color-muted); text-align: center; }
.au-link {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  cursor: pointer;
}
.au-link--quiet { font-size: var(--text-xs); }
.au-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.au-note .icon { flex: none; width: var(--space-4); height: var(--space-4); }
.au-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.au-back { display: flex; align-items: center; gap: var(--space-1); color: var(--color-primary); }

/* Fields: the layout's own, so it holds while the components are being restyled */
.au-form { display: flex; flex-direction: column; gap: var(--space-4); }
.au-field { display: flex; flex-direction: column; gap: var(--space-2); }
.au-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.au-field__label { font-weight: var(--weight-medium); color: var(--color-foreground); }
.au-input-wrap { position: relative; display: block; }
.au-input {
  display: block;
  width: 100%;
  height: var(--size-touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  outline: none;
}
.au-input[type='password'] { padding-right: var(--space-16); letter-spacing: 0.18em; }
.au-input:disabled { background: var(--color-surface-muted); color: var(--color-subtle); }
.au-reveal { position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-muted); }
.au-btn { width: 100%; height: var(--size-touch); }
.au-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.au-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.au-check { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-foreground); }
.au-box {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.au-box.is-on { border-color: var(--color-primary); background: var(--color-primary); }
.au-box.is-on::after {
  content: '';
  width: var(--space-2);
  height: var(--space-1);
  border-bottom: 2px solid var(--color-primary-foreground);
  border-left: 2px solid var(--color-primary-foreground);
  transform: translateY(-1px) rotate(-45deg);
}

/* Messages: the wrong-credentials alert (one text for both fields, so no field is marked), a pause */
.au-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-card); }
.au-alert .icon { flex: none; margin-top: 2px; }
.au-alert__body { display: flex; flex-direction: column; gap: 2px; }
.au-alert__body span { color: var(--color-foreground); }
.au-alert--danger { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: var(--color-danger-soft); color: var(--color-danger-text); }
.au-alert--warning { border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: var(--color-warning-soft); color: var(--color-warning-text); }

/* "After signing in you return to …": the listing the visitor came from */
.au-return {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.au-return__thumb { display: block; flex: none; width: var(--space-10); height: var(--space-10); overflow: hidden; border-radius: var(--radius-full); }
.au-return__thumb svg, .au-hub__thumb svg, .au-app-photo svg, .au-listing__photo svg { display: block; width: 100%; height: 100%; }
.au-return__text { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.au-return__text strong { overflow: hidden; color: var(--color-foreground); font-weight: var(--weight-medium); white-space: nowrap; text-overflow: ellipsis; }

/* ── The Armillary in motion: rings turn about the tilted axis, the brass meridian stays ── */
.au-arm {
  --au-arm-ground: var(--color-page);
  --au-arm-brass: var(--color-accent);
  display: block;
  flex: none;
  width: var(--au-arm, var(--space-16));
  height: var(--au-arm, var(--space-16));
  overflow: visible;
  color: var(--color-primary);
}
.au-arm__ink { fill: none; stroke: currentColor; }
.au-arm__dot { fill: currentColor; }
.au-arm__brass { fill: var(--au-arm-brass); }
.au-arm__grad { fill: none; stroke: var(--au-arm-ground); }
.au-arm__ko { fill: var(--au-arm-ground); }
.au-arm__spin { transform-box: fill-box; transform-origin: center; animation: au-turn calc(var(--duration-loader) * 8) var(--ease-standard) infinite; }
.au-arm__spin--b { animation-duration: calc(var(--duration-loader) * 11); animation-delay: calc(var(--duration-loader) * -3); }
@keyframes au-turn {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

/* Illustrations and the mark on the deep green: the sprite's colors re-pointed at the green */
.au-on-green {
  --ill-line: var(--au-on-green);
  --ill-paper: color-mix(in srgb, var(--au-on-green) 8%, var(--au-green));
  --ill-fill: color-mix(in srgb, var(--au-on-green) 18%, var(--au-green));
  --ill-soft: color-mix(in srgb, var(--au-on-green) 11%, var(--au-green));
  --ill-accent: var(--au-brass);
  --ill-accent-soft: color-mix(in srgb, var(--au-brass) 25%, var(--au-green));
  background: var(--au-green);
  color: var(--au-on-green);
}
.au-on-green .au-arm { --au-arm-ground: var(--au-green); --au-arm-brass: var(--au-brass); color: var(--au-on-green); }
.au-on-green .au-rule { border-color: var(--au-brass); }

/* ── 1 · Split atelier ── */
.au-split { flex-direction: row; }
.au-split__form { display: flex; flex: 1 1 50%; flex-direction: column; min-width: 0; padding: var(--space-8) var(--space-12); }
.au-split__body { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--space-5); width: 100%; max-width: var(--size-form); margin: 0 auto; }
.au-foot { display: flex; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-subtle); }
.au-split__panel {
  position: relative;
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-12);
  overflow: hidden;
}
/* The meridian's graduated ring, large and faint behind the scene */
.au-split__panel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--au-brass) 30%, transparent);
  box-shadow: inset 0 0 0 var(--space-6) color-mix(in srgb, var(--au-on-green) 3%, transparent);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.au-split--phone { flex-direction: column; }
.au-split__band { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-5) var(--space-8); }
.au-split__bandtop { display: flex; align-self: stretch; align-items: center; justify-content: space-between; }
.au-split__band .au-arm--band { --au-arm: var(--space-8); }
.au-split__sheet {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: calc(var(--space-4) * -1);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  background: var(--color-page);
}

/* ── 2 · Still life ── */
.au-ed__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.au-ed__art--faint { opacity: 0.35; }
.au-ed__top { position: relative; padding: var(--space-8) var(--space-10); }
.au-ed__plate {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-accent);
}
.au-ed__plate-title { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-medium); font-style: italic; }
.au-ed__float {
  position: absolute;
  top: 0;
  right: var(--space-16);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: var(--size-form);
}
.au-ed__float .au-arm--float { --au-arm: var(--space-16); --au-arm-ground: var(--ill-fill); }
.au-ed__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-8);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(8px);
}
.au-ed--phone .au-ed__top { padding: var(--space-10) var(--space-5) 0; }
.au-ed--phone .au-ed__float { top: auto; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); width: auto; justify-content: flex-end; }
.au-ed--phone .au-ed__float .au-arm--float { --au-arm: var(--space-12); }
.au-ed--phone .au-ed__card { padding: var(--space-6) var(--space-5); }

/* The still life's drawing: the illustration tokens, so it follows the theme */
.au-sl { display: block; }
.au-sl * { vector-effect: non-scaling-stroke; }
.au-sl-wall { fill: var(--ill-fill); }
.au-sl-panel { fill: none; stroke: var(--ill-line); stroke-opacity: 0.12; stroke-width: 1; }
.au-sl-light { fill: var(--au-glow); }
.au-sl-arch { fill: var(--ill-soft); }
.au-sl-table { fill: color-mix(in srgb, var(--ill-line) 7%, var(--ill-fill)); }
.au-sl-edge { stroke: var(--ill-line); stroke-opacity: 0.3; stroke-width: 1; }
.au-sl-shadow { fill: var(--ill-line); opacity: 0.12; }
.au-sl-card { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 1.25; }
.au-sl-cardline { stroke: var(--ill-line); stroke-opacity: 0.3; stroke-width: 3; stroke-linecap: round; }
.au-sl-rosette { fill: var(--ill-accent-soft); stroke: var(--ill-accent); stroke-width: 1.5; }
.au-sl-tick { fill: none; stroke: var(--ill-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-sl-cushion { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 1.5; }
.au-sl-seam { stroke: var(--ill-line); stroke-opacity: 0.3; stroke-width: 1.25; stroke-dasharray: 4 5; }
.au-sl-strap { fill: color-mix(in srgb, var(--ill-line) 82%, var(--ill-fill)); stroke: var(--ill-line); stroke-width: 1.5; }
.au-sl-stitch { fill: none; stroke: var(--ill-paper); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 3 4; }
.au-sl-metal { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 1.5; }
.au-sl-knurl { stroke: var(--ill-line); stroke-opacity: 0.5; stroke-width: 1; }
.au-sl-case { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 2; }
.au-sl-bezel { fill: color-mix(in srgb, var(--ill-line) 88%, var(--ill-paper)); stroke: var(--ill-line); stroke-width: 1.5; }
.au-sl-bezeltick { stroke: var(--ill-paper); stroke-opacity: 0.7; stroke-width: 1.5; }
.au-sl-pip { fill: var(--ill-accent); }
.au-sl-dial { fill: var(--ill-line); }
.au-sl-track { fill: none; stroke: var(--ill-paper); stroke-opacity: 0.25; stroke-width: 1; }
.au-sl-index { stroke: var(--ill-paper); stroke-width: 4; stroke-linecap: round; }
.au-sl-sub { fill: color-mix(in srgb, var(--ill-paper) 10%, var(--ill-line)); stroke: var(--ill-paper); stroke-opacity: 0.45; stroke-width: 1; }
.au-sl-subtick { stroke: var(--ill-paper); stroke-opacity: 0.6; stroke-width: 1.25; }
.au-sl-subhand { stroke: var(--ill-paper); stroke-width: 1.75; stroke-linecap: round; }
.au-sl-applique { stroke: var(--ill-accent); stroke-width: 3; stroke-linecap: round; }
.au-sl-hand { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 1; }
.au-sl-seconds { stroke: var(--ill-accent); stroke-width: 1.75; stroke-linecap: round; }
.au-sl-brass { fill: var(--ill-accent); }
.au-sl-reflect { fill: none; stroke: var(--ill-paper); stroke-opacity: 0.35; stroke-width: 3; stroke-linecap: round; }
.au-sl-glint { fill: var(--ill-paper); opacity: 0; animation: au-glint calc(var(--duration-loader) * 5) var(--ease-standard) var(--duration-loader) infinite; }
.au-sl-sec { transform-box: fill-box; transform-origin: center; animation: au-sweep calc(var(--duration-loader) * 37.5) linear infinite; }
.au-sl-breathe { animation: au-breathe calc(var(--duration-loader) * 5) var(--ease-standard) infinite alternate; }
@keyframes au-sweep { to { transform: rotate(360deg); } }
@keyframes au-glint {
  0%, 55% { opacity: 0; transform: translateX(0); }
  62% { opacity: 0.3; }
  85%, 100% { opacity: 0; transform: translateX(300px); }
}
@keyframes au-breathe {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* ── 3 · Certificate ── */
.au-cert { align-items: center; gap: var(--space-4); padding-top: var(--space-12); }
.au-cert--phone { padding-top: 0; }
.au-cert__top { position: absolute; top: 0; left: 0; padding: var(--space-6) var(--space-10); }
.au-cert__doc {
  position: relative;
  width: calc(var(--size-dialog) - var(--space-6));
  max-width: calc(100% - var(--space-8));
  margin-top: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.au-cert__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-control);
}
/* Guilloché in the seal's corner: fine brass rings, fading out */
.au-cert__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-accent) 22%, transparent) 0 1px, transparent 1px 6px);
  -webkit-mask-image: radial-gradient(circle at 100% 0, var(--color-foreground), transparent 55%);
  mask-image: radial-gradient(circle at 100% 0, var(--color-foreground), transparent 55%);
  pointer-events: none;
}
.au-cert__frame > * { position: relative; }
.au-cert__seal { position: absolute; top: calc(var(--space-6) * -1); right: var(--space-4); z-index: 1; }
.au-cert__over { text-align: center; color: var(--color-accent); }
.au-cert .au-head { align-items: center; text-align: center; }
.au-cert .au-head::after { content: ''; order: 1; width: var(--space-12); margin: var(--space-2) 0; border-top: 1px solid var(--color-accent); }
.au-cert .au-head > .au-lead { order: 2; }
.au-cert .au-return { align-self: center; }
.au-cert__attest { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-lg); font-style: italic; text-align: center; color: var(--color-muted); }
.au-cert__journey { display: flex; align-items: center; gap: var(--space-4); margin: auto 0 var(--space-2); }
.au-cert__journey .ill { --ill-size: 232px; }
.au-cert__journey figcaption { max-width: 20ch; }
.au-cert--phone .au-cert__top { position: static; padding: var(--space-10) var(--space-5) var(--space-6); }
.au-cert--phone .au-cert__journey .ill { --ill-size: 176px; }
.au-cert__doc--phone { width: auto; max-width: none; margin: 0 var(--space-3); }
.au-cert__doc--phone .au-cert__frame { padding: var(--space-8) var(--space-5) var(--space-6); }
.au-cert--phone .au-cert__journey { flex-direction: column; gap: var(--space-1); margin: auto 0 var(--space-6); text-align: center; }
.au-cert--phone .au-cert__seal { top: calc(var(--space-4) * -1); right: var(--space-3); }
.au-cert--phone .au-seal { width: var(--space-16); }
.au-cert--phone .au-cert__over { padding-top: var(--space-2); }

/* The seal: a brass rosette drawn once, the armillary at its heart */
.au-seal { display: block; width: var(--space-20); height: auto; overflow: visible; }
.au-seal__tail { fill: var(--color-accent); opacity: 0.85; }
.au-seal__ros { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1.25; stroke-dasharray: 1; animation: au-draw calc(var(--duration-slower) * 3) var(--ease-standard) var(--duration-slow) both; }
.au-seal__ring { fill: none; stroke: var(--color-accent); stroke-width: 0.75; }
.au-seal .au-arm--seal { --au-arm-ground: var(--color-accent-soft); --au-arm-brass: var(--color-accent); width: 38px; height: 38px; color: var(--color-accent); }
@keyframes au-draw {
  0% { stroke-dashoffset: 1; fill-opacity: 0; }
  60% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

/* ── Verify the email: the letter rising from its envelope ── */
.au-inbox { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.au-inbox .au-lead { text-align: center; }
.au-addr { color: var(--color-foreground); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.au-env { display: block; width: calc(var(--space-24) + var(--space-6)); height: auto; overflow: visible; }
.au-env__paper { fill: var(--ill-paper); stroke: var(--ill-line); stroke-width: 1.25; }
.au-env__lines { fill: none; stroke: var(--ill-line); stroke-opacity: 0.4; stroke-width: 1.25; stroke-linecap: round; }
.au-env__body { fill: var(--ill-fill); stroke: var(--ill-line); stroke-width: 1.25; stroke-linejoin: round; }
.au-env__fold { fill: none; stroke: var(--ill-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.au-env__seal { fill: var(--ill-accent); }
.au-env__letter { animation: au-letter calc(var(--duration-slower) * 2) var(--ease-enter) var(--duration-slow) both; }
@keyframes au-letter {
  from { transform: translateY(18px); }
  to { transform: translateY(0); }
}

/* ── A visitor on a listing, asked to sign in ── */
.au-listing__photo { flex: none; height: 42%; background: var(--ill-fill); }
.au-listing__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.au-listing__title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); }
.au-listing__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.au-price { font-size: var(--text-figure-sm); line-height: var(--leading-figure-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.au-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.au-badge .icon { width: var(--space-3); height: var(--space-3); }
.au-badge--info { background: var(--color-info-soft); color: var(--color-info-text); }
.au-scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.au-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.au-sheet__grab { align-self: center; width: var(--space-10); height: var(--space-1); border-radius: var(--radius-full); background: var(--color-default); }
.au-sheet--split { padding-top: 0; }
.au-sheet--split .au-sheet__grab { position: absolute; top: var(--space-2); left: 50%; z-index: 1; background: color-mix(in srgb, var(--au-on-green) 45%, transparent); transform: translateX(-50%); }
.au-sheet__band { display: flex; align-items: center; justify-content: center; height: var(--space-24); margin: 0 calc(var(--space-5) * -1) var(--space-1); }
.au-sheet__band .au-arm { --au-arm: var(--space-12); }
.au-sheet__arm { display: flex; justify-content: center; }
.au-sheet__arm .au-arm { --au-arm: var(--space-12); --au-arm-ground: var(--color-surface); }
.au-sheet--certificate { text-align: center; }
.au-sheet__seal { display: flex; justify-content: center; }
.au-sheet__seal .au-seal { width: var(--space-16); }

/* ── Signed in, address not verified: the app's top with the banner ── */
.au-snip { width: 100%; overflow: hidden; border: 1px solid var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-page); box-shadow: var(--shadow-card); font-size: var(--text-sm); line-height: var(--leading-sm); }
.au-app-top { display: flex; align-items: center; gap: var(--space-5); height: var(--size-header); padding: 0 var(--space-5); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.au-app-nav { display: flex; flex: 1; gap: var(--space-4); min-width: 0; overflow: hidden; color: var(--color-muted); white-space: nowrap; }
.au-who { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); white-space: nowrap; }
.au-avatar { display: inline-grid; flex: none; place-items: 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-size: var(--text-xs); font-weight: var(--weight-semibold); }
.au-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); background: var(--color-warning-soft); color: var(--color-warning-text); }
.au-banner .icon { flex: none; margin-top: 2px; }
.au-banner__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.au-banner__body span { color: var(--color-foreground); }
.au-banner .btn { flex: none; }
.au-app-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); padding: var(--space-5); }
.au-app-photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-card); background: var(--ill-fill); }
.au-app-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.au-app-info .au-btn { width: auto; margin-top: var(--space-2); padding: 0 var(--space-8); }
.au-locked { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); }
.au-locked .icon { width: var(--space-3); height: var(--space-3); }

/* ── 4 · Back office: sober — the sans for titles, the muted page, nothing to sell ── */
.au-adm { background: var(--color-surface-muted); }
.au-adm .au-title { font-family: var(--font-sans); font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: 0; }
.au-adm__top { display: flex; flex: none; align-items: center; gap: var(--space-3); height: var(--size-header); padding: 0 var(--space-6); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.au-adm__env { padding: 2px var(--space-2); border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); white-space: nowrap; }
.au-adm__spacer { flex: 1; }
.au-adm__center { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); }
.au-adm__card { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 280px); overflow: hidden; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.au-adm__main { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.au-adm__aside { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-left: 1px solid var(--color-default); background: var(--color-page); }
.au-adm__aside .ill { --ill-size: 200px; align-self: center; }
.au-adm__where { display: flex; align-items: flex-start; gap: var(--space-3); }
.au-adm__where .icon { flex: none; margin-top: 2px; color: var(--color-muted); }
.au-adm__where > div { display: flex; flex-direction: column; }
.au-adm__where strong { font-weight: var(--weight-medium); }
.au-adm__noreg { max-width: 48ch; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); text-align: center; }
.au-adm--phone .au-adm__top { padding: var(--space-6) var(--space-4) 0; height: auto; padding-bottom: var(--space-3); }
.au-adm--phone .au-adm__top .au-wordmark,
.au-adm--phone .au-adm__top .t-caption { display: none; }
.au-adm--phone .au-adm__center { justify-content: flex-start; padding: var(--space-5) var(--space-3); }
.au-adm--phone .au-adm__card { grid-template-columns: minmax(0, 1fr); width: 100%; }
.au-adm--phone .au-adm__aside { border-top: 1px solid var(--color-default); border-left: 0; }
.au-adm--phone .au-adm__aside .ill { --ill-size: 144px; }
.au-adm--phone .au-adm__main { padding: var(--space-6) var(--space-5); }
.au-who--chip { align-self: flex-start; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 1px solid var(--color-default); border-radius: var(--radius-full); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.au-who--chip .au-avatar { width: var(--space-6); height: var(--space-6); font-size: var(--text-2xs); }
.au-codes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.au-code {
  position: relative;
  display: block;
  width: 100%;
  height: var(--size-control-lg);
  padding: 0;
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-foreground);
  font: var(--weight-semibold) var(--text-xl) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}
.au-code.is-active { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); }
.au-code.is-active::after { content: ''; position: absolute; top: 28%; bottom: 28%; left: 50%; border-left: 2px solid var(--color-foreground); animation: au-caret calc(var(--duration-slower) * 1.75) steps(1) infinite; }
@keyframes au-caret { 50% { opacity: 0; } }

/* The operator's landing: the hub workspace of their own hub */
.au-hub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-5); }
.au-hub__art .ill { --ill-size: 176px; }
.au-hub__list { display: flex; flex-direction: column; gap: var(--space-2); }
.au-hub__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.au-hub__row strong { flex: 1; min-width: 0; font-weight: var(--weight-medium); }
.au-hub__thumb { display: block; flex: none; width: var(--space-10); height: var(--space-10); overflow: hidden; border-radius: var(--radius-control); }

/* ── Reduced motion: every moving part rests on its still pose ── */
@media (prefers-reduced-motion: reduce) {
  .au-arm__spin,
  .au-sl-sec,
  .au-sl-glint,
  .au-sl-breathe,
  .au-seal__ros,
  .au-env__letter,
  .au-code.is-active::after { animation: none; }
}

/* ── Not found page (layouts/notFound.html, tools/genNotFound.mjs) ──
   The frames each variant is shown in, the product's 404 page and listing state inside them, and the
   motion of the four pictures (symbols #nf-armillary, #nf-dial, #nf-loupe, #nf-vitrine drawn with the
   classes of assets/illustrations.js). Every value is a token. Each moving part rests in its still pose
   (its style without the animation); the keyframes end on that pose, so under reduced motion — every
   animation cut to its last frame — each picture is complete and still. */

/* The frames: the desktop beside the phone, a row for the 404 and a row for the listing state */
.nf-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.nf-row-head .t-label { margin: 0; }
.nf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 3.125);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}
.nf-frame { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; min-width: 0; }
.nf-frame .device { margin: 0; }
.nf-frame--phone .device { justify-self: center; }
@media (max-width: 900px) {
  .nf-stage { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .nf-frame--phone { max-width: calc(var(--space-24) * 3.125); width: 100%; margin: 0 auto; }
}

/* ── The product's screen: the top bar ── */
.nf-app { display: flex; flex-direction: column; min-height: 100%; background: var(--color-page); color: var(--color-foreground); font-size: var(--text-body); line-height: var(--leading-body); }
.nf-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: none;
  height: var(--size-header);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface);
}
.nf-bar--phone { gap: var(--space-2); height: var(--size-control-lg); padding: 0 var(--space-2) 0 var(--space-4); }
.nf-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-foreground); text-decoration: none; }
.nf-brand:hover { color: var(--color-foreground); }
.nf-bar--phone .nf-brand .lg-wordmark { font-size: var(--text-xs); }
.nf-mark { display: inline-grid; flex: none; color: var(--color-primary); }
.nf-mark svg { width: var(--space-6); height: var(--space-6); }
.nf-bar__nav { display: flex; gap: var(--space-5); }
.nf-bar__nav a { color: var(--color-muted); text-decoration: none; font-weight: var(--weight-medium); }
.nf-bar__nav a:hover { color: var(--color-foreground); }
.nf-bar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.nf-bar--phone .btn--ghost { width: var(--size-touch); height: var(--size-touch); padding: 0; }

/* ── The 404: the picture beside the words on a desktop, above them on a phone ── */
.nf-404 { display: grid; flex: 1; align-items: center; }
.nf-404--desktop { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-6); padding: var(--space-6) var(--space-8); }
.nf-404--phone { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-4) var(--space-8); text-align: center; }
.nf-404__picture { display: flex; justify-content: center; min-width: 0; }
/* .ill.nf-pic: the sprite's own .ill rule is put in the page after this file, so the pair outranks it */
.ill.nf-pic--desk { --ill-size: 100%; --ill-stroke: 1.75; }
.ill.nf-pic--phone { --ill-size: 100%; --ill-stroke: 1.5; }
.nf-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.nf-404--phone .nf-copy { align-items: stretch; }
.nf-code { margin: 0; color: var(--color-accent); }
.nf-heading { margin: 0; }
.nf-404--phone .nf-heading { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.nf-text { margin: 0; color: var(--color-muted); max-width: 44ch; }
.nf-404--phone .nf-text { margin: 0 auto; }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.nf-actions .btn, .nf-gone .btn, .nf-sold .btn { text-decoration: none; }
.nf-404--phone .nf-actions .btn { height: var(--size-control-lg); }

/* The search: one field and its button */
.nf-search { display: flex; gap: var(--space-2); width: 100%; max-width: calc(var(--space-24) * 4); margin: 0; }
.nf-search--phone { max-width: none; }
.nf-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  height: var(--size-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-subtle);
}
.nf-search__field:focus-within { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.nf-search__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--color-foreground); font: inherit; outline: none; }
.nf-search__field input::placeholder { color: var(--color-subtle); }
.nf-search--phone .nf-search__field, .nf-search--phone .btn { height: var(--size-control-lg); }

/* The categories, as quiet links */
.nf-browse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; }
.nf-404--phone .nf-browse { justify-content: center; }
.nf-chip { color: var(--color-foreground); font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }

/* ── The listing state: withdrawn (no longer available, the way to its category) or sold ── */
.nf-listing { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-8) var(--space-6); }
.nf-listing--phone { padding: var(--space-3) var(--space-4) var(--space-8); }
.nf-listing .t-label { margin: var(--space-2) 0 0; }
.nf-crumbs { display: flex; align-items: center; gap: var(--space-2); color: var(--color-subtle); font-size: var(--text-small); }
.nf-crumbs a { color: var(--color-muted); }
.nf-gone { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-5) var(--space-8); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.nf-listing--phone .nf-gone { flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-4); text-align: center; }
.nf-gone__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.nf-listing--phone .nf-gone__copy { align-items: stretch; }
.nf-listing--phone .nf-gone__copy .badge { align-self: center; }
.nf-gone__copy .t-section-title, .nf-sold__copy .t-section-title { margin: 0; }
.nf-gone .btn, .nf-sold .btn { margin-top: var(--space-2); }
.nf-sold { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.nf-listing--phone .nf-sold { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.nf-sold__photo { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: var(--radius-card); background: var(--color-surface-muted); }
.nf-sold__badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-surface-inverted); color: var(--color-inverted); border-color: transparent; }
.nf-sold__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.nf-listing--phone .nf-sold__copy { align-items: stretch; }
.nf-sold__copy .t-label { margin: 0; }
.nf-sold__state { display: flex; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-default); }
.nf-sold__state p { margin: 0; }
.nf-sold__state .icon { margin-top: var(--space-1); color: var(--color-muted); }

/* The piece's drawing in place of its photo, and the cards of related pieces */
.nf-thumb { display: grid; place-items: center; flex: none; width: var(--space-16); height: var(--space-16); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-subtle); }
.nf-thumb svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nf-thumb--photo { width: 55%; height: auto; aspect-ratio: 1; background: transparent; }
.nf-listing--desktop .nf-card .nf-thumb { width: var(--space-12); height: var(--space-12); }
.nf-listing--desktop .nf-card__title { -webkit-line-clamp: 1; }
.nf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.nf-listing--phone .nf-cards { grid-template-columns: minmax(0, 1fr); }
.nf-card { display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-foreground); text-decoration: none; }
.nf-card:hover { color: var(--color-foreground); box-shadow: var(--shadow-raised); }
.nf-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nf-card__title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nf-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ── The pictures: their own marks, then their motion ── */

/* Impressions pressed into the velvet, a plaque's words, glare on a lens, a glint on glass or brass */
.nf-imp { fill: var(--ill-line); fill-opacity: 0.16; stroke: var(--ill-line); stroke-opacity: 0.7; stroke-width: var(--ill-stroke, 1.5); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nf-plaque { fill: var(--ill-line); font-family: var(--font-sans); font-size: 8px; font-weight: var(--weight-medium); letter-spacing: 0.02em; }
.nf-l-glare { fill: none; stroke: var(--ill-paper); stroke-width: 2.5; stroke-linecap: round; opacity: 0.9; vector-effect: non-scaling-stroke; }
.nf-v-glint { fill: var(--ill-paper); opacity: 0; }
.nf-glass { fill: var(--ill-paper); fill-opacity: 0.18; stroke: var(--ill-line); stroke-width: var(--ill-stroke, 1.5); stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Armillary — the axis tips from upright to the mark's tilt, the equator tumbles and the zodiac band
   precesses until both rest as in the logo; then a glint runs along the fixed meridian */

/* Four past four — the crown is out while the hands sweep round six hours; they stop at 4:04:00,
   the crown is pushed home, and the model line comes up on the dial */
.nf-d-hour, .nf-d-min { transform-box: fill-box; transform-origin: center; }
.nf-d-hour { transform: rotate(122deg); animation: nf-d-hour calc(var(--duration-loader) * 2) var(--ease-standard) var(--duration-slow) 1 both; }
@keyframes nf-d-hour { 0% { transform: rotate(-55deg); } 100% { transform: rotate(122deg); } }
.nf-d-min { transform: rotate(24deg); animation: nf-d-min calc(var(--duration-loader) * 2) var(--ease-standard) var(--duration-slow) 1 both; }
@keyframes nf-d-min { 0% { transform: rotate(-2100deg); } 100% { transform: rotate(24deg); } }
.nf-d-crown { animation: nf-d-crown calc(var(--duration-loader) * 2 + var(--duration-slower)) var(--ease-standard) 0ms 1 both; }
@keyframes nf-d-crown { 0% { transform: translateX(0); } 8%, 82% { transform: translateX(4px); } 100% { transform: translateX(0); } }
.nf-d-ref { animation: nf-d-ref calc(var(--duration-loader) * 2 + var(--duration-slower) * 2) var(--ease-standard) 0ms 1 both; }
@keyframes nf-d-ref { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }

/* Under the loupe — it drifts over the right four, the left four, and rests on the zero; what is under
   the lens is drawn larger and moves the other way, so the magnified part stays where it lies */
.nf-l-drift { animation: nf-l-drift calc(var(--duration-loader) * 3) var(--ease-standard) var(--duration-slow) 1 both; }
.nf-l-under { animation: nf-l-under calc(var(--duration-loader) * 3) var(--ease-standard) var(--duration-slow) 1 both; }
@keyframes nf-l-drift { 0% { transform: translate(72px, -6px); } 22%, 36% { transform: translate(37px, 0); } 62%, 76% { transform: translate(-37px, 0); } 100% { transform: translate(0, 0); } }
@keyframes nf-l-under { 0% { transform: translate(-72px, 6px); } 22%, 36% { transform: translate(-37px, 0); } 62%, 76% { transform: translate(37px, 0); } 100% { transform: translate(0, 0); } }

/* Not on display — the lamp in the case warms up, the plaque is stood up where the piece would be,
   a glint passes over the glass */
.nf-v-light { animation: nf-v-light var(--duration-loader) var(--ease-standard) var(--duration-slow) 1 both; }
@keyframes nf-v-light { 0% { opacity: 0; } 25% { opacity: 0.55; } 38% { opacity: 0.2; } 100% { opacity: 0.9; } }
.nf-v-plaque { transform-box: fill-box; transform-origin: 50% 100%; animation: nf-v-plaque var(--duration-slower) var(--ease-enter) calc(var(--duration-slow) + var(--duration-loader) * 0.7) 1 both; }
@keyframes nf-v-plaque { 0% { opacity: 0; transform: scaleY(0.2); } 40% { opacity: 1; } 100% { opacity: 1; transform: scaleY(1); } }
.nf-v-glint { animation: nf-v-glint calc(var(--duration-loader) * 0.9) var(--ease-standard) calc(var(--duration-slow) + var(--duration-loader) * 1.2) 1 both; }
@keyframes nf-v-glint { 0% { opacity: 0; transform: translateX(-30px); } 25% { opacity: 0.6; } 75% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(110px); } }

/* Email templates, second round: the picture is a GIF (an <img>), not a sprite symbol.
   Every value is a token of tokens.css. Goes after the .em-pic rules of components.css. */

/* The picture as the sent letter carries it: 280 px wide on its solid plate (the GIF's own
   background is the surface color), a hair of rounding for clients that honour it */
.em-pic .em-img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Dark theme: the GIF's plate stays the light surface, so the picture sits on a hairline frame
   instead of a halo */
:root[data-theme='dark'] .em-pic .em-img {
  outline: 1px solid var(--color-default);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .em-pic .em-img {
    outline: 1px solid var(--color-default);
  }
}

/* Images off: the room of the picture holds its alt text, as a client shows it */
.em-mini--images .em-pic {
  margin: var(--space-6) var(--space-10) 0;
  padding: 0;
}

.em-pic--off {
  align-items: center;
  height: 175px;
  padding: var(--space-4);
  border: 1px dashed var(--color-emphasis);
  border-radius: var(--radius-card);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  text-align: center;
}

.em-mini--phone .em-pic .em-img {
  width: 240px;
}

.em-alt {
  max-width: 280px;
}

/* ── Not found page, Armillary (selected): "4 ◎ 4" with the logo as the zero — second pass.
   Replaces, from the first pass: .nf-a-glint, .nf-a-glint__arc, .nf-a-axis, .nf-a-eq, .nf-a-zod and
   @keyframes nf-a-axis, nf-a-eq, nf-a-zod, nf-a-glint (the picture no longer uses them; delete them).
   The parts rest in the mark's pose; every keyframe ends on it, so under reduced motion (each
   animation cut to its last frame, one iteration) the picture is the complete, still mark. ── */

/* The mark's knockouts take the colour behind the picture: the product screen's page */
.nf-pic--armillary { --lg-ground: var(--color-page); --nf-glint: var(--ill-paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nf-pic--armillary { --nf-glint: var(--ill-line); }
}
:root[data-theme='dark'] .nf-pic--armillary { --nf-glint: var(--ill-line); }

/* The fours: one stroke each, as heavy as the meridian's band */
.nf-ar-four { fill: none; stroke: var(--ill-line); stroke-linecap: butt; stroke-linejoin: round; }

/* Every moving part turns or folds about the mark's centre (an unseen circle centres its box) */
.nf-ar-arrive, .nf-ar-sphere, .nf-ar-eq, .nf-ar-zod, .nf-ar-glint { transform-box: fill-box; transform-origin: center; }

/* Arrival — the axis tips from upright to the mark's tilt; the equator turns over, the zodiac band
   swings round, and both settle as in the logo */
.nf-ar-arrive { animation: nf-ar-arrive calc(var(--duration-loader) * 1.5) var(--ease-enter) var(--duration-slow) 1 both; }
@keyframes nf-ar-arrive { 0% { transform: rotate(28deg); } 100% { transform: rotate(0); } }
.nf-ar-eq { animation: nf-ar-eq calc(var(--duration-loader) * 1.5) var(--ease-enter) var(--duration-slow) 1 both; }
@keyframes nf-ar-eq { 0% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
.nf-ar-zod { animation: nf-ar-zod calc(var(--duration-loader) * 1.5) var(--ease-enter) var(--duration-slow) 1 both; }
@keyframes nf-ar-zod { 0% { transform: rotate(-120deg); } 100% { transform: rotate(0); } }

/* Idle, after arrival — the sphere turns half a round inside the fixed meridian and rests, twice a
   cycle, so the cycle ends on the pose it began with (the Sweep loader, slowed right down) */
.nf-ar-sphere { animation: nf-ar-sphere calc(var(--duration-loader) * 8) var(--ease-standard) calc(var(--duration-slow) + var(--duration-loader) * 1.5) infinite both; }
@keyframes nf-ar-sphere { 0% { transform: rotate(0); } 16% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 66% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }

/* The glint — between the turns it runs a third of the way round the meridian and fades */
.nf-ar-glint { opacity: 0; animation: nf-ar-glint calc(var(--duration-loader) * 8) var(--ease-standard) calc(var(--duration-slow) + var(--duration-loader) * 1.5) infinite both; }
.nf-ar-glint__arc { fill: none; stroke: var(--nf-glint); stroke-width: 2.25; stroke-linecap: round; }
@keyframes nf-ar-glint {
  0%, 22% { opacity: 0; transform: rotate(0); }
  26% { opacity: 0.85; }
  36% { opacity: 0; transform: rotate(120deg); }
  37%, 72% { opacity: 0; transform: rotate(180deg); }
  76% { opacity: 0.85; }
  86%, 100% { opacity: 0; transform: rotate(300deg); }
}

/*
 * Components, group 1b — the Select as our own listbox (replaces the native select and its system menu).
 *
 * DROP from components.css (group 1's Select block): .select__native (all its rules, including
 * `.select__native:disabled`, `.select__native option` and `.select__native:has(option[value=''])`),
 * .select__list, .select__option (and its :hover / .is-hover / [aria-selected] / [aria-disabled] rules),
 * .select--open, .select-stage, .select__button. KEEP: .select__control, .select__chevron, .select__value,
 * .select__value--placeholder, .select__box, .select--compact*, .kbd and every .field* rule.
 * The new rules below replace the dropped ones.
 */

/* The trigger: a button in the field's look; the chevron sits at its right edge */
.select__button {
  width: 100%;
  padding: 0 var(--space-10) 0 var(--space-3);
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.select--compact .select__button { padding-left: 0; }
.select--compact .field__affix + .select__value { padding-left: var(--space-3); }
.select__button:disabled { cursor: not-allowed; color: var(--color-subtle); }
.select__button[aria-expanded='true'] .select__chevron { transform: rotate(180deg); }
.field__error[hidden] { display: none; }

/* The popup: a card of the overlay level, below the trigger or (with --up) above it */
.listbox {
  position: absolute;
  z-index: calc(var(--z-header) - 1);
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  max-height: calc(var(--size-control-sm) * 6 + var(--space-2));
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  outline: 0;
  animation: listbox-in var(--duration-fast) var(--ease-enter);
}
.listbox[hidden] { display: none; }
.listbox--up { top: auto; bottom: calc(100% + var(--space-1)); animation-name: listbox-in-up; }
@keyframes listbox-in { from { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); } to { opacity: 1; transform: none; } }
@keyframes listbox-in-up { from { opacity: 0; transform: translateY(var(--space-1)); } to { opacity: 1; transform: none; } }

.listbox__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  cursor: pointer;
}
.listbox__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listbox__meta { flex: none; color: var(--color-subtle); font-size: var(--text-xs); }
.listbox__check { flex: none; color: var(--color-primary); opacity: 0; }
.listbox__option:hover, .listbox__option.is-active { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.listbox__option:hover .listbox__check, .listbox__option.is-active .listbox__check { color: var(--color-primary-strong); }
.listbox__option[aria-selected='true'] { font-weight: var(--weight-medium); }
.listbox__option[aria-selected='true'] .listbox__check { opacity: 1; }
.listbox__option[aria-disabled='true'] { color: var(--color-subtle); background: transparent; cursor: not-allowed; }
.listbox__group { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--color-muted); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.listbox__divider { height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-default); }

/* The samples' stages: room for the open list under its trigger; the last one is short, to show the list opening above */
.select-stage { min-height: 296px; }
.select-stage--long { min-height: 360px; }
.select-stage--edge { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; height: 232px; }
.sc-state > .select-stage { align-self: stretch; }
.select-stage--edge .select { align-self: stretch; }

/* ── Auth layout, round 2 (tools/genSignIn.mjs): Split atelier with the panel on the left and its
   scenes taking turns. Appended after the first round's rules, which it overrides where they meet:
   .au-split__panel gets order and padding; the panel's lockup replaces .au-split__panel .au-arm--panel;
   the carousel replaces .au-split__scene, .au-split__promise, .au-split__promise--sm,
   .au-split__band--scene and .au-split__band .ill; .au-split__top is no longer written. Those can be
   deleted from components.css. ── */

/* ── Scene carousel (reusable): scenes from assets/illustrations.js take turns, each with its line;
   a calm cross-fade, dots to switch. The script is inline on layouts/signIn.html (SCENE_SCRIPT). ── */
.scene-carousel { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; }
.scene-carousel__stage { display: grid; justify-items: center; width: 100%; }
.scene-carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity calc(var(--duration-slower) * 1.5) var(--ease-standard), visibility 0s linear calc(var(--duration-slower) * 1.5);
}
.scene-carousel__slide.is-current { opacity: 1; visibility: visible; transition-delay: 0s; }
.scene-carousel__slide .ill { --ill-size: 400px; }
.scene-carousel__line {
  max-width: 14em;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--weight-medium);
  text-align: center;
  text-wrap: balance;
  color: inherit;
}
.scene-carousel__slide.is-current .scene-carousel__line { animation: scene-line var(--duration-slower) var(--ease-enter) var(--duration-base) both; }
@keyframes scene-line {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to { opacity: 1; transform: none; }
}
.scene-carousel__dots { display: flex; gap: var(--space-1); }
/* A 24 px target around a small dot; the current one is a longer brass bar */
.scene-carousel__dot {
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.scene-carousel__dot::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.35;
  transition: width var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.scene-carousel__dot:hover::before { opacity: 0.7; }
.scene-carousel__dot[aria-current='true']::before { width: var(--space-5); background: var(--au-brass, var(--color-accent)); opacity: 1; }
.scene-carousel__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Compact: the phone's short band */
.scene-carousel--compact { gap: var(--space-2); }
.scene-carousel--compact .scene-carousel__slide { gap: var(--space-2); }
.scene-carousel--compact .scene-carousel__slide .ill { --ill-size: 168px; }
.scene-carousel--compact .au-rule { display: none; }
.scene-carousel--compact .scene-carousel__line { max-width: 15em; font-size: var(--text-xl); line-height: var(--leading-xl); }

/* ── Split atelier: the panel on the left (the form stays first in the page's order) ── */
.au-split__panel { order: -1; justify-content: stretch; padding: var(--space-20) var(--space-10) var(--space-6); }
.au-split__panel > .scene-carousel { flex: 1; }
.au-split__panel .scene-carousel__stage { margin: auto 0; }
.au-split__brand { position: absolute; top: var(--space-8); left: var(--space-8); z-index: 1; }
.au-split__brand .au-arm--lockup { --au-arm: var(--space-8); }
.au-split--tablet .au-split__form { padding: var(--space-8) var(--space-8); }
.au-split--tablet .au-split__panel { padding: var(--space-20) var(--space-6) var(--space-6); }
.au-split--tablet .scene-carousel__line { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.au-split__band { gap: var(--space-3); padding: var(--space-10) var(--space-5) var(--space-6); }
.au-phones .device--tablet { zoom: 0.64; }

@media (prefers-reduced-motion: reduce) {
  .scene-carousel__slide,
  .scene-carousel__dot::before { transition: none; }
  .scene-carousel__slide.is-current .scene-carousel__line { animation: none; }
}

/* A row holding only the wide crop: centered in the grid */
.au-states > .au-fig--wide:only-child { grid-column: 2 / span 2; }
@media (max-width: 1180px) { .au-states > .au-fig--wide:only-child { grid-column: 1 / -1; } }

/* ── Phone: what the compact scale (tokens.css) cannot reach by itself ──
   An icon and a picture carry their size and line on their own class, so inside a phone they are
   given the phone's: the base icon a pixel smaller, the tab bar's 22, every picture's line finer. */
:is(.device--phone, .st-phone) .icon:not([class*='icon--']) { width: var(--icon-size); height: var(--icon-size); stroke-width: var(--icon-stroke); }
:is(.device--phone, .st-phone) .icon--24 { width: calc(var(--icon-size) + var(--space-2) - 1px); height: calc(var(--icon-size) + var(--space-2) - 1px); stroke-width: var(--icon-stroke); }
:is(.device--phone, .st-phone) .ill { --ill-stroke: var(--ill-stroke-compact); }

/* ── Icons page (tools/genIcons.mjs): the base grid, the domain cards, the grid and the rules ── */
.ic-group { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.ic-group:first-child { margin-top: 0; }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-24) * 2), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ic-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'art name' 'art where' 'art new'; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ic-tile__art { grid-area: art; display: flex; align-items: center; gap: var(--space-2); color: var(--color-foreground); }
.ic-tile__name { grid-area: name; font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--leading-mono); color: var(--color-foreground); overflow-wrap: anywhere; }
.ic-tile__where { grid-area: where; color: var(--color-muted); }
.ic-tile .ic-new { grid-area: new; justify-self: start; }
.ic-domain { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-24) * 3.5), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ic-dcard { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); }
.ic-dcard__sizes { display: flex; flex: none; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface-muted); color: var(--color-primary-strong); }
.ic-32 { width: var(--space-8); height: var(--space-8); stroke-width: var(--icon-stroke-lg); }
.ic-dcard__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ic-dcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; }
.ic-dcard__where { margin: 0; color: var(--color-muted); }
.ic-rules { display: grid; gap: var(--space-6); }
.ic-gridfigs { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.ic-gridfig { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0; }
.ic-gridfig__art { width: calc(var(--space-24) * 2); height: calc(var(--space-24) * 2); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ic-gridfig__lines { fill: none; stroke: var(--color-default); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ic-gridfig__keyline { fill: var(--color-primary-soft); fill-opacity: 0.6; stroke: var(--color-accent); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
/* Enlarged, the glyph is drawn as its construction line: the real stroke would fill the grid. The
   figure is 12 times the 16-unit grid, so a 2 px line is a sixth of a unit (vector-effect does not
   reach inside a <use>). */
.ic-gridfig__glyph { fill: none; stroke: var(--color-primary-strong); stroke-width: calc(var(--space-1) / 24); stroke-linecap: round; stroke-linejoin: round; }
.ic-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-24) * 2), 1fr)); gap: var(--space-3); }
.ic-size { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ic-size__art { display: flex; align-items: center; height: var(--space-8); color: var(--color-foreground); }
.ic-size__px { font-weight: var(--weight-semibold); }
.ic-phone { width: var(--icon-size-phone); height: var(--icon-size-phone); stroke-width: var(--icon-stroke-lg); }
.ic-rulelist { display: grid; gap: var(--space-2); max-width: var(--size-prose); margin: 0; padding-left: var(--space-5); }

/* ── Security page (sec-…): tags and claims, the legend, the drawings. Every value is a token. ── */
.sec-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.sec-legend__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.sec-legend__item p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
}

.sec-group { margin-top: var(--space-6); }
.sec-group .t-card-title { margin: 0 0 var(--space-3); }
.sec-claims {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.sec-claim {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-default);
}
.sec-claim:last-child { border-bottom: 0; }
.sec-claim p {
  margin: 0;
  max-width: 78ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-foreground);
}
.sec-claim--not p { color: var(--color-muted); }

.sec-table td { vertical-align: top; }
.sec-table .sec-table__item { font-weight: var(--weight-semibold); min-width: 12em; }
.sec-table td:nth-child(3) { min-width: 22em; }
.sec-table td:nth-child(4) { min-width: 9em; }

.sec-fig { margin: var(--space-6) 0 0; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.sec-fig__cap { margin: 0; padding: 0 var(--space-6) var(--space-4); color: var(--color-muted); }
.sec-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-muted); }
.sec-key__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.sec-key__swatch { width: 24px; height: 0; border-top: 2px solid var(--color-success); }
.sec-key__swatch--planned { border-top: 2px dashed var(--color-info); }

/* Drawings: strokes and fills on tokens; done is solid, planned is dashed, so color is never the only signal */
.sec-node { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1; }
.sec-node--done { fill: var(--color-success-soft); stroke: var(--color-success); stroke-width: 1.5; }
.sec-node--planned { fill: var(--color-info-soft); stroke: var(--color-info); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sec-text { fill: var(--color-foreground); font-size: 14px; font-weight: var(--weight-semibold); text-anchor: middle; }
.sec-text--lg { font-size: 18px; }
.sec-text--end { text-anchor: end; }
.sec-sub { fill: var(--color-muted); font-size: 12px; text-anchor: middle; }
.sec-text--start, .sec-sub--start { text-anchor: start; }
.sec-sub--head { font-weight: var(--weight-semibold); fill: var(--color-foreground); }
.sec-sub--done { fill: var(--color-success-text); font-weight: var(--weight-semibold); }
.sec-mark--done { fill: var(--color-success-text); font-size: 12px; }
.sec-mark--planned { fill: var(--color-info-text); font-size: 12px; }
.sec-lock { fill: none; stroke: var(--color-foreground); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sec-lock rect { fill: var(--color-surface); }
.sec-lock--done { stroke: var(--color-success-text); }
.sec-lock--planned { stroke: var(--color-info-text); }
.sec-band { fill: none; }
.sec-band--alt { fill: var(--color-surface-muted); }
.sec-dot { fill: var(--color-foreground); }
.sec-ring { fill: none; stroke: var(--color-foreground); stroke-width: 1.5; }
.sec-none { fill: none; stroke: var(--color-emphasis); stroke-width: 1.5; stroke-linecap: round; }
.sec-slot { fill: none; stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 3 3; }

@media (max-width: 760px) {
  .sec-legend { grid-template-columns: minmax(0, 1fr); }
  .sec-claim { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

/* ── Charts (charts/index.html, tools/genCharts.mjs) — proposed ──
   The uses of a chart on the admin's Reports screen, drawn as inline SVG on tokens in Recharts' shapes.
   Every value is a token of tokens.css; the series wears the brand colour, the month in progress is
   hatched, dispute and cancelled wear the feedback tones with an icon, and text stays in the text colours. */
.ch-body { display: flex; flex-direction: column; gap: var(--space-6); }
.ch-sub { margin-top: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-default); }
.ch-muted { color: var(--color-muted); }
.ch-meta th { width: calc(var(--space-24) * 2); color: var(--color-muted); font-weight: var(--weight-medium); text-align: left; vertical-align: top; white-space: normal; }
.ch-meta td { white-space: normal; }
.ch-frame { width: 100%; max-width: calc(var(--space-24) * 7.5); }
.ch-frame--wide { max-width: calc(var(--space-24) * 9); }
.ch-pair { align-items: start; }
.ch-rules { align-items: start; }
.ch-rule { gap: var(--space-2); }
.ch-rule__text { color: var(--color-muted); }
.ch-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); }

/* The card of the Reports screen */
.ch-card { gap: var(--space-4); padding: var(--card-pad); }
.ch-card--focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.ch-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ch-card__title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ch-card__title .t-caption { color: var(--color-muted); }
.ch-card__actions { display: flex; flex: none; gap: var(--space-2); }
.ch-card__bar,
.ch-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ch-controls { justify-content: flex-start; }
.ch-card__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ch-reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@container (max-width: 760px) { .ch-reports { grid-template-columns: minmax(0, 1fr); } }
.ch-scrolled { margin-top: calc(var(--space-24) * -6); }
.ch-tile { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-default); }
.ch-tile .t-label,
.ch-tile .t-caption { color: var(--color-muted); }
.ch-tile .t-figure { font-variant-numeric: tabular-nums lining-nums; }

/* Keys under a chart */
.ch-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.ch-key { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); }
.ch-key__mark { flex: none; width: var(--space-4); height: var(--space-4); }

/* Empty */
.ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--ch-empty-h, 260px); padding: var(--space-6) var(--space-4); text-align: center; }
.ch-empty__text { max-width: calc(var(--space-24) * 3); color: var(--color-muted); }

/* Figures as a table */
.ch-details { font-size: var(--text-body); }
.ch-details summary { width: fit-content; cursor: pointer; color: var(--color-muted); }
.ch-details summary:hover { color: var(--color-foreground); }
.ch-details summary:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ch-details[open] summary { margin-bottom: var(--space-3); }
.ch-table th[scope='row'] { font-weight: var(--weight-medium); text-align: left; }
.ch-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* The drawing */
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-svg text { fill: var(--color-muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.ch-grid { stroke: var(--color-default); stroke-width: 1; }
.ch-base { stroke: var(--color-emphasis); stroke-width: 1; }
.ch-tick { font-size: var(--text-2xs); font-variant-numeric: tabular-nums lining-nums; }
.ch-svg .ch-tick--sub { fill: var(--color-subtle); }
.ch-svg .ch-value { fill: var(--color-foreground); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.ch-svg .ch-cat { fill: var(--color-foreground); }
.ch-svg .ch-step { fill: var(--color-subtle); font-size: var(--text-2xs); font-variant-numeric: tabular-nums lining-nums; }
.ch-svg .ch-group { fill: var(--color-muted); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ch-bar:not([fill]) { fill: var(--color-primary); }
.ch-bar--live { stroke: var(--color-primary); stroke-width: 1.5; }
.ch-bar.ch-bar--danger { fill: var(--color-danger); }
.ch-bar.ch-bar--warning { fill: var(--color-warning); }
.ch-hatch__bg { fill: var(--color-primary-soft); }
.ch-hatch__line { stroke: var(--color-primary); stroke-width: 2; }
.ch-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-line--live { stroke-dasharray: 4 4; }
.ch-dot { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 2; }
.ch-dot--live { fill: var(--color-surface); stroke: var(--color-primary); }
.ch-ico { width: var(--space-4); height: var(--space-4); }
.ch-ico--danger { color: var(--color-danger-text); }
.ch-ico--warning { color: var(--color-warning-text); }
.ch-tip rect { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1; }
.ch-tip path { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1; }
.ch-svg .ch-tip__title { fill: var(--color-muted); font-size: var(--text-2xs); }
.ch-svg .ch-tip__value { fill: var(--color-foreground); font-size: var(--text-body); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.ch-skel { fill: var(--color-surface-muted); animation: skeleton-pulse var(--duration-loader) var(--ease-standard) infinite; }
@media (prefers-reduced-motion: reduce) { .ch-skel { animation: none; } }

/* ═══ Principles and Next steps (step 20): pr- and nx- classes, tokens only ═══ */

/* Principles: the reason, and the pair */
.pr-num { color: var(--color-muted); }
.pr-why { display: flex; flex-direction: column; gap: var(--space-1); max-width: var(--size-prose); }
.pr-why .t-label { color: var(--color-muted); }
.pr-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-form)), 1fr)); gap: var(--space-6); align-items: start; }
.pr-case { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.pr-case--do { border-top: 3px solid var(--color-success); }
.pr-case--dont { border: 1px dashed var(--color-danger); border-top: 3px solid var(--color-danger); background: var(--color-danger-soft); }
.pr-case__head { display: flex; align-items: center; gap: var(--space-2); }
.pr-case__say { color: var(--color-foreground); font-size: var(--text-body); line-height: var(--leading-body); }
.pr-case__body { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pr-sample { align-items: stretch; gap: var(--space-2); min-width: 0; }
.pr-sample > .t-label { color: var(--color-muted); align-self: flex-start; }
.pr-sample > .badge, .pr-sample > .btn, .pr-sample > .listing-card__price, .pr-sample > .auth-seal { align-self: flex-start; }
.pr-sample > .listing-card { width: 100%; max-width: var(--size-form); }
.pr-sample > .modal { max-width: var(--size-form); }
.sc-state.pr-sample > .inspection, .sc-state.pr-sample > .timeline__panel { align-self: stretch; }
.pr-foot { align-self: flex-start; display: inline-flex; }
.pr-note { color: var(--color-muted); }
.pr-case--dont .pr-note { color: var(--color-danger-text); }
.pr-case--dont .pr-sample > .t-label { color: var(--color-danger-text); }
.pr-ratings { display: flex; flex-direction: column; gap: var(--space-3); }

/* The don'ts that need something no component has: they exist only to be refused */
.pr-heavy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: linear-gradient(135deg, var(--color-category-1), var(--color-category-2)); color: var(--color-primary-foreground); box-shadow: var(--shadow-overlay); }
.pr-heavy__title { margin: 0; font-family: var(--font-display); font-size: var(--text-section-title); line-height: var(--leading-section-title); }
.pr-heavy__price { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); }
.pr-serif-small { margin: 0; font-family: var(--font-display); font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pr-loop { animation: pr-pulse var(--duration-slower) var(--ease-standard) infinite alternate; }
@keyframes pr-pulse { from { opacity: 1; } to { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .pr-loop { animation: none; } }
.pr-oldstyle { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; max-width: var(--size-form); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-lg); font-variant-numeric: oldstyle-nums proportional-nums; }
.pr-oldstyle__row { display: flex; justify-content: space-between; gap: var(--space-4); }
.pr-oldstyle dt, .pr-oldstyle dd { margin: 0; }

/* Next steps: the queue */
.nx-queue { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.nx-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
.nx-item--skipped { background: var(--color-surface-muted); }
.nx-item--skipped .nx-item__what { color: var(--color-muted); }
.nx-item__num { display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); border: 1px solid var(--color-emphasis); border-radius: var(--radius-full); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }
.nx-item--progress .nx-item__num { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.nx-item__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nx-item__what { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-foreground); }
.nx-item__waits { margin: 0; color: var(--color-muted); }
.nx-item__waits-label { font-weight: var(--weight-semibold); }
.nx-item__status { padding-top: var(--space-1); }
.nx-oq__ids { white-space: nowrap; }
.nx-oq td { vertical-align: top; }

/* Next steps: the ideas */
.nx-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-dialog)), 1fr)); gap: var(--space-6); align-items: start; }
.nx-idea__num { margin: 0; color: var(--color-muted); }
.nx-idea__title { margin: 0; font-family: var(--font-display); font-size: var(--text-section-title); line-height: var(--leading-section-title); font-weight: var(--weight-title); }
.nx-idea__line { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.nx-idea__line .t-label { color: var(--color-foreground); }
.nx-idea__came { padding-top: var(--space-3); border-top: 1px solid var(--color-default); }

@media (max-width: 600px) {
  .nx-item { grid-template-columns: auto minmax(0, 1fr); }
  .nx-item__status { grid-column: 2; padding-top: 0; }
}

/* ── Key screens, web: the listing page, checkout, the hub queue and bench, the exceptions queue.
   Classes ksw-…; every value is a token. The shells are the App layout's (al-…); these are the pages in them. ── */

/* A web screen is a whole page: the frame grows to fit it instead of keeping the window's 16:10 */
.device--desktop:has(.ksw-app) { aspect-ratio: auto; }
.device--desktop:has(.ksw-app) .device__screen { height: auto; overflow: hidden; }
.ksw-app { height: auto; }
.ksw-app .al-page { overflow: visible; }

/* A panel: a card with room, a head and a body */
.ksw-panel { gap: var(--space-4); padding: var(--space-5); }
.ksw-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ksw-panel__head .t-card-title { margin: 0; }
.ksw-stack { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

/* A photo from the still-life: a crop of the drawing stands in for each view */
.ksw-photo { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.ksw-photo--sold .still { filter: grayscale(1); opacity: 0.6; }
.ksw-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.ksw-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-muted); }
.ksw-thumb.is-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.ksw-thumb .icon { width: var(--space-6); height: var(--space-6); }
.ksw-thumb--row { flex: none; width: var(--size-control); height: var(--size-control); aspect-ratio: auto; }
.ksw-thumb--lg { width: var(--size-control-lg); height: var(--size-control-lg); }
.ksw-thumb--gone .still { filter: grayscale(1); opacity: 0.6; }

/* The listing page */
.ksw-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.ksw-buy { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ksw-buy__head { display: flex; flex-direction: column; gap: var(--space-2); }
.ksw-buy__head .t-page-title { margin: 0; }
.ksw-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0; }
.ksw-price .t-figure { font-variant-numeric: tabular-nums lining-nums; }
.ksw-approx { color: var(--color-muted); }
.ksw-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); margin: 0; border-top: 1px solid var(--color-default); }
.ksw-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-default); }
.ksw-facts dt { color: var(--color-muted); }
.ksw-facts dd { margin: 0; color: var(--color-foreground); font-weight: var(--weight-medium); text-align: right; }
.ksw-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ksw-actions .btn--lg { flex: 1 1 0; }
.ksw-actions--quiet { gap: var(--space-2); }
.ksw-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-default); border-left: 2px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-surface); }
.ksw-note > .icon { flex: none; margin-top: 2px; color: var(--color-accent); }
.ksw-note__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ksw-note__text p { margin: 0; }
.ksw-seller { gap: var(--space-3); padding: var(--space-4); }
.ksw-seller > p { margin: 0; }
.ksw-seller__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.ksw-seller .rating__note { display: none; }
.ksw-buy > .auth-seal, .ksw-summary .auth-seal { align-self: flex-start; }
.ksw-listing .certificate { padding-top: var(--space-6); }

/* Checkout */
.ksw-checkout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ksw-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ksw-fields > .is-wide { grid-column: 1 / -1; }
.ksw-currency { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.ksw-currency .t-caption { flex: 1 1 0; min-width: 0; margin: 0; }
.ksw-item { display: flex; align-items: center; gap: var(--space-4); }
.ksw-item__media { flex: none; width: calc(var(--space-12) + var(--space-8)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.ksw-item__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ksw-item__text p { margin: 0; }
.ksw-summary { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ksw-summary .price-breakdown { box-shadow: none; }
.ksw-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.ksw-pay .t-caption { margin: 0; text-align: center; }

/* The hub bench */
.ksw-bench { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ksw-asset { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: start; }
.ksw-asset__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ksw-asset__text p { margin: 0; }
.ksw-zone .upload__zone { padding: var(--space-5) var(--space-6); }
.ksw-files .upload__thumb { overflow: hidden; padding: 0; }
.ksw-verdict { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ksw-verdict .btn { flex: 1 1 0; }
.ksw-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.ksw-hint .icon { margin-top: 1px; }

/* In a frame the queue's rows may wrap rather than cut a name or a date */
.ksw-app .al-hubrow__item > *,
.ksw-app .al-hubrow__state > .t-caption { white-space: normal; }

/* The exceptions queue, with the decision dialog over it */
.ksw-stage { position: relative; min-height: calc(var(--space-24) * 7 + var(--space-12)); }
.ksw-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center end; padding: var(--space-6); background: var(--color-overlay); }
.ksw-scrim .modal { width: min(100%, var(--size-dialog)); animation: none; }
.ksw-evidence { display: flex; align-items: center; gap: var(--space-2); }
.ksw-evidence .ksw-thumb { width: var(--size-control); height: var(--size-control); aspect-ratio: auto; }
.ksw-evidence .t-caption { margin-left: var(--space-2); }
.ksw-answer { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-foreground); }
.ksw-answer > .icon { flex: none; margin-top: 2px; color: var(--color-muted); }
.ksw-answer p { margin: 0; }
.ksw-modal-listing { display: flex; align-items: center; gap: var(--space-3); }

/* An empty state, small beside its screen */
.ksw-empty { align-items: center; gap: var(--space-3); max-width: calc(var(--space-24) * 4); padding: var(--space-6); text-align: center; }
.ksw-empty p { margin: 0; }
.ksw-empty__text { color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.ksw-empty--wide { max-width: calc(var(--space-24) * 5); align-items: stretch; text-align: left; }
.ksw-empty--wide .ksw-empty__text { max-width: none; }
.ksw-empty .btn--block { align-self: stretch; }
.ksw-empty__lead { display: flex; align-items: center; gap: var(--space-3); }
.ksw-empty__lead > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.ksw-empty__buttons { display: flex; gap: var(--space-2); }
.ksw-empty__buttons .btn { flex: 1 1 0; }
.ksw-empty__similar { display: flex; flex-direction: column; gap: var(--space-2); }

@container (max-width: 860px) {
  .ksw-split, .ksw-checkout, .ksw-bench { grid-template-columns: minmax(0, 1fr); }
  .ksw-asset { grid-template-columns: minmax(0, 1fr); }
}

/* Key screens, web: the desktop frame takes the whole row, its empty state under it */
.ks-main:has(.ksw-app) { flex: 1 1 100%; }
.ks-stage:has(.ksw-app) .ks-side { flex: 1 1 100%; }

/* ── Key screens: the page and the phone screens of finding and buying (tools/genScreens.mjs,
   tools/parts/screens/mobileBuy.mjs). Every value is a token. ── */

/* The page: a card per screen — what it is, then the screen with its empty state beside it */
.ks-cards { display: flex; flex-direction: column; gap: var(--space-16); }
.ks-card { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--color-default); }
.ks-card:first-child { padding-top: 0; border-top: 0; }
.ks-card__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4) var(--space-8); align-items: start; }
.ks-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.ks-card__meta .t-label { margin-bottom: var(--space-1); color: var(--color-muted); }
.ks-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); }
.ks-main { min-width: 0; max-width: 100%; }
.ks-side { display: flex; flex-direction: column; gap: var(--space-3); flex: 0 1 calc(var(--space-24) * 3); min-width: 0; }
.ks-side__label { color: var(--color-muted); }
.ks-pair { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ks-fig { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; margin: 0; }
.ks-fig__cap { text-align: center; }
@media (max-width: 900px) {
  .ks-card__head { grid-template-columns: minmax(0, 1fr); }
  .ks-card__meta { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* The small empty state: a miniature phone with the screen's name and one state in it */
.st-phone.ks-mini { max-width: calc(var(--space-24) * 3); min-height: calc(var(--space-24) * 2); margin: 0; }
.ks-side .ks-mini + .ks-mini { margin-top: var(--space-2); }
.ks-mini .st-phone__body { gap: var(--space-3); }
.empty.ks-empty { gap: var(--space-3); padding: var(--space-4) var(--space-2); }
.ks-chips-flat { padding: 0; border: 0; background: transparent; }

/* Inside the phone */
.ks-app { min-height: 0; }
.ks-app .al-page { min-height: 0; }
.ks-centre { text-align: center; }
.ks-searchbar { flex: none; padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.ks-clear { display: inline-flex; color: var(--color-muted); }
.ks-sort { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.ks-count { display: inline-grid; place-items: center; min-width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-foreground); font-size: var(--text-2xs); line-height: 1; }
.ks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ks-grid .listing-card__body,
.ks-list .listing-card__body { padding: var(--space-3); }
.ks-list { display: flex; flex-direction: column; gap: var(--space-3); }
.ks-list .listing-card--list .listing-card__media { flex: 0 0 38%; min-height: 0; aspect-ratio: 1; }
.ks-list .listing-card--list .listing-card__body { padding-right: var(--space-10); }
.ks-list .listing-card__title { -webkit-line-clamp: 2; line-clamp: 2; }

/* A listing: the gallery bleeds to the edges, the facts under it */
.ks-page-flush .al-page__inner { padding-top: var(--space-4); }
.ks-gallery { position: relative; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-muted); }
.ks-gallery--short { aspect-ratio: 16 / 9; }
.ks-gallery__bar { position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); display: flex; justify-content: space-between; }
.ks-disc { display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-card); }
.ks-dots { position: absolute; bottom: var(--space-3); left: 0; right: 0; display: flex; justify-content: center; gap: var(--space-2); }
.ks-dots i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-emphasis); }
.ks-dots i.is-on { background: var(--color-primary); }
.ks-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ks-head--pad { padding: var(--space-4); }
.ks-title { margin: 0; }
.ks-price { font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.ks-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; padding: var(--space-3) 0; border-block: 1px solid var(--color-default); }
.ks-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-fact dt { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.ks-fact dd { margin: 0; font-weight: var(--weight-medium); }
.ks-promo { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.ks-promo .icon { margin-top: 1px; color: var(--color-primary); }
.ks-seller { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.ks-seller--flat { padding: 0; }
.ks-seller__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ks-seller__rating { align-items: flex-end; gap: var(--space-1); font-size: var(--text-xs); }
.ks-seller__rating .rating__star { width: var(--space-3); height: var(--space-3); }

/* Bars at the foot of a screen: the actions of a listing, the pay button */
.ks-bar { display: flex; flex: none; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-5); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.ks-bar--actions { flex-direction: row; align-items: center; }
.ks-bar--actions .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); }
.ks-bar--actions .btn--icon { flex: none; }
.ks-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.ks-note .icon { margin-top: 1px; flex: none; }

/* A sheet over a screen */
.ks-sheet-host { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ks-behind { position: absolute; inset: 0; overflow: hidden; background: var(--color-page); }
.ks-scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.modal.ks-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-5); overflow: hidden; animation: none; }
.ks-sheet__grab { align-self: center; width: var(--space-10); height: var(--space-1); border-radius: var(--radius-full); background: var(--color-default); }
.ks-sheet .modal__head { align-items: center; }
.ks-after { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-default); }
.ks-after .t-label { color: var(--color-muted); }

/* Checkout and the order */
.ks-stepper { padding: var(--space-1) 0; }
.ks-stepper .stepper__step:not(:last-child)::after { min-width: var(--space-3); margin-right: var(--space-2); }
.ks-stepper .stepper__step { gap: var(--space-2); }
.ks-seg { display: grid; place-items: center; flex: 1; cursor: default; }
.ks-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.ks-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ks-block__line { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.ks-block__line .icon { margin-top: 2px; color: var(--color-muted); }
.ks-block__line--sum { justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.ks-breakdown { gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); border-width: 1px; }
.ks-order { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.ks-order__thumb { flex: none; width: var(--space-16); height: var(--space-16); overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.ks-order__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ks-order__title { margin: 0; font-weight: var(--weight-medium); }
.ks-tabs { flex: none; padding: 0 var(--space-4); background: var(--color-surface); }
.ks-orderrow { display: flex; flex-direction: column; overflow: hidden; }
.ks-orderrow__top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.ks-orderrow__foot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-default); }
.ks-orderrow__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ks-timeline { --tl-marker: var(--space-5); }
.ks-timeline .timeline__track { padding: var(--space-2) var(--space-3); }
.ks-actions-off { display: flex; gap: var(--space-2); }
.ks-actions-off .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); }
.ks-insp-na { gap: var(--space-2); }
.ks-locked { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ks-stars-off { opacity: 0.5; width: auto; }
.ks-order { flex-direction: row; }
.ks-block--row { flex-direction: row; align-items: center; gap: var(--space-3); }
.ks-block--row > .icon { color: var(--color-muted); }
.ks-block__grow { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; }
.ks-block__grow .t-label { width: 100%; color: var(--color-muted); }
.ks-payin { flex-direction: row; align-items: center; justify-content: space-between; }
.ks-payin .field__label { width: auto; }
.ks-app .al-hero--phone .ill { --ill-size: calc(var(--space-24) + var(--space-8)); }
.ks-app .al-hero--phone { padding-block: var(--space-3) var(--space-4); }
.ks-seller { flex-direction: row; }
.ks-pricebar { max-width: none; }
.ks-pricebar .price-breakdown--compact { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.ks-bar .ks-breakdown { padding: 0 0 var(--space-2); border: 0; }
.ks-breakdown .currency__seg-item { height: var(--size-control-sm); padding: 0 var(--space-3); }

/* ── Key screens, part mobileSell (tools/parts/screens/mobileSell.mjs) — the phone screens of messages,
   selling and the account. Classes ksm-…; every value is a token of tokens.css. ── */

.ksm-group { padding-top: var(--space-1); }
.ksm-note { text-align: center; }

/* A listing's stand-in photo: the category's mark on a quiet ground */
.ksm-thumb { display: grid; place-items: center; flex: none; width: var(--space-16); aspect-ratio: 1; border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-subtle); }
.ksm-thumb .icon { width: var(--space-6); height: var(--space-6); }

/* The empty state of a screen, small */
.ksm-empty { display: grid; place-items: center; }
.ksm-empty .st-empty { padding: var(--space-6) var(--space-4); }
.ksm-mini { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.ksm-mini__bar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-default); }
.ksm-mini__prompt { color: var(--color-muted); }

/* Inbox: a conversation row */
.ksm-list { display: flex; flex-direction: column; overflow: hidden; }
.ksm-conv { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-default); }
.ksm-conv:first-child { border-top: 0; }
.ksm-conv__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); flex: 1; min-width: 0; }
.ksm-conv__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); align-self: stretch; }
.ksm-conv__name { font-weight: var(--weight-medium); }
.ksm-conv.is-unread .ksm-conv__name { font-weight: var(--weight-bold); }
.ksm-conv__when { flex: none; color: var(--color-muted); }
.ksm-conv__about { display: flex; align-items: center; gap: var(--space-1); max-width: 100%; color: var(--color-muted); }
.ksm-conv__about .icon { width: var(--space-3); height: var(--space-3); }
.ksm-conv__about > [data-i18n] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksm-conv__preview { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--color-muted); }
.ksm-conv.is-unread .ksm-conv__preview { color: var(--color-foreground); }
.ksm-conv__badge { margin-top: var(--space-1); }
.ksm-dot { flex: none; width: var(--space-2); height: var(--space-2); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--color-danger); }

/* Chat: the bar, the listing under it, the thread, the composer */
.ksm-chatbar { display: flex; align-items: center; gap: var(--space-2); flex: none; height: var(--size-header); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.ksm-chatbar__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ksm-chatbar__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksm-about { display: flex; align-items: center; gap: var(--space-3); flex: none; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-default); background: var(--color-surface); }
.ksm-about .ksm-thumb { width: var(--space-10); }
.ksm-about .ksm-thumb .icon { width: var(--space-5); height: var(--space-5); }
.ksm-about__text { display: flex; flex-direction: column; min-width: 0; }
.ksm-about__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.ksm-menu { position: absolute; top: calc(var(--space-8) + var(--size-header) - var(--space-2)); right: var(--space-3); z-index: var(--z-header); min-width: 0; width: calc(var(--space-24) * 2); }
.ksm-day { text-align: center; }
.ksm-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.ksm-time { align-self: flex-end; color: var(--color-muted); font-size: var(--text-2xs); line-height: var(--leading-2xs); }
.ksm-composer { display: flex; flex-direction: column; gap: var(--space-2); flex: none; padding: var(--space-3) var(--space-4) var(--space-5); border-top: 1px solid var(--color-default); background: var(--color-surface); }
.ksm-composer__row { display: flex; align-items: center; gap: var(--space-2); }
.ksm-composer__field { flex: 1; min-width: 0; }
.ksm-send { flex: none; width: var(--size-control); padding: 0; justify-content: center; border-radius: var(--radius-full); }

/* Seller setup: a task row */
.ksm-tasks { display: flex; flex-direction: column; overflow: hidden; }
.ksm-task { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-default); }
.ksm-task:first-child { border-top: 0; }
.ksm-task__mark { display: grid; place-items: center; flex: none; width: var(--space-6); height: var(--space-6); border: 1px solid var(--color-emphasis); border-radius: var(--radius-full); color: var(--color-muted); }
.ksm-task__mark .icon { width: var(--space-3); height: var(--space-3); }
.ksm-task.is-done .ksm-task__mark { border-color: transparent; background: var(--color-primary); color: var(--color-primary-foreground); }
.ksm-task__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* New listing: photos in three columns, fields in pairs, the submit bar */
.ksm-photos .uploader__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ksm-photos .uploader__btn { width: var(--space-6); height: var(--space-6); }
.ksm-photos .uploader__drop { padding: var(--space-5) var(--space-4); }
.ksm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ksm-fields--price { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ksm-actionbar { display: flex; flex-direction: column; gap: var(--space-2); flex: none; padding: var(--space-3) var(--space-4) var(--space-5); border-top: 1px solid var(--color-default); background: var(--color-surface); text-align: center; }

/* My listings: a row with its photo, facts, state and authentication */
.ksm-lrow { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); }
.ksm-lrow.is-sold .ksm-thumb { opacity: 0.6; }
.ksm-lrow__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); flex: 1; min-width: 0; }
.ksm-lrow__meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksm-lrow__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: var(--weight-medium); }
.ksm-lrow__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-1); }

/* ── Architecture (architecture/index.html): the six diagrams, drawn on tokens ──
   The three parts of the system keep one colour each on every diagram: the web client the
   categorical blue, the mobile client the categorical plum, the server brass. People and outside
   services stay neutral (outlined), so the parts are the only coloured things. Written by
   tools/genArchitecture.mjs. */
.arch-figure,
.arch-steps {
  --arch-web: var(--color-category-3);
  --arch-mobile: var(--color-category-1);
  --arch-server: var(--color-accent);
  --arch-web-soft: color-mix(in srgb, var(--arch-web) 16%, var(--color-surface));
  --arch-mobile-soft: color-mix(in srgb, var(--arch-mobile) 16%, var(--color-surface));
  --arch-server-soft: color-mix(in srgb, var(--arch-server) 18%, var(--color-surface));
  --arch-web-tint: color-mix(in srgb, var(--arch-web) 7%, var(--color-surface));
  --arch-mobile-tint: color-mix(in srgb, var(--arch-mobile) 7%, var(--color-surface));
  --arch-server-tint: color-mix(in srgb, var(--arch-server) 8%, var(--color-surface));
}

.arch-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
}

/* The drawing scales with the column; below a readable size it scrolls inside its frame, never the page */
.arch-canvas { overflow-x: auto; }
.arch-canvas svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
  font-family: var(--font-sans);
}

/* Boxes: a part's box is tinted in its colour; a group of a part is a paler field; outside is outlined */
.arch-box { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1; rx: var(--radius-card); }
.arch-box--web { fill: var(--arch-web-soft); stroke: var(--arch-web); stroke-width: 1.5; }
.arch-box--mobile { fill: var(--arch-mobile-soft); stroke: var(--arch-mobile); stroke-width: 1.5; }
.arch-box--server { fill: var(--arch-server-soft); stroke: var(--arch-server); stroke-width: 1.5; }
.arch-box--person { rx: 18px; }
.arch-group { stroke-width: 1; rx: var(--radius-overlay); }
.arch-group--web { fill: var(--arch-web-tint); stroke: var(--arch-web); }
.arch-group--mobile { fill: var(--arch-mobile-tint); stroke: var(--arch-mobile); }
.arch-group--server { fill: var(--arch-server-tint); stroke: var(--arch-server); }
.arch-frame { fill: none; stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 6 4; rx: var(--radius-overlay); }
.arch-inner { fill: var(--color-surface); stroke: var(--arch-web); stroke-width: 1; stroke-dasharray: 4 3; rx: var(--radius-control); }
.arch-contract { fill: var(--color-surface); stroke: var(--arch-server); stroke-width: 1.5; stroke-dasharray: 6 4; rx: var(--radius-control); }
.arch-bar--web { fill: var(--arch-web); }
.arch-bar--mobile { fill: var(--arch-mobile); }
.arch-bar--server { fill: var(--arch-server); }
.arch-bar--out { fill: var(--color-emphasis); }
.arch-rule { stroke: var(--color-default); stroke-width: 1; }
.arch-life { stroke: var(--color-emphasis); stroke-width: 1; stroke-dasharray: 3 4; }

/* Text */
.arch-title { fill: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.arch-name { fill: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.arch-sub { fill: var(--color-muted); font-size: var(--text-xs); }
.arch-small { fill: var(--color-muted); font-size: var(--text-2xs); letter-spacing: 0.02em; }
.arch-group-title { fill: var(--color-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }
.arch-code { fill: var(--color-foreground); font-family: var(--font-mono); font-size: var(--text-mono); }
.arch-lbl {
  fill: var(--color-muted);
  font-size: var(--text-xs);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* Arrows: neutral, named by what they carry; dashed and dotted ones are explained in each legend */
.arch-line { fill: none; stroke: var(--color-subtle); stroke-width: 1.5; stroke-linejoin: round; }
.arch-line--dash { stroke-dasharray: 6 4; }
.arch-line--thin { stroke-width: 1.25; stroke-dasharray: 1 3; stroke-linecap: round; }
.arch-line--plain { stroke-width: 1; }
.arch-head { fill: var(--color-subtle); }
.arch-ico { fill: none; stroke: var(--color-foreground); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Numbered markers of the one-request diagram and its list */
.arch-num { fill: var(--color-surface-inverted); }
.arch-num-text { fill: var(--color-inverted); font-size: var(--text-2xs); font-weight: var(--weight-bold); }

/* Where a module appears: Site · App · Admin, filled when there, a ring when partly there */
.arch-dot--web { fill: var(--arch-web); }
.arch-dot--mobile { fill: var(--arch-mobile); }
.arch-dot--part-web { fill: var(--color-surface); stroke: var(--arch-web); stroke-width: 1.5; }
.arch-dot--part-mobile { fill: var(--color-surface); stroke: var(--arch-mobile); stroke-width: 1.5; }
.arch-dot--none { fill: none; stroke: var(--color-emphasis); stroke-width: 1; }

/* Legend under each drawing */
.arch-caption { display: flex; flex-direction: column; gap: var(--space-2); }
.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-muted);
}
.arch-legend li { display: flex; align-items: center; gap: var(--space-2); }
.arch-key { flex: none; width: var(--space-5); height: var(--space-3); border: 1.5px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); }
.arch-key--web { background: var(--arch-web-soft); border-color: var(--arch-web); }
.arch-key--mobile { background: var(--arch-mobile-soft); border-color: var(--arch-mobile); }
.arch-key--server { background: var(--arch-server-soft); border-color: var(--arch-server); }
.arch-key--frame { border-style: dashed; border-width: 1px; }
.arch-key--line,
.arch-key--dash,
.arch-key--dot { height: 0; border: 0; border-top: 1.5px solid var(--color-subtle); border-radius: 0; background: none; }
.arch-key--dash { border-top-style: dashed; }
.arch-key--dot { border-top-style: dotted; }
.arch-key--bar { height: var(--space-1); border: 0; border-radius: 0; background: var(--color-emphasis); }
.arch-key--num { display: grid; place-items: center; width: var(--space-5); height: var(--space-5); border: 0; border-radius: var(--radius-full); background: var(--color-surface-inverted); color: var(--color-inverted); font-size: var(--text-2xs); font-weight: var(--weight-bold); }
.arch-dots { display: inline-flex; gap: var(--space-1); }
.arch-dots i { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); }
.arch-dots .is-web { background: var(--arch-web); }
.arch-dots .is-mobile { background: var(--arch-mobile); }
.arch-dots .is-part { background: var(--color-surface); border: 1.5px solid var(--arch-web); }
.arch-dots .is-none { border: 1px solid var(--color-emphasis); }
.arch-caption p { margin: 0; font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-muted); max-width: var(--size-prose); }

/* The steps of one request, beside the drawing */
.arch-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: arch-step;
}
.arch-steps li { display: grid; grid-template-columns: var(--space-6) 1fr; gap: var(--space-3); counter-increment: arch-step; }
.arch-steps li::before {
  content: counter(arch-step);
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-surface-inverted);
  color: var(--color-inverted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.arch-steps p { margin: 0; color: var(--color-muted); }
.arch-steps strong { display: block; color: var(--color-foreground); font-weight: var(--weight-semibold); }
.arch-after { margin: 0; color: var(--color-muted); }

@media (max-width: 640px) {
  .arch-figure { padding: var(--space-4); }
  .arch-steps { grid-template-columns: 1fr; }
}

/* ── Flows: one step on two devices — the web beside the phone (SC-028) ── */
.fl-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; padding: var(--space-6); }
.fl-pair__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fl-pair__label { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.fl-pair .device--phone { zoom: 0.64; }
.fl-pair .device--desktop { aspect-ratio: auto; }
.fl-pair .device--desktop .device__screen { height: auto; max-height: calc(var(--space-24) * 7); overflow: hidden; }
/* The web page beside the phone is narrower than a desktop: the listing and checkout keep their two columns */
.fl-pair :is(.ksw-split, .ksw-checkout) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); }
.fl-solo { display: flex; justify-content: center; padding: var(--space-6); }
.fl-solo .device--phone { zoom: 0.8; }
.fl-solo .device--desktop { aspect-ratio: auto; }
.fl-solo .device--desktop .device__screen { height: auto; overflow: hidden; }
@media (max-width: 960px) { .fl-pair { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* ── Flow "Register and verify the email" (tools/genFlowRegister.mjs) ── */

/* The three facts under the title */
.fr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fr-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fr-fact p { margin: 0; }
@media (max-width: 960px) { .fr-facts { grid-template-columns: minmax(0, 1fr); } }

/* The Auth layout's desktop keeps a frame of its own in the pair, tall enough for the form (the listing frames grow with their page) */
.fr-au { display: block; height: 100%; }
.fr-au .au-screen { height: 100%; }

/* A screen that carries a toast or a banner */
.fr-host { position: relative; }
.fr-toast { position: absolute; z-index: var(--z-toast); }
.fr-toast--web { top: calc(var(--space-24) * 3); right: var(--space-6); width: var(--size-form); }
.fr-toast--phone { top: var(--space-12); right: var(--space-4); left: var(--space-4); }
/* under the banner, over the photo */
.fr-toast--below { top: calc(var(--space-24) * 2); }

/* The banner on the phone: the button goes under the text; the closed buy button takes its own row */
.fr-locked .au-banner { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
.fr-locked .au-banner__body { flex: 1 1 calc(100% - var(--space-8)); }
.fr-locked .au-banner .btn { margin-left: calc(var(--space-4) + var(--space-3)); }
.fr-locked .ks-bar--actions { flex-wrap: wrap; }
.fr-locked .ks-bar--actions .btn--primary { order: -1; flex: 1 0 100%; }

/* Flow "Sign in" (tools/genFlowSignIn.mjs): the hero facts, the Auth layout's desktop inside the pair,
   the account on the website and the visitor's card. */
.fs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fs-fact { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fs-fact dt, .fs-fact dd { margin: 0; }
.fs-fact dd { color: var(--color-foreground); }
@media (max-width: 960px) { .fs-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* The Show toggle of the password: room round its text for the ring, its number off the text */
.au-reveal[data-flow-target] { padding: var(--space-1) var(--space-2); right: var(--space-2); }
.au-reveal[data-flow-target]::after { top: calc(var(--space-2) * -1); right: calc(var(--space-2) * -1); left: auto; }

/* A field that is a target carries its number on the middle of its left edge, not over its label */
.au-field[data-flow-target]::after { top: 50%; transform: translateY(-50%); }

/* The Auth layout's desktop keeps a fixed frame inside the pair (the pair frees the desktop's ratio); a little taller
   than 16:10 so the form with its message and the footer fit */

/* The account on the website: the phone page's body in two columns under the page title */
.fs-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5) var(--space-6); width: 100%; max-width: var(--size-prose); margin: 0 auto; }
.fs-account__wide { grid-column: 1 / -1; }
.fs-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fs-account__col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.fs-guest { display: flex; flex-direction: column; width: 100%; max-width: var(--size-dialog); margin: 0 auto; }
.al-page__inner:has(> .fs-guest) { justify-content: center; min-height: 100%; }
.al-app--phone .fs-guest { padding-bottom: var(--space-12); }

/* A row the suspension refuses */
.fs-off { color: var(--color-subtle); }
.fs-off > .icon, .fs-off .al-listrow__meta { color: var(--color-subtle); }

/* The "Forgot password?" link as a target: room for the ring, its number off the text */
.au-link[data-flow-target] { padding: 0 var(--space-2); }
.au-link[data-flow-target]::after { left: auto; right: calc(var(--space-2) * -1); }

/* ── Flow "Forgotten password" (tools/genFlowResetPassword.mjs): the three facts, the rule met on the new
   password, and the "Password changed" toast set inside a screen. Every value is a token. ── */
.fp-fact { gap: var(--space-2); padding: var(--card-pad); }
.fp-fact p { margin: 0; }
.fp-rule { display: flex; align-items: center; gap: var(--space-1); color: var(--color-success-text); }
.fp-rule .icon { flex: none; }
.fp-toast { position: absolute; z-index: var(--z-toast); top: var(--space-3); inset-inline: var(--space-3); animation: none; }
.fp-toast--web { top: var(--space-6); inset-inline: var(--space-6) auto; width: min(100%, var(--size-form)); }
/* On the website the offer dialog stands near the top of the page, inside the part of the page the flow's frame shows */
.fp-offer-scrim { place-items: start center; padding-top: calc(var(--space-24) * 2); }
/* The form of the Auth layout's desktop never gives up its height to the green panel */
.fl-pair .au-split--desk .au-split__body { flex-shrink: 0; }
.fl-pair .au-split--desk .au-split__form { gap: var(--space-4); }
.fp-offer-scrim .modal { width: min(100%, var(--size-form)); }

/* ── Flow: staff invitation — the few pieces the staff screens need beyond the Auth layout and the
   components (classes fi-…; every value a token) ── */
/* The add-staff dialog: its fields one under another */
.fi-form { display: flex; flex-direction: column; gap: var(--space-4); }
/* The set-up and sign-in screens as the whole window of a flow step: tall enough to read as a screen */
.fi-auth { min-height: calc(var(--space-24) * 6); }
/* The QR code of the authenticator: modules in the ink color on a tile, with its quiet margin */
.fi-qr {
  align-self: flex-start;
  width: calc(var(--space-24) * 1.75);
  padding: var(--space-2);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-foreground);
}
.fi-qr__code { display: block; width: 100%; height: auto; }
/* A line of text that is marked as a target gets room for its ring and number */
.fi-auth .au-note[data-flow-target] { padding: var(--space-2) var(--space-3); }
/* The three facts under the title: Actor · Starts · Ends */
.fi-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fi-fact p { margin: 0; }

/* ── Flow: contact details in chat — the few pieces the messages page, the sheets, the push and the
   moderation queue need beyond Key screens and the components (classes fch-…; every value a token) ── */

/* Phone: the thread sits at the bottom of the page, older messages run off the top */
.fch-page { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.fch-behind { display: flex; flex-direction: column; }
.fch-behind .fch-page { flex: 1; min-height: 0; }
/* A prompt that is marked as a target gets room for its ring */
.fch-prompt { padding: var(--space-2) var(--space-3); }
/* The closing line of a closed conversation */
.fch-closed { align-self: stretch; }
/* The confirmation of a report, over the phone's thread above the composer */
.fch-toast--phone { position: absolute; left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-24) + var(--space-4)); z-index: var(--z-toast); animation: none; }
/* The notice on the phone's listing: above the action bar */
.fch-cannot { margin: 0 var(--space-4) var(--space-2); }

/* Website: the inbox list beside the thread */
.fch-web { position: relative; gap: var(--space-4); padding-block: var(--space-5); }
.fch-mail { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.fch-mail__list { align-self: start; overflow: visible; }
.fch-mail__list .ksm-conv:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.fch-mail__list .ksm-conv:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.fch-mail__list .ksm-conv:only-child { border-radius: var(--radius-card); }
.fch-mail__list .ksm-conv__head { flex-wrap: wrap; column-gap: var(--space-2); }
.fch-mail__list .ksm-conv__name { white-space: nowrap; }
.ksm-conv.is-current { background: var(--color-surface-muted); }
.fch-pane { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.fch-pane > .ksm-chatbar { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.fch-pane__bar { padding-inline: var(--space-4); }
.fch-pane__thread { display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--space-24) * 2.4); overflow: hidden; padding: var(--space-3) var(--space-4); background: var(--color-page); }
.fch-pane__thread .ksm-thread { gap: var(--space-2); }
.fch-composer { padding-bottom: var(--space-3); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.fch-composer .btn { gap: var(--space-2); }
.fch-composer .btn .icon { width: var(--space-4); height: var(--space-4); }
.fch-menu { position: absolute; top: var(--size-header); right: var(--space-3); z-index: var(--z-header); min-width: 0; width: calc(var(--space-24) * 2); }
/* The sheet of the website: a dialog over the page */
.fch-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: var(--space-6); background: var(--color-overlay); }
.fch-scrim .modal { animation: none; }

/* Elena: the moderation queue and the report under it */
.fch-admin { gap: var(--space-5); }
.fch-review { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.fch-review__conv, .fch-review__decide { gap: var(--space-4); padding: var(--space-5); }
.fch-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.fch-review__head .t-card-title { margin: 0; }
.fch-review__note { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.fch-review__note > .icon { flex: none; margin-top: var(--space-1); color: var(--color-muted); }
.fch-review__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fch-review__thread { padding: var(--space-3); border-radius: var(--radius-card); }
.fch-author { color: var(--color-muted); font-weight: var(--weight-medium); }
.fch-review__decide .btn { align-self: flex-start; }

/* The push: the lock screen of the phone */
.fch-lock { justify-content: flex-start; gap: var(--space-8); background: var(--color-primary); color: var(--color-primary-foreground); }
.fch-lock .al-status { background: transparent; color: inherit; }
.fch-lock__clock { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-top: var(--space-12); text-align: center; }
.fch-lock__clock p { margin: 0; }
.fch-lock__time { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-4xl); }
.fch-lock__date { font-size: var(--text-sm); line-height: var(--leading-sm); opacity: 0.8; }
.fch-push { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-overlay); background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-overlay); }
.fch-push__app { display: grid; place-items: center; flex: none; width: var(--size-control); height: var(--size-control); border-radius: var(--radius-card); background: var(--color-primary); color: var(--color-primary-foreground); --lg-ground: var(--color-primary); }
.fch-push__app .lg-mark { width: var(--space-6); height: var(--space-6); }
.fch-push__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fch-push__body p { margin: 0; }
.fch-push__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.fch-push__name { text-transform: uppercase; letter-spacing: 0.04em; }
.fch-push__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: var(--leading-sm); }
.fch-push__text { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }

/* The push: the notification open in the header of the website */
.fch-web--notify { align-items: flex-end; min-height: calc(var(--space-24) * 2); }
.fch-notify { width: min(100%, var(--size-form)); gap: var(--space-3); padding: var(--space-4); box-shadow: var(--shadow-overlay); }
.fch-notify .t-label { margin: 0; color: var(--color-muted); }
.fch-notify__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.fch-notify__icon { display: grid; place-items: center; flex: none; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.fch-notify__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fch-notify__title { font-weight: var(--weight-semibold); }
.fch-notify__text { color: var(--color-muted); }

/* The listing as the page looks once scrolled to the seller's buttons: the header stays, the page runs under it */
.fch-scrolled .al-chrome { position: relative; z-index: 3; }
.fch-scrolled .al-mk-top { position: relative; z-index: 3; background: var(--color-surface); }
.fch-scrolled .al-page__inner { margin-top: calc(var(--space-24) * -1.75); }
/* … and further, where a notice sits under the buttons */
.fch-scrolled--far .al-page__inner { margin-top: calc(var(--space-24) * -2.4); }
/* The queue's row is a target: its ring needs room outside the table's wrapper */
.fch-admin .table-wrap { overflow: visible; }
.fch-admin .table { width: 100%; }
.fch-admin .table :is(th, td) { white-space: normal; }

/* Make an offer (flows/offer.html, tools/genFlowOffer.mjs) — classes fof-…; every value is a token. */

/* the offer card: its two badges side by side */
.fof-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* a dialog on the website, over the page it was opened from */
.fof-host { position: relative; }
.fof-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: start center; padding: var(--space-6); background: var(--color-overlay); }
.fof-modal { width: min(100%, var(--size-dialog)); max-height: 100%; overflow: hidden; animation: none; }
.fof-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* the site's notifications, open under the bell */
.fof-notif { width: calc(var(--space-24) * 3 + var(--space-12)); gap: var(--space-1); }
.fof-notif__head { padding: var(--space-2) var(--space-2) var(--space-1); color: var(--color-muted); }
.fof-notif__item { align-items: flex-start; height: auto; padding: var(--space-3) var(--space-2); background: var(--color-primary-soft); }
.fof-notif__icon { display: grid; place-items: center; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary-strong); }
.fof-notif__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fof-notif__text strong { font-weight: var(--weight-semibold); }
.fof-notif__text .t-caption { color: var(--color-muted); }
.fof-notif__when { flex: none; color: var(--color-muted); }

/* Claire's offers on the website: the card and her listing */
.fof-offers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.fof-aside { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.fof-aside .t-label { color: var(--color-muted); }
.fof-aside__row { display: flex; align-items: center; gap: var(--space-3); }
.fof-aside__row p { margin: 0; }

/* checkout */
.fof-line { display: flex; align-items: center; gap: var(--space-3); }
.fof-line__thumb { flex: none; width: var(--space-16); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fof-line__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fof-line__text p { margin: 0; }
.fof-reserve { display: flex; }
.fof-addr p { margin: 0; }

/* the paid order */
.fof-back { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fof-back .icon { width: var(--space-4); height: var(--space-4); }
.fof-order { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.fof-cancel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }

/* the phone's lock screen with a push */
.fof-lock { display: flex; flex-direction: column; height: 100%; background: linear-gradient(var(--color-surface-inverted), var(--color-primary-strong)); color: var(--color-inverted); }
.fof-lock .al-status { background: transparent; color: inherit; }
.fof-lock__clock { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-12) var(--space-4) var(--space-10); }
.fof-lock__clock p { margin: 0; }
.fof-lock__date { font-size: var(--text-lg); font-weight: var(--weight-medium); opacity: 0.85; }
.fof-lock__time { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: var(--weight-medium); }
.fof-push { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-overlay); }
.fof-push__icon { flex: none; }
.fof-push__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fof-push__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.fof-push__app { font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.fof-push__title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.fof-push__text { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.fof-lock__bar { align-self: center; width: calc(var(--space-24) + var(--space-8)); height: var(--space-1); margin-top: auto; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--color-inverted); opacity: 0.6; }

@media (max-width: 960px) { .fof-offers, .fof-order { grid-template-columns: minmax(0, 1fr); } }

/* an accepted offer: the time line, then the countdown inside the card */
.fof-window { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.fof-window .offer-card__time { align-self: stretch; }

/* ── Flow: a listing goes live — the few pieces it needs beyond the Key screens and the components
   (classes fsl-…; every value a token) ── */

/* The three facts under the title: Actor · Starts · Ends */
.fsl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-24) * 2), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.fsl-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fsl-fact dd { margin: 0; }

/* The website's pages: two columns, a narrow column, a form with a row of buttons */
.fsl-web { gap: var(--space-5); padding: var(--space-6) var(--space-8); }
.fsl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.fsl-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fsl-narrow { display: flex; flex-direction: column; gap: var(--space-4); width: min(100%, calc(var(--space-24) * 5)); }
.fsl-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fsl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fsl-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fsl-backlink { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; }
.fsl-void { min-height: calc(var(--space-24) * 2); }

/* The state line over a checklist */
.fsl-state { display: flex; }
.fsl-check { display: flex; flex-direction: column; gap: var(--space-3); }
.fsl-check .ksm-group { margin: 0; }

/* The price and currency row of the listing form: the price wider */
.fsl-fields--price { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Save draft beside Submit listing */
.fsl-pairbtn { display: flex; gap: var(--space-3); }
.fsl-pairbtn .btn { flex: 1 1 0; min-width: 0; }

/* A listing's buttons on its card or in its row */
.fsl-rowactions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
.table__actions .fsl-rowactions { justify-content: flex-end; padding-top: 0; }
.fsl-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.fsl-sold { color: var(--color-muted); }
.fsl-sold .ksm-thumb { opacity: 0.6; }

/* The payment provider's hosted page: a sheet in the app, a page of its own on the web */
.fsl-sheetbar { display: flex; justify-content: space-between; }
.fsl-prov__brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.fsl-prov__brand .t-caption { margin-left: auto; }
.fsl-hosted { align-items: center; justify-content: center; min-height: calc(var(--space-24) * 4); background: var(--color-surface-muted); }
.fsl-card { padding: var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.fsl-steps { overflow: visible; }

/* The lock screen of the phone with the app's push: the green ground of the Auth layout */
.fsl-lock { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); height: 100%; padding: var(--space-12) var(--space-4) var(--space-4); }
.fsl-lock__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.fsl-lock__date { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-medium); }
.fsl-lock__time { margin: 0; font-family: var(--font-sans); font-size: calc(var(--text-display) * 1.6); line-height: 1; font-weight: var(--weight-medium); }
.fsl-push { display: flex; gap: var(--space-3); align-self: stretch; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-surface) 92%, transparent); color: var(--color-foreground); box-shadow: var(--shadow-overlay); }
.fsl-push__icon { display: grid; place-items: center; flex: none; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-primary-foreground); }
.fsl-push__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fsl-push__head { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fsl-push__when { text-transform: none; letter-spacing: 0; }
.fsl-push__title { margin: 0; font-weight: var(--weight-semibold); }
.fsl-push__text { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.fsl-lock__bar { margin-top: auto; width: calc(var(--space-24) * 1.4); height: var(--space-1); border-radius: var(--radius-full); background: var(--au-on-green); opacity: 0.6; }

/* The listing page: the status next to the seal, and the photo kept short so the certificate is in view */
.fsl-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fsl-short .ksw-photo { aspect-ratio: auto; height: calc(var(--space-24) * 2); }
.fsl-short .ksw-photo .still { height: 100%; width: 100%; }

/* The administrator's pages: the evidence under the queue */
.fsl-admin .table-wrap { margin-block: 0; }
.fsl-detail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.fsl-detail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* The notice dropped from the Inbox of the website */
.fsl-notice { width: calc(var(--space-24) * 3); }
.fsl-notice__item { align-items: flex-start; padding: var(--space-3) var(--space-2); }
.fsl-notice__item .al-menu__text { display: flex; flex-direction: column; gap: var(--space-1); }

/* A field or a tick that is a target gets room for its ring and its number */
:is(.fsl-app, .fsl-web) :is(.field, .check)[data-flow-target] { padding: var(--space-1) var(--space-2); }
/* A photo tile that is a target shows its number outside the tile */
.uploader__tile[data-flow-target] { overflow: visible; }
.uploader__tile[data-flow-target] > .uploader__ph { border-radius: inherit; }
.fsl-lock { text-align: center; }
/* On the website the photo grid is four across, so the form and its buttons fit the window */
.fsl-web .ksm-photos .uploader__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fsl-web .uploader__cover { top: var(--space-1); left: var(--space-1); right: var(--space-1); padding: var(--space-1) 0; text-align: center; font-size: calc(var(--text-2xs) * 0.75); }
.fsl-cols--photos { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-6); }
/* The cover mark says it; the number is left off the cover tile so a longer word fits */
:is(.fsl-app, .fsl-web) .uploader__tile:has(.uploader__cover) .uploader__index { display: none; }
/* The listing table of the website: the listing's column takes what it needs and its text wraps */
.fsl-web .al-col-listing { width: 52%; }
.fsl-web .al-item__text { min-width: 0; white-space: normal; }
/* The exceptions table: tighter cells, and the seller line may wrap, so the action stays in the window */
.fsl-admin .table th, .fsl-admin .table td { padding-inline: var(--space-3); }
.fsl-admin .al-item__sub { flex-wrap: wrap; }
.fsl-admin .al-col-listing { width: 40%; }
/* The cover mark stays inside its tile in any language */
:is(.fsl-app, .fsl-web) .uploader__cover { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
/* The status next to the seal may take two lines in a longer language */
.fsl-status .auth-seal { white-space: normal; border-radius: var(--radius-card); }

/* ── Flow: buy with hub inspection — the few pieces the steps need beyond the components and the key
   screens (classes fbi-…; every value a token) ── */

/* A push on the phone's lock screen: the clock, then the notification */
.fbi-lock { background: var(--color-primary-strong); color: var(--color-primary-foreground); }
.fbi-lock .al-status { background: transparent; color: inherit; }
.fbi-lock__clock { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-12) var(--space-4) var(--space-8); }
.fbi-lock__date { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); }
.fbi-lock__time { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; font-weight: var(--weight-medium); }
.fbi-push { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-overlay); background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-overlay); }
.fbi-push__icon { display: grid; place-items: center; flex: none; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-card); background: var(--color-primary); color: var(--color-primary-foreground); }
.fbi-push__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fbi-push__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.fbi-push__title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.fbi-push__text { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted); }
.fbi-lock__home { align-self: center; width: calc(var(--space-12) * 2); height: var(--space-1); margin-top: auto; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--color-primary-foreground); opacity: 0.6; }

/* A push on the website: the header's bell with the notification open above the order list */
.fbi-notif-host { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.fbi-notif { z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, var(--size-dialog)); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fbi-notif p { margin: 0; }
.fbi-notif__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.fbi-notif__item > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fbi-notif__dot { flex: none; width: var(--space-2); height: var(--space-2); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--color-primary); }
.fbi-notif-page { width: 100%; margin-top: var(--space-4); }
.fbi-orderrow { flex-direction: row; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.fbi-orderrow__thumb { display: block; flex: none; width: var(--space-16); height: var(--space-16); overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fbi-orderrow__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }

/* The order page on the website: the timeline and the stepper on the left, the money on the right */
.fbi-order { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.fbi-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fbi-action { display: flex; flex-direction: column; gap: var(--space-2); }
.fbi-action--row { flex-direction: row; }
.fbi-action--row .btn { flex: 1 1 0; }
.fbi-phone-page { padding-bottom: var(--space-6); }

/* The hub's photos: thumbnails, the ones the buyer and the seller may see marked */
.fbi-shared, .fbi-share { display: flex; flex-direction: column; gap: var(--space-2); }
.fbi-shared p, .fbi-share p { margin: 0; }
.fbi-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.fbi-photos--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fbi-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--color-default); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.fbi-photo .still { display: block; width: 100%; height: 100%; }
.fbi-photo .check__input { position: absolute; inset: 0; width: 100%; height: 100%; }
.fbi-photo__mark { position: absolute; top: var(--space-1); right: var(--space-1); display: grid; place-items: center; width: var(--space-5); height: var(--space-5); border: 1px solid var(--color-emphasis); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-primary-foreground); }
.fbi-photo__mark .icon { width: var(--space-3); height: var(--space-3); stroke-width: 2.25; opacity: 0; }
.fbi-photo .check__input:checked ~ .fbi-photo__mark { border-color: var(--color-primary); background: var(--color-primary); }
.fbi-photo .check__input:checked ~ .fbi-photo__mark .icon { opacity: 1; }
.fbi-photo--pick:has(:checked) { border-color: var(--color-primary); }

/* The hub bench: the intake checks and the label */
.fbi-compare { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); }
.fbi-compare p { margin: 0; }
.fbi-checks { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fbi-hidden { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.fbi-hidden .icon { color: var(--color-muted); }
.fbi-label { 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); }
.fbi-label > .icon { margin-top: var(--space-1); color: var(--color-muted); }
.fbi-label__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fbi-share[data-flow-target], .fbi-compare[data-flow-target], .fbi-notif__item[data-flow-target] { padding: var(--space-3); }

/* Rings and badges reach beyond the component: the queue's tabs and list, the fields of the bench */
.fbi-hublist, .fbi-qtabs { overflow: visible; }
.fbi-qtabs { padding-top: var(--space-3); }
.ksw-panel .field[data-flow-target], .ksw-panel .ksw-zone[data-flow-target] { padding: var(--space-2); }
/* The verdict dialog stands over the listing, the verdict panel with its targets stays in view */
.ksw-scrim.fbi-scrim { place-items: center start; background: transparent; pointer-events: none; }
.fbi-scrim .modal { width: calc(var(--size-dialog) * 0.78); }
.fbi-notif-host { margin-top: calc(var(--space-16) * -1); }

/* ── Flow: return or dispute — the few pieces the case screens need beyond the components and the shells
   (classes frc-…; every value a token). Written by hand; the generator is tools/genFlowReturnCase.mjs ── */

/* The three facts under the title: Actor · Starts · Ends */
.frc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.frc-fact { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.frc-fact dt, .frc-fact dd { margin: 0; }
@media (max-width: 960px) { .frc-facts { grid-template-columns: minmax(0, 1fr); } }

/* Layout: the website and the admin in two columns, the phone in one */
.frc-stage { position: relative; }
.frc-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.frc-cols--one { grid-template-columns: minmax(0, 1fr); }
.frc-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.frc-web .al-page__inner, .frc-admin .al-page__inner { gap: var(--space-4); padding: var(--space-5) var(--space-8); }
.frc-web .al-pagehead__title, .frc-admin .al-pagehead__title { gap: var(--space-1); }
.frc-web .t-page-title { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.frc-admin .t-section-title { margin: 0; }
.frc-app .al-page__inner { gap: var(--space-3); }

/* The order: a flat variant inside a form, the cancelled order with its reason */
.frc-order--flat { box-shadow: none; }
.frc-cancel { display: flex; flex-direction: column; gap: var(--space-2); }
.frc-cancel > p { margin: 0; }
.frc-order .badge { flex: none; }
.frc-order .ks-order__title { overflow-wrap: anywhere; }

/* A note inside a screen */
.frc-note { padding: 0; }
.frc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }

/* The case card: title and status, meta, the stages of the case */
.frc-case { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.frc-case__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.frc-case__head .t-card-title { margin: 0; }
.frc-case__badge { display: inline-flex; border-radius: var(--radius-full); }
.frc-stages .stepper__step:not(:last-child)::after { min-width: var(--space-3); margin-right: var(--space-2); }
.frc-stages .stepper__step { gap: var(--space-2); }
.frc-stages .stepper__label { font-size: var(--text-xs); }
.frc-segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.frc-segments i { display: block; height: var(--space-1); border-radius: var(--radius-full); background: var(--color-default); }
.frc-segments i.is-on { background: var(--color-primary); }
.frc-waiting { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.frc-waiting .icon { color: var(--color-muted); }

/* Statements and evidence: who, their role, when; the photos under the text */
.frc-thread { gap: var(--space-3); }
.frc-thread > .t-card-title { margin: 0; }
.frc-entry { display: flex; align-items: flex-start; gap: var(--space-3); border-radius: var(--radius-control); }
.frc-entry__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.frc-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; }
.frc-entry__text { margin: 0; }
.frc-photos { display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-control); }
.frc-photos .frc-thumb { flex: none; width: var(--space-16); height: var(--space-12); aspect-ratio: auto; }
.frc-add { display: grid; place-items: center; flex: none; width: var(--space-16); height: var(--space-12); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-control); color: var(--color-muted); }
.frc-upload { gap: var(--space-2); }
.frc-kind .radio--card { padding: var(--space-3) var(--space-4); }

/* A composer: the button that opens it, the statement, Send */
.frc-compose { gap: var(--space-3); }
.frc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.frc-confirm { gap: var(--space-3); }
.frc-confirm > h3, .frc-confirm > p { margin: 0; }

/* Money lines: the payout, the refund */
.frc-net { justify-content: space-between; }
.frc-payout { gap: var(--space-2); }
.frc-rows { display: flex; flex-direction: column; margin: 0; }
.frc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-default); }
.frc-row:last-child { border-bottom: 0; }
.frc-row dt { color: var(--color-muted); }
.frc-row dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; text-align: right; }
.frc-orderpanel .frc-row dd { flex-direction: row; align-items: center; gap: var(--space-2); }
.frc-refund { gap: var(--space-2); }
.frc-shipline { align-items: baseline; justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--color-default); }
.frc-shipline .t-caption { margin: 0; }

/* The decision, as the buyer reads it */
.frc-decision { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-left: 2px solid var(--color-accent); }
.frc-decision p { margin: 0; }

/* The return label: a printed label with its code, the hand-over, the progress */
.frc-label { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-style: dashed; border-color: var(--color-emphasis); }
.frc-label__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.frc-label__carrier { display: inline-flex; align-items: center; gap: var(--space-2); }
.frc-label__route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.frc-label__route p { margin: 0; }
.frc-label__ref { margin: 0; text-align: center; }
.frc-barcode {
  display: block;
  height: var(--space-12);
  border-radius: var(--radius-control);
  background: repeating-linear-gradient(90deg, var(--color-foreground) 0 var(--space-1), transparent var(--space-1) calc(var(--space-1) * 1.75), var(--color-foreground) calc(var(--space-1) * 1.75) calc(var(--space-1) * 2), transparent calc(var(--space-1) * 2) calc(var(--space-1) * 3.5));
}
.frc-handoff { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.frc-handoff .icon { color: var(--color-muted); }
.frc-handoff > span { display: flex; flex-direction: column; }
.frc-progress { gap: var(--space-3); }
.frc-timeline { --tl-marker: var(--space-5); }
.frc-refundline { margin: 0; color: var(--color-muted); }

/* The push, in its three settings: on the lock screen, as a banner over the app, in the website's notifications */
.frc-push { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-raised); }
.frc-push__icon { flex: none; }
.frc-push__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frc-push__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.frc-push__app { text-transform: uppercase; letter-spacing: 0.04em; }
.frc-push__title { margin: 0; font-weight: var(--weight-semibold); }
.frc-push__text { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.frc-banner { position: absolute; top: var(--space-8); right: var(--space-2); left: var(--space-2); z-index: 3; }
.frc-notif { position: absolute; top: var(--space-2); right: var(--space-8); z-index: 3; display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, calc(var(--space-24) * 3.5)); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.frc-notif__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.frc-notif .frc-push { box-shadow: none; background: var(--color-primary-soft); }
.frc-notif__foot { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.frc-lockapp { background: linear-gradient(var(--color-primary-soft), var(--color-surface-muted)); }
.frc-lockapp .al-status { background: transparent; }
.frc-lock { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-16) var(--space-4) var(--space-4); }
.frc-lock__date { margin: 0; text-align: center; color: var(--color-muted); font-size: var(--text-lg); line-height: var(--leading-lg); }
.frc-lock__time { margin: 0 0 var(--space-8); text-align: center; font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-display); }
.frc-lock__home { align-self: center; margin-top: auto; width: var(--space-24); height: var(--space-1); border-radius: var(--radius-full); background: var(--color-foreground); opacity: 0.4; }

/* The admin: filters over the queue, the parties, the actions of the case head, a button lifted above the scrim */
.frc-filters { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.frc-filters .al-qtabs { flex: 1; }
.frc-kindfilter { width: calc(var(--space-24) * 2); flex: none; }
.frc-kindfilter .select__button { display: flex; align-items: center; gap: var(--space-2); }
.frc-parties { display: flex; flex-direction: column; }
.frc-headmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.frc-headactions { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.frc-lift { position: relative; z-index: 3; }
.frc-lift .btn { box-shadow: var(--shadow-overlay); }
.frc-admin .al-page__inner { align-content: start; }
.frc-modal .modal__body { display: flex; flex-direction: column; gap: var(--space-4); }
.frc-modal .modal__body p { margin: 0; }
.frc-modal > .t-caption { margin: 0; padding: 0 var(--space-5) var(--space-4); }
.frc-inline__row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.frc-inline { border: 0; padding: 0; margin: 0; }
.frc-modal .radio--card { padding: var(--space-3) var(--space-4); }

/* A small confirm dialog over a page (the website), and over the phone's page */
.frc-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center start; padding: var(--space-6); background: var(--color-overlay); }
.frc-modal--sm { width: min(100%, calc(var(--size-dialog) * 0.72)); animation: none; }
.frc-scrim .modal { animation: none; }
.frc-sheet-host { min-height: 0; }

/* The notification as a toast on the website: in the title's row, the right column starts below it */
.frc-notif--toast { gap: 0; width: min(100%, calc(var(--space-24) * 3.5)); padding: 0; border: 0; background: transparent; box-shadow: none; }
.frc-notif--toast .frc-push { background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.frc-stage--toast .frc-cols > .frc-stack:last-child { padding-top: calc(var(--space-12) + var(--space-6)); }
.frc-payout .ks-block__head { flex-wrap: wrap; }
.frc-filters .al-qtabs { overflow: visible; padding-top: var(--space-2); }
.frc-admin .table-wrap { overflow: visible; }
.frc-inline .radio { padding-left: var(--space-1); }

/* A marked field gets room inside its ring */
.frc-web [data-flow-target].field, .frc-app [data-flow-target].field, .frc-modal [data-flow-target].field { padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); }
.frc-admin .table th, .frc-admin .table td { padding-inline: var(--space-3); }
.frc-stage--panel { min-height: calc(var(--space-24) * 2.6); }
.frc-admin .table { font-size: var(--text-sm); line-height: var(--leading-sm); }
.frc-admin .table th, .frc-admin .table td { padding-inline: var(--space-2); }
.frc-app--banner .al-page__inner { padding-top: var(--space-10); }
.frc-notif--toast { width: min(100%, calc(var(--space-24) * 3.2)); }
.frc-admin .al-item__text { max-width: calc(var(--space-24) * 1.6); }
.frc-admin .ksw-stage:has(.ksw-scrim) { min-height: calc(var(--space-24) * 9); }
.frc-admin .ksw-scrim { align-items: start; padding-top: calc(var(--space-16) + var(--space-4)); }
.frc-app .frc-thread--bare > .t-card-title { display: none; }
.frc-case__head { flex-wrap: wrap; }
.frc-case__badge { max-width: 100%; }
.frc-case__badge .badge { max-width: 100%; height: auto; min-height: var(--space-5); white-space: normal; }

/* Flow "Buy with direct delivery" (tools/genFlowBuyDirect.mjs): what the flow needs beyond the Key screens — the hero facts,
   the push banner and the lock screen, the notification under the site's bell, the order and list pages of the site,
   the shipping label and the bank's check. Every value is a token. */

.fbd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface); }
.fbd-fact { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fbd-fact dt, .fbd-fact dd { margin: 0; }
.fbd-fact dd { color: var(--color-foreground); }
@media (max-width: 960px) { .fbd-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* The push: a banner over the app, the same one on the lock screen and, as an item, under the bell of the site */
.fbd-host { position: relative; }
.fbd-push { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fbd-push { margin: var(--space-2) var(--space-3); }
.fbd-push--over { position: absolute; z-index: 3; top: var(--space-8); left: var(--space-3); right: var(--space-3); }
.fbd-push__icon { display: grid; flex: none; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-primary-foreground); }
.fbd-push__icon .icon { width: var(--space-4); height: var(--space-4); }
.fbd-push__text { display: flex; flex-direction: column; flex: 1; gap: var(--space-1); min-width: 0; }
.fbd-push__text p { margin: 0; }
.fbd-push__meta { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-2xs); line-height: var(--leading-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.fbd-push__title { color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-sm); }
.fbd-push__body { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

.fbd-lock { position: relative; align-items: stretch; gap: var(--space-4); padding-bottom: var(--space-8); background: var(--color-surface-inverted); color: var(--color-inverted); }
.fbd-lock .al-status { background: transparent; color: inherit; }
.fbd-lock__clock { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-10); }
.fbd-lock__clock p { margin: 0; }
.fbd-lock__date { font-size: var(--text-sm); line-height: var(--leading-sm); opacity: 0.8; }
.fbd-lock__time { font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: var(--weight-semibold); }
.fbd-lock .fbd-push { margin: var(--space-6) var(--space-3) 0; }
.fbd-lock__bar { align-self: center; width: calc(var(--space-24) + var(--space-8)); height: var(--space-1); margin-top: auto; border-radius: var(--radius-full); background: var(--color-inverted); opacity: 0.6; }

/* The site's top bar: the query typed, a bell with the notification open under it */
.fbd-query { color: var(--color-foreground); }
.fbd-head { position: relative; }
.fbd-notice { position: absolute; z-index: 4; top: 100%; right: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); width: calc(var(--space-24) * 3.5); padding: var(--space-3); border: 1px solid var(--color-default); border-radius: var(--radius-overlay); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.fbd-notice > p { margin: 0; }
.fbd-notice__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-primary-soft); }

/* Search results and the order pages of the site */
.fbd-chips { margin-bottom: var(--space-4); }
.fbd-results { display: grid; grid-template-columns: minmax(0, calc(var(--space-24) * 5)); gap: var(--space-4); }
.fbd-wrap { max-width: calc(var(--space-24) * 10); }
.fbd-order { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.fbd-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fbd-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: calc(var(--space-24) * 5); margin-top: var(--space-4); }
.fbd-tabs { max-width: calc(var(--space-24) * 5); }
.fbd-stage { position: relative; min-height: calc(var(--space-24) * 5); }
.fbd-taken { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: calc(var(--space-24) * 4); }
.fbd-webpay { align-items: flex-start; gap: var(--space-3); max-width: calc(var(--space-24) * 4); }
.fbd-reserve { display: flex; }
.ksw-summary .countdown { align-self: flex-start; }

/* The shipping label Claire prints */
.fbd-hand { padding-top: var(--space-1); }
.fbd-label { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-emphasis); border-radius: var(--radius-card); background: var(--color-surface); }
.fbd-label p { margin: 0; }
.fbd-label__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.fbd-label__to { display: flex; flex-direction: column; gap: var(--space-1); }
.fbd-bars { display: block; height: var(--space-8); background: repeating-linear-gradient(90deg, var(--color-foreground) 0 var(--space-1), transparent var(--space-1) calc(var(--space-1) * 1.5), var(--color-foreground) calc(var(--space-1) * 1.5) calc(var(--space-1) * 2), transparent calc(var(--space-1) * 2) calc(var(--space-1) * 3)); }

/* The bank's extra check and a declined payment, inside the checkout */
.fbd-bank { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.fbd-bank p { margin: 0; }
.fbd-bank__head { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.fbd-declined { display: flex; flex-direction: column; gap: var(--space-2); }
.fbd-declined > p { margin: 0; }
.fbd-paybar { border-top: 0; }

/* A target's number sits on the corner: the cards that clip their content let it out */
.ks-orderrow[data-flow-target], .listing-card[data-flow-target], .ks-gallery[data-flow-target] { overflow: visible; }
.fbd-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.fbd-pagehead__side { display: flex; align-items: center; gap: var(--space-3); }
.currency__seg[data-flow-target] { overflow: visible; }
.tabs:has([data-flow-target]) { overflow: visible; }

/* Not found: a desktop frame on a phone-wide page keeps to its width — the bar's end gives way, the heading wraps */
@media (max-width: 480px) {
  .nf-app--desktop .nf-bar__end { display: none; }
  .nf-app--desktop .nf-heading { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .nf-app--desktop .nf-actions { flex-wrap: wrap; min-width: 0; }
  .nf-app--desktop .nf-actions .btn { white-space: normal; max-width: 100%; }
  .nf-app--desktop :is(.nf-gone, .nf-sold) { flex-direction: column; align-items: stretch; grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .nf-app--desktop :is(.nf-gone__copy, .nf-sold__copy) { min-width: 0; }
  .nf-app--desktop :is(.nf-gone, .nf-sold) .btn { white-space: normal; max-width: 100%; }
}