/* Project visualization: preserve the original canvas while the surrounding UI follows IMERON. */
.viz-intro { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 18px; color:var(--muted); }
.viz-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:12px; padding:12px; border:1px solid var(--line); background:var(--panel); }
.viz-toolbar label { display:flex; align-items:center; gap:8px; font-size:13px; }
.viz-toolbar select { width:auto; min-width:130px; }
.viz-toolbar .viz-check input { width:auto; margin:0; }
.viz-toolbar > span { margin-left:auto; }
.viz-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.viz-canvas-card { min-width:0; border:1px solid var(--line); background:var(--panel); }
.viz-canvas-card > h2 { padding:12px 16px; margin:0; font-size:16px; border-bottom:1px solid var(--line); }
.viz-viewport { overflow:auto; padding:12px; min-height:200px; max-height:76vh; background:#cbd0d4; }
.viz-stage-wrap { position:relative; margin:0 auto; }
.viz-stage { position:absolute; top:0; left:0; transform-origin:0 0; isolation:isolate; background:#eee; color:#000; font-family:Arial,sans-serif; line-height:1.15; }
.viz-stage .viz-object { position:absolute; display:flex; justify-content:center; align-items:center; padding:0; margin:0; border:0; border-radius:0; min-height:0; min-width:0; background:transparent; color:#000; font-family:Arial,sans-serif; font-size:12px; line-height:1.15; font-weight:normal; white-space:normal; overflow:visible; box-shadow:none; cursor:pointer; text-transform:none; letter-spacing:normal; }
.viz-object > img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.viz-object .viz-value { position:relative; display:block; width:100%; pointer-events:none; }
.viz-stage .viz-object:hover { filter:none; box-shadow:inset 0 0 0 2px rgba(41,86,135,.6); }
.viz-stage .viz-object:focus-visible, .viz-stage .viz-selected { outline:3px solid #276da8!important; outline-offset:3px; }
.viz-stage .viz-unknown { color:#555!important; background:#e1e4e6!important; border:1px dotted #78818a!important; }
.viz-unknown-mark { position:absolute; top:-5px; right:-5px; display:block; font:700 10px/13px Arial,sans-serif; width:13px; height:13px; text-align:center; background:#59636c; border-radius:50%; color:white; pointer-events:none; }
.viz-stage .viz-stale { opacity:.66; outline:2px dashed #59636c; outline-offset:1px; }
.viz-stage .viz-bad { filter:grayscale(1); }
.viz-stage .viz-has-issue { box-shadow:0 0 0 2px #d99015; }
.viz-stage .viz-has-event { outline:3px solid #d23a3a; outline-offset:2px; }
.viz-outlines .viz-object { outline:1px dotted rgba(41,86,135,.6); }
.viz-outlines .viz-link { outline:2px dashed #276da8; }
.viz-inspector { min-width:0; overflow-wrap:anywhere; max-height:82vh; overflow-y:auto; position:sticky; top:92px; padding:18px; }
.viz-inspector h2 { font-size:20px; line-height:1.25; margin:6px 0 12px; }
.viz-inspector h3 { font-size:14px; margin:20px 0 8px; }
.viz-inspector > button, .viz-inspector > .btn { margin:8px 6px 0 0; font-size:12px; }
.viz-detail-value { font:500 28px var(--mono); margin-bottom:8px; }
.viz-kv { display:grid; grid-template-columns:1fr; gap:2px; margin:12px 0; font-size:12px; }
.viz-kv dt { color:var(--muted); }
.viz-kv dd { margin:0 0 8px; white-space:pre-wrap; }
.viz-note { padding:10px; border-left:3px solid var(--ro-l); background:var(--bg); font-size:12px; margin:12px 0; }
.viz-event { display:block; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.viz-state-row { padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.viz-state-images { display:flex; align-items:center; gap:8px; margin-top:5px; }
.viz-state-images img { max-width:100px; max-height:60px; width:auto; height:auto; background:#eee; }
.viz-notices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:16px 0; }
.viz-notice-group { border:1px solid var(--line); background:var(--panel); padding:14px; max-height:300px; overflow-y:auto; }
.viz-notice-group h3 { margin:0 0 8px; font-size:14px; }
.viz-notice { display:block; width:100%; text-align:left; font-size:12px; font-weight:400; padding:9px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); overflow-wrap:anywhere; }
.viz-notice:hover { color:var(--accent); background:transparent; }
.viz-objects > input { max-width:400px; margin:14px 0; }
.viz-objects summary { cursor:pointer; font-weight:500; }
.viz-text-button { padding:0; background:none; color:inherit; border:0; text-align:left; font-size:inherit; font-weight:inherit; }
.viz-text-button:hover { background:none; color:var(--accent); text-decoration:underline; }
.viz-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.viz-card { margin:0; }
.viz-card > a { font-size:18px; font-weight:500; }
.viz-card > p { margin:8px 0 0; }
.viz-source { overflow-wrap:anywhere; }
.viz-history-chart { overflow-x:auto; }
.viz-history-chart .chart { min-width:600px; }
@media(max-width:1100px) {
  .viz-layout { grid-template-columns:minmax(0,1fr); }
  .viz-inspector { position:static; max-height:none; }
  .viz-kv { grid-template-columns:150px minmax(0,1fr); gap:6px 16px; }
  .viz-notices { grid-template-columns:1fr; }
  .viz-toolbar > span { margin-left:0; width:100%; }
}


.viz-synthetic-mark { position:absolute; left:0; bottom:-10px; padding:0 2px; font:700 8px/10px Arial,sans-serif; background:#7a5af0; color:#fff; pointer-events:none; }