/* ==========================================================================
   victory-studio.css — the Studio instrument, in both Victory environments
   --------------------------------------------------------------------------
   Every colour here is a semantic environment token from victory-environment.css,
   so High Sun and Night Road change the whole instrument together: workspace,
   artboard surround, grid, layers palette, reasoning rail, transport and value
   controls, not only the outer card.

   The approved artwork is not themed.  The photograph, the designer's palette
   and the typographic colour on the artboard are the designer's decisions and
   stay exactly as they were approved in both environments; what changes around
   them is the workspace they are being built in.
   ========================================================================== */

.vic .vst { display: block; }

/* ---------------------------------------------------------- post selector */
.vic .vst__pickrow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  margin: 0 0 18px;
}
.vic .vst__pick { display: contents; }
.vic .vst__pickb {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 14px 9px 11px;
  background: var(--v-panel-2); color: var(--v-ink);
  border: 1px solid var(--v-edge); border-radius: 2px;
  font: 500 13.5px/1.2 var(--v-ui);
  letter-spacing: .01em; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vic .vst__pickb:hover { border-color: var(--v-accent); }
.vic .vst__pickn {
  font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: .1em;
  color: var(--v-ink);
}
.vic .vst__pickb[aria-selected="true"] {
  background: var(--v-accent); border-color: var(--v-accent); color: #fff;
}
.vic .vst__pickb[aria-selected="true"] .vst__pickn { color: rgba(255,255,255,.9); }
/* Night Road's accent is a light orange, so white-on-accent falls to 2.59:1 on
   the one chip that is selected. The selected chip takes the night ground's own
   deep ink instead — 7.4:1 — and stays the only filled chip in the row. */
.vic[data-vic-env="night"] .vst__pickb[aria-selected="true"] { color: #0A202B; }
.vic[data-vic-env="night"] .vst__pickb[aria-selected="true"] .vst__pickn { color: rgba(10,32,43,.74); }
.vic .vst__tour {
  padding: 9px 13px;
  background: transparent; color: var(--v-ink-mute);
  border: 1px dashed var(--v-edge); border-radius: 2px;
  font: 500 12.5px/1.2 var(--v-ui);
  cursor: pointer;
}
.vic .vst__tour[aria-pressed="false"] { color: var(--v-ink); border-style: solid; }

/* ------------------------------------------------------------ the stage */
/* One outer frame per viewport.  Its height comes from the artboard's own 4:5
   ratio and does not change when a stage, post or theme changes. */
.vic .vst__stage {
  display: grid; gap: 1px;
  grid-template-columns: minmax(0, 1fr) 316px;
  grid-template-areas: "work rail" "work layers";
  /* The rail takes what is left after the layers palette, and scrolls inside it.  With the rail
     on an auto row a long stage caption pushed its own heading out under the frame's overflow
     clip, so the visitor lost the stage name at exactly the stages that needed the most words. */
  grid-template-rows: minmax(0, 1fr) min(34%, 250px);
  /* The frame is fixed for the viewport.  Without an explicit height the 1fr row is sized by
     whichever stage has the most rail copy, so the whole instrument grew and shrank as the
     stages advanced and as the visitor changed post.  The height is chosen from the artboard's
     4:5 ratio and the sticky header and transport that sit around it. */
  height: min(78vh, 720px);
  background: var(--v-edge);
  border: 1px solid var(--v-edge); border-radius: 3px; overflow: hidden;
}
.vic .vst__work {
  grid-area: work; position: relative;
  background: var(--v-canvas-3);
  background-image: var(--v-ground);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px 24px 26px;
  min-height: 0;
}
/* the label has its own row, and the finished post sits beside it at a glance */
.vic .vst__whead {
  align-self: stretch; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 40px; flex: 0 0 auto;
}
.vic[data-vic-env="night"] .vst__work { background-image: var(--v-ground); }

.vic .vst__auth {
  margin: 0;
  font: 500 11px/1.2 var(--v-ui);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--v-ink-mute);
}
.vic .vst__preview {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 3px 9px 3px 3px; border: 1px solid var(--v-edge); border-radius: 3px;
  background: var(--v-panel-1); color: var(--v-ink-mute); cursor: pointer;
  font: 500 10.5px/1 var(--v-ui); letter-spacing: .12em; text-transform: uppercase;
}
.vic .vst__preview:hover, .vic .vst__preview:focus-visible { border-color: var(--v-accent); color: var(--v-ink); }
.vic .vst__preview svg { position: static; inset: auto; width: 30px; height: 37.5px; display: block; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.vic .vst__preview svg text { display: none; }

/* THE ARTBOARD TAKES THE RATIO OF THE FORMAT IT IS SHOWING.
   Both compositions are authored, so the frame is not a 4:5 box with a square
   drawn inside it — it is the board, and it changes shape with the format. */
.vic .vst__board {
  position: relative; aspect-ratio: 4 / 5;
  flex: 1 1 auto; min-height: 0; height: auto;
  max-width: 100%; max-height: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 44px -22px rgba(0,0,0,.45);
}
.vic [data-vst-fmt="1x1"] .vst__board { aspect-ratio: 1 / 1; }
.vic[data-vic-env="night"] .vst__board { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -24px #000; }

/* the format control, beside the post picker */
.vic .vst__fmt { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.vic .vst__fmtb {
  appearance: none; cursor: pointer; padding: 6px 12px;
  font: 600 11px/1 var(--vc-sans, inherit); letter-spacing: .1em;
  color: var(--v-ink-mute); background: none;
  border: 1px solid var(--v-edge-soft); border-radius: 2px;
}
.vic .vst__fmtb:hover { color: var(--v-ink); }
.vic .vst__fmtb[aria-pressed="true"] { background: var(--v-ink); color: var(--v-canvas-1); border-color: var(--v-ink); }
.vic[data-vic-env="night"] .vst__fmtb[aria-pressed="true"] { color: #07141C; }
.vic .vst__fmtb:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.vic .vst-board__svg, .vic .vst__over {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.vic .vst-board__paper { fill: var(--v-paper); }
.vic .vst__over { pointer-events: none; overflow: visible; transition: opacity .3s ease; }

/* The construction field.  Everything in .vst-grid is clipped to the artboard by a clipPath
   inside the overlay; the handles group is not, because handles legitimately sit outside. */
.vic .vst-grid { transition: opacity .4s ease; }
/* the horizontals and verticals read on paper, on a field and on a photograph alike: a light
   line in difference blend darkens on the paper and lightens on the dark, every fourth one heavier */
/* THREE FAMILIES, THREE WEIGHTS, IN ORDER OF WHAT THEY ARE.

   The primary grid is the thing being counted: 16 cells across and 20 down,
   with every fourth line heavier so the count is readable without tracing it.
   The two 1:1 diagonal families are the lattice the motifs are ruled on — 35
   lines each way, the complete lattice rather than a sample — and at seventy
   lines they were set close enough to the grid's own weight and colour that the
   two read as competing grids and the 16 x 20 structure disappeared into a
   cross-hatch.

   They are still the same structure and still drawn in full, but they are now
   clearly subordinate: lighter, cooler and roughly a third of the grid's
   presence. Nothing was removed to achieve it. Orange stays reserved for the
   motif — its selection, its meaning and its construction — so the guide lines
   of the motif itself remain the only warm marks on the board and cannot be
   confused with either family. */
.vic .vst-grid__l { stroke: #34505C; stroke-width: 1.2; opacity: .46; }
.vic .vst-grid__l--4 { stroke: #2B4450; stroke-width: 2.4; opacity: .8; }
.vic .vst-grid__d { stroke: #6E93A6; stroke-width: .9; opacity: .17; }
.vic .vst-grid__d--neg { stroke: #6E93A6; opacity: .17; }
/* the four rows the social board adds above the square motif field */
/* fill-opacity, not opacity: the build animates element opacity from 0 to 1, so the
   tint has to live in the paint rather than in the property the clock is driving */
.vic .vst-grid__added { fill: #F4512A; fill-opacity: .085; }
.vic .vst-grid__addedlab { fill: #B33B12; fill-opacity: .9; font-size: 22px; font-weight: 600; letter-spacing: .05em; }
/* the lines the motif's edges lie on, and the lattice point each passes through */
.vic .vst-grid__c { stroke: var(--v-motif, #F4512A); stroke-width: 3; opacity: .9; }
.vic .vst-grid__c--ruled { stroke-dasharray: 14 10 !important; }
.vic .vst-grid__a { fill: #FDFDFB; stroke: var(--v-motif, #F4512A); stroke-width: 4; }
.vic .vst-grid__at { fill: var(--v-motif, #F4512A); font-size: 26px; font-weight: 600; letter-spacing: .04em; }
.vic .vst-grid__lab { fill: #5F7078; font-size: 24px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: 0; }
/* a polygon's edges, drawn along the guides before the field fills */
.vic .vst-edge { fill: none; stroke: #B43B12; stroke-width: 4; stroke-linejoin: miter; }

.vic .vst-handles__box { fill: none; stroke: var(--v-accent); stroke-width: 3; }
.vic .vst-handles__h { fill: var(--v-paper); stroke: var(--v-accent); stroke-width: 3; }
.vic .vst-handles__t { fill: var(--v-accent); font-size: 26px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------- the rail */
.vic .vst__rail {
  grid-area: rail; background: var(--v-panel-1); color: var(--v-ink);
  padding: 18px 20px 20px; min-width: 0; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.vic .vst__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"] .vst__rkey { color: var(--v-signal); }
.vic .vst__rn { color: var(--v-accent); margin-inline-end: 2px; }
.vic .vst__rlead {
  margin: 0; font: 400 17px/1.5 var(--v-editorial);
  color: var(--v-ink);
}
.vic .vst__rlead--s { font-size: 15px; }
.vic .vst__steps { margin: 4px 0 0; padding-inline-start: 1.4em; display: grid; gap: 3px; font: 400 13px/1.4 var(--v-ui); color: var(--v-ink-mute); }
.vic .vst__steps li::marker { color: var(--v-accent); font-weight: 600; }
/* the draft edited in place */
.vic .vst__edit { margin: 0; font: 400 16.5px/1.55 var(--v-editorial); color: var(--v-ink); }
.vic .ve__k { }
.vic .ve__d { color: var(--v-ink-mute); }
.vic .ve__d.is-sel { background: rgba(255,105,46,.22); box-shadow: 0 0 0 2px rgba(255,105,46,.22); border-radius: 2px; }
.vic .ve__d.is-out { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--v-accent); opacity: .55; }
.vic .ve__in { color: var(--v-ink); font-weight: 500; }
.vic .ve__in.is-new { background: rgba(6,89,134,.14); border-radius: 2px; }
.vic[data-vic-env="night"] .ve__in.is-new { background: rgba(124,212,253,.16); }
/* the tone chips: the colours on the board, named */
.vic .vst__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vic .vst__chipc { position: relative; width: 44px; height: 30px; border-radius: 2px; border: 1px solid var(--v-edge); transition: transform .25s ease, box-shadow .25s ease; }
.vic .vst__chipc i { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; font: 500 9.5px/1 var(--v-ui); letter-spacing: .04em; color: var(--v-ink-mute); font-style: normal; white-space: nowrap; }
.vic .vst__chips { padding-bottom: 14px; }
.vic .vst__chipc.is-lit { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--v-focus); }
.vic .vst__tone.is-lit { background: var(--v-accent); color: #fff; }
.vic .vst__rmeta {
  margin: 0; font: 500 12px/1.4 var(--v-ui);
  letter-spacing: .04em; color: var(--v-ink-label);
}
.vic[data-vic-env="night"] .vst__rmeta { color: var(--v-signal); }
.vic .vst__rnote {
  margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--v-edge);
  font: 400 12.5px/1.45 var(--v-ui);
  color: var(--v-ink-mute);
}
.vic .vst__rline {
  margin: 0; font: 400 italic 15px/1.45 var(--v-editorial);
  color: var(--v-ink-mute);
}

/* the playbook entries: the catalogue's own paths, at reading size */
.vic .vst__pb { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vic .vst__pbi {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;
  padding: 4px 8px; border: 1px solid transparent; border-radius: 2px;
  color: var(--v-ink-mute);
}
.vic .vst__pbi { transition: background .2s ease, border-color .2s ease; }
.vic .vst__pbi.is-sel { align-items: start; padding: 7px 8px; }
.vic .vst__pbi.is-sel {
  border-color: var(--v-accent); background: var(--v-panel-2); color: var(--v-ink);
}
.vic .vst__pbi.is-chosen.is-sel { border-width: 2px; }
.vic .vst__pbt [hidden] { display: none; }
.vic .vst__pbsvg { width: 22px; height: 22px; color: var(--v-ink-mute); }
.vic .vst__pbi.is-sel .vst__pbsvg { color: var(--v-motif, #F4512A); }
.vic .vst__pbt { display: block; font: 400 12px/1.4 var(--v-ui); }
.vic .vst__pbt b { display: block; font-weight: 600; color: var(--v-ink); }

/* the voice swap: the draft and the designer's line, one visible at a time */
.vic .vst__swap { position: relative; display: grid; }
.vic .vst__swap > p { grid-area: 1 / 1; margin: 0; transition: opacity .3s ease; }
.vic .vst__swap[data-vst-swap="raw"] .vst__fin,
.vic .vst__swap[data-vst-swap="final"] .vst__raw { opacity: 0; pointer-events: none; }
.vic .vst__rlab {
  display: block; font: 600 10.5px/1 var(--v-ui);
  letter-spacing: .13em; text-transform: uppercase; color: var(--v-ink-mute); margin-bottom: 5px;
}
.vic .vst__raw span:last-child, .vic .vst__fin span:last-child {
  font: 400 15px/1.5 var(--v-editorial);
}
.vic .vst__fin span:last-child { color: var(--v-ink); }
.vic .vst__raw span:last-child { color: var(--v-ink-mute); }

.vic .vst__tones { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vic .vst__tone {
  padding: 4px 9px; border: 1px solid var(--v-accent); color: var(--v-accent);
  border-radius: 2px; transition: background .25s ease, color .25s ease;
  font: 600 11px/1.2 var(--v-ui); letter-spacing: .1em;
}

.vic .vst__ramp { display: flex; gap: 5px; }
.vic .vst__stop {
  width: 100%; height: 34px; border: 1px solid var(--v-edge); border-radius: 2px;
  cursor: pointer; padding: 0;
}
.vic .vst__stop[aria-pressed="true"] { outline: 2px solid var(--v-focus); outline-offset: 2px; }
.vic .vst__vlab {
  margin: 0; min-height: 1.3em;
  font: 500 12px/1.3 var(--v-ui); color: var(--v-ink-mute);
}

/* ----------------------------------------------------------- the layers */
.vic .vst__layers {
  grid-area: layers; background: var(--v-panel-3); color: var(--v-ink);
  padding: 12px 0 10px; min-width: 0; min-height: 0; overflow: auto;
}
.vic .vst__layhead {
  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 .vst__laylist { list-style: none; margin: 0; padding: 0; }
.vic .vst__lay {
  display: grid; grid-template-columns: 18px 16px 1fr; gap: 9px; align-items: center;
  padding: 6px 16px; border-inline-start: 2px solid transparent;
  font: 400 12.5px/1.3 var(--v-ui);
  color: var(--v-ink); opacity: .72;
}
.vic .vst__lay.is-on { opacity: 1; color: var(--v-ink); }
.vic .vst__lay.is-sel { background: var(--v-panel-2); border-inline-start-color: var(--v-accent); }
.vic .vst__eye {
  width: 18px; height: 12px; border-radius: 9px / 6px;
  border: 1.4px solid currentColor; opacity: 0;
}
.vic .vst__lay.is-on .vst__eye { opacity: .7; }
.vic .vst__chip { width: 14px; height: 14px; border-radius: 2px; background: var(--v-ink-mute); }
.vic .vst__chip--motif { background: var(--v-accent); }
.vic .vst__chip--photo { background: var(--v-blue-1); }
.vic .vst__chip--text { background: var(--v-ink); }
.vic .vst__chip--lines { background: transparent; box-shadow: inset 0 0 0 1.4px var(--v-ink-mute); }
.vic .vst__layname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vic .vst__transport { margin-top: 14px; }
.vic .vst__srlive {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Phone — recomposed, not shrunk.  The workspace keeps the artboard at a real
   viewing size and the rail and layers become their own readable blocks below
   it, because a 300px rail beside a 4:5 board at 360 leaves neither readable.
   ========================================================================== */
@media (max-width: 900px) {
  .vic .vst__stage { grid-template-columns: 1fr; grid-template-areas: "work" "rail" "layers"; grid-template-rows: auto auto auto; }
  /* The frame is sized by the artboard's own width here, not by a viewport height: a portrait
     phone has the width to show the board at a real reading size and the length to put the rail
     and the palette under it.  max-height must be released with the fixed frame, or the board
     keeps being clipped out of its 4:5 ratio by a height it no longer has. */
  .vic .vst__stage { height: auto; }
  /* The board is sized so that it and the current stage's reasoning fit together under the two
     sticky rows: a phone visitor has to be able to see what changed and read why at the same
     time.  The layers palette sits below both and scrolls in its own box. */
  .vic .vst__board { height: auto; max-height: none; width: min(100%, 70vw); flex: 0 0 auto; }
  .vic .vst__work { padding: 12px 16px 18px; gap: 8px; }
  .vic .vst__whead { min-height: 34px; }
  .vic .vst__rail { padding: 15px 16px; gap: 8px; }
  .vic .vst__rnote { padding-top: 8px; font-size: 11.5px; line-height: 1.4; }
  .vic .vst__layers { height: 132px; }
  .vic .vst__pickrow { gap: 6px; }
  .vic .vst__pickb { padding: 8px 11px; font-size: 12.5px; }
  .vic .vst__pickb { align-items: center; }
  .vic .vst__pickt { max-width: 17ch; }
  .vic .vst__tour { margin-inline-start: 0; width: 100%; text-align: center; }
  .vic .vst__rlead, .vic .vst__raw span:last-child, .vic .vst__fin span:last-child { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .vic .vst__over, .vic .vst__swap > p { transition: none; }
}

/* Meaning: the chosen mark held on the board at decision size, named beneath it.
   It is drawn in the artboard's own ink rather than the workspace's, because what the
   visitor is looking at is a mark on paper, not a control in the interface. */
.vic .vst-choice { color: #5F7078; }
.vic .vst-choice.is-chosen { color: var(--v-motif, #F4512A); }
.vic .vst-choice__t {
  fill: #20282D; font-family: 'Public Sans', Arial, sans-serif; font-size: 34px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.vic .vst-choice__m { fill: #5F7078; font-family: 'Public Sans', Arial, sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.vic .vst-choice.is-chosen .vst-choice__m { fill: var(--v-motif, #F4512A); }

/* ============================================================================
   THE RESULT FIRST (19 September 2026)
   ----------------------------------------------------------------------------
   At rest the Studio shows the finished post at reading size, a caption and
   one way to the next post. The picker, the format switch, the finished-post
   thumbnail, the rail, the layers palette and the transport are the
   instrument, and they arrive through "Explore construction".
   ========================================================================== */
.vic .vst:not(.vst--open) .vst__pickrow,
.vic .vst:not(.vst--open) .vst__rail,
.vic .vst:not(.vst--open) .vst__layers,
.vic .vst:not(.vst--open) .vst__preview { display: none; }
.vic .vst:not(.vst--open) .vst__stage {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "work"; grid-template-rows: minmax(0, 1fr);
  background: transparent; border-color: transparent;
}
.vic .vst:not(.vst--open) .vst__work { background: transparent; background-image: none; padding: 0 0 8px; }
.vic .vst:not(.vst--open) .vst__whead { display: none; }
.vic .vst:not(.vst--open) .vst__board { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 24px 60px -28px rgba(0,0,0,.5); }
/* the foot */
.vic .vst__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px 0 0; }
.vic .vst__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vic .vst--open .vst__foot, .vic .vst--open .vst__acts { display: block; }
.vic .vst--open .vst__cap, .vic .vst--open .vst__next { display: none; }
.vic .vst__cap { margin: 0; display: grid; gap: 3px; font-family: var(--v-ui); }
.vic .vst__capn { font: 600 10.5px/1.2 var(--v-ui); letter-spacing: .16em; color: var(--v-accent); font-variant-numeric: tabular-nums; }
.vic .vst__capt { font: 500 15px/1.3 var(--v-ui); color: var(--v-ink); }
.vic .vst__capk { font: 400 12px/1.4 var(--v-ui); color: var(--v-ink-mute); }
.vic .vst__next {
  appearance: none; cursor: pointer; min-height: 40px; padding: 8px 12px;
  font: 500 12px/1 var(--v-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-ink); background: transparent; border: 1px solid var(--v-edge); border-radius: 999px;
}
.vic .vst__next:hover { border-color: var(--v-accent); color: var(--v-accent); }
.vic .vst__next:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 3px; }
.vic .vst__acts .vp { padding-top: 0; }
@media (max-width: 900px) {
  .vic .vst:not(.vst--open) .vst__board { width: 100%; }
  .vic .vst__foot { padding-top: 12px; }
}