/* tools-ui2.css — UI2 overlay for /tools/* and /free-tools/* checker pages.
 *
 * Loaded AFTER the existing inline <style> block on each tool page (and
 * after editorial-redesign.css if present), so this cascade wins via
 * `body.ui2.site-tool .x` and `body.ui2.site-free-tools .x`.
 *
 * Strategy: remap prod's --bg/--fg/--accent vars onto UI2 tokens, then
 * override typography, cards, buttons, badges, and form controls so the
 * existing tool DOM picks up the warm-amber editorial palette without
 * any HTML changes. Inline <style> in each tool page stays intact for
 * fallback.
 */

/* ─── Token remap: prod vars → UI2 tokens ───────────────────── */

body.ui2.site-tool,
body.ui2.site-free-tools {
  --bg:        var(--ui2-cream);
  --bg2:       #ffffff;
  --bg3:       var(--ui2-paper);
  --fg:        var(--ui2-ink);
  --fg2:       var(--ui2-ink-3);
  --fg3:       var(--ui2-ink-4);
  --accent:    var(--ui2-amber-500);
  --accent2:   var(--ui2-amber-700);
  --red:       var(--ui2-bad);
  --yellow:    var(--ui2-warn);
  --green:     var(--ui2-good);
  --font-body: var(--ui2-font-sans);
  --font-mono: var(--ui2-font-mono);
}

body.ui2.site-tool,
body.ui2.site-free-tools {
  font-family: var(--ui2-font-sans);
  background: var(--ui2-cream);
  color: var(--ui2-ink);
}

/* ─── Nav ───────────────────────────────────────────────────── */

body.ui2.site-tool nav,
body.ui2.site-free-tools nav {
  background: rgba(250, 246, 240, 0.92);
  border-bottom: 1px solid var(--ui2-rule);
}
body.ui2.site-tool .logo,
body.ui2.site-free-tools .logo {
  font-family: var(--ui2-logo-font-family);
  font-weight: var(--ui2-logo-font-weight);
  font-size: var(--ui2-logo-font-size);
  letter-spacing: var(--ui2-logo-letter-spacing);
}
body.ui2.site-tool .logo span,
body.ui2.site-free-tools .logo span {
  color: var(--ui2-logo-accent);
}
body.ui2.site-tool nav ul a:hover,
body.ui2.site-tool nav ul a.active,
body.ui2.site-free-tools nav ul a:hover,
body.ui2.site-free-tools nav ul a.active {
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .nav-cta,
body.ui2.site-free-tools .nav-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  border-radius: 999px;
  padding: .5rem 1.2rem;
  border: 1px solid var(--ui2-ink);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
body.ui2.site-tool .nav-signin,
body.ui2.site-free-tools .nav-signin {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .8rem;
}
body.ui2.site-tool .nav-cta:hover,
body.ui2.site-free-tools .nav-cta:hover {
  background: var(--ui2-amber-500);
  box-shadow: 0 4px 20px rgba(232, 89, 12, 0.25);
}
body.ui2.site-tool .nav-signin:hover,
body.ui2.site-free-tools .nav-signin:hover {
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .nav-user,
body.ui2.site-free-tools .nav-user {
  border: 1px solid var(--ui2-rule);
  background: rgba(255, 255, 255, 0.58);
}
body.ui2.site-tool .nav-user:hover,
body.ui2.site-free-tools .nav-user:hover {
  border-color: var(--ui2-amber-500);
  background: var(--ui2-amber-50);
}
body.ui2.site-tool .nav-user-initial,
body.ui2.site-free-tools .nav-user-initial {
  background: var(--ui2-amber-500);
  color: white;
}

/* ─── Page header ───────────────────────────────────────────── */

@media (max-width: 768px) {
  body.ui2.site-tool nav,
  body.ui2.site-free-tools nav {
    padding: 12px 16px !important;
  }

  body.ui2.site-tool nav ul,
  body.ui2.site-free-tools nav ul {
    display: none !important;
  }

  body.ui2.site-tool .nav-signin,
  body.ui2.site-free-tools .nav-signin {
    display: none !important;
  }
}

body.ui2.site-tool .page-header h1,
body.ui2.site-free-tools .page-header h1,
body.ui2.site-tool h1,
body.ui2.site-free-tools h1 {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ui2-ink);
}
body.ui2.site-tool .page-header h1 em,
body.ui2.site-free-tools .page-header h1 em,
body.ui2.site-tool h1 em,
body.ui2.site-free-tools h1 em {
  font-style: italic;
  background: none;
  -webkit-text-fill-color: var(--ui2-amber-600);
  color: var(--ui2-amber-600);
}
body.ui2.site-tool h2,
body.ui2.site-free-tools h2 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ui2-ink);
}
body.ui2.site-tool h3,
body.ui2.site-free-tools h3 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
  color: var(--ui2-ink);
}
body.ui2.site-tool .page-header .badge,
body.ui2.site-tool .badge,
body.ui2.site-free-tools .badge {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
  color: var(--ui2-amber-700);
  letter-spacing: 0.06em;
}
body.ui2.site-tool .page-header p,
body.ui2.site-free-tools .page-header p {
  color: var(--ui2-ink-3);
}

/* ─── Cards / sections ──────────────────────────────────────── */

body.ui2.site-tool .check-form,
body.ui2.site-tool .form-section,
body.ui2.site-tool .results-card,
body.ui2.site-tool .grade-hero,
body.ui2.site-tool .fixes,
body.ui2.site-tool .loading,
body.ui2.site-free-tools .check-form,
body.ui2.site-free-tools .form-section,
body.ui2.site-free-tools .results-card,
body.ui2.site-free-tools .grade-hero,
body.ui2.site-free-tools .fixes,
body.ui2.site-free-tools .loading {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 10px;
  box-shadow: var(--ui2-shadow-sm);
}

/* ─── Form controls ─────────────────────────────────────────── */

body.ui2.site-tool input,
body.ui2.site-tool select,
body.ui2.site-tool textarea,
body.ui2.site-free-tools input,
body.ui2.site-free-tools select,
body.ui2.site-free-tools textarea {
  background: var(--ui2-cream);
  border: 1px solid var(--ui2-rule);
  border-radius: 6px;
  color: var(--ui2-ink);
  font-family: var(--ui2-font-sans);
  transition: border-color 0.18s, box-shadow 0.18s;
}
body.ui2.site-tool input:focus,
body.ui2.site-tool select:focus,
body.ui2.site-tool textarea:focus,
body.ui2.site-free-tools input:focus,
body.ui2.site-free-tools select:focus,
body.ui2.site-free-tools textarea:focus {
  border-color: var(--ui2-amber-500);
  box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.12);
}
body.ui2.site-tool label,
body.ui2.site-free-tools label {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ─── Buttons ───────────────────────────────────────────────── */

body.ui2.site-tool .btn-check,
body.ui2.site-tool .btn-grade,
body.ui2.site-tool .btn-primary,
body.ui2.site-tool button[type="submit"],
body.ui2.site-free-tools .btn-check,
body.ui2.site-free-tools .btn-primary,
body.ui2.site-free-tools button[type="submit"] {
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  font-family: var(--ui2-font-sans);
  font-weight: 500;
  border: 1px solid var(--ui2-ink);
  border-radius: 999px;
  transition: transform 0.18s, background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
body.ui2.site-tool .btn-check:hover,
body.ui2.site-tool .btn-grade:hover,
body.ui2.site-tool .btn-primary:hover,
body.ui2.site-tool button[type="submit"]:hover,
body.ui2.site-free-tools .btn-check:hover,
body.ui2.site-free-tools .btn-primary:hover,
body.ui2.site-free-tools button[type="submit"]:hover {
  background: var(--ui2-amber-500);
  border-color: var(--ui2-amber-500);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(232, 89, 12, 0.22);
}
body.ui2.site-tool .btn-secondary,
body.ui2.site-free-tools .btn-secondary {
  background: transparent;
  color: var(--ui2-ink);
  border: 1px solid var(--ui2-rule);
  border-radius: 999px;
}
body.ui2.site-tool .btn-secondary:hover,
body.ui2.site-free-tools .btn-secondary:hover {
  border-color: var(--ui2-amber-500);
  color: var(--ui2-amber-600);
  background: var(--ui2-amber-50);
}

/* ─── Score ring / dial ─────────────────────────────────────── */

body.ui2.site-tool .score-ring .fg,
body.ui2.site-tool .score-ring .ring-fg {
  stroke: var(--ui2-amber-500);
}
body.ui2.site-tool .score-value,
body.ui2.site-tool .score-ring .ring-num,
body.ui2.site-tool .grade-letter {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .score-label,
body.ui2.site-tool .score-sublabel,
body.ui2.site-tool .score-ring .ring-label {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
  letter-spacing: 0.06em;
}
body.ui2.site-tool .score-sublabel a {
  color: var(--ui2-amber-600);
}

/* Engine cards */
body.ui2.site-tool .engine-card {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 8px;
}
body.ui2.site-tool .engine-card .name {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-tool .engine-card .engine-score {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .engine-card .engine-bar {
  background: var(--ui2-paper);
}
body.ui2.site-tool .engine-card .engine-bar-fill {
  background: var(--ui2-amber-500);
}

/* Grade letter colors */
body.ui2.site-tool .grade-letter.a { color: var(--ui2-good); }
body.ui2.site-tool .grade-letter.b { color: var(--ui2-amber-600); }
body.ui2.site-tool .grade-letter.c { color: var(--ui2-warn); }
body.ui2.site-tool .grade-letter.d { color: #ff8c42; }
body.ui2.site-tool .grade-letter.f { color: var(--ui2-bad); }
body.ui2.site-tool .grade-score {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-tool .grade-summary {
  color: var(--ui2-ink-3);
}
body.ui2.site-tool .grade-bar {
  background: var(--ui2-paper);
}

/* Severity badges */
body.ui2.site-tool .sev-high,
body.ui2.site-tool .fix-item .icon.fail {
  background: rgba(162, 63, 42, 0.12);
  color: var(--ui2-bad);
}
body.ui2.site-tool .sev-med,
body.ui2.site-tool .fix-item .icon.warn {
  background: rgba(182, 121, 31, 0.12);
  color: var(--ui2-warn);
}
body.ui2.site-tool .sev-low,
body.ui2.site-tool .fix-item .icon.pass {
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-700);
}

/* Emotional context block */
body.ui2.site-tool .emotional-context {
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
}
body.ui2.site-tool .ec-benchmark strong,
body.ui2.site-tool .ec-forecast strong {
  color: var(--ui2-amber-700);
}
body.ui2.site-tool .ec-stat {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}

/* GBP audit checks */
body.ui2.site-tool .check {
  background: var(--ui2-cream);
  border: 1px solid var(--ui2-rule);
  border-radius: 8px;
  transition: border-color 0.15s;
}
body.ui2.site-tool .check:hover {
  border-color: var(--ui2-amber-300);
}
body.ui2.site-tool .check input[type="checkbox"] {
  accent-color: var(--ui2-amber-500);
}
body.ui2.site-tool .check-pts {
  font-family: var(--ui2-font-mono);
  background: white;
  color: var(--ui2-ink-4);
  border: 1px solid var(--ui2-rule);
}
body.ui2.site-tool .form-section h2 .num {
  background: var(--ui2-amber-500);
  color: white;
  font-family: var(--ui2-font-mono);
}

/* Fixes list */
body.ui2.site-tool .fix-item {
  border-top-color: var(--ui2-rule);
}

/* Loading lines */
body.ui2.site-tool .load-line .check {
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .load-line .spinner {
  color: var(--ui2-amber-500);
}

/* ─── Footer ────────────────────────────────────────────────── */

body.ui2.site-tool footer,
body.ui2.site-free-tools footer {
  border-top: 1px solid var(--ui2-rule);
}
body.ui2.site-tool .footer-brand,
body.ui2.site-free-tools .footer-brand {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  font-size: 18px;
}
body.ui2.site-tool .footer-brand span,
body.ui2.site-free-tools .footer-brand span {
  color: var(--ui2-amber-500);
}
body.ui2.site-tool .footer-links a:hover,
body.ui2.site-free-tools .footer-links a:hover {
  color: var(--ui2-amber-600);
}
body.ui2.site-tool .footer-copy,
body.ui2.site-free-tools .footer-copy {
  color: var(--ui2-ink-4);
}

/* ─── Free-tools listing ────────────────────────────────────── */

body.ui2.site-free-tools .tool-card {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 10px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
body.ui2.site-free-tools .tool-card:hover {
  border-color: var(--ui2-amber-500);
  box-shadow: 0 8px 40px rgba(232, 89, 12, 0.08);
  transform: translateY(-2px);
}
body.ui2.site-free-tools .tool-card h3 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
}
body.ui2.site-free-tools .tool-card p {
  color: var(--ui2-ink-3);
}
body.ui2.site-free-tools .tool-icon,
body.ui2.site-free-tools .tool-card .tool-icon {
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-600);
}
body.ui2.site-free-tools .tool-badge {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-700);
  border: 1px solid var(--ui2-amber-200);
}

/* Schema generator code blocks */
body.ui2.site-tool pre,
body.ui2.site-tool code {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-paper);
  border: 1px solid var(--ui2-rule);
  color: var(--ui2-ink-2);
}

/* Review reply / generator boxes */
body.ui2.site-tool .reply-box,
body.ui2.site-tool .reply-output,
body.ui2.site-tool .output-box {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 10px;
}

/* Calculator-specific */
body.ui2.site-tool .calc-result,
body.ui2.site-tool .calc-output {
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
}
body.ui2.site-tool .calc-number,
body.ui2.site-tool .calc-bignum {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ui2-amber-600);
}