/* Victory shared writer.
   One component, both routes. The environment is CSS only: every colour resolves through
   the Victory tokens, so High Sun and Night Road change nothing about playback, the
   selected example, the reading position or the stage.
   There is no progress rail here, and no space reserved for one. */

.vw-root{
  /* day */
  --vw-ink:var(--v-ink,#20282D);
  --vw-muted:var(--v-ink-mute,#5F7078);
  --vw-onink:var(--v-canvas-1,#FFF8EC);   /* the colour that reads on an ink fill */
  --vw-panel:var(--v-panel-1,#FFFDF8);
  --vw-line:var(--v-edge,#B7C4C5);
  --vw-hair:var(--v-edge-hair,rgba(32,40,45,.08));
  --vw-blue:var(--v-focus,#065986);
  --vw-accent:var(--v-motif,#F4512A);
  --vw-tint-del:rgba(32,40,45,.055);
  --vw-tint-ins:rgba(6,89,134,.13);
  --vw-tint-set:rgba(6,89,134,.07);
  --vw-ui:var(--v-ui,'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif);
  --vw-editorial:var(--v-editorial,'Source Serif 4',Georgia,'Times New Roman',serif);
  color:var(--vw-ink);
  font:400 15px/1.5 var(--vw-ui);
  isolation:isolate;
  width:100%;
  min-width:0;
}
[data-vic-env="night"] .vw-root{
  --vw-onink:var(--v-canvas-2,#07141C);
  --vw-tint-del:rgba(221,244,255,.07);
  --vw-tint-ins:rgba(124,212,253,.17);
  --vw-tint-set:rgba(124,212,253,.09);
}
@supports (background:color-mix(in srgb,red 5%,transparent)){
  .vw-root{
    --vw-tint-del:color-mix(in srgb,var(--vw-ink) 5%,transparent);
    --vw-tint-ins:color-mix(in srgb,var(--vw-blue) 14%,transparent);
    --vw-tint-set:color-mix(in srgb,var(--vw-blue) 7%,transparent);
  }
}

.vw-root *,.vw-root *::before,.vw-root *::after{box-sizing:border-box}
/* The doubled root is deliberate. A host page resets its own controls with an
   element selector, and this component is mounted inside two different hosts; one
   more class here keeps its buttons and links intact without either page needing
   to know the component exists. */
.vw-root.vw-root button,.vw-root.vw-root select,.vw-root.vw-root input{font:inherit}
.vw-root.vw-root button,.vw-root.vw-root select{
  color:var(--vw-ink);border:1px solid var(--vw-line);border-radius:6px;
  background:transparent;cursor:pointer;min-height:44px;padding:10px 16px;
  font-family:var(--vw-ui);
}
.vw-root.vw-root button:hover,.vw-root.vw-root select:hover{border-color:var(--vw-blue)}
.vw-root button:focus-visible,.vw-root select:focus-visible,.vw-root a:focus-visible,
.vw-reader:focus-visible,.vw-root input:focus-visible{outline:2px solid var(--vw-blue);outline-offset:4px}
.vw-root.vw-root button:disabled{cursor:default;opacity:.4}
.vw-root.vw-root select{max-width:100%;padding-right:32px;background-color:var(--vw-panel)}
.vw-root.vw-root a{color:var(--vw-blue);text-underline-offset:.2em}

/* the static copy authored into the mount: visible until the component replaces it,
   and the only thing left if the corpus request fails */
.vw-root .vw-fallback{margin:0;padding:0}
.vw-root[data-writer-ready] .vw-fallback{display:none}
.vw-root[data-writer-loading] .vw-fallback{opacity:.62}

.vw-root .vw-picker-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.vw-formats{display:flex;gap:8px}
.vw-root.vw-root .vw-format{min-width:88px;font-weight:600;border-color:transparent}
.vw-root.vw-root .vw-format[aria-pressed="true"]{background:var(--vw-ink);color:var(--vw-onink)}
.vw-example-label{display:flex;align-items:center;gap:16px;color:var(--vw-muted)}
.vw-example{width:268px}

.vw-root .vw-stages{display:grid;grid-template-columns:1fr 1.2fr 1.1fr 1.65fr;gap:16px;margin-bottom:24px}
.vw-root.vw-root .vw-stage{
  display:flex;align-items:flex-start;gap:12px;text-align:left;border:0;
  border-bottom:1px solid var(--vw-line);border-radius:0;padding:12px 0 16px;
  color:var(--vw-muted);font-size:13px;line-height:1.45;
}
.vw-root.vw-root .vw-stage[aria-pressed="true"]{color:var(--vw-ink);border-bottom:2px solid var(--vw-blue);font-weight:650}
.vw-stage-number{font-size:11px;line-height:1.8;opacity:.65;font-variant-numeric:tabular-nums}

.vw-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,.43fr);gap:40px;align-items:stretch}
.vw-document{min-width:0;background:var(--vw-panel);border:1px solid var(--vw-line);border-radius:8px;overflow:hidden}
.vw-document-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 28px;border-bottom:1px solid var(--vw-line)}
.vw-document-label{font-size:11px;letter-spacing:.055em;font-weight:600;color:var(--vw-muted)}
.vw-root.vw-root .vw-read{min-height:32px;font-size:12px;border:0;padding:0;flex-shrink:0;color:var(--vw-blue)}
.vw-read span{padding-left:6px}
.vw-reader{height:370px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--vw-line) transparent;scrollbar-width:thin;scroll-behavior:auto}
.vw-copy{padding:32px 40px 48px}
.vw-root .vw-block{
  position:relative;max-width:65ch;margin:0 0 21px;white-space:pre-wrap;
  font-size:18px;line-height:1.62;font-weight:400;color:var(--vw-ink);overflow-wrap:break-word;
}
.vw-root .vw-block:last-child{margin-bottom:0}
.vw-copy h3.vw-block{font:450 32px/1.18 var(--vw-editorial);letter-spacing:-.02em;margin-bottom:28px}
.vw-copy h4.vw-block{font:650 18px/1.4 var(--vw-ui);margin:28px 0 16px}
.vw-active-block::before{content:'';position:absolute;left:-20px;top:.35em;height:1em;width:2px;background:var(--vw-blue);opacity:.75}
.vw-empty-block{display:none}
.vw-root .vw-passage-row{min-height:48px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--vw-line);padding:14px 28px;color:var(--vw-muted);font-size:11px}
.vw-passage{white-space:nowrap;font-variant-numeric:tabular-nums}
.vw-edit-label{text-align:right}

.vw-rationale{padding:16px 0;align-self:start;min-width:0}
.vw-root .vw-kicker{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--vw-muted)}
.vw-root .vw-reason-title{font:450 29px/1.18 var(--vw-editorial);letter-spacing:-.025em;margin:18px 0}
.vw-root .vw-reason-text{font-size:15px;line-height:1.6;margin:0 0 24px;max-width:36ch}
.vw-root .vw-principles{padding:0;margin:0;list-style:none}
.vw-root .vw-principles li{display:flex;gap:12px;margin:10px 0;font-size:11px;line-height:1.45;color:var(--vw-muted)}
.vw-principle-number{display:inline-block;min-width:18px;color:var(--vw-blue);font-size:10px;font-variant-numeric:tabular-nums}
.vw-root .vw-authorship{border-top:1px solid var(--vw-line);padding-top:20px;margin:28px 0 0;font-size:11px;line-height:1.55;color:var(--vw-muted)}

.vw-root .vw-deletion{text-decoration-thickness:1px;color:var(--vw-muted);background:var(--vw-tint-del)}
.vw-root .vw-insertion{text-decoration:none;background:var(--vw-tint-ins)}
.vw-root .vw-settled{background:var(--vw-tint-set)}
.vw-root .vw-cursor{display:inline-block;width:2px;height:1em;vertical-align:-.1em;margin-left:3px;background:var(--vw-blue)}

.vw-transport{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--vw-line)}
.vw-transport-buttons{display:flex;align-items:center;gap:8px}
.vw-root.vw-root .vw-play{background:var(--vw-ink);color:var(--vw-onink);border-color:var(--vw-ink);min-width:94px;font-weight:600}
.vw-root.vw-root .vw-previous,.vw-root.vw-root .vw-next,.vw-root.vw-root .vw-restart{border-color:transparent;font-size:12px}
.vw-root.vw-root .vw-previous span{margin-left:6px}
.vw-root.vw-root .vw-next span{margin-right:6px}
.vw-speed-group,.vw-speed-group label{display:flex;align-items:center;gap:14px}
.vw-speed-group{font-size:11px;color:var(--vw-muted)}
.vw-playback-status{font-size:11px}
.vw-root.vw-root .vw-speed{min-height:40px;padding:8px 24px 8px 10px}

.vw-root .vw-metrics{display:grid;grid-template-columns:1fr 1fr .75fr 1.15fr 1.8fr;gap:24px;padding:24px 0 0;margin:0}
.vw-root .vw-metrics dt{margin:0 0 7px;font-size:10px;color:var(--vw-muted)}
.vw-root .vw-metrics dd{margin:0;font:450 26px/1.1 var(--vw-editorial);font-variant-numeric:tabular-nums}
.vw-root .vw-metrics .vw-metric-stage dd{font:500 13px/1.4 var(--vw-ui)}
.vw-root .vw-provenance{color:var(--vw-muted);font-size:10px;line-height:1.65;margin:24px 0 0;max-width:90ch}

.vw-root[data-format="blog"] .vw-reader{height:410px}
.vw-root[data-format="blog"] .vw-block{font-family:var(--vw-editorial);font-size:20px;line-height:1.6}
.vw-root[data-format="blog"] .vw-copy h3{font-size:34px;line-height:1.18}
.vw-root[data-format="blog"] .vw-copy h4{font-family:var(--vw-ui);font-size:17px}
.vw-root[data-format="social"] .vw-reader{height:auto;min-height:260px;max-height:440px;display:flex;align-items:center}
.vw-root[data-format="social"] .vw-copy{width:100%;padding:36px 40px}
.vw-root[data-format="social"] .vw-block{font:450 clamp(30px,3.5vw,48px)/1.18 var(--vw-editorial);letter-spacing:-.025em;margin-bottom:0;max-width:24ch}
.vw-root[data-format="social"] .vw-active-block::before{display:none}

.vw-root .vw-dialog{
  color:var(--vw-ink);background:var(--vw-panel);border:1px solid var(--vw-line);border-radius:10px;
  padding:32px;width:min(1100px,calc(100vw - 48px));max-height:calc(100dvh - 64px);
  overflow:auto;overscroll-behavior:contain;box-shadow:var(--v-lift-3,0 24px 90px rgba(0,0,0,.27));
}
.vw-dialog::backdrop{background:var(--v-scrim,rgba(7,25,36,.73))}
.vw-dialog-header{display:flex;justify-content:space-between;gap:32px;align-items:flex-start;margin-bottom:24px}
.vw-root .vw-dialog h2{font:450 36px/1.2 var(--vw-editorial);margin:12px 0 0;letter-spacing:-.02em}
.vw-read-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 24px;border-bottom:1px solid var(--vw-line)}
.vw-versions{display:flex;gap:6px;flex-wrap:wrap}
.vw-root.vw-root .vw-versions button{font-size:12px;padding:8px 12px}
.vw-root.vw-root .vw-versions button[aria-pressed="true"]{background:var(--vw-ink);color:var(--vw-onink)}
.vw-root.vw-root .vw-compare-label{font-size:12px;white-space:nowrap}
.vw-compare{accent-color:var(--vw-blue);margin-right:6px}
.vw-complete-copy{padding-top:28px}
.vw-read-article{margin-inline:auto;max-width:65ch}
.vw-root.vw-root .vw-read-version{font:500 11px/1.5 var(--vw-ui);color:var(--vw-muted);margin:0 0 24px}
.vw-root.vw-root .vw-read-block{font:400 19px/1.65 var(--vw-editorial);white-space:pre-wrap;margin:0 0 24px}
.vw-root.vw-root .vw-read-article h3{font-size:32px;line-height:1.2}
.vw-root.vw-root .vw-read-article h4{font:650 18px/1.4 var(--vw-ui);margin:32px 0 18px}
.vw-comparison{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.vw-comparison .vw-read-article + .vw-read-article{border-left:1px solid var(--vw-line);padding-left:32px}
.vw-root.vw-root .vw-read-provenance{color:var(--vw-muted);font-size:11px;line-height:1.65;margin:32px 0 0;border-top:1px solid var(--vw-line);padding-top:20px}

@media (max-width:1000px){
  .vw-workspace{grid-template-columns:minmax(0,1fr) minmax(210px,.45fr);gap:24px}
  .vw-document-top{padding:16px 24px;align-items:flex-start}
  .vw-document-label{max-width:24ch}
  .vw-copy{padding:28px 32px 40px}
  .vw-root .vw-reason-title{font-size:25px}
  .vw-stage-number{display:none}
  .vw-root .vw-stages{gap:12px}
  .vw-speed-group{gap:8px}
  .vw-playback-status{display:none}
}
@media (max-width:700px){
  .vw-root .vw-picker-row{align-items:stretch;flex-direction:column;gap:20px;margin-bottom:24px}
  .vw-formats{gap:4px}
  .vw-root.vw-root .vw-format{flex:1;min-width:0}
  .vw-example-label{gap:12px;font-size:12px}
  .vw-example{flex:1;width:0;font-size:13px}
  .vw-root .vw-stages{grid-template-columns:1fr 1fr;gap:4px 20px;margin-bottom:24px}
  .vw-root.vw-root .vw-stage{padding:12px 0;font-size:11px;min-height:44px}
  .vw-stage-number{display:inline}
  .vw-workspace{grid-template-columns:1fr;gap:24px}
  .vw-document-top{padding:16px 20px;gap:12px}
  .vw-document-label{font-size:9px;max-width:20ch}
  .vw-root.vw-root .vw-read{font-size:10px}
  .vw-reader{height:340px}
  .vw-copy{padding:24px 28px 32px}
  .vw-root .vw-block{font-size:17px;line-height:1.55}
  .vw-active-block::before{left:-14px}
  .vw-root .vw-passage-row{padding:12px 20px;gap:12px;font-size:9px}
  .vw-edit-label{max-width:28ch}
  .vw-rationale{padding:0}
  .vw-root .vw-reason-title{margin:12px 0;font-size:26px}
  .vw-root .vw-reason-text{font-size:14px;max-width:56ch;margin-bottom:16px}
  .vw-root .vw-principles{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .vw-root .vw-principles li{margin:6px 0;font-size:10px}
  .vw-root .vw-authorship{margin-top:20px;padding-top:16px}
  .vw-transport{flex-wrap:wrap;gap:14px;padding:20px 0}
  .vw-transport-buttons{width:100%;justify-content:space-between;gap:2px}
  .vw-root.vw-root .vw-play{min-width:74px;padding:10px 12px}
  .vw-root.vw-root .vw-previous,.vw-root.vw-root .vw-next,.vw-root.vw-root .vw-restart{padding:10px 8px;font-size:10px}
  .vw-speed-group{width:100%;justify-content:space-between}
  .vw-playback-status{display:inline}
  .vw-root .vw-metrics{grid-template-columns:1fr 1fr 1fr;gap:24px 16px}
  .vw-root .vw-metrics dt{font-size:9px}
  .vw-root .vw-metrics dd{font-size:24px}
  .vw-metric-stage{grid-column:span 2}
  .vw-root .vw-provenance{font-size:9px}
  .vw-root[data-format="blog"] .vw-reader{height:380px}
  .vw-root[data-format="blog"] .vw-block{font-size:19px}
  .vw-root[data-format="blog"] .vw-copy h3{font-size:29px}
  .vw-root[data-format="social"] .vw-reader{min-height:205px;max-height:370px}
  .vw-root[data-format="social"] .vw-copy{padding:28px}
  .vw-root[data-format="social"] .vw-block{font-size:32px}
  .vw-root .vw-dialog{padding:24px 20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  .vw-dialog-header{gap:16px}
  .vw-root .vw-dialog h2{font-size:29px}
  .vw-root.vw-root .vw-close{font-size:11px;padding:8px 12px}
  .vw-read-controls{display:block}
  .vw-root.vw-root .vw-compare-label{display:none}
  .vw-root.vw-root .vw-versions button{font-size:10px;padding:7px 9px}
  .vw-comparison{grid-template-columns:1fr}
  .vw-comparison .vw-read-article + .vw-read-article{border-left:0;border-top:1px solid var(--vw-line);padding:28px 0 0}
  .vw-root.vw-root .vw-read-block{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .vw-root *,.vw-root *::before,.vw-root *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   SYSTEMS-06 and SYSTEMS-07 — the writer's vertical rhythm
   --------------------------------------------------------------------------
   The introduction that ends "…and a person decides what ships" used to sit
   flush against the Email / Blog / Social row: nought pixels, so the sentence
   read as a label for the buttons.  The shared paragraph-to-control rule puts
   24 px there on a desktop and 16 px on a phone, and the rest of the sequence
   is stated once, here, for both routes:

     introduction        -> format and example      24 / 16   (paragraph to control)
     format and example  -> stage navigation        32        (one group to the next)
     stage navigation    -> writing panel           32        (one group to the next)
     writing panel       -> transport               24        (artifact to transport)
     transport           -> metrics                 24
   ========================================================================== */
.vw-root{margin-top:var(--va-intro-controls,24px)}
/* A writer that opens a section rather than following a paragraph does not
   need the paragraph gap. */
.vw-root:first-child{margin-top:0}
.vic .bs-cols + .bs-wrap .vw-root,
.vic .bs-say + .vw-root{margin-top:var(--va-intro-controls,24px)}

.vw-root .vw-picker-row{margin-bottom:32px}
.vw-root .vw-stages{margin-bottom:32px}
.vw-root .vw-transport{padding-top:24px}
.vw-root .vw-metrics{padding-top:24px}

@media (max-width:767px){
  .vw-root{margin-top:16px}
  .vic .bs-cols + .bs-wrap .vw-root,
  .vic .bs-say + .vw-root{margin-top:16px}
  .vw-root .vw-picker-row{margin-bottom:24px}
  .vw-root .vw-stages{margin-bottom:24px}
}