/* VARRD Ops screen: the operations desk portal as shapes and lines.
   Every class is namespaced .vso-. Colours are local so the host page's
   tokens are not required inside the frame. No real information: text
   is skeleton bars, the only words are the sentinel's own grammar. */

.vso-root {
  --vso-ink: #0C0A08;
  --vso-ink-2: #17130E;
  --vso-ink-3: #241D15;
  --vso-gold: #D4A574;
  --vso-gold-bright: #F0C98A;
  --vso-gold-deep: #8E6A3C;
  --vso-bone: #F5EFE5;
  --vso-muted: #A89C88;
  --vso-rule: rgba(212, 165, 116, 0.18);
  --vso-bar: rgba(245, 239, 229, 0.10);
  --vso-bar-dim: rgba(245, 239, 229, 0.06);
  --vso-line: rgba(212, 165, 116, 0.22);
  --vso-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --vso-sans: Inter, system-ui, sans-serif;

  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--vso-ink);
  color: var(--vso-bone);
  font-family: var(--vso-sans);
  font-size: 10px; /* set from the container by JS */
  line-height: 1;
  box-sizing: border-box;
}
.vso-root *, .vso-root *::before, .vso-root *::after { box-sizing: border-box; }
.vso-root.is-fade { animation: vso-fade 0.6s ease-out forwards; }

/* ---------- skeleton primitives ---------- */
.vso-bar {
  display: block;
  height: 0.55em;
  border-radius: 2px;
  background: var(--vso-bar);
  width: 60%;
  flex: 0 0 auto;
}
.vso-bar.is-dim { background: var(--vso-bar-dim); }
.vso-bar.is-gold { background: rgba(212, 165, 116, 0.35); }
.vso-word {
  font-family: var(--vso-mono);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  color: var(--vso-muted);
  white-space: nowrap;
}
.vso-count {
  display: inline-block;
  font-family: var(--vso-mono);
  font-size: 0.7em;
  line-height: 1.5em;
  padding: 0 0.45em;
  border-radius: 2px;
  background: rgba(212, 165, 116, 0.16);
  color: var(--vso-gold);
}
.vso-ico {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 2px;
  border: 1px solid rgba(245, 239, 229, 0.22);
  flex: 0 0 auto;
}
.vso-btn {
  display: inline-block;
  height: 1.3em;
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 2px;
  flex: 0 0 auto;
}
.vso-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  height: 1.35em;
  padding: 0 0.45em;
  border: 1px solid var(--vso-rule);
  border-radius: 2px;
  font-family: var(--vso-mono);
  font-size: 0.66em;
  letter-spacing: 0.06em;
  color: var(--vso-muted);
  white-space: nowrap;
}
.vso-chip .vso-x { color: var(--vso-gold-deep); }
.vso-chip.is-ai { border-color: rgba(212, 165, 116, 0.4); color: var(--vso-gold); }

/* ---------- sidebar ---------- */
.vso-side {
  flex: 0 0 22%;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.9em 0.8em;
  border-right: 1px dotted var(--vso-rule);
  background: var(--vso-ink-2);
  min-width: 0;
}
.vso-wm {
  font-family: var(--vso-sans);
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--vso-bone);
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.6em;
}
.vso-nrow {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 1.7em;
  padding: 0 0.45em;
  border-radius: 2px;
  min-width: 0;
}
.vso-nrow .vso-bar { height: 0.5em; }
.vso-nrow.is-on { background: rgba(212, 165, 116, 0.10); }
.vso-nrow.is-on .vso-ico { border-color: var(--vso-gold); }
.vso-nrow.is-on .vso-word { color: var(--vso-gold); }
.vso-nrow.is-on .vso-count { margin-left: auto; }
.vso-usage {
  margin-top: auto;
  padding: 0.6em 0.6em;
  border: 1px dotted var(--vso-rule);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

/* ---------- main column ---------- */
.vso-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 0.9em 0.9em;
}
.vso-strip {
  display: flex;
  gap: 0.5em;
}
.vso-mini {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.5em 0.55em;
  border: 1px solid var(--vso-rule);
  border-radius: 2px;
  background: var(--vso-ink-2);
}
.vso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 1px solid var(--vso-gold-deep);
  font-family: var(--vso-mono);
  font-size: 0.62em;
  color: var(--vso-gold);
  margin-bottom: 0.2em;
}
.vso-seclabel {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.vso-cards {
  display: flex;
  gap: 0.7em;
}
.vso-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.7em 0.75em;
  border: 1px solid var(--vso-rule);
  border-radius: 3px;
  background: var(--vso-ink-2);
}
.vso-card.is-designed { opacity: 0.72; }
.vso-ctitle { display: flex; align-items: center; gap: 0.45em; }
.vso-ctitle .vso-bar { height: 0.65em; background: rgba(245, 239, 229, 0.16); }
.vso-ctitle .vso-chip { height: 1.2em; padding: 0 0.35em; }
.vso-ctitle .vso-chip .vso-bar { width: 2.2em; height: 0.4em; }
.vso-chips { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.15em; }
.vso-cfoot { display: flex; gap: 0.5em; margin-top: 0.1em; }
.vso-cfoot .vso-bar { height: 0.45em; }

/* ---------- drawer ---------- */
.vso-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0.8em 0.8em;
  background: var(--vso-ink-2);
  border-left: 1px dotted rgba(212, 165, 116, 0.35);
  box-shadow: -1.2em 0 2.4em rgba(0, 0, 0, 0.45);
  animation: vso-slidein 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  min-height: 0;
}
.vso-drawer.is-done { animation: none; transform: none; }
.vso-dhead {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 1.6em;
}
.vso-dhead .vso-title { width: 30%; height: 0.7em; background: rgba(245, 239, 229, 0.18); }
.vso-dhead .vso-tab { width: 12%; height: 0.45em; }
.vso-dhead .vso-tab.is-on { background: rgba(212, 165, 116, 0.5); }
.vso-dhead .vso-btn { width: 3.4em; margin-left: auto; }
.vso-dhead .vso-btn + .vso-btn { margin-left: 0; }
.vso-dinfo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 1.3em;
  padding: 0 0.5em;
  border-radius: 2px;
  background: rgba(245, 239, 229, 0.03);
}
.vso-dinfo .vso-bar { width: 55%; height: 0.4em; }
.vso-dinfo .vso-btn { height: 0.9em; width: 2em; margin-left: auto; }
.vso-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 1.3em;
  padding: 0 0.6em;
  border: 1px solid var(--vso-gold-deep);
  border-radius: 2px;
}
.vso-pill .vso-bar { width: 11em; height: 0.4em; background: rgba(212, 165, 116, 0.35); }

.vso-collab {
  font-family: var(--vso-mono);
  font-size: 0.66em;
  letter-spacing: 0.14em;
  color: var(--vso-gold-deep);
  margin: 0 0 0.6em;
  white-space: nowrap;
}

/* map: three columns with the connector svg over them */
.vso-map {
  position: relative;
  display: grid;
  grid-template-columns: 9.4em 1fr 9.4em;
  gap: 0 1em;
  align-items: start;
}
.vso-col { position: relative; z-index: 1; min-width: 0; }
.vso-boxes { display: flex; flex-direction: column; gap: 0.32em; }
.vso-box {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 1.7em;
  min-width: 0;
  overflow: hidden;
  padding: 0 0.5em;
  border: 1px solid var(--vso-rule);
  border-radius: 2px;
  background: var(--vso-ink);
  transition: border-color 0.25s, background-color 0.25s;
}
.vso-tbox { height: 1.5em; }
.vso-lock {
  width: 0.55em;
  height: 0.62em;
  border: 1px solid var(--vso-muted);
  border-top-width: 0;
  border-radius: 0 0 1px 1px;
  position: relative;
  opacity: 0.7;
  flex: 0 0 auto;
}
.vso-lock::before {
  content: "";
  position: absolute;
  left: 0.08em;
  top: -0.32em;
  width: 0.32em;
  height: 0.32em;
  border: 1px solid var(--vso-muted);
  border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
}
.vso-box .vso-bar { height: 0.45em; }
.vso-tag {
  margin-left: auto;
  font-family: var(--vso-mono);
  font-size: 0.58em;
  letter-spacing: 0.1em;
  color: var(--vso-gold-deep);
}
.vso-tag.is-w { color: var(--vso-gold); }
.vso-box.is-read { border-color: rgba(212, 165, 116, 0.55); }
.vso-box.is-read .vso-bar { background: rgba(212, 165, 116, 0.28); }
.vso-box.is-read .vso-lock, .vso-box.is-read .vso-lock::before { border-color: var(--vso-gold); }
.vso-box.is-flash { animation: vso-flash 0.55s ease-out; }
.vso-box.is-w-lit { border-color: var(--vso-gold-bright); background: rgba(212, 165, 116, 0.14); }

.vso-sentcol { display: flex; flex-direction: column; align-items: stretch; padding-top: 2.4em; }
.vso-node {
  border: 1px solid var(--vso-gold-deep);
  border-radius: 3px;
  padding: 0.55em;
  background: var(--vso-ink);
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.vso-node .vso-word { color: var(--vso-gold); font-size: 0.68em; letter-spacing: 0.16em; text-align: center; }
.vso-node-inner {
  border: 1px dashed rgba(212, 165, 116, 0.45);
  border-radius: 2px;
  padding: 0.45em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  align-items: center;
}
.vso-node-inner .vso-bar { height: 0.45em; }
.vso-node.is-glow { animation: vso-glow 0.6s ease-out; }
.vso-node.is-lit { border-color: var(--vso-gold); box-shadow: 0 0 1.2em rgba(212, 165, 116, 0.22); }
.vso-node-ctx { margin-top: 0.4em; display: flex; flex-direction: column; gap: 0.3em; padding: 0.4em; border: 1px solid var(--vso-rule); border-radius: 2px; }
.vso-node-ctx .vso-bar { height: 0.38em; }

/* steps graph */
.vso-steps { position: relative; margin-top: 0.2em; }
.vso-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3.6em 3.6em;
  gap: 0 1em;
  align-items: center;
  padding: 0.3em 0 1.4em; /* room for the return lane below the row */
}
.vso-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1.1em;
}
.vso-step, .vso-ai, .vso-gate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22em;
  padding: 0.3em 0.45em;
  border: 1px solid var(--vso-rule);
  border-radius: 2px;
  background: var(--vso-ink);
  min-width: 0;
  transition: border-color 0.25s, background-color 0.25s, opacity 0.35s;
}
.vso-step { flex: 1 1 0; height: 3.2em; }
.vso-snum {
  font-family: var(--vso-mono);
  font-size: 0.56em;
  letter-spacing: 0.1em;
  color: var(--vso-gold-deep);
}
.vso-sword {
  font-family: var(--vso-mono);
  font-size: 0.7em;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: var(--vso-muted);
  white-space: nowrap;
  overflow: hidden;
}
.vso-step .vso-bar, .vso-ai .vso-bar, .vso-gate .vso-bar { height: 0.36em; width: 70%; }
.vso-step .vso-sword, .vso-gate .vso-sword { font-size: 0.62em; letter-spacing: 0.05em; }
.vso-fan { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.3em; }
.vso-ai { height: 1.45em; flex-direction: row; align-items: center; gap: 0.35em; padding: 0 0.4em; }
.vso-ai .vso-bar { width: 1.2em; margin-left: auto; }
.vso-gate { height: 3.2em; border-color: var(--vso-gold-deep); }
.vso-gate .vso-sword { color: var(--vso-gold); }
.vso-gatewrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.3em; align-items: stretch; }
.vso-gchip {
  align-self: flex-start;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.35s, transform 0.35s;
  border-color: var(--vso-gold);
  color: var(--vso-gold-bright);
  background: rgba(212, 165, 116, 0.12);
}
.vso-gchip.is-show { opacity: 1; transform: none; }
.is-lit.vso-step, .is-lit.vso-ai { border-color: var(--vso-gold); background: rgba(212, 165, 116, 0.10); }
.is-lit .vso-sword { color: var(--vso-bone); }
.is-lit .vso-bar { background: rgba(212, 165, 116, 0.35); }
.vso-ai.is-dim { opacity: 0.32; }
.vso-gate.is-pulse2 { animation: vso-gatepulse 0.6s ease-in-out 2; }
.vso-gate.is-lit { border-color: var(--vso-gold-bright); background: rgba(212, 165, 116, 0.16); box-shadow: 0 0 1em rgba(212, 165, 116, 0.25); }

.vso-dock {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-top: 0.5em;
  border-top: 1px dotted var(--vso-rule);
}
.vso-dock-in {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 1.7em;
  padding: 0 0.6em;
  border: 1px solid var(--vso-rule);
  border-radius: 2px;
  background: var(--vso-ink);
}
.vso-dock-in .vso-bar { height: 0.4em; }
.vso-dock .vso-btn { width: 3.2em; height: 1.7em; border-color: var(--vso-gold-deep); }
.vso-ln.is-hide { display: none; }

/* connector svg layers */
.vso-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.vso-ln .l {
  fill: none;
  stroke: var(--vso-line);
  stroke-width: 1;
  stroke-linejoin: round;
}
.vso-ln .a { fill: var(--vso-line); }
.vso-ln.is-run .l {
  stroke: var(--vso-gold-bright);
  stroke-width: 1.4;
  stroke-dasharray: 0.3 0.7;
  animation: vso-run 0.8s linear 1 forwards;
}
.vso-ln.is-on .l { stroke: rgba(212, 165, 116, 0.7); stroke-dasharray: none; animation: none; }
.vso-ln.is-on .a { fill: rgba(212, 165, 116, 0.8); }
.vso-ln.is-ret .l { stroke: var(--vso-gold-deep); stroke-dasharray: 2 2; opacity: 0; transition: opacity 0.4s; }
.vso-ln.is-ret .a { fill: var(--vso-gold-deep); opacity: 0; transition: opacity 0.4s; }
.vso-ln.is-ret.is-on .l, .vso-ln.is-ret.is-on .a { opacity: 1; }

/* ---------- narrow (4:5) layout ---------- */
.vso-root.is-narrow {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.vso-root.is-narrow .vso-side { grid-row: 1 / span 2; grid-column: 1; flex-basis: auto; padding: 0.7em 0.45em; gap: 0.5em; align-items: center; }
.vso-root.is-narrow .vso-main { grid-row: 1; grid-column: 2; }
.vso-root.is-narrow .is-extra { display: none !important; }
.vso-root.is-narrow .vso-wm { width: 1.1em; height: 1.1em; border: 1px solid var(--vso-gold); border-radius: 2px; font-size: 0; margin-bottom: 0.3em; }
.vso-root.is-narrow .vso-nrow { height: 1.4em; padding: 0.2em; width: 1.5em; justify-content: center; }
.vso-root.is-narrow .vso-nrow .vso-bar, .vso-root.is-narrow .vso-nrow .vso-word, .vso-root.is-narrow .vso-nrow .vso-count { display: none; }
.vso-root.is-narrow .vso-usage { padding: 0.3em; width: 1.5em; }
.vso-root.is-narrow .vso-usage .vso-bar { width: 100% !important; height: 0.35em; }
.vso-root.is-narrow .vso-main { padding: 0.7em 0.6em; gap: 0.55em; overflow: hidden; }
.vso-root.is-narrow .vso-strip { gap: 0.35em; }
.vso-root.is-narrow .vso-mini { padding: 0.35em 0.4em; gap: 0.25em; }
.vso-root.is-narrow .vso-mini .vso-bar:last-child { display: none; }
.vso-root.is-narrow .vso-cards { flex-direction: column; gap: 0.5em; }
.vso-root.is-narrow .vso-card { padding: 0.5em 0.6em; gap: 0.35em; }
.vso-root.is-narrow .vso-card .vso-bar.is-body { display: none; }
.vso-root.is-narrow .vso-cfoot { display: none; }
.vso-root.is-narrow .vso-drawer {
  grid-row: 2;
  grid-column: 2;
  position: relative;
  width: auto;
  inset: auto;
  margin-top: 0.1em;
  min-height: 0;
  padding: 0.6em 0.6em;
  gap: 0.45em;
  border-left: 0;
  border-top: 1px dotted rgba(212, 165, 116, 0.35);
  box-shadow: none;
  animation-name: vso-risein;
  flex: 1 1 auto;
}
.vso-root.is-narrow .vso-dinfo, .vso-root.is-narrow .vso-node-ctx { display: none; }
.vso-root.is-narrow .vso-map { display: flex; flex-direction: column; gap: 0.5em; align-items: stretch; }
.vso-root.is-narrow .vso-col { width: 100%; }
.vso-root.is-narrow .vso-collab { margin-bottom: 0.35em; }
.vso-root.is-narrow .vso-datacol .vso-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3em; }
.vso-root.is-narrow .vso-datacol .vso-box { height: 1.35em; padding: 0 0.35em; }
.vso-root.is-narrow .vso-datacol .vso-box .vso-bar:nth-of-type(2) { display: none; }
.vso-root.is-narrow .vso-sentcol { padding-top: 0; }
.vso-root.is-narrow .vso-node { flex-direction: row; align-items: center; padding: 0.4em 0.6em; gap: 0.6em; }
.vso-root.is-narrow .vso-node-inner { flex-direction: row; flex: 1 1 auto; padding: 0.3em 0.45em; }
.vso-root.is-narrow .vso-node-inner .vso-bar { width: 40% !important; }
.vso-root.is-narrow .vso-toolcol .vso-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3em; }
.vso-root.is-narrow .vso-toolcol .vso-box { height: 1.3em; padding: 0 0.35em; }
.vso-root.is-narrow .vso-toolcol .vso-tag { display: none; }
.vso-root.is-narrow .vso-toolcol .vso-box:last-child .vso-bar { display: none; }
.vso-root.is-narrow .vso-toolcol .vso-box:last-child .vso-tag { display: inline; margin-left: 0; }
.vso-root.is-narrow .vso-flow { display: flex; flex-direction: column; align-items: stretch; gap: 1.1em; padding: 0.2em 0 0.4em 1.2em; flex: 1 1 auto; justify-content: space-evenly; }
.vso-root.is-narrow .vso-row, .vso-root.is-narrow .vso-fan, .vso-root.is-narrow .vso-gatewrap { width: 100%; }
.vso-root.is-narrow .vso-steps { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vso-root.is-narrow .vso-dock { display: none; }
.vso-root.is-narrow .vso-row { gap: 0.9em; }
.vso-root.is-narrow .vso-step { height: 3em; }
.vso-root.is-narrow .vso-fan { flex-direction: row; gap: 0.9em; }
.vso-root.is-narrow .vso-ai { flex: 1 1 0; height: 1.5em; }
.vso-root.is-narrow .vso-gatewrap { flex-direction: row; align-items: center; gap: 0.6em; }
.vso-root.is-narrow .vso-gate { height: 3em; width: 46%; }
.vso-root.is-narrow .vso-gchip { align-self: center; }

/* ---------- motion ---------- */
@keyframes vso-slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes vso-risein { from { transform: translateY(0.8em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vso-flash {
  0% { background-color: rgba(240, 201, 138, 0.35); border-color: var(--vso-gold-bright); }
  100% { background-color: var(--vso-ink); }
}
@keyframes vso-glow {
  0% { box-shadow: 0 0 0 rgba(212, 165, 116, 0); }
  40% { box-shadow: 0 0 1.4em rgba(240, 201, 138, 0.45); }
  100% { box-shadow: 0 0 1.2em rgba(212, 165, 116, 0.22); }
}
@keyframes vso-gatepulse {
  0% { background-color: var(--vso-ink); box-shadow: 0 0 0 rgba(240, 201, 138, 0); }
  50% { background-color: rgba(240, 201, 138, 0.3); box-shadow: 0 0 1.6em rgba(240, 201, 138, 0.5); border-color: var(--vso-gold-bright); }
  100% { background-color: var(--vso-ink); box-shadow: 0 0 0 rgba(240, 201, 138, 0); }
}
@keyframes vso-run { from { stroke-dashoffset: 1.3; } to { stroke-dashoffset: 0.3; } }
@keyframes vso-fade { to { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .vso-root *, .vso-root { animation: none !important; transition: none !important; }
  .vso-drawer { transform: none; }
}