/* Tokens the verify screens add on top of the host's :root — declared high
   enough to reach the drawer and modal, which sit outside .body.view-verify. */
:root, .app {
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --blue: #6bc7f0; --purple: #b08ce8; --red-soft: rgba(217,140,140,0.12);
}
.body.view-verify { font-size: 13px; }
/* Karya Verify — workspace content only. Sidebar, status bar and tokens come from the host page. */
.body.view-verify { display: none; padding: 22px; overflow: auto; }
.app[data-view="verify"] .body.view-verify { display: block; }
.app[data-view="verify"] .body.view-project, .app[data-view="verify"] .body.view-dashboard { display: none; }
.app[data-view="verify"] .topbar { display: none; }
/* A flush pane must claim the main column's height, or its flex:1 child collapses. */
.body.view-verify.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.app[data-view="verify"] .body.view-verify.flush { display: flex; }
.body.view-verify, .body.view-verify button { font-family: 'Space Grotesk', system-ui, sans-serif; }
.body.view-verify .vf-av { width: 22px; height: 22px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; font-weight: 600; flex: none; }
/* ---- controls ---- */
.vf-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .14s; }
.vf-btn:hover { border-color: var(--border-hover); background: var(--hover); }
.vf-btn.vf-solid { background: var(--text); border-color: var(--text); color: #0a0a0b; font-weight: 600; }
.vf-btn.vf-solid:hover { filter: brightness(0.94); background: var(--text); }
.vf-btn.vf-solid:disabled { opacity: 0.35; cursor: default; filter: none; }
.vf-btn.vf-ghost { border-color: transparent; color: var(--text-dim); }
.vf-btn.vf-ghost:hover { color: var(--text); }
.vf-btn.vf-danger { color: var(--red); }
.vf-btn.vf-danger:hover { border-color: var(--red); }
.vf-btn svg { width: 13px; height: 13px; }
.vf-btn.vf-sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.vf-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.vf-pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.vf-pill.passing { background: var(--accent-soft); color: var(--accent); }
.vf-pill.failing { background: var(--red-soft); color: var(--red); }
.vf-pill.review { background: var(--amber-soft); color: var(--amber); }
.vf-pill.neutral { background: var(--hover-2); color: var(--text-dim); }
.vf-pill.healthy { background: var(--accent-soft); color: var(--accent); }
.vf-pill.degraded { background: var(--amber-soft); color: var(--amber); }
.vf-pill.blocked { background: var(--red-soft); color: var(--red); }
.vf-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); white-space: nowrap; }
.vf-chip i { width: 5px; height: 5px; border-radius: 1px; }
.vf-chip.svc i { background: var(--purple); } .vf-chip.data i { background: var(--blue); } .vf-chip.queue i { background: var(--amber); } .vf-chip.ext i { background: var(--text-muted); }
.vf-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.vf-seg button { height: 30px; padding: 0 12px; border: 0; background: transparent; color: var(--text-muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.vf-seg button + button { border-left: 1px solid var(--border); }
.vf-seg button.on { background: var(--hover-2); color: var(--text); }
.vf-pick { position: relative; display: inline-block; }
.vf-pick-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; }
.vf-pick-btn:hover { border-color: var(--border-hover); }
.vf-pick-btn .vf-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-muted); }
.vf-pick-btn svg { width: 11px; height: 11px; color: var(--text-muted); }
.vf-pick-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px; display: none; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.vf-pick.open .vf-pick-menu { display: block; }
.vf-pick-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.vf-pick-opt:hover { background: var(--hover); color: var(--text); }
.vf-pick-opt.on { color: var(--text); background: var(--hover-2); }
.vf-pick-opt .vf-m { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-input, textarea.vf-input { width: 100%; height: 32px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 13px; outline: none; }
textarea.vf-input { height: auto; min-height: 96px; padding: 10px 11px; resize: vertical; line-height: 1.55; }
.vf-input:focus { border-color: var(--accent); }
.vf-field { display: flex; flex-direction: column; gap: 6px; }
.vf-field label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.vf-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; min-width: 240px; }
.vf-search input { flex: 1; border: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 12.5px; outline: none; }
.vf-search svg { width: 13px; height: 13px; color: var(--text-muted); }

/* ---- page chrome ---- */
.vf-ph { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.vf-ph h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.vf-ph p { margin: 4px 0 0; color: var(--text-dim); font-size: 12.5px; }
.vf-ph .vf-sp { flex: 1; }
.vf-ph .vf-right { display: flex; align-items: center; gap: 8px; }
.vf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.vf-kpi { border: 1px solid var(--border-soft); background: var(--panel); padding: 12px 14px; }
.vf-kpi .vf-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.vf-kpi .vf-v { font-family: var(--mono); font-size: 20px; font-weight: 500; margin-top: 6px; }
.vf-kpi .vf-s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.vf-kpi .vf-v.amber { color: var(--amber); } .vf-kpi .vf-v.red { color: var(--red); } .vf-kpi .vf-v.green { color: var(--accent); }

/* ---- tables (agents-roster treatment) ---- */
.vf-tbl { background: var(--bg); border: 1px solid var(--border-soft); }
.vf-thead { display: grid; align-items: center; gap: 14px; padding: 11px 16px; background: var(--panel); border-bottom: 1px solid rgba(150,160,165,0.14); font: 600 7.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5e686c; }
.vf-trow { display: grid; align-items: center; gap: 14px; margin: 0 8px; padding: 10px 7px; border: 1px solid rgba(150,160,165,0.07); border-left: 2px solid var(--tc, rgba(150,160,165,0.14)); border-radius: 3px; cursor: pointer; transition: background .12s, border-color .12s; }
.vf-thead + .vf-trow { margin-top: 8px; } .vf-trow + .vf-trow { margin-top: 4px; } .vf-trow:last-child { margin-bottom: 8px; }
.vf-trow:hover { background: rgba(150,160,165,0.06); border-color: rgba(150,160,165,0.16); border-left-color: var(--tc, rgba(150,160,165,0.14)); }
.vf-trow.sel { background: rgba(150,160,165,0.08); }
.vf-trow > * { min-width: 0; }
.vf-tc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vf-tc-name .vf-n { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-tc-name .vf-s { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Base tracks — must sit outside every container query. */
.tests .vf-thead, .tests .vf-trow { grid-template-columns: 26px minmax(180px,2.6fr) 76px minmax(130px,1.2fr) minmax(104px,1fr) 112px 30px; }
/* Test names are sentences, not identifiers — let them wrap instead of clipping. */
.vf-tbl.tests .vf-tc-name { align-items: flex-start; gap: 9px; }
.vf-tbl.tests .vf-tc-proj { padding-top: 2px; }
.vf-tbl.tests .vf-tc-name .vf-n { white-space: normal; text-overflow: clip; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Status column — colour lives here, not on the row edge */
.vf-trow.vf-nostripe { border-left-color: var(--border-soft); }
.vf-trow.vf-nostripe:hover { border-left-color: rgba(150,160,165,0.16); }
.vf-tc-status { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.vf-tc-status > span { min-width: 0; text-wrap: pretty; }
.vf-tc-status svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.vf-tc-status.ok svg { color: var(--accent); }
.vf-tc-status.rev svg { color: var(--amber); }
.vf-tc-status.att svg { color: var(--red); }
@container (max-width: 820px) {
  /* Shed columns fold into a line under the test name. */
  .changes .vf-thead > :nth-child(5), .changes .vf-trow > :nth-child(5) { display: none; }
  .tests .vf-thead > :nth-child(5), .tests .vf-trow > :nth-child(5) { display: none; }
  .tests .vf-thead, .tests .vf-trow { grid-template-columns: 26px minmax(150px,2.6fr) 76px minmax(120px,1.1fr) 112px 30px; }
  .changes .vf-thead, .changes .vf-trow { grid-template-columns: minmax(180px,2fr) minmax(100px,1fr) 96px minmax(100px,1fr); }
}
@container (max-width: 660px) {
  .tests .vf-thead > :nth-child(4), .tests .vf-trow > :nth-child(4),
  .changes .vf-thead > :nth-child(4), .changes .vf-trow > :nth-child(4) { display: none; }
  .tests .vf-thead, .tests .vf-trow { grid-template-columns: 26px minmax(0,2.6fr) 76px 112px 30px; }
  .changes .vf-thead, .changes .vf-trow { grid-template-columns: minmax(0,2fr) minmax(90px,1fr) 96px; }
}
@container (max-width: 480px) {
  .tests .vf-thead > :nth-child(3), .tests .vf-trow > :nth-child(3) { display: none; }
  .tests .vf-thead, .tests .vf-trow { grid-template-columns: 26px minmax(0,1fr) 112px 30px; }
}
/* Softer table typography — lower contrast, lighter weights */
.body.view-verify .vf-tbl .vf-thead { font: 500 8px var(--mono); letter-spacing: 0.12em; color: #616b6f; }
.body.view-verify .vf-tbl .vf-tc-name .vf-n { font-size: 12.5px; font-weight: 450; color: #d2d9db; letter-spacing: 0.005em; }
.body.view-verify .vf-tbl .vf-tc-meta { font-size: 11.5px; color: #7b858a; letter-spacing: 0.01em; }
.body.view-verify .vf-tbl .vf-tc-status { color: #98a2a6; }
.body.view-verify .vf-tbl .vf-tc-proj { color: #6d777b; }
.body.view-verify .vf-tbl .vf-tc-fold { color: #6d777b; }

.vf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 30px; gap: 10px; }
.vf-empty .vf-mark { width: 44px; height: 44px; border: 1px dashed var(--border); border-radius: 12px; display: grid; place-items: center; color: var(--text-muted); margin-bottom: 10px; }
.vf-empty .vf-mark svg { width: 20px; height: 20px; }
.vf-empty h2 { margin: 0; font-size: 20px; font-weight: 600; }
.vf-empty p { margin: 0; max-width: 420px; color: var(--text-dim); line-height: 1.6; text-wrap: pretty; }
.vf-empty .vf-acts { display: flex; gap: 8px; margin-top: 14px; }

/* ---- inbox ---- */
.vf-inbox { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; border: 1px solid var(--border-soft); background: var(--panel); }
.vf-ib { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.vf-ib:last-child { border-bottom: 0; }
.vf-ib:hover { background: var(--hover); }
.vf-ib .vf-ico { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; border: 1px solid var(--border-soft); color: var(--text-dim); }
.vf-ib .vf-ico svg { width: 14px; height: 14px; }
.vf-ib .vf-ico.review { color: var(--amber); border-color: rgba(205,164,92,0.35); }
.vf-ib .vf-ico.fail { color: var(--red); border-color: rgba(217,140,140,0.35); }
.vf-ib .vf-ico.pass { color: var(--accent); border-color: rgba(95,208,160,0.35); }
.vf-ib .vf-t { font-size: 13px; color: var(--text); }
.vf-ib .vf-d { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.vf-ib .vf-m span { white-space: nowrap; }
.vf-ib .vf-m { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 7px; display: flex; gap: 12px; }
.vf-ib .vf-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vf-ib .vf-when { font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-ib.read { opacity: 0.55; }

/* ---- systems ---- */
.vf-syscards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.vf-syscard { border: 1px solid var(--border-soft); background: var(--panel); padding: 16px; cursor: pointer; transition: border-color .14s, background .14s; display: flex; flex-direction: column; gap: 12px; }
.vf-syscard:hover { border-color: var(--border-hover); background: var(--hover); }
.vf-syscard .vf-hd { display: flex; align-items: center; gap: 10px; }
.vf-syscard .vf-hd h3 { margin: 0; font-size: 14.5px; font-weight: 600; flex: 1; }
.vf-syscard .vf-repos { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.vf-syscard .vf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vf-syscard .vf-st .vf-k { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.vf-syscard .vf-st .vf-v { font-family: var(--mono); font-size: 15px; margin-top: 3px; }
.vf-syscard .vf-st .vf-v.amber { color: var(--amber); }
.vf-syscard .vf-ft { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-syscard .vf-ft .vf-sp { flex: 1; }
.vf-topo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.vf-topo-tests { min-height: 0; overflow-y: auto; border-top: 1px solid var(--border-soft); padding: 0 0 18px; }
.vf-topo-none { padding: 26px 22px; font-size: 12.5px; color: var(--text-muted); }
.vf-topo-stage { min-height: 260px; }
.vf-topo-stage { position: relative; overflow: auto; background: radial-gradient(ellipse at 50% 40%, rgba(150,160,165,0.05), transparent 60%); }
.vf-topo-stage svg { display: block; min-width: 760px; }
.vf-topo-stage { min-height: 260px; }
.vf-topo-side { border-left: 1px solid var(--border-soft); background: var(--panel); overflow-y: auto; padding: 16px; }
.vf-topo-side h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.vf-topo-side .vf-blk { margin-bottom: 18px; }
.vf-tw { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.vf-tw:last-child { border-bottom: 0; }
.vf-tw i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.vf-tw .vf-s { margin-left: auto; white-space: nowrap; flex: none; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-tiers { position: absolute; left: 0; right: 0; top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 20px; pointer-events: none; }
.vf-tiers span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.vf-node { cursor: pointer; }
.vf-node rect { fill: var(--panel); stroke: var(--border); stroke-width: 1; transition: stroke .14s; }
.vf-node:hover rect, .vf-node.sel rect { stroke: var(--text-dim); }
.vf-node.review rect { stroke: var(--amber); }
.vf-node.fail rect { stroke: var(--red); }
.vf-node text { font-family: var(--sans); font-size: 11.5px; fill: var(--text); }
.vf-node .vf-sub { font-family: var(--mono); font-size: 8.5px; fill: var(--text-muted); }
.vf-node .vf-tag { font-family: var(--mono); font-size: 7.5px; fill: var(--amber); }
.vf-node .vf-flag { r: 3.5; fill: var(--amber); }
.vf-node.fail .vf-flag { fill: var(--red); }
.vf-edge { stroke: rgba(150,160,165,0.28); stroke-width: 1; fill: none; }
.vf-edge.q { stroke-dasharray: 3 4; }
.vf-topo-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 22px; border-bottom: 1px solid var(--border-soft); min-width: 0; overflow: hidden; }
.vf-topo-hd .vf-sp { flex: 1 1 0; min-width: 0; }
/* The picker is the one flexible thing here; the buttons must stay reachable. */
.vf-topo-hd .vf-pick { flex: 0 1 auto; min-width: 170px; }
.vf-topo-hd .vf-pick-btn { max-width: 100%; }
.vf-topo-hd .vf-pick-btn > :not(svg):not(.vf-k) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vf-topo-hd .vf-btn { flex: none; }
.vf-topo-hd .vf-topo-acts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.vf-topo-hd .vf-pill { flex: none; }
.vf-topo-hd .vf-meta { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-muted); display: flex; gap: 14px; }
/* Shed the least-useful header facts before anything clips */
@container (max-width: 980px) { .vf-topo-hd .vf-meta > span:nth-child(3) { display: none; } }
@container (max-width: 880px) { .vf-topo-hd .vf-meta { display: none; } }
@container (max-width: 560px) { .vf-topo-hd .vf-pill { display: none; } }

/* ---- review drawer ---- */
.vf-drawer { position: fixed; top: 0; right: 0; bottom: 26px; width: 520px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--border); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.16,.84,.32,1); }
.vf-drawer.open { transform: none; }
.vf-drawer-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.vf-drawer-hd .vf-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.vf-drawer-hd h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-drawer-hd .vf-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.vf-drawer-hd .vf-x:hover { color: var(--text); }
.vf-drawer-bd { flex: 1; overflow-y: auto; padding: 18px; }
.vf-drawer-ft { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.vf-drawer-ft .vf-sp { flex: 1; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-sec { margin-bottom: 20px; }
.vf-sec h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.vf-sec p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.vf-pr { border: 1px solid var(--border-soft); background: var(--bg); padding: 12px 14px; }
.vf-pr .vf-t { font-size: 13px; color: var(--text); }
.vf-pr .vf-m { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); margin-top: 6px; }
.vf-pr .vf-m span { white-space: nowrap; }
.vf-vhero { flex-wrap: wrap; }
.vf-tc-name .vf-n { min-width: 0; }
.vf-pr .vf-diff { display: flex; gap: 10px; margin-top: 10px; font-family: var(--mono); font-size: 10px; }
.vf-pr .vf-diff .vf-a { color: var(--accent); } .vf-pr .vf-diff .vf-d { color: var(--red); }
.vf-code { border: 1px solid var(--border-soft); background: var(--bg); padding: 12px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--text-dim); white-space: pre; overflow-x: auto; }
.vf-code .vf-kw { color: var(--purple); } .vf-code .vf-fn { color: var(--blue); } .vf-code .vf-st { color: var(--accent); } .vf-code .vf-cm { color: var(--text-muted); }
.vf-steps { display: flex; flex-direction: column; gap: 0; }
.vf-step { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.vf-step:last-child { border-bottom: 0; }
.vf-step i { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); justify-self: center; }
.vf-step.fail i { background: var(--red); } .vf-step.skip i { background: var(--text-muted); opacity: 0.5; }
.vf-step .vf-lat { font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-step .vf-n { color: var(--text-dim); }
.vf-step.fail .vf-n { color: var(--text); }
.vf-callout { border: 1px solid rgba(217,140,140,0.35); background: var(--red-soft); padding: 12px 14px; }
.vf-callout .vf-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.vf-callout p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.vf-callout .vf-mono { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* ---- verdicts ---- */
.vf-verdicts { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); gap: 14px; align-items: start; }
#vBody { container-type: inline-size; }
@container (max-width: 720px) { .vf-verdicts { grid-template-columns: minmax(0,1fr); } }
.vf-vlist { border: 1px solid var(--border-soft); background: var(--panel); }
.vf-vrow { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.vf-vrow:last-child { border-bottom: 0; }
.vf-vrow:hover, .vf-vrow.sel { background: var(--hover); }
.vf-vrow i { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.vf-vrow.fail i { background: var(--red); } .vf-vrow.running i { background: var(--amber); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.vf-vrow .vf-t { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-vrow .vf-m { font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); margin-top: 3px; }
.vf-vdetail { border: 1px solid var(--border-soft); background: var(--panel); padding: 18px; }
.vf-vhero { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border-soft); background: var(--bg); margin-bottom: 18px; }
.vf-vhero .vf-big { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; }
.vf-vhero .vf-big.pass { color: var(--accent); } .vf-vhero .vf-big.fail { color: var(--red); }
.vf-vhero .vf-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.vf-vhero .vf-stat { margin-left: auto; text-align: right; white-space: nowrap; flex: none; font-family: var(--mono); font-size: 10px; color: var(--text-muted); line-height: 1.7; }
.vf-vhero .vf-stat b { color: var(--text); font-weight: 500; }

/* ---- modal ---- */
.vf-modal-back { position: fixed; inset: 0; background: rgba(8,8,10,0.78); backdrop-filter: blur(6px); z-index: 100; display: none; align-items: center; justify-content: center; }
.vf-modal-back.open { display: flex; }
.vf-modal { width: 560px; max-width: 92vw; background: var(--panel); border: 1px solid var(--border); position: relative; }
.vf-modal .vf-tick { position: absolute; width: 6px; height: 6px; border: 1px solid var(--text-dim); }
.vf-modal .vf-tick.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; } .vf-modal .vf-tick.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.vf-modal-hd { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.vf-modal-hd .vf-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.vf-modal-hd .vf-t { font-size: 14px; font-weight: 600; }
.vf-modal-hd .vf-x { margin-left: auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.vf-modal-bd { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.vf-modal-ft { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-soft); }
.vf-modal-ft .vf-sp { flex: 1; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
.vf-twinpick { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-twinpick .vf-chip { cursor: pointer; height: 24px; }
.vf-twinpick .vf-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.vf-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.vf-toast { position: fixed; left: 50%; bottom: 44px; transform: translate(-50%, 10px); background: var(--panel); border: 1px solid var(--border); padding: 8px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--text); opacity: 0; transition: all .2s; z-index: 200; pointer-events: none; }
.vf-toast.vf-show { opacity: 1; transform: translate(-50%, 0); }

/* ---- settings ---- */
.vf-settings { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 24px; }
.vf-sn a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text-dim); text-decoration: none; font-size: 12.5px; cursor: pointer; }
.vf-sn a.on { background: var(--hover-2); color: var(--text); }
.vf-sn .vf-h { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); padding: 12px 10px 6px; }
.vf-gn { max-width: 680px; }
.vf-gn-group { border: 1px solid var(--border-soft); background: var(--panel); padding: 16px 18px; margin-bottom: 14px; }
.vf-gn-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.vf-gn-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.vf-gn-row:first-of-type { border-top: 0; }
.vf-gn-row .vf-l { flex: 1; } .vf-gn-row .vf-lbl { font-size: 13px; } .vf-gn-row .vf-hint { margin-top: 2px; }
.vf-sw { width: 32px; height: 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent; position: relative; cursor: pointer; flex: none; }
.vf-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--text-muted); transition: all .15s; }
.vf-sw.on { border-color: var(--accent); background: var(--accent-soft); } .vf-sw.on::after { left: 16px; background: var(--accent); }
.vf-intg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.vf-intg .vf-it { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); background: var(--panel); }
.vf-intg .vf-it .vf-lg { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.vf-intg .vf-it .vf-n { font-size: 13px; } .vf-intg .vf-it .vf-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vf-intg .vf-it .vf-r { margin-left: auto; }
.vf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Inbox metadata: application names are longer than the host slots assume
   (Happy Path puts a short handle here), so guard them inside verify only. */
.body.view-verify .ib-meta > span { white-space: nowrap; }
.body.view-verify .ib-meta > span:first-child { flex: none; }
.body.view-verify .ib-meta > span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.body.view-verify .ib-detail-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.body.view-verify .ib-detail-when { white-space: nowrap; flex: none; }

/* Inbox: below the width where two panes fit, the list takes the full column
   and the detail stacks under it (matching how the tables and topology
   already shed). Scoped to the verify body so the host inbox is untouched. */
@container (max-width: 760px) {
  .body.view-verify .ib-split { grid-template-columns: minmax(0,1fr); }
  .body.view-verify .ib-pane { border-top: 1px solid var(--border-soft); }
  .body.view-verify .ib-page { padding-left: 18px; padding-right: 18px; }
}
/* With nothing selected there is no detail worth stacking. */
@container (max-width: 760px) {
  .body.view-verify .ib-split:not(.has-sel) .ib-pane { display: none; }
}

/* Screenshots — collapsible, one capture at a time */
#vDrawer .vf-shots { border: 1px solid var(--border-soft); background: var(--bg); }
#vDrawer .vf-shots-hd { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border: 0; background: transparent; color: var(--text-muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
#vDrawer .vf-shots-hd:hover { color: var(--text); }
#vDrawer .vf-shots-chev { width: 11px; height: 11px; flex: none; transition: transform .16s; }
#vDrawer .vf-shots.open .vf-shots-chev { transform: rotate(90deg); }
#vDrawer .vf-shots-bd { padding: 0 13px 13px; }

#vDrawer .vf-flash .vf-code { box-shadow: 0 0 0 1px var(--accent); transition: box-shadow .9s ease; }

/* Run control */
.body.view-verify .vf-run { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .14s; }
.body.view-verify .vf-run:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.body.view-verify .vf-run:disabled { opacity: 0.5; cursor: default; }
.body.view-verify .vf-run svg { width: 10px; height: 10px; }
.body.view-verify .vf-trow.vf-running { border-left-color: var(--amber); }
.body.view-verify .vf-trow.vf-running .vf-run { border-color: var(--amber); color: var(--amber); animation: vfRun 1s linear infinite; }
@keyframes vfRun { 50% { opacity: .35; } }

/* The project picker drops over the diagram below it. */
/* The header clipped its own dropdown; the menu must escape it. */
.body.view-verify .vf-topo-hd { position: relative; z-index: 60; overflow: visible; }
.body.view-verify .vf-topo-hd .vf-pick-menu { z-index: 70; }

/* Hovering a journey lights the dependencies it runs through */
#topoSvg.vf-dim .vf-node { opacity: 0.28; transition: opacity .12s; }
#topoSvg.vf-dim .vf-edge { opacity: 0.18; transition: opacity .12s; }
#topoSvg.vf-dim .vf-node.lit { opacity: 1; }
#topoSvg.vf-dim .vf-node.lit rect { stroke: var(--accent); }
#topoSvg.vf-dim .vf-edge.lit { opacity: 1; stroke: var(--accent); }
.body.view-verify #topoTests .vf-trow:hover { border-left-color: var(--accent); }

/* The host scopes this to .body.view-inbox, which never matches here. */
.body.view-verify .beam-tab-btn { height: auto; min-height: 30px; white-space: nowrap; }

#topoTests { padding-top: 10px; }

.body.view-verify .vf-topo-scan { position: absolute; right: 18px; bottom: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-muted); pointer-events: none; }

/* Environments */
.body.view-verify .vf-envhd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.body.view-verify .vf-envbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.body.view-verify .vf-envsec { margin-top: 22px; }
.body.view-verify .vf-envsec h4 { margin: 0 0 9px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.body.view-verify .vf-envroster { border: 1px solid var(--border-soft); background: var(--bg); }
.body.view-verify .vf-envroster .vf-rt { padding: 0 0 10px; }
.body.view-verify .envrepo .vf-thead, .body.view-verify .envrepo .vf-trow { grid-template-columns: minmax(180px,2fr) minmax(110px,1fr) minmax(110px,1fr); }
@container (max-width: 700px) {
  .body.view-verify .envproj .vf-thead > :nth-child(4), .body.view-verify .envproj .vf-trow > :nth-child(4) { display: none; }
  .body.view-verify .envproj .vf-thead, .body.view-verify .envproj .vf-trow { grid-template-columns: minmax(0,2fr) minmax(100px,1fr) minmax(90px,1fr); }
  .body.view-verify .envrepo .vf-thead > :nth-child(2), .body.view-verify .envrepo .vf-trow > :nth-child(2) { display: none; }
  .body.view-verify .envrepo .vf-thead, .body.view-verify .envrepo .vf-trow { grid-template-columns: minmax(0,2fr) minmax(100px,1fr); }
}

.body.view-verify .vf-stats4 { grid-template-columns: repeat(4, 1fr); }
.body.view-verify .vf-stats4 .vf-k { font-size: 7.5px; letter-spacing: 0.1em; }

.body.view-verify .vf-ib .ico.created { color: var(--accent); border-color: rgba(95,208,160,0.35); }
.body.view-verify .vf-ib .ico.updated { color: var(--amber); border-color: rgba(205,164,92,0.35); }
.body.view-verify .vf-ib .ico.removed { color: var(--text-dim); border-color: var(--border); }

/* Read / unread — dot shows only while unread; read rows settle back */
.body.view-verify .ib-row .ib-dot { opacity: 0; }
.body.view-verify .ib-row.unread .ib-dot { opacity: 1; }
.body.view-verify .ib-row.unread .ib-title { color: var(--text); font-weight: 600; }
.body.view-verify .ib-row:not(.unread) .ib-title { color: var(--text-dim); font-weight: 500; }
.body.view-verify .ib-row:not(.unread) .ib-ic { opacity: 0.55; }


/* Unread cue: a small dot in the row's top-right corner, not a leading marker */
.body.view-verify .ib-row { position: relative; }
.body.view-verify .ib-row .ib-dot { position: absolute; top: 10px; right: 11px; width: 4px; height: 4px; background: var(--text-muted); opacity: 0; transition: opacity .15s; }
.body.view-verify .ib-row.unread .ib-dot { opacity: 0.5; }
.body.view-verify .ib-row .ib-ic { opacity: 1; }
.body.view-verify .ib-row:not(.unread) .ib-ic { opacity: 0.55; }
.body.view-verify .ib-tag { color: var(--text-dim); border-color: var(--border); }
.body.view-verify .ib-row { grid-template-columns: 20px minmax(0,1fr) auto; gap: 12px; padding-right: 24px; }
.body.view-verify .ib-row > .ib-dot { grid-area: auto; }

/* Inbox detail — where the event came from */
.body.view-verify .vf-ibmeta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 20px; padding: 13px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.body.view-verify .vf-ibmeta > div { min-width: 0; }
.body.view-verify .vf-ibmeta dt { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.body.view-verify .vf-ibmeta dd { margin: 4px 0 0; font-size: 12.5px; }
.body.view-verify .vf-ibmeta a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.body.view-verify .vf-ibmeta a:hover { color: var(--accent); border-bottom-color: currentColor; }
.body.view-verify .vf-ibmeta a svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }

.body.view-verify .vf-prlink, #vDrawer .vf-prlink { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.body.view-verify .vf-prlink:hover, #vDrawer .vf-prlink:hover { color: var(--accent); border-bottom-color: currentColor; }
.body.view-verify .vf-prlink svg, #vDrawer .vf-prlink svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }

/* Drawer resize handle */
.vf-drawer { max-width: none; }
.vf-drawer.resizing { transition: none; }

/* Run history */
.body.view-verify .vf-runs, #vDrawer .vf-runs { display: flex; flex-direction: column; }
#vDrawer .vf-run { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
#vDrawer .vf-run:last-child { border-bottom: 0; }
#vDrawer .vf-run-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); justify-self: center; }
#vDrawer .vf-run.fail .vf-run-dot { background: var(--red); }
#vDrawer .vf-run-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#vDrawer .vf-run-kind { font-size: 12.5px; color: var(--text); }
#vDrawer .vf-run-by { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vDrawer .vf-run-when { font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
#vDrawer .vf-runs-none { padding: 11px 0 2px; font-size: 12.5px; color: var(--text-muted); }

/* Screenshots — a horizontally scrollable rail of small frames.
   Scoped to both the drawer and the body: #vDrawer is a sibling of the
   verify body, so a .body.view-verify prefix alone never reaches it. */
#vDrawer .vf-shot-rail, .body.view-verify .vf-shot-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#vDrawer .vf-shot-rail::-webkit-scrollbar, .body.view-verify .vf-shot-rail::-webkit-scrollbar { height: 7px; }
#vDrawer .vf-shot-rail::-webkit-scrollbar-thumb, .body.view-verify .vf-shot-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
#vDrawer .vf-shot, .body.view-verify .vf-shot { flex: 0 0 210px; margin: 0; scroll-snap-align: start; }
#vDrawer .vf-shot-frame, .body.view-verify .vf-shot-frame { position: relative; width: 210px; height: 132px; border: 1px solid var(--border-soft); background: var(--panel); overflow: hidden; }
#vDrawer .vf-shot figcaption, .body.view-verify .vf-shot figcaption { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
#vDrawer .vf-shot-n, .body.view-verify .vf-shot-n { flex: none; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); }

/* Steps — draggable, editable cards on the canvas */
#vDrawer .vf-stepcard { position: relative; flex: 0 0 auto; width: 230px; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border: 1px solid var(--border); background: #0e0e11; cursor: grab; transition: border-color .14s, background .14s, opacity .14s; }
#vDrawer .vf-stepcard:hover { background: #14141a; }
#vDrawer .vf-stepcard.dragging { opacity: 0.4; cursor: grabbing; }
#vDrawer .vf-stepcard.over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#vDrawer .vf-stepcard.purple { border-color: rgba(176,140,232,0.5); }
#vDrawer .vf-stepcard.blue { border-color: rgba(107,199,240,0.45); }
#vDrawer .vf-stepcard.green { border-color: rgba(95,208,160,0.45); }
#vDrawer .vf-stephd { display: flex; align-items: center; gap: 8px; }
#vDrawer .vf-stepbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid currentColor; border-radius: 3px; background: transparent; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
#vDrawer .vf-stepbadge:hover { background: rgba(150,160,165,0.1); }
#vDrawer .vf-stepbadge svg { width: 11px; height: 11px; }
#vDrawer .vf-stepdel { margin-left: auto; width: 18px; height: 18px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .14s, color .14s; }
#vDrawer .vf-stepcard:hover .vf-stepdel { opacity: 1; }
#vDrawer .vf-stepdel:hover { color: var(--red); }
#vDrawer .vf-stept { font-size: 12.5px; line-height: 1.45; color: var(--text); outline: none; border-radius: 3px; }
#vDrawer [data-step-text]:hover { box-shadow: inset 0 0 0 1px var(--border); }
#vDrawer [data-step-text]:focus { box-shadow: inset 0 0 0 1px var(--accent); }
#vDrawer .vf-stepjoin { flex: 0 0 30px; align-self: center; position: relative; display: grid; place-items: center; width: 30px; height: 18px; padding: 0; border: 0; background: transparent; font-family: var(--mono); font-size: 12px; color: var(--text-muted); cursor: pointer; isolation: isolate; }
#vDrawer .vf-stepjoin::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); z-index: -2; }
#vDrawer .vf-stepjoin::after { content: ''; position: absolute; width: 17px; height: 17px; border: 1px solid var(--border); border-radius: 999px; background: #0a0a0c; z-index: -1; transition: border-color .14s, background .14s; }
#vDrawer .vf-stepjoin:hover { color: var(--accent); }
#vDrawer .vf-stepjoin:hover::after { border-color: var(--accent); background: var(--accent-soft); }
#vDrawer .purple .vf-stepbadge { color: var(--purple); }
#vDrawer .blue .vf-stepbadge { color: var(--blue); }
#vDrawer .green .vf-stepbadge { color: var(--accent); }
#vDrawer .vf-selwrap { position: relative; }
#vDrawer .vf-selwrap svg, .vf-modal .vf-selwrap svg { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--text-muted); pointer-events: none; }
.vf-modal .vf-selwrap { position: relative; }
.vf-modal .vf-selwrap select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; }

/* Step canvas — a larger dotted surface you can pan and zoom */
#vDrawer .vf-stepcanvas { position: relative; border: 1px solid var(--border-soft); background-color: #0a0a0c;
  background-image: radial-gradient(circle, rgba(150,160,165,0.16) 1px, transparent 1px); background-size: 18px 18px; }
#vDrawer .vf-stepviewport { height: 340px; overflow: auto; cursor: grab; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#vDrawer .vf-stepviewport.panning { cursor: grabbing; }
#vDrawer .vf-stepviewport::-webkit-scrollbar { height: 8px; width: 8px; }
#vDrawer .vf-stepviewport::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
#vDrawer .vf-steprail { display: flex; align-items: center; gap: 0; min-height: 340px; padding: 24px 28px; transform-origin: left center; transition: transform .12s ease; width: max-content; }
#vDrawer .vf-stepzoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
#vDrawer .vf-stepzoom button { width: 24px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-family: var(--mono); font-size: 12px; cursor: pointer; }
#vDrawer .vf-stepzoom button:last-child { width: auto; padding: 0 8px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
#vDrawer .vf-stepzoom button:hover { background: var(--hover); color: var(--text); }
#vDrawer .vf-stepzoom span { min-width: 38px; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); }
/* Step type menu */
.vf-kindmenu { position: fixed; z-index: 300; display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.vf-kindopt { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 0; border-radius: 4px; background: transparent; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.vf-kindopt:hover { background: var(--hover); }
.vf-kindopt.on { background: var(--hover-2); }
.vf-kindopt svg { width: 12px; height: 12px; }
.vf-kindopt.purple { color: var(--purple); }
.vf-kindopt.blue { color: var(--blue); }
.vf-kindopt.green { color: var(--accent); }

/* Dragging a step */
#vDrawer .vf-stepcard { user-select: none; }
#vDrawer .vf-stepcard.dragging { opacity: 0.25; }
#vDrawer .vf-stepcard.shift-r { transform: translateX(14px); }
#vDrawer .vf-stepcard.shift-l { transform: translateX(-14px); }
#vDrawer .vf-stepcard { transition: border-color .14s, background .14s, opacity .14s, transform .14s; }
.vf-stepghost { position: fixed; z-index: 400; pointer-events: none; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border: 1px solid var(--accent); background: #14141a; box-shadow: 0 14px 34px rgba(0,0,0,0.55); cursor: grabbing; }
.vf-stepghost .vf-stepdel { display: none; }
.vf-stepghost .vf-stephd { display: flex; align-items: center; gap: 8px; }
.vf-stepghost .vf-stepbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid currentColor; border-radius: 3px; background: transparent; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.vf-stepghost .vf-stepbadge svg { width: 11px; height: 11px; }
.vf-stepghost.purple .vf-stepbadge { color: var(--purple); }
.vf-stepghost.blue .vf-stepbadge { color: var(--blue); }
.vf-stepghost.green .vf-stepbadge { color: var(--accent); }
.vf-stepghost .vf-stept { font-size: 12.5px; line-height: 1.45; color: var(--text); }

/* Editable journey description */
#vDrawer .vf-desc { margin: 0; padding: 7px 9px; margin-left: -9px; border-radius: 4px; font-size: 13px; line-height: 1.62; color: var(--text-dim); outline: none; transition: box-shadow .14s, color .14s; }
#vDrawer .vf-desc:hover { box-shadow: inset 0 0 0 1px var(--border); color: var(--text); }
#vDrawer .vf-desc:focus { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.vf-pill.removing { background: var(--red-soft); color: var(--red); }
#vDrawer .vf-btn.vf-danger-solid { background: var(--red); border-color: var(--red); color: #10080a; }
#vDrawer .vf-btn.vf-icon { width: 32px; padding: 0; justify-content: center; }
#vDrawer .vf-btn.vf-icon svg { width: 14px; height: 14px; }
#vDrawer .vf-btn.vf-danger-solid:hover { filter: brightness(0.94); }

/* What changed — the test diff */
#vDrawer .vf-diffhd { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border-soft); border-bottom: 0; background: var(--panel); }
#vDrawer .vf-diffby { flex: 1; min-width: 0; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vDrawer .vf-diffn { display: flex; gap: 8px; font-family: var(--mono); font-size: 10px; }
#vDrawer .vf-diffn .vf-a { color: var(--accent); }
#vDrawer .vf-diffn .vf-d { color: var(--red); }
#vDrawer .vf-difflines { border: 1px solid var(--border-soft); background: var(--bg); overflow-x: auto; }
#vDrawer .vf-diffline { display: flex; gap: 10px; padding: 5px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--text-muted); white-space: pre; }
#vDrawer .vf-diffline .vf-sign { flex: none; width: 8px; opacity: 0.8; }
#vDrawer .vf-diffline.add { background: rgba(95,208,160,0.08); color: var(--text); }
#vDrawer .vf-diffline.add .vf-sign { color: var(--accent); }
#vDrawer .vf-diffline.del { background: rgba(217,140,140,0.08); color: var(--text-dim); }
#vDrawer .vf-diffline.del .vf-sign { color: var(--red); }

/* Per-test run configuration */
.vf-cfgbtn { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer; transition: all .14s; justify-self: end; }
.vf-trow:hover .vf-cfgbtn { color: var(--text); border-color: var(--border-hover); }
.vf-cfgbtn:hover { border-color: var(--border-hover) !important; color: var(--text) !important; background: var(--hover); }
.vf-cfgbtn svg { width: 14px; height: 14px; }
.vf-freq { display: flex; flex-direction: column; gap: 6px; }
.vf-freqopt { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); font-family: inherit; text-align: left; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.vf-freqopt:hover { border-color: var(--border-hover); background: var(--hover); }
.vf-freqopt.on { border-color: var(--border-hover); background: var(--hover-2); }
.vf-freqn { font-size: 12.5px; font-weight: 450; color: #d2d9db; }
.vf-freqopt.on .vf-freqn { color: var(--text); }
.vf-freqd { font-size: 11.5px; color: #7b858a; }
.vf-cfgrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.vf-cfgrow .vf-l { flex: 1; min-width: 0; }
.vf-cfgrow .vf-lbl { font-size: 12.5px; font-weight: 450; color: #d2d9db; }

/* Shed columns fold into a line under the test name */
.vf-tc-fold { display: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
@container (max-width: 820px) { .vf-tc-fold { display: block; } }

/* Inline diff marks — journey, step, test */
#vDrawer .vf-stepcard.changed { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(95,208,160,0.25); }
#vDrawer .vf-stepflag { position: absolute; top: -8px; right: 8px; padding: 1px 7px; border-radius: 3px; background: var(--accent); color: #08130d; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
#vDrawer .vf-stept.vf-was { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(217,140,140,0.6); }
#vDrawer .vf-stept.vf-now { color: var(--text); }
#vDrawer .vf-codeline { display: inline-block; width: calc(100% + 8px); margin-left: -4px; padding: 0 4px; border-radius: 2px; }
#vDrawer .vf-codeline.changed { background: rgba(95,208,160,0.12); box-shadow: inset 2px 0 0 var(--accent); }

/* Changed clause, marked inside the journey */
#vDrawer .vf-desc .vf-was { padding: 1px 4px; border-radius: 3px; background: rgba(217,140,140,0.12); color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(217,140,140,0.65); }
#vDrawer .vf-desc .vf-now { padding: 1px 4px; border-radius: 3px; background: rgba(95,208,160,0.12); color: var(--text); }

/* Reviewing a removal — everything reads as going away */
#vDrawer .vf-removal-why { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
#vDrawer .vf-desc.vf-going { background: rgba(217,140,140,0.08); color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(217,140,140,0.5); cursor: default; }
#vDrawer .vf-stepcard.going { border-color: rgba(217,140,140,0.45); background: rgba(217,140,140,0.05); cursor: default; }
#vDrawer .vf-stepcard.going .vf-stept { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(217,140,140,0.5); }
#vDrawer .vf-stepflag.vf-del { background: var(--red); color: #10080a; }
#vDrawer .vf-code.vf-going { color: var(--text-muted); background: rgba(217,140,140,0.05); border-color: rgba(217,140,140,0.25); }
#vDrawer .vf-code.vf-going .vf-kw, #vDrawer .vf-code.vf-going .vf-fn, #vDrawer .vf-code.vf-going .vf-st { opacity: 0.5; }

/* Reserved bottom row: add a test — same row geometry as a real test */
.vf-trow.vf-addrow { border-style: dashed; cursor: pointer; }
.vf-trow.vf-addrow:hover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.vf-trow.vf-addrow .vf-n { color: var(--text-dim); }
.vf-trow.vf-addrow:hover .vf-n { color: var(--accent); }
.vf-addplus { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-family: var(--mono); font-size: 13px; line-height: 1; justify-self: center; }
.vf-trow.vf-addrow:hover .vf-addplus { border-color: var(--accent); color: var(--accent); }

/* Which project a test belongs to */
.vf-tbl.tests .vf-tc-proj { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-muted); }
.vf-tc-name .vf-tc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#vDrawer .vf-drawer-proj { display: block; padding: 0; margin-bottom: 4px; border: 0; background: transparent; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: color .14s; }
#vDrawer .vf-drawer-proj:hover { color: var(--accent); }

/* Header crumbs — quiet mono link, matching the chrome */
.vf-envhd .vf-crumb, .vf-topo-hd .vf-crumb { flex: none; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .14s; }
.vf-envhd .vf-crumb:hover, .vf-topo-hd .vf-crumb:hover { color: var(--text); }
.vf-envhd .vf-crumb-sep, .vf-topo-hd .vf-crumb-sep { flex: none; color: var(--text-muted); opacity: 0.4; font-family: var(--mono); font-size: 10px; }
.vf-envhd .vf-crumb-now, .vf-topo-hd .vf-crumb-now { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-topo-hd .vf-sp { display: none; }

/* Topology breadcrumbs */
.vf-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.vf-crumbs a { color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color .14s; }
.vf-crumbs a:hover { color: var(--text); }
.vf-crumbsep { color: var(--text-muted); opacity: 0.45; }
.vf-crumbnow { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Project card: owner line, settings cog, and the add card */
.vf-syscard .vf-hd { display: flex; align-items: center; gap: 10px; }
.vf-syscard .vf-hd h3 { flex: 1; min-width: 0; }
.vf-cardcog { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .14s; }
.vf-syscard:hover .vf-cardcog { border-color: var(--border); color: var(--text-dim); }
.vf-cardcog:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft); }
.vf-cardcog svg { width: 14px; height: 14px; }
.vf-cardowner { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-muted); }
.vf-addcard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; border-style: dashed; font-family: inherit; }
.vf-addcard:hover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.vf-addcard .vf-addplus { justify-self: start; }
.vf-addcard:hover .vf-addplus { border-color: var(--accent); color: var(--accent); }
.vf-addcard-t { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; color: var(--text); }
.vf-addcard:hover .vf-addcard-t { color: var(--accent); }
.vf-addcard-d { font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.vf-danger-zone { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(217,140,140,0.3); background: rgba(217,140,140,0.05); }
.vf-danger-zone .vf-l { flex: 1; min-width: 0; }
.vf-danger-zone .vf-lbl { font-size: 13px; color: var(--text); }
.vf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


/* Multi-select dropdown (repositories, teams) */
.vf-multi { position: relative; }
.vf-mbtn { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: border-color .14s; }
.vf-mbtn:hover, .vf-multi.open .vf-mbtn { border-color: var(--accent); }
.vf-mval { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-mph { color: var(--text-muted); }
.vf-mbtn svg { width: 12px; height: 12px; flex: none; color: var(--text-muted); transition: transform .14s; }
.vf-multi.open .vf-mbtn svg { transform: rotate(180deg); }
.vf-mmenu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 208px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 14px 34px rgba(0,0,0,0.5); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.vf-multi.open .vf-mmenu { display: block; }
.vf-mopt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.vf-mopt:hover { background: var(--hover); color: var(--text); }
.vf-mopt.on { color: var(--text); }
.vf-mbox { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; color: transparent; }
.vf-mopt.on .vf-mbox { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.vf-mbox svg { width: 10px; height: 10px; }
.vf-mconnect { margin-top: 3px; border-top: 1px solid var(--border-soft); border-radius: 0; padding-top: 9px; color: var(--text-muted); }
.vf-mconnect:hover { color: var(--accent); }

/* User conditions — pinned gold node, top left of the canvas */
#vDrawer .vf-stepcanvas { position: relative; }
#vDrawer .vf-condnode { position: absolute; top: 12px; left: 12px; z-index: 4; width: 212px; display: flex; flex-direction: column; gap: 1px; padding: 10px; border: 1px solid var(--amber); border-radius: 3px; background: #14110a; box-shadow: 0 10px 26px rgba(0,0,0,0.5); }
#vDrawer .vf-condhd { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
#vDrawer .vf-condhd svg { width: 12px; height: 12px; }
#vDrawer .vf-condrow { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 3px; background: transparent; text-align: left; cursor: pointer; transition: background .14s; }
#vDrawer .vf-condrow:hover { background: rgba(205,164,92,0.12); }
#vDrawer .vf-condk { flex: none; width: 74px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
#vDrawer .vf-condv { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.4; color: var(--text); }
/* The rail clears the pinned node */
#vDrawer .vf-steprail { padding-left: 28px; align-items: center; padding-top: 96px; padding-bottom: 24px; }
.vf-condmenu .vf-mbox { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid var(--border); border-radius: 3px; color: transparent; }
.vf-condmenu .vf-kindopt.on .vf-mbox { border-color: var(--amber); background: rgba(205,164,92,0.15); color: var(--amber); }
.vf-condmenu .vf-mbox svg { width: 9px; height: 9px; }
.vf-condmenu .vf-kindopt { text-transform: none; letter-spacing: 0.02em; font-family: inherit; font-size: 12.5px; color: var(--text-dim); }
.vf-condmenu .vf-kindopt.on { color: var(--text); }

#vDrawer .vf-drawer-hd h3[contenteditable] { outline: none; border-bottom: 1px solid transparent; cursor: text; }
#vDrawer .vf-drawer-hd h3[contenteditable]:hover { border-bottom-color: var(--border); }
#vDrawer .vf-drawer-hd h3[contenteditable]:focus { border-bottom-color: var(--accent); white-space: normal; }

/* Projects — Topology / Roster, on the Command Center's own chrome */
.body.view-verify .vf-projbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.body.view-verify .vf-projseg button { height: 28px; padding: 0 14px; }
.body.view-verify .vf-projmeta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; }

.body.view-verify .vf-cc { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.body.view-verify .vf-cc-toolbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid rgba(150,160,165,0.10); }
.body.view-verify .vf-cc-tabs { display: flex; flex: none; border: 1px solid rgba(150,160,165,0.16); border-radius: 4px; overflow: hidden; }
.body.view-verify .vf-cc-tabs button { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 15px; border: 0; background: transparent; color: #6e767a; font: 600 8.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background .12s, color .12s; }
.body.view-verify .vf-cc-tabs button + button { border-left: 1px solid rgba(150,160,165,0.16); }
.body.view-verify .vf-cc-tabs button:hover { color: var(--text-dim); background: rgba(150,160,165,0.06); }
.body.view-verify .vf-cc-tabs button.on { background: rgba(150,160,165,0.14); color: var(--text); }
.body.view-verify .vf-cc-tabs svg { width: 12px; height: 12px; }
.body.view-verify .vf-cc-stats { font: 600 9.5px var(--mono); letter-spacing: 0.18em; color: var(--text-dim); white-space: nowrap; }

.body.view-verify .vf-cc-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.body.view-verify .vf-cc-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.body.view-verify .vf-cc-zone { position: absolute; top: 18px; left: 24px; z-index: 2; pointer-events: none; font: 600 11px var(--sans); letter-spacing: 0.24em; color: var(--text); }
.body.view-verify .vf-br { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(150,160,165,0.28); pointer-events: none; z-index: 2; }
.body.view-verify .vf-br.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.body.view-verify .vf-br.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.body.view-verify .vf-br.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.body.view-verify .vf-br.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.body.view-verify .vf-cc-legend { position: absolute; bottom: 20px; left: 24px; z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; color: var(--text-dim); }
.body.view-verify .vf-cc-legend:hover { color: var(--text); }
.body.view-verify .vf-cc-key { position: absolute; bottom: 58px; left: 24px; z-index: 3; padding: 13px 15px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 14px 36px rgba(0,0,0,0.55); max-width: 320px; }
.body.view-verify .vf-cc-key[hidden] { display: none; }
.body.view-verify .vf-cc-keyhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font: 600 8px var(--mono); letter-spacing: 0.2em; color: var(--text-dim); }
.body.view-verify .vf-cc-keyx { cursor: pointer; color: #5e686c; font: 600 11px var(--mono); line-height: 1; letter-spacing: 0; }
.body.view-verify .vf-cc-keyx:hover { color: var(--text); }
.body.view-verify .vf-cc-keygrid { display: flex; flex-wrap: wrap; gap: 9px 14px; }
.body.view-verify .vf-cc-keyrow { display: flex; align-items: center; gap: 6px; font: 500 8px var(--mono); letter-spacing: 0.1em; color: #7c868a; white-space: nowrap; }
.body.view-verify .vf-cc-keylines { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(150,160,165,0.1); }
.body.view-verify .vf-cc-keylines .vf-cc-keyrow { letter-spacing: 0.12em; }
.body.view-verify .vf-cc-keyrow svg { width: 12px; height: 12px; flex: none; }
.body.view-verify .vf-cc-line { width: 18px; height: 0; border-top: 1.5px solid #8a949a; flex: none; }
.body.view-verify .vf-cc-line.ev { border-top-color: #5fd0a0; }
.body.view-verify .vf-cc-line.eg { border-top-color: #cda45c; }

.body.view-verify .vf-cc-line.dash { border-top-style: dashed; }

/* Node formatting taken from the Command Center canvas */
.body.view-verify .vf-cc-stage .vf-band { font: 600 8px var(--mono); letter-spacing: 0.12em; }
.body.view-verify .vf-cc-stage .vf-band.mesh { fill: #6fae93; }
.body.view-verify .vf-cc-stage .vf-band.eg { fill: #b9925a; }
.body.view-verify .vf-cc-stage .vf-disc { fill: var(--panel); }
.body.view-verify .vf-cc-stage .vf-halo { fill: none; stroke-width: 1.3; opacity: 0.16; }
.body.view-verify .vf-cc-stage .vf-lbl { font: 600 8.5px var(--mono); fill: #9aa4a8; text-anchor: middle; letter-spacing: 0.06em; }
.body.view-verify .vf-cc-stage .vf-pnode .vf-lbl { font-weight: 700; fill: #eef3f4; }
.body.view-verify .vf-cc-stage .vf-met { font: 600 8px var(--mono); fill: #6f9a89; text-anchor: middle; }
.body.view-verify .vf-cc-stage .vf-badge { font: 700 9px var(--mono); fill: var(--amber); text-anchor: start; }
.body.view-verify .vf-cc-stage .vf-pnode { cursor: pointer; }
.body.view-verify .vf-cc-stage .vf-pnode:hover .vf-disc, .body.view-verify .vf-cc-stage .vf-node.lit .vf-disc { stroke-width: 2.2; }
.body.view-verify .vf-cc-stage .vf-pnode:hover .vf-halo { opacity: 0.42; }
.body.view-verify .vf-cc-stage .vf-edge { stroke: rgba(150,160,165,0.22); stroke-width: 1; fill: none; transition: stroke .14s; }
.body.view-verify .vf-cc-stage .vf-edge.q { stroke: rgba(95,175,140,0.34); stroke-dasharray: 3 4; }
.body.view-verify .vf-cc-stage .vf-edge.e { stroke: rgba(190,150,90,0.42); stroke-dasharray: 3 4; }
.body.view-verify .vf-cc-stage .vf-ing { stroke: rgba(150,160,165,0.20); stroke-width: 1; stroke-dasharray: 2 4; }
.body.view-verify .vf-cc-stage svg.dim .vf-edge { stroke: rgba(150,160,165,0.05); }
.body.view-verify .vf-cc-stage svg.dim .vf-edge.lit { stroke: rgba(150,160,165,0.52); }
.body.view-verify .vf-cc-stage svg.dim .vf-node:not(.lit) { opacity: 0.3; }

/* Roster table — the Command Center's own row chrome */
.body.view-verify .vf-cc-stage.roster { overflow: auto; }
.body.view-verify .vf-rt { padding: 0 0 30px; background: var(--bg); container-type: inline-size; container-name: rt; }
/* In narrower hosts (the environment page) SCANNED gives up its track first,
   so project names never truncate. */
@container rt (max-width: 600px) {
  .body.view-verify .vf-rt-head > :nth-child(8), .body.view-verify .vf-rt-row > :nth-child(8) { display: none; }
  .body.view-verify .vf-rt-head, .body.view-verify .vf-rt-row { grid-template-columns: 18px minmax(0,2fr) 56px 88px 42px 60px 60px !important; }
}
.body.view-verify .vf-rt-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 0 8px; align-items: center; padding: 11px 14px; background: var(--panel); border-bottom: 1px solid rgba(150,160,165,0.14); font: 600 7.5px var(--mono); letter-spacing: 0.16em; color: #5e686c; }
.body.view-verify .vf-rt-grp { padding: 14px 22px 7px; font: 600 8px var(--mono); letter-spacing: 0.2em; color: var(--accent); }
.body.view-verify .vf-rt-row { display: grid; gap: 0 8px; align-items: center; margin: 0 8px; padding: 9px 7px; border: 1px solid rgba(150,160,165,0.07); border-left: 2px solid var(--accent); border-radius: 3px; background: transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.body.view-verify .vf-rt-row + .vf-rt-row { margin-top: 4px; }
.body.view-verify .vf-rt-row:hover { background: rgba(150,160,165,0.06); border-color: rgba(150,160,165,0.16); }
.body.view-verify .vf-rt-ic { position: relative; width: 15px; height: 15px; }
.body.view-verify .vf-rt-ic svg { width: 15px; height: 15px; display: block; }
.body.view-verify .vf-rt-alert { position: absolute; top: -3px; right: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.body.view-verify .vf-rt-name { display: flex; align-items: center; gap: 7px; min-width: 0; font: 600 10.5px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.body.view-verify .vf-rt-teams { display: flex; align-items: center; gap: 5px; min-width: 0; cursor: default; }
.body.view-verify .vf-rt-t1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body.view-verify .vf-rt-more { flex: none; font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); padding: 1px 4px; border: 1px solid var(--border-soft); border-radius: 3px; }
.body.view-verify .vf-rt-teams:hover .vf-rt-more { color: var(--text-dim); border-color: var(--border-hover); }
.body.view-verify .vf-rt-n.rd { color: var(--red); }
.body.view-verify .vf-rt-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body.view-verify .vf-rt-tag { flex: none; font: 700 6.5px var(--mono); letter-spacing: 0.1em; color: var(--amber); border: 1px solid rgba(205,164,92,0.4); border-radius: 3px; padding: 2px 4px; }
.body.view-verify .vf-rt-sub { font: 500 8px var(--mono); letter-spacing: 0.1em; color: #7c868a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.body.view-verify .vf-rt-n { font: 600 9px var(--mono); color: var(--text-dim); text-align: right; white-space: nowrap; }
.body.view-verify .vf-rt-n.cy { font-weight: 700; color: var(--blue); }
.body.view-verify .vf-rt-n.am { font-weight: 700; color: var(--amber); }
.body.view-verify .vf-rt-n.dim { color: #7c868a; }
.body.view-verify .vf-rt-add { display: block; width: calc(100% - 16px); margin: 8px 8px 0; padding: 10px 7px; border: 1px dashed var(--border); border-radius: 3px; background: transparent; color: var(--text-muted); font: 600 8px var(--mono); letter-spacing: 0.16em; text-align: left; text-indent: 7px; cursor: pointer; transition: all .12s; }
.body.view-verify .vf-rt-add:hover { border-color: var(--text-muted); color: var(--text); }