/* ============================================================================
   Security Scanner: 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.
   ========================================================================== */
.sec{
  --sec-ok: var(--color-success);
  --sec-bad: var(--color-danger);
  --sec-warn: var(--color-status-partial);
  --sec-good: var(--color-accent-2);
  --sec-mut: var(--color-muted);

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

/* ---------- tone helpers ---------- */
.sec .tone-ok{--tone:var(--sec-ok)} .sec .tone-bad{--tone:var(--sec-bad)}
.sec .tone-warn{--tone:var(--sec-warn)} .sec .tone-good{--tone:var(--sec-good)}
.sec .tone-mut{--tone:var(--sec-mut)}

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

/* ---------- status / error ---------- */
.sec-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-base)}
.sec-status.is-live{color:var(--color-primary-soft)}
.sec-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:sec-spin .7s linear infinite; vertical-align:-2px; margin-right:var(--sp-2)}
@keyframes sec-spin{to{transform:rotate(360deg)}}
.sec-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))}
.sec-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.sec-error strong{color:var(--color-danger)}
.sec-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}

/* ---------- idle ---------- */
.sec-idle{max-width:42rem; margin:var(--sp-5) auto; text-align:center}
.sec-idle-t{color:var(--color-muted); font-size:var(--fs-base)}
.sec-idle-ex{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:center; margin-top:var(--sp-3)}
.sec-idle-lbl{color:var(--color-muted); font-size:var(--fs-sm); font-weight:700}
.sec-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)}
.sec-chip:hover{border-color:var(--color-primary); color:var(--color-text)}

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

/* ---------- score hero ---------- */
.sec-hero{display:flex; gap:var(--sp-6); align-items:center; padding:var(--sp-6)}
.sec-hero-ring{flex:none}
.sec-ring{position:relative; width:132px; height:132px}
.sec-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.sec-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.sec-ring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.sec-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.sec-ring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); color:var(--color-text)}
.sec-ring-of{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.sec-hero-body{flex:1; min-width:0}
.sec-hero-host{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--color-muted)}
.sec-grade-badge{display:inline-flex; align-items:center; justify-content:center; min-width:2em; height:2em; padding:0 .4em;
  border-radius:var(--r-md); font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--tone);
  border:2px solid var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent)}
.sec-hero-cms{padding:2px var(--sp-2); border-radius:var(--r-full); border:1px solid var(--color-border); color:var(--color-accent-2)}
.sec-verdict{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--color-text); margin:var(--sp-2) 0 var(--sp-3); line-height:var(--lh-tight)}
.sec-topfix{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center}
.sec-topfix-lbl{color:var(--color-muted); font-size:var(--fs-sm); font-weight:700}
.sec-topfix-clean{color:var(--color-success)}
.sec-topfix-pill{padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:600;
  color:var(--color-text); border:1px solid var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 12%, transparent)}

/* ---------- section grid ---------- */
.sec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin-top:var(--sp-5)}
@media (max-width:640px){.sec-grid{grid-template-columns:1fr}}
.sec-sec{padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column}
.sec-sec-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--color-border)}
.sec-sec-label{font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--color-text)}
.sec-sec-chip{flex:none; display:inline-flex; align-items:baseline; gap:1px; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-md);
  border:1px solid var(--tone); color:var(--tone); background:color-mix(in srgb, var(--tone) 10%, transparent); font-family:var(--font-mono)}
.sec-sec-chip b{font-size:var(--fs-base); font-weight:800}
.sec-sec-chip span{font-size:var(--fs-xs); color:var(--color-muted)}

/* ---------- check rows ---------- */
.sec-checks{display:flex; flex-direction:column; padding-top:var(--sp-2)}
.sec-chk{display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-2) 0; border-bottom:1px solid color-mix(in srgb, var(--color-border) 55%, transparent)}
.sec-chk:last-child{border-bottom:0}
.sec-chk-mark{flex:none; width:1.35em; height:1.35em; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:800; color:var(--tone); border:1.5px solid var(--tone); background:color-mix(in srgb, var(--tone) 12%, transparent); margin-top:2px}
.sec-chk.is-na .sec-chk-mark{opacity:.55}
.sec-chk-main{flex:1; min-width:0}
.sec-chk-label{font-weight:600; color:var(--color-text); font-size:var(--fs-sm)}
.sec-chk.is-na .sec-chk-label{color:var(--color-muted)}
.sec-chk-ev{color:var(--color-muted); font-size:var(--fs-xs); font-family:var(--font-mono); margin-top:1px; word-break:break-word}
.sec-chk-fix{margin-top:var(--sp-1); font-size:var(--fs-xs); color:var(--color-text)}
.sec-chk-fix-l{display:inline-block; font-weight:800; color:var(--color-status-partial); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:.72em; margin-right:var(--sp-1)}
.sec-chk-pts{flex:none; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); margin-top:2px}

/* ---------- section footer deep-link ---------- */
.sec-sec-foot{display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--color-border); color:var(--color-accent-2); font-size:var(--fs-sm); font-weight:600; text-decoration:none}
.sec-sec-foot:hover{color:var(--color-primary)}
.sec-sec-foot-ico{display:inline-flex; width:.9em; height:.9em}
.sec-sec-foot-ico svg{width:100%; height:100%}

/* ---------- priority plan ---------- */
.sec-plan{margin-top:var(--sp-6)}
.sec-plan-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--color-text); margin:0 0 var(--sp-4)}
.sec-plan-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
@media (max-width:760px){.sec-plan-cols{grid-template-columns:1fr}}
.sec-plan-col{border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--sp-4); background:var(--color-surface)}
.sec-plan-col-h{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); font-family:var(--font-display); font-size:var(--fs-base)}
.sec-plan-dot{width:.7em; height:.7em; border-radius:var(--r-full); background:var(--color-muted)}
.sec-plan-now .sec-plan-dot{background:var(--color-danger)}
.sec-plan-next .sec-plan-dot{background:var(--color-status-partial)}
.sec-plan-later .sec-plan-dot{background:var(--color-accent-2)}
.sec-plan-count{margin-left:auto; color:var(--color-muted); font-family:var(--font-mono); font-size:var(--fs-sm)}
.sec-plan-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.sec-plan-item{border-left:2px solid var(--color-border); padding-left:var(--sp-3)}
.sec-plan-now .sec-plan-item{border-left-color:var(--color-danger)}
.sec-plan-next .sec-plan-item{border-left-color:var(--color-status-partial)}
.sec-plan-later .sec-plan-item{border-left-color:var(--color-accent-2)}
.sec-plan-item-top{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.sec-plan-item-label{font-weight:700; font-size:var(--fs-sm); color:var(--color-text)}
.sec-plan-item-pts{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-danger)}
.sec-plan-ease{font-size:.7em; text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:800; padding:1px var(--sp-1); border-radius:var(--r-sm); color:var(--color-muted); border:1px solid var(--color-border)}
.sec-plan-ease.ease-easy{color:var(--color-success); border-color:color-mix(in srgb, var(--color-success) 50%, transparent)}
.sec-plan-ease.ease-medium{color:var(--color-status-partial); border-color:color-mix(in srgb, var(--color-status-partial) 50%, transparent)}
.sec-plan-ease.ease-hard{color:var(--color-danger); border-color:color-mix(in srgb, var(--color-danger) 50%, transparent)}
.sec-plan-item-fix{color:var(--color-muted); font-size:var(--fs-xs); margin-top:2px}
.sec-plan-clean{grid-column:1/-1; text-align:center; color:var(--color-success); padding:var(--sp-5); border:1px dashed var(--color-border); border-radius:var(--r-lg)}

/* ---------- actions (Copy for AI, Copy link, Save as PDF, Rescan) ---------- */
.sec-actions{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--color-border)}
.sec-actions-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3)}
.sec-mini{font-size:var(--fs-sm)}
.sec-mini-ico{display:inline-flex; width:1.1em; height:1.1em; vertical-align:-2px; margin-right:var(--sp-1)}
.sec-mini-ico svg{width:100%; height:100%}
.sec-mini.done{color:var(--color-success)}
.sec-actions-note{color:var(--color-muted); font-size:var(--fs-xs)}

/* ---------- print-only report header (hidden on screen, see @media print below) ---------- */
.sec-print-header{display:none}

/* ---------- WordPress platform advisory (the honest, cautionary callout) ---------- */
.sec-advisory{--adv:var(--color-status-partial); margin-top:var(--sp-5); padding:var(--sp-5) var(--sp-6); border-radius:var(--r-lg);
  border:1px solid var(--adv); border-left-width:4px; background:color-mix(in srgb, var(--adv) 9%, var(--color-surface))}
.sec-advisory.risk-critical{--adv:var(--color-danger)}
.sec-advisory.risk-elevated{--adv:var(--color-status-partial)}
.sec-advisory.risk-baseline{--adv:var(--color-accent-2)}
.sec-adv-head{display:flex; gap:var(--sp-3); align-items:flex-start}
.sec-adv-ico{flex:none; width:1.6em; height:1.6em; color:var(--adv); margin-top:2px}
.sec-adv-ico svg{width:100%; height:100%}
.sec-adv-tag{font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  font-weight:800; color:var(--adv)}
.sec-adv-headline{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:800; color:var(--color-text);
  line-height:var(--lh-tight); margin-top:2px}
.sec-adv-points{margin:var(--sp-4) 0 0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2)}
.sec-adv-points li{color:var(--color-text); font-size:var(--fs-sm); line-height:var(--lh-base)}
.sec-adv-points li::marker{color:var(--adv)}
.sec-adv-body{margin-top:var(--sp-4); color:var(--color-muted); font-size:var(--fs-sm); line-height:var(--lh-loose)}
.sec-adv-cta{display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); color:var(--color-primary);
  font-weight:700; font-size:var(--fs-sm); text-decoration:none}
.sec-adv-cta:hover{color:var(--color-primary-soft)}
.sec-adv-cta .sec-sec-foot-ico{width:.9em; height:.9em; display:inline-flex}
.sec-adv-cta .sec-sec-foot-ico svg{width:100%; height:100%}

/* ---------- print report: hide the interactive chrome, show a clean score + findings sheet ---------- */
@media print{
  .sec-form, .sec-status, .sec-idle, .sec-actions{display:none !important}
  .sec-print-header{display:block; margin-bottom:var(--sp-4); border-bottom:2px solid #000; padding-bottom:var(--sp-2)}
  .sec-print-title{font-size:1.3em; font-weight:800}
  .sec-print-meta{display:flex; gap:var(--sp-4); font-size:.9em; margin-top:4px}
  .sec-print-credit{font-size:.75em; color:#555; margin-top:4px}
  .sec-hero, .sec-advisory, .sec-sec, .sec-plan{break-inside:avoid}
  .sec-grid{display:block}
  a[href]::after{content:none}
}