/* =============================================================================
   GDR PLATFORM  |  DEPLOYMENTS / CLUSTERS panel styles (own file)
   References the global :root tokens from style.css but adds no rules to it, so
   the design pass can work style.css in parallel without collision.
   ============================================================================= */
#panel-clusters #cluster-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#panel-clusters .cluster-grade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 45%,rgba(6,8,12,.5) 100%)}

/* control card (top-left, edge-docked, respects the obstruction law) */
.cl-controls{position:absolute;top:14px;left:14px;z-index:5;width:min(250px,42vw);
  background:rgba(12,12,12,.6);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:3px;padding:13px 14px}
.cl-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:11px}
.cl-eyebrow::before{content:"";width:14px;height:1px;background:var(--red)}
.cl-scenes{display:flex;gap:6px;margin-bottom:12px}
.cl-scene{flex:1;border:1px solid var(--line);border-radius:2px;padding:9px 6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--grey);text-align:center;transition:.16s cubic-bezier(.25,.46,.45,.94);background:rgba(20,20,20,.4)}
.cl-scene:hover{color:#fff;border-color:#3a3a3a}
.cl-scene.on{color:#fff;border-color:var(--red);background:rgba(193,39,45,.12)}
.cl-row{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--grey);letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding-top:11px;border-top:1px solid rgba(255,255,255,.06)}
.cl-step{width:24px;height:24px;border:1px solid var(--line);border-radius:2px;color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.cl-step:hover{border-color:var(--red);color:var(--red)}
.cl-count{font-family:var(--head);font-size:22px;color:#fff;min-width:28px;text-align:center}
.cl-orbit{margin-left:auto;border:1px solid var(--line);border-radius:2px;color:var(--grey);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;transition:.15s}
.cl-orbit.on,.cl-orbit:hover{color:#fff;border-color:var(--red)}

/* cluster output readout (bottom-left, edge-docked) */
.cl-readout{position:absolute;bottom:16px;left:14px;z-index:5;width:min(340px,50vw);
  background:rgba(12,12,12,.62);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-left:2px solid var(--red);border-radius:3px;padding:14px 16px}
.cl-readout .cl-scene-name{font-family:var(--head);font-size:22px;letter-spacing:.03em;color:#fff;line-height:1}
.cl-readout .cl-sub{font-size:10px;color:var(--grey);margin-top:4px;letter-spacing:.03em}
.cl-metrics{display:flex;gap:20px;margin:13px 0}
.cl-metric .m-v{font-family:var(--head);font-size:30px;line-height:.85;color:#fff}
.cl-metric.total .m-v{color:var(--red)}
.cl-metric .m-l{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey2);margin-top:6px;font-weight:600}
.cl-note{font-size:10.5px;line-height:1.45;color:var(--grey);border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
.cl-note b{color:#fff;font-weight:600}

/* loading */
#cluster-loading{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:16px;letter-spacing:.2em;color:var(--grey);background:rgba(10,10,10,.6)}

@media(max-height:620px){.cl-readout .cl-note{display:none}.cl-metric .m-v{font-size:24px}}
@media(max-width:720px){.cl-readout{width:min(88vw,340px)}.cl-controls{width:min(84vw,250px)}}