/*
 * Site Galaxy: tool styles. HOST-SKINNED: every colour/spacing/radius/font comes from the
 * nitrosites design tokens (tokens.css) + component classes (global.css @layer components),
 * loaded by the BaseLayout shell in production and mirrored by _dev-host-shim.css in dev.
 * No literal brand hex anywhere (AGENTS.md §2). Cascade rule §2f: overrides of host-class
 * properties use a parent selector for specificity, because on the live site the host CSS
 * loads AFTER this file.
 *
 * Author: Rick Moore
 */

.sgx{
  font-family:var(--font-sans);
  color:var(--color-text);
}
.sgx *{box-sizing:border-box}
.sgx ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ============================== THE STAGE ==============================
 * True edge-to-edge: the display:full shell still wraps #tool-root in the page
 * container, so the stage breaks out with the house full-bleed pattern. */
.sgx-stage{
  position:relative;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  height:clamp(560px, calc(100svh - 9rem), 980px);
  overflow:hidden;
  border-block:1px solid var(--color-border);
  background:
    radial-gradient(1100px 520px at 18% -10%, color-mix(in srgb, var(--color-secondary) 9%, transparent), transparent 60%),
    radial-gradient(900px 480px at 85% 110%, color-mix(in srgb, var(--color-accent-2) 8%, transparent), transparent 60%),
    var(--color-bg);
}
.sgx-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab}
.sgx-canvas:active{cursor:grabbing}

/* ---- centre launch overlay ---- */
.sgx-start{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:radial-gradient(620px 340px at 50% 46%, color-mix(in srgb, var(--color-glow-faint) 60%, transparent), transparent 70%);
}
.sgx-start-inner{
  width:min(46rem, 100%);
  text-align:center;
  padding:var(--sp-8) var(--sp-6);
  border-radius:var(--r-2xl);
  border:1px solid var(--color-border);
  background:color-mix(in srgb, var(--color-surface) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.sgx-start-kicker{
  margin:0 0 var(--sp-4);
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-xl);
  letter-spacing:var(--tracking-wide);
  color:var(--color-text);
}
.sgx-form{display:flex; gap:var(--sp-2); align-items:stretch; max-width:34rem; margin:0 auto}
.sgx-form .sgx-field{flex:1; min-width:10rem; margin:0}
.sgx-input{font-size:var(--fs-lg)}
.sgx-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.sgx-launch{white-space:nowrap}
.sgx-launch:disabled{opacity:.6; cursor:progress}
.sgx-start-hint{margin:var(--sp-4) 0 0; color:var(--color-muted); font-size:var(--fs-sm)}
.sgx-start-err{min-height:1.4rem; margin-top:var(--sp-3); color:var(--color-danger); font-size:var(--fs-sm)}

/* ---- glass HUD (top-left) ---- */
.sgx-hud{
  position:absolute; top:var(--sp-4); left:var(--sp-4); z-index:6;
  min-width:15rem; max-width:22rem;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-lg);
  border:1px solid var(--color-border);
  background:color-mix(in srgb, var(--color-surface) 78%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.sgx-hud-top{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.sgx-hud-host{
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--color-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.sgx-spin{
  width:.85rem; height:.85rem; flex-shrink:0;
  border:2px solid var(--color-border-strong);
  border-top-color:var(--color-primary);
  border-radius:var(--r-full);
  animation:sgx-spin .8s linear infinite;
}
@keyframes sgx-spin{to{transform:rotate(360deg)}}
.sgx-hud-stats{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin-bottom:var(--sp-2)}
.sgx-hud-stat{font-size:var(--fs-xs); color:var(--color-muted); white-space:nowrap}
.sgx-hud-stat b{color:var(--color-text); font-variant-numeric:tabular-nums}
.sgx-hud-bar{height:4px; border-radius:var(--r-full); background:var(--color-surface-3); overflow:hidden}
.sgx-hud-barfill{height:100%; width:0; background:var(--color-primary); border-radius:var(--r-full);
  transition:width var(--dur) var(--ease)}

/* ---- legend chips (bottom-left) ---- */
.sgx-legend{
  position:absolute; bottom:var(--sp-4); left:var(--sp-4); z-index:6;
  display:flex; flex-wrap:wrap; gap:var(--sp-2); max-width:calc(100% - 2*var(--sp-4));
}
.sgx-legend-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);
  font-family:var(--font-sans); font-size:var(--fs-xs); color:var(--color-text);
  border:1px solid var(--color-border); border-radius:var(--r-full);
  background:color-mix(in srgb, var(--color-surface) 78%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer; user-select:none;
  transition:opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sgx-legend-chip:hover{border-color:var(--color-border-strong)}
.sgx-legend-chip.is-off{opacity:.38}
.sgx-legend-chip.is-off .sgx-legend-dot{filter:grayscale(1)}
.sgx-legend-dot{width:.6rem; height:.6rem; border-radius:var(--r-full); flex-shrink:0}
.sgx-legend-n{color:var(--color-muted); font-variant-numeric:tabular-nums}

/* ---- hover label ---- */
.sgx-hoverlabel{
  position:absolute; z-index:7; pointer-events:none;
  display:flex; flex-direction:column; gap:2px;
  max-width:16rem;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  border:1px solid var(--color-border-strong);
  background:color-mix(in srgb, var(--color-surface-2) 88%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:var(--fs-xs);
}
.sgx-hl-dot{width:.55rem; height:.55rem; border-radius:var(--r-full); position:absolute; top:calc(var(--sp-2) + .2em); left:calc(-.275rem)}
.sgx-hl-title{color:var(--color-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sgx-hl-sub{color:var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- node inspector panel (right) ---- */
.sgx-panel{
  position:absolute; top:var(--sp-4); right:var(--sp-4); z-index:8;
  width:min(21rem, calc(100% - 2*var(--sp-4)));
  padding:var(--sp-4) var(--sp-4) var(--sp-4);
  border-radius:var(--r-lg);
  border:1px solid var(--color-border-strong);
  background:color-mix(in srgb, var(--color-surface) 86%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sgx-panel-x{
  position:absolute; top:var(--sp-2); right:var(--sp-2);
  width:1.8rem; height:1.8rem; line-height:1;
  border:0; border-radius:var(--r-md);
  background:transparent; color:var(--color-muted);
  font-size:var(--fs-lg); cursor:pointer;
}
.sgx-panel-x:hover{color:var(--color-text); background:var(--color-surface-3)}
.sgx-panel-status{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs);
  color:var(--color-muted); margin-bottom:var(--sp-2); padding-right:var(--sp-6); overflow-wrap:anywhere}
.sgx-panel-status .sgx-hl-dot{position:static}
.sgx-panel-title{margin:0 0 var(--sp-1); font-size:var(--fs-base); line-height:var(--lh-tight)}
.sgx-panel-url{
  display:block; font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--color-accent-2); word-break:break-all; margin-bottom:var(--sp-3);
}
.sgx-panel-url:hover{color:var(--color-primary)}
.sgx-panel-facts{margin:0 0 var(--sp-3); display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1) var(--sp-3)}
.sgx-panel-facts div{display:flex; gap:var(--sp-2); font-size:var(--fs-xs)}
.sgx-panel-facts dt{color:var(--color-muted)}
.sgx-panel-facts dd{margin:0; color:var(--color-text)}
.sgx-panel-tools{display:flex; flex-wrap:wrap; gap:var(--sp-2)}

/* ---- misc stage bits ---- */
.sgx-nowebgl{
  position:absolute; left:50%; bottom:var(--sp-6); transform:translateX(-50%); z-index:6;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-md);
  border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-muted); font-size:var(--fs-sm); text-align:center;
}
.sgx-mini{font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); display:inline-flex;
  align-items:center; gap:var(--sp-1); white-space:nowrap}
.sgx-mini.done{color:var(--color-success)}

/* ============================== BELOW THE STAGE ============================== */
.sgx-below{max-width:72rem; margin:var(--sp-6) auto 0}

.sgx-error{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-5); margin:var(--sp-4) 0; border-color:var(--color-danger);
}
.sgx-error-ico{font-size:var(--fs-xl); color:var(--color-danger); line-height:1}
.sgx-error-msg{color:var(--color-muted); margin-top:var(--sp-1); font-size:var(--fs-sm)}

/* ---- score hero (SCORECARD-STANDARD.md) ---- */
.tone-ok{--tone:var(--color-success)}
.tone-good{--tone:var(--color-accent-2)}
.tone-warn{--tone:var(--color-status-partial)}
.tone-bad{--tone:var(--color-danger)}
.tone-mut{--tone:var(--color-muted)}

.sgx-scorehero{display:flex; gap:var(--sp-6); align-items:center; padding:var(--sp-6); flex-wrap:wrap}
.sgx-ring{position:relative; width:132px; height:132px; flex-shrink:0}
.sgx-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.sgx-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.sgx-ring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.sgx-ring-center{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1}
.sgx-ring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); color:var(--color-text)}
.sgx-ring-of{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.sgx-scorehero-body{flex:1; min-width:16rem}
.sgx-scorehero-head{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2)}
.sgx-grade-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:var(--r-md);
  font-family:var(--font-display); font-weight:900; font-size:var(--fs-xl);
  color:var(--tone); background:color-mix(in srgb, var(--tone) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}
.sgx-scorehero-title{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--color-text)}
.sgx-verdict{margin:0 0 var(--sp-4); color:var(--color-muted)}

.sgx-sections{display:flex; flex-direction:column; gap:var(--sp-2)}
.sgx-section{display:grid; grid-template-columns:9rem 1fr 3rem; gap:var(--sp-3); align-items:center}
.sgx-section-label{font-size:var(--fs-xs); color:var(--color-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.sgx-section-bar{height:6px; border-radius:var(--r-full); background:var(--color-surface-3); overflow:hidden}
.sgx-section-bar i{display:block; height:100%; border-radius:var(--r-full); background:var(--tone,var(--color-border-strong))}
.sgx-section-pct{font-size:var(--fs-xs); color:var(--color-text); text-align:right; font-variant-numeric:tabular-nums}
.sgx-section.is-na .sgx-section-pct{color:var(--color-muted)}

/* ---- stat cards ---- */
.sgx-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr)); gap:var(--sp-3); margin:var(--sp-4) 0}
.sgx-card{padding:var(--sp-4); text-align:center}
.sgx-card-n{font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--color-text); line-height:1}
.sgx-card-l{font-size:var(--fs-xs); color:var(--color-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-top:var(--sp-1)}

/* ---- fixes ---- */
.sgx-fixes{display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-4) 0}
.sgx-fix{
  display:flex; gap:var(--sp-3); align-items:baseline;
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-surface);
  font-size:var(--fs-sm); color:var(--color-text);
}
.sgx-fix-sev{
  flex-shrink:0; font-size:var(--fs-xs); font-weight:800; letter-spacing:var(--tracking-wide);
  padding:.05em .5em; border-radius:var(--r-sm);
}
.sgx-fix.sev-high .sgx-fix-sev{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.sgx-fix.sev-med .sgx-fix-sev{color:var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 14%, transparent)}
.sgx-fix.sev-low .sgx-fix-sev{color:var(--color-accent-2); background:color-mix(in srgb, var(--color-accent-2) 14%, transparent)}

/* ---- the repair tables ---- */
.sgx-issues{display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-4) 0}
.sgx-detail{
  border:1px solid var(--color-border); border-radius:var(--r-lg);
  background:var(--color-surface); overflow:hidden;
}
.sgx-detail-sum{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  cursor:pointer; user-select:none;
  font-weight:600; color:var(--color-text); font-size:var(--fs-sm);
}
.sgx-detail-sum:hover{background:var(--color-surface-2)}
.sgx-detail-title{flex:1}
.sgx-detail-n{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted);
  border:1px solid var(--color-border); border-radius:var(--r-full); padding:.05em .6em;
}
.sgx-detail-body{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  border-top:1px solid var(--color-border);
  max-height:24rem; overflow-y:auto;
}
.sgx-item{display:flex; flex-direction:column; gap:var(--sp-1); padding-bottom:var(--sp-2); border-bottom:1px solid var(--color-border)}
.sgx-item:last-child{border-bottom:none; padding-bottom:0}
.sgx-row{display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap}
.sgx-code{
  flex-shrink:0; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
  padding:.05em .5em; border-radius:var(--r-sm);
}
.sgx-code.is-bad{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.sgx-code.is-warn{color:var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 14%, transparent)}
.sgx-code.is-orphan{color:var(--color-secondary-soft, var(--color-secondary)); background:color-mix(in srgb, var(--color-secondary) 16%, transparent)}
.sgx-code.is-mut{color:var(--color-muted); background:var(--color-surface-3)}
.sgx-url-btn{
  border:0; background:transparent; padding:0; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-accent-2);
  text-align:left; word-break:break-all;
}
.sgx-url-btn:hover{color:var(--color-primary); text-decoration:underline}
.sgx-open{flex-shrink:0; color:var(--color-muted); text-decoration:none; font-size:var(--fs-xs)}
.sgx-open:hover{color:var(--color-primary)}
.sgx-arrow{color:var(--color-muted); flex-shrink:0}
.sgx-from{display:flex; align-items:baseline; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; padding-left:var(--sp-6)}
.sgx-from-l{font-size:var(--fs-xs); color:var(--color-muted); white-space:nowrap}
.sgx-capnote{font-size:var(--fs-xs); color:var(--color-muted); font-style:italic}
.sgx-dupt{font-size:var(--fs-xs); color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:32rem}

.sgx-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-4) 0 var(--sp-2)}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 720px){
  .sgx-stage{height:clamp(480px, 82svh, 760px)}
  .sgx-form{flex-direction:column}
  .sgx-start-inner{padding:var(--sp-6) var(--sp-4)}
  .sgx-hud{left:var(--sp-2); right:var(--sp-2); top:var(--sp-2); max-width:none}
  .sgx-legend{left:var(--sp-2); bottom:var(--sp-2)}
  .sgx-panel{
    top:auto; bottom:var(--sp-2); left:var(--sp-2); right:var(--sp-2);
    width:auto; max-height:46%; overflow-y:auto;
  }
  .sgx-scorehero{gap:var(--sp-4); padding:var(--sp-4)}
  .sgx-section{grid-template-columns:7rem 1fr 2.6rem}
}

@media (prefers-reduced-motion: reduce){
  .sgx-hud-barfill, .sgx-ring-fg{transition:none}
  .sgx-spin{animation-duration:1.6s}
}