/* =========================================================
   Page — Video commerce

   Band order: hero + player demo · fact strip · three steps ·
   tag editor row · live row · placements · report panel ·
   specs table · FAQ · closer.

   Every frame on this page is drawn: gradients over the theme's
   own surfaces rather than a screenshot or a stock clip. They
   follow light and dark, stay sharp at any width, and cannot age
   against the real product.

   Reads only layer-2 semantic tokens. Zero hardcoded colour.
   ========================================================= */

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.vc-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-20);
}

/* One soft light behind the copy, the same device the home hero
   uses, so the two pages open with the same voice. */
.vc-hero__glow {
  position: absolute;
  inset-block-start: -22%;
  inset-inline-end: -14%;
  width: min(680px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-primary-soft) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.vc-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.vc-hero__copy { max-width: 34rem; }

.vc-hero__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1);
  text-wrap: balance;
}
.vc-hero__title .u-word-mark { white-space: nowrap; }

.vc-hero__lead {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

.vc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.vc-hero__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (min-width: 980px) {
  .vc-hero { padding-block: var(--space-20) var(--space-24); }
  .vc-hero__inner { grid-template-columns: 1fr 1.05fr; }
}

/* ---------------------------------------------------------
   The player demo

   Four shops, four clips. Picking one loads that shop's footage and
   swaps the buy card to the product its camera was pointed at. All
   four cards are in the markup and toggled by class, so the language
   switch keeps working and the first card is visible with
   JavaScript off.

   The frame holds real video now. What it held before was three
   drawn scenes — gradients with a blurred body standing in for a
   product. Those drawings still dress the tag editor and the live
   phone further down the page, which have no capture behind them
   yet, so the subject-and-vignette pair below keeps its other two
   callers.
   --------------------------------------------------------- */
.vplayer {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.vplayer__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* The ground shows through until the first frame decodes, and it is
     what a visitor on reduced-motion or Save-Data keeps looking at
     behind the poster. */
  background: var(--color-canvas-deep);
}

/* ---- The footage ----
   Every clip was filmed upright on a phone, 720×1280. A 16:10 frame
   keeps the middle and drops the rest, which is where the subject is
   for the whole of all four takes. */
.vplayer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The watch was filmed at a very low exposure against black. The file
   is left exactly as it was shot and given its light back here, so the
   correction is visible in one place instead of baked into the media. */
.vplayer.is-at-3 .vplayer__video { filter: brightness(2.6); }

/* ---- What is in a drawn frame ----
   A frame with nothing in it reads as a broken video, not as a
   product shot. Every drawn frame on the page therefore carries a
   subject — one soft blurred body standing in the light — and a
   vignette that seats it in the ground. The accent and the position
   come from the scene, so the same two rules dress both callers. */
.tagger__scene::before,
.live__scene::before {
  content: "";
  position: absolute;
  inset-block: 16% -6%;
  inset-inline-start: var(--subject-at, 46%);
  width: 30%;
  border-radius: 48% 48% 16% 16%;
  background: linear-gradient(180deg, var(--scene-accent), transparent 84%);
  opacity: 0.4;
  filter: blur(11px);
}
.tagger__scene::after,
.live__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    130% 100% at 50% 26%,
    transparent 38%,
    var(--color-canvas-deep) 100%
  );
  opacity: 0.62;
}

.vplayer__chip {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  /* Over footage rather than over the page ground: a surface-coloured
     pill with a hairline sat invisibly on a pale frame and glared on a
     dark one. The scrim carries both. */
  background: var(--color-scrim);
  font-size: var(--fs-xs);
  color: var(--color-text-on-brand);
}
.vplayer__chip-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-growth);
}

.vplayer__duration {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-scrim);
  color: var(--color-text-on-brand);
  font-size: var(--fs-xs);
}

/* ---- The tag pin drawn on the frame ----
   One pin, because each clip has one product in it. Three pins that
   moved between shots was the drawing pretending to be three tags. */
.vplayer__pin {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 58%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-text-on-brand);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* ---- Buy cards ---- */
.vplayer__cards {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-4);
}
.vplayer__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out);
}
/* Only the active card takes space; the others are lifted out of
   flow so the frame does not grow with four stacked cards. */
.vplayer__card--2,
.vplayer__card--3,
.vplayer__card--4 { position: absolute; inset-inline: 0; inset-block-end: 0; }

.vplayer.is-at-1 .vplayer__card--1,
.vplayer.is-at-2 .vplayer__card--2,
.vplayer.is-at-3 .vplayer__card--3,
.vplayer.is-at-4 .vplayer__card--4 { opacity: 1; translate: 0 0; }

/* The shop's own catalogue photograph, at the 240 width — it is drawn
   at 44px, and anything larger is bytes spent below what the screen
   can show. */
.vplayer__thumb {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface-sunken);
}

.vplayer__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vplayer__card-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.vplayer__card-price {
  font-size: var(--fs-xs);
  color: var(--color-gold-text);
}
.vplayer__card-cta {
  margin-inline-start: auto;
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* ---- Playback bar ----
   Width comes from the clip's own currentTime, so it means something.
   It used to be three fixed percentages that matched no file. */
.vplayer__track {
  position: relative;
  height: 6px;
  margin: var(--space-6) var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.vplayer__played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* ---- The four shops ----
   A row of real buttons, not dots pinned to a timeline: they pick a
   file, and a control that changes what is playing should look like
   one. They wrap on a narrow screen instead of overlapping. */
.vplayer__clips {
  /* Two columns, not a wrapping row: four flexible items in a row
     that fits three leaves the fourth stretched across the full width,
     which reads as a different kind of control. A grid keeps them
     equal at every width and the pairs never orphan one. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.vplayer__clip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.vplayer__clip:hover { border-color: var(--color-primary-text); }
.vplayer__clip[aria-pressed="true"] {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
}

.vplayer__clip-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
/* Secondary, not muted: the muted token lands at 4.25:1 on this card in
   the dark theme and 4.25:1 in the light one, which is under AA for a
   line this size. And the active shop keeps the same ink — gold text on
   the gold-soft ground measured 3.21:1, so the selection is carried by
   the border and the name instead. */
.vplayer__clip-trade {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.vplayer__hint {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

/* ---- Narrow screens ----
   A 16:10 frame on a phone leaves 180px of picture, and the buy
   card wraps its name over four lines inside it. The frame gets
   taller, the card lays its button on its own row, and both stay
   inside the picture instead of climbing out of it. */
@media (max-width: 700px) {
  .vplayer__frame { aspect-ratio: 4 / 3; }

  .vplayer__card { flex-wrap: wrap; }
  .vplayer__card-body { flex: 1 1 6rem; }
  .vplayer__card-name { font-size: var(--fs-xs); }
  .vplayer__card-cta {
    margin-inline-start: 0;
    width: 100%;
    text-align: center;
  }

  .tagger__row { flex-wrap: wrap; }
  .tagger__save {
    margin-inline-start: 0;
    width: 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------
   Three steps

   A brass thread runs behind the numbers on a wide screen, so the
   three read as one sequence rather than three loose cards.
   --------------------------------------------------------- */
.vc-how__grid {
  position: relative;
  display: grid;
  gap: var(--space-10);
}
.vc-step {
  position: relative;
  padding-inline-start: var(--space-16);
}
.vc-step__num {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-gold-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.vc-step__title {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-h4);
}
.vc-step__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

@media (min-width: 880px) {
  .vc-how__grid { grid-template-columns: repeat(3, 1fr); }
  .vc-step { padding: var(--space-16) 0 0; }
  .vc-step__num { inset-inline-start: 0; }

  /* The thread: one line behind the row of numbers, stopping at
     the last one rather than running off the edge. */
  .vc-how__grid::before {
    content: "";
    position: absolute;
    inset-block-start: 22px;
    inset-inline: 22px;
    height: 1px;
    background: linear-gradient(
      to left,
      transparent,
      var(--color-line-gold) 12%,
      var(--color-line-gold) 88%,
      transparent
    );
  }
}

/* ---------------------------------------------------------
   Tag editor
   --------------------------------------------------------- */
.tagger {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.tagger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* A media time is a Latin run: elapsed, slash, total. Left to its
   own devices the bidi algorithm reads the pair from the right and
   prints the total first. */
.tagger__time {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.tagger__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.tagger__scene {
  position: absolute;
  inset: 0;
  --scene-accent: var(--color-primary);
  --subject-at: 52%;
  background:
    radial-gradient(110% 80% at 68% 26%, var(--color-primary-soft), transparent 62%),
    radial-gradient(80% 80% at 22% 84%, var(--color-gold-soft), transparent 64%),
    linear-gradient(160deg, var(--color-surface-raised), var(--color-canvas-deep));
}
.tagger__pin {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 66%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-text-on-brand);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.tagger__pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  opacity: 0.45;
}

/* The trim bar: a selected range with a handle at each end. */
.tagger__track {
  position: relative;
  height: 8px;
  margin-block: var(--space-5) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}
.tagger__range {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 13%;
  width: 21%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.tagger__handle {
  position: absolute;
  inset-block-start: 50%;
  width: 12px;
  height: 20px;
  translate: 50% -50%;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface-raised);
}
:root[dir="ltr"] .tagger__handle { translate: -50% -50%; }
.tagger__handle--start { inset-inline-start: 13%; }
.tagger__handle--end { inset-inline-start: 34%; }

.tagger__range-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.tagger__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.tagger__thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--color-primary), var(--color-surface-raised));
}
.tagger__product {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tagger__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.tagger__meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.tagger__save {
  margin-inline-start: auto;
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------
   Live session
   --------------------------------------------------------- */
.live {
  display: flex;
  justify-content: center;
}
.live__phone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-lg);
}
.live__scene {
  position: absolute;
  inset: 0;
  --scene-accent: var(--color-primary);
  --subject-at: 34%;
  background:
    radial-gradient(90% 50% at 50% 14%, var(--color-primary-soft), transparent 60%),
    radial-gradient(80% 44% at 30% 82%, var(--color-growth-soft), transparent 62%),
    linear-gradient(180deg, var(--color-surface-raised), var(--color-canvas-deep));
}

.live__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-on-error);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.live__pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 2s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.live__viewers {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-scrim);
  color: var(--color-text-on-brand);
  font-size: var(--fs-xs);
}

.live__chat {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: calc(var(--space-4) + 84px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.live__msg {
  display: flex;
  gap: var(--space-2);
  align-self: flex-start;
  max-width: 92%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-scrim);
  color: var(--color-text-on-brand);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.live__msg b {
  flex: none;
  color: var(--color-text-on-brand);
  opacity: 0.72;
  font-weight: var(--fw-bold);
}
.live__msg--you { background: var(--color-primary); }

.live__pinned {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.live__pin-thumb {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--color-primary), var(--color-surface-raised));
}
.live__pin-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live__pin-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.live__pin-price {
  font-size: var(--fs-xs);
  color: var(--color-gold-text);
}
.live__pin-cta {
  margin-inline-start: auto;
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* The tier line under the live copy */
.vc-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Placements
   --------------------------------------------------------- */
.vc-places__grid {
  display: grid;
  gap: var(--space-6);
}
.vc-place { gap: var(--space-3); }

/* One line icon each, on the same tinted square the home pillars
   use, so the two pages ask the eye for the same thing. */
.vc-place__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.vc-place__icon svg { width: 22px; height: 22px; }

/* The store's own two surfaces carry the growth tint; the shared
   link, which leaves the store, carries the brass. */
.vc-place__icon--feed,
.vc-place__icon--home {
  background: var(--color-growth-soft);
  color: var(--color-growth-text);
}
.vc-place__icon--link {
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
}

@media (min-width: 720px) {
  .vc-places__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) {
  .vc-places__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------
   Report panel

   The figures in the markup are a drawn example and the panel
   says so on its face. Bar widths are modifiers, not inline
   styles, so the numbers and their picture stay in one file each.
   --------------------------------------------------------- */
.report {
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.report__title { margin: 0; font-size: var(--fs-h4); }

.report__grid {
  display: grid;
  gap: var(--space-10);
}

.funnel__title,
.moments__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.funnel__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.funnel__label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.funnel__figure {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.funnel__bar {
  grid-column: 1 / -1;
  height: 10px;
  min-width: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
/* The width is the count, handed down from the template as --fill, so
   a bar can no longer disagree with the number printed beside it. Two
   bars now, not four: the two steps the schema measures. The tap bar
   carries the brass because it is the outcome this panel is about, and
   it keeps a floor of 2% so a real but tiny rate still draws something
   rather than reading as nothing recorded. */
.funnel__bar--1 { width: var(--fill, 100%); }
.funnel__bar--2 { width: var(--fill, 0%); background: var(--color-gold); }

.funnel__rate {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.funnel__rate .u-figure {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gold-text);
}

/* ---- Which clip the panel is reporting on ---- */
.report__subject {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.report__subject-name {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.report__subject-time {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

/* ---- Moments ---- */
.moments__chart {
  position: relative;
  height: 92px;
  margin-bottom: var(--space-5);
}
.moments__axis {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--color-line);
}
.moments__peak {
  position: absolute;
  inset-block-end: 1px;
  width: 14px;
  translate: 50% 0;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--color-growth);
}
:root[dir="ltr"] .moments__peak { translate: -50% 0; }
.moments__peak--1 { inset-inline-start: 13%; height: 88px; }
.moments__peak--2 { inset-inline-start: 46%; height: 50px; }
.moments__peak--3 { inset-inline-start: 72%; height: 26px; }

.moments__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.moments__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.moments__item:last-child { border-bottom: 0; padding-bottom: 0; }
.moments__count {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.report__kpis {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.report__foot {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (min-width: 860px) {
  .report { padding: var(--space-10); }
  .report__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-12); }
  .report__kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------
   Specs
   --------------------------------------------------------- */
.vc-specs { background: var(--color-surface-sunken); }
.vc-specs__inner { max-width: 46rem; }
.vc-specs__note {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------
   The live strip

   Sits outside .report on purpose. That card is labelled «a
   drawn example», and a real figure inside it would inherit
   the disclaimer — so the platform's own numbers get their
   own head, their own chip, and the air between the two that
   says they are not the same claim.
   --------------------------------------------------------- */
.report__live {
  margin-top: var(--space-10);
}
.report__live .report__head {
  margin-bottom: var(--space-5);
}
.report__live .report__title {
  font-size: var(--fs-lg);
}

/* ---------------------------------------------------------
   A captured screen

   The second real screenshot in the project — the home page has the
   dashboard overview, this has the tag editor — so it is a page class,
   not a component yet. `.shot` is already taken in home.css for a drawn
   browser chrome, and one name meaning two things is worse than two
   names meaning one each.

   The capture is a light-theme screen and stays light in both themes: a
   screenshot is a photograph of a moment, and tinting it to follow the
   page would be retouching evidence. The frame carries the theme
   instead, so it seats correctly on either ground.
   --------------------------------------------------------- */
.vc-shot {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.vc-shot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.vc-shot__caption {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-align: center;
}