@validation-os/dashboard 0.5.0 → 0.6.0

package/dist/styles.css

@@ -294,14 +294,45 @@
 .vos-nav-item.is-active .vos-nav-ic {
   opacity: 1;
 }
+.vos-nav-alert {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--vos-crit);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
 .vos-nav-count {
   margin-left: auto;
   font-size: 12px;
   color: var(--vos-faint);
 }
+.vos-nav-alert + .vos-nav-count {
+  margin-left: 6px;
+}
 .vos-nav-item.is-active .vos-nav-count {
   color: var(--vos-accent-text);
 }
+.vos-nav-default {
+  margin-left: auto;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--vos-faint);
+  border: 1px solid var(--vos-border);
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+.vos-nav-item.is-active .vos-nav-default {
+  color: var(--vos-accent-text);
+  border-color: var(--vos-accent-text);
+}
 
 .vos-main {
   grid-area: main;
@@ -324,6 +355,25 @@
   color: var(--vos-muted);
   font-size: 13px;
 }
+.vos-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  color: var(--vos-muted);
+  margin-bottom: 14px;
+}
+.vos-crumbs button {
+  border: none;
+  background: none;
+  color: var(--vos-accent-text);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+.vos-crumbs button:hover {
+  text-decoration: underline;
+}
 
 /* ── buttons ───────────────────────────────────────────────────────────── */
 .vos-btn {
@@ -969,3 +1019,1017 @@ textarea.vos-input {
   font-size: 13px;
   color: var(--vos-text);
 }
+
+/* ── portfolio pipeline (OPS-1300) ─────────────────────────────────────── */
+
+/* headline: the one burn-up reading, a single meter (not a chart) */
+.vos-pipe-hero {
+  background: var(--vos-surface);
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+  box-shadow: var(--vos-shadow);
+  padding: 20px 24px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+.vos-pipe-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vos-muted);
+}
+.vos-pipe-big {
+  font-family: var(--vos-mono);
+  font-size: 54px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin: 6px 0 4px;
+  color: var(--vos-text);
+}
+.vos-pipe-big span {
+  font-size: 26px;
+  color: var(--vos-muted);
+}
+.vos-pipe-sub {
+  font-size: 13px;
+  color: var(--vos-muted);
+}
+.vos-pipe-figs {
+  display: flex;
+  gap: 26px;
+}
+.vos-pipe-fig {
+  text-align: right;
+}
+.vos-pipe-fv {
+  font-family: var(--vos-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--vos-text);
+}
+.vos-pipe-fl {
+  font-size: 11px;
+  color: var(--vos-muted);
+  margin-top: 1px;
+}
+
+/* stage legend: the four meters every belief carries */
+.vos-pipe-stages {
+  display: flex;
+  align-items: stretch;
+  margin: 0 0 10px;
+  flex-wrap: wrap;
+}
+.vos-pipe-stage {
+  flex: 1;
+  min-width: 150px;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 8px 12px;
+}
+.vos-pipe-idx {
+  font-family: var(--vos-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--vos-accent);
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.vos-pipe-idx-open {
+  background: transparent;
+  color: var(--vos-accent-text);
+  border: 1px dashed var(--vos-accent);
+}
+.vos-pipe-skname {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.vos-pipe-skdesc {
+  font-size: 11px;
+  color: var(--vos-muted);
+  line-height: 1.35;
+}
+.vos-pipe-arrow {
+  align-self: center;
+  color: var(--vos-border-strong);
+  flex: none;
+  padding: 0 2px;
+}
+
+/* the board */
+.vos-pipe-board {
+  overflow: visible;
+}
+.vos-pipe-boardhead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vos-border);
+}
+.vos-pipe-bt {
+  font-size: 13px;
+  font-weight: 600;
+}
+.vos-pipe-bt span {
+  color: var(--vos-muted);
+  font-weight: 400;
+}
+.vos-pipe-sortnote {
+  font-size: 11.5px;
+  color: var(--vos-muted);
+}
+
+.vos-pipe-row {
+  display: grid;
+  grid-template-columns: 4px minmax(200px, 1.4fr) minmax(280px, 2fr) 92px;
+  align-items: center;
+  gap: 14px;
+  border-bottom: 1px solid var(--vos-border);
+  position: relative;
+}
+.vos-pipe-row:last-child {
+  border-bottom: 0;
+}
+.vos-pipe-row:hover {
+  background: var(--vos-surface-2);
+}
+.vos-pipe-stripe {
+  align-self: stretch;
+}
+
+.vos-pipe-belief {
+  text-align: left;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  padding: 14px 0;
+  display: block;
+}
+.vos-pipe-stmt {
+  display: block;
+  font-size: 13.5px;
+  font-weight: 550;
+  line-height: 1.35;
+  color: var(--vos-text);
+}
+.vos-pipe-belief:hover .vos-pipe-stmt {
+  color: var(--vos-accent-text);
+}
+.vos-pipe-bmeta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 5px;
+  font-size: 11px;
+  color: var(--vos-faint);
+}
+.vos-pipe-impact-track {
+  width: 46px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--vos-surface-2);
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+}
+.vos-pipe-impact-track i {
+  display: block;
+  height: 100%;
+  background: var(--vos-border-strong);
+}
+
+/* the connected four-meter track */
+.vos-pipe-prog {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  padding: 14px 0;
+}
+.vos-pipe-seg {
+  flex: 1;
+  min-width: 0;
+}
+.vos-pipe-track {
+  height: 22px;
+  border-radius: 4px;
+  background: var(--vos-surface-2);
+  position: relative;
+  overflow: hidden;
+}
+.vos-pipe-track i {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 4px;
+}
+.vos-pipe-fill-accent {
+  background: var(--vos-accent);
+}
+.vos-pipe-known {
+  background: linear-gradient(
+    90deg,
+    var(--vos-crit-weak),
+    var(--vos-surface-2) 50%,
+    var(--vos-good-weak)
+  );
+}
+.vos-pipe-known-mid {
+  position: absolute;
+  left: 50%;
+  top: 2px;
+  bottom: 2px;
+  width: 1px;
+  background: var(--vos-border-strong);
+}
+.vos-pipe-known-pos {
+  left: 50%;
+  background: var(--vos-good);
+  border-radius: 0 4px 4px 0;
+}
+.vos-pipe-known-neg {
+  right: 50%;
+  left: auto;
+  background: var(--vos-crit);
+  border-radius: 4px 0 0 4px;
+}
+.vos-pipe-cap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 5px;
+}
+.vos-pipe-capn {
+  font-family: var(--vos-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--vos-faint);
+}
+.vos-pipe-capv {
+  font-size: 11px;
+  font-weight: 600;
+}
+.vos-pipe-flag {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vos-crit);
+  background: var(--vos-crit-weak);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+/* risk cell */
+.vos-pipe-risk {
+  text-align: right;
+  padding-right: 16px;
+}
+.vos-pipe-rv {
+  font-family: var(--vos-mono);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+}
+.vos-pipe-rl {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--vos-muted);
+}
+.vos-pipe-conf {
+  margin-top: 5px;
+  font-family: var(--vos-mono);
+  font-size: 10.5px;
+}
+
+/* hover actions */
+.vos-pipe-actions {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transition: opacity 0.12s;
+  background: linear-gradient(90deg, transparent, var(--vos-surface-2) 22%);
+  padding-left: 40px;
+}
+.vos-pipe-row:hover .vos-pipe-actions,
+.vos-pipe-row:focus-within .vos-pipe-actions {
+  opacity: 1;
+}
+
+/* resolved / hidden */
+.vos-pipe-resolved {
+  margin-top: 14px;
+}
+.vos-pipe-disclosure {
+  background: var(--vos-surface);
+  border: 1px dashed var(--vos-border-strong);
+  border-radius: var(--vos-radius);
+  padding: 12px 16px;
+  font-size: 13px;
+  color: var(--vos-muted);
+  cursor: pointer;
+  list-style: none;
+}
+.vos-pipe-disclosure::-webkit-details-marker {
+  display: none;
+}
+.vos-pipe-disclosure::before {
+  content: "▸";
+  display: inline-block;
+  margin-right: 8px;
+  transition: transform 0.15s;
+}
+.vos-pipe-resolved[open] .vos-pipe-disclosure::before {
+  transform: rotate(90deg);
+}
+.vos-pipe-disclosure:hover {
+  border-color: var(--vos-accent);
+  color: var(--vos-accent-text);
+}
+.vos-pipe-resolved-body {
+  margin-top: 8px;
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+  overflow: hidden;
+  background: var(--vos-surface);
+}
+.vos-pipe-rrow {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) 90px 120px;
+  gap: 12px;
+  align-items: center;
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--vos-border);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.vos-pipe-rrow:last-child {
+  border-bottom: 0;
+}
+.vos-pipe-rrow:hover {
+  background: var(--vos-surface-2);
+}
+.vos-pipe-rstmt {
+  font-size: 13px;
+  color: var(--vos-muted);
+  text-decoration: line-through;
+  text-decoration-color: var(--vos-border-strong);
+}
+.vos-pipe-retired {
+  font-family: var(--vos-mono);
+  font-size: 12px;
+  color: var(--vos-good);
+  text-align: right;
+}
+.vos-pipe-foot {
+  margin-top: 16px;
+  line-height: 1.6;
+}
+.vos-pipe-foot b {
+  color: var(--vos-text);
+  font-weight: 600;
+}
+
+@media (max-width: 760px) {
+  .vos-pipe-row {
+    grid-template-columns: 4px 1fr;
+  }
+  .vos-pipe-prog,
+  .vos-pipe-risk {
+    grid-column: 2;
+    padding-top: 0;
+    text-align: left;
+  }
+  .vos-pipe-actions {
+    position: static;
+    opacity: 1;
+    transform: none;
+    background: none;
+    padding: 0 0 14px 2px;
+    grid-column: 2;
+  }
+}
+
+/* ── front door: "next move" (OPS-1304) ────────────────────────────────── */
+.vos-next {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* The hero — one belief, one act, centred. */
+.vos-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+  padding: 34px 28px;
+}
+.vos-hero-kill {
+  border-color: var(--vos-crit);
+}
+.vos-hero-eyebrow {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vos-faint);
+  font-weight: 700;
+}
+.vos-hero-belief {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--vos-text);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  max-width: 30ch;
+}
+.vos-hero-belief:hover {
+  color: var(--vos-accent-text);
+}
+.vos-hero-act {
+  height: 40px;
+  padding: 0 22px;
+  font-size: 14px;
+}
+.vos-hero-agent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.vos-agent-note {
+  font-size: 12px;
+  color: var(--vos-muted);
+}
+
+/* Risk chip — seen, not read: a bar and a plain label, no number. */
+.vos-riskchip {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+.vos-riskchip .vos-risk-bar {
+  width: 84px;
+  height: 7px;
+}
+.vos-riskchip-label {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+/* Why-this panel adapts the drawer's reveal to a standalone card. */
+.vos-next-why {
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+  margin-top: 0;
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+.vos-why-reason {
+  font-size: 13px;
+  color: var(--vos-text);
+  margin: 0;
+}
+.vos-why-formula {
+  font-size: 12.5px;
+  color: var(--vos-muted);
+  margin: 0;
+}
+.vos-why-rank {
+/* ── Record page (OPS-1286) ──────────────────────────────────────────────── */
+.vos-record-head {
+  align-items: flex-start;
+}
+.vos-pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+.vos-record-cols {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.vos-meter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+.vos-meter {
+  padding: 14px;
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+  background: var(--vos-surface);
+}
+.vos-meter-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.vos-meter-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vos-muted);
+}
+.vos-meter-val {
+  font-family: var(--vos-mono);
+  font-size: 28px;
+  font-weight: 600;
+  margin: 6px 0;
+}
+.vos-section-title {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.vos-human-field {
+  margin-bottom: 12px;
+}
+.vos-human-field p,
+.vos-record-prose p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--vos-text);
+  margin: 4px 0 0;
+}
+.vos-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+}
+.vos-panel {
+  padding: 14px;
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+  background: var(--vos-surface);
+}
+.vos-panel-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.vos-backlinks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.vos-why-rank li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12.5px;
+  color: var(--vos-muted);
+}
+.vos-why-rank-top {
+  color: var(--vos-text);
+  font-weight: 600;
+}
+.vos-why-rank-title {
+.vos-backlink {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 8px;
+  border-radius: 8px;
+  font: inherit;
+  color: var(--vos-text);
+  text-align: left;
+  cursor: pointer;
+}
+.vos-backlink:hover {
+  background: var(--vos-bg);
+}
+.vos-backlink-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vos-why-rank-score {
+  font-family: var(--vos-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Stage stepper (Framed→Planned→Tested→Known) — hidden behind Why this. */
+.vos-stepper {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.vos-step {
+  font-size: 11px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--vos-surface-2);
+  color: var(--vos-faint);
+}
+.vos-step-done {
+  color: var(--vos-muted);
+}
+.vos-step-at {
+  background: var(--vos-accent-weak);
+  color: var(--vos-accent-text);
+  font-weight: 700;
+}
+
+/* On deck — title-only runners-up + an act pill. */
+.vos-ondeck {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.vos-ondeck-row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 10px 12px;
+  background: var(--vos-surface);
+  border: 1px solid var(--vos-border);
+  border-radius: var(--vos-radius);
+}
+.vos-ondeck-row .vos-risk-bar {
+  flex: 0 0 46px;
+}
+.vos-ondeck-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--vos-text);
+  font: inherit;
+  font-size: 13px;
+}
+.vos-ondeck-title:hover {
+  color: var(--vos-accent-text);
+}
+.vos-ondeck-act {
+  cursor: pointer;
+  border: none;
+  font: inherit;
+}
+
+.vos-override {
+  align-self: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--vos-muted);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 4px;
+}
+.vos-override:hover {
+  color: var(--vos-accent-text);
+}
+.vos-linkbtn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--vos-accent-text);
+  font: inherit;
+  font-weight: 600;
+}
+
+/* Step-in form extras (score-impact slider + decision radios). */
+.vos-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.vos-slider {
+  flex: 1;
+  accent-color: var(--vos-accent);
+}
+.vos-slider-num {
+  width: 72px;
+  flex: 0 0 auto;
+}
+.vos-field-hint {
+  font-size: 11.5px;
+  color: var(--vos-muted);
+  margin: 6px 0 0;
+}
+.vos-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--vos-text);
+  margin-top: 6px;
+  cursor: pointer;
+}
+.vos-radio input {
+  margin-top: 2px;
+  accent-color: var(--vos-accent);
+.vos-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+.vos-chip-k {
+  opacity: 0.7;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.vos-bars {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.vos-bar-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--vos-border);
+  border-radius: 8px;
+  font-size: 13px;
+}
+.vos-journey-host {
+  margin-top: 24px;
+  padding: 16px;
+  border: 1px dashed var(--vos-border-strong);
+  border-radius: var(--vos-radius);
+}
+
+/* ── List surface: tabs, controls, groups (OPS-1287) ─────────────────────── */
+.vos-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 16px 0 12px;
+  border-bottom: 1px solid var(--vos-border);
+}
+.vos-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  background: none;
+  padding: 8px 12px;
+  margin-bottom: -1px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--vos-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.vos-tab:hover {
+  color: var(--vos-text);
+}
+.vos-tab.is-active {
+  color: var(--vos-text);
+  border-bottom-color: var(--vos-accent);
+  font-weight: 600;
+}
+.vos-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--vos-crit);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
+.vos-view-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.vos-saved-views {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.vos-saved-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vos-muted);
+}
+.vos-saved-view {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--vos-border-strong);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.vos-saved-apply {
+  border: none;
+  background: var(--vos-bg);
+  padding: 3px 10px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--vos-text);
+  cursor: pointer;
+}
+.vos-saved-apply:hover {
+  color: var(--vos-accent-text);
+}
+.vos-saved-x {
+  border: none;
+  border-left: 1px solid var(--vos-border);
+  background: var(--vos-bg);
+  padding: 3px 8px;
+  font: inherit;
+  color: var(--vos-muted);
+  cursor: pointer;
+}
+.vos-saved-x:hover {
+  color: var(--vos-crit);
+}
+.vos-search {
+  max-width: 260px;
+  flex: 1 1 180px;
+}
+.vos-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--vos-muted);
+}
+.vos-control select {
+  width: auto;
+}
+.vos-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.vos-group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vos-muted);
+}
+.vos-group-n {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--vos-bg);
+  border: 1px solid var(--vos-border);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vos-muted);
+}
+
+/* ── Glossary auto-linking (OPS-1285) ─────────────────────────────────────── */
+/* A dotted inline link; its definition-preview popover shows on hover/focus. */
+.vos-gloss {
+  position: relative;
+  display: inline;
+}
+.vos-gloss-term {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: help;
+  text-decoration: underline dotted var(--vos-accent);
+  text-underline-offset: 2px;
+}
+.vos-gloss-term:hover,
+.vos-gloss-term:focus-visible {
+  color: var(--vos-accent-text);
+}
+.vos-gloss-pop {
+  position: absolute;
+  z-index: 40;
+  left: 0;
+  top: calc(100% + 6px);
+  width: max-content;
+  max-width: 320px;
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--vos-surface);
+  border: 1px solid var(--vos-border-strong);
+  border-radius: var(--vos-radius);
+  box-shadow: var(--vos-shadow-lg);
+  text-align: left;
+  white-space: normal;
+}
+.vos-gloss:hover .vos-gloss-pop,
+.vos-gloss:focus-within .vos-gloss-pop {
+  display: flex;
+}
+.vos-gloss-pop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.vos-gloss-pop-def {
+  font-size: 13px;
+  color: var(--vos-text);
+  line-height: 1.5;
+}
+.vos-gloss-pop-neighbours {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--vos-border);
+}
+.vos-gloss-pop-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vos-muted);
+  width: 100%;
+}
+.vos-gloss-chip {
+  border: 1px solid var(--vos-border-strong);
+  background: var(--vos-bg);
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 12px;
+  color: var(--vos-text);
+  cursor: pointer;
+}
+.vos-gloss-chip:hover {
+  border-color: var(--vos-accent);
+  color: var(--vos-accent-text);
+}