/* Styles for the Layout / Timing / Reports viewers. Uses the glass tokens from studio.css (with fallbacks). */
.vw-root{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--panel,#0f1117);color:var(--text,#e8eaf2);font:var(--fs-sm,12.5px)/1.4 var(--ui,system-ui,sans-serif)}
.vw-root *{box-sizing:border-box}
.vw-bar{display:flex;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));flex:none}
.vw-bar select,.vw-bar input,.vw-btn{height:28px;background:var(--bg-2,#0c0e14);color:var(--text,#e8eaf2);border:1px solid var(--line-hi,rgba(255,255,255,.16));border-radius:var(--r-sm,6px);padding:0 10px;font:inherit}
.vw-bar input{width:200px}
.vw-btn{cursor:pointer}.vw-btn:hover:not(:disabled){border-color:var(--glow,#4a63ff)}.vw-btn:disabled{opacity:.4;cursor:default}
.vw-btn:focus-visible,.vw-bar select:focus-visible,.vw-bar input:focus-visible,.vw-tile:focus-visible{outline:none;box-shadow:var(--ring,0 0 0 2px #4a63ff)}
.vw-note{color:var(--text-2,#9aa0b4);margin-left:auto;margin-right:6px}
.vw-body{display:flex;flex:1;min-height:0}
.vw-side{width:150px;flex:none;overflow:auto;padding:8px 10px;border-right:1px solid var(--line,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:4px}
.vw-side label{display:flex;align-items:center;gap:6px;color:var(--text-2,#9aa0b4);cursor:pointer;white-space:nowrap}
.vw-side i{width:10px;height:10px;border-radius:2px;display:inline-block}
.vw-sep{margin:8px 0 2px;font-size:var(--fs-xs,11px);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3,#6b7185)}
.vw-canvas{position:relative;flex:1;min-width:0;overflow:hidden}
.vw-canvas canvas{position:absolute;inset:0;display:block;cursor:crosshair;touch-action:none;outline:none}
.vw-msg{color:var(--text-2,#9aa0b4);padding:24px;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vw-reports .vw-msg,.vw-timing .vw-msg{position:static}
.vw-status{display:flex;gap:16px;padding:4px 10px;border-top:1px solid var(--line,rgba(255,255,255,.08));color:var(--text-2,#9aa0b4);font:var(--fs-xs,11px) var(--mono,monospace);flex:none}
.vw-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* timing */
.vw-tabs{display:flex;border:1px solid var(--line-hi,rgba(255,255,255,.16));border-radius:var(--r-sm,6px);overflow:hidden}
.vw-tabs button{background:none;border:0;color:var(--text-2,#9aa0b4);padding:0 14px;height:26px;font:inherit;cursor:pointer}
.vw-tabs button.on{background:var(--brand-soft,rgba(74,99,255,.16));color:var(--text,#e8eaf2)}
.vw-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0;flex:none}
.vw-chip{display:inline-flex;gap:8px;align-items:center;height:22px;padding:0 10px;border-radius:99px;font-size:var(--fs-xs,11px);border:1px solid;background:color-mix(in srgb,var(--c) 14%,transparent);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.vw-chip.ok{--c:var(--ok,#3ddc97)}.vw-chip.bad{--c:var(--err,#ff5c6c)}.vw-chip i{width:6px;height:6px;border-radius:50%;background:var(--c)}.vw-chip b{font-weight:500;color:var(--text-2,#9aa0b4);font-family:var(--mono,monospace)}
.vw-tscroll{overflow:auto;padding:10px;flex:1;min-height:0}
.vw-h{margin:12px 0 6px;font-size:var(--fs-xs,11px);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3,#6b7185)}
.vw-root table{width:100%;border-collapse:collapse;font:12px var(--mono,monospace)}
.vw-root th{position:sticky;top:0;background:var(--panel,#0f1117);text-align:left;color:var(--text-3,#6b7185);font:500 var(--fs-xs,11px) var(--ui,sans-serif);padding:4px 8px;border-bottom:1px solid var(--line-hi,rgba(255,255,255,.16))}
.vw-root td{padding:3px 8px;height:24px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));white-space:nowrap}
.vw-root .r{text-align:right}
.vw-ptable tr[data-i]{cursor:pointer}.vw-ptable tr:hover td,.vw-ptable tr.sel td{background:var(--brand-soft,rgba(74,99,255,.16))}
.vw-ptable tr.neg td:nth-child(5){color:var(--err,#ff5c6c);font-weight:600}
.vw-detail tr.sec td{color:var(--text-3,#6b7185);background:var(--bg-2,#0c0e14);font-family:var(--ui,sans-serif)}
/* reports */
.vw-scroll{overflow:auto;padding:20px 24px;flex:1;min-height:0;max-width:1200px;width:100%;margin:0 auto}
.vw-banner{display:flex;align-items:center;gap:12px;padding:18px 22px;border-radius:var(--r-lg,16px);font-size:var(--fs-xl,22px);font-weight:600;border:1px solid;background:color-mix(in srgb,var(--c) 12%,transparent);border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.vw-banner.ok{--c:var(--ok,#3ddc97)}.vw-banner.bad{--c:var(--err,#ff5c6c)}.vw-banner.warn{--c:var(--warn,#ffb020)}
.vw-banner small{margin-left:auto;font-size:var(--fs-md,13.5px);font-weight:400;color:var(--text-2,#9aa0b4)}
.vw-dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--text-3));flex:none}
.vw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.vw-tile{display:grid;grid-template-columns:auto 1fr;column-gap:8px;text-align:left;font:inherit;color:inherit;padding:12px 14px;border-radius:var(--r-md,10px);background:var(--bg-2,#0c0e14);border:1px solid var(--line,rgba(255,255,255,.08))}
button.vw-tile{cursor:pointer}button.vw-tile:hover{border-color:var(--glow,#4a63ff)}
.vw-tile.pass{--c:var(--ok,#3ddc97)}.vw-tile.fail{--c:var(--err,#ff5c6c);border-color:var(--err,#ff5c6c)}.vw-tile.na{--c:var(--text-3,#6b7185)}
.vw-tile .vw-dot{align-self:center}.vw-tl{color:var(--text-2,#9aa0b4)}
.vw-tv{grid-column:1/-1;font-size:26px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}.vw-tile.na .vw-tv{color:var(--text-3,#6b7185)}.vw-tile.fail .vw-tv{color:var(--err,#ff5c6c)}
.vw-tm{grid-column:1/-1;font-size:var(--fs-xs,11px);color:var(--text-3,#6b7185)}
.vw-infos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line,rgba(255,255,255,.08));border:1px solid var(--line,rgba(255,255,255,.08));border-radius:var(--r-md,10px);overflow:hidden}
.vw-info-i{background:var(--panel,#0f1117);padding:10px 14px;display:flex;flex-direction:column;gap:2px}.vw-info-i span{color:var(--text-3,#6b7185);font-size:var(--fs-xs,11px)}.vw-info-i b{font-size:var(--fs-lg,16px);font-weight:600;font-variant-numeric:tabular-nums}
.vw-shot{display:block;max-width:100%;max-height:360px;margin:16px 0 0;border-radius:var(--r-md,10px);border:1px solid var(--line,rgba(255,255,255,.08))}
.vw-corner-box{margin-top:16px}.vw-corner-box summary{cursor:pointer;color:var(--text-2,#9aa0b4)}.vw-corner-box .vw-tscroll{padding:8px 0}
.vw-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
@media (max-width:700px){.vw-side{width:110px}.vw-bar input{width:120px}.vw-scroll{padding:14px}}

.vw-bar{overflow-x:auto}.vw-bar>*{flex:none;white-space:nowrap}
.vw-bar select{max-width:180px}
.vw-bar.vw-gbar{flex-wrap:wrap;overflow:visible}