/* ==========================================================================
   retail.css — the Sportmaster × X5 case: one SKU becoming a finished card.

   The picture is a production line read left to right: photographs and the
   brand rules go into the database, a prompt is built from it, the AI director
   hands each frame to a model, control passes it, the card fills slot by slot
   and goes to the storefront.

   Division of labour, the same one every other figure here uses:

     this file            the frame and the look
     retail-timeline.css  where everything stands and when it happens, both
                          generated from the one schedule in tools/retail.py

   Everything takes the page's own colour (--c, mauve on this case) except the
   four models, which take four neighbouring steps of the ramp (--mc) — and a
   frame carries its model's colour into the card, so the finished card is
   visibly the work of several models.

   Under 1000px it stops being a picture: the line goes and the twelve
   stations become a list in reading order, each with the one line the drawing
   had no room for. That state and prefers-reduced-motion share one block at
   the foot of this file — both want the finished card, still.
   ========================================================================== */

.rb {
  --rb-cycle: 22s;           /* retail-timeline.css sets the real ones */
  --rb-ratio: 1440 / 420;
  margin: var(--s-5) 0 var(--s-6);
}
.rb, .rb figure { margin-inline: 0; }

/* --- the caption ---------------------------------------------------------- */
.rb__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.rb__h {
  font-weight: 640; font-size: var(--fs-md); letter-spacing: -.015em;
  color: var(--ink);
}
.rb__note {
  flex: 1 1 22ch; min-width: 0;
  font-size: var(--fs-3xs); line-height: 1.45; color: var(--ink-3);
}

/* --- the stage ------------------------------------------------------------ */
.rb__body { position: relative; aspect-ratio: var(--rb-ratio); }
.rb__art {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none; overflow: visible;
  color: var(--c, var(--c-mauve));
}

/* --- the names, over their bands ------------------------------------------ */
.rb__names { position: absolute; inset: 0; z-index: 2; }
.rb-name {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  display: grid; align-content: center; justify-items: center;
  padding: 0 4px;
  opacity: .3;
}
.rb-name__n {
  font-weight: 640; font-size: var(--fs-2xs); letter-spacing: -.01em;
  line-height: 1.2; color: var(--ink); text-align: center;
}
.rb-name__s { display: none; }
/* The three inputs are lit from the start: the pass begins in them. */
.rb-name--photos, .rb-name--admin, .rb-name--prompt { opacity: 1; }
/* A model's name is one line of mono, left of centre, next to its LED. */
.rb-name--model { justify-items: start; padding: 0; }
.rb-name--model .rb-name__n {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-3xs);
  letter-spacing: 0; text-align: left; color: var(--ink); white-space: nowrap;
}

/* --- the wires ------------------------------------------------------------ */
.rb-wire {
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; opacity: .22;
  vector-effect: non-scaling-stroke;
}

/* --- a box ---------------------------------------------------------------- */
.rb-box { opacity: .28; }
.rb-box__r {
  fill: color-mix(in oklab, currentColor 7%, var(--surface));
  stroke: color-mix(in oklab, currentColor 30%, var(--line));
  stroke-width: 1.2;
}
.rb-box--photos, .rb-box--admin, .rb-box--prompt { opacity: 1; }
.rb-fig { opacity: .1; }
.rb-fig--photos, .rb-fig--admin, .rb-fig--prompt { opacity: 1; }
.rb-glyph path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* the models take their own colour, one step of the ramp each */
/* A model's colour, as a class. The four models take four neighbouring steps
   of the ramp; --mc is what the rest of this file reads. It cannot be set in
   a style attribute — the site's CSP is style-src 'self', which blocks one —
   so the four values live here and tools/retail.py picks the class. */
.rb-mc--0 { --mc: var(--c-violet); }
.rb-mc--1 { --mc: var(--c-purple); }
.rb-mc--2 { --mc: var(--c-mauve); }
.rb-mc--3 { --mc: var(--c-pink); }

.rb-model { color: var(--mc, currentColor); opacity: .3; }
.rb-model__led {
  fill: currentColor; opacity: .15;
  filter: drop-shadow(0 0 4px currentColor);
}

/* --- a photograph, wherever it is ----------------------------------------- */
/* The same tile in the source row, on the wire, in the frame and in the card:
   a box the colour of the page, a horizon, a hill and a sun. */
.rb-tile__box {
  fill: color-mix(in oklab, currentColor 22%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-ink {
  fill: color-mix(in oklab, currentColor 55%, var(--bg));
  stroke: currentColor; stroke-width: 1; stroke-linejoin: round;
}
.rb-sun { fill: currentColor; }

/* --- the admin panel ------------------------------------------------------ */
/* A window with a menu down the left and the brand's settings on the right:
   a switch, a colour, a choice. */
.rb-adm__win {
  fill: color-mix(in oklab, currentColor 8%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-adm__nav { fill: color-mix(in oklab, currentColor 18%, var(--bg)); }
.rb-adm__item {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  opacity: .4;
}
.rb-adm__item--on { opacity: 1; }
.rb-adm__label {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  opacity: .55;
}
.rb-adm__switch { fill: currentColor; }
.rb-adm__knob { fill: var(--bg); }
.rb-adm__swatch {
  fill: color-mix(in oklab, currentColor 70%, var(--bg));
  stroke: currentColor; stroke-width: 1;
}
.rb-adm__field {
  fill: color-mix(in oklab, currentColor 12%, var(--bg));
  stroke: currentColor; stroke-width: 1;
}
.rb-adm__chev {
  fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- the prompt ----------------------------------------------------------- */
.rb-prompt__line {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  opacity: 0;
}
.rb-prompt__caret { fill: currentColor; opacity: 0; }

/* --- the director's clapperboard ------------------------------------------ */
.rb-clap__board {
  fill: color-mix(in oklab, currentColor 18%, var(--bg));
  stroke: currentColor; stroke-width: 1.2;
}
.rb-clap__stick {
  fill: color-mix(in oklab, currentColor 40%, var(--bg));
  stroke: currentColor; stroke-width: 1.2;
}
.rb-clap__stripes {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}

/* --- control -------------------------------------------------------------- */
.rb-gate__glow {
  fill: currentColor; opacity: 0;
  filter: blur(14px);
}

/* --- the card, and the storefront ----------------------------------------- */
.rb-slot {
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-dasharray: 3 3; opacity: 1;
}
.rb-shop__win {
  fill: color-mix(in oklab, currentColor 5%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-shop__bar { fill: none; stroke: currentColor; stroke-width: 1; opacity: .6; }
.rb-shop__dot { fill: currentColor; opacity: .7; }
.rb-shop__place {
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-dasharray: 3 3;
}
/* The card as the storefront shows it — also what rides there. */
.rb-mini__box {
  fill: color-mix(in oklab, currentColor 14%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-mini__slot {
  fill: color-mix(in oklab, var(--mc, currentColor) 60%, var(--bg));
  stroke: var(--mc, currentColor); stroke-width: 1;
}
/* the still copy, for when nothing may move */
.rb-ghost { display: none; }

/* --- what travels --------------------------------------------------------- */
.rb-go { opacity: 0; }
.rb-doc__box {
  fill: color-mix(in oklab, currentColor 20%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-doc__line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.rb-pill__box {
  fill: color-mix(in oklab, currentColor 30%, var(--bg));
  stroke: currentColor; stroke-width: 1.1;
}
.rb-pill__text { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rb-photo, .rb-doc, .rb-bundle, .rb-job, .rb-ship {
  filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 55%, transparent));
}
/* a frame is in its model's colour from the moment it is rendered */
.rb-frame {
  color: var(--mc, currentColor);
  filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 55%, transparent));
}
/* the verdict: a tick in teal, a cross in coral, in the frame's corner */
.rb-badge { opacity: 0; }
.rb-badge circle { stroke: var(--bg); stroke-width: 1; }
.rb-badge path {
  fill: none; stroke: var(--bg); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.rb-badge--ok circle { fill: var(--c-teal); }
.rb-badge--no circle { fill: var(--c-coral); }

/* --- one clock ------------------------------------------------------------ */
.rb-box, .rb-fig, .rb-name, .rb-model__led, .rb-prompt__line, .rb-prompt__caret,
.rb-gate__glow, .rb-slot, .rb-shop__place, .rb-badge, .rb-go {
  animation-duration: var(--rb-cycle);
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.rb-go, .rb-model__led, .rb-gate__glow, .rb-prompt__caret {
  animation-timing-function: linear;
}

/* --------------------------------------------------------------------------
   Below 1000px the picture is a list.

   Twelve stations in a row need twelve columns; there is room for two, and a
   line drawn over a stack says nothing. So the drawing goes and the stations
   become what they always were — twelve named things in the order the work
   passes through them, each with the one line the drawing had no room for.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .rb__body { aspect-ratio: auto; }
  .rb__art { display: none; }
  .rb__names {
    position: static;
    display: grid; gap: var(--s-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-name, .rb-name--model {
    position: relative; left: auto; top: auto;
    width: auto; height: auto; min-height: 0;
    align-content: center; justify-items: start;
    padding: var(--s-3);
    border: 1px solid var(--line); border-radius: 8px;
    background: color-mix(in oklab, var(--c, var(--c-mauve)) 5%, var(--surface));
  }
  .rb-name__n, .rb-name--model .rb-name__n {
    font-family: inherit; font-weight: 640; font-size: var(--fs-2xs);
    text-align: left;
  }
  .rb-name__s {
    display: block; margin-top: 2px;
    font-family: var(--font-mono); font-size: var(--fs-3xs);
    line-height: 1.3; color: var(--ink-2); text-align: left;
  }
}

@media (max-width: 620px) {
  .rb__names { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   The line, finished and still — for the two contexts that want a picture
   that has stopped. Not the moment before the first photograph: an empty
   card is the one frame of this story that says nothing.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px), (prefers-reduced-motion: reduce) {
  .rb-go { display: none; }
  .rb-box, .rb-fig, .rb-name, .rb-model__led, .rb-prompt__line, .rb-prompt__caret,
  .rb-gate__glow, .rb-slot, .rb-shop__place, .rb-badge {
    animation: none;
  }
  .rb-box, .rb-fig, .rb-name, .rb-prompt__line { opacity: 1; }
  .rb-model { opacity: .8; }
  .rb-model__led { opacity: .6; }
  .rb-slot {
    fill: color-mix(in oklab, currentColor 55%, var(--bg));
    stroke-dasharray: none;
  }
  .rb-shop__place { display: none; }
  .rb-ghost { display: block; }
}