/* ============================================================================
   Robots Tester: 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.
   ========================================================================== */
.rbt{
  --rbt-ok: var(--color-success);
  --rbt-bad: var(--color-danger);
  --rbt-warn: var(--color-status-partial);
  --rbt-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%;
}
.rbt *{box-sizing:border-box}
.rbt ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

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

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

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

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

/* ---------- tone helpers ---------- */
.tone-ok{--tone:var(--rbt-ok)} .tone-bad{--tone:var(--rbt-bad)} .tone-warn{--tone:var(--rbt-warn)} .tone-mut{--tone:var(--color-muted)}

/* ---------- pills ---------- */
.rbt-stats{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.rbt-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)}
.rbt-pill b{color:var(--color-text)}
.rbt-pill.tone-ok{border-color:color-mix(in srgb, var(--rbt-ok) 45%, transparent)} .rbt-pill.tone-ok b{color:var(--rbt-ok)}
.rbt-pill.tone-warn{border-color:color-mix(in srgb, var(--rbt-warn) 45%, transparent)} .rbt-pill.tone-warn b{color:var(--rbt-warn)}
.rbt-pill.tone-bad{border-color:color-mix(in srgb, var(--rbt-bad) 45%, transparent)} .rbt-pill.tone-bad b{color:var(--rbt-bad)}
.rbt-pill-l{opacity:.8}

/* ---------- status card ---------- */
.rbt-status-card{display:flex; gap:var(--sp-5); align-items:flex-start}
.rbt-status-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)}
.rbt-status-body{flex:1; min-width:0}
.rbt-status-host{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; color:var(--color-text); font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700}
.rbt-status-link{display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--color-accent-2); font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:400; text-decoration:none}
.rbt-status-link:hover{color:var(--color-primary)}
.rbt-xico{display:inline-flex; width:.85em; height:.85em}
.rbt-xico svg{width:100%; height:100%}
.rbt-status-headline{color:var(--color-muted); font-size:var(--fs-base); margin:var(--sp-1) 0 var(--sp-3)}
.rbt-status-sitemaps{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin-top:var(--sp-3)}
.rbt-sm-lbl{color:var(--color-muted); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.rbt-sm{max-width:100%; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); border:1px solid var(--color-border); background:var(--color-bg);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-accent-2); text-decoration:none; word-break:break-all}
.rbt-sm:hover{border-color:var(--color-primary)}
.rbt-sm-ok{border-left:3px solid var(--rbt-ok)}
.rbt-sm-bad{border-left:3px solid var(--rbt-bad); color:var(--color-muted)}

/* ---------- section + headings ---------- */
.rbt-section{margin-top:var(--sp-6)}
.rbt-h3{font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--color-text); margin:0 0 var(--sp-2)}
.rbt-sub{color:var(--color-muted); font-size:var(--fs-sm); margin:0 0 var(--sp-3); max-width:52rem}

/* ---------- AI crawler matrix ---------- */
.rbt-matrix{padding:var(--sp-2) var(--sp-4)}
.rbt-mx-vendor{font-family:var(--font-display); font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--color-muted); padding:var(--sp-3) 0 var(--sp-1); border-bottom:1px solid var(--color-border)}
.rbt-mx-row{display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) auto; gap:var(--sp-3); align-items:center;
  padding:var(--sp-2) 0; border-top:1px solid var(--color-border)}
.rbt-mx-vendor + .rbt-mx-row{border-top:0}
.rbt-mx-row.is-clickable{cursor:pointer}
.rbt-mx-row.is-clickable:hover{background:color-mix(in srgb, var(--color-primary) 6%, transparent)}
.rbt-mx-ua{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--color-text); font-weight:600; word-break:break-word}
.rbt-mx-grp{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--color-muted); word-break:break-word}
.rbt-purpose{justify-self:start; font-size:var(--fs-xs); font-weight:700; padding:.1em .6em; border-radius:var(--r-full); white-space:nowrap; border:1px solid var(--color-border)}
.rbt-p-train{color:var(--color-secondary); border-color:color-mix(in srgb, var(--color-secondary) 45%, transparent)}
.rbt-p-assist{color:var(--color-accent-2); border-color:color-mix(in srgb, var(--color-accent-2) 45%, transparent)}
.rbt-p-aisearch{color:var(--color-primary-soft); border-color:color-mix(in srgb, var(--color-primary) 45%, transparent)}
.rbt-p-search{color:var(--color-muted)}
.rbt-verdict{justify-self:end; display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-sm); font-weight:700; white-space:nowrap;
  padding:.15em .7em; border-radius:var(--r-full); border:1px solid var(--tone,var(--color-border)); color:var(--tone,var(--color-text));
  background:color-mix(in srgb, var(--tone,var(--color-border)) 12%, transparent)}
.rbt-verdict-ico{font-size:.9em}
.rbt-v-allowed{--tone:var(--rbt-ok)}
.rbt-v-blocked{--tone:var(--rbt-bad)}
.rbt-v-partial{--tone:var(--rbt-warn)}

/* ---------- interactive tester ---------- */
.rbt-tester{padding:var(--sp-4)}
.rbt-trow{display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap}
.rbt-tlabel{display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-xs); font-weight:700; color:var(--color-muted); min-width:0}
.rbt-tlabel-path{flex:1; min-width:12rem}
.rbt-tin{width:100%; font-family:var(--font-mono); font-size:var(--fs-base); padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--color-border); border-radius:var(--r-md); background:var(--color-bg); color:var(--color-text)}
.rbt-tin:focus-visible{outline:2px solid var(--color-focus); outline-offset:1px}
.rbt-tsel{font-size:var(--fs-base); padding:var(--sp-2) var(--sp-3); border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-bg); color:var(--color-text); min-width:12rem}
.rbt-tcustom{margin-top:var(--sp-3)}
.rbt-tbtn{white-space:nowrap; padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
.rbt-tout:not(:empty){margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--color-border)}
.rbt-tverdict{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl);
  padding:.15em .5em; border-radius:var(--r-md)}
.rbt-tverdict.is-ok{color:var(--rbt-ok); background:color-mix(in srgb, var(--rbt-ok) 14%, transparent)}
.rbt-tverdict.is-bad{color:var(--rbt-bad); background:color-mix(in srgb, var(--rbt-bad) 14%, transparent)}
.rbt-tv-ico{font-size:.9em}
.rbt-tdetail{margin-top:var(--sp-3); color:var(--color-muted); font-size:var(--fs-sm); line-height:1.7; display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap}
.rbt-tdetail 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}
.rbt-jump{margin-left:var(--sp-2); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs)}

/* ---------- file view ---------- */
.rbt-file{border:1px solid var(--color-border); border-radius:var(--r-md); overflow:auto; background:var(--color-bg); max-height:32rem}
.rbt-fline{display:grid; grid-template-columns:3.2em 1.6em 1fr; align-items:start; font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.6}
.rbt-fline:hover{background:color-mix(in srgb, var(--color-primary) 5%, transparent)}
.rbt-fno{text-align:right; padding:0 var(--sp-2); color:var(--color-muted); opacity:.6; user-select:none; border-right:1px solid var(--color-border)}
.rbt-fgutter{text-align:center; font-weight:800; color:var(--color-muted); cursor:default}
.rbt-fcode{padding:0 var(--sp-3) 0 var(--sp-1); color:var(--color-text); white-space:pre-wrap; word-break:break-word}
.rbt-fline.has-bad .rbt-fgutter{color:var(--rbt-bad)}
.rbt-fline.has-bad{background:color-mix(in srgb, var(--rbt-bad) 8%, transparent)}
.rbt-fline.has-warn .rbt-fgutter{color:var(--rbt-warn)}
.rbt-fline.has-warn{background:color-mix(in srgb, var(--rbt-warn) 7%, transparent)}
.rbt-fline.has-info .rbt-fgutter{color:var(--rbt-info)}
.rbt-fline.is-hot{background:color-mix(in srgb, var(--color-primary) 22%, transparent); box-shadow:inset 3px 0 0 var(--color-primary)}
.rbt-fline.is-hot .rbt-fcode{color:var(--color-text); font-weight:600}

/* ---------- lint list ---------- */
.rbt-find-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.rbt-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}
.rbt-find.is-clickable{cursor:pointer}
.rbt-find.is-clickable:hover{border-color:var(--color-border-strong)}
.rbt-find.lvl-bad{border-left-color:var(--rbt-bad)}
.rbt-find.lvl-warn{border-left-color:var(--rbt-warn)}
.rbt-find.lvl-info{border-left-color:var(--rbt-info)}
.rbt-find.lvl-good{border-left-color:var(--rbt-ok)}
.rbt-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 .rbt-find-ico{background:var(--rbt-bad)}
.lvl-warn .rbt-find-ico{background:var(--rbt-warn)}
.lvl-info .rbt-find-ico{background:var(--rbt-info)}
.lvl-good .rbt-find-ico{background:var(--rbt-ok)}
.rbt-find-main{min-width:0}
.rbt-find-msg{font-size:var(--fs-base); line-height:1.5; display:flex; gap:var(--sp-2); align-items:baseline; flex-wrap:wrap}
.rbt-find-line{flex:none; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:800; color:var(--color-accent-2);
  border:1px solid var(--color-border); border-radius:var(--r-sm); padding:.05em .4em}
.rbt-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)}
.rbt-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}

/* ---------- footer ---------- */
.rbt-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)}
.rbt-mini{padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.rbt-mini-ico{display:inline-flex; width:1.1em; height:1.1em}
.rbt-mini-ico svg{width:100%; height:100%}
.rbt-mini.done{color:var(--rbt-ok); border-color:var(--rbt-ok)}
.rbt-links{display:flex; gap:var(--sp-4); flex-wrap:wrap}
.rbt-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}
.rbt-crosslink:hover{color:var(--color-primary)}
.rbt-crosslink-ico{display:inline-flex; width:.9em; height:.9em}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .rbt-form{flex-direction:column}
  .rbt-status-card{flex-direction:column}
  .rbt-mx-row{grid-template-columns:1fr auto; grid-template-areas:"ua verdict" "purpose grp"; row-gap:var(--sp-1)}
  .rbt-mx-ua{grid-area:ua} .rbt-verdict{grid-area:verdict} .rbt-purpose{grid-area:purpose} .rbt-mx-grp{grid-area:grp}
  .rbt-trow{flex-direction:column; align-items:stretch}
  .rbt-tlabel-path,.rbt-tsel{min-width:0}
  .rbt-footer{flex-direction:column; align-items:flex-start}
}