/* Extra styles for the Java / Spring / architecture / React / CSS diagrams (js/viz/*.js, "vb-" prefix). */

/* ---------- shared ---------- */
.vb-svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; overflow: visible; }
.vb-tallsvg { max-width: 460px; }
.vb-svg text { font-size: 11px; fill: var(--ink); }
.vb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.vb-small { font-size: .82rem; color: var(--muted); }
.vb-muted { color: var(--muted); fill: var(--muted) !important; }
.vb-left { text-align: left; margin-top: 10px; }
.vb-err { color: var(--bad); font-weight: 700; }
.vb-ok { color: var(--ok); font-weight: 700; }
.vb-pre { margin: 10px 0 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); font: .78rem/1.5 var(--font-mono); color: var(--ink); overflow-x: auto; white-space: pre; }
.vb-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); font: 700 .72rem var(--font-mono); color: var(--muted); }
.vb-pill.cur { border-color: var(--focus); color: var(--ink); background: color-mix(in srgb, var(--focus) 16%, var(--surface)); }
.vb-pill.ok { border-color: var(--ok); color: var(--ink); background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.vb-pill.bad { border-color: var(--bad); color: var(--ink); background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.vb-chips, .vb-log { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 24px; }
.vb-panel { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.vb-panel .vb-small { margin: 8px 0 0; }
.vb-range { accent-color: var(--focus); width: 120px; }
.vb-slider b { font: 700 .8rem var(--font-mono); min-width: 3ch; }
.vb-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); }
.vb-key::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 2px solid var(--rule); }
.vb-key.ok::before { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
.vb-key.bad::before { border-color: var(--bad); border-style: dashed; }
.vb-key.ref::before { height: 0; border-width: 1px 0 0; border-color: var(--focus); width: 16px; vertical-align: 3px; }
@keyframes vb-fade { from { opacity: 0; } }
.vb-fade { animation: vb-fade .4s var(--ease-out); }
.vb-arrowhead { fill: var(--muted); }
.vb-arrowhead-focus { fill: var(--focus); }
.vb-arrowhead-ok { fill: var(--spring); }
.vb-arrowhead-bad { fill: var(--bad); }
.vb-link { fill: none; stroke: var(--rule); stroke-width: 2; }
.vb-link.dash { stroke-dasharray: 5 4; stroke: var(--muted); }
.vb-dot { stroke: var(--surface); stroke-width: 2; }
.vb-dot.req { fill: var(--focus); }
.vb-dot.ok { fill: var(--ok); }
.vb-dot.bad { fill: var(--bad); }
.vb-dot.sig { fill: var(--signal); }
.vb-dot.evt { fill: var(--css); }

/* generic SVG boxes */
.vb-box rect { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.vb-box text { font-weight: 700; }
.vb-box .vb-sub-t, .vb-sub-t { font-size: 9px; font-weight: 400; fill: var(--muted); }
.vb-box.bad rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.vb-box.sig rect { stroke: var(--signal); fill: color-mix(in srgb, var(--signal) 28%, var(--surface)); }
.vb-box.vb-db rect { fill: var(--surface-2); stroke-dasharray: 3 2; }
.vb-box.vb-db text { font-weight: 400; font-size: 9.5px; }
.vb-box.vb-broker rect { stroke: var(--css); fill: color-mix(in srgb, var(--css) 10%, var(--surface)); }
.vb-box.vb-app > rect { fill: color-mix(in srgb, var(--java) 7%, var(--surface)); stroke: var(--java); }
.vb-box.vb-app.bad > rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.vb-box.vb-app.sig > rect { stroke: var(--signal); }
.vb-ghost { fill: var(--surface); stroke: var(--arch); stroke-width: 1.5; }

/* ---------- jvm-memory ---------- */
.vb-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 760px) { .vb-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.vb-code-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.vb-code { margin: 0; padding: 8px 0; list-style: none; counter-reset: vbline; font: .74rem/1.55 var(--font-mono); white-space: pre; }
.vb-code li { counter-increment: vbline; padding: 0 10px 0 0; border-left: 3px solid transparent; transition: background .2s; }
.vb-code li::before { content: counter(vbline); display: inline-block; width: 2.6em; padding-right: .8em; text-align: right; color: var(--muted); }
.vb-code li.cur { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); border-left-color: var(--signal); }
.vb-region { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; }
.vb-meta { fill: color-mix(in srgb, var(--css) 6%, var(--surface)); stroke: var(--css); }
.vb-stack { fill: color-mix(in srgb, var(--focus) 5%, var(--surface)); stroke: var(--focus); }
.vb-heap { fill: color-mix(in srgb, var(--java) 5%, var(--surface)); stroke: var(--java); }
.vb-sub { fill: var(--surface-2); stroke: var(--rule); stroke-dasharray: 4 3; }
.vb-svg .vb-rlabel { font-weight: 700; font-size: 11px; }
.vb-svg .vb-slabel { font-size: 9.5px; fill: var(--muted); }
.vb-chip rect { fill: var(--surface-2); stroke: var(--rule); }
.vb-chip.vb-own rect { fill: color-mix(in srgb, var(--css) 18%, var(--surface)); stroke: var(--css); }
.vb-svg .vb-chip text { font: 10px var(--font-mono); }
.vb-frame rect { fill: var(--surface); stroke: var(--focus); stroke-width: 1.5; }
.vb-svg .vb-flabel { font-weight: 700; font-size: 10px; fill: var(--focus); }
.vb-var rect { fill: var(--surface-2); stroke: var(--rule); }
.vb-svg .vb-var text { font: 10.5px var(--font-mono); }
.vb-obj rect { fill: var(--surface); stroke: var(--java); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.vb-svg .vb-obj text { font: 9.5px var(--font-mono); }
.vb-obj.ok rect { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
.vb-obj.bad rect { stroke: var(--bad); stroke-dasharray: 4 3; fill: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.vb-obj.bad text { opacity: .7; }
.vb-ref { fill: none; stroke: var(--focus); stroke-width: 1.5; }
.vb-ref2 { stroke-dasharray: 4 3; }
.vb-svg .vb-gc { font-weight: 700; fill: var(--bad); font-size: 10.5px; }

/* ---------- thread-lifecycle ---------- */
.vb-edge { fill: none; stroke: var(--rule); stroke-width: 2; transition: stroke .2s; }
.vb-edge.hot { stroke: var(--focus); stroke-width: 2.5; }
.vb-svg .vb-elabel { font: 9.5px var(--font-mono); fill: var(--muted); }
.vb-state rect { fill: var(--surface); stroke: var(--rule); stroke-width: 2; transition: fill .2s, stroke .2s; }
.vb-svg .vb-state text { font: 700 9.5px var(--font-mono); }
.vb-state.cur rect { stroke: var(--java); fill: color-mix(in srgb, var(--java) 18%, var(--surface)); }
.vb-token { fill: var(--java); stroke: var(--surface); stroke-width: 2; }
@keyframes vb-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.vb-state.shake { animation: vb-shake .25s 2; }
.vb-state.shake rect { stroke: var(--bad); }

/* ---------- spring-di ---------- */
.vb-ioc { fill: color-mix(in srgb, var(--spring) 5%, var(--surface)); stroke: var(--spring); stroke-width: 2; }
.vb-ioc.bad { stroke: var(--bad); }
.vb-plan { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; }
.vb-plan.bad, .vb-wire.bad { stroke: var(--bad); }
.vb-wire { fill: none; stroke: var(--spring); stroke-width: 2.5; }
.vb-bean rect { fill: var(--surface); stroke: var(--rule); stroke-width: 2; transition: fill .2s, stroke .2s; }
.vb-bean.dim { opacity: .55; }
.vb-bean.hl rect { stroke: var(--focus); fill: color-mix(in srgb, var(--focus) 12%, var(--surface)); }
.vb-bean.ok rect { stroke: var(--spring); fill: color-mix(in srgb, var(--spring) 14%, var(--surface)); }
.vb-bean.bad rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.vb-bean.sig rect { stroke: var(--signal); fill: color-mix(in srgb, var(--signal) 26%, var(--surface)); }
.vb-svg .vb-ann { font: 9.5px var(--font-mono); fill: var(--spring); }
.vb-svg .vb-bname { font-weight: 700; font-size: 12px; }
.vb-svg .vb-bstat { font: 9.5px var(--font-mono); fill: var(--muted); }

/* ---------- spring-request ---------- */
.vb-rail { stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 4; }
.vb-hop rect { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; transition: fill .25s, stroke .25s, opacity .25s; }
.vb-svg .vb-hop text { font-size: 10.5px; font-weight: 700; }
.vb-hop.done rect { stroke: color-mix(in srgb, var(--spring) 60%, var(--rule)); }
.vb-hop.cur rect { stroke: var(--focus); stroke-width: 2.5; fill: color-mix(in srgb, var(--focus) 14%, var(--surface)); }
.vb-hop.bad rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.vb-advice rect { stroke-dasharray: 4 3; }
.vb-packet { transition: transform .45s var(--ease-out); }
.vb-packet circle { fill: var(--focus); stroke: var(--surface); stroke-width: 3; }
.vb-packet.res circle { fill: var(--ok); }
.vb-packet.err circle { fill: var(--bad); }
.vb-tag { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; font: 700 .8rem var(--font-mono); border: 2px solid var(--focus); background: var(--surface); }
.vb-tag.res { border-color: var(--ok); }
.vb-tag.err { border-color: var(--bad); }

/* ---------- circuit-breaker ---------- */
.vb-breaker rect { fill: var(--surface); stroke-width: 3; transition: fill .2s, stroke .2s; }
.vb-breaker.closed rect { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.vb-breaker.open rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.vb-breaker.half_open rect { stroke: var(--signal); fill: color-mix(in srgb, var(--signal) 24%, var(--surface)); }
.vb-machine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.vb-arrow { color: var(--muted); }
.vb-window { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 6px 0; }
.vb-window .vb-wcell { min-width: 0; height: 32px; padding: 0; font-size: .8rem; border-radius: 6px; }
.vb-stats { font-size: .9rem; }

/* ---------- react-render ---------- */
.vb-comp { cursor: pointer; }
.vb-comp rect { fill: var(--surface); stroke: var(--rule); stroke-width: 2; transition: fill .4s, stroke .2s, opacity .3s; }
.vb-svg .vb-comp text { font-size: 10.5px; font-weight: 700; }
.vb-comp.sel rect { stroke: var(--react); stroke-width: 3; }
.vb-comp:focus-visible { outline: none; }
.vb-comp:focus-visible rect { stroke: var(--focus); stroke-width: 3; }
@keyframes vb-flash { 0%, 40% { fill: color-mix(in srgb, var(--signal) 70%, var(--surface)); } }
.vb-comp.flash rect { animation: vb-flash .9s var(--ease-out); }
.vb-comp.skip rect { opacity: .5; stroke-dasharray: 4 3; }
.vb-svg .vb-badge { font: 700 9px var(--font-mono); fill: var(--react); }
.vb-svg .vb-why { font-size: 8.5px; font-weight: 400; fill: var(--muted); }
.vb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.vb-col { display: flex; flex-direction: column; gap: 6px; }
.vb-li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--surface); font-size: .88rem; }
.vb-li.ins { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.vb-li.upd { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 22%, var(--surface)); }
.vb-key-b { font: 700 .7rem var(--font-mono); color: var(--react); }
.vb-dom input { accent-color: var(--react); width: 18px; height: 18px; }
.vb-ops { margin: 10px 0 0; padding-left: 1.2em; font-size: .85rem; }
.vb-ops li { margin: 2px 0; }
.vb-ops li.upd::marker { color: var(--signal); }
.vb-ops li.ins::marker { color: var(--ok); }

/* ---------- box-model ---------- */
.vb-bm { position: relative; padding: 24px 26px; border-radius: 6px; text-align: center; font: .75rem var(--font-mono); }
.vb-bm-m { background: color-mix(in srgb, var(--signal) 22%, var(--surface)); border: 1px dashed var(--signal); max-width: 520px; margin: 4px auto 0; }
.vb-bm-b { background: color-mix(in srgb, var(--ink) 18%, var(--surface)); }
.vb-bm-p { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
.vb-bm-c { padding: 14px 6px; background: color-mix(in srgb, var(--focus) 22%, var(--surface)); border: 1px solid var(--focus); font-weight: 700; }
.vb-bm-label { position: absolute; top: 4px; left: 6px; font-size: .65rem; color: var(--muted); }
.vb-bm-n { position: absolute; font-size: .7rem; font-weight: 700; color: var(--ink); }
.vb-side-t { top: 4px; left: 50%; transform: translateX(-50%); }
.vb-side-b { bottom: 4px; left: 50%; transform: translateX(-50%); }
.vb-side-l { left: 8px; top: 50%; transform: translateY(-50%); }
.vb-side-r { right: 8px; top: 50%; transform: translateY(-50%); }
.vb-livewrap { display: flex; overflow-x: auto; padding: 4px; margin-top: 6px; }
.vb-marginshow { display: flow-root; flex: none; background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
.vb-livebox { display: grid; place-items: center; overflow: hidden; border-style: solid; border-color: color-mix(in srgb, var(--ink) 55%, var(--surface)); background-image: linear-gradient(color-mix(in srgb, var(--focus) 24%, var(--surface)), color-mix(in srgb, var(--focus) 24%, var(--surface))), linear-gradient(color-mix(in srgb, var(--ok) 24%, var(--surface)), color-mix(in srgb, var(--ok) 24%, var(--surface))); background-clip: content-box, padding-box; font: .75rem var(--font-mono); color: var(--ink); }
.vb-calc { margin-top: 10px; font-size: .9rem; line-height: 1.6; }

/* ---------- flexbox ---------- */
.vb-flex { display: flex; min-height: 200px; height: 220px; padding: 8px; border: 2px dashed var(--css); border-radius: var(--r-sm); background: color-mix(in srgb, var(--css) 6%, var(--surface)); overflow: auto; }
.vb-fitem { flex-shrink: 1; min-width: 44px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--css) 26%, var(--surface)); border: 2px solid var(--css); font: 700 .85rem var(--font-mono); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; transition: flex-grow .3s var(--ease-out); }
.vb-fitem small { font-weight: 400; font-size: .65rem; color: var(--muted); }

/* ---------- specificity ---------- */
.vb-selin { font-family: var(--font-mono); flex: 1 1 220px; min-width: 0; width: 100%; max-width: 420px; }
.vb-stack-in { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.vb-stack-in .vb-row { margin: 0; flex-wrap: nowrap; }
.vb-imp { white-space: nowrap; }
.vb-tokens { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); font: 700 1rem var(--font-mono); min-height: 1.6em; }
.vb-tok { padding: 1px 4px; border-radius: 4px; white-space: pre; }
.vb-tok.a { background: color-mix(in srgb, var(--bad) 22%, var(--surface)); }
.vb-tok.b { background: color-mix(in srgb, var(--focus) 20%, var(--surface)); }
.vb-tok.c { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); }
.vb-tok.fn { background: color-mix(in srgb, var(--css) 22%, var(--surface)); }
.vb-tok.zero { background: var(--surface-2); color: var(--muted); }
.vb-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.vb-sc { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: var(--r-sm); border: 2px solid var(--rule); background: var(--surface); text-align: center; }
.vb-sc b { font: 700 1.5rem var(--font-mono); line-height: 1.2; }
.vb-sc small { font-size: .66rem; color: var(--muted); line-height: 1.2; }
.vb-sc.a { border-color: var(--bad); }
.vb-sc.b { border-color: var(--focus); }
.vb-sc.c { border-color: var(--ok); }
.vb-why-list { margin: 4px 0 12px; padding-left: 1.2em; font-size: .86rem; }
.vb-why-list code { font-size: .82rem; }
.vb-spec + .vb-spec { border-top: 1px dashed var(--rule); padding-top: 10px; }
.vb-battle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .vb-battle { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } }
.vb-fighter { padding: 10px; border: 2px solid var(--rule); border-radius: var(--r); background: var(--surface); transition: border-color .2s; }
.vb-fighter.win { border-color: var(--ok); }
.vb-fhead { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.vb-vs { text-align: center; font: 700 .9rem var(--font-display); color: var(--muted); }

/* ---------- polish pass: readable SVG text, sensible sizes on desktop and phone ---------- */
.vb-svg.vb-tl .vb-state text { font-size: 11px; }
.vb-svg.vb-tl .vb-elabel { font-size: 10.5px; }
.vb-history { justify-content: center; align-items: center; }
.vb-history::before { content: 'history'; font: 700 .7rem var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
@media (max-width: 600px) {
  .viz-stage > svg.vb-tl { min-width: 470px; }
}
/* spring-request: numbered hops in two columns (one on phones) */
.vb-svg.vb-journey .vb-hop text { font-size: 12.5px; }
.vb-svg.vb-journey .vb-hop .vb-num { font: 700 11px var(--font-mono); fill: var(--muted); }
.viz-stage > svg.vb-journey { min-width: 0; }
.vb-advice text { fill: var(--muted); }
.vb-advice.cur text, .vb-advice.bad text { fill: var(--ink); }
/* spring-di */
.vb-svg.vb-di .vb-ann, .vb-svg.vb-di .vb-bstat { font-size: 10.5px; }
.vb-svg.vb-di .vb-bname { font-size: 12.5px; }
.vb-svg .vb-empty-t { font-size: 13px; }
/* phones: these SVGs are 360 units wide, so 400px keeps 11px text readable with only a short scroll */
@media (max-width: 600px) {
  .viz-stage > svg.vb-di, .viz-stage > svg.vb-mm { min-width: 400px; }
}
/* jvm-memory: on phones the memory map keeps a readable size and scrolls inside its column */
.vb-pic { min-width: 0; }
@media (max-width: 759px) {
  .vb-pic { overflow-x: auto; }
  .vb-svg.vb-jvm { min-width: 440px; max-width: 520px; }
}
.vb-svg.vb-jvm .vb-slabel { font-size: 10px; }
/* monolith vs microservices */
.vb-note { margin: 12px auto 0; max-width: 62ch; text-align: center; }
/* circuit breaker */
.vb-svg.vb-cb .vb-box text { font-size: 12px; }
.vb-svg.vb-cb .vb-sub-t { font-size: 10px; }
.vb-svg.vb-cb .vb-bname { font-weight: 700; font-size: 12px; }
.vb-svg.vb-cb .vb-bstat { font: 700 10px var(--font-mono); fill: var(--muted); }
@media (max-width: 600px) { .viz-stage > svg.vb-cb { min-width: 400px; } }
/* react tree */
.vb-scrollpic { overflow-x: auto; max-width: 100%; }
.vb-svg.vb-rtree .vb-comp text { font-size: 11.5px; }
.vb-svg.vb-rtree .vb-badge { font-size: 10.5px; }
.vb-svg.vb-rtree .vb-why { font-size: 9.5px; }
@media (max-width: 600px) { .vb-svg.vb-rtree { min-width: 400px; } }
/* box model: diagram and live element side by side on wide screens, sliders in a tidy grid */
.vb-bmgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .vb-bmgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.vb-bmgrid .vb-bm-m { margin: 0; max-width: none; }
.vb-bmgrid .vb-calc { margin: 0; }
.vb-bmgrid .vb-pre { margin: 0; }
.vb-cap { font: 700 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.vb-bmkey { margin-top: 8px; font-size: .78rem; }
.vb-sw::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.vb-sw.m::before { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
.vb-sw.b::before { background: color-mix(in srgb, var(--ink) 55%, var(--surface)); }
.vb-sw.p::before { background: color-mix(in srgb, var(--ok) 24%, var(--surface)); }
.vb-sw.c::before { background: color-mix(in srgb, var(--focus) 24%, var(--surface)); }
.vb-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 18px; width: 100%; }
.vb-sliders .field-wrap { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.6ch; gap: 8px; }
.vb-sliders .vb-range { width: 100%; }
.vb-slider b { text-align: right; }
/* flexbox */
.vb-grow { margin-top: 10px; }
.vb-sc small { font-size: .72rem; }