/* ============================================================================
   Redirect Tracer: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Everything here is driven by nitrosites' design tokens
   (src/styles/tokens.css) and reuses its component recipes (.btn/.btn-primary/
   .btn-ghost, .card, .panel-static, .field) which the BaseLayout shell loads
   globally via global.css. No raw brand colours, fonts, spacing or radii: only
   `var(--…)` host tokens. There are NO brand-simulation cards in this tool, so
   there is NO literal hex anywhere in this file.

   Cascade note: on the live site app.css loads BEFORE the host bundle, so where
   we override a property a host class already sets (e.g. .field's margin), we use
   a PARENT selector to win on specificity rather than load order.
   ========================================================================== */
.rdt{
  --rdt-ok: var(--color-success);
  --rdt-bad: var(--color-danger);
  --rdt-warn: var(--color-status-partial);
  --rdt-redir: var(--color-accent-2);
  --rdt-info: var(--color-accent-2);

  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}
.rdt *{box-sizing:border-box}
.rdt ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- search form ---------- */
.rdt-form{display:flex; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-2); max-width:42rem}
.rdt-form .rdt-field{flex:1; min-width:0; margin:0} /* flatten host .field into the inline row */
.rdt-input{font-size:var(--fs-lg)}
.rdt-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.rdt-btn{white-space:nowrap}
.rdt-btn-ico{display:inline-flex; width:1.1em; height:1.1em}
.rdt-btn-ico svg{width:100%; height:100%}

/* ---------- advanced / UA selector ---------- */
.rdt-adv{max-width:42rem; margin:0 auto var(--sp-2)}
.rdt-adv-toggle{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-2); border:0; background:transparent;
  color:var(--color-muted); cursor:pointer; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700}
.rdt-adv-toggle:hover{color:var(--color-text)}
.rdt-adv-chev{display:inline-flex; width:1em; height:1em; transition:transform var(--dur-fast) var(--ease)}
.rdt-adv.is-open .rdt-adv-chev{transform:rotate(180deg)}
.rdt-adv-body{display:none; padding-top:var(--sp-2)}
.rdt-adv.is-open .rdt-adv-body{display:block}
.rdt-adv .rdt-uafield{margin:0; max-width:16rem}

/* ---------- status / error ---------- */
.rdt-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-base)}
.rdt-status.is-live{color:var(--color-primary-soft)}
.rdt-spin{display:inline-block; width:1em; height:1em; border:2px solid var(--color-border); border-top-color:var(--color-primary);
  border-radius:var(--r-full); animation:rdt-spin .7s linear infinite; vertical-align:-2px; margin-right:var(--sp-2)}
@keyframes rdt-spin{to{transform:rotate(360deg)}}
.rdt-error{display:flex; gap:var(--sp-3); align-items:flex-start; max-width:36rem; margin:var(--sp-6) auto; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface))}
.rdt-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.rdt-error strong{color:var(--color-danger)}
.rdt-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}

/* ---------- idle ---------- */
.rdt-idle{max-width:40rem; margin:var(--sp-5) auto; text-align:center}
.rdt-idle-t{color:var(--color-muted); font-size:var(--fs-base)}
.rdt-idle-ex{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:center; margin-top:var(--sp-3)}
.rdt-idle-lbl{color:var(--color-muted); font-size:var(--fs-sm); font-weight:700}
.rdt-chip{padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full); border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-accent-2); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-xs); transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.rdt-chip:hover{border-color:var(--color-primary); color:var(--color-text)}

/* ---------- results ---------- */
.rdt-results:not(:empty){margin-top:var(--sp-5)}
.rdt-results:not(:empty){animation:rdt-rise var(--dur) var(--ease) both}
@keyframes rdt-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

/* ---------- tone helpers ---------- */
.tone-ok{--tone:var(--rdt-ok)} .tone-bad{--tone:var(--rdt-bad)} .tone-warn{--tone:var(--rdt-warn)}
.tone-good{--tone:var(--color-accent-2)} .tone-redir{--tone:var(--rdt-redir)} .tone-mut{--tone:var(--color-muted)}

/* ---------- standard score hero (redirect-chain health — SCORECARD-STANDARD.md) ---------- */
.rdt-hero{display:flex; gap:var(--sp-6); align-items:center}
.rdt-hero-ring{flex:none}
.rdt-ring{position:relative; width:132px; height:132px}
.rdt-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.rdt-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.rdt-ring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.rdt-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.rdt-ring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); color:var(--color-text)}
.rdt-of{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.rdt-hero-body{flex:1; min-width:0}
.rdt-hero-host{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; color:var(--color-muted); font-family:var(--font-mono); font-size:var(--fs-sm)}
.rdt-grade-badge{flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:2em; height:2em; padding:0 .4em;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--tone,var(--color-text)); border-radius:var(--r-md);
  border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 14%, transparent)}
.rdt-hero-verdict{font-size:var(--fs-lg); line-height:1.5; color:var(--color-text); margin:var(--sp-3) 0 0}

/* ---------- verdict strip ---------- */
.rdt-verdict{display:flex; gap:var(--sp-5); align-items:center}
.rdt-verdict-badge{flex:none; width:84px; height:84px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--tone,var(--color-muted));
  border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 12%, transparent)}
.rdt-verdict-body{flex:1; min-width:0}
.rdt-verdict-host{color:var(--color-muted); font-size:var(--fs-sm); font-family:var(--font-mono)}
.rdt-verdict-headline{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--color-text); margin:var(--sp-1) 0 var(--sp-3)}
.rdt-stats{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.rdt-pill{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--color-surface-2); border:1px solid var(--color-border); font-size:var(--fs-xs); color:var(--color-muted)}
.rdt-pill b{color:var(--color-text)}
.rdt-pill.tone-ok{border-color:color-mix(in srgb, var(--rdt-ok) 45%, transparent)} .rdt-pill.tone-ok b{color:var(--rdt-ok)}
.rdt-pill.tone-redir{border-color:color-mix(in srgb, var(--rdt-redir) 45%, transparent)} .rdt-pill.tone-redir b{color:var(--rdt-redir)}
.rdt-pill.tone-warn{border-color:color-mix(in srgb, var(--rdt-warn) 45%, transparent)} .rdt-pill.tone-warn b{color:var(--rdt-warn)}
.rdt-pill.tone-bad{border-color:color-mix(in srgb, var(--rdt-bad) 45%, transparent)} .rdt-pill.tone-bad b{color:var(--rdt-bad)}
.rdt-pill-l{opacity:.8}

/* ---------- timeline ---------- */
.rdt-timeline{margin-top:var(--sp-5); display:flex; flex-direction:column}
.rdt-hop{display:flex; gap:var(--sp-4)}
.rdt-hop-rail{flex:none; width:2.2em; display:flex; flex-direction:column; align-items:center}
.rdt-hop-dot{width:2.2em; height:2.2em; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); color:var(--color-primary-fg);
  background:var(--tone,var(--color-muted)); box-shadow:0 0 0 4px color-mix(in srgb, var(--tone,var(--color-muted)) 18%, transparent)}
.rdt-hop-line{flex:1; width:2px; min-height:var(--sp-4); background:linear-gradient(var(--color-border-strong), var(--color-border)); margin:var(--sp-1) 0}
.rdt-hop-card{flex:1; min-width:0; padding:var(--sp-4); margin-bottom:var(--sp-4)}
.rdt-hop.is-last .rdt-hop-card{margin-bottom:0}
.rdt-hop-top{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.rdt-hop-status{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--tone,var(--color-text))}
.rdt-hop-type{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-muted);
  border:1px solid var(--color-border); border-radius:var(--r-full); padding:.1em .6em}
.rdt-hop-ms{margin-left:auto; color:var(--color-muted); font-size:var(--fs-sm); font-variant-numeric:tabular-nums}
.rdt-hop-url{display:block; margin-top:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--color-accent-2); word-break:break-all; line-height:1.5}
.rdt-hop-err{margin-top:var(--sp-2); color:var(--rdt-bad); font-size:var(--fs-sm)}

/* per-hop headers disclosure */
.rdt-headers{margin-top:var(--sp-3)}
.rdt-headers summary{cursor:pointer; color:var(--color-muted); font-size:var(--fs-sm); font-weight:700; list-style:revert}
.rdt-headers summary:hover{color:var(--color-text)}
.rdt-htbl{margin-top:var(--sp-2); border:1px solid var(--color-border); border-radius:var(--r-md); overflow:hidden}
.rdt-hrow{display:flex; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--color-border); background:var(--color-bg)}
.rdt-hrow:first-child{border-top:0}
.rdt-hk{flex:none; width:34%; max-width:180px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); word-break:break-word}
.rdt-hv{flex:1; min-width:0; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text); word-break:break-word}

/* ---------- section + heading ---------- */
.rdt-section{margin-top:var(--sp-6)}
.rdt-h3{font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--color-text); margin:0 0 var(--sp-3)}

/* ---------- findings ---------- */
.rdt-find-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.rdt-find{display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md); background:var(--color-surface);
  border:1px solid var(--color-border); border-left-width:4px}
.rdt-find.lvl-bad{border-left-color:var(--rdt-bad)}
.rdt-find.lvl-warn{border-left-color:var(--rdt-warn)}
.rdt-find.lvl-info{border-left-color:var(--rdt-info)}
.rdt-find.lvl-good{border-left-color:var(--rdt-ok)}
.rdt-find-ico{flex:none; width:1.6em; height:1.6em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85em; color:var(--color-primary-fg)}
.lvl-bad .rdt-find-ico{background:var(--rdt-bad)}
.lvl-warn .rdt-find-ico{background:var(--rdt-warn)}
.lvl-info .rdt-find-ico{background:var(--rdt-info)}
.lvl-good .rdt-find-ico{background:var(--rdt-ok)}
.rdt-find-main{min-width:0}
.rdt-find-msg{font-size:var(--fs-base); line-height:1.5}
.rdt-find-fix{display:flex; gap:var(--sp-2); align-items:baseline; margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--color-muted)}
.rdt-find-fix-l{font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--color-primary-fg); background:var(--color-primary); padding:.15em .5em; border-radius:var(--r-sm); flex:none}

/* ---------- security headers ---------- */
.rdt-sec-head{display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4)}
.rdt-sec-grade{flex:none; width:64px; height:64px; border-radius:var(--r-lg); border:2px solid; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-3xl)}
.rdt-sec-score{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700}
.rdt-sec-score b{font-size:1.1em}
.rdt-sec-score span{color:var(--color-muted); font-weight:400; font-size:var(--fs-base)}
.rdt-sec-sub{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}
.rdt-sec-rows{display:flex; flex-direction:column; gap:var(--sp-1)}
.rdt-sec-row{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--color-border)}
.rdt-sec-row:first-child{border-top:0}
.rdt-sec-mark{flex:none; width:1.4em; height:1.4em; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:800; color:var(--color-primary-fg)}
.rdt-sec-mark.ok{background:var(--rdt-ok)} .rdt-sec-mark.bad{background:var(--color-border-strong)}
.rdt-sec-main{flex:1; min-width:0}
.rdt-sec-name{font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600; color:var(--color-text)}
.rdt-sec-val{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); word-break:break-word; margin-top:2px}
.rdt-sec-rec{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:2px}
.rdt-sec-rec-l{font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--rdt-warn)}
.rdt-sec-rec code{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--r-sm); padding:.1em .5em; word-break:break-word}
.rdt-sec-pts{flex:none; font-size:var(--fs-xs); color:var(--color-muted); font-variant-numeric:tabular-nums; padding-top:2px}
.rdt-copy{flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--r-sm);
  border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-muted); cursor:pointer}
.rdt-copy svg{width:13px; height:13px}
.rdt-copy:hover{border-color:var(--color-primary); color:var(--color-text)}
.rdt-copy.done{color:var(--rdt-ok); border-color:var(--rdt-ok)}

/* ---------- footer ---------- */
.rdt-footer{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6);
  padding-top:var(--sp-4); border-top:1px solid var(--color-border)}
.rdt-mini{padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.rdt-mini-ico{display:inline-flex; width:1.1em; height:1.1em}
.rdt-mini-ico svg{width:100%; height:100%}
.rdt-mini.done{color:var(--rdt-ok); border-color:var(--rdt-ok)}
.rdt-links{display:flex; gap:var(--sp-4); flex-wrap:wrap}
.rdt-crosslink{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--color-accent-2); font-size:var(--fs-sm); font-weight:700; text-decoration:none}
.rdt-crosslink:hover{color:var(--color-primary)}
.rdt-crosslink-ico{display:inline-flex; width:.9em; height:.9em}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .rdt-form{flex-direction:column}
  .rdt-verdict{flex-direction:column; text-align:center}
  .rdt-verdict-host,.rdt-stats{justify-content:center}
  .rdt-hop-ms{margin-left:0; width:100%}
  .rdt-hk{width:100%; max-width:none}
  .rdt-hrow{flex-wrap:wrap}
  .rdt-footer{flex-direction:column; align-items:flex-start}
}