/* ============================================================================
   AI Visibility: 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.
   ========================================================================== */
.aiv{
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}
.aiv *{box-sizing:border-box}
.aiv ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- tone helpers ---------- */
.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)}

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

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

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

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

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

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

/* ---------- THE MATRIX ---------- */
.aiv-matrix-legend{display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; margin-bottom:var(--sp-3); font-size:var(--fs-xs); color:var(--color-muted)}
.aiv-legend-item{display:inline-flex; align-items:center; gap:var(--sp-2)}
.aiv-legend-na{display:inline-flex; align-items:center; gap:var(--sp-1)}
.aiv-matrix{border:1px solid var(--color-border); border-radius:var(--r-lg); overflow:hidden; background:var(--color-surface)}
.aiv-mx-row{display:grid; grid-template-columns:7.5rem repeat(3, 1fr); border-top:1px solid var(--color-border)}
.aiv-mx-row:first-child{border-top:0}
.aiv-mx-head{background:var(--color-surface-2)}
.aiv-mx-vendor{padding:var(--sp-3); font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--color-text);
  display:flex; align-items:center; border-right:1px solid var(--color-border); background:var(--color-surface-2)}
.aiv-mx-head .aiv-mx-vendor{background:transparent}
.aiv-mx-colh{font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--color-muted); justify-content:center}
.aiv-mx-cell{padding:var(--sp-2); display:flex; flex-wrap:wrap; gap:var(--sp-1); align-items:center; justify-content:center;
  border-right:1px solid var(--color-border); min-height:2.6rem}
.aiv-mx-cell:last-child{border-right:0}
.aiv-mx-none{color:var(--color-border-strong); font-size:var(--fs-sm)}

.aiv-mx-chip{display:inline-flex; align-items:center; gap:.35em; padding:.2em .55em; border-radius:var(--r-full);
  border:1px solid var(--color-border); font-size:var(--fs-xs); font-family:var(--font-mono); cursor:default; white-space:nowrap}
.aiv-chip-g{font-weight:800; line-height:1}
.aiv-chip-ua{font-size:.92em}
.aiv-chip-ok{border-color:color-mix(in srgb, var(--color-success) 55%, transparent); background:color-mix(in srgb, var(--color-success) 12%, transparent); color:var(--color-success)}
.aiv-chip-ok .aiv-chip-ua{color:var(--color-text)}
.aiv-chip-bad{border-color:color-mix(in srgb, var(--color-danger) 60%, transparent); background:color-mix(in srgb, var(--color-danger) 14%, transparent); color:var(--color-danger)}
.aiv-chip-bad .aiv-chip-ua{color:var(--color-text)}
/* training "choice" chips: neutral, never alarming: blocking training is not a penalty */
.aiv-chip-choice{border-color:var(--color-border-strong); background:var(--color-surface-2); color:var(--color-muted)}
.aiv-chip-choice .aiv-chip-ua{color:var(--color-muted)}
.aiv-mx-chip.is-choice{border-style:dashed}

.aiv-mx-search{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--color-border); border-radius:var(--r-lg); background:var(--color-surface)}
.aiv-mx-search-lbl{font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--color-text)}
.aiv-mx-search-hint{font-size:var(--fs-xs); color:var(--color-muted)}
.aiv-mx-search-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto}
.aiv-matrix-note{margin-top:var(--sp-3); font-size:var(--fs-xs); color:var(--color-muted); line-height:1.6;
  border-left:2px solid var(--color-border-strong); padding-left:var(--sp-3)}

/* ---------- "What AI sees" ---------- */
.aiv-whatai-sub{color:var(--color-muted); font-size:var(--fs-sm); margin:0 0 var(--sp-3)}
.aiv-whatai-meta{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.aiv-whatai-pill{font-size:var(--fs-xs); font-family:var(--font-mono); padding:.2em .7em; border-radius:var(--r-full);
  background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text)}
.aiv-whatai-flag{font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  padding:.2em .7em; border-radius:var(--r-full); color:var(--color-danger); border:1px solid var(--color-danger);
  background:color-mix(in srgb, var(--color-danger) 12%, transparent)}
.aiv-term{padding:var(--sp-4); background:var(--color-bg); border:1px solid var(--color-border)}
.aiv-term-pre{margin:0; font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.6; color:var(--color-accent-2);
  white-space:pre-wrap; word-break:break-word; max-height:16rem; overflow:auto}
.aiv-term-empty{border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 8%, var(--color-bg)); text-align:center}
.aiv-term-empty-big{font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl); color:var(--color-danger)}
.aiv-term-empty-sub{color:var(--color-muted); font-size:var(--fs-sm); line-height:1.6; max-width:40rem; margin:var(--sp-2) auto 0}
.aiv-term-pre-dim{color:var(--color-muted); opacity:.7; text-align:left; margin-top:var(--sp-3); max-height:8rem;
  border-top:1px dashed var(--color-border); padding-top:var(--sp-3)}

/* ---------- pillar cards ---------- */
.aiv-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); margin-top:var(--sp-4)}
.aiv-pl{padding:var(--sp-5); display:flex; flex-direction:column}
.aiv-pl-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.aiv-pl-label{font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--color-text)}
.aiv-pl-chip{flex:none; display:inline-flex; align-items:baseline; gap:1px; padding:.15em .6em; border-radius:var(--r-full);
  border:1px solid color-mix(in srgb, var(--tone,var(--color-border)) 45%, transparent); background:color-mix(in srgb, var(--tone,var(--color-border)) 10%, transparent)}
.aiv-pl-chip b{color:var(--tone,var(--color-text)); font-family:var(--font-display); font-size:var(--fs-lg)}
.aiv-pl-chip span{color:var(--color-muted); font-size:var(--fs-sm)}

.aiv-checks{display:flex; flex-direction:column; gap:var(--sp-1)}
.aiv-chk{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--color-border)}
.aiv-chk:first-child{border-top:0}
.aiv-chk-mark{flex:none; width:1.4em; height:1.4em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.78em; font-weight:800; color:var(--color-primary-fg); background:var(--tone,var(--color-muted))}
.aiv-chk.is-na .aiv-chk-mark{background:var(--color-border-strong)}
.aiv-chk-main{flex:1; min-width:0}
.aiv-chk-label{font-size:var(--fs-base); font-weight:600; color:var(--color-text)}
.aiv-chk-ev{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); margin-top:2px; word-break:break-word}
.aiv-chk-fix{display:flex; gap:var(--sp-2); align-items:baseline; margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--color-muted); line-height:1.5}
.aiv-chk-fix-l{flex:none; 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:.12em .5em; border-radius:var(--r-sm)}
.aiv-chk-pts{flex:none; font-size:var(--fs-xs); color:var(--color-muted); font-variant-numeric:tabular-nums; padding-top:2px}
.aiv-pl-foot{display:inline-flex; align-items:center; gap:var(--sp-1); 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:700; text-decoration:none}
.aiv-pl-foot:hover{color:var(--color-primary)}
.aiv-pl-foot-ico{display:inline-flex; width:.85em; height:.85em}

/* ---------- priority plan ---------- */
.aiv-plan{margin-top:var(--sp-6)}
.aiv-plan-h{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--color-text); margin:0 0 var(--sp-3)}
.aiv-plan-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-4)}
.aiv-plan-col{border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--sp-4); background:var(--color-surface)}
.aiv-plan-col-h{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.aiv-plan-dot{width:.7em; height:.7em; border-radius:50%; background:var(--color-muted)}
.aiv-plan-now .aiv-plan-dot{background:var(--color-danger)}
.aiv-plan-next .aiv-plan-dot{background:var(--color-status-partial)}
.aiv-plan-later .aiv-plan-dot{background:var(--color-accent-2)}
.aiv-plan-col-h b{font-family:var(--font-display); font-size:var(--fs-base)}
.aiv-plan-count{margin-left:auto; font-size:var(--fs-xs); color:var(--color-muted); background:var(--color-surface-2);
  border-radius:var(--r-full); padding:.1em .55em}
.aiv-plan-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.aiv-plan-item-top{display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap}
.aiv-plan-item-label{font-weight:600; font-size:var(--fs-sm); color:var(--color-text)}
.aiv-plan-item-pts{font-size:var(--fs-xs); color:var(--color-danger); font-variant-numeric:tabular-nums}
.aiv-plan-ease{font-size:var(--fs-xs); padding:.05em .45em; border-radius:var(--r-sm); border:1px solid var(--color-border); color:var(--color-muted)}
.aiv-plan-ease.ease-easy{color:var(--color-success); border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}
.aiv-plan-ease.ease-hard{color:var(--color-status-partial); border-color:color-mix(in srgb,var(--color-status-partial) 40%,transparent)}
.aiv-plan-item-fix{font-size:var(--fs-xs); color:var(--color-muted); line-height:1.5; margin-top:2px}
.aiv-plan-clean{grid-column:1/-1; text-align:center; color:var(--color-success); padding:var(--sp-5); font-weight:700}

/* ---------- footer: Copy for AI ---------- */
.aiv-footer{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6);
  padding-top:var(--sp-4); border-top:1px solid var(--color-border)}
.aiv-mini{padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.aiv-mini-ico{display:inline-flex; width:1.1em; height:1.1em}
.aiv-mini-ico svg{width:100%; height:100%}
.aiv-mini.done{color:var(--color-success); border-color:var(--color-success)}
.aiv-actions-note{color:var(--color-muted); font-size:var(--fs-sm)}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .aiv-form{flex-direction:column}
  .aiv-hero{flex-direction:column; text-align:center}
  .aiv-hero-host,.aiv-topfix{justify-content:center}
  .aiv-grid{grid-template-columns:1fr}
  .aiv-plan-cols{grid-template-columns:1fr}
  .aiv-mx-row{grid-template-columns:5.5rem repeat(3,1fr)}
  .aiv-mx-vendor{padding:var(--sp-2); font-size:var(--fs-xs)}
  .aiv-mx-chip{padding:.15em .4em}
  .aiv-chip-ua{display:none} /* tight phones: glyph-only chips, tooltip still names the bot */
  .aiv-mx-search-chips{margin-left:0}
}