/* ==========================================================================
   victory-library.css — the component library and the construction grid
   --------------------------------------------------------------------------
   Two promoted instruments share this sheet because they share a job: both
   take an artifact that was hidden in an expansion and make it the visible
   chapter, in the environment the visitor chose.

   The construction grid arrived from the old prototype in an unbranded grey
   Illustrator skin.  Restyling it means the whole instrument — the field, the
   drawing area, the layers list, the selection, the toolbar and the meaning
   captions — not the outer card with a grey panel still inside it.
   ========================================================================== */

/* ==========================================================================
   1 · The component library
   ========================================================================== */
.vic .vlib { display: block; }

.vic .vlib__bar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  margin: 0 0 16px;
}
.vic .vlib__tiers { display: inline-flex; border: 1px solid var(--v-edge); border-radius: 2px; overflow: hidden; }
.vic .vlib__tier {
  appearance: none; cursor: pointer; border: 0; border-right: 1px solid var(--v-edge);
  padding: 9px 14px; background: transparent; color: var(--v-ink-mute);
  font: 500 13px/1.2 var(--v-ui);
}
.vic .vlib__tier:last-child { border-right: 0; }
.vic .vlib__tier[aria-pressed="true"] { background: var(--v-ink); color: var(--v-canvas-1); font-weight: 600; }
.vic[data-vic-env="night"] .vlib__tier[aria-pressed="true"] { color: #07141C; }

.vic .vlib__fams { display: flex; flex-wrap: wrap; gap: 5px; }
.vic .vlib__fam {
  appearance: none; cursor: pointer; padding: 7px 11px;
  border: 1px solid var(--v-edge); border-radius: 2px; background: transparent;
  color: var(--v-ink-mute); font: 500 12.5px/1.2 var(--v-ui);
}
.vic .vlib__fam[aria-pressed="true"] {
  border-color: var(--v-accent); color: var(--v-ink); background: var(--v-panel-2); font-weight: 600;
}

.vic .vlib__stage {
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr) 330px;
  background: var(--v-edge); border: 1px solid var(--v-edge); border-radius: 3px;
  overflow: hidden;
  /* fixed for the viewport: cycling components must not resize the chapter */
  height: min(58vh, 520px);
}
.vic .vlib__work {
  background: var(--v-canvas-3); background-image: var(--v-ground);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; min-width: 0; min-height: 0;
}
.vic .vlib__art {
  /* sized from the package's own 480 x 196 board before any file arrives: a specimen is never
     laid out at zero height while it decodes, and a swap never changes the chapter's size */
  flex: 0 0 auto; width: min(100%, 640px); aspect-ratio: 480 / 196;
  max-height: 100%; display: block; position: relative;
}
.vic .vlib__art > svg, .vic .vlib__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The specimen's own stylesheet, restated here scoped to the box (its @font-face rules are
   dropped; the page's faces serve).  The site shell sets font-family:inherit on every element,
   so the specimen's face is declared with the weight to win. */
.vic .vlib__art svg text { font-family: 'Public Sans', Arial, sans-serif !important; }
.vic .vlib__art svg .narrative { font-family: 'Source Serif 4', Georgia, serif !important; }
.vic .vlib__art svg [data-tier-motif], .vic .vlib__art svg [data-motif] { transform-box: fill-box; transform-origin: center; }
.vic .vlib__cap {
  margin: 0; flex: none; font: 500 12px/1.3 var(--v-ui); letter-spacing: .04em;
  color: var(--v-ink-mute); text-align: center;
}

.vic .vlib__rail {
  background: var(--v-panel-1); color: var(--v-ink);
  padding: 18px 20px; min-width: 0; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 9px;
}
.vic .vlib__rkey {
  margin: 0; font: 600 11px/1 var(--v-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--v-ink-label);
}
.vic[data-vic-env="night"] .vlib__rkey { color: var(--v-signal); }
.vic .vlib__rname { margin: 0; font: 600 19px/1.25 var(--v-ui); color: var(--v-ink); }
.vic .vlib__rmean { margin: 0; font: 400 15px/1.5 var(--v-editorial); color: var(--v-ink); }
.vic .vlib__rows { margin: 0; display: grid; gap: 7px; }
.vic .vlib__rows dt {
  font: 600 10px/1 var(--v-ui); letter-spacing: .13em; text-transform: uppercase;
  color: var(--v-ink-mute); margin-bottom: 2px;
}
.vic .vlib__rows dd { margin: 0; font: 400 13px/1.45 var(--v-ui); color: var(--v-ink); }
.vic .vlib__states { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.vic .vlib__stlab {
  width: 100%; font: 600 10px/1 var(--v-ui); letter-spacing: .13em; text-transform: uppercase;
  color: var(--v-ink-mute); margin-bottom: 3px;
}
.vic .vlib__st {
  padding: 3px 7px; border: 1px solid var(--v-edge); border-radius: 2px;
  font: 500 11px/1.2 var(--v-ui); color: var(--v-ink-mute);
}
.vic .vlib__rnote {
  margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--v-edge);
  font: 400 12px/1.4 var(--v-ui); color: var(--v-ink-mute);
}
.vic .vlib__transport { margin-top: 14px; }
.vic .vlib__srlive, .vic .vic-cg .cg__srlive {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 900px) {
  .vic .vlib__stage { grid-template-columns: 1fr; height: auto; }
  .vic .vlib__work { padding: 18px; min-height: 220px; }
  .vic .vlib__rail { padding: 16px 18px; }
  .vic .vlib__rname { font-size: 18px; }
  .vic .vlib__rmean { font-size: 17px; }
}

/* ==========================================================================
   2 · The construction grid — one field, three diagonal systems
   --------------------------------------------------------------------------
   Built by victory-motif.js on the shared transport.  The field, the drawing
   area, the layer rows, the selection, the meaning captions and the controls
   all answer to the environment; nothing here is the prototype's grey skin.
   ========================================================================== */
.vic .vmo { display: block; }
.vic .vmo__stage {
  --vmo-h: min(62vh, 560px);
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr) 330px;
  background: var(--v-edge); border: 1px solid var(--v-edge); border-radius: 3px; overflow: hidden;
  height: var(--vmo-h);
}
.vic .vmo__work {
  background: var(--v-canvas-3); background-image: var(--v-ground);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 34%); align-items: center; gap: 24px;
  padding: 24px 28px; min-width: 0; min-height: 0;
}
.vic .vmo__board { position: relative; aspect-ratio: 1; width: 100%; max-width: calc(var(--vmo-h) - 48px); justify-self: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 44px -22px rgba(0,0,0,.45); }
.vic[data-vic-env="night"] .vmo__board { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -24px #000; }
.vic .vmo__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.vic .vmo__paper { fill: var(--v-paper); }
.vic .vmo__g line { stroke-width: .05; }
.vic .vmo__g--pixel line { stroke: #0E709F; opacity: .28; }
.vic .vmo__g--pos line { stroke: #0E709F; opacity: .36; stroke-width: .06; }
.vic .vmo__g--neg line { stroke: #E94F19; opacity: .32; stroke-width: .06; }
.vic .vmo__g { transition: opacity .35s ease; }
.vic .vmo__fill { fill: #F2542A; opacity: 0; }
.vic .vmo__fill--open { fill: none; stroke: #F2542A; stroke-width: 1.1; stroke-linejoin: miter; }
.vic .vmo__line { fill: none; stroke: #B43B12; stroke-width: .16; stroke-linejoin: miter; transition: opacity .3s ease; }
.vic .vmo__anchor { fill: #FDFDFB; stroke: #B43B12; stroke-width: .08; transition: opacity .15s ease; }

.vic .vmo__now { min-width: 0; display: grid; gap: 6px; align-content: center; }
.vic .vmo__seq { margin: 0; font: 600 10.5px/1 var(--v-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--v-ink-mute); }
.vic .vmo__name { margin: 0; font: 600 clamp(22px, 2.2vw, 30px)/1.1 var(--v-ui); color: var(--v-ink); }
.vic .vmo__meta { margin: 0; font: 500 12px/1.4 var(--v-ui); letter-spacing: .04em; color: var(--v-ink-label); }
.vic[data-vic-env="night"] .vmo__meta { color: var(--v-signal); }
.vic .vmo__mean { margin: 6px 0 0; font: 400 16px/1.5 var(--v-editorial); color: var(--v-ink); }

.vic .vmo__panel { background: var(--v-panel-3); color: var(--v-ink); padding: 12px 0 10px; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.vic .vmo__phead { margin: 0 0 8px; padding: 0 16px; font: 600 11px/1 var(--v-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--v-ink-mute); }
.vic .vmo__rows { display: grid; }
.vic .vmo__row {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 18px 26px 1fr 12px; gap: 10px; align-items: center;
  padding: 7px 16px; border: 0; border-inline-start: 2px solid transparent; background: transparent;
  font: 400 13px/1.3 var(--v-ui); color: var(--v-ink);
}
.vic .vmo__row:hover { background: var(--v-panel-2); }
.vic .vmo__row.is-sel { background: var(--v-panel-2); border-inline-start-color: var(--v-accent); font-weight: 600; }
.vic .vmo__row:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }
.vic .vmo__eye { width: 18px; height: 12px; border-radius: 9px / 6px; border: 1.4px solid currentColor; opacity: .25; }
.vic .vmo__eye.is-on { opacity: .8; }
.vic .vmo__thumb { width: 26px; height: 26px; display: block; border-radius: 2px; overflow: hidden; border: 1px solid var(--v-edge); }
.vic .vmo__thumb svg { width: 100%; height: 100%; display: block; }
.vic .vmo__tpaper { fill: var(--v-paper); }
.vic .vmo__tl line { stroke: #0E709F; stroke-width: 1; opacity: .5; }
.vic .vmo__tp line { stroke: #0E709F; stroke-width: 1.2; }
.vic .vmo__tn line { stroke: #E94F19; stroke-width: 1.2; }
.vic .vmo__tfill { fill: #F2542A; }
.vic .vmo__rname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vic .vmo__chip { width: 10px; height: 10px; border-radius: 2px; background: var(--v-ink-mute); }
.vic .vmo__chip--pixel { background: #0E709F; } .vic .vmo__chip--positive { background: #0E709F; }
.vic .vmo__chip--negative { background: #E94F19; } .vic .vmo__chip--dual { background: #7A4FC2; } .vic .vmo__chip--draw { background: #F2542A; }
.vic .vmo__desc { margin: 10px 16px 0; padding-top: 10px; border-top: 1px solid var(--v-edge); font: 400 13px/1.5 var(--v-ui); color: var(--v-ink); }
.vic .vmo__foot { margin: auto 16px 0; padding-top: 10px; font: 500 11px/1 var(--v-ui); letter-spacing: .06em; color: var(--v-ink-mute); }
.vic .vmo__transport { margin-top: 14px; }
.vic .vmo__srlive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) {
  .vic .vmo__stage { grid-template-columns: 1fr; height: auto; }
  .vic .vmo__work { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .vic .vmo__board { height: auto; width: min(100%, 62vw); }
  .vic .vmo__now { text-align: left; }
  .vic .vmo__panel { max-height: 232px; }
}