/*
 * Traceroute Globe: 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
 */

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

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

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

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

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

/* ---- hover label ---- */
.trt-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);
}
.trt-hl-title{color:var(--color-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trt-hl-sub{color:var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

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

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

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

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

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

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

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

/* ---- collapsible sections + tables ---- */
.trt-detail{
  border:1px solid var(--color-border); border-radius:var(--r-lg);
  background:var(--color-surface); overflow:hidden; margin:var(--sp-3) 0;
}
.trt-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);
}
.trt-detail-sum:hover{background:var(--color-surface-2)}
.trt-detail-title{flex:1}
.trt-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;
}
.trt-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;
}

.trt-table{display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm)}
.trt-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);
}
.trt-tr:last-child{border-bottom:none}
.trt-tr-host{grid-template-columns:minmax(10rem,1.4fr) minmax(7rem,1fr) minmax(6rem,.9fr) 3.2rem 5rem}
.trt-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)}
.trt-tr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trt-tags{display:flex; gap:var(--sp-1); flex-wrap:wrap}
.trt-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;
}
.trt-tag.is-1p{color:var(--color-success); background:color-mix(in srgb, var(--color-success) 13%, transparent)}
.trt-tag.is-3p{color:var(--color-secondary-soft, var(--color-secondary)); background:color-mix(in srgb, var(--color-secondary) 15%, transparent)}
.trt-tag.is-tracker{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent)}
.trt-tag.is-cdn{color:var(--color-accent-2); background:color-mix(in srgb, var(--color-accent-2) 14%, transparent)}
.trt-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;
}
.trt-url-btn:hover{color:var(--color-primary); text-decoration:underline}

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

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

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

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

/* ============================== TRACEROUTE SPECIFICS ============================== */
.trt-strip{display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); padding:var(--sp-5); align-items:center}
.trt-strip-item{font-size:var(--fs-sm); color:var(--color-muted)}
.trt-strip-item b{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text); margin-right:.35em; font-variant-numeric:tabular-nums}
.trt-verdict{margin:var(--sp-3) 0 var(--sp-4); color:var(--color-muted); font-size:var(--fs-sm)}

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

.trt-table{display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm)}
.trt-tr{display:grid; grid-template-columns:2.5rem minmax(9rem,1.3fr) minmax(8rem,1.4fr) 4rem 5rem; gap:var(--sp-3); align-items:baseline; padding:var(--sp-1) 0; border-bottom:1px solid var(--color-border)}
.trt-tr:last-child{border-bottom:none}
.trt-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)}
.trt-tr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trt-mono{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted)}
.trt-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}
.trt-url-btn:hover{color:var(--color-primary); text-decoration:underline}
.trt-lat{font-variant-numeric:tabular-nums; color:var(--tone,var(--color-text)); font-weight:600}
.trt-loss-bad{color:var(--color-danger)}
.trt-notes{margin:var(--sp-4) 0; font-size:var(--fs-xs); color:var(--color-muted)}
.trt-notes p{margin:0}
.trt-replay{position:absolute; bottom:var(--sp-4); right:var(--sp-4); z-index:6; display:flex; gap:var(--sp-2)}
.trt-panel-note{margin:var(--sp-2) 0 0; font-size:var(--fs-xs); color:var(--color-muted); font-style:italic}
.trt-panel-geo{font-size:var(--fs-sm); color:var(--color-text); margin-bottom:var(--sp-3)}
.trt-panel-status{font-size:var(--fs-xs); color:var(--color-muted); margin-bottom:var(--sp-2)}
.trt-hl-title{color:var(--color-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trt-hl-sub{color:var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:720px){
  .trt-tr{grid-template-columns:2rem 1fr 4.5rem; gap:var(--sp-2)}
  .trt-tr :nth-child(3), .trt-tr :nth-child(4){display:none}
}