/* ============================================================================
   P1 HS Search — styles. Brand tokens mirror web-deploy/colors_and_type.css
   (VS-Trade Intelligence palette). Self-contained for standalone deploy.
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --navy-900: #0a1929;
  --navy-700: #1b2b4d;
  --blue-600: #005fcc;
  --blue-500: #0b5fff;
  --blue-100: #e6eeff;
  --paper: #faf9f5;
  --paper-2: #f5f5f0;
  --rule: #e4e2da;
  --rule-2: #d4d2c9;
  --mute-2: #8b8b83;
  --mute-1: #5a5a53;
  --ink: #2c2c2c;
  --amber-600: #d98300;
  --amber-100: #fff1d6;
  --green-700: #1f7a3d;
  --green-100: #e2f3e8;
  --red-700: #a8261c;
  --red-100: #fbe5e2;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(10, 25, 41, 0.06), 0 4px 16px rgba(10, 25, 41, 0.06);
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(960px, 92vw); margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy-900);
  color: #fff; padding: 8px 14px; z-index: 10; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── header / footer ─────────────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--rule); background: #fff; }
.site-head .wrap { padding: 16px 0; }
.brand { font-weight: 700; color: var(--navy-900); letter-spacing: -0.01em; }
.brand__sub { color: var(--blue-600); font-weight: 600; }

.site-foot { border-top: 1px solid var(--rule); margin-top: 64px; background: var(--paper-2); }
.site-foot .wrap { padding: 24px 0; }
.privacy { color: var(--mute-1); font-size: 0.86rem; max-width: 62ch; }
.powered { color: var(--mute-2); font-size: 0.78rem; font-family: var(--mono); }

/* ── hero / search ───────────────────────────────────────────────────── */
.hero { padding: 56px 0 28px; }
.hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--navy-900); margin: 0 0 8px; letter-spacing: -0.02em; }
.hero__sub { font-size: 1.05rem; color: var(--mute-1); margin: 0 0 24px; }
.hero__hint { font-size: 0.82rem; color: var(--mute-2); margin: 10px 2px 0; }

.search { display: flex; gap: 10px; }
.search__input {
  flex: 1; font-size: 1.05rem; font-family: var(--sans);
  padding: 14px 16px; border: 1.5px solid var(--rule-2); border-radius: var(--radius);
  background: #fff; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.search__input::placeholder { color: var(--mute-2); }
.search__input:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.search__btn {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; cursor: pointer;
  padding: 0 24px; border: none; border-radius: var(--radius);
  background: var(--amber-600); color: #fff; transition: filter 0.15s;
}
.search__btn:hover { filter: brightness(1.06); }
.search__btn:disabled { opacity: 0.6; cursor: progress; }

/* ── results ─────────────────────────────────────────────────────────── */
.results { margin-top: 8px; }
.results__meta { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.count { color: var(--mute-1); font-size: 0.88rem; font-family: var(--mono); }
.badge {
  background: var(--blue-100); color: var(--blue-600); font-weight: 600;
  font-size: 0.8rem; padding: 4px 10px; border-radius: 999px;
}

.expanded { margin: 4px 0 6px; font-size: 0.86rem; color: var(--mute-1); }
.expanded__label { margin-right: 6px; }
.chip {
  display: inline-block; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px 10px; margin: 2px 4px 2px 0;
  font-family: var(--mono); font-size: 0.78rem; color: var(--navy-700);
}

.results__list { display: grid; gap: 14px; }

.result {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.result__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.result__hs {
  font-family: var(--mono); font-weight: 600; font-size: 0.95rem;
  background: var(--navy-900); color: #fff; padding: 3px 9px; border-radius: var(--radius-sm);
}
.result__desc { margin: 0; font-size: 1.05rem; color: var(--navy-900); font-weight: 600; }

.result__metrics { display: flex; gap: 28px; margin: 14px 0 12px; }
.result__metrics dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute-2); }
.result__metrics dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 600; color: var(--navy-900); font-family: var(--mono); }

.countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-width: 460px; }
.country { display: grid; grid-template-columns: 42px 1fr 56px; align-items: center; gap: 10px; font-size: 0.82rem; }
.country__iso { font-family: var(--mono); color: var(--navy-700); font-weight: 600; }
.country__bar { background: var(--paper-2); border-radius: 999px; height: 8px; overflow: hidden; }
.country__bar > span { display: block; height: 100%; background: var(--blue-500); border-radius: 999px; }
.country__pct { text-align: right; color: var(--mute-1); font-family: var(--mono); }
.country--otros .country__bar > span { background: var(--rule-2); }
.country--otros .country__iso { color: var(--mute-2); font-style: italic; }
.country--nd .country__bar > span { background: var(--mute-3); }
.country--nd .country__iso { color: var(--mute-2); cursor: help; }

.samples { margin-top: 12px; }
.samples summary { cursor: pointer; color: var(--blue-600); font-size: 0.84rem; font-weight: 500; }
.samples ul { margin: 8px 0 0; padding-left: 18px; color: var(--mute-1); font-size: 0.86rem; }

/* ── states (empty / error) ──────────────────────────────────────────── */
.state {
  text-align: center; padding: 40px 20px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: #fff; margin-top: 18px;
}
.state--warn { background: var(--amber-100); border-color: #f0d9a8; }
.state--error { background: var(--red-100); border-color: #f3c5bf; }
.state--neutral { background: var(--paper-2); }
.state__title { margin: 0 0 6px; font-size: 1.2rem; color: var(--navy-900); }
.state__body { margin: 0 auto; color: var(--mute-1); max-width: 48ch; }
.state__suggestions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.suggestion {
  cursor: pointer; border: 1px solid var(--rule-2); background: #fff; color: var(--navy-700);
  padding: 7px 14px; border-radius: 999px; font-family: var(--sans); font-size: 0.85rem; transition: border-color 0.15s;
}
.suggestion:hover { border-color: var(--blue-500); color: var(--blue-600); }

/* ── skeleton ────────────────────────────────────────────────────────── */
.result--skeleton { pointer-events: none; }
.sk { background: linear-gradient(90deg, var(--paper-2) 25%, #ececec 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--radius-sm); }
.sk--code { width: 90px; height: 24px; }
.sk--title { width: 70%; height: 20px; margin-top: 12px; }
.sk--metrics { width: 50%; height: 28px; margin-top: 16px; }
.sk--bars { width: 80%; height: 40px; margin-top: 14px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ── CTAs ────────────────────────────────────────────────────────────── */
.result__cta {
  display: inline-block; margin-top: 12px; font-size: 0.84rem; font-weight: 600;
  color: var(--blue-600); text-decoration: none;
}
.result__cta:hover { text-decoration: underline; }
.result__cta--p2 { color: var(--amber-600); }

.cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 18px 22px; border-radius: var(--radius);
  background: var(--navy-900); color: #fff; flex-wrap: wrap;
}
.cta-banner--p2 { background: var(--amber-600); }
.cta-banner--newsletter { background: var(--navy-700); }
.cta-banner strong { display: block; font-size: 1.02rem; }
.cta-banner span { display: block; font-size: 0.85rem; opacity: 0.82; margin-top: 2px; }
.cta-banner__btn {
  background: #fff; color: var(--navy-900); font-weight: 600; text-decoration: none;
  padding: 10px 18px; border-radius: var(--radius-sm); white-space: nowrap;
}

/* ── modal (email gate) ──────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 25, 41, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal {
  position: relative; background: #fff; border-radius: var(--radius);
  max-width: 440px; width: 100%; padding: 32px 28px; box-shadow: var(--shadow);
}
.modal__close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--mute-2);
}
.modal__title { margin: 0 0 8px; color: var(--navy-900); font-size: 1.35rem; }
.modal__body { margin: 0 0 18px; color: var(--mute-1); }
.modal__form { display: grid; gap: 10px; }
.modal__input {
  font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--rule-2);
  border-radius: var(--radius-sm); font-family: var(--sans);
}
.modal__input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.modal__submit {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; cursor: pointer;
  padding: 12px; border: none; border-radius: var(--radius-sm);
  background: var(--amber-600); color: #fff;
}
.modal__submit:disabled { opacity: 0.6; cursor: progress; }
.modal__msg { min-height: 1.2em; margin: 2px 0 0; font-size: 0.85rem; color: var(--red-700); }
.modal__privacy { margin: 4px 0 0; font-size: 0.76rem; color: var(--mute-2); }

/* legal modal */
.modal--legal { max-width: 520px; }
.legal__draft {
  background: var(--amber-100); border: 1px solid #f0d9a8; color: #7a5200;
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; margin: 0 0 14px;
}
.legal__body { color: var(--mute-1); font-size: 0.92rem; }
.legal__body p { margin: 0 0 10px; }

.legal-links { margin-top: 12px; display: flex; gap: 8px; align-items: center; color: var(--mute-2); font-size: 0.8rem; }
.legal-link {
  background: none; border: none; cursor: pointer; color: var(--blue-600);
  font-family: var(--sans); font-size: 0.8rem; padding: 0; text-decoration: underline;
}

@media (max-width: 560px) {
  .search { flex-direction: column; }
  .search__btn { padding: 12px; }
  .result__metrics { gap: 18px; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
}