/* ════════════════════════════════════════════════════════════════
   index.css — Financial Censorship Monitor main stylesheet

   SECTIONS                                              line
   ─────────────────────────────────────────────────────────────
   Reset & base .................................................  9
   Utilities ...................................................  14
   Design tokens ...............................................  19
   Box system ..................................................  29
   Section backgrounds .........................................  36
   Scroll reveal ...............................................  43
   Hero ........................................................  48
   Context section .............................................  153
   Map .........................................................  217
   MapLibre popup .............................................  232
   MapLibre gesture overlay ...................................  345
   MapLibre map ...............................................  352
   Year slider ................................................  420
   Pill activation ............................................  436
   Case list grid .............................................  452
   Type pill colour tokens ....................................  462
   Data columns ...............................................  474
   Tooltip & card .............................................  593
   Card backdrop ..............................................  609
   Buttons (show more / all) .................................  772
   Filter bar .................................................  852
   Case row ...................................................  1048
   Keyboard focus .............................................  1083
   iOS / mobile fixes .........................................  1089
   Mobile overrides ...........................................  1095
   Filter dropdown tweaks ....................................  1191
   Map attribution ............................................  1198
   Case-card meta grid ........................................  1212
   Swipe animations ...........................................  1228
   CTA block ..................................................  1248
   Tooltip mobile .............................................  1257
   Blockchain section .........................................  1266
   Chain block collapse .......................................  1338
   Bitcoin section ............................................  1365
   Bitcoin stats ..............................................  1393
   ════════════════════════════════════════════════════════════════ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #111111; overscroll-behavior-x: none; scrollbar-gutter: stable; }
body { background: #111111; color: #e8e8e0; font-family: 'IBM Plex Mono', monospace; overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Tailwind-independent utilities ── */
.hidden { display: none !important; }
.flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* ── Design tokens ── */
:root {
  --cream:            #e8e8e0;
  --cream-rgb:        232,232,224;
  --rust:              #F7931A;
  --bdr-dark:          2px solid #111111;
  --bdr-black:         3px solid #111111;
  --hero-red:          #CC1A1A;
}

/* ── Box system ── */
.box          { border: var(--bdr-black); }
.box-dark     { border: var(--bdr-dark); }
.box--rust-top  { border-top:  4px solid var(--rust) !important; }
.box--rust-left { border-left: 4px solid var(--rust) !important; }
.box--dashed  { border-style: dashed !important; }

/* ── Section backgrounds ── */
.section-dark  { background: #111111; color: #e8e8e0; }
#record-section { background: #111111; }
#bitcoin-section { background: #111111; }
#resilience-actions { background: #111111; }
footer         { background: #111111; }

/* ── Scroll reveal ── */
.reveal { transition: opacity 0.32s ease-in-out, transform 0.32s ease-in-out; }
html.js-ready .reveal { opacity: 0; transform: translateY(18px); }
html.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Hero - DEBANKED first screen ── */
#hero {
  position: relative;
  height: calc(100vh - 44px);
  height: calc(100svh - 44px);
  background: var(--hero-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 3rem) 2rem 2rem;
  overflow: hidden;
}

#hero-stage {
  position: relative;
  width: min(84vw, 1400px);
  height: clamp(330px, 52vh, 610px);
  margin-top: clamp(-3rem, -4vh, -1rem);
  z-index: 1;
}

#hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#hero-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.65;
  color: rgba(17,17,17,0.65);
  max-width: min(780px, 85vw);
  text-align: left;
  position: relative;
  z-index: 3;
  margin-top: clamp(-1rem, -2vh, -0.25rem);
}
#hero-sub .n { color: rgba(17,17,17,0.88); font-weight: 500; }

#hero-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
#hero-chart svg { width: 100%; height: 100%; overflow: visible; display: block; }
#hero-chart .hero-chart-line {
  fill: none;
  stroke: #111111;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#hero-chart .hero-chart-dot { fill: #111111; }
#hero-chart text {
  font-family: 'IBM Plex Mono', monospace;
  fill: #111111;
}
#hero-chart .hero-title-svg {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  fill: #111111;
  letter-spacing: 0;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: var(--hero-red);
  stroke-width: 9px;
  stroke-linejoin: round;
}
.hero-chart-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero-chart-sub {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.62;
}

#hero-arrow {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: #111111;
  pointer-events: none;
  user-select: none;
}


/* ── Context section ── */
#context-section {
  background: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 6rem 2rem;
  gap: 3.5rem;
}
#bitcoin-section > .inner,
#resilience-actions > .inner {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#slideshow-img {
  width: clamp(260px, 28vw, 400px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111111;
  display: block;
  filter: grayscale(1) contrast(1.36) brightness(1.05);
}
#slideshow-frame {
  position: relative;
  width: clamp(260px, 28vw, 400px);
  aspect-ratio: 1 / 1;
  background: #111111;
}
#slideshow-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.75' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 54px 54px;
}
#slideshow-img.is-logo-frame {
  object-fit: contain;
  background: #e8e8e0;
}
#context-text {
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.context-copy {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.55;
  color: rgba(232,232,224,0.88);
}
@media (max-width: 640px) {
  #context-section { padding: 4rem 1.25rem; gap: 2.5rem; }
  .context-copy { font-size: 17px; }
}

/* ── Map section ── */
#map-section {
  position: relative;
  overflow: hidden;
  background: #111111;
  height: calc(100vh - 44px);
  height: calc(100svh - 44px);
}
#map-container {
  position: absolute;
  inset: 0;
  transition: filter 0.18s ease-in-out, transform 0.18s ease-in-out;
  transform-origin: center;
}

/* ── MapLibre Popup - newspaper style ── */
.maplibregl-popup { z-index: 50; }
.maplibregl-popup-content {
  font-family: 'Space Grotesk', sans-serif;
  background: #faf8f5;
  border-radius: 0;
  padding: 0;
  box-shadow: 4px 4px 0 rgba(17,17,17,0.18), 0 8px 32px rgba(17,17,17,0.12);
  width: 300px;
  border-top: 4px solid #1a1a1a;
}
.maplibregl-popup-content {
  background: #131517;
  border-top-color: #CC1A1A;
  box-shadow: 4px 4px 0 rgba(232,232,224,0.08), 0 12px 48px rgba(17,17,17,0.6);
}
.maplibregl-popup-close-button {
  font-size: 18px;
  line-height: 1;
  color: rgba(17,17,17,0.28);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0; right: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.maplibregl-popup-close-button { color: rgba(232,232,224,0.3); }
.maplibregl-popup-close-button:focus-visible { outline: 2px solid #F7931A; outline-offset: -2px; }
.maplibregl-popup-tip { display: none; }

/* Popup header */
.mp-header {
  padding: 14px 40px 12px 16px;
  border-bottom: 3px double rgba(17,17,17,0.14);
}
.mp-header { border-bottom-color: rgba(232,232,224,0.1); }
.mp-country {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
.mp-country { color: #f0ece6; }
.mp-total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(17,17,17,0.55);
  margin-top: 4px;
}
.mp-total { color: rgba(232,232,224,0.5); }

/* Case list - all cases, scrollable */
.mp-rows {
  max-height: 320px;
  overflow-y: auto;
}
.mp-rows::-webkit-scrollbar { width: 3px; }
.mp-rows::-webkit-scrollbar-track { background: transparent; }
.mp-rows::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.15); }
.mp-rows::-webkit-scrollbar-thumb { background: rgba(232,232,224,0.15); }
.mp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 44px;
  border-bottom: 1px solid rgba(17,17,17,0.07);
  cursor: pointer;
  transition: background 0.1s;
  width: 100%;
  text-align: left;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
}
.mp-row:nth-child(even) { background: rgba(17,17,17,0.03); }
.mp-row:hover { background: rgba(204,26,26,0.07) !important; }
.mp-row:focus-visible { outline: 2px solid #CC1A1A; outline-offset: -2px; }
.mp-row { border-bottom-color: rgba(232,232,224,0.06); }
.mp-row:nth-child(even) { background: rgba(232,232,224,0.035); }
.mp-row:hover { background: rgba(204,26,26,0.12) !important; }
.mp-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(17,17,17,0.55);
  flex-shrink: 0;
  width: 72px;
}
.mp-date { color: rgba(232,232,224,0.52); }
.mp-name {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
}
.mp-name { color: rgba(232,232,224,0.88); }


#last-updated-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: rgba(17,17,17,0.75);
}
.hdr-d1 + .hdr-d2 { margin-left: 0.35em; }

/* ── MapLibre cooperative gesture overlay ── */
.maplibregl-cooperative-gestures {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

/* ── MapLibre map ── */
#case-map {
  position: absolute;
  inset: 0;
}
/* Cooperative gesture overlay */
#case-map .maplibregl-cooperative-gestures {
  background: rgba(17,17,17,0.52) !important;
  color: rgba(232,232,224,0.9) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
/* Zoom control */
#case-map .maplibregl-ctrl-group {
  box-shadow: none !important;
  border: 1px solid rgba(17,17,17,0.15) !important;
  border-radius: 2px !important;
}
#case-map .maplibregl-ctrl-group button {
  width: 28px !important;
  height: 28px !important;
}
#case-map .maplibregl-ctrl-group {
  border-color: rgba(232,232,224,0.15) !important;
  background: rgba(20,20,20,0.8) !important;
}
#case-map .maplibregl-ctrl-group button {
  background-color: transparent !important;
  filter: invert(1) opacity(0.6);
}
/* Attribution */
#case-map .maplibregl-ctrl-attrib {
  background: rgba(17,17,17,0.72) !important;
  font-size: 8px !important;
  color: rgba(232,232,224,0.65) !important;
  box-shadow: none !important;
  border: 1px solid rgba(232,232,224,0.12) !important;
  border-radius: 2px !important;
  padding: 0.22rem 0.35rem !important;
}
#case-map .maplibregl-ctrl-attrib a {
  color: rgba(232,232,224,0.82) !important;
  text-decoration: none !important;
}
#case-map .maplibregl-ctrl-attrib a:hover {
  color: #e8e8e0 !important;
  text-decoration: underline !important;
}
.maptiler-logo-attribution {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: block;
  width: 92px;
  line-height: 0;
  opacity: 0.85;
}
.maptiler-logo-attribution img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile - hero adjustments */
@media (max-width: 640px) {
  #hero { padding: 1.5rem 1.25rem 2rem; justify-content: center; }
  #hero-stage {
    width: min(94vw, 34rem);
    height: clamp(330px, 49vh, 460px);
    margin-top: -0.25rem;
  }
  #hero-title {
    width: 1px;
    height: 1px;
  }
  #hero-sub { font-size: 14px; max-width: 90vw; margin-top: -0.5rem; text-align: left; }
  #hero-chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #hero-chart .hero-chart-line { stroke-width: 4.4; }
  #hero-chart .hero-chart-label { font-size: 30px; font-weight: 700; }
  #hero-chart .hero-chart-sub { font-size: 19px; font-weight: 700; opacity: 0.86; }
  #hero-chart .hero-chart-dot { r: 16px; }
  #site-hdr { padding-left: 1.25rem !important; padding-right: 1.25rem !important; display: grid !important; grid-template-columns: 1fr auto; align-items: start; gap: 0.5rem; }
  #last-updated-label { margin-left: 0; }
  .hdr-t2 { display: block; }
  .hdr-d1, .hdr-d2 { display: block; text-align: right; }
  .hdr-d1 + .hdr-d2 { margin-left: 0; }
}

/* ── Year slider thumbs ── */
input[type=range] { -webkit-appearance: none; appearance: none; pointer-events: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #e8e8e0; cursor: pointer; pointer-events: all;
  border: 2px solid rgba(17,17,17,0.15); box-shadow: 0 1px 3px rgba(17,17,17,0.2);
}
@media (max-width: 640px) {
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #e8e8e0; cursor: pointer; border: 2px solid rgba(17,17,17,0.15); pointer-events: all;
}

/* ── Pill activation ── */
@keyframes pillActivate {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1.0); }
}
.pill-activating { animation: pillActivate 0.18s ease-out forwards; }

.case-row-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.case-row.is-open .case-row-body { grid-template-rows: 1fr; }
.case-row-body-inner { overflow: hidden; min-height: 0; }

/* ── Case list: aligned grid ────────────────────────────────────── */
.cr-grid {
  display: grid;
  grid-template-columns: 160px 130px 72px 1fr 220px;
  column-gap: 1.5rem;
  align-items: center;
}

/* Collapsed row */
.cr-registry { padding: 0.75rem 0.75rem; min-height: 48px; border-bottom: 1px solid rgba(232,232,224,0.10); }
/* ── Type pill colour tokens - keyed to actual DB values ── */
:root {
  --pill-media:    #1e6fa8;
  --pill-movement: #2e8c52;
  --pill-party:    #8a4e10;
  --pill-ngo:      #3a7a6e;
  --pill-business: #4a5568;
  --pill-individual:#7a4a8a;
  --pill-other:    #666666;
  --pill-religious:#7a6510;
}

/* ── Data columns - same colour, different sizes ── */
.cr-col-country { font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(232,232,224,0.72); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cr-col-type    { overflow:hidden; min-width:0; }
.cr-col-year    { font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(232,232,224,0.72); }
.cr-col-name    { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; color:rgba(232,232,224,0.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cr-col-source  { font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(232,232,224,0.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* Source column as link - orange + underline to signal clickability */
a.cr-col-source { color: rgba(232,232,224,0.72) !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(232,232,224,0.25); }
a.cr-col-source:hover { color: #e8e8e0 !important; text-decoration-color: rgba(232,232,224,0.6); }
.cr-type-pill {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #e8e8e0;
  background: var(--pill-clr, #666666);
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cr-type-pill[data-type="Media Organisation"] { --pill-clr: var(--pill-media); }
.cr-type-pill[data-type="Protest Movement"]   { --pill-clr: var(--pill-movement); }
.cr-type-pill[data-type="Political Party"]    { --pill-clr: var(--pill-party); }
.cr-type-pill[data-type="NGO"]                { --pill-clr: var(--pill-ngo); }
.cr-type-pill[data-type="Business"]           { --pill-clr: var(--pill-business); }
.cr-type-pill[data-type="Individual"]         { --pill-clr: var(--pill-individual); }
.cr-type-pill[data-type="Other"]              { --pill-clr: var(--pill-other); }
.cr-type-pill[data-type="Religious Group"]    { --pill-clr: var(--pill-religious); }

/* Open state - row unchanged, card slides in */
.case-row.is-open { background: rgba(232,232,224,0.03); outline: 1px solid rgba(232,232,224,0.08); outline-offset: -1px; }
.case-row.is-open .cr-registry { border-bottom: none; }

/* Expanded card - single column stacked */
.cr-open {
  position: relative;
  padding: 0.75rem calc(220px + 1.5rem) 1.5rem 0.75rem;
}
.cr-section { margin-top: 1rem; }
.cr-section:first-child { margin-top: 0; }
.cr-sources-aside {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  max-height: min(14rem, calc(100vh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,232,224,0.28) transparent;
}
.cr-sources-aside::-webkit-scrollbar { width: 4px; }
.cr-sources-aside::-webkit-scrollbar-thumb { background: rgba(232,232,224,0.28); }
.cr-sources-aside::-webkit-scrollbar-track { background: transparent; }
.cr-source-link {
  display: block;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(232,232,224,0.72);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(232,232,224,0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.cr-source-link:hover { color: #e8e8e0; text-decoration-color: rgba(232,232,224,0.6); }
.cr-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(232,232,224,0.48);
  margin-bottom: 0.35rem;
  user-select: none;
}
.cr-section-body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(232,232,224,0.75);
  text-align: justify;
  text-align-last: left;
}

/* Mobile breakpoints are defined at bottom of stylesheet to correctly override base table rules */

/* Mobile meta line - base style (hidden on desktop, shown on phone via late override) */
.cr-mobile-meta {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(232,232,224,0.35);
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.cr-mobile-meta a {
  color: rgba(232,232,224,0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(232,232,224,0.25);
}

/* ── Tooltip & card visibility ── */
[data-visible="false"] {
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.10s ease-in-out, transform 0.10s ease-in-out;
}
[data-visible="true"] {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.13s ease-in-out, transform 0.13s ease-in-out;
}
@media (max-width: 640px) {
  #map-tooltip[data-visible="true"]  { transform: translateY(0) scale(1) !important; }
  #map-tooltip[data-visible="false"] { transform: translateY(8px) scale(0.97) !important; }
}

/* ── Card backdrop ── */
html.modal-open #site-hdr,
html.modal-open #hero,
html.modal-open #context-section,
html.modal-open #record-section,
html.modal-open #bitcoin-section,
html.modal-open #resilience-actions,
html.modal-open #cta-submit,
html.modal-open footer {
  filter: blur(5px);
  transition: filter 0.18s ease-in-out;
}
html.modal-open #map-section #case-map {
  filter: none !important;
}
#map-blur-snapshot {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  z-index: 20;
  filter: blur(8px) brightness(0.78);
  pointer-events: none;
  user-select: none;
}
/* Backdrop stays translucent; map blur uses a canvas snapshot so WebGL does not render black. */
#modal-backdrop {
  background: rgba(17,17,17,0.38) !important;
  transform: none !important;
  transition: opacity 0.18s ease-in-out 80ms !important;
}
/* Swipe handle */
.swipe-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(232,232,224,0.25);
  margin: 0 auto 0.75rem;
  flex-shrink: 0;
}
/* Card inner transition for swipe feedback */
#case-modal > div { transition: transform 0.10s ease-in-out; }
/* Prevent card scroll bleeding into page body */
#case-modal > div { overscroll-behavior-y: contain; }
/* Mobile: case card */
@media (max-width: 640px) {
  #case-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.85rem !important;
  }
  #case-modal > div {
    max-width: 100% !important; width: 100% !important;
    height: min(86dvh, 44rem) !important;
    max-height: min(86dvh, 44rem) !important;
    border: none !important;
    border-top: 4px solid rgba(232,232,224,0.92) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
    box-shadow: 4px 4px 0 rgba(232,232,224,0.08), 0 12px 48px rgba(17,17,17,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #case-modal > div::-webkit-scrollbar { display: none; }
  #modal-handle { display: none !important; }
  #modal-content {
    padding: 1.15rem 1rem 0.65rem !important;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }
  #modal-content::-webkit-scrollbar { display: none; }
  #modal-swipe-hint { display: block !important; }
  #modal-close { width: 44px !important; height: 44px !important; top: 0.55rem !important; right: 0.55rem !important; font-size: 24px !important; }
  #modal-content h2 { font-size: clamp(20px, 5.3vw, 24px) !important; line-height: 1.18 !important; margin-bottom: 0.9rem !important; padding-right: 1.75rem !important; }
  #modal-content p { font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 1rem !important; }
  #modal-content [style*="font-size:10px"] { font-size: 11px !important; line-height: 1.45 !important; }
  #modal-content [style*="margin-bottom:1rem"] { margin-bottom: 0.65rem !important; }
  .modal-meta-grid { gap: 0.55rem !important; padding-top: 0.75rem !important; margin-top: auto !important; margin-bottom: 0.75rem !important; }
  .modal-meta-grid > div + div { margin-top: 0.55rem !important; }
  .modal-meta-label { color: rgba(232,232,224,0.62) !important; }
  .modal-meta-value { font-size: 13px !important; line-height: 1.5 !important; }
  #modal-counter { flex: 0 0 auto !important; padding: 0.45rem 1rem !important; font-size: 11px !important; }
  #modal-swipe-hint { flex: 0 0 auto !important; padding-bottom: 1rem !important; }
}
/* Mobile: tooltip - map-contained card, matching desktop treatment */
@media (max-width: 640px) {
  #map-tooltip {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(calc(100vw - 2rem), 320px) !important;
    max-width: none !important;
    max-height: min(calc(100% - 1.5rem), 82svh, 42rem) !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 4px solid #CC1A1A !important;
    background: #131517 !important;
    box-shadow: 4px 4px 0 rgba(232,232,224,0.08), 0 12px 48px rgba(17,17,17,0.6) !important;
    z-index: 45 !important; padding-bottom: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }
  #map-tooltip::-webkit-scrollbar { display: none; }
  #map-tooltip .mp-header { position: relative; padding-right: 48px; }
  #map-tooltip .mobile-tip-close {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(232,232,224,0.3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }
  #map-tooltip .mp-rows {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(min(calc(100% - 1.5rem), 82svh, 42rem) - 6rem) !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }
  #map-tooltip .mp-rows::-webkit-scrollbar { display: none; }
  #map-tooltip .mp-row { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* ── Responsive grids ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: end; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ── Section inner padding ── */
.inner { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
@media (max-width: 640px) { .inner { padding: 2rem 1.25rem; } }
.inner--wide { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .inner--wide { padding: 0 1.25rem; } }
#record-section .inner--wide { padding-top: 5rem; padding-bottom: 3rem; }

/* ── Show more / Show all buttons ── */
.btn-show-more {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232,232,224,0.45);
  background: none;
  border: 1px solid rgba(232,232,224,0.20);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-show-more:hover { border-color: rgba(232,232,224,0.55); color: #e8e8e0; }
.btn-show-all {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F7931A;
  background: none;
  border: 1px solid rgba(247,147,26,0.40);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cta-submit-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F7931A;
  border: 1px solid #F7931A;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-submit-link:focus-visible {
  outline: 2px solid #F7931A;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-show-all:hover { background: #F7931A; color: #111111; border-color: #F7931A; }
  .cta-submit-link:hover { background: #F7931A; color: #111111; }
}
@media (hover: none), (pointer: coarse) {
  .btn-show-all:hover,
  .btn-show-all:active,
  .btn-show-all:focus {
    background: transparent;
    color: #F7931A;
    border-color: rgba(247,147,26,0.40);
  }
  .cta-submit-link:hover,
  .cta-submit-link:active,
  .cta-submit-link:focus {
    background: transparent;
    color: #F7931A;
  }
}

/* ── Transition rule ── */
.transition-rule {
  background: #111111;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem 2rem;
}
.transition-rule-line { flex: 1; height: 1px; background: #2a2a2a; }
.transition-rule-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,232,224,0.2);
  white-space: nowrap;
}

/* ── Filter bar ── */
/* Count/clear + search - NOT sticky, sits above the bar */
#filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(232,232,224,0.05);
}
.flt-meta-left { display: flex; align-items: center; gap: 0.6rem; }
/* Sticky bar - dark grey background, columns match cr-grid exactly */
#filter-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #111111;
  margin-bottom: 0;
}
.flt-bar-inner {
  display: grid;
  grid-template-columns: 160px 130px 72px 1fr 220px;
  column-gap: 1.5rem;
  align-items: stretch;
  padding: 0 0.75rem;
}
/* Each column cell stretches full bar height */
.flt-col-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* Buttons on rust bar */
.flt-col-cell .flt-btn {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 0.6rem 0;
  color: rgba(232,232,224,0.92);
}
/* Name column - static label, same visual weight as filter buttons */
.flt-name-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,232,224,0.92);
  user-select: none;
  padding: 0.6rem 0;
  display: block;
}
/* Hover / active on dark grey bar - Option A: underline, no fill */
#filter-bar .flt-btn:hover { background: none; color: #e8e8e0; text-decoration: underline; text-decoration-color: rgba(232,232,224,0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#filter-bar .flt-btn.is-active { background: none; color: #F7931A; text-decoration: underline; text-decoration-color: #F7931A; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Sort button - inside year panel (not on bar) */
.sort-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: rgba(232,232,224,0.65);
  background: none;
  border: 1px solid rgba(232,232,224,0.2);
  border-radius: 2px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sort-btn:hover { color: #e8e8e0; border-color: rgba(232,232,224,0.5); background: rgba(232,232,224,0.06); }
.sort-btn.is-active { background: rgba(247,147,26,0.2); color: #F7931A; border-color: #F7931A; }
/* Year sort row inside panel */
.flt-year-sort { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.btn-remove-case {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232,232,224,0.45);
  border: 1px solid rgba(232,232,224,0.2);
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.btn-remove-case:hover { color: #e8e8e0; border-color: rgba(232,232,224,0.55); }
.flt-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(232,232,224,0.4);
}
.flt-scope {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,232,224,0.36);
}
.flt-scope strong {
  color: rgba(232,232,224,0.62);
  font-weight: 700;
}
#clear-filters {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #F7931A;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
#clear-filters:hover { opacity: 1; }
.cr-search {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232,232,224,0.12);
  color: rgba(232,232,224,0.55);
  width: 180px;
  padding: 0.3rem 0.5rem;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s, color 0.15s;
}
.cr-search:focus {
  outline: none;
  box-shadow: none;
  color: rgba(232,232,224,0.8);
  border-bottom-color: #F7931A;
}
.cr-search::placeholder { color: rgba(232,232,224,0.22); }
.flt-group { position: relative; }
.flt-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: none;
  color: rgba(232,232,224,0.72);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.flt-btn:hover { background: rgba(232,232,224,0.07); color: #e8e8e0; }
.flt-btn.is-active { background: #F7931A; color: #111111; }
.flt-clear-x { margin-left: 0.3em; opacity: 0.7; font-style: normal; }
.flt-clear-x:hover { opacity: 1; }
.flt-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  background: #111111;
  border: 1px solid rgba(232,232,224,0.1);
  z-index: 100;
  display: none;
}
.flt-panel.is-open { display: block; }
#flt-panel-source_site {
  right: 0;
  left: auto;
  max-height: min(60vh, 28rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,232,224,0.28) transparent;
}
#flt-panel-source_site::-webkit-scrollbar { width: 4px; }
#flt-panel-source_site::-webkit-scrollbar-thumb { background: rgba(232,232,224,0.28); }
#flt-panel-source_site::-webkit-scrollbar-track { background: transparent; }
.flt-row {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: rgba(232,232,224,0.5);
  transition: background 0.1s, color 0.1s;
}
.flt-row:hover { background: rgba(232,232,224,0.05); color: rgba(232,232,224,0.85); }
.flt-row.is-active { background: rgba(247,147,26,0.14); color: #F7931A; }
.flt-year-panel { padding: 1rem 1.25rem; min-width: 220px; }

/* ── Case row (dark section) ── */
.case-row { cursor: pointer; border-bottom: 1px solid #1e1e1e; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; }

/* Left bar - springs in when expanded, retracts instantly when collapsed */
.case-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--row-accent, #666666);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}
.case-row.is-open::before {
  transform: scaleY(1);
  transition: transform 0.3s ease-in-out 0.15s;
}
.case-row:hover { background: rgba(232,232,224,0.05); }
.case-row:nth-child(even) { background: rgba(232,232,224,0.018); }
.case-row:nth-child(even):hover { background: rgba(232,232,224,0.055); }

/* Tooltip / case card */
#case-modal > div {
  background: #131517 !important;
  border: none !important;
  border-top: 4px solid rgba(232,232,224,0.92) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(232,232,224,0.08), 0 12px 48px rgba(17,17,17,0.6) !important;
}
#case-modal > div::before {
  content: none !important;
}

/* ── Keyboard focus ── */
.case-row:focus-visible { outline: 2px solid #F7931A; outline-offset: -2px; }
.btn-show-more:focus-visible,
.btn-show-all:focus-visible { outline: 2px solid #F7931A; outline-offset: 2px; }


/* ── iOS / mobile fixes ── */
/* Smooth momentum scrolling for overflow containers */
#map-tooltip, #case-modal > div {
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile overrides - must be last to beat base table rules ── */

/* Tablet (480–768px): add pill column back, hide source only */
@media (max-width: 768px) {
  .cr-grid       { grid-template-columns: 130px 110px 52px 1fr; }
  .flt-bar-inner { grid-template-columns: 130px 110px 52px 1fr; }
  .cr-col-source { display: none; }
  .flt-col-source-cell { display: none; }
}

/* Phone (< 480px) */
@media (max-width: 480px) {
  /* Collapsed row: two-row layout - metadata on row 1, name on row 2 */
  .cr-grid {
    grid-template-columns: 90px 1fr 52px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "country type year"
      "name    name  name";
    column-gap: 0.75rem;
    row-gap: 0.4rem;
  }
  .cr-col-country { grid-area: country; display: block; }
  .cr-col-type    { grid-area: type;    display: block; }
  .cr-col-year    { grid-area: year;    display: block; text-align: right; justify-self: end; }
  .cr-col-name    { grid-area: name; white-space: normal; color: rgba(232,232,224,0.88); font-size: 13px; font-weight: 600; }
  .cr-col-source  { display: none; }

  /* Expanded panel */
  .cr-open { padding-right: 0.75rem; }
  .cr-section-body { text-align: left; font-size: 12px; }
  .cr-mobile-meta { display: flex; }
  .cr-sources-aside {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0.9rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(232,232,224,0.08);
  }
  .cr-source-link {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  #filter-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
  }
  .flt-meta-left {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem 0.75rem;
  }
  .flt-scope {
    grid-column: 1 / -1;
    order: -1;
    line-height: 1.45;
    white-space: normal;
  }
  .cr-search {
    width: 100%;
    font-size: 16px;
    line-height: 1.45;
    padding: 0.25rem 0;
  }

  /* Filter bar: 3-column header aligned with metadata row only */
  .flt-bar-inner { grid-template-columns: 90px 1fr 52px; column-gap: 0.75rem; }
  .flt-name-label { display: none; }
  .flt-col-source-cell { display: none; }
  /* Restore all other cells */
  .flt-col-country-cell,
  .flt-col-type-cell { display: flex; }

  /* Year panel only: bottom sheet (too wide for 44px cell) */
  #flt-panel-year {
    position: fixed;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    top: auto;
    width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 50;
    min-width: unset;
  }
}

/* ── Filter dropdown: remove tap/click focus ring ── */
.flt-btn:focus:not(:focus-visible) { outline: none; }
#filter-bar .flt-btn:focus:not(:focus-visible) { background: none; }

/* ── Filter dropdown: align options directly under button text ── */
.flt-row { padding: 0.6rem 0.5rem; }

/* ── Map attribution: keep condensed, not expandable ── */
.maplibregl-ctrl-attrib-button { display: none !important; }
.maplibregl-ctrl-attrib-inner  { display: block !important; }
.maplibregl-ctrl-attrib        { background: transparent !important; box-shadow: none !important; }
/* ── Hide any MapLibre controls that escape outside #case-map ── */
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right { visibility: hidden; }
#case-map .maplibregl-ctrl-top-left,
#case-map .maplibregl-ctrl-top-right,
#case-map .maplibregl-ctrl-bottom-left,
#case-map .maplibregl-ctrl-bottom-right { visibility: visible; }

/* ── Case-card meta grid: responsive, WCAG-safe ── */
.modal-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
  border-top: 1px solid #111111; padding-top: 1rem; margin-bottom: 1rem;
}
@media (max-width: 480px) { .modal-meta-grid { grid-template-columns: 1fr; } }
.modal-meta-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(232,232,224,0.55); margin-bottom: 0.3rem;
}
.modal-meta-value {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.5;
  color: rgba(232,232,224,0.75);
}

/* ── Swipe-tease hint animations ── */
@keyframes swipeTease {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-28px) rotate(-3deg); }
  33%  { transform: translateX(-28px) rotate(-3deg); }   /* hold left ~0.5 s */
  50%  { transform: translateX(24px) rotate(2.5deg); }
  73%  { transform: translateX(24px) rotate(2.5deg); }   /* hold right ~0.5 s */
  88%  { transform: translateX(-6px) rotate(-0.7deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.swipe-tease { animation: swipeTease 2s ease-in-out forwards; }
@keyframes tipSwipeTease {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(13px); }
  52%  { transform: translateY(-4px); }
  76%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
.tip-swipe-tease { animation: tipSwipeTease 0.38s ease-out forwards; }

/* ── CTA block: centered on mobile ── */
@media (max-width: 640px) {
  #cta-submit .inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ── Tooltip mobile: stable centered transform ── */
@media (max-width: 640px) {
  #map-tooltip {
    transform: translate(-50%, calc(-50% + 8px)) scale(0.97) !important;
  }
  #map-tooltip[data-visible="true"]  { transform: translate(-50%, -50%) scale(1) !important; }
  #map-tooltip[data-visible="false"] { transform: translate(-50%, calc(-50% + 8px)) scale(0.97) !important; }
}

/* ── Blockchain chain visualization ── */
.chain-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 860px;
}
.chain-connector {
  width: 2px;
  height: 3.5rem;
  border-left: 2px dotted rgba(232,232,224,0.18);
  margin-left: 1.75rem;
  flex-shrink: 0;
}
.chain-block {
  border: 2px solid rgba(232,232,224,0.14);
  width: 100%;
}
.chain-block-hdr {
  border-bottom: 1px solid rgba(232,232,224,0.12);
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(232,232,224,0.08);
  letter-spacing: 0.06em;
}
.chain-meta { white-space: nowrap; }
.chain-meta-val { color: rgba(232,232,224,0.13); }
.chain-block-body {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 1.25rem;
}
.chain-block-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #e8e8e0;
  color: #111111;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
}
.chain-block-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 38px);
  color: #e8e8e0;
  line-height: 1.1;
  margin-bottom: 0.65rem;
}
.chain-block-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.75;
  color: rgba(232,232,224,0.75);
}
html.lt .chain-block { border-color: #c8c2b8 !important; }
html.lt .chain-block-hdr { border-bottom-color: #c8c2b8 !important; color: rgba(17,17,17,0.12) !important; }
html.lt .chain-meta-val { color: rgba(17,17,17,0.22) !important; }
html.lt .chain-connector { border-left-color: #c8c2b8 !important; }
html.lt .chain-block-num { background: #111111 !important; color: #e8e8e0 !important; }
html.lt .chain-block-title { color: #111111 !important; }
html.lt .chain-block-text { color: rgba(17,17,17,0.7) !important; }

/* ── Chain block: collapsible ── */
.chain-wrap { margin: 0 auto; }
.chain-block-toggle {
  width: 100%; display: flex; gap: 1.25rem; align-items: center;
  padding: 1.25rem 1.25rem; background: none; border: none; cursor: pointer;
  text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.12s;
}
.chain-block-toggle .chain-block-title { margin-bottom: 0; }
.chain-block-toggle:hover { background: rgba(232,232,224,0.04); }
.chain-chevron {
  flex-shrink: 0; margin-left: auto;
  font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 400;
  color: rgba(232,232,224,0.28); transition: transform 0.22s ease; line-height: 1;
  user-select: none;
}
.chain-block.is-open .chain-chevron { transform: rotate(45deg); color: rgba(232,232,224,0.55); }
.chain-block-collapse {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.chain-block.is-open .chain-block-collapse { grid-template-rows: 1fr; }
.chain-block-collapse-inner { overflow: hidden; min-height: 0; }
html.lt .chain-block-toggle:hover { background: rgba(17,17,17,0.04) !important; }
html.lt .chain-chevron { color: rgba(17,17,17,0.28) !important; }
html.lt .chain-block.is-open .chain-chevron { color: rgba(17,17,17,0.55) !important; }

/* ── Bitcoin section: orange ── */
#bitcoin-section { background: #F7931A !important; color: #111111 !important; position: relative; overflow: hidden; }
#bitcoin-section .section-dark { background: #F7931A; }
#bitcoin-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/bip39-texture.webp");
  background-repeat: repeat;
  background-size: 280px auto;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
#bitcoin-section > .inner { position: relative; z-index: 1; }
#resilience-actions > div[aria-hidden="true"] { display: none; }
@media (max-width: 640px) {
  #bitcoin-section::before {
    background-size: 760px auto;
  }
  html.js-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Bitcoin case stats ── */
.btc-stat-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 1rem 4rem; flex-wrap: wrap;
  margin: 0 auto 3rem; text-align: center;
}
.btc-stat-item { display: flex; flex-direction: column; align-items: center; }
.btc-stat-n {
  font-family: 'Anton', sans-serif;
  font-size: clamp(52px, 8vw, 96px);
  color: #111111; line-height: 1; letter-spacing: -0.01em;
}
.btc-stat-l {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(17,17,17,0.52); margin-top: 0.4rem; line-height: 1.5;
}

/* ── Bitcoin insights: collapsible ── */
.btc-insight { border-top: 1px solid rgba(17,17,17,0.15); }
.btc-insight:last-child { border-bottom: 1px solid rgba(17,17,17,0.15); }
.btc-insight-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(14px, 1.4vw, 17px); color: rgba(17,17,17,0.88);
  text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btc-chevron {
  flex-shrink: 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 20px; color: rgba(17,17,17,0.35);
  transition: transform 0.22s ease; line-height: 1; user-select: none;
}
.btc-insight.is-open .btc-chevron { transform: rotate(45deg); color: rgba(17,17,17,0.65); }
.btc-insight-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.btc-insight.is-open .btc-insight-body { grid-template-rows: 1fr; }
.btc-insight-inner { overflow: hidden; min-height: 0; }

/* ── Extracted from inline styles ── */

/* Site header */
#site-hdr {
  background: var(--hero-red);
  padding: 0.9rem 2rem 0.35rem;
  display: flex; align-items: flex-end; gap: 1rem;
}
.hdr-brand {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(17,17,17,0.75);
}
#last-updated-label { margin-left: auto; }

/* Hero entities redaction widget */
#hero-entities-wrapper { display: inline; cursor: pointer; }
#hero-entities-redacted {
  display: inline-block; position: relative;
  width: 140px; height: 1.3em;
  vertical-align: middle; margin: 0 0.1em;
  user-select: none; overflow: visible;
}
#hero-entities-redacted img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; display: block;
}
#hero-entities-number { display: none; }

/* The Record section heading */
.section-heading-xl {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(80px, 18vw, 220px);
  color: #e8e8e0; line-height: 0.9;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.section-heading-xl--dark { color: #111111; }
.section-heading-reveal { margin-bottom: 2rem; text-align: center; }

/* Record intro text */
.record-intro-wrap {
  max-width: min(780px, 85vw); margin: 0 auto 3rem; text-align: center;
}
.record-intro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(16px, 1.6vw, 22px); line-height: 1.65;
  color: rgba(232,232,224,0.65);
}
.record-intro strong { font-weight: 700; color: #e8e8e0; }

/* Year filter label */
.flt-year-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: rgba(232,232,224,0.4); margin-bottom: 0.5rem;
}

/* Year slider track and fill */
#year-track { position: absolute; height: 1px; background: #111111; width: 100%; }
#year-fill  { position: absolute; height: 1px; background: #e8e8e0; left: 0; right: 0; }
#year-from, #year-to {
  position: absolute; width: 100%; background: transparent; z-index: 10;
}

/* Empty state message */
#empty-state {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: rgba(232,232,224,0.45); text-align: center; padding: 3rem 0;
}

/* Show more / show all row wrappers */
.list-control-row { padding: 1rem 0; text-align: center; }

/* CTA submit block */
#cta-submit { background: #111111; border-top: 1px solid #111111; }
.cta-inner {
  padding-top: 2.5rem; padding-bottom: 2.5rem;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.cta-prompt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  color: rgba(232,232,224,0.45); margin: 0;
}
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cta-inner   { flex-direction: column; align-items: center; text-align: center; }
  .cta-actions {
    justify-content: center;
    width: min(100%, 820px);
    flex-direction: column;
  }
  .cta-actions .cta-submit-link,
  .cta-actions .btn-remove-case {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4rem;
    text-align: center;
  }
}

/* Bitcoin section */
#bitcoin-section .inner { padding-top: 5rem; padding-bottom: 5rem; }
.btc-title-wrap { margin-bottom: 1.5rem; text-align: center; }
.btc-intro-wrap {
  max-width: min(720px, 85vw); margin: 0 auto 2.5rem; text-align: center;
}
.btc-p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(14px, 1.4vw, 18px); line-height: 1.65;
  color: rgba(17,17,17,0.65); margin-bottom: 1.25rem;
}
.btc-p:last-child { margin-bottom: 0; }
.btc-p a { color: #111111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.btc-insights-wrap { max-width: 680px; margin: 0 auto 3rem; }
.btc-insight-inner p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(13px, 1.3vw, 15px); line-height: 1.75;
  color: rgba(17,17,17,0.72); padding-bottom: 1.25rem;
}
.btc-footnote-wrap { max-width: 680px; margin: 0 auto; text-align: center; }
.btc-footnote {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  line-height: 1.7; color: rgba(17,17,17,0.45); padding-top: 1.5rem;
}

/* Resilience / practical steps section */
#resilience-actions { position: relative; overflow: hidden; }
#resilience-actions .inner {
  padding-top: 4rem; padding-bottom: 4rem;
  position: relative; z-index: 1;
}
.chain-block-text { padding: 0 1.25rem 1.5rem 5rem; }
.chain-block-text a {
  color: #F7931A; text-decoration: none;
  border-bottom: 1px solid rgba(247,147,26,0.48);
}
.chain-block-text a.orange-link {
  color: #F7931A; text-decoration: underline;
  text-decoration-color: rgba(247,147,26,0.55);
  border-bottom: none;
}

/* Footer */
footer .inner {
  padding-top: 1.75rem; padding-bottom: 1.75rem;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-made {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: rgba(232,232,224,0.62);
}
.footer-made a { color: rgba(232,232,224,0.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
}
.footer-links a { color: rgba(232,232,224,0.45); text-decoration: underline; }

/* Map tooltip */
#map-tooltip {
  position: fixed; z-index: 45;
  background: #111111; border: 2px solid #111111;
  max-height: 50vh; overflow-y: auto;
  max-width: 288px; width: 288px;
}

/* Modal */
#modal-backdrop {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(17,17,17,0.48);
}
#case-modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: default;
}
.modal-inner {
  width: 100%; max-width: 42rem; max-height: 88vh;
  overflow-y: auto; position: relative;
  background: #111111; border: 2px solid #111111;
}
#modal-handle { display: none; padding-top: 0.75rem; }
#modal-close {
  position: absolute; top: 1rem; right: 1rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 20px;
  line-height: 1; color: rgba(232,232,224,0.4);
  background: none; border: none; cursor: pointer;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; touch-action: manipulation;
}
#modal-content { padding: 1.5rem 2rem 2rem; }
#modal-counter {
  display: none; padding: 0.6rem 2rem;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; color: rgba(232,232,224,0.22); user-select: none;
  border-top: 1px solid rgba(232,232,224,0.06);
}
#modal-swipe-hint {
  display: none; text-align: center; padding: 0.5rem 0 0.875rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.16em; color: rgba(232,232,224,0.18);
}