/* agent-visualization.css - the stage of the agent demo view. Ticket LS-UI-40.

   The stage is the only black surface of the page. Every shape of it is flat in
   the page colours: no lit edge and no surface carries any light of its own.
   Ticket LS-UI-140. The text of the panel and of the transport is body text of
   the interface pack, so it is #F0F0F0 or brighter, and the accents are the
   gold, the red, the green and the info blue of the pack. */

.viz-wrap{display:flex;gap:12px;min-height:0;flex:1}
.viz-main{flex:1;min-width:980px;display:flex;flex-direction:column;gap:12px;min-height:0}
.viz-stage{position:relative;background:#000000;border:1px solid #1E222E;border-radius:10px;overflow:auto}
.viz-stage canvas{display:block;width:100%;background:#000000}
.viz-tip{position:absolute;z-index:6;padding:5px 9px;border:1px solid #FFFFFF;border-radius:8px;background:#05070B;color:#FFFFFF;font-family:var(--mono);font-size:11.5px;pointer-events:none;white-space:nowrap}
.viz-tip[hidden]{display:none}

/* The six readouts of the stage face. */
.viz-readouts{display:flex;gap:10px;flex-wrap:wrap}
.viz-readout{flex:1;min-width:150px;padding:8px 12px;border:1px solid #1E222E;border-radius:10px;background:#0A0C10}
.viz-readout .k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#F0F0F0}
.viz-readout .v{margin-top:3px;font-family:var(--mono);font-size:17px;font-weight:700;color:#FFFFFF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The transport. Every control is styled, no native range and no native button. */
.viz-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border:1px solid #1E222E;border-radius:10px;background:#0A0C10}
.viz-btn{padding:6px 12px;border:1px solid #2A2F3D;border-radius:8px;background:#05070B;color:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.viz-btn:hover{background:#12161E}
.viz-btn.on{border-color:#FFFFFF;background:#12161E;color:#FFFFFF}
/* The Run now control of the demo belongs to the stage: it wears the white ink
   of the monochrome optic of the drawing and never the gold of the page.
   Ticket LS-UI-150. */
.viz-btn.go{border-color:#FFFFFF;background:#05070B;color:#FFFFFF}
.viz-btn.go:hover,.viz-btn.go:focus,.viz-btn.go:focus-visible,.viz-btn.go:active{border-color:#FFFFFF;background:#12161E;color:#FFFFFF;outline:none}
.viz-seek{position:relative;flex:1;min-width:180px;height:20px;border:1px solid #2A2F3D;border-radius:6px;background:#05070B;cursor:pointer}
.viz-seekbar{height:100%;width:0;background:#FFFFFF;border-radius:5px}
.viz-time{font-family:var(--mono);font-size:12px;color:#F0F0F0}
.viz-runs{display:flex;gap:6px;flex-wrap:wrap;max-height:64px;overflow:auto}
.viz-run{padding:4px 10px;border:1px solid #2A2F3D;border-radius:8px;background:#05070B;font-family:var(--mono);font-size:12px;color:#FFFFFF}
.viz-run:hover{background:#12161E}
/* The chosen run of the list carries the white ink of the stage, so the whole
   chrome of the demo is monochrome. Ticket LS-UI-150. */
.viz-run.on{border-color:#FFFFFF;color:#FFFFFF}

/* The panels beside the stage. A list belongs to a panel and never to the stage. */
.viz-side{width:320px;flex:none;display:flex;flex-direction:column;gap:12px;min-height:0}
/* A narrow main column puts the panels under the stage, so the stage keeps the
   room it needs to read. */
@media (max-width:1560px){.viz-wrap{flex-wrap:wrap}.viz-side{width:100%;flex-direction:row;flex-wrap:wrap}.viz-side>.card{flex:1;min-width:250px}}
.viz-side>.card{min-width:0}
.viz-panel{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto}
.viz-c0{width:112px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-c1{width:46px;flex:none;text-align:right;font-family:var(--mono);color:#FFFFFF}
.viz-c2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-c3{width:48px;flex:none;text-align:right;font-family:var(--mono)}
.viz-c4{width:42px;flex:none;text-align:right;color:#FFFFFF}
.viz-st,.viz-ln,.viz-gt{display:flex;gap:10px;align-items:center;padding:5px 8px;border:1px solid #1E222E;border-radius:8px;background:#0A0C10;font-size:12.5px;color:#F0F0F0}
.viz-kv{display:flex;gap:10px;padding:3px 0;font-size:12.5px;color:#F0F0F0}
.viz-k{width:96px;flex:none;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#F0F0F0}
.viz-v{flex:1;min-width:0;overflow-wrap:anywhere;color:#FFFFFF}

/* The static picture of a page whose canvas is missing or too slow. */
.viz-static{padding:12px;border:1px solid #1E222E;border-radius:10px;background:#000000}
.viz-flat-h{font-size:15px;font-weight:700;color:#FFFFFF}
.viz-flat-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.viz-flat-cell{min-width:110px;padding:6px 10px;border:1px solid #1E222E;border-radius:8px;background:#0A0C10}
.viz-flat-box{margin-top:6px;padding:5px 9px;border:1px solid #FFFFFF;border-radius:8px;background:#0A0C10;font-family:var(--mono);font-size:12px;color:#FFFFFF}