/*
 * DOM X-Ray: 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
 */

.dxr{
  font-family:var(--font-sans);
  color:var(--color-text);
}
.dxr *{box-sizing:border-box}
.dxr ::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. */
.dxr-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);
}
.dxr-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab}
.dxr-canvas:active{cursor:grabbing}

/* ---- centre launch overlay ---- */
.dxr-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%);
}
.dxr-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);
}
.dxr-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);
}
.dxr-form{display:flex; gap:var(--sp-2); align-items:stretch; max-width:34rem; margin:0 auto}
.dxr-form .dxr-field{flex:1; min-width:10rem; margin:0}
.dxr-input{font-size:var(--fs-lg)}
.dxr-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.dxr-launch{white-space:nowrap}
.dxr-launch:disabled{opacity:.6; cursor:progress}
.dxr-start-hint{margin:var(--sp-4) 0 0; color:var(--color-muted); font-size:var(--fs-sm)}
.dxr-start-err{min-height:1.4rem; margin-top:var(--sp-3); color:var(--color-danger); font-size:var(--fs-sm)}

/* ---- glass HUD (top-left) ---- */
.dxr-hud{
  position:absolute; top:var(--sp-4); left:var(--sp-4); z-index:6;
  min-width:15rem; max-width:24rem;
  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);
}
.dxr-hud-top{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.dxr-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;
}
.dxr-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:dxr-spin .8s linear infinite;
}
@keyframes dxr-spin{to{transform:rotate(360deg)}}
.dxr-hud-stats{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3)}
.dxr-hud-stat{font-size:var(--fs-xs); color:var(--color-muted); white-space:nowrap}

/* ---- legend chips (bottom-left) ---- */
.dxr-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));
}
.dxr-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);
}
.dxr-legend-chip:hover{border-color:var(--color-border-strong)}
.dxr-legend-chip.is-off{opacity:.38}
.dxr-legend-chip.is-off .dxr-legend-dot{filter:grayscale(1)}
.dxr-legend-dot{width:.6rem; height:.6rem; border-radius:var(--r-full); flex-shrink:0}
.dxr-legend-n{color:var(--color-muted); font-variant-numeric:tabular-nums}

/* ---- replay controls (bottom-right) ---- */
.dxr-replay{
  position:absolute; bottom:var(--sp-4); right:var(--sp-4); z-index:6;
  display:flex; gap:var(--sp-2);
}

/* ---- hover label ---- */
.dxr-hoverlabel{
  position:absolute; z-index:7; pointer-events:none;
  display:flex; flex-direction:column; gap:2px;
  max-width:18rem;
  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);
}
.dxr-hl-title{color:var(--color-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dxr-hl-sub{color:var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- host inspector panel (right) ---- */
.dxr-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);
  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);
}
.dxr-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;
}
.dxr-panel-x:hover{color:var(--color-text); background:var(--color-surface-3)}
.dxr-panel-status{font-size:var(--fs-xs); color:var(--color-muted); margin-bottom:var(--sp-2); padding-right:var(--sp-6)}
.dxr-panel-title{margin:0 0 var(--sp-1); font-size:var(--fs-base); line-height:var(--lh-tight); word-break:break-all}
.dxr-panel-geo{font-size:var(--fs-sm); color:var(--color-text); margin-bottom:var(--sp-3)}
.dxr-panel-facts{margin:0 0 var(--sp-3); display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1) var(--sp-3)}
.dxr-panel-facts div{display:flex; gap:var(--sp-2); font-size:var(--fs-xs)}
.dxr-panel-facts dt{color:var(--color-muted)}
.dxr-panel-facts dd{margin:0; color:var(--color-text); overflow-wrap:anywhere}
.dxr-panel-note{margin:0 0 var(--sp-3); font-size:var(--fs-xs); color:var(--color-muted); font-style:italic}
.dxr-panel-tools{display:flex; flex-wrap:wrap; gap:var(--sp-2)}

/* ---- misc stage bits ---- */
.dxr-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;
}
.dxr-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}
.dxr-mini.done{color:var(--color-success)}

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

.dxr-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);
}
.dxr-error-ico{font-size:var(--fs-xl); color:var(--color-danger); line-height:1}
.dxr-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)}

.dxr-scorehero{display:flex; gap:var(--sp-6); align-items:center; padding:var(--sp-6); flex-wrap:wrap}
.dxr-ring{position:relative; width:132px; height:132px; flex-shrink:0}
.dxr-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.dxr-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.dxr-ring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.dxr-ring-center{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1}
.dxr-ring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); color:var(--color-text)}
.dxr-ring-of{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.dxr-scorehero-body{flex:1; min-width:16rem}
.dxr-scorehero-head{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2)}
.dxr-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);
}
.dxr-scorehero-title{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--color-text)}
.dxr-verdict{margin:0 0 var(--sp-4); color:var(--color-muted)}

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

/* ---- stat cards ---- */
.dxr-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr)); gap:var(--sp-3); margin:var(--sp-4) 0}
.dxr-card{padding:var(--sp-4); text-align:center}
.dxr-card-n{font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--color-text); line-height:1}
.dxr-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 ---- */
.dxr-fixes{display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-4) 0}
.dxr-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);
}
.dxr-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);
}
.dxr-fix.sev-high .dxr-fix-sev{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.dxr-fix.sev-med .dxr-fix-sev{color:var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 14%, transparent)}
.dxr-fix.sev-low .dxr-fix-sev{color:var(--color-accent-2); background:color-mix(in srgb, var(--color-accent-2) 14%, transparent)}

/* ---- collapsible sections + tables ---- */
.dxr-detail{
  border:1px solid var(--color-border); border-radius:var(--r-lg);
  background:var(--color-surface); overflow:hidden; margin:var(--sp-3) 0;
}
.dxr-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);
}
.dxr-detail-sum:hover{background:var(--color-surface-2)}
.dxr-detail-title{flex:1}
.dxr-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;
}
.dxr-detail-body{
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  border-top:1px solid var(--color-border);
  max-height:26rem; overflow-y:auto;
}

.dxr-table{display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm)}
.dxr-tr{
  display:grid; grid-template-columns:1fr 5rem 6rem 6rem; gap:var(--sp-3);
  align-items:baseline; padding:var(--sp-1) 0;
  border-bottom:1px solid var(--color-border);
}
.dxr-tr:last-child{border-bottom:none}
.dxr-tr-host{grid-template-columns:minmax(10rem,1.4fr) minmax(7rem,1fr) minmax(6rem,.9fr) 3.2rem 5rem}
.dxr-th{font-size:var(--fs-xs); color:var(--color-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); border-bottom:1px solid var(--color-border-strong)}
.dxr-tr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dxr-tags{display:flex; gap:var(--sp-1); flex-wrap:wrap}
.dxr-tag{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
  padding:.02em .45em; border-radius:var(--r-sm); white-space:nowrap;
}
.dxr-tag.is-1p{color:var(--color-success); background:color-mix(in srgb, var(--color-success) 13%, transparent)}
.dxr-tag.is-3p{color:var(--color-secondary-soft, var(--color-secondary)); background:color-mix(in srgb, var(--color-secondary) 15%, transparent)}
.dxr-tag.is-tracker{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.dxr-tag.is-cdn{color:var(--color-accent-2); background:color-mix(in srgb, var(--color-accent-2) 14%, transparent)}
.dxr-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;
}
.dxr-url-btn:hover{color:var(--color-primary); text-decoration:underline}

.dxr-notes{margin:var(--sp-4) 0; font-size:var(--fs-xs); color:var(--color-muted)}
.dxr-notes p{margin:0}

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

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

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

/* ============================== DOM X-RAY SPECIFICS ==============================
 * Appended after the inherited hybrid-scaffold blocks; later same-specificity rules
 * win within this file, and none of these fight host classes (all new names). */
.dxr-tr{display:flex; grid-template-columns:none; gap:var(--sp-3); align-items:baseline; flex-wrap:wrap}
.dxr-tr-tags{display:grid; grid-template-columns:8rem 3.5rem 1fr; align-items:center}
.dxr-path{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text); word-break:break-all; overflow:visible; white-space:normal; flex:1}
.dxr-tag-chip{
  flex-shrink:0; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
  padding:.05em .5em; border-radius:var(--r-sm); white-space:nowrap;
}
.dxr-tag-chip.is-bad{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.dxr-tag-chip.is-warn{color:var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 14%, transparent)}
.dxr-tag-chip.is-mut{color:var(--color-muted); background:var(--color-surface-3)}
.dxr-bar-wrap{display:block; height:6px; border-radius:var(--r-full); background:var(--color-surface-3); overflow:hidden}
.dxr-bar{display:block; height:100%; max-width:100%; border-radius:var(--r-full); background:var(--color-accent-2)}
.dxr-hl-flags{color:var(--color-danger); font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dxr-legend-chip.is-on{border-color:var(--color-danger); box-shadow:0 0 0 1px color-mix(in srgb, var(--color-danger) 45%, transparent)}