/* =========================================================================
 * searchcheck.css — the editable stylesheet.
 *
 * tw-subset.css is frozen (generated by tools/build_css.php from the compiled
 * Tailwind bundles the live site served). Everything new goes here.
 * ========================================================================= */

/* ------------------------------------------------------------------ reset -- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  background: #191F6C;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: inherit; }

button { font: inherit; }

code, pre, .font-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------- gradients --
 * Per-page background, set as a body class from the scanner config. The three
 * variants are lifted verbatim from the React sources — aeo/geo/seo/product share
 * one, favicon and pagespeed share the other.
 */

.bg-scanner   { background: linear-gradient(135deg, #191F6C 0%, #0d1340 50%, #111a4a 100%); }
.bg-scanner-b { background: linear-gradient(135deg, #191F6C 0%, #0f1447 60%, #0a0e35 100%); }

/* ------------------------------------------------------------- animations --
 * framer-motion's job, done in CSS. Entrance transforms become one keyframe with
 * the per-item stagger passed as an inline animation-delay, matching the
 * `delay: index * 0.05` the React components computed. See docs/PARITY.md item 7.
 */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fx-in { animation: fadeUp .4s ease both; }
.fx-fade { animation: fadeIn .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .fx-in, .fx-fade { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------- collapsing --
 * AnimatePresence's height 0<->auto has no CSS equivalent worth the JS. This is
 * the same display toggle the shipped ai-agent-checker uses (app.ts:2352), so the
 * behaviour is already familiar in production.
 */

.collapse-body { display: none; }
.collapse-body.open { display: block; }
.collapse-caret { transition: transform .2s ease; }
.collapse-caret.open { transform: rotate(180deg); }

/* The FAQ uses a native <details> and draws its own caret, so nothing rotated it
 * — an open item kept pointing down, which reads as "it didn't expand" even
 * though the answer is right there. */
.faq-caret { display: inline-block; transition: transform .2s ease; }
details[open] > summary .faq-caret { transform: rotate(180deg); }

/* ------------------------------------------------------------ focus rings -- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------- added utilities --
 * tw-subset.css is generated from the classes that appear in the React sources,
 * so a utility used ONLY by markup that shared.js builds at runtime is not in it.
 * Tailwind has the same blind spot — it cannot see a class assembled by string
 * concatenation — which is what the workspace-lib-gotchas memo ran into.
 *
 * tools/render_test.php asserts that every class shared.js emits resolves in one
 * of the two stylesheets, so this list cannot silently fall behind again.
 */

.pb-3 { padding-bottom: calc(var(--spacing) * 3); }

@media (width >= 40rem) {
  .sm\:gap-6 { gap: calc(var(--spacing) * 6); }
}

/* ------------------------------------------------------------ JS hooks ----
 * Selector targets for shared.js, deliberately unstyled. Listed so nobody
 * "cleans up" an apparently unused class out of the markup.
 *   .score-arc      the animated ring stroke
 *   .group-toggle   category header button
 *   .check-toggle   individual check row button
 *   .check-card     wrapper, used for hit-testing
 *   .ps-tab         PageSpeed mobile/desktop tab (styled inline, since its colours
 *                   flip with the active state)
 *   .faq-item       FAQ <details> element
 */

/* ----------------------------------------------------------------- print -- */

@media print {
  body { background: #fff; color: #000; }
  .no-print { display: none !important; }
}