/* ==========================================================================
   victory-showcase.css — the one Interface showcase
   --------------------------------------------------------------------------
   Two cells on one grid, each keeping the ground its artwork was drawn for.
   High Sun stays on a light plate and Night Road on a dark one whatever the
   page environment is doing, because the pair is the comparison — if the
   plates followed the page theme there would be nothing to compare.

   Sizes are fixed by aspect-ratio on the frame rather than by the image, so
   the stage does not change height as the sequence advances and there is no
   jump between a 430x932 screen and a component of another shape.
   ========================================================================== */

.vic .vsc{
  display:grid;
  gap:var(--vs-4);
  margin-block-start:var(--vs-5);
  --vsc-day-ground:#FDFDFB;
  --vsc-day-ink:#20282D;
  --vsc-night-ground:#0B1B24;
  --vsc-night-ink:#DDF4FF;
}

/* --- the bar ------------------------------------------------------------- */
.vic .vsc__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--vs-2) var(--vs-4);
  padding-block-end:var(--vs-3);
  border-block-end:1px solid var(--v-edge-soft);
}
.vic .vsc__seg{display:flex;flex-wrap:wrap;gap:6px}
.vic .vsc__seg[hidden]{display:none}
.vic .vsc__b{
  border:0;background:none;cursor:pointer;padding:8px 13px;
  font:600 12px/1.3 var(--v-ui);letter-spacing:.02em;color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vsc__b:hover{color:var(--v-ink)}
.vic .vsc__b[aria-pressed="true"]{color:var(--v-paper);background:var(--v-ink);box-shadow:none}
.vic .vsc__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vic .vsc__pos{
  margin:0 0 0 auto;font:600 12px/1.4 var(--v-ui);letter-spacing:.09em;
  text-transform:uppercase;color:var(--v-ink-label);white-space:nowrap;
}

/* --- the pair ------------------------------------------------------------ */
.vic .vsc__stage{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--case-gap);align-items:start;
}
.vic .vsc__cell{margin:0;display:grid;gap:var(--vs-2);min-width:0}
.vic .vsc__env{
  order:-1;font:600 11px/1.4 var(--v-ui);letter-spacing:.14em;text-transform:uppercase;
}
.vic .vsc__cell--day .vsc__env{color:var(--v-ink-label)}
.vic .vsc__cell--night .vsc__env{color:var(--v-ink-label)}

/* The frame owns the ground AND the ink, and a fixed height holds the stage
   steady between steps.  The height is set per collection rather than by an
   aspect ratio on the frame: a 430x932 screen in a 640px column would make a
   frame 1,390 pixels tall and leave the artwork sitting at its intrinsic size
   in the middle of it.  A bounded plate with the artwork scaled to fill it
   shows the work at a useful size and keeps the module a readable height. */
.vic .vsc__frame{
  position:relative;
  block-size:var(--vsc-fh,clamp(380px,40vw,560px));
  /* the images stretch to the whole plate and object-fit letterboxes them inside it;
     centred grid items would leave block-size:100% indefinite and the artwork would
     size itself from its width instead, overflowing the plate it sits on */
  display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:stretch;
  padding:clamp(10px,1.4vw,20px);
  box-sizing:border-box;
  border:1px solid var(--v-edge-soft);
  overflow:hidden;
}
.vic .vsc__cell--day .vsc__frame{background:var(--vsc-day-ground);color:var(--vsc-day-ink)}
.vic .vsc__cell--night .vsc__frame{background:var(--vsc-night-ground);color:var(--vsc-night-ink)}

/* a screen is tall, a component is wide, a Waymark is a small upright plate */
.vic .vsc[data-vsc-coll="screens"] .vsc__frame{--vsc-fh:clamp(420px,44vw,600px)}
.vic .vsc[data-vsc-coll="components"] .vsc__frame{--vsc-fh:clamp(240px,25vw,380px)}
.vic .vsc[data-vsc-coll="waymarks"] .vsc__frame{--vsc-fh:clamp(240px,24vw,340px)}

.vic .vsc__img{
  grid-area:1 / 1;
  display:block;inline-size:100%;block-size:100%;
  object-fit:contain;
  opacity:0;transition:opacity .42s ease;
}
.vic .vsc__img.is-on{opacity:1}
.vic .vsc__frame[data-vsc-failed]::after{
  content:'artwork did not load';position:absolute;inset:auto 0 8px;
  text-align:center;font:600 11px/1.4 var(--v-ui);color:var(--v-ink-mute);
}

/* --- what is on screen --------------------------------------------------- */
.vic .vsc__name{
  margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(21px,2vw,28px);line-height:1.15;color:var(--v-ink);
}
.vic .vsc__meta{
  margin:0;font:400 var(--t-support)/1.5 var(--v-ui);color:var(--v-ink-mute);
}
.vic .vsc__note{
  margin:0;font-size:var(--t-support);line-height:1.55;
  color:var(--v-ink-mute);max-width:var(--m-body);
}

/* --- the browser --------------------------------------------------------- */
.vic .vsc__browse{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:8px;max-height:268px;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--vs-2);
  border:1px solid var(--v-edge-soft);
}
.vic .vsc__thumb{
  border:0;background:var(--v-paper);cursor:pointer;padding:4px;
  display:grid;gap:2px;justify-items:center;min-width:0;
}
.vic .vsc__thumb img{display:block;width:100%;height:44px;object-fit:contain}
.vic .vsc__thumb span{font:600 10px/1.3 var(--v-ui);color:#20282D}
.vic .vsc__thumb:hover{outline:1px solid var(--v-accent)}
.vic .vsc__thumb[aria-pressed="true"]{outline:2px solid var(--v-accent)}
.vic .vsc__thumb:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:760px){
  .vic .vsc__stage{grid-template-columns:minmax(0,1fr);gap:var(--vs-4)}
  /* stacked, two plates have to share the screen rather than each taking it */
  .vic .vsc[data-vsc-coll="screens"] .vsc__frame{--vsc-fh:min(64vh,430px)}
  .vic .vsc[data-vsc-coll="components"] .vsc__frame{--vsc-fh:min(34vh,240px)}
  .vic .vsc[data-vsc-coll="waymarks"] .vsc__frame{--vsc-fh:min(34vh,240px)}
  .vic .vsc__pos{margin-inline-start:0;width:100%}
  .vic .vsc__browse{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:212px}
  .vic .vsc__b{min-height:44px}
}

/* --- reduced motion: no crossfade, and the sequence does not run --------- */
@media (prefers-reduced-motion:reduce){
  .vic .vsc__img{transition:none}
}