.vmodel-panel{--vm-slant:40px;--vm-box-h:96px;--vm-gap:12px;--vm-ratio:.125;--vm-step:calc(var(--vm-slant) * (1 + var(--vm-ratio)));--vm-bridge-min:100px;--vm-left-a:#0f3d34;--vm-left-b:#17614f;--vm-right-a:#0b6e56;--vm-right-b:#0e8a6b;--vm-amber:#b9974f;margin-bottom:20px}.vmodel{gap:var(--vm-gap);max-width:940px;margin:0 auto;padding:28px 24px 8px;display:grid}.vmodel-row{grid-template-columns:minmax(0, 1fr) var(--vm-bridge) minmax(0, 1fr);padding-inline:calc(var(--vm-step) * var(--vm-level));--vm-bridge:calc(var(--vm-bridge-min) + (2 - var(--vm-level)) * 2 * var(--vm-step));align-items:stretch;display:grid}.vmodel-row.level-0{--vm-level:0}.vmodel-row.level-1{--vm-level:1}.vmodel-row.level-2{--vm-level:2}.vmodel-cell{min-width:0;position:relative}.vmodel-box{width:100%;height:var(--vm-box-h);color:#fff;text-align:left;grid-template-columns:1fr auto;grid-template-areas:"title count""hint count";align-content:center;gap:4px 12px;transition:filter .15s,transform .15s;display:grid;overflow:hidden}.vmodel-box.left{background:linear-gradient(120deg, var(--vm-left-a), var(--vm-left-b));clip-path:polygon(0 0, calc(100% - var(--vm-slant)) 0, 100% 100%, var(--vm-slant) 100%);padding:14px calc(var(--vm-slant) + 18px) 14px calc(var(--vm-slant) * .5 + 16px)}.vmodel-box.right{background:linear-gradient(240deg, var(--vm-right-a), var(--vm-right-b));clip-path:polygon(var(--vm-slant) 0, 100% 0, calc(100% - var(--vm-slant)) 100%, 0 100%);padding:14px calc(var(--vm-slant) * .5 + 16px) 14px calc(var(--vm-slant) + 18px)}.vmodel-box:hover{filter:brightness(1.12)}.vmodel-box:focus-visible{filter:brightness(1.2);outline:none}.vmodel-box.selected{box-shadow:inset 0 -4px 0 var(--mint);filter:brightness(1.12)}.vmodel-box strong{letter-spacing:-.2px;grid-area:title;font-family:Manrope,sans-serif;font-size:13px;font-weight:750;line-height:1.25}.vmodel-box small{color:#cfe9df;grid-area:hint;font-size:11px;line-height:1.35}.vmodel-count{letter-spacing:-.8px;color:var(--mint);grid-area:count;align-self:center;font-family:Manrope,sans-serif;font-size:26px;font-weight:750}.vmodel-add{width:24px;height:24px;color:var(--teal);border:1px solid var(--line);z-index:1;background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:-8px;box-shadow:0 2px 6px #0f3d341f}.vmodel-add.left{left:6px}.vmodel-add.right{right:6px}.vmodel-add:hover{background:var(--green-pale);color:var(--emerald)}.vmodel-flow{color:var(--emerald);z-index:1;position:absolute;bottom:-14px}.vmodel-flow.left{left:calc(50% + var(--vm-slant) * .5)}.vmodel-flow.right{right:calc(50% + var(--vm-slant) * .5)}.vmodel-bridge{--vm-state:#c3cfc8;justify-content:center;align-items:center;min-width:0;display:flex}.vmodel-bridge.full{--vm-state:var(--emerald)}.vmodel-bridge.part{--vm-state:var(--vm-amber)}.vmodel-bridge.empty{--vm-state:#e1e8e4}.vmodel-line{background:var(--vm-state);flex:1;min-width:4px;height:2px}.vmodel-bridge.none .vmodel-line,.vmodel-bridge.empty .vmodel-line{background:repeating-linear-gradient(90deg, var(--vm-state) 0 6px, transparent 6px 11px)}.vmodel-badge{border:2px solid var(--vm-state);color:var(--ink);white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 6px;font-family:Manrope,sans-serif;font-size:12px;font-weight:750;display:flex}.vmodel-badge:hover{background:var(--green-pale)}.vmodel-base{margin:0 calc(var(--vm-step) * 3);height:calc(var(--vm-box-h) * .75);text-align:center;background:var(--green-pale);color:var(--teal);clip-path:polygon(0 0, 100% 0, calc(100% - var(--vm-slant) * .75) 100%, calc(var(--vm-slant) * .75) 100%);border:1px dashed #b9dccf;place-content:center;gap:4px;display:grid}.vmodel-base strong{font-family:Manrope,sans-serif;font-size:13px;font-weight:750}.vmodel-base small{color:var(--muted);font-size:11px}.vmodel-summary{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:12px 24px 22px;font-size:12px;display:flex}.vmodel-summary strong{color:var(--ink)}.vmodel-summary button{color:#8a6d2c;text-underline-offset:2px;text-decoration:underline}.vmodel-key{background:#c3cfc8;border-radius:2px;width:14px;height:3px}.vmodel-key.full{background:var(--emerald)}.vmodel-key.part{background:var(--vm-amber)}.vmodel-detail{border-top:1px solid var(--line);background:var(--wash);padding:18px 24px 22px}.vmodel-detail-heading{align-items:center;gap:10px;margin-bottom:10px;display:flex}.vmodel-detail-heading h3{flex:1;font-family:Manrope,sans-serif;font-size:14px;font-weight:700}.vmodel-detail ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.vmodel-detail li{border:1px solid var(--line);background:#fff;border-radius:6px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.vmodel-item{text-align:left;align-items:center;gap:8px;min-width:0;font-weight:550;display:flex}.vmodel-item:hover{color:var(--emerald)}.vmodel-links{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}.vmodel-test{background:var(--green-pale);color:var(--teal);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:650}.vmodel-test:hover{background:#d3ede4}.vmodel-missing{color:#8a6d2c;font-size:11px}.vmodel-add-test{border:1px solid var(--line);color:var(--teal);border-radius:999px;align-items:center;gap:3px;padding:3px 8px;font-size:11px;font-weight:600;display:flex}.vmodel-add-test:hover{border-color:var(--emerald);color:var(--emerald)}@media (max-width:760px){.vmodel-panel{--vm-slant:16px;--vm-box-h:84px;--vm-ratio:.142857;--vm-bridge-min:48px}.vmodel{padding:22px 12px 4px}.vmodel-box{grid-template-columns:1fr;grid-template-areas:"title""count"}.vmodel-box.left,.vmodel-box.right{padding-inline:calc(var(--vm-slant) + 6px)}.vmodel-box strong{font-size:11px}.vmodel-box small{display:none}.vmodel-count{align-self:start;font-size:20px}.vmodel-badge{border-radius:10px;flex-direction:column;gap:2px;padding:4px 6px;font-size:10px}.vmodel-detail{padding:16px 12px}.vmodel-detail li{flex-direction:column;align-items:flex-start}.vmodel-links{justify-content:flex-start}}
