/* World Trade Atlas — shared design system
   Bold editorial style: sage ground, chunky cards, heavy display type, vivid colour blocks. */

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

:root{
  /* ground + ink */
  --sage:#C7D6C2; --sage-d:#B5C7AF;
  --ink:#16181A; --ink-2:#2A2E32; --ink-3:#5C6670; --ink-4:#8B959E;
  --cream:#F7F3E8; --card:#FFFFFF; --line:#E4DFD2;

  /* the five accents */
  --coral:#F0544A; --coral-d:#D13F36;
  --peri:#6B63E8;  --peri-d:#544CD4;
  --gold:#F5C144;  --gold-d:#E0A81F;
  --mint:#5FC9AE;  --mint-d:#43AC92;
  --sky:#4FA8DC;

  /* layer colours — each toggle owns one */
  --l-sea:#2F7FB5; --l-air:#8B5CF6; --l-rail:#2FA37A; --l-flow:#12B5CE;
  --l-port:#3B4550; --l-choke:#16181A;
  --l-redsea:#F0544A; --l-drought:#F5C144; --l-sanction:#8B5CF6;
  --l-congest:#FF8A3D; --l-strike:#E2467B;

  --r-lg:22px; --r-md:16px; --r-sm:11px; --r-pill:999px;
  --sh:0 2px 0 rgba(22,24,26,.10), 0 10px 26px rgba(22,24,26,.10);
  --sh-hi:0 3px 0 rgba(22,24,26,.16), 0 16px 34px rgba(22,24,26,.16);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--sage);color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

.display{font-family:'Archivo Black',system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.98}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);
  border:2px solid var(--ink);overflow:hidden}
.card.flat{box-shadow:none}
.card-pad{padding:18px 20px}
.card.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card.coral{background:var(--coral);color:#fff}
.card.peri{background:var(--peri);color:#fff}
.card.gold{background:var(--gold);color:var(--ink)}
.card.mint{background:var(--mint);color:var(--ink)}
.card.cream{background:var(--cream)}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3)}
.card.dark .eyebrow,.card.coral .eyebrow,.card.peri .eyebrow{color:rgba(255,255,255,.72)}
.card.gold .eyebrow,.card.mint .eyebrow{color:rgba(22,24,26,.62)}
.h-xl{font-size:40px}
.h-lg{font-size:30px}
.h-md{font-size:22px}
.h-sm{font-size:17px}
.body{font-size:16px;line-height:1.62}
.body-sm{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.src{font-size:12.5px;line-height:1.45;color:var(--ink-4);margin-top:8px}
.card.dark .src{color:rgba(247,243,232,.6)}

/* ---------- big stat ---------- */
.stat{font-family:'Archivo Black',sans-serif;font-size:46px;line-height:1;letter-spacing:-.02em}
.stat.sm{font-size:32px}
.stat-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stat-unit{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;opacity:.72}
.badge{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;background:rgba(255,255,255,.9);color:var(--ink);
  border:2px solid var(--ink)}
.badge.up{background:var(--mint)} .badge.down{background:var(--coral);color:#fff}

/* ---------- controls ---------- */
button,select,input{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--card);font-size:14.5px;font-weight:600;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
  box-shadow:0 2px 0 var(--ink)}
.btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--cream)}
.btn.coral{background:var(--coral);color:#fff}
.btn.gold{background:var(--gold)}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:0 2px 0 var(--ink)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--card);font-size:14px;font-weight:600;cursor:pointer}
select.pill{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2316181A' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}

/* ---------- status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:2px solid var(--ink)}
.chip.live{background:var(--mint)}
.chip.snap{background:var(--gold)}
.chip.err{background:var(--coral);color:#fff}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.chip.live .dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.pill-status{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--ink)}
.pill-status.open{background:var(--mint)}
.pill-status.constrained{background:var(--gold)}
.pill-status.disrupted{background:var(--coral);color:#fff}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:10px}
.nav a{text-decoration:none}
.nav .tab{padding:9px 16px;border-radius:var(--r-pill);border:2px solid var(--ink);
  background:var(--card);font-weight:700;font-size:14px;box-shadow:0 2px 0 var(--ink)}
.nav .tab.on{background:var(--ink);color:var(--cream)}

/* ---------- misc ---------- */
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:2px dotted var(--line);font-size:15px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-3);font-weight:500}
.kv .v{font-weight:700;text-align:right}
.card.dark .kv{border-color:rgba(247,243,232,.18)}
.card.dark .kv .k{color:rgba(247,243,232,.66)}

.callout{border-radius:var(--r-md);padding:14px 16px;margin-top:14px;border:2px solid var(--ink)}
.callout.teach{background:var(--cream)}
.callout.warn{background:var(--gold)}
.callout.ask{background:var(--peri);color:#fff}
.callout h5{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 6px;opacity:.75}
.callout p{margin:0;font-size:15px;line-height:1.55}
.callout p+p{margin-top:9px}

.scroll{overflow-y:auto;scrollbar-width:thin}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:9px;
  border:2px solid var(--card)}

.spin{width:18px;height:18px;border:3px solid rgba(22,24,26,.18);border-top-color:var(--ink);
  border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}