/* ============================================================
   Recreated product surfaces.
   Everything below rebuilds a real LabelLedger screen in static HTML:
   the operator console, the Studio composition environment, the money
   table and the daily-stats axes. Same token discipline as the rest of
   the page. No fake window chrome anywhere.
   ============================================================ */

/* ---------------- operator console (hero figure) ---------------- */

.console__body {
  display: grid;
  gap: var(--space-xs);
}

.pipe {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.pipe__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: 10px 14px;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}

.pipe__row {
  display: grid;
  /* minmax(0,1fr) · a bare 1fr lets long labels blow the track out */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pipe__stage {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border-left: var(--rule-hair) solid var(--color-rule-soft);
  min-width: 0;
}

.pipe__stage:first-child {
  border-left: 0;
}

.pipe__stage .mono {
  overflow-wrap: anywhere;
}

.pipe__stage b {
  font-weight: var(--weight-regular);
  font-size: var(--text-h-s);
  letter-spacing: var(--tracking-h);
  color: var(--color-ink);
}

.pipe__stage.is-live b {
  color: var(--color-ch-amber);
}

/* a sparkline drawn with one gradient · no library, no image */
.spark {
  display: block;
  height: 22px;
  margin-top: 2px;
  border-radius: 2px;
  background: linear-gradient(
      to top,
      color-mix(in oklab, var(--color-ink-4) 55%, transparent) 0%,
      transparent calc(var(--v) * 1%)
    ),
    repeating-linear-gradient(90deg, var(--color-rule-soft) 0 1px, transparent 1px 5px);
  opacity: 0.9;
}

.spark--blue {
  background: linear-gradient(to top, var(--color-ch-blue-soft) 0%, transparent calc(var(--v) * 1%)),
    repeating-linear-gradient(90deg, var(--color-rule-soft) 0 1px, transparent 1px 5px);
}
.spark--amber {
  background: linear-gradient(to top, var(--color-ch-amber-soft) 0%, transparent calc(var(--v) * 1%)),
    repeating-linear-gradient(90deg, var(--color-rule-soft) 0 1px, transparent 1px 5px);
}
.spark--cyan {
  background: linear-gradient(to top, var(--color-ch-cyan-soft) 0%, transparent calc(var(--v) * 1%)),
    repeating-linear-gradient(90deg, var(--color-rule-soft) 0 1px, transparent 1px 5px);
}
.spark--green {
  background: linear-gradient(to top, var(--color-ch-green-soft) 0%, transparent calc(var(--v) * 1%)),
    repeating-linear-gradient(90deg, var(--color-rule-soft) 0 1px, transparent 1px 5px);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tile {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  min-width: 0;
}

.tile--wide {
  grid-column: 1 / -1;
}

.tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-width: 0;
}

.tile__value {
  font-size: var(--text-h);
  line-height: 1.05;
  letter-spacing: var(--tracking-h);
  color: var(--color-ink);
}

.tile__delta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-3);
}

.tile__delta--up {
  color: var(--color-ch-green);
}

.chart--area {
  width: 100%;
  height: 56px;
  margin-top: 2px;
}

.meter {
  height: 4px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-inset);
  overflow: hidden;
}

.meter__fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--color-ch-green);
  border-radius: inherit;
}

/* share rows: name · bar · value, aligned on the digits */
.shares {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

/* name · value · bar. The value sits before the bar so the number is still
   readable when the right of the figure runs past the viewport edge. */
.share {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xs);
}

.share__name {
  font-size: var(--text-body-s);
  color: var(--color-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share__bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-inset);
  overflow: hidden;
}

.share__fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-ink-4);
}

.share__fill--green {
  background: var(--color-ch-green);
}
.share__fill--red {
  background: var(--color-ch-red);
}
.share__fill--amber {
  background: var(--color-ch-amber);
}
.share__fill--violet {
  background: var(--color-ch-violet);
}

.share__val {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-ink-2);
  text-align: right;
}

@media (max-width: 48rem) {
  .pipe__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pipe__stage:nth-child(odd) {
    border-left: 0;
  }
  .pipe__stage {
    border-top: var(--rule-hair) solid var(--color-rule-soft);
  }
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile--wide {
    grid-column: auto;
  }
}

/* ---------------- diagrams ---------------- */

.dgm {
  width: 100%;
  height: auto;
}

.dgm__t {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tracking-caption);
  fill: var(--color-ink-3);
  text-transform: uppercase;
}

.dgm__t--accent {
  fill: var(--color-ch-blue);
}

.ledger {
  display: grid;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs);
  padding: 10px 12px;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}

.ledger__row:last-child {
  border-bottom: 0;
}

.ledger__row--total {
  background: var(--color-surface-2);
}

.ledger__ref {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger__amt {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-ch-green);
}

.ledger__amt--neg {
  color: var(--color-ch-red);
}

.ledger__row--total .ledger__amt {
  color: var(--color-ink);
}

.states {
  display: grid;
  gap: 2px;
}

.states__row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-body-s);
  color: var(--color-ink-2);
}

.states__row.is-terminal {
  color: var(--color-ink);
  background: var(--color-ch-red-soft);
}

.states__note {
  margin-top: var(--space-2xs);
}

/* ---------------- Studio screen ----------------
   Inside this figure the rules change: it is a recreation of a shipping
   product, so it follows THAT product's system, not the marketing page's.
   Pill controls, 9/10/12/14px radii, the one soft shadow, depth by surface
   tone. Nothing here is focusable; it is an illustration, not a panel.
   ------------------------------------------------------------------ */

.studio {
  min-width: 0;
}

/* 48px glass bar, same as the shipping toolbar */
.studio__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: var(--space-2xs);
  min-height: 48px;
  padding: 8px var(--space-xs);
  background: var(--color-glass);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 -1px 0 var(--color-rule-soft);
}

.studio__title {
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.studio__titlesub {
  font-size: var(--text-body-s);
  color: var(--color-ink-3);
  margin-left: -6px;
}

/* 32px icon button, radius 10 */
.iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--color-ink-3);
}

/* ghost pill, dimmed because there is nothing to save */
.ghostpill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--color-ink-2);
  white-space: nowrap;
}

.ghostpill.is-disabled {
  opacity: 0.4;
}

/* the primary action is a light pill on the dark ladder, per the product */
.publishpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.studio__body {
  display: grid;
  grid-template-columns: 52px minmax(0, 244px) minmax(0, 1fr);
  min-height: 460px;
}

/* 52px rail, 40x40 tiles at radius 10, active tile inverts to ink */
.studio__rail {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  padding: 10px 0;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-rule-soft);
}

.studio__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--color-ink-3);
}

.studio__icon svg {
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
}

.studio__icon.is-on {
  background: var(--color-ink);
  color: var(--color-paper);
}

.studio__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-rule-soft);
}

.studio__panelhead {
  padding: 16px 20px 14px;
  box-shadow: inset 0 -1px 0 var(--color-rule-soft);
}

.studio__paneltitle {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.studio__paneldesc {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-ink-3);
}

/* the control column is the only scrolling region on the left, as shipped */
.studio__panelbody {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 460px;
  overflow-y: auto;
  padding: 16px 20px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-inset-2) transparent;
}

.studio__panelbody[hidden] {
  display: none;
}

.grp {
  margin-bottom: var(--space-sm);
}

.grp__label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.fld {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.fld__label {
  display: block;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
}

.fld__input {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: var(--color-inset);
  font-size: var(--text-body-s);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.fld__input--mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.fld__input--ph {
  color: var(--color-ink-3);
}

.hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-ink-3);
  margin-top: 8px;
}

/* segmented control: inset well, radius 9, active lifts to a card */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--color-inset);
}

.seg--full {
  display: flex;
  width: 100%;
}

.seg--full .seg__btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--color-ink-3);
}

.seg__btn.is-on {
  background: var(--color-surface-2);
  color: var(--color-ink);
  box-shadow: 0 0 0 0.5px oklch(100% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.45);
}

.seg--tenants .seg__btn {
  padding-inline: 8px;
}

.markchip {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 4px;
  background: var(--mk, var(--color-ch-blue));
  color: var(--color-light-2);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--weight-medium);
  line-height: 1;
}

.markchip--lg {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  font-size: 12px;
}

/* auto width inside a grid track stretches; size it to its own content */
.markchip--neutral {
  background: var(--color-inset-2);
  color: var(--color-ink);
  width: fit-content;
  min-width: 25px;
  padding-inline: 7px;
  letter-spacing: 0.04em;
}

.door .markchip {
  justify-self: start;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  font-size: 11px;
}

.door .markchip--neutral {
  width: fit-content;
}

/* 30x30 swatches at radius 9, selected carries the double ring */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.swatch {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sw);
}

.swatch.is-on {
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 3.5px var(--color-ink);
}

.radiocard {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  margin-bottom: 7px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.radiocard.is-on {
  box-shadow:
    0 0 0 1px var(--color-ink),
    0 0 0 3.5px oklch(100% 0 0 / 0.07);
}

.radiocard__thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--color-inset-2);
}

.radiocard b {
  display: block;
  font-weight: var(--weight-regular);
  font-size: 13px;
  color: var(--color-ink);
}

.radiocard i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--color-ink-3);
}

.radiocard__dot {
  width: 17px;
  height: 17px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-ink-4);
}

.radiocard.is-on .radiocard__dot {
  box-shadow: inset 0 0 0 1px var(--color-ch-blue);
  background: radial-gradient(circle, var(--color-ch-blue) 0 4px, transparent 4.5px);
}

.sortlist,
.toggles,
.routes {
  display: grid;
  gap: 5px;
}

.sortrow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: 13px;
  color: var(--color-ink-2);
}

.grip {
  height: 10px;
  width: 9px;
  background: repeating-linear-gradient(to bottom, var(--color-ink-4) 0 1.5px, transparent 1.5px 4.5px);
}

.sortrow__x {
  color: var(--color-ink-4);
  text-align: right;
}

/* 38x22 pill switch, green when on, exactly as shipped */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: 7px 0;
  font-size: 13px;
  color: var(--color-ink-2);
}

.sw {
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-inset-2);
  position: relative;
}

.sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-ink-3);
  transition: transform var(--dur) var(--ease-out);
}

.sw.is-on {
  background: var(--color-ch-green);
}

.sw.is-on::after {
  background: var(--color-light-2);
  transform: translateX(16px);
}

.pcard {
  background: var(--color-surface-2);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 9px;
}

.pcard__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: oklch(100% 0 0 / 0.03);
  box-shadow: inset 0 -1px 0 var(--color-rule-soft);
}

.pcard__head b {
  display: block;
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  color: var(--color-ink);
}

.pcard__head i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-ink-3);
}

.pcard__body {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 11px 12px;
}

.chip {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-inset);
  font-size: 11.5px;
  color: var(--color-ink-2);
}

.route {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--color-ink-2);
}

.route__ch {
  color: var(--color-ink-3);
}

/* ---- the stage ----
   The shipping stage is a neutral gradient the tenant frame sits on, and the
   frame carries the product's one shadow. That contrast is what makes the
   preview read as a device rather than another panel. */

.studio__stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, oklch(18.5% 0.007 285.7), oklch(21.5% 0.008 285.7));
}

.studio__stagebar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 6px;
  min-height: 44px;
  padding: 6px var(--space-xs);
  box-shadow: inset 0 -1px 0 var(--color-rule-soft);
}

.studio__canvas {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  min-width: 0;
  overflow: hidden;
}

/* ---------------- the live tenant preview (.pv) ----------------
   Ported class for class from the shipping StudioPreview.module.css, dark
   branch. Same class names (pc, pv-sl, drow, pst, lc, bar2, stat, span-*),
   same geometry, same density cascade. Do not restyle it toward this page:
   it is a different product's surface and it is supposed to look like one.
   ---------------------------------------------------------------- */

.pv {
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  color: var(--pv-ink);
  background: var(--pv-bg);
  border-radius: 14px;
  overflow: hidden;
  font-size: calc(15px * var(--pv-fs));
  letter-spacing: -0.015em;
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 30px 80px -30px oklch(0% 0 0 / 0.85);
}

.pv * {
  box-sizing: border-box;
}

/* the card: elevated treatment, the product's one shadow */
.pv .pc {
  background: var(--pv-card);
  border-radius: var(--pv-r);
  padding: var(--pv-pad);
  box-shadow: var(--pv-sh);
}

/* ---- chrome ---- */
.pv .pv-top {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  /* centre the tenant mark on the same 62px axis as the command rail */
  padding: 0 24px 0 calc((62px - 25px) / 2);
  background: var(--pv-chrome);
  border-bottom: 1px solid var(--pv-hair);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pv .pv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv .pv-mk {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--pv-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 680;
}

.pv .pv-bn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pv .pv-cmd {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  height: 34px;
  border-radius: 980px;
  background: var(--pv-inset);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--pv-ink-3);
}

.pv .pv-cmd svg {
  stroke: var(--pv-ink-3);
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
}

.pv .pv-cmd .kk {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
}

.pv .pv-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pv-ink);
  color: var(--pv-ink-invert);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

.pv .pv-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* command rail: the Meridian default navigation model */
.pv .pv-cmrail {
  width: 62px;
  flex-shrink: 0;
  border-right: 1px solid var(--pv-hair);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--pv-card);
}

.pv .pv-cmrail .cr {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--pv-ink-3);
}

.pv .pv-cmrail .cr svg {
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
}

.pv .pv-cmrail .cr.on {
  background: var(--pv-accent);
  color: #fff;
}

.pv .pv-main {
  flex: 1;
  overflow: hidden;
  padding: var(--pv-pad);
}

.pv .pv-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: calc(var(--pv-gap) + 4px);
  flex-wrap: wrap;
}

.pv .pv-h .pv-title {
  font-size: calc(27px * var(--pv-fs));
  font-weight: 640;
  letter-spacing: -0.03em;
  margin: 0;
}

.pv .pv-h .hs {
  font-size: calc(14px * var(--pv-fs));
  color: var(--pv-ink-3);
  font-weight: 450;
}

.pv .pv-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pv-gap);
}

.pv .pv-blk {
  min-width: 0;
}

.pv .span-12 {
  grid-column: span 12;
}
.pv .span-8 {
  grid-column: span 8;
}
.pv .span-6 {
  grid-column: span 6;
}
.pv .span-4 {
  grid-column: span 4;
}
.pv .span-3 {
  grid-column: span 3;
}

/* section label inside a card: 01 · Decisions · meta */
.pv .pv-sl {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
}

.pv .pv-sl .n {
  font-size: 10px;
  font-weight: 560;
  color: var(--pv-ink-4);
  font-variant-numeric: tabular-nums;
}

.pv .pv-sl h2 {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pv-ink-3);
  margin: 0;
}

.pv .pv-sl .m {
  margin-left: auto;
  font-size: 11px;
  color: var(--pv-ink-3);
  font-weight: 450;
}

/* decision rows */
.pv .drow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}

.pv .drow + .drow {
  box-shadow: inset 0 1px 0 var(--pv-seam);
}

.pv .drow .rl {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  flex-shrink: 0;
}

.pv .drow .ch {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--pv-ink-3);
  background: var(--pv-inset);
  border-radius: 6px;
  padding: 4px 7px;
  flex-shrink: 0;
  width: 92px;
  text-align: center;
}

.pv .drow .dm {
  flex: 1;
  min-width: 0;
}

.pv .drow .dt {
  font-size: calc(13.5px * var(--pv-fs));
  font-weight: 560;
}

.pv .drow .de {
  font-size: calc(12px * var(--pv-fs));
  color: var(--pv-ink-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* preview buttons: pill variant, the Meridian default */
.pv .b {
  font-size: calc(12.5px * var(--pv-fs));
  font-weight: 540;
  padding: 0 14px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 980px;
}

.pv .b.prim {
  background: var(--pv-ink);
  color: var(--pv-ink-invert);
}

.pv .b.acc {
  background: var(--pv-accent);
  color: #fff;
}

.pv .b.go {
  background: var(--pv-pos);
  color: var(--pv-ink-invert);
}

/* pipeline */
.pv .pipe {
  display: flex;
  align-items: stretch;
}

.pv .pst {
  flex: 1;
  padding: 4px 16px;
  position: relative;
  min-width: 0;
}

.pv .pst + .pst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--pv-seam-2);
}

.pv .pst:first-child {
  padding-left: 0;
}

.pv .pst .pl {
  font-size: 10px;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pv-ink-3);
}

.pv .pst .pvv {
  font-size: calc(23px * var(--pv-fs));
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.pv .pst.act .pvv {
  color: var(--pv-accent);
}

/* ledger */
.pv .led {
  display: flex;
  align-items: stretch;
}

.pv .lc {
  flex: 1;
  padding: 0 18px;
  position: relative;
  min-width: 0;
}

.pv .lc:first-child {
  padding-left: 0;
}

.pv .lc + .lc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--pv-seam-2);
}

.pv .lc .ll {
  font-size: 10px;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pv-ink-3);
}

.pv .lc .lv {
  font-size: calc(21px * var(--pv-fs));
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 7px;
}

.pv .lc .lsr {
  font-size: 11px;
  color: var(--pv-ink-3);
  margin-top: 4px;
}

/* generic stat */
.pv .stat .sl {
  font-size: 10px;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pv-ink-3);
}

.pv .stat .sv {
  font-size: calc(26px * var(--pv-fs));
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 6px;
}

.pv .stat .ss {
  font-size: 11.5px;
  color: var(--pv-ink-3);
  margin-top: 4px;
}

/* bars */
.pv .bar2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(12px * var(--pv-fs));
  color: var(--pv-ink-2);
  padding: 4px 0;
}

.pv .bar2 .bn {
  width: 62px;
  flex-shrink: 0;
}

.pv .bar2 .bt {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--pv-inset);
  overflow: hidden;
}

.pv .bar2 .bt i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--pv-accent);
  opacity: 0.8;
}

.pv .bar2 .bv {
  width: 32px;
  text-align: right;
  font-size: 11px;
  color: var(--pv-ink-3);
  font-variant-numeric: tabular-nums;
}

.pv .dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  display: inline-block;
  flex-shrink: 0;
}

.pv .num {
  font-variant-numeric: tabular-nums;
}

/* the hand rolled area chart, same geometry as previewCharts */
.pv .pvchart {
  display: block;
  width: 100%;
  height: 96px;
  margin-top: 14px;
  overflow: visible;
}

.pv .pvchart--sm {
  height: 42px;
}

@media (max-width: 72rem) {
  .studio__body {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .studio__stage {
    grid-column: 1 / -1;
    box-shadow: inset 0 1px 0 var(--color-rule-soft);
  }
  .studio__panel {
    box-shadow: none;
  }
}

@media (max-width: 40rem) {
  .studio__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio__rail {
    grid-auto-flow: column;
    justify-content: start;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    box-shadow: inset 0 -1px 0 var(--color-rule-soft);
  }
  .pc__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pc__rows li .pc__kind,
  .pc__rows li .pc__d {
    display: none;
  }
  .pc__stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pc--8,
  .pc--4 {
    grid-column: span 12;
  }
}

/* ---------------- pipeline chains ---------------- */

.chains {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.chain {
  display: grid;
  gap: 10px;
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.chain__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chain__row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-body-s);
  color: var(--color-ink-2);
}

.chain__row--wide li {
  font-size: var(--text-body-s);
}

 /* A branch is a quieter state, not a different kind of object. The product
   shows state with a small coloured dot and a quiet tinted pill; it never
   draws a dashed outline. */
.chain__row .chain__branch {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-rule-soft);
  color: var(--color-ink-3);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.fact {
  min-width: 0;
}

.fact__k {
  margin-bottom: 6px;
}

.fact__v {
  font-size: var(--text-body-s);
  line-height: 1.55;
  color: var(--color-ink-2);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* ---------------- money table ---------------- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tbl th,
.tbl td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  font-size: var(--text-body-s);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.tbl th {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: var(--weight-regular);
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* `.tbl th` is one point more specific than a bare `.tbl__r`, so the
   alignment has to be qualified or the money column stays left-aligned. */
.tbl th.tbl__r,
.tbl td.tbl__r {
  text-align: right;
}

.tbl td.tbl__r {
  color: var(--color-ink);
}


/* a wide numeric table scrolls inside its own box, never the page */
.figure__body:has(> .tbl) {
  overflow-x: auto;
}

.checks {
  display: grid;
  gap: 10px;
}

.checks li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2xs);
  font-size: var(--text-body-s);
  line-height: 1.55;
  color: var(--color-ink-2);
}

.checks .dot {
  margin-top: 7px;
}

/* ---------------- daily-stats axes ---------------- */

.axes {
  display: grid;
  gap: var(--space-xs);
}

.axis {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.axis__v {
  font-size: var(--text-h-s);
  letter-spacing: var(--tracking-h);
  color: var(--color-ink);
  line-height: 1;
}

.axis__bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-inset);
  overflow: hidden;
}

.axis__fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--c);
}

/* ---------------- portals ---------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.door {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.door__d {
  font-size: var(--text-body-s);
  line-height: 1.55;
  color: var(--color-ink-2);
}


/* the hero shows the surface at full size; the Studio stage shows the same
   surface auto fitted, which is exactly what the shipping stage does */
.heroshot {
  margin: 0;
  min-width: 0;
}


.pv--stage {
  max-width: 100%;
  font-size: calc(15px * 0.82);
  --pv-gap: 13px;
  --pv-pad: 16px;
  --pv-fs: 0.82;
}

.pv--stage .pv-top {
  height: 44px;
  /* the compact preview uses a 50px rail, so its mark centres at 25px */
  padding: 0 16px 0 calc((50px - 25px) / 2);
  gap: 12px;
}

.pv--stage .pv-cmrail {
  width: 50px;
  padding: 10px 0;
}

.pv--stage .pv-cmrail .cr {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.pv--stage .pv-cmrail .cr::after {
  width: 15px;
  height: 15px;
}

.pv--stage .drow .ch {
  width: 78px;
}

/* below the fold the pipeline and ledger wrap to two rows rather than
   crushing five columns, same as the product's own mobile branch */
@media (max-width: 52rem) {
  .pv .led,
  .pv .pipe {
    flex-wrap: wrap;
    gap: 10px 0;
  }
  .pv .lc,
  .pv .pst {
    flex: 0 0 50%;
    padding: 6px 14px;
  }
  .pv .lc + .lc::before,
  .pv .pst + .pst::before {
    display: none;
  }
  .pv .span-8,
  .pv .span-4 {
    grid-column: span 12;
  }
  .pv .drow .ch {
    display: none;
  }
}

@media (max-width: 34rem) {
  .pv .pv-cmd {
    display: none;
  }
  .pv .pv-main {
    padding: 14px;
  }
  .pv .pv-h .pv-title {
    font-size: 22px;
  }
}

/* The hero surface is a whole product page, so it is taller than the fold.
   Cap it and fade the cut instead of letting it push the hero to 1200px:
   the fade is the same "there is more of this" signal as the right edge. */
.heroshot .pv {
  max-height: min(66vh, 620px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}

@media (max-width: 68rem) {
  .heroshot .pv {
    max-height: 520px;
  }
}

/* the caption belongs to the copy column's reading line, not to the clipped
   right edge, so it stays inside the viewport */

/* The shipping stage auto fits the frame with a 7% margin per axis and caps
   the scale at 0.82; there are no zoom controls. Same idea here: the surface
   is capped and centred rather than stretched to whatever the column is. */
.studio__canvas .pv--stage {
  max-height: 560px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
}

.studio__body {
  align-items: stretch;
}

/* ---------------- accent propagation figure ----------------
   Four miniature surfaces carrying one accent. The fourth is in light mode,
   so the neutral ladder visibly flips while the accent chip does not: that
   is the whole rule, shown rather than described.
   ---------------------------------------------------------- */

.surfaces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.surf {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  min-width: 0;
}

.surf--light {
  background: var(--color-light);
}

.surf__mk {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--color-ch-blue);
}

.surf__l {
  height: 3px;
  width: var(--w);
  border-radius: 3px;
  background: var(--color-ink-4);
}

.surf--light .surf__l {
  background: var(--color-paper);
  opacity: 0.28;
}

.surf__n {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ink-3);
  overflow-wrap: anywhere;
}

.surf--light .surf__n {
  color: var(--color-paper);
  opacity: 0.55;
}

.surfaces__key {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-3);
}

.surfaces__swatch {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px;
  background: var(--color-ch-blue);
}

@media (max-width: 30rem) {
  .surfaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------- data over time chart ----------------
   The Daily Stats trend, in the grammar the dashboards already use: a
   monotone area for the total plus one line per store, a dashed horizontal
   grid, no axis lines and no tick marks, compact axis labels. The series is
   the product's own sample curve and the legend says so.
   ------------------------------------------------------ */

.trend {
  margin: 0;
  min-width: 0;
}

.trend__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trend .ax {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caption);
  fill: var(--color-ink-3);
}

.trend__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--rule-hair) solid var(--color-rule-soft);
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.lg i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.lg--note {
  margin-left: auto;
  color: var(--color-ink-4);
}

@media (max-width: 34rem) {
  .lg--note {
    margin-left: 0;
  }
}

/* ---------------- Daily Stats trend card ----------------
   distro's GlassCard: rounded-2xl, no border, translucent card at 90% with a
   blur, one shadow, 24px padding. Header is Title left, two selects right.
   The chart is the DataOverTimeChart: a monotone total area over a per store
   line each, dashed horizontal grid, no axis lines, no tick marks, compact
   axis labels, and a tooltip with a two column entry grid and a Total row.
   -------------------------------------------------------- */

.rc {
  border-radius: 16px;
  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-card);
  padding: var(--space-sm);
  min-width: 0;
}

.rc__head {
  margin-bottom: var(--space-sm);
}

.rc__title {
  font-size: var(--text-h-s);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.rc__plot {
  position: relative;
  min-width: 0;
}

.rc__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  border-radius: 8px;
}

.rc__svg:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.rc__ax {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  fill: var(--color-ink-2);
}

/* Cursor and dots are hidden until a point is being read, and they travel to
   the next day rather than jumping. Geometry attributes cannot be transitioned,
   so both move on `transform`, which also keeps this off the layout path. */
.rc__cursor,
.rc__dot {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.rc.is-reading .rc__cursor,
.rc.is-reading .rc__dot {
  opacity: 1;
}

/* the tooltip, positioned against the plot box */
.rc__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
  min-width: min(340px, 84vw);
  padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--color-surface-2) 95%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* --x and --y are written by the script; the tooltip slides with the cursor
     on the compositor rather than being re-laid-out each move */
  transform: translate(var(--x, 0), calc(var(--y, 0) + 4px));
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur-fast) var(--ease-out);
}

.rc.is-reading .rc__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--x, 0), var(--y, 0));
}

.rc__tip-day {
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  opacity: 0.8;
  margin-bottom: 12px;
}

.rc__tip-grid {
  display: grid;
  grid-template-columns: 6px auto 70px;
  column-gap: 8px;
  row-gap: 10px;
  align-items: center;
}

@media (min-width: 30rem) {
  .rc__tip-grid {
    grid-template-columns: 6px auto 70px 20px 6px auto 70px;
  }
}

.rc__tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.rc__tip-name {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc__tip-val {
  font-size: 13px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  text-align: right;
}

.rc__tip-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: 12px;
  padding-top: 8px;
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.rc__tip-total b {
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.rc__tip-total span {
  color: var(--color-series-total);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .rc {
    padding: var(--space-xs);
  }
}


/* ---------------- FAQ ----------------
   Native <details> with a shared name, so the browser owns the exclusive
   accordion, the keyboard behaviour and the open state. No script.
   Rows are separated by a hairline, not boxed: eight bordered cards would
   read as eight objects instead of one list.
   -------------------------------------- */

/* Heading pinned left, questions on the right. A single centred column left
   a third of the row empty and gave the section the same shape as the ones
   above it; splitting it uses the width and changes the rhythm. */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.faq-lead {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-lg));
}

.faq {
  border-top: var(--rule-hair) solid var(--color-rule);
  min-width: 0;
}

@media (max-width: 62rem) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .faq-lead {
    position: static;
  }
}

.faq__item {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-h-s);
  letter-spacing: var(--tracking-h);
  color: var(--color-ink-2);
  transition: color var(--dur) var(--ease-out);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover,
.faq__item[open] .faq__q {
  color: var(--color-ink);
}

.faq__q:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* a plus that becomes a minus: two rules, one of which rotates away */
.faq__mark {
  position: relative;
  width: 13px;
  height: 13px;
  flex: none;
  align-self: center;
  color: var(--color-ink-3);
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
}

.faq__mark::after {
  transform: rotate(90deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.faq__item[open] .faq__mark::after {
  transform: rotate(0deg);
}

.faq__a {
  padding-bottom: var(--space-sm);
  max-width: 68ch;
}

/* <details> jumps open by default. interpolate-size lets a keyword height be
   animated, and allow-discrete keeps the content visible for the length of the
   collapse instead of vanishing on frame one. Browsers without ::details-content
   still open the panel, just without the glide. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size var(--dur-slow) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    content-visibility var(--dur-slow) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.faq__a p {
  color: var(--color-ink-2);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .faq__mark::after {
    transition: none;
  }
}

/* The closing card follows straight on, so this section does not need a full
   gap under it as well as the closer's own gap above. */
.section--faq {
  padding-bottom: var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content {
    transition: none;
  }
  .rc__cursor,
  .rc__dot,
  .rc__tip {
    transition-duration: 0.01ms;
  }
}