/*
Theme Name: ZambAI Preview
Theme URI: https://zed.co.zm/
Author: Warpspeed Technology Limited
Author URI: https://zed.co.zm/
Description: Work-in-progress build for zed.co.zm. Ships the interactive map of Zambia's ten provinces and its eight neighbours, plus province reference data, and states plainly that the AI answer engine and search are still to come. Makes no outbound API calls and stores no visitor input. ZamBuilt by Warpspeed Technology Limited.
Version: 0.9.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zambai
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Design tokens
   Palette: mineral document + malachite instrument panel + copper live state.
   ========================================================================== */
:root {
  --paper:        #EFF2EC;
  --paper-2:      #E4E9DF;
  --paper-3:      #D6DDD0;
  --ink:          #0F1D19;
  --ink-2:        #3A4A44;
  --ink-3:        #6B7A73;
  --rule:         #C3CDBC;

  --panel:        #0C2620;
  --panel-2:      #123830;
  --panel-3:      #1A4A40;
  --malachite:    #1E7A5E;
  --malachite-lt: #35C48F;
  --copper:       #A8471B;
  --copper-lt:    #D4762F;

  --focus:        #35C48F;

  /* National flag, used only as the ZambAI mark and in the credits */
  --flag-green:   #198A00;
  --flag-red:     #DE2010;
  --flag-black:   #101010;
  --flag-orange:  #EF7D00;

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Literata", Georgia, "Times New Roman", serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.7rem + 4vw, 5rem);

  --gut: clamp(1.1rem, 4vw, 2.75rem);
  --max: 1440px;
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--copper); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* Utility: mono label */
.label {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .8em 1.2em;
  font-family: var(--ff-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 66px;
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
/* Z / amb / AI — the middle syllable drops back so the AI reads as
   deliberate rather than as a misspelling of Zambia. */
.brand__mark {
  font-family: var(--ff-display);
  font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em;
  color: var(--ink); line-height: 1;
  display: inline-flex; align-items: baseline;
}
.brand__amb {
  font-size: .66em;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.brand__mark em {
  font-style: normal;
  color: var(--malachite);
  letter-spacing: -.01em;
}

/* Three vertical bars, as they sit at the fly of the Zambian flag */
.flag { display: inline-flex; gap: 2px; align-items: flex-end; }
.flag i { display: block; width: 3px; height: 15px; border-radius: .5px; }
.flag i:nth-child(1) { background: var(--flag-red); }
.flag i:nth-child(2) { background: var(--flag-black); }
.flag i:nth-child(3) { background: var(--flag-orange); }
.flag--sm i { width: 2px; height: 10px; }

/* On dark ground the black stripe would disappear, so the flag sits on a plate */
.site-footer .flag,
.atlas .flag { background: var(--paper); padding: 3px; border-radius: 1px; }

.brand__tag {
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  border-left: 1px solid var(--rule); padding-left: .6rem; margin-left: .2rem;
}
@media (max-width: 760px) { .brand__tag { display: none; } }

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  padding-block: .4rem;
}
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--copper); }
@media (max-width: 800px) { .site-nav ul { gap: .9rem; } .site-nav a { font-size: .64rem; } }

/* ==========================================================================
   Hero: document on the left, instrument on the right
   ========================================================================== */
.hero { border-bottom: 1px solid var(--rule); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.4rem;
}
.hero__eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: .35em;
}
.hero h1 .accent { color: var(--malachite); }
.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0 0 2rem;
  line-height: 1.45;
}

/* Ask console --------------------------------------------------------- */
.console {
  border: 1px solid var(--ink);
  background: #fff;
  box-shadow: 6px 6px 0 var(--paper-3);
}
.console__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.console__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--malachite-lt);
  box-shadow: 0 0 0 3px rgba(53,196,143,.2);
}
.console__scope {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.console__scope strong { color: var(--copper); font-weight: 600; }
.console__clear {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); padding: .2rem .3rem;
}
.console__clear:hover { color: var(--copper); }
.console__clear[hidden] { display: none; }

.console__field { padding: .9rem; }
.console__input {
  width: 100%; border: 0; resize: none; padding: 0;
  font-family: var(--ff-body); font-size: var(--step-1); line-height: 1.4;
  color: var(--ink); background: transparent;
  min-height: 3.2em; field-sizing: content; max-height: 40vh;
}
.console__input:focus { outline: none; }
.console__input::placeholder { color: var(--ink-3); }

.console__foot {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.console__hint { font-family: var(--ff-mono); font-size: .64rem; color: var(--ink-3); }
@media (max-width: 520px) { .console__hint { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
  padding: .72em 1.2em; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none; border-radius: var(--radius);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: .5em .9em; font-size: .64rem; }
.console__submit { margin-left: auto; }

.suggests { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.suggests__title { width: 100%; margin-bottom: .1rem; }
.chip {
  font-family: var(--ff-mono); font-size: .68rem;
  padding: .42em .75em; border: 1px solid var(--rule);
  background: transparent; color: var(--ink-2); cursor: pointer;
  border-radius: 100px; line-height: 1.3; text-align: left;
}
.chip:hover { border-color: var(--copper); color: var(--copper); }

/* ==========================================================================
   The map — instrument panel
   ========================================================================== */
.atlas {
  background: var(--panel);
  border: 1px solid var(--panel);
  color: #D7E6DF;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.atlas__head {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--panel-3);
}
.atlas__title {
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7FA396;
}
.atlas__readout {
  margin-left: auto;
  font-family: var(--ff-mono); font-size: .66rem;
  color: var(--malachite-lt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 480px) { .atlas__readout { font-size: .58rem; } }

.atlas__stage { position: relative; }
.atlas__svg { display: block; width: 100%; height: auto; touch-action: manipulation; }

/* Neighbours */
.n-shape { fill: #16332C; stroke: #24483F; stroke-width: 1.1; stroke-linejoin: round; }
.n-label {
  font-family: var(--ff-mono); font-size: 15px; letter-spacing: .12em;
  fill: #5C7D71; text-transform: uppercase; pointer-events: none;
  text-anchor: middle;
}

/* Country halo */
.zambai-halo { fill: #000; opacity: .35; }

/* Provinces */
.p-shape {
  fill: var(--malachite);
  stroke: #0C2620;
  stroke-width: 2;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s ease;
}
.p-shape:hover { fill: #2A9C77; }
.p-btn:focus-visible { outline: none; }
.p-btn:focus-visible .p-shape { fill: #2A9C77; stroke: var(--copper); stroke-width: 3.5; }
.p-btn.is-active .p-shape { fill: var(--copper); }
.p-btn.is-active:hover .p-shape { fill: var(--copper-lt); }
.atlas.has-selection .p-btn:not(.is-active) .p-shape { fill: #17604A; }
.atlas.has-selection .p-btn:not(.is-active):hover .p-shape { fill: #1E7A5E; }

.p-label {
  font-family: var(--ff-display); font-weight: 700; font-size: 17px;
  letter-spacing: .06em; fill: #EAF6F1; text-anchor: middle;
  pointer-events: none; paint-order: stroke;
  stroke: rgba(12,38,32,.55); stroke-width: 3px; stroke-linejoin: round;
}
.p-label--sm { font-size: 13px; }

/* Cities appear only when a province is selected */
.city { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.city.is-on { opacity: 1; }
.city__dot { fill: var(--copper-lt); stroke: #0C2620; stroke-width: 1.5; }
.city__name {
  font-family: var(--ff-mono); font-size: 12px; fill: #CFE3DA;
  paint-order: stroke; stroke: rgba(12,38,32,.7); stroke-width: 3px;
}
.city--capital .city__dot { fill: #fff; }

/* Reticle */
.reticle { pointer-events: none; }
.reticle line { stroke: rgba(53,196,143,.32); stroke-width: 1; stroke-dasharray: 4 5; }
.reticle.is-off { display: none; }

.atlas__grid line { stroke: rgba(255,255,255,.045); stroke-width: 1; }

.atlas__foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-top: 1px solid var(--panel-3);
}
.atlas__hint { font-family: var(--ff-mono); font-size: .62rem; color: #5C7D71; letter-spacing: .06em; }
.atlas__reset {
  margin-left: auto; background: none; border: 1px solid var(--panel-3);
  color: #7FA396; font-family: var(--ff-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .4em .8em;
  cursor: pointer; border-radius: var(--radius);
}
.atlas__reset:hover { border-color: var(--malachite-lt); color: var(--malachite-lt); }
.atlas__reset[hidden] { display: none; }

/* Province dossier ---------------------------------------------------- */
.dossier {
  border-top: 1px solid var(--panel-3);
  padding: 1rem .9rem 1.1rem;
  display: none;
}
.dossier.is-on { display: block; animation: dossier-in .3s ease both; }
@keyframes dossier-in { from { opacity: 0; transform: translateY(6px); } }

.dossier__top { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .9rem; }
.dossier__code {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--copper-lt); border: 1px solid var(--copper); padding: .18em .5em;
  border-radius: 2px;
}
.dossier__name {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; color: #EAF6F1; margin: 0; text-transform: uppercase;
}
.dossier__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .1rem; margin-bottom: 1rem;
  border: 1px solid var(--panel-3); background: var(--panel-3);
}
.dossier__stat { background: var(--panel); padding: .6rem .7rem; }
.dossier__stat dt {
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: #5C7D71; margin-bottom: .25rem;
}
.dossier__stat dd {
  margin: 0; font-family: var(--ff-mono); font-size: .95rem;
  color: #EAF6F1; font-variant-numeric: tabular-nums;
}
.dossier__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.dossier__ask {
  font-family: var(--ff-mono); font-size: .68rem;
  background: transparent; border: 1px solid var(--panel-3); color: #B9D2C8;
  padding: .45em .8em; cursor: pointer; border-radius: 100px; text-align: left;
}
.dossier__ask:hover { border-color: var(--malachite-lt); color: var(--malachite-lt); }

/* ==========================================================================
   Answer sheet — answers are typeset as issued documents, not chat bubbles
   ========================================================================== */
.sheet {
  border: 1px solid var(--ink);
  background: #fff;
  margin-top: 1.6rem;
  scroll-margin-top: 90px;
}
.sheet[hidden] { display: none; }
.sheet__head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .9rem; border-bottom: 1px solid var(--ink);
  background: var(--ink); color: var(--paper-2);
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.sheet__head .sep { color: var(--ink-3); }
.sheet__status { margin-left: auto; color: var(--malachite-lt); display: flex; align-items: center; gap: .45rem; }
.sheet__status .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--malachite-lt);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.sheet__q {
  padding: 1rem .9rem .9rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -.015em; line-height: 1.25;
}
.sheet__body { padding: 1.1rem .9rem 1.2rem; }
.sheet__body > *:first-child { margin-top: 0; }
.sheet__body > *:last-child { margin-bottom: 0; }
.sheet__body p { margin: 0 0 1em; }
.sheet__body h2 {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em;
  margin: 1.6em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid var(--rule);
}
.sheet__body h3 { font-size: .95rem; margin: 1.4em 0 .4em; }
.sheet__body ul, .sheet__body ol { margin: 0 0 1em; padding-left: 1.3em; }
.sheet__body li { margin-bottom: .35em; }
.sheet__body code {
  font-family: var(--ff-mono); font-size: .85em;
  background: var(--paper-2); padding: .12em .35em; border-radius: 2px;
}
.sheet__body pre {
  font-family: var(--ff-mono); font-size: .8rem; background: var(--panel);
  color: #D7E6DF; padding: .9rem; overflow-x: auto; border-radius: var(--radius);
}
.sheet__body pre code { background: none; padding: 0; }
.sheet__body table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .9rem; }
.sheet__body th, .sheet__body td { border: 1px solid var(--rule); padding: .45em .6em; text-align: left; }
.sheet__body th { background: var(--paper-2); font-family: var(--ff-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sheet__body blockquote {
  margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--malachite);
  color: var(--ink-2);
}

.caret {
  display: inline-block; width: .5em; height: 1.05em; margin-left: 1px;
  background: var(--copper); vertical-align: text-bottom;
  animation: blink .9s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.sheet__sources { padding: 0 .9rem 1rem; }
.sheet__sources ol { margin: .4rem 0 0; padding-left: 1.4em; }
.sheet__sources li { font-size: .85rem; margin-bottom: .3em; }
.sheet__sources a { color: var(--malachite); word-break: break-word; }

.sheet__foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-top: 1px solid var(--rule); background: var(--paper-2);
  font-family: var(--ff-mono); font-size: .62rem; color: var(--ink-3);
  letter-spacing: .06em;
}
.sheet__foot .spacer { margin-left: auto; }
.sheet__permalink { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sheet__permalink:hover { color: var(--copper); }

.notice {
  padding: .8rem .9rem; font-size: .88rem;
  border-left: 3px solid var(--copper); background: #FCF3EE; color: var(--ink-2);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--rule); }
.section__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.section__head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.section h2 { font-size: var(--step-2); text-transform: uppercase; margin: 0; }

.grid-cards {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.card {
  background: var(--paper); padding: 1.2rem 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: background .18s ease;
}
.card:hover { background: #fff; }
.card__meta { display: flex; gap: .5rem; align-items: center; }
.card__prov {
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em;
  color: var(--malachite); border: 1px solid var(--rule); padding: .12em .4em;
}
.card__date { font-family: var(--ff-mono); font-size: .6rem; color: var(--ink-3); }
.card h3 { font-size: 1.02rem; margin: 0; letter-spacing: -.01em; line-height: 1.25; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--copper); }
.card p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.card__more {
  margin-top: auto; font-family: var(--ff-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* Capability strip */
.caps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cap { background: var(--paper); padding: 1.3rem 1.1rem; }
.cap__n {
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--copper); display: block; margin-bottom: .7rem;
}
.cap h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cap p { margin: 0; font-size: .9rem; color: var(--ink-2); }

/* ==========================================================================
   Single answer / page / archive
   ========================================================================== */
.entry { padding-block: clamp(2rem, 5vw, 3.5rem); }
.entry__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; max-width: 760px; }
.entry__meta {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  padding-bottom: .8rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule);
}
.entry h1 { font-size: var(--step-3); margin-bottom: .6rem; }
.entry__content { font-size: 1.05rem; }
.entry__content h2 { font-size: var(--step-1); margin: 1.8em 0 .5em; text-transform: uppercase; }
.entry__content h3 { font-size: 1.05rem; margin: 1.5em 0 .4em; }
.entry__content p { margin: 0 0 1.1em; }
.entry__content ul, .entry__content ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.entry__content li { margin-bottom: .4em; }
.entry__content code { font-family: var(--ff-mono); font-size: .88em; background: var(--paper-2); padding: .12em .35em; }
.entry__content pre { font-family: var(--ff-mono); font-size: .82rem; background: var(--panel); color: #D7E6DF; padding: 1rem; overflow-x: auto; }
.entry__content table { width: 100%; border-collapse: collapse; margin-bottom: 1.1em; }
.entry__content th, .entry__content td { border: 1px solid var(--rule); padding: .5em .65em; text-align: left; }
.entry__content th { background: var(--paper-2); font-family: var(--ff-mono); font-size: .75rem; text-transform: uppercase; }
.entry__content blockquote { margin: 0 0 1.1em; padding-left: 1.1rem; border-left: 3px solid var(--malachite); color: var(--ink-2); }
.entry__content img { border: 1px solid var(--rule); }

.followup {
  margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
}

.prov-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.prov-filter a {
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule); padding: .4em .75em; border-radius: 100px;
}
.prov-filter a:hover, .prov-filter a.is-on { border-color: var(--copper); color: var(--copper); }

.pagination { margin-top: 2.5rem; font-family: var(--ff-mono); font-size: .72rem; }
.pagination .page-numbers {
  display: inline-block; padding: .4em .7em; border: 1px solid var(--rule);
  text-decoration: none; margin-right: .3rem;
}
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #A9B8B2; padding-block: 3rem 2rem; }
.site-footer a { color: #D7E6DF; }
.site-footer a:hover { color: var(--malachite-lt); }
.footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid #24382F;
}
.footer__grid h4 {
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #6B7F77; margin-bottom: .8rem; font-weight: 500;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: .4rem; font-size: .9rem; }
.footer__grid a { text-decoration: none; }
.footer__note { font-size: .88rem; max-width: 42ch; }
.footer__bottom {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  padding-top: 1.4rem;
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .06em;
  color: #6B7F77;
}

/* Operator credit — the one place Warpspeed is named prominently */
.credit {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: 1.4rem 0 .2rem; margin-top: .6rem;
  border-top: 1px solid #24382F;
}
.credit__flag { flex: none; }
.credit__text { font-size: .92rem; color: #A9B8B2; margin: 0; }
.credit__text strong { color: #EAF6F1; font-weight: 600; }
.credit__text a { text-decoration: none; border-bottom: 1px solid #35594E; }
.footer__bottom .spacer { margin-left: auto; }

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .atlas, .console, .suggests, .followup { display: none !important; }
  body { background: #fff; }
  .sheet { border: 0; }
}

/* ==========================================================================
   No-JavaScript fallbacks
   The map is an enhancement; the province links below it are the plain path.
   ========================================================================== */
.prov-index { display: none; list-style: none; margin: 0; padding: 0; gap: .35rem; flex-wrap: wrap; }
.prov-index a {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .06em;
  text-decoration: none; color: #B9D2C8; border: 1px solid var(--panel-3);
  padding: .3em .65em; border-radius: 100px; display: inline-block;
}
.prov-index a:hover { border-color: var(--malachite-lt); color: var(--malachite-lt); }

.no-js .prov-index { display: flex; }
.no-js .atlas__hint,
.no-js .atlas__reset,
.no-js .suggests,
.no-js .console__foot,
.no-js .console__bar { display: none; }
.no-js .p-shape { cursor: default; }
.zambai-noscript { display: none; }
.no-js .zambai-noscript { display: block; }

/* Custom logo */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo-link img { max-height: 44px; width: auto; }

/* Grid children must be allowed to shrink */
.hero__col { min-width: 0; }

/* Search uses the console shell but is a single-line input */
input.console__input { min-height: 0; field-sizing: auto; padding-block: .3rem; }


/* ==========================================================================
   Preview build: work-in-progress signalling
   ========================================================================== */

/* Banner above the header. Stated once, plainly, and not repeated. */
.wip {
  background: var(--ink);
  color: var(--paper-2);
  border-bottom: 1px solid var(--panel-3);
}
.wip__inner {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding-block: .55rem;
}
.wip .flag { background: var(--paper); padding: 2px; border-radius: 1px; flex: none; }
.wip__label {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--copper-lt); font-weight: 500;
  white-space: nowrap;
}
.wip__note {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .04em;
  color: #8FA69D;
}
@media (max-width: 700px) { .wip__note { font-size: .6rem; } }

/* The header sits below the banner, so it can't be sticky at 0 */
.site-header { position: static; }

.brand__wip {
  font-family: var(--ff-mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--copper);
  border: 1px solid var(--copper); border-radius: 100px;
  padding: .18em .5em; margin-left: .1rem; align-self: center;
}

/* Console, shown but not working */
.console--preview { box-shadow: none; border-style: dashed; background: transparent; }
.console--preview .console__bar { background: transparent; border-bottom-style: dashed; }
.console--preview .console__foot { background: transparent; border-top-style: dashed; }
.console__dot--idle {
  background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(107,122,115,.18);
}
.console--preview .console__scope strong { color: var(--ink-3); }
.console__input:disabled { background: transparent; color: var(--ink-3); cursor: not-allowed; }

.preview-note {
  margin: 1rem 0 0; font-size: .92rem; color: var(--ink-2); max-width: 46ch;
}

/* Roadmap */
.roadmap {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.roadmap__item { background: var(--paper); padding: 1.2rem 1.1rem 1.3rem; }
.roadmap__item h3 { font-size: 1.02rem; margin: .55rem 0 .35rem; }
.roadmap__item p { margin: 0; font-size: .89rem; color: var(--ink-2); }
.roadmap__state {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .22em .55em; border-radius: 100px;
  border: 1px solid currentColor;
}
.roadmap__state::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.roadmap__item--live  .roadmap__state { color: var(--malachite); }
.roadmap__item--build .roadmap__state { color: var(--copper); }
.roadmap__item--plan  .roadmap__state { color: var(--ink-3); }
.roadmap__item--plan  h3 { color: var(--ink-2); }

/* Province reference table */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.data-table th, .data-table td {
  padding: .6em .8em; text-align: left; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.data-table thead th {
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  background: var(--paper-2); white-space: nowrap;
}
.data-table tbody tr:hover { background: #fff; }
.data-table .code {
  font-family: var(--ff-mono); font-size: .74rem; color: var(--malachite);
  font-weight: 500; width: 1%; white-space: nowrap;
}
.data-table .num {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.data-table .known { color: var(--ink-2); font-size: .86rem; }
.data-table tbody td a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.data-table tbody td a:hover { color: var(--copper); border-color: var(--copper); }
.data-table tfoot th, .data-table tfoot td {
  background: var(--paper-2); font-weight: 600; border-bottom: 0;
  border-top: 2px solid var(--ink);
}
.table-note {
  margin: .9rem 0 0; font-size: .84rem; color: var(--ink-3); max-width: 60ch;
}

/* Dossier additions for the preview */
.dossier__known { margin: 0 0 .7rem; font-size: .92rem; color: #B9D2C8; }
.dossier__towns { margin: 0 0 .7rem; font-size: .86rem; color: #9FBCB1; }
.dossier__towns-label {
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: #5C7D71; margin-right: .3rem;
}
.dossier__soon {
  margin: 0; padding-top: .7rem; border-top: 1px dashed var(--panel-3);
  font-family: var(--ff-mono); font-size: .66rem; color: var(--copper-lt);
}

.listing { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }


/* ==========================================================================
   Map layers: water, parks, rail, roads
   ========================================================================== */

/* Layers are hidden until switched on */
.layer-roads, .layer-rail, .layer-water, .layer-parks { display: none; }
.layer-roads.is-on, .layer-rail.is-on, .layer-water.is-on, .layer-parks.is-on { display: block; }

.road-line {
  fill: none; stroke: #8A7A5F; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: .7;
}
.rail-line {
  fill: none; stroke: #C8D6CE; stroke-width: 1.7;
  stroke-dasharray: 7 4; stroke-linecap: butt; opacity: .85;
}
.river {
  fill: none; stroke: #3E9BC7; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.lake { fill: #1D5C79; stroke: #3E9BC7; stroke-width: 1; }

.river__name {
  font-family: var(--ff-mono); font-size: 11px; font-style: italic;
  fill: #6FBEDF; pointer-events: none;
  paint-order: stroke; stroke: rgba(12,38,32,.75); stroke-width: 3px;
}
.lake__name {
  font-family: var(--ff-mono); font-size: 11px; fill: #8FD3EE;
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(12,38,32,.75); stroke-width: 3px;
}

.park__name {
  font-family: var(--ff-mono); font-size: 11px; fill: #C3EDB9;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
  paint-order: stroke; stroke: rgba(12,38,32,.8); stroke-width: 3px;
}
/* Park names would collide at national zoom, so they appear on selection */
.park.is-near .park__name { opacity: 1; }

/* Layer switches */
.layers {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding: .6rem .9rem 0;
}
.layers__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .06em;
  background: transparent; color: #7FA396;
  border: 1px solid var(--panel-3); border-radius: 100px;
  padding: .35em .7em; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.layers__btn:hover { color: #B9D2C8; border-color: #2C6355; }
.layers__btn.is-on { color: #EAF6F1; border-color: #35594E; background: rgba(255,255,255,.04); }
.layers__key {
  width: 12px; height: 3px; border-radius: 2px; flex: none;
  background: currentColor; opacity: .4;
}
.layers__btn.is-on .layers__key { opacity: 1; }
.layers__btn.is-on .layers__key--water { background: #3E9BC7; }
.layers__btn.is-on .layers__key--parks { background: #7DD46F; height: 8px; width: 8px; border-radius: 50%; }
.layers__btn.is-on .layers__key--rail  { background: repeating-linear-gradient(90deg,#C8D6CE 0 4px,transparent 4px 7px); }
.layers__btn.is-on .layers__key--roads { background: #8A7A5F; }

.no-js .layers { display: none; }


/* Park names are pre-placed to avoid collisions, so they can show at national
   zoom. Names without a collision-free slot still appear on province select. */
.layer-parks.is-on .park__name--wide { opacity: 1; }


/* Park extents.
   --approx is a circle of the park's published area at true map scale: honest
   about size, obviously not a survey line. --real is used when a genuine
   boundary has been imported into ZambAI-layers.json. */
.park__zone { pointer-events: auto; }
.park__zone--approx {
  fill: #7DD46F; fill-opacity: .22;
  stroke: #9BE38E; stroke-width: 1.6; stroke-dasharray: 5 4;
}
.park__zone--real {
  fill: #7DD46F; fill-opacity: .26;
  stroke: #9BE38E; stroke-width: 1.6; stroke-linejoin: round;
}
.park:hover .park__zone--approx,
.park:hover .park__zone--real { fill-opacity: .38; }
.park__dot { fill: #C3EDB9; stroke: #0C2620; stroke-width: 1.2; }



/* ==========================================================================
   Map legend
   ========================================================================== */
.legend {
  border-top: 1px solid var(--panel-3);
  padding: 0 .9rem .3rem;
}
.legend__summary {
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7FA396;
  padding: .7rem 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .45rem;
}
.legend__summary::-webkit-details-marker { display: none; }
.legend__summary::before {
  content: "+"; font-size: .8rem; line-height: 1; color: var(--malachite-lt);
  width: .8em; display: inline-block;
}
.legend[open] .legend__summary::before { content: "\2013"; }
.legend__summary:hover { color: #B9D2C8; }

.legend__list {
  list-style: none; margin: 0; padding: 0 0 .7rem;
  display: grid; gap: .55rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.legend__item {
  display: grid; grid-template-columns: 20px 1fr; gap: .55rem;
  align-items: start;
  transition: opacity .18s ease;
}
.legend__item.is-dim { opacity: .32; }

.legend__text { display: block; min-width: 0; }
.legend__text strong {
  display: block;
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .06em;
  color: #EAF6F1; font-weight: 500;
}
.legend__note {
  display: block; font-size: .74rem; line-height: 1.45; color: #7FA396;
}

/* Swatches mirror the map exactly */
.legend__swatch { display: block; width: 18px; height: 12px; margin-top: 3px; border-radius: 1px; }
.legend__swatch--province  { background: var(--malachite); border: 1.5px solid var(--panel); }
.legend__swatch--selected  { background: var(--copper); border: 1.5px solid var(--panel); }
.legend__swatch--neighbour { background: #16332C; border: 1.5px solid #24483F; }
.legend__swatch--park {
  width: 14px; height: 14px; border-radius: 50%; margin-left: 2px;
  background: rgba(125,212,111,.22); border: 1.5px dashed #9BE38E;
}
.legend__swatch--river { height: 3px; margin-top: 8px; background: #3E9BC7; border-radius: 2px; }
.legend__swatch--lake  { background: #1D5C79; border: 1px solid #3E9BC7; }
.legend__swatch--rail {
  height: 3px; margin-top: 8px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #C8D6CE 0 5px, transparent 5px 8px);
}
.legend__swatch--road { height: 3px; margin-top: 8px; background: #8A7A5F; border-radius: 2px; }
.legend__swatch--town {
  width: 9px; height: 9px; border-radius: 50%; margin: 5px 0 0 4px;
  background: var(--copper-lt); border: 1.5px solid var(--panel);
}

.no-js .legend { display: none; }