/* ============================================================================
   Stack Detector: 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, .panel-static/.card, .field) which the BaseLayout shell loads
   globally via global.css (AGENTS.md §2). No raw brand colours, fonts, spacing
   or radii here: only var(--…) host tokens. This tool has no brand-simulation
   surface (unlike Meta Inspector's social previews), so there is NO literal hex
   anywhere in this file.

   Cascade note (AGENTS.md §2f): on the LIVE site app.css loads BEFORE the host
   bundle, so the host wins same-specificity battles there (opposite of dev,
   where the shim loads first). Anywhere we override a property a host class
   sets (.field's margin, .btn's padding, …) we use a parent selector for extra
   specificity rather than relying on source order.
   ========================================================================== */
.stk{
  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%;
}
.stk *{box-sizing:border-box}
.stk ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

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

/* ---------- status / spinner ---------- */
.stk-status{min-height:1.6rem; text-align:center; color:var(--color-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-2)}
.stk-status.is-live{color:var(--color-text)}
.stk-spin{
  display:inline-block; width:0.9em; height:0.9em; margin-right:var(--sp-2);
  border:2px solid var(--color-border-strong); border-top-color:var(--color-primary);
  border-radius:var(--r-full); vertical-align:-0.15em;
  animation: stk-spin var(--dur-slow, .9s) linear infinite;
}
@keyframes stk-spin{to{transform:rotate(360deg)}}

/* ---------- error ---------- */
.stk-error{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--color-surface-2); border:1px solid var(--color-danger);
  border-radius:var(--r-lg); padding:var(--sp-4); margin:var(--sp-4) 0;
}
.stk-error-ico{font-size:var(--fs-xl); color:var(--color-danger); line-height:1}
.stk-error-msg{color:var(--color-muted); margin-top:var(--sp-1); font-size:var(--fs-sm)}

/* ---------- summary strip ---------- */
.stk-summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5); margin-bottom:var(--sp-5); flex-wrap:wrap;
}
.stk-summary-host{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--sp-1);
}
.stk-summary-text{font-size:var(--fs-lg); font-weight:600; color:var(--color-text)}
.stk-mini{font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3); display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap}
.stk-mini svg{width:1em; height:1em}
.stk-copyai.done{color:var(--color-success)}

/* ---------- empty state ---------- */
.stk-empty{padding:var(--sp-5); margin-bottom:var(--sp-5)}
.stk-empty-title{font-size:var(--fs-lg); font-weight:700; color:var(--color-text); margin-bottom:var(--sp-2)}
.stk-empty-sub{color:var(--color-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-3)}
.stk-empty-rows{display:flex; flex-direction:column; gap:var(--sp-2)}

/* ---------- generic key/value row (empty state raw signals) ---------- */
.stk-row{display:flex; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--color-border); font-size:var(--fs-sm)}
.stk-row:last-child{border-bottom:none}
.stk-key{color:var(--color-muted); min-width:9rem; flex-shrink:0}
.stk-val{color:var(--color-text); word-break:break-word; font-family:var(--font-mono)}

/* ---------- category panels ---------- */
.stk-catpanel{margin-bottom:var(--sp-5); padding:var(--sp-5)}
.stk-cat-title{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-accent-2);
  margin-bottom:var(--sp-4);
}
.stk-cardgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:var(--sp-3)}

/* ---------- detection card ---------- */
.stk-detcard{padding:var(--sp-4)}
.stk-det-head{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.stk-det-ico{font-size:var(--fs-lg); line-height:1; flex-shrink:0}
.stk-det-name{font-weight:600; color:var(--color-text); flex:1; min-width:0; overflow-wrap:anywhere}
.stk-det-conf{font-size:var(--fs-xs); font-weight:700; white-space:nowrap}
.stk-det-conf.tone-high{color:var(--color-success)}
.stk-det-conf.tone-medium{color:var(--color-status-partial)}
.stk-det-conf.tone-low{color:var(--color-muted)}

/* ---------- confidence bar ---------- */
.stk-bar{height:0.4rem; border-radius:var(--r-full); background:var(--color-surface-3); overflow:hidden; margin-bottom:var(--sp-3)}
.stk-bar-fill{height:100%; border-radius:var(--r-full); transition:width var(--dur-slow, .4s) var(--ease-out, ease)}
.stk-bar-fill.tone-high{background:var(--color-success)}
.stk-bar-fill.tone-medium{background:var(--color-status-partial)}
.stk-bar-fill.tone-low{background:var(--color-muted)}

/* ---------- evidence <details> ---------- */
.stk-details{font-size:var(--fs-xs)}
.stk-details summary{cursor:pointer; color:var(--color-muted); user-select:none}
.stk-details summary:hover{color:var(--color-text)}
.stk-evidence{margin:var(--sp-2) 0 0; padding-left:var(--sp-4); color:var(--color-muted); display:flex; flex-direction:column; gap:var(--sp-1)}
.stk-evidence li{list-style:disc}

/* ---------- analytics referral card ---------- */
.stk-analytics{display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4)}
.stk-analytics-ico{font-size:var(--fs-2xl); line-height:1; flex-shrink:0}
.stk-analytics-body div:first-child{font-weight:600; margin-bottom:var(--sp-1)}
.stk-analytics-link{font-size:var(--fs-sm); color:var(--color-accent-2)}
.stk-analytics-link:hover{color:var(--color-primary)}

/* ---------- responsive ---------- */
@media (max-width: 30rem){
  .stk-form{flex-direction:column}
  .stk-summary{flex-direction:column; align-items:flex-start}
  .stk-cardgrid{grid-template-columns:1fr}
}