/*
 * Scion, explained through Git: four instruments on the shared night, quiet
 * theme. Chrome reads the shared tokens; the colors below are data colors,
 * one hue per system and never swapped. Every encoding also carries a shape,
 * a dash, a position or a word: Git is always the left or first side, new
 * objects are solid, objects from an earlier revision are outlined, previews
 * are dashed, and a shared object says "Reused".
 */
:root {
  --data-git: #f0b45a; /* Git: warm amber */
  --data-git-fill: #3b2b12;
  --data-git-dim: #8f7243;
  --data-scion: #62d4e6; /* Scion: cool cyan */
  --data-scion-fill: #0f3439;
  --data-scion-dim: #3f8995;
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
}

/* Top bar: the mark home, the way back, and the source. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  min-height: 78px;
  padding: var(--space-3) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.topbar .lockup {
  min-height: 44px;
}

.source-link {
  margin-left: auto;
  padding-block: var(--space-1);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

main {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-9);
}

/* Intro. */
.intro .eyebrow {
  margin-bottom: var(--space-4);
}

h1 {
  margin: 0;
  font-weight: var(--weight-bold);
}

h1 span {
  color: var(--ink-2);
  font-weight: 400;
}

.lede {
  max-width: var(--prose);
  margin: var(--space-5) 0 var(--space-3);
  color: var(--ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-prose);
}

.meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.meta a {
  color: var(--ink);
}

.key {
  display: grid;
  gap: var(--space-2);
  max-width: var(--prose);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.key p {
  margin: 0;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: baseline;
}

.swatch--git {
  background: var(--data-git);
}

.swatch--scion {
  background: var(--data-scion);
}

.reused-sample {
  padding: 0 var(--space-1);
  background: var(--tint);
  color: var(--ink-2);
}

/* Evidence tags. */
.tag {
  display: inline-block;
  padding: 1px var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tag--illustration {
  border-style: dashed;
}

.tag--calc {
  border-style: dotted;
  border-width: 2px;
}

.source {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* The scene rail: where you are, and the revision every scene reads. */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-block: var(--space-7) 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

@media (min-width: 620px) {
  .rail {
    position: sticky;
    top: 0;
    z-index: 5;
  }
}

.rail ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.rail a {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
  min-height: 32px;
  padding-block: var(--space-1);
  text-decoration: none;
}

.rail a:hover {
  text-decoration-line: underline;
}

.rail-revision {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-xs);
}

.is-article .rail-revision {
  display: none;
}

/* Scenes. */
.scene {
  padding-top: var(--section);
  scroll-margin-top: 48px;
}

.scene-head {
  max-width: var(--prose);
}

.scene-head h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
}

.scene-lede {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-prose);
  line-height: var(--leading-prose);
}

.instrument {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Badges: what the post states, and what the page invented. */
.badges {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 620px) {
  .badges {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.badge {
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-sm);
}

.badge--illustration {
  border-style: dashed;
  border-color: var(--line-strong);
}

.badge summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-2);
  cursor: pointer;
}

.badge .count {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.badge ul {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3) var(--space-6);
  color: var(--ink-2);
}

.badge li + li {
  margin-top: var(--space-2);
}

/* Controls: instrument buttons, segmented toggles and selects. */
.ibtn,
.seg,
.select {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
}

.ibtn:hover,
.seg:hover {
  background: var(--tint);
}

.ibtn--primary,
.seg[aria-pressed="true"] {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-ink);
}

.ibtn--primary:hover {
  background: var(--action-bg);
}

.ibtn:disabled,
.seg:disabled {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: not-allowed;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
}

.segmented .seg + .seg {
  margin-left: -1px;
}

.controls,
.actions,
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}

.row {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.control--wide {
  flex-basis: 100%;
}

.control,
.select {
  min-width: 0;
  max-width: 100%;
}

.row-label {
  color: var(--muted);
  font-size: var(--text-xs);
}

.note,
.action-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.config-facts {
  display: grid;
  gap: var(--space-1) var(--space-4);
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-xs);
}

@media (min-width: 620px) {
  .config-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.config-facts dt {
  color: var(--muted);
}

.config-facts dd {
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.presets summary {
  min-height: 44px;
  padding-block: var(--space-3);
  color: var(--ink-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.preset-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  max-width: 520px;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
}

/* Scene 1's editor. */
.editor {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 620px) {
  .editor {
    grid-template-columns: minmax(200px, 260px) 1fr;
  }
}

.files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-content: start;
}

@media (min-width: 620px) {
  .files {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

.file {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

@media (max-width: 619px) {
  .file {
    min-height: 44px;
  }
}

.file[aria-pressed="true"] {
  border-color: var(--ink);
  color: var(--ink);
}

.file-state {
  color: var(--data-git);
  font-size: var(--text-2xs);
}

.code-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--text-xs);
}

.code-label .mono {
  color: var(--ink);
}

.code-area {
  width: 100%;
  min-height: 92px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
}

/* The stage: Git and Scion side by side, or one at a time on a phone. */
.side-switch {
  display: flex;
}

.side-switch .seg {
  flex: 1;
}

.side-switch .seg + .seg {
  margin-left: -1px;
}

.stage {
  display: grid;
  gap: var(--space-3);
}

.side {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  background: var(--surface);
}

.side--git {
  border-top: 3px solid var(--data-git);
}

.side--scion {
  border-top: 3px solid var(--data-scion);
}

.svg {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.caption {
  min-height: 3.2em;
  margin-top: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

@media (max-width: 1049px) {
  .stage[data-show="git"] .side--scion,
  .stage[data-show="scion"] .side--git {
    display: none;
  }
}

@media (min-width: 1050px) {
  .side-switch {
    display: none;
  }

  .stage {
    grid-template-columns: 1fr 1fr;
  }
}

/* Playback. */
.player {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.player .ibtn {
  min-width: 44px;
}

.ibtn--play {
  min-width: 76px;
}

.scrub {
  flex: 1;
  display: flex;
}

.scrub input {
  width: 100%;
  min-height: 44px;
  accent-color: var(--ink);
}

.player-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.outcomes {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 620px) {
  .outcomes {
    grid-template-columns: 1fr 1fr;
  }
}

.outcome {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--data-git);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.outcome--scion {
  border-left-color: var(--data-scion);
}

.inspector {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--text-sm);
}

.inspector-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.inspector-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
}

.inspector ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--ink-2);
}

.inspector code,
.reading code,
.sources code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.inspector .muted {
  color: var(--muted);
}

.blob-content {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-xs);
}

/* The fleet board. */
.fleet {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-top: 3px solid var(--data-scion);
  background: var(--surface);
}

.svg--fleet {
  max-width: 1000px;
}

@media (max-width: 1049px) {
  .svg--fleet {
    max-width: 460px;
  }
}

.fleet-summary {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.fleet-summary ol {
  margin: 0;
  padding-left: var(--space-5);
}

.fleet-summary p {
  margin: 0;
}

.git-strip {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--data-git);
  background: var(--surface);
}

.git-strip figcaption {
  max-width: var(--prose);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.git-strip .strip {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: var(--space-4) 0 var(--space-2);
}

.strip .mirrors rect {
  fill: var(--data-git-fill);
  stroke: var(--data-git);
}

.strip .timeline {
  stroke: var(--line-strong);
}

.strip .mainline circle {
  fill: var(--data-git-dim);
}

.strip .seeds path {
  fill: var(--data-git);
  stroke: var(--data-git);
}

.strip .gap {
  stroke: var(--data-git);
  stroke-dasharray: 3 3;
}

/* SVG vocabulary. */
.svg text,
.strip text {
  fill: var(--ink-2);
  font-family: var(--font-sans);
}

.svg .mono,
.strip .mono {
  font-family: var(--font-mono);
}

.t-head {
  font-size: 13px;
  font-weight: 700;
}

.t-sm {
  font-size: 13px;
}

.t-xs {
  font-size: 12px;
}

.t-2xs {
  font-size: 11px;
}

/* A phone draws the stage at about 0.85 of its user units; these keep
   stage text at 11px or more there. */
@media (max-width: 619px) {
  .t-head,
  .t-sm {
    font-size: 15px;
  }

  .t-xs {
    font-size: 13.5px;
  }

  .t-2xs {
    font-size: 13px;
  }

  .side,
  .fleet {
    padding: var(--space-2) var(--space-1);
  }
}

.svg .ink,
.strip .ink {
  fill: var(--ink);
}

.svg .muted,
.strip .muted {
  fill: var(--muted);
}

.svg .git-ink {
  fill: var(--data-git);
}

.svg .scion-ink {
  fill: var(--data-scion);
}

.svg .lbl-dir {
  fill: var(--ink);
}

.svg .reused-label {
  fill: var(--ink-2);
}

.glyph {
  stroke-width: 1.5;
}

.glyph.git.is-new {
  fill: var(--data-git-fill);
  stroke: var(--data-git);
  stroke-width: 2;
}

.glyph.git.is-old,
.glyph.git.is-reused {
  fill: var(--surface);
  stroke: var(--data-git-dim);
}

.glyph.scion.is-new {
  fill: var(--data-scion-fill);
  stroke: var(--data-scion);
  stroke-width: 2;
}

.glyph.scion.is-old,
.glyph.scion.is-reused {
  fill: var(--surface);
  stroke: var(--data-scion-dim);
}

.glyph.git.is-request {
  fill: none;
  stroke: var(--data-git);
}

.glyph.scion.is-request {
  fill: none;
  stroke: var(--data-scion);
}

.glyph.is-preview {
  stroke-dasharray: 3 2;
}

.edge line,
.edge polyline,
line.edge,
polyline.edge {
  fill: none;
  stroke-width: 1.4;
}

.edge.git {
  stroke: var(--data-git);
}

.edge.git line {
  stroke: var(--data-git);
}

.edge.scion,
.edge.scion line {
  stroke: var(--data-scion);
}

.edge.git.is-old,
.edge.git.is-old line {
  stroke: var(--data-git-dim);
}

.edge.scion.is-old,
.edge.scion.is-old line {
  stroke: var(--data-scion-dim);
}

.edge.is-preview line {
  stroke-dasharray: 3 2;
}

.edge .parent-link {
  stroke-dasharray: 2 3;
}

.band rect {
  fill: var(--tint);
  stroke: var(--line);
}

.unlisted {
  stroke: var(--line-strong);
}

.ref line {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.ref path {
  stroke: none;
}

.ref.git path {
  fill: var(--data-git);
}

.ref.scion path {
  fill: var(--data-scion);
}

.ref text {
  fill: var(--ink);
}

.cas rect {
  fill: var(--data-scion-fill);
  stroke: var(--data-scion);
}

.cas text {
  fill: var(--ink);
}

.lane {
  stroke: var(--line-strong);
  stroke-dasharray: 2 4;
}

.msg line {
  stroke-width: 2;
}

.msg.git line {
  stroke: var(--data-git);
}

.msg.git polygon {
  fill: var(--data-git);
}

.msg.scion line {
  stroke: var(--data-scion);
}

.msg.scion polygon {
  fill: var(--data-scion);
}

.msg.is-up line {
  stroke-dasharray: 5 3;
}

.pack {
  fill: none;
  stroke: var(--data-git);
  stroke-dasharray: 4 2;
}

.store {
  fill: var(--bg);
  stroke: var(--line);
}

.region {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 3;
}

.tier {
  fill: var(--bg);
  stroke: var(--data-scion-dim);
  stroke-width: 1.5;
}

.tier--server {
  stroke: var(--data-scion);
}

.node {
  fill: var(--surface);
  stroke: var(--line-strong);
}

.launch {
  fill: var(--tint);
  stroke: var(--line-strong);
}

.hit.is-launch {
  cursor: pointer;
}

.hit.is-launch:hover .launch {
  stroke: var(--ink);
}

.wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.job {
  fill: var(--ink-2);
  stroke: none;
}

.job.is-running {
  fill: var(--data-scion);
}

.dash {
  stroke-width: 3;
  stroke-linecap: round;
}

.dash.scion {
  stroke: var(--data-scion);
}

.tile.is-built {
  fill: var(--data-scion-fill);
  stroke: var(--data-scion);
}

.tile.is-absent {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 3 3;
}

.tray {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 4 3;
}

.hit {
  cursor: pointer;
  outline: none;
}

.hit:focus-visible .glyph,
.hit:focus-visible rect {
  stroke: var(--focus);
  stroke-width: 3;
}

.hit:hover .glyph {
  stroke-width: 3;
}

/* Reading view: every scene's default run, in text. */
.reading {
  max-width: var(--prose);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.reading h4 {
  margin: var(--space-4) 0 var(--space-1);
  color: var(--ink);
  font-size: var(--text-sm);
}

.reading ol,
.reading ul {
  margin: 0;
  padding-left: var(--space-5);
}

.reading-badges p {
  margin: var(--space-3) 0 var(--space-1);
}

.reading-outcome {
  margin: var(--space-2) 0 0;
  color: var(--ink);
}

/* Closing. */
.readouts {
  display: grid;
  gap: 1px;
  margin-top: var(--space-5);
  border: 1px solid var(--line);
  background: var(--line);
}

@media (min-width: 620px) {
  .readouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.readout {
  padding: var(--space-4);
  background: var(--surface);
}

.readout p {
  margin: 0;
}

.readout-figure {
  color: var(--ink);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.readout-scope {
  margin-top: var(--space-1) !important;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.readout .source {
  margin-top: var(--space-2) !important;
}

.growth {
  max-width: var(--prose);
  margin: var(--space-5) 0 0;
  color: var(--ink-2);
}

.closing-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 620px) {
  .closing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.panel {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.panel h3 {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
}

.panel blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule);
  color: var(--ink);
}

.panel blockquote p,
.panel ul {
  margin: 0;
}

.panel ul {
  padding-left: var(--space-5);
}

.panel li + li {
  margin-top: var(--space-2);
}

.calculator {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 2px dotted var(--line-strong);
}

.calculator h3 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-base);
}

.calc-tag {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}

.calc-row label {
  color: var(--ink-2);
}

.calc-row input {
  width: 6.5em;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.calc-op {
  color: var(--muted);
}

.calc-row output {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.calculator .note {
  margin-top: var(--space-3);
  max-width: var(--prose);
}

.sources {
  margin-top: var(--section);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.sources summary {
  min-height: 44px;
  cursor: pointer;
}

.sources summary h2 {
  display: inline;
  font-size: var(--text-lg);
}

.sources h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink);
  font-size: var(--text-sm);
}

.sources ul {
  margin: 0;
  padding-left: var(--space-5);
}

.sources li + li {
  margin-top: var(--space-1);
}

.piece-footer {
  margin-top: var(--space-7);
  color: var(--muted);
  font-size: var(--text-xs);
}

.piece-footer p {
  margin: 0;
}

.calc-sources {
  max-width: var(--prose);
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  color: var(--ink-2);
  font-size: var(--text-xs);
}