/* ════════════════════════════════════════════════════════════════════
   AURORA — UI2 PAGE-SPECIFIC SURFACE PATCHES
   Companion to aurora-ui2-dark.css. Some flagship + tool pages hardcode
   light surfaces (rgba(255,255,255,…), #fff !important) in their own
   per-page CSS, which the token redefinition in aurora-ui2-dark.css can't
   reach — leaving light text on a light card. These page-scoped rules
   convert those hardcoded light surfaces to glass-dark. NO markup/JS
   change; load AFTER aurora-ui2-dark.css. Only loaded on the pages that
   need it (pricing, login, samples, methodology, tool landings).
   ════════════════════════════════════════════════════════════════════ */

/* ── Shared public-marketing primitives (public-marketing-ui2.css) ──
   nav, page-header, footer hardcode light surfaces; fix once for every
   marketing page (pricing, methodology, samples, tool landings). ── */
body.ui2 nav.ui2-nav { background: rgba(10,10,30,0.82) !important; border-bottom-color: rgba(255,255,255,0.10) !important; }
body.ui2 nav.ui2-nav .nav-user { background: rgba(255,255,255,0.08) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.16) !important; }
body.ui2 .ui2-page-header { background: transparent !important; }
body.ui2 footer.ui2-footer { background: rgba(255,255,255,0.03) !important; border-top-color: rgba(255,255,255,0.10) !important; }

/* ════════ PRICING (body.ui2.site-pricing) ════════ */
body.ui2.site-pricing .plan,
body.ui2.site-pricing .compare-table,
body.ui2.site-pricing details.ui2-faq,
body.ui2.site-pricing .final-cta {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.ui2.site-pricing .plan.featured {
  background: rgba(168,85,247,0.12) !important;
  border-color: var(--ui2-amber-500) !important;
}
body.ui2.site-pricing .billing-option,
body.ui2.site-pricing .plan.featured .billing-option {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ui2-ink) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
body.ui2.site-pricing .billing-option.is-selected,
body.ui2.site-pricing .plan.featured .billing-option.is-selected {
  background: rgba(168,85,247,0.22) !important;
  border-color: var(--ui2-amber-500) !important;
  color: var(--ui2-ink) !important;
}
body.ui2.site-pricing .plan.featured .plan-cta {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.ui2.site-pricing .compare-table tbody tr:hover { background: rgba(255,255,255,0.06) !important; }
body.ui2.site-pricing footer.ui2-footer { background: rgba(255,255,255,0.03) !important; border-top-color: rgba(255,255,255,0.10) !important; }
body.ui2.site-pricing .final-cta .btn-secondary { background: rgba(255,255,255,0.06) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.18) !important; }
/* recommend strip (hero) + the light section wrapper behind the compare table */
body.ui2.site-pricing .recommend-strip { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }
body.ui2.site-pricing .compare,
body.ui2.site-pricing .compare.ui2-reveal { background: transparent !important; }
/* light pill buttons → on-theme: nav CTA gradient, secondary plan CTA glass */
body.ui2 nav.ui2-nav .nav-cta { background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important; color: #fff !important; border-color: transparent !important; }
body.ui2.site-pricing .plan-cta-secondary { background: rgba(255,255,255,0.06) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.18) !important; }

/* ════════ METHODOLOGY (body.ui2.site-methodology) ════════ */
/* .layer cards use `background: white` (not caught by token redefinition);
   .compare-card is already glassed by aurora-ui2-dark's [class*="card"]. */
body.ui2.site-methodology .layer,
body.ui2.site-methodology .meth-faq-item { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }

/* ════════ LOGIN (body.page-site-login) — auth page, CSS-only re-skin ════════
   NOTE: .google-btn is intentionally LEFT light — Google's sign-in branding
   requires a white button with the multicolour G; dark text on it is correct. */
body.page-site-login .site-poster,
body.page-site-login .site-login-card { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }
body.page-site-login .poster-point,
body.page-site-login .promo-banner,
body.page-site-login .hint { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; }
body.page-site-login .tab.active { background: rgba(168,85,247,0.20) !important; color: var(--ui2-ink) !important; }
body.page-site-login .badge,
body.page-site-login .poster-badge { background: rgba(168,85,247,0.24) !important; color: var(--ui2-ink) !important; border-color: rgba(168,85,247,0.4) !important; }
/* Google sign-in button stays white (brand) — but the dark skin turned its
   label light → invisible. Force Google's standard dark label on it. */
body.page-site-login .google-btn,
body.page-site-login .google-btn span,
body.page-site-login .google-btn * { color: #3c4043 !important; }

/* ════════ SAMPLE REPORTS (body.ui2.site-samples) ════════
   Individual report pages add metric cards, data tables, hint/excerpt
   boxes that hardcode light surfaces. Glass-dark them. */
body.ui2.site-samples .metric, body.ui2.site-samples .table-wrap,
body.ui2.site-samples .hint, body.ui2.site-samples .excerpt,
body.ui2.site-samples .panel, body.ui2.site-samples .report-section,
body.ui2.site-samples .data-table, body.ui2.site-samples .callout {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body.ui2.site-samples table { background: transparent !important; }
body.ui2.site-samples th, body.ui2.site-samples td { background: transparent !important; border-color: rgba(255,255,255,0.10) !important; }
body.ui2.site-samples thead th, body.ui2.site-samples tr:nth-child(even) td { background: rgba(255,255,255,0.03) !important; }

/* ════════ INDUSTRY INDEX (body.ui2.site-industry — e.g. ontario-dental) ════════
   Page hardcodes warm-white surfaces on its hero/sections/index panels.
   Full-width bands → transparent (dark body shows); cards → glass-dark. */
body.ui2.site-industry .hero, body.ui2.site-industry .section { background: transparent !important; }
body.ui2.site-industry .stat, body.ui2.site-industry .index-panel, body.ui2.site-industry .clinic,
body.ui2.site-industry .filter-bar, body.ui2.site-industry .claim-box, body.ui2.site-industry .panel,
body.ui2.site-industry .disclaimer, body.ui2.site-industry .card {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important;
}
body.ui2.site-industry .btn-secondary, body.ui2.site-industry a.secondary {
  background: rgba(255,255,255,0.06) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.18) !important;
}
body.ui2.site-industry .btn-primary {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important; color: #fff !important; border-color: transparent !important;
}

/* ════════ GROWTH DELIVERY (body.ui2.site-growth) ════════ */
body.ui2.site-growth .mode-note, body.ui2.site-growth .delivery-card, body.ui2.site-growth .status-box {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important;
}
body.ui2.site-growth .btn {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
  color: #fff !important; border-color: transparent !important;
}
body.ui2.site-growth .retry-btn {
  background: rgba(255,255,255,0.06) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.18) !important;
}

/* ════════ TOOL LANDINGS (body.ui2.site-tool) + free-tools listing ════════
   Shared tool shell (tools-ui2.css) hardcodes `background: white` on the
   form/result/engine surfaces. Glass-dark them. Tool form/result JS is
   untouched — CSS only. */
body.ui2.site-tool nav, body.ui2.site-free-tools nav { background: rgba(10,10,30,0.82) !important; border-bottom-color: rgba(255,255,255,0.10) !important; }
body.ui2.site-tool .nav-user, body.ui2.site-free-tools .nav-user { background: rgba(255,255,255,0.08) !important; color: var(--ui2-ink) !important; border-color: rgba(255,255,255,0.16) !important; }
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-tool .engine-card, body.ui2.site-tool .check-pts,
body.ui2.site-tool .reply-box, body.ui2.site-tool .reply-output, body.ui2.site-tool .output-box,
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,
body.ui2.site-free-tools .tool-card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* editorial-redesign.css `.site-tool` result surfaces hardcode warm-white
   (rgba(255,253,250,…) !important) with now-light --ink text → glass-dark.
   Higher specificity (body.ui2.site-tool .X) + !important beats them.
   Coloured status tints (.sentiment-banner.neutral/.negative, .error-msg)
   are left as-is — low-alpha amber/red tints read fine on dark. */
body.ui2.site-tool .score-card, body.ui2.site-tool .grade-hero, body.ui2.site-tool .result,
body.ui2.site-tool .score-section, body.ui2.site-tool .results .score-section,
body.ui2.site-tool .industry-note, body.ui2.site-tool .starter-cta,
body.ui2.site-tool .sentiment-banner, body.ui2.site-tool .sentiment-banner.positive,
body.ui2.site-tool .email-gate, body.ui2.site-tool .bottom-cta,
body.ui2.site-tool .industry-warning, body.ui2.site-tool .js-render-banner,
body.ui2.site-tool .fetch-fail-banner,
body.ui2.site-tool .score-display, body.ui2.site-tool .results {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* shared tool content boxes (intro lead, how-to guide, info) */
body.ui2.site-tool .lead-box, body.ui2.site-tool .how-to, body.ui2.site-tool .info-box, body.ui2.site-tool .example-box, body.ui2.site-tool .cta-box, body.ui2.site-tool .tip-box, body.ui2.site-tool .note-box,
body.ui2.site-free-tools .lead-box, body.ui2.site-free-tools .how-to, body.ui2.site-free-tools .info-box, body.ui2.site-free-tools .cta-box {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important;
}
/* robots-checker: recommendations box + raw robots.txt code block */
body.ui2.site-tool .recs { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }
body.ui2.site-tool .raw-block, body.ui2.site-tool pre.raw-block { background: rgba(0,0,0,0.28) !important; border-color: rgba(255,255,255,0.12) !important; color: #E0CCFF !important; }
/* error/fetch-fail tip box (edge state) — glass-dark, keep a red accent border */
body.ui2.site-tool .ffb-tip, body.ui2.site-tool .fetch-fail-banner .ffb-tip {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,120,110,0.32) !important;
}
/* links sitting on violet/accent-tinted boxes → brighten for contrast */
body.ui2.site-tool .industry-note a, body.ui2.site-tool .ffb-tip a, body.ui2.site-tool .sentiment-banner a { color: #E7DBFF !important; }
/* CTA links rendered as solid accent buttons (e.g. .empty-state a) — aurora's
   body.ui2 a violet rule tints their text invisible on the accent fill.
   Give them the brand gradient + white text. */
body.ui2.site-tool .empty-state a, body.ui2.site-industry .empty-state a {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
  color: #fff !important; border-color: transparent !important;
}