/* ==========================================================================
   BatChecker — Official Rulebook Design System (from Claude Design handoff 1A)
   RED AND GREEN ARE RESERVED FOR LEGALITY VERDICTS ONLY.
   Squared corners throughout; circles only for stamps.
   ========================================================================== */

:root {
  --navy: #16294A;
  --navy-deep: #0F1D36;
  --chalk: #FCFBF8;
  --clay: #B85E3C;
  --clay-dark: #9D4E30;
  --cream: #EBD9C8;
  --slate: #5B6B85;
  --slate-body: #46587A;
  --legal: #1E7A44;
  --illegal: #C13527;
  --hairline: rgba(22,41,74,0.14);
  --hairline-chalk: rgba(252,251,248,0.14);
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  /* legacy aliases (tool pages) */
  --navy-tint: #EDF0F6; --clay-tint: #F6EBE4; --warm-gray: #F3F1EC;
  --border: rgba(22,41,74,0.14); --charcoal: #16294A; --charcoal-mid: #46587A;
  --charcoal-light: #5B6B85; --charcoal-muted: #8A93A6; --white: #FCFBF8;
  --legal-tint: #E7F2EB; --illegal-tint: #F9E9E7; --navy-dark: #0F1D36;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } }

body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--navy); background: var(--chalk); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: var(--navy); margin: 0 0 0.5em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 0.98; }
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; color: var(--slate-body); }
a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-dark); }
img { max-width: 100%; height: auto; }
input::placeholder { color: #8A93A6; opacity: 1; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: 0; background: var(--navy); color: var(--chalk); padding: 0.75rem 1.5rem; z-index: 1000; font-weight: 700; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* Eyebrows */
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase; display: inline-block; margin: 0 0 0.6rem; }
.eyebrow-clay { color: var(--clay); }
.eyebrow-cream { color: var(--cream); }
.eyebrow-chalk { color: rgba(252,251,248,0.8); }
.eyebrow-chalk::before { content: ""; display: inline-block; width: 36px; height: 3px; background: var(--clay); margin-right: 0.7rem; vertical-align: middle; }

/* Pills */
.pill { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 13px 3px; white-space: nowrap; }
.pill-legal { background: var(--legal); color: var(--chalk); }
.pill-illegal { background: var(--illegal); color: var(--chalk); }
.pill-neutral { background: var(--chalk); border: 1px solid rgba(22,41,74,0.3); color: var(--slate); }

/* Buttons */
.btn { display: inline-block; background: var(--clay); color: var(--chalk); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; border: none; padding: 16px 34px; cursor: pointer; }
.btn:hover { background: var(--clay-dark); color: var(--chalk); }
.btn-navy { background: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); }

/* ==== Edition bar ==== */
.edition-bar { background: var(--navy-deep); }
.edition-inner { max-width: 1280px; margin: 0 auto; padding: 8px 48px; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(252,251,248,0.75); }
.edition-verified { color: var(--chalk); }
@media (max-width: 768px) { .edition-inner { padding: 8px 20px; flex-direction: column; gap: 2px; } }

/* ==== Header ==== */
.site-header { background: var(--chalk); border-bottom: 1px solid var(--hairline); }
.site-header nav { max-width: 1280px; margin: 0 auto; padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 768px) { .site-header nav { padding: 14px 20px; position: relative; } }
.logo { display: flex; align-items: center; gap: 12px; }
.plate-mark { width: 34px; height: 34px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); display: flex; align-items: center; justify-content: flex-start; justify-content: center; }
.plate-check { color: var(--chalk); font-weight: 700; font-size: 1.05rem; line-height: 1; margin-top: -6px; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; color: var(--navy); letter-spacing: 0.01em; }
.logo-accent { color: var(--clay); }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(22,41,74,0.75); padding: 0.3rem 0.1rem 3px; }
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); border-bottom: 3px solid var(--clay); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; height: 3px; width: 100%; background: var(--navy); }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--chalk); border-bottom: 1px solid var(--hairline); flex-direction: column; gap: 0; padding: 0.5rem 20px 1rem; z-index: 100; }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 0.7rem 0.1rem; }
}

/* ==== Hero ==== */
.hero { background: var(--navy); overflow: hidden; }
.hero-grid { max-width: 1280px; margin: 0 auto; padding: 76px 48px 0; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.hero-copy h1 { color: var(--chalk); }
.hero-em { color: var(--cream); font-style: italic; }
.hero-sub { font-size: 1.06rem; line-height: 1.7; color: rgba(252,251,248,0.82); max-width: 54ch; }
.hero-search { display: flex; margin-top: 1.6rem; box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.hero-search input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 1.06rem; padding: 20px 22px; border: none; background: var(--chalk); color: var(--navy); }
.hero-example { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 500; font-size: 0.94rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(252,251,248,0.6); }
.hero-visual { position: relative; }
.hero-photo { position: relative; margin: -76px -48px 0 0; height: 620px; background: rgba(252,251,248,0.07); outline: 1.5px dashed rgba(252,251,248,0.3); outline-offset: -20px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(22,41,74,0.45) 0%, rgba(22,41,74,0.08) 45%, rgba(22,41,74,0.6) 100%); pointer-events: none; }
.hero-photo:has(img) { outline: none; }

.specimen { position: absolute; left: -36px; bottom: -16px; width: 450px; max-width: 90vw; background: var(--chalk); border: 1px solid rgba(22,41,74,0.2); box-shadow: 0 20px 48px rgba(0,0,0,0.32); padding: 20px 22px; }
.specimen-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; letter-spacing: 0.2em; text-transform: uppercase; }
.specimen-label { color: var(--clay); }
.specimen-no { color: var(--slate); }
.specimen-bat { font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; text-transform: uppercase; margin: 0; color: var(--navy); line-height: 1.05; }
.specimen-meta { font-size: 0.88rem; color: var(--slate); margin: 2px 0 10px; }
.specimen-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px dashed rgba(22,41,74,0.22); }
.specimen-league { font-size: 0.94rem; font-weight: 500; color: var(--navy); white-space: nowrap; }
.specimen-scope { color: var(--slate); font-weight: 400; }
.specimen-foot { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 4px; font-size: 0.78rem; color: var(--slate); }
.specimen-date { font-weight: 700; color: var(--navy); }
.rubber-stamp { position: absolute; top: 66px; right: 20px; width: 88px; height: 88px; border: 2.5px solid rgba(184,94,60,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(-11deg); }
.rubber-stamp::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(184,94,60,0.7); border-radius: 50%; }
.rubber-stamp span { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); text-align: center; line-height: 1.25; }

.foul-line { max-width: 1280px; margin: 68px auto 0; border-top: 3px dashed rgba(252,251,248,0.65); }
.hero::after { content: ""; display: block; height: 34px; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px 0; }
  .hero-photo { margin: 0; height: 320px; }
  .specimen { position: relative; left: 0; bottom: 0; width: 100%; margin-top: -60px; }
  .foul-line { margin-top: 40px; }
}

/* ==== Trust strip (§ clauses) ==== */
.trust-strip { background: var(--chalk); border-bottom: 1px solid var(--hairline); }
.trust-strip-inner { max-width: 1280px; margin: 0 auto; padding: 26px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.clause { display: flex; gap: 10px; align-items: baseline; }
.clause-no { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--clay); white-space: nowrap; }
.clause-text { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); line-height: 1.3; }
@media (max-width: 900px) { .trust-strip-inner { grid-template-columns: 1fr 1fr; padding: 20px; } }
@media (max-width: 520px) { .trust-strip-inner { grid-template-columns: 1fr; gap: 14px; } }

/* ==== Numbered sections ==== */
.section-numbered { padding: 78px 0 70px; }
.section-headrow { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.section-headrow h2 { margin-bottom: 0.6em; }
.ruling-grid { border-top: 2px solid var(--navy); display: grid; grid-template-columns: repeat(3, 1fr); }
.ruling-cell { padding: 28px 28px 0 0; }
.ruling-cell + .ruling-cell { border-left: 1px solid var(--hairline); padding-left: 28px; }
.ruling-no { display: block; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--clay); line-height: 1; margin-bottom: 0.35rem; }
.ruling-cell p { font-size: 0.97rem; line-height: 1.65; }
@media (max-width: 900px) { .ruling-grid { grid-template-columns: 1fr; } .ruling-cell + .ruling-cell { border-left: none; border-top: 1px solid var(--hairline); padding-left: 0; margin-top: 20px; } }

/* ==== Stamps band ==== */
.stamps-band { background: var(--navy); padding: 72px 0 76px; }
.stamps-band h2 { color: var(--chalk); }
.stamps-intro { color: rgba(252,251,248,0.75); max-width: 72ch; }
.stamps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2rem; }
.stamp-card { background: var(--chalk); padding: 28px; }
.stamp-badge { display: inline-block; border: 2px solid var(--navy); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; padding: 8px 14px 6px; margin-bottom: 1rem; }
.stamp-card p { font-size: 0.94rem; }
.rule-link { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 900px) { .stamps-grid { grid-template-columns: 1fr; } }

/* ==== Bulletin ==== */
.bulletin { padding: 72px 0 70px; }
.bulletin-head { justify-content: space-between; align-items: baseline; }
.bulletin-rows { border-top: 2px solid var(--navy); }
.bulletin-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.bulletin-date { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--navy); }
.bulletin-text { margin: 0; font-size: 0.97rem; }
.bulletin-text strong { color: var(--navy); }
@media (max-width: 768px) { .bulletin-row { grid-template-columns: 1fr; gap: 6px; } }

/* ==== CTA band ==== */
.cta-band { background: var(--clay); }
.cta-inner { max-width: 1280px; margin: 0 auto; padding: 58px 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-inner h2 { color: var(--chalk); margin-bottom: 0.2em; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.cta-inner p { color: rgba(252,251,248,0.85); margin: 0; }
@media (max-width: 768px) { .cta-inner { padding: 40px 20px; } }

/* ==== Footer ==== */
.site-footer { background: var(--navy-deep); color: rgba(252,251,248,0.6); padding: 52px 0 40px; }
.footer-grid { max-width: 1280px; margin: 0 auto; padding: 0 48px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; border-bottom: 1px solid var(--hairline-chalk); }
.footer-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; color: var(--chalk); margin: 0 0 0.6rem; }
.footer-disclaimer { font-size: 0.84rem; line-height: 1.7; color: rgba(252,251,248,0.6); max-width: 48ch; }
.footer-label { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(252,251,248,0.5); margin: 0 0 0.8rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: rgba(252,251,248,0.85); font-size: 0.9rem; }
.footer-col a:hover { color: var(--chalk); }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding: 22px 48px 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-display); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(252,251,248,0.45); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 28px; } .footer-bottom { padding: 20px 20px 0; } }

/* ==========================================================================
   Tool pages (restyled to the rulebook system, structure unchanged)
   ========================================================================== */
.page-section { padding: 3.2rem 0; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose h2::after { content: ""; display: block; width: 44px; height: 3px; background: var(--clay); margin-top: 0.45rem; }

.card, .checker-card { background: var(--chalk); border: 1px solid rgba(22,41,74,0.2); box-shadow: 0 2px 8px rgba(22,41,74,0.06); padding: 1.75rem; }
.checker-card { margin-top: 1.5rem; }
.checker-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sizing-inputs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .checker-inputs { grid-template-columns: 1fr; } .sizing-inputs { grid-template-columns: 1fr 1fr; } }
.checker-field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.4rem; }
.checker-field select, .checker-field input[type="number"] { width: 100%; font-family: var(--font-body); font-size: 1.02rem; padding: 0.8rem; min-height: 48px; border: 1px solid rgba(22,41,74,0.3); background: var(--chalk); color: var(--navy); }
.checker-field select:focus-visible, .checker-field input:focus-visible { border-color: var(--navy); }

.verdict-area { margin-top: 1.5rem; }
.verdict-area.has-verdict { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.verdict-stamp { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 1.3rem; border: 3px solid currentColor; transform: rotate(-2deg); margin-bottom: 1rem; }
.stamp-legal { color: var(--legal); background: var(--legal-tint); }
.stamp-illegal { color: var(--illegal); background: var(--illegal-tint); }
.stamp-partial { color: #8A6A00; background: #FBF3DC; }
.verdict-title { margin-bottom: 0.5rem; }
.verdict-reason { font-weight: 500; color: var(--navy); }
.verdict-evidence { margin: 0.75rem 0; padding-left: 1.25rem; color: var(--slate-body); }
.verdict-evidence li { margin-bottom: 0.35rem; }
.verdict-warning { background: #FBF3DC; border-left: 4px solid #8A6A00; padding: 0.65rem 0.9rem; }
.verdict-rulenote { color: var(--slate); font-size: 0.93rem; }
.verdict-caveat { font-size: 0.84rem; color: var(--slate); border-top: 1px dashed var(--hairline); padding-top: 0.75rem; margin-bottom: 0; }
.trust-bar { margin-top: 1.25rem; font-size: 0.93rem; color: var(--slate); }
.beta-note { background: #EDF0F6; padding: 0.8rem 1rem; font-size: 0.93rem; }

.verdict-table-wrap { overflow-x: auto; }
.verdict-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; border-top: 2px solid var(--navy); }
.verdict-table th, .verdict-table td { text-align: left; padding: 0.7rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.verdict-table th { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.verdict-table td.v-legal { color: var(--legal); font-weight: 700; }
.verdict-table td.v-not-legal { color: var(--illegal); font-weight: 700; }
.verdict-table td.v-check-size, .verdict-table td.v-legal-in-some-drops, .verdict-table td.v-legal-with-exception { color: #8A6A00; font-weight: 700; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1rem; font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--slate); }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--navy); }

.faq-section { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-question { width: 100%; text-align: left; background: none; border: none; font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--navy); padding: 1rem 0.25rem; cursor: pointer; min-height: 44px; }
.faq-answer { padding: 0 0.25rem 1rem; }

.last-reviewed { display: inline-block; font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); border: 1px solid rgba(22,41,74,0.3); padding: 0.3rem 0.7rem; margin-top: 1rem; }

.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 2rem 0; }
@media (max-width: 768px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card { display: block; background: var(--chalk); border: 1px solid rgba(22,41,74,0.2); border-top: 4px solid var(--navy); padding: 1.5rem; color: var(--navy); }
.tool-card:hover { border-color: var(--navy); box-shadow: 0 10px 24px rgba(22,41,74,0.10); color: var(--navy); }
.tool-card h3 { margin-bottom: 0.4rem; }
.tool-card p { margin: 0; font-size: 0.94rem; }
.tool-icon { width: 42px; height: 42px; color: var(--clay); margin-bottom: 0.75rem; display: block; }

/* Hero search suggestions (custom combobox) */
.hero-copy { position: relative; }
.hero-suggest { position: absolute; z-index: 50; left: 0; right: 0; margin-top: -2px; background: var(--chalk); border: 1px solid rgba(22,41,74,0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.3); max-height: 340px; overflow-y: auto; }
.hero-suggest-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px; color: var(--navy); font-size: 0.98rem; font-weight: 500; border-bottom: 1px solid var(--hairline); }
.hero-suggest-item:last-child { border-bottom: none; }
.hero-suggest-item:hover, .hero-suggest-item.is-active { background: #EDF0F6; color: var(--navy); }
.hero-suggest-sport { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }