/* ============================================================================
   SANKOFA · interface layer v31 (v32: phone map corners de-collided)
   One system for the chrome: tokens, header, panels, intro, neatline.
   Loaded after styles.css and clean-ui.css; overrides by specificity, never
   by deleting anything underneath. Remove the <link> and the page is v29.

   Brand kept: green-black ground, archival gold, Fraunces for the name and
   the motto, Inter for reading, the square as the unit (the map is drawn in
   squares, so the interface is too). Red carries loss and urgency only.
   ============================================================================ */

:root {
  --sk-ground: #0b0e0c;
  --sk-bg:     #0f1310;
  --sk-s1:     #131813;
  --sk-s2:     #181e19;
  --sk-s3:     #1f2620;
  --sk-line:   rgba(233,237,232,.085);
  --sk-line2:  rgba(233,237,232,.16);
  --sk-ink:    #e9ede8;
  --sk-ink2:   #b7c0b8;
  --sk-ink3:   #8b968c;
  --sk-ink4:   #5f6a60;
  --sk-gold:   #c9a227;
  --sk-gold2:  #e7c65a;
  --sk-goldln: rgba(201,162,39,.42);
  --sk-green:  #4ea36b;
  --sk-red:    #d06b5c;

  --sk-disp: "Fraunces", Georgia, "Times New Roman", serif;
  --sk-ui:   "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sk-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* 4 px step */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r: 3px; --r2: 4px;
  --ease: cubic-bezier(.2,0,0,1);
  --t-fast: 160ms; --t-ui: 240ms;
}

::selection { background: rgba(201,162,39,.32); color: #fff; }
:focus-visible { outline: 1px solid var(--sk-gold); outline-offset: 2px; }

/* ── THE MAP FILLS ITS BOX ────────────────────────────────────────────────
   grid-engine.js sets #map to position:relative inline when it mounts, which
   cancels styles.css's absolute inset:0. The canvas then fell back to its
   built-in 2:1 shape: at 1440 the map stopped 143 px short of the ticker,
   at 390 it was 195 px tall inside a 641 px box. */
.map-wrap > #map { position: absolute !important; inset: 0; }
.map-wrap > #map > canvas { width: 100% !important; height: 100% !important; }
/* the closed detail panel waits off-canvas to the right; clip it at its own
   container so focus or find-in-page can never slide the whole page sideways */
.app > .body { overflow: hidden; }

/* ── HEADER ───────────────────────────────────────────────────────────────
   Two rows. Finding comes first: brand, search, the view switch. Then one
   quiet line of places to go, ending in the only filled control on the bar. */
.topbar.sk-top {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; background: var(--sk-bg); border-bottom: 1px solid var(--sk-line);
}
.sk-top .sk-row {
  display: flex; align-items: center; gap: var(--s5);
  height: 60px; padding: 0 var(--s5);
}
.sk-top .brand { gap: var(--s3); min-width: 0; color: inherit; text-decoration: none; }
.sk-top .brand:hover { text-decoration: none; }
.sk-top .brand .mark {
  width: 32px; height: 32px; border-radius: var(--r); background: var(--sk-gold);
  border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); position: relative;
}
.sk-top .brand .mark span {
  font-family: var(--sk-disp); font-weight: 600; font-size: 21px; line-height: 1;
  color: #171300; transform: translateY(-1px);
}
.sk-top .brand h1 {
  font-family: var(--sk-disp); font-weight: 600; font-size: 22px; letter-spacing: -.012em;
  line-height: 1; color: var(--sk-ink);
}
.sk-top .brand .sub {
  font-family: var(--sk-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--sk-ink3);
  margin-top: 5px; white-space: nowrap;
}

.sk-top .searchwrap { flex: 1 1 auto; max-width: 620px; min-width: 220px; margin-left: var(--s3); }
.sk-top .searchwrap input {
  height: 38px; padding: 0 var(--s3) 0 38px; border-radius: var(--r);
  background: var(--sk-s1); border: 1px solid var(--sk-line2);
  font: 400 13.5px/1 var(--sk-ui); color: var(--sk-ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sk-top .searchwrap input:hover { border-color: rgba(233,237,232,.24); }
.sk-top .searchwrap input:focus { border-color: var(--sk-goldln); background: var(--sk-s2); box-shadow: none; }
.sk-top .searchwrap .ico { left: 13px; color: var(--sk-ink3); }

/* the view switch: two words and a rule under the one in force */
.sk-top .seg {
  margin-left: auto; flex: 0 0 auto; background: none; border: 0; padding: 0; gap: var(--s5);
  border-radius: 0; height: 60px; align-items: stretch;
}
.sk-top .seg button {
  flex: 0 0 auto; padding: 0; border-radius: 0; background: none; position: relative;
  font: 500 13px/1 var(--sk-ui); color: var(--sk-ink3); letter-spacing: .005em;
  transition: color var(--t-fast) var(--ease);
}
.sk-top .seg button:hover { color: var(--sk-ink); }
.sk-top .seg button.on { background: none; color: var(--sk-ink); }
.sk-top .seg button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sk-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease);
}
.sk-top .seg button.on::after { transform: scaleX(1); }

/* the second line */
.topbar-actions.sk-nav {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: nowrap;
  height: 40px; padding: 0 var(--s5); border-top: 1px solid var(--sk-line);
  background: var(--sk-ground); overflow: hidden;
}
.sk-nav .btn {
  padding: 0; height: 40px; display: inline-flex; align-items: center;
  border: 0; border-radius: 0; background: none; color: var(--sk-ink2);
  font: 500 12.5px/1 var(--sk-ui); letter-spacing: .01em; white-space: nowrap;
  text-decoration: none; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.sk-nav .btn:hover { background: none; color: var(--sk-ink); border: 0; text-decoration: none; }
.sk-nav .btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px;
  background: var(--sk-goldln); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease);
}
.sk-nav .btn:hover::after { transform: scaleX(1); }
.sk-nav .sk-nav-tag {
  font: 500 9.5px/1 var(--sk-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-ink4); white-space: nowrap; margin-right: calc(var(--s2) * -1);
}
.sk-nav .btn.btn-primary {
  margin-left: auto; height: 28px; padding: 0 var(--s4); border-radius: var(--r);
  background: var(--sk-gold); color: #171300; font-weight: 600; font-size: 12.5px;
  border: 0;
}
.sk-nav .btn.btn-primary::after { display: none; }
.sk-nav .btn.btn-primary:hover { background: var(--sk-gold2); color: #171300; filter: none; }
/* news.js places "In the news" before Submit; give it a quiet marker so a
   reader can tell gathered reporting from the record at a glance */
.sk-nav #news-btn .label::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
  background: var(--sk-red); vertical-align: 2px;
}

/* ── THE BANNER: one statement, set like a caption ───────────────────────── */
.demo-banner {
  text-align: left; background: var(--sk-ground); border-bottom: 1px solid var(--sk-line);
  padding: 8px var(--s5); font: 400 12px/1.5 var(--sk-ui); color: var(--sk-ink3);
}
.demo-banner strong { color: var(--sk-ink2); font-weight: 600; }
.demo-banner > strong:first-child {
  font: 600 9.5px/1 var(--sk-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-gold); margin-right: var(--s2); vertical-align: 1px;
}
.demo-banner a { color: var(--sk-gold) !important; white-space: nowrap; }

/* ── GATHERINGS STRIP (built by cities.js; its own CSS is injected later,
   so these rules win on specificity, not order) ─────────────────────────── */
html body #gatherbar { background: var(--sk-ground); border-bottom: 1px solid var(--sk-line); font-family: var(--sk-ui); }
html body #gatherbar .gb-label {
  background: none; color: var(--sk-green); box-shadow: none; border-right: 1px solid var(--sk-line);
  font: 600 9.5px/1 var(--sk-mono); letter-spacing: .16em; padding: 0 var(--s4);
}
html body #gatherbar .gb-item { color: var(--sk-ink2); }
html body #gatherbar .gb-item b { color: var(--sk-ink); font-weight: 600; }
html body #gatherbar .gb-mo { color: var(--sk-gold); font: 500 9.5px/1 var(--sk-mono); letter-spacing: .1em; }
html body #gatherbar .gb-dot { color: var(--sk-ink4); }
html body #gatherbar .gb-browse {
  background: none; border-left: 1px solid var(--sk-line); color: var(--sk-green); font-weight: 600;
}
html body #gatherbar .gb-browse:hover { background: rgba(78,163,107,.10); color: #8fd8ab; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar { background: var(--sk-bg); border-right: 1px solid var(--sk-line); }
.sidebar .panel-title {
  font: 500 9.5px/1 var(--sk-mono); letter-spacing: .16em; color: var(--sk-ink3);
}
.sidebar .group-head { font-size: 11.5px; letter-spacing: .06em; border-bottom-color: var(--sk-line); }
.sidebar .group-head .gh-ico { border-radius: var(--r); }
.sidebar .chk { border-radius: var(--r); }
.sidebar .chk .glyph { border-radius: var(--r); }
.sidebar .chk .cnt { font-family: var(--sk-mono); font-size: 10.5px; }
.sidebar .seg, .sidebar .seg button { border-radius: var(--r); }
.sidebar .field select, .sidebar .field input { border-radius: var(--r); background: var(--sk-s1); border-color: var(--sk-line2); }
.sidebar .btn { border-radius: var(--r); }

/* ── FLOATING PANELS: flat, hairline, a mono title and a coloured tick ───── */
.map-float.patterns, .map-float.legend {
  background: rgba(13,17,14,.94); border: 1px solid var(--sk-line2); border-top: 1px solid var(--sk-line2);
  border-radius: var(--r2); box-shadow: 0 10px 28px rgba(0,0,0,.42); backdrop-filter: blur(6px);
}
.map-float.patterns h4, .map-float.legend h4 {
  font: 500 9.5px/1.3 var(--sk-mono); letter-spacing: .14em; color: var(--sk-ink2);
  padding-left: 12px; position: relative;
}
.map-float.patterns h4, .map-float.legend h4 { padding-right: 30px; }
.map-float.patterns h4::before, .map-float.legend h4::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 6px; height: 6px;
}
.map-float.patterns h4::before { background: var(--crimson, #c05a4a); }
.map-float.legend h4::before { background: var(--sk-green); }
.map-float.patterns h4 svg { display: none; }
.map-float.patterns .hint { font-size: 11px; line-height: 1.5; color: var(--sk-ink3); }
.map-float.patterns .inst { border-top-color: var(--sk-line); }
.map-float.patterns .inst .n { border-radius: 2px; font-family: var(--sk-mono); font-weight: 500; font-size: 10.5px; }
.map-float.legend .dot { border-radius: 2px; }
.pnl-toggle { border-radius: var(--r) !important; border-color: var(--sk-line2) !important; }

.map-float.count-pill {
  border-radius: var(--r); border: 1px solid var(--sk-line2); border-left: 2px solid var(--sk-gold);
  background: rgba(13,17,14,.94); box-shadow: none; padding: 7px 12px;
  font: 400 11.5px/1 var(--sk-mono); letter-spacing: .02em; color: var(--sk-ink3);
}
.map-float.count-pill b { color: var(--sk-gold); font-weight: 600; }

/* ── DETAIL PANEL AND MODALS: square the corners, keep the content ───────── */
.detail { background: var(--sk-bg); border-left-color: var(--sk-line2); }
.detail .case-id, .detail .section h3 { font-family: var(--sk-mono); font-size: 9.5px; letter-spacing: .14em; }
.detail .avatar, .detail-close, .sources a, .badge, .amber-note { border-radius: var(--r) !important; }
/* cities.js pins its legend and the gatherings strip at z-index 1150, which
   floated them over an open form; a dialog sits above everything it covers */
.modal-scrim { z-index: 1190; }
.modal { border-radius: var(--r2); border-color: var(--sk-line2); background: var(--sk-bg); }
.modal-head h2 { font-family: var(--sk-disp); font-weight: 600; font-size: 24px; letter-spacing: -.01em; }
.modal .btn, .modal input, .modal select, .modal textarea, .pipeline .step { border-radius: var(--r) !important; }

/* ── TICKER ──────────────────────────────────────────────────────────────── */
.ticker { background: var(--sk-ground); border-top: 1px solid var(--sk-line); height: 40px; }
.ticker-tag {
  background: none; border-right: 1px solid var(--sk-line);
  font: 600 9.5px/1 var(--sk-mono); letter-spacing: .16em; padding: 0 var(--s4);
}
.ticker-dot { border-radius: 0; width: 6px; height: 6px; }
.tk-fact { font-size: 12.5px; color: var(--sk-ink2); }
.tk-src { font-family: var(--sk-mono); font-size: 10.5px; }

/* ── THE NEATLINE ────────────────────────────────────────────────────────
   A surveyor's graduated frame around the map. Every tick is a real degree
   of the view on screen and moves with it. Drawn by neatline.js. */
.sk-neat { position: absolute; inset: 0; z-index: 390; pointer-events: none; }
.sk-neat canvas { display: block; width: 100%; height: 100%; }

/* ── INTRO: the title page ───────────────────────────────────────────────── */
.intro {
  background: var(--sk-ground);
  background-image: radial-gradient(90% 70% at 18% 0%, rgba(78,163,107,.07) 0%, rgba(78,163,107,0) 60%);
  justify-content: flex-start; padding: 0;
}
.intro .intro-inner {
  max-width: 1320px; text-align: left; margin: auto; padding: var(--s8) var(--s6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  column-gap: var(--s8); align-items: center;
  animation: sk-rise 520ms var(--ease) both;
}
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro .sk-intro-copy { min-width: 0; }
.intro .intro-kicker {
  font: 500 10.5px/1 var(--sk-mono); letter-spacing: .2em; color: var(--sk-gold);
  margin-bottom: var(--s5); display: flex; align-items: center; gap: var(--s3);
}
.intro .intro-kicker::before { content: ""; width: 24px; height: 1px; background: var(--sk-goldln); }
.intro .intro-word {
  font-family: var(--sk-disp); font-weight: 600; font-size: clamp(64px, 9.2vw, 132px);
  line-height: .88; letter-spacing: -.035em; margin-left: -.04em; color: var(--sk-ink);
}
.intro .intro-mean {
  justify-content: flex-start; font-size: clamp(21px, 2.4vw, 30px); margin-top: var(--s4); color: var(--sk-gold2);
}
.intro .intro-sym { font-family: var(--sk-ui); opacity: .7; }
.intro .intro-lede {
  margin: var(--s5) 0 0; max-width: 34em; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; color: var(--sk-ink2);
}
.intro .intro-stats {
  justify-content: flex-start; gap: 0; margin: var(--s6) 0 var(--s6);
  border-top: 1px solid var(--sk-line2); border-bottom: 1px solid var(--sk-line);
}
.intro .istat { padding: var(--s4) var(--s5) var(--s4) 0; margin-right: var(--s5); border-right: 1px solid var(--sk-line); }
.intro .istat:last-child { border-right: 0; margin-right: 0; }
.intro .istat b { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.intro .istat span { font: 500 9.5px/1.3 var(--sk-mono); letter-spacing: .16em; margin-top: var(--s2); }
.intro .intro-go {
  border-radius: var(--r); padding: 0 var(--s5); height: 46px; font: 600 14px/1 var(--sk-ui);
  display: inline-flex; align-items: center; gap: var(--s3); background: var(--sk-gold); color: #171300; border: 0;
  transition: background var(--t-fast) var(--ease);
}
.intro .intro-go:hover { background: var(--sk-gold2); filter: none; }
.intro .intro-note { margin: var(--s4) 0 0; max-width: 34em; font-size: 12px; color: var(--sk-ink3); }

/* the plate: the record's own geography, framed like a survey sheet */
.sk-plate { position: relative; min-width: 0; margin: 0; }
.sk-plate-frame { position: relative; aspect-ratio: 60 / 31; width: 100%; }
.sk-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-plate figcaption {
  margin-top: var(--s3); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font: 400 10px/1.5 var(--sk-mono); letter-spacing: .06em; color: var(--sk-ink3);
}
.sk-plate figcaption b { color: var(--sk-ink2); font-weight: 500; }
.sk-plate .sk-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sk-plate .sk-key i { display: inline-block; width: 7px; height: 7px; }

/* ── 1024 and below ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sk-top .brand .sub { display: none; }
  .sk-nav .sk-nav-tag { display: none; }
}
@media (max-width: 1023px) {
  .intro .intro-inner { grid-template-columns: 1fr; row-gap: var(--s6); max-width: 720px; padding: var(--s7) var(--s5); }
}

/* ── phones and small tablets (styles.css switches layout at 860) ────────── */
@media (max-width: 860px) {
  .sk-top .sk-row { height: 56px; gap: var(--s3); padding: 0 var(--s4); }
  .sk-top .hamburger { width: 36px; height: 36px; border-radius: var(--r); background: var(--sk-s1); border-color: var(--sk-line2); }
  .sk-top .brand .mark { width: 28px; height: 28px; }
  .sk-top .brand .mark span { font-size: 18px; }
  .sk-top .brand h1 { font-size: 19px; }
  .sk-top .searchwrap { margin-left: 0; min-width: 0; }
  .sk-top .searchwrap input { height: 36px; font-size: 16px; }   /* 16px stops iOS zooming the page on focus */
  .sk-top .searchwrap input::placeholder { font-size: 13px; }
  .sk-top .seg { display: none; }
  .topbar-actions.sk-nav { height: 40px; padding: 0 var(--s4) !important; gap: var(--s5) !important; overflow-x: auto !important; }
  .sk-nav .btn .label { display: inline !important; }
  .sk-nav #about-btn { display: inline-flex !important; }
  .sk-nav .btn.btn-primary { margin-left: 0; flex: 0 0 auto; }
  .demo-banner { padding: 7px var(--s4); font-size: 11.5px; }
  /* the link row scrolls sideways; the fade says there is more */
  .topbar-actions.sk-nav { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 48px !important; }
  #grid-scale { font-size: 9.5px !important; padding: 4px 8px !important; border-radius: var(--r) !important;
    top: 46px; bottom: auto !important; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-float.count-pill { font-size: 10.5px; padding: 6px 10px; }
  .ticker-tag { padding: 0 var(--s3); }
  /* v32: the stats line wraps instead of cutting off, and the source note
     leaves the top edge (the record count lives there) for the bottom-left
     corner, clear of the pin colour key on the right */
  #grid-scale { white-space: normal !important; text-overflow: clip; overflow: visible; line-height: 1.45 !important; }
  .map-wrap .sk-attr {
    top: auto !important; right: auto !important; left: 10px !important; bottom: 10px !important;
    max-width: 128px; white-space: normal; line-height: 1.4; font-size: 9px !important; padding: 4px 7px !important;
  }
}
@media (max-width: 600px) {
  .intro .intro-inner { padding: var(--s7) var(--s4) var(--s6); }
  .intro .intro-stats { flex-wrap: nowrap; }
  .intro .istat { padding-right: var(--s3); margin-right: var(--s3); flex: 1 1 0; min-width: 0; }
  .intro .istat span { letter-spacing: .1em; }
  .sk-plate figcaption { font-size: 9.5px; }
}
@media (max-width: 380px) {
  .sk-top .brand h1 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro .intro-inner { animation: none; }
  .sk-top .seg button::after, .sk-nav .btn::after { transition: none; }
}