/* Copied from src/style.css */
/* ==========================================================
   Global Mood Index — Styles (cleaned & simplified)
   ========================================================== */

/* Base & tokens */
:root { --bg:#f4f4f4; --text:#111; --muted:#333; --border:#000; --white:#fff; }
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
/* Ensure form controls use the same font */
button, input, select, textarea{ font-family:'Courier New', Courier, monospace; font-size:1rem; color:var(--text); }
/* Utilities */
.hidden{ display:none !important; }

/* Links */
a{ text-decoration:none; border:1px solid var(--border); background:var(--white); color:var(--text); box-shadow:4px 4px 0 var(--border); padding:12px 14px; display:inline-block; transition:color .15s, background-color .15s, box-shadow .15s, border-color .15s; }
a:hover{ color:#fff; border-color:#fff; background:#111; box-shadow:-4px -4px 0 #d4d4d4; }

/* Body layout (index/about share baseline) */
body{ max-width:600px; background:#fff; margin:20px auto; border:1px dotted #000; display:flex; flex-direction:column; gap:220px; text-align:center; padding:80px 120px; font-family:'Courier New', Courier, monospace; color:var(--text); }

/* Long-form About adjustments */
body.about{ gap:48px; text-align:left; max-width:960px; padding:48px 24px; margin:24px auto; }
body.about .header, body.about .footer{ text-align:left; }
body.about .prose{ max-width:66ch; margin:0 auto; display:grid; gap:18px; }
body.about h1{ font-size:1.5rem; margin-bottom:8px; }
body.about h2{ font-size:1.1rem; margin-top:18px; }
body.about p{ line-height:1.5; }
body.about ul, body.about ol{ padding-left:20px; display:grid; gap:6px; }
body.about .note{ color:#444; font-size:.95rem; }

/* Hero (calmer) */
body.about main{ display:grid; gap:56px; }
body.about .hero{ display:grid; gap:16px; padding:28px; border:1px solid #e5e5e5; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.9), 0 12px 28px rgba(0,0,0,.06); text-align: center;}
body.about .hero h1{ font-size:2.2rem; line-height:1.15; margin:0; }
body.about .underline{ text-decoration:underline; }
body.about .lede{ font-size:1.05rem; color:#111; }

/* CTA */
body.about .cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content: center;}
body.about .btn{ display:inline-block; font-weight:700; text-transform:none; }
body.about .btn-primary{ background:#111; color:#fff; border-color:#111; }
body.about .btn-primary:hover{ background:#fff; color:#111; border-color:#111; }
body.about .btn-secondary{ background:#fff; }
body.about .btn-secondary:hover{ background:#111; color:#fff; border-color:#111; }


/* Badges simplified to plain text bullets */
/* body.about .hero-badges{ display:flex; gap:0; flex-wrap:wrap; } */
body.about .badge{ border:0; padding:0; background:transparent; box-shadow:none; font-size:.9rem; color:#333; }
body.about .hero-badges .badge:not(:last-child)::after{ content:" · "; color:#999; margin:0 4px; }

/* Content grid + quote */
body.about .content-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start; }
body.about aside.quote{ border:1px solid #e5e5e5; padding:20px; background:#fff; box-shadow:none; }
body.about aside.quote blockquote{ margin:0 0 8px 0; font-size:1.8rem; line-height:1.15; }
body.about aside.quote .ascription{ color:#333; font-size:.95rem; }

/* Post-hero */
body.about .post-hero{ display:grid; gap:28px; }

/* Cards: panels, not buttons */
body.about .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
body.about .card{ border:1px solid #d9d9d9; background:linear-gradient(180deg,#fff 0%,#fafafa 100%); box-shadow:0 1px 0 rgba(0,0,0,.85), 0 8px 20px rgba(0,0,0,.06); padding:16px 18px; display:grid; gap:10px; }
body.about .card h3{ margin:0; font-size:1.1rem; text-align: center;}
body.about .card p{ margin:0; }
body.about .card ol{ padding-left:18px; display:grid; gap:6px; margin:0; }

/* Principles simplified list */
body.about .principles{ display:grid; gap:10px; margin: 0 auto;}
body.about .pill-list{ display:grid; gap:4px; list-style:disc; padding-left:18px; margin:0; }
body.about .pill-list li{ border:0; background:transparent; padding:0; box-shadow:none; }

/* Callout */
body.about .callout{ border:1px solid #e5e5e5; background:#fff; box-shadow:none; padding:16px 18px; }
body.about .callout h4{ margin:0 0 6px 0; text-align: center;}
body.about .callout .note{ margin:6px 0 0 0; }

/* Home (index) layout */
body.home{ max-width:720px; padding:48px 24px; margin:24px auto; gap:48px; text-align:center; border:0; }
.home .main{ display:grid; gap:24px; }
.home h1{ margin:0; font-size:2rem; line-height:1.2; }
.home form{ gap:24px; align-items:center; }
.home form section{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }

/* Shared hero helpers (used on About and Home) */
.hero{ display:grid; gap:12px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; color:#333; margin:0; }
.lede{ font-size:1.05rem; color:#111; margin:0; }
.underline{ text-decoration:underline; }

/* Home-specific hero to visually match About */
.home .hero{ padding:24px; border:1px solid #e5e5e5; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.9), 0 12px 28px rgba(0,0,0,.06); }
.home .cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Shared button classes so index buttons match About CTAs */
.btn{ display:inline-block; font-weight:700; text-transform:none; }
button.btn{ border:1px solid var(--border); background:var(--white); box-shadow:4px 4px 0 var(--border); padding:8px 12px; cursor:pointer; transition:color .15s, background-color .15s, box-shadow .15s, border-color .15s; }
button.btn:hover{ color:#fff; background:#000; border-color:#fff; box-shadow:-4px -4px 0 #d4d4d4; }
.btn-primary{ background:#111; color:#fff; border-color:#111; }
.btn-primary:hover{ background:#fff; color:#111; border-color:#111; }
.btn-secondary{ background:#fff; color:#111; }
/* Ensure button elements with .btn-* get correct colors (higher specificity than button.btn) */
button.btn.btn-primary{ background:#111; color:#fff; border-color:#111; }
button.btn.btn-primary:hover{ background:#fff; color:#111; border-color:#111; }
button.btn.btn-secondary{ background:#fff; color:#111; border-color:#111; }
button.btn.btn-secondary:hover{ background:#f7f7f7; color:#111; border-color:#111; }

/* Shared UI (neutral baseline; .btn provides visual style) */
button{ border-radius:0; padding:6px 10px; cursor:pointer; background:#fff; border:1px solid transparent; box-shadow:none; }
button:hover{ background:#fff; }
.header{ display:flex; justify-content:space-between; font-size:medium; }
.footer{ display:flex; justify-content:space-around; font-size:medium; }
form{ display:flex; flex-direction:column; gap:40px; }
select{ font:inherit; color:var(--text); text-align:left; border:1px solid #e5e5e5; background:#fff; border-radius:0; padding:8px 10px; box-shadow:none; }
select:hover{ background:#fff; border-color:#d0d0d0; box-shadow:none; color:var(--text); }
select:focus-visible{ outline:2px dashed #111; outline-offset:2px; border-color:#111; }
#live{ color:rgba(149,149,149,.782); }
#flag-display{ font-size:1.5rem; margin-right:10px; }
label[for="country-select"], #flag-display{ display:inline-block; vertical-align:middle; line-height:2; }

/* Data page (globe) */
body.data-page{ max-width:960px; padding:24px 16px; margin:24px auto; gap:24px; text-align:center; border:0; }
.data-page .hero{ display:grid; gap:6px; }
.data-page .tagline{ color:#555; font-size:.95rem; letter-spacing:.06em; }
.data-page #map{ width:100%; min-height:360px; position:relative; margin:0 auto; }
.data-page #map svg{ display:block; margin:0 auto; }

/* Globe countries + interactions */
.countries .country{ transition: fill .15s ease, opacity .15s ease, stroke .15s ease, stroke-width .15s ease; cursor:pointer; }
.countries .country:hover{ opacity:1; }
/* Selection accent should NOT override fill; keep data-driven color and emphasize outline */
.country.selected{ stroke:#000 !important; stroke-width:0.9 !important; opacity:1 !important; }

/* Tooltip */
#tooltip{ position:absolute; left:0; top:0; z-index:1000; pointer-events:none; background:#fff; color:#111; border:1px solid #000; box-shadow:4px 4px 0 #000; padding:10px 12px; max-width:280px; line-height:1.3; text-align:left; }
#tooltip h3{ margin:0 0 6px 0; font-size:1rem; }
#tooltip .meta{ color:#555; font-size:.85rem; margin-bottom:6px; }
#tooltip .note{ color:#666; font-size:.8rem; }

/* Responsive */
@media (max-width:960px){ body.about{ max-width:90%; padding:28px 18px; gap:32px; } body.about .content-grid{ grid-template-columns:1fr; } body.about .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  body{ padding:16px 10px; gap:120px; max-width:90%; margin:20px auto; }
  body.about{ gap:28px; padding:16px 12px; max-width:100%; margin:0 auto; }
  body.about main{ gap:36px; }
  body.about .prose{ gap:14px; }
  body.about .hero{ padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.9), 0 8px 16px rgba(0,0,0,.06); }
  body.about .hero h1{ font-size:1.9rem; }
  body.about .content-grid{ grid-template-columns:1fr; }
  body.about aside.quote blockquote{ font-size:1.6rem; }
  body.about .cards{ grid-template-columns:1fr; }
  h1{ font-size:1.9rem; line-height:1.15; }
  .header,.footer{ flex-direction:column; gap:12px; align-items:center; text-align:center; }
  form{ gap:28px; }
  section{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
  select,button{ width:100%; max-width:340px; }
  button{ padding:12px 14px; font-size:1rem; }
  #flag-display{ margin-right:4px; font-size:1.4rem; }
}
@media (max-width:400px){ body{ padding:24px 14px; gap:60px; } h1{ font-size:1.6rem; } #flag-display{ font-size:1.25rem; } body.about .hero h1{ font-size:1.6rem; } body.about aside.quote blockquote{ font-size:1.35rem; } }