/* ─── VioHunter V2 Design System ─────────────────────────────────────────────
   Load this AFTER per-page <style> blocks so :root aliases take precedence.
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─── V2 TOKENS + LEGACY ALIASES ──────────────────────────────────────────── */
:root {
  /* v2 palette */
  --paper: #FCFCFA;
  --ink: #1A1915;
  --gray: #6F6E69;
  --hairline: #E8E7E2;
  --surface-v2: #F4F4F1;
  --class-a: #C8361F;
  --class-b: #B97E10;
  --class-c: #3E5F8A;
  --green-v2: #2A6B3A;
  --blue-v2: #3E5F8A;
  --purple-v2: #6B4F88;

  /* legacy aliases — all old var() references resolve to v2 values */
  --bg: var(--paper);
  --surface: var(--surface-v2);
  --surface2: var(--paper);
  --border: var(--hairline);
  --accent: var(--ink);
  --accent2: var(--class-a);
  --text: var(--ink);
  --muted: var(--gray);
  --green: var(--green-v2);
  --blue: var(--blue-v2);
  --purple: var(--purple-v2);
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Schibsted Grotesk', sans-serif;
  --display: 'Schibsted Grotesk', sans-serif;
}

/* ─── BASE ─────────────────────────────────────────────────────────────────── */
html { background: var(--paper) !important; }
body { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans) !important; }
a { color: inherit; }

/* ─── SHARED NAV ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  gap: 1rem;
}
.nav-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex-shrink: 0; }
.nav-logo-icon { width: 20px; height: 20px; }
.nav-logo-text { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.nav-links { display: flex; align-items: center; }
.nav-link { font-family: var(--sans); font-size: 13px; color: var(--gray); text-decoration: none; padding: 0 .85rem; height: 52px; display: inline-flex; align-items: center; transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-open { background: var(--ink); color: var(--paper); border: none; border-radius: 6px; padding: .45rem 1.1rem; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: opacity .15s; white-space: nowrap; }
.nav-open:hover { opacity: .85; }

/* ─── SHARED FOOTER ────────────────────────────────────────────────────────── */
footer.v2-footer {
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  padding: 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-top: 4rem;
}
.footer-copy { font-family: var(--mono); font-size: 11px; color: var(--gray); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-link { font-family: var(--mono); font-size: 11px; color: var(--gray); text-decoration: none; transition: color .15s; }
.footer-link:hover { color: var(--ink); }
.footer-credit { font-family: var(--mono); font-size: 12px; color: var(--gray); }

/* ─── DARK HEADER/NAV OVERRIDES ────────────────────────────────────────────── */
header { background: var(--paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
nav:not(.v2-header-nav) { background: var(--paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.logo-main { color: var(--ink) !important; font-family: var(--sans) !important; }
.logo-sub { color: var(--gray) !important; font-family: var(--mono) !important; }
.header-btn { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }
.header-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.header-btn-primary { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.header-btn-primary:hover { background: var(--ink) !important; opacity: .85 !important; }
.header-cta { background: var(--ink) !important; color: var(--paper) !important; }
.header-cta:hover { background: var(--ink) !important; opacity: .85 !important; }
.header-login { color: var(--gray) !important; }
.header-login:hover { color: var(--ink) !important; }

/* ─── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn { background: var(--ink) !important; color: var(--paper) !important; border: none !important; border-radius: 6px !important; }
.btn:hover { background: var(--ink) !important; opacity: .85 !important; transform: none !important; box-shadow: none !important; }
.btn:active { transform: scale(.97) !important; }
.btn-outline { background: transparent !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; }
.btn-outline:hover { border-color: var(--ink) !important; opacity: 1 !important; }
.btn-blue { background: var(--class-c) !important; color: #fff !important; border: none !important; }
.btn-blue:hover { opacity: .85 !important; }
.btn-primary { background: var(--ink) !important; color: var(--paper) !important; border: none !important; }
.btn-primary:hover { background: var(--ink) !important; opacity: .85 !important; transform: none !important; }
.btn-primary:disabled { opacity: .4 !important; }
.price-btn.primary { background: var(--ink) !important; color: var(--paper) !important; border: none !important; }
.price-btn.primary:hover { background: var(--ink) !important; opacity: .85 !important; transform: none !important; }
.price-btn.outline { background: transparent !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; }
.price-btn.outline:hover { border-color: var(--ink) !important; }
.search-btn { background: var(--ink) !important; color: var(--paper) !important; }
.search-btn:hover { background: var(--ink) !important; opacity: .85 !important; }
.banner-btn-primary { background: var(--ink) !important; color: var(--paper) !important; }
.banner-btn-primary:hover { background: var(--ink) !important; opacity: .85 !important; }
.banner-btn-outline { border-color: var(--hairline) !important; color: var(--gray) !important; }
.banner-btn-outline:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.sticky-bar-btn { background: var(--ink) !important; color: var(--paper) !important; }
.sticky-bar-btn:hover { opacity: .85 !important; }
.modal-cta { background: var(--ink) !important; color: var(--paper) !important; }
.modal-cta:hover { background: var(--ink) !important; opacity: .85 !important; }
.cta-btn-large { background: var(--ink) !important; color: var(--paper) !important; }
.cta-btn-large:hover { background: var(--ink) !important; opacity: .85 !important; transform: none !important; }
.flow-back { background: transparent !important; border-color: var(--hairline) !important; color: var(--gray) !important; }
.flow-back:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.lic-toggle-btn { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }
.lic-toggle-btn.selected { background: var(--surface-v2) !important; border-color: var(--ink) !important; color: var(--ink) !important; }

/* ─── INPUTS ───────────────────────────────────────────────────────────────── */
.form-input { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--ink) !important; }
.form-input:focus { border-color: var(--ink) !important; }
.form-input::placeholder { color: var(--gray) !important; }
.search-input { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--ink) !important; }
.search-input:focus { border-color: var(--ink) !important; }
.search-input::placeholder { color: var(--gray) !important; }
.vio-search-input { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--ink) !important; }
.vio-search-input:focus { border-color: var(--ink) !important; }
.filter-select { background: var(--paper) !important; border-color: var(--hairline) !important; color: var(--ink) !important; }
.filter-select:focus { border-color: var(--ink) !important; }
.checkbox-item { background: var(--paper) !important; border-color: var(--hairline) !important; }
.checkbox-item:hover { border-color: var(--ink) !important; }

/* ─── SURFACE CARDS ────────────────────────────────────────────────────────── */
.price-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.price-card.popular { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }
.popular-badge { background: var(--ink) !important; color: var(--paper) !important; }
.form-section { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.form-section-title { color: var(--gray) !important; }
.profile-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.search-wrap { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.summary-box { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.toc { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.related { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.highlight-box { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.stat-box { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.boro-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.boro-card:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; }
.post-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.post-card:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; }
.trade-row { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.boro-link-btn { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }
.boro-link-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.vio-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.vio-card.class-a-card { box-shadow: inset 3px 0 0 var(--class-a) !important; border-left: none !important; }
.vio-card.class-b-card { box-shadow: inset 3px 0 0 var(--class-b) !important; border-left: none !important; }
.vio-card.class-c-card { box-shadow: inset 3px 0 0 var(--class-c) !important; border-left: none !important; }
.cta-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.cta-card h3 { font-family: var(--sans) !important; }

/* ─── MODAL ────────────────────────────────────────────────────────────────── */
.modal-backdrop { background: rgba(26,25,21,.5) !important; }
.modal { background: var(--paper) !important; border-color: var(--hairline) !important; border-radius: 6px !important; box-shadow: 0 4px 24px rgba(26,25,21,.12) !important; }
.modal-header { background: var(--paper) !important; border-color: var(--hairline) !important; }
.modal-close { border-color: var(--hairline) !important; color: var(--gray) !important; }
.modal-close:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.modal-section-title { color: var(--gray) !important; border-color: var(--hairline) !important; }
.bid-form-inner { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.bid-count-box { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }

/* ─── JOB CARDS ────────────────────────────────────────────────────────────── */
.job-card { background: var(--paper) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.job-card:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; }
.job-card.urgent-card { border-left: none !important; box-shadow: inset 3px 0 0 var(--class-a) !important; }
.job-card-budget { color: var(--ink) !important; font-family: var(--mono) !important; }
.path-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.path-card:hover { border-color: var(--ink) !important; }
.vio-search-card { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.vio-owner-form { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.general-form-wrap { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.vio-item { background: var(--paper) !important; border-color: var(--hairline) !important; border-radius: 6px !important; }
.vio-item.checked { border-color: var(--ink) !important; background: var(--surface-v2) !important; }
.vio-item:hover { border-color: var(--ink) !important; }
.selected-summary { background: var(--surface-v2) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }

/* ─── STATS ────────────────────────────────────────────────────────────────── */
.stat-val { color: var(--ink) !important; font-family: var(--sans) !important; }
.stat-num { color: var(--ink) !important; font-family: var(--sans) !important; }
.summary-val { color: var(--ink) !important; }
.bid-count-num { color: var(--ink) !important; }
.price-dollar { color: var(--ink) !important; font-family: var(--sans) !important; }
.price-dollar.free { color: var(--green-v2) !important; }

/* ─── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--sans) !important; }
.boro-name { font-family: var(--sans) !important; color: var(--ink) !important; }
.flow-title { font-family: var(--sans) !important; }
.empty-state h3 { font-family: var(--sans) !important; }
.success-title { font-family: var(--sans) !important; }
.listings-title { font-family: var(--sans) !important; }
.page-tag { color: var(--gray) !important; font-family: var(--mono) !important; }
.faq-heading { font-family: var(--sans) !important; font-size: 1.4rem !important; }
.faq-q { font-family: var(--sans) !important; }
.faq-q:hover { color: var(--ink) !important; }
.faq-item.open .faq-arrow { color: var(--ink) !important; }
.cta-strip h2 span { color: var(--ink) !important; }

/* ─── BADGES ───────────────────────────────────────────────────────────────── */
.badge-a { background: rgba(200,54,31,.1) !important; color: var(--class-a) !important; border-color: rgba(200,54,31,.25) !important; }
.badge-b { background: rgba(185,126,16,.1) !important; color: var(--class-b) !important; border-color: rgba(185,126,16,.25) !important; }
.badge-c { background: rgba(62,95,138,.1) !important; color: var(--class-c) !important; border-color: rgba(62,95,138,.25) !important; }
.badge-dob { background: var(--surface-v2) !important; color: var(--gray) !important; }
.badge-hpd { background: var(--surface-v2) !important; color: var(--gray) !important; }
.badge-open { background: rgba(42,107,58,.1) !important; color: var(--green-v2) !important; border-color: rgba(42,107,58,.2) !important; }
.badge-resolved { background: var(--surface-v2) !important; color: var(--gray) !important; }
.meta-cat { background: var(--surface-v2) !important; color: var(--gray) !important; border-color: var(--hairline) !important; }
.cat-leadgen { background: var(--surface-v2) !important; color: var(--gray) !important; border-color: var(--hairline) !important; }
.cat-violations { background: rgba(200,54,31,.07) !important; color: var(--class-a) !important; border-color: rgba(200,54,31,.2) !important; }
.cat-owners { background: rgba(62,95,138,.07) !important; color: var(--class-c) !important; border-color: rgba(62,95,138,.2) !important; }
.urg-urgent { background: rgba(200,54,31,.07) !important; color: var(--class-a) !important; border-color: rgba(200,54,31,.2) !important; }
.urg-urgent .urg-dot { background: var(--class-a) !important; }
.urg-standard { background: rgba(185,126,16,.07) !important; color: var(--class-b) !important; border-color: rgba(185,126,16,.2) !important; }
.urg-standard .urg-dot { background: var(--class-b) !important; }
.urg-flexible { background: rgba(42,107,58,.07) !important; color: var(--green-v2) !important; border-color: rgba(42,107,58,.2) !important; }
.urg-flexible .urg-dot { background: var(--green-v2) !important; }
.jt-violation { background: rgba(62,95,138,.07) !important; color: var(--class-c) !important; border-color: rgba(62,95,138,.2) !important; }
.jt-general { background: rgba(107,79,136,.07) !important; color: var(--purple-v2) !important; border-color: rgba(107,79,136,.2) !important; }
.score-high { background: rgba(42,107,58,.15) !important; color: var(--green-v2) !important; }
.score-mid { background: rgba(185,126,16,.15) !important; color: var(--class-b) !important; }
.score-low { background: var(--surface-v2) !important; color: var(--gray) !important; }
.badge-verified { background: rgba(42,107,58,.1) !important; color: var(--green-v2) !important; border-color: rgba(42,107,58,.2) !important; }
.profile-meta, .profile-name { color: var(--ink) !important; font-family: var(--sans) !important; }
.tag { background: var(--surface-v2) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }

/* ─── CTA STRIP / ACCENT AREAS ─────────────────────────────────────────────── */
.cta-strip { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }
.urgent-banner { background: rgba(200,54,31,.05) !important; border-color: rgba(200,54,31,.2) !important; }
.urgent-banner-text { color: var(--class-a) !important; }
.results-banner { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }
.results-banner-text { color: var(--gray) !important; }
.sticky-bar { background: var(--paper) !important; border-color: var(--hairline) !important; }
.sticky-bar-text { color: var(--gray) !important; }
.sticky-bar-text strong { color: var(--ink) !important; }
.contractor-hint { background: var(--surface-v2) !important; border-color: var(--hairline) !important; color: var(--gray) !important; border-style: solid !important; }
.hint-dot { background: var(--green-v2) !important; }
.ai-btn { background: var(--surface-v2) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }
.ai-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.ai-analysis-panel { background: var(--surface-v2) !important; border-color: var(--hairline) !important; border-left-color: var(--ink) !important; }
.ai-analysis-title { color: var(--gray) !important; }
.pdf-link { background: var(--surface-v2) !important; border-color: var(--hairline) !important; color: var(--gray) !important; }
.bid-success { background: rgba(42,107,58,.05) !important; border-color: rgba(42,107,58,.15) !important; }

/* ─── GATED LOCK FIELDS ─────────────────────────────────────────────────────── */
.gated-row { background: var(--surface-v2) !important; border-color: var(--hairline) !important; }
.gated-row:hover { border-color: var(--gray) !important; }
.gated-hint { color: var(--gray) !important; opacity: .7 !important; }
.gated-blur { color: var(--gray) !important; }

/* ─── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-item { border-color: var(--hairline) !important; }
.faq-q { color: var(--ink) !important; }

/* ─── BLOCKQUOTE ───────────────────────────────────────────────────────────── */
blockquote { background: var(--surface-v2) !important; border-left-color: var(--gray) !important; }

/* ─── MOBILE ───────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .nav { padding: 0 1rem; }
  .nav-links { display: none; }
  footer.v2-footer { padding: 1.25rem 1rem !important; }
  .footer-credit { flex-basis: 100%; }
}