:root{
  --bg-deep:#0a0e14;
  --bg-panel:#10161f;
  --bg-raised:#161d29;
  --line:#232b38;
  --line-soft:#1a212c;
  --text:#e4e9f0;
  --text-muted:#7c8aa0;
  --text-dim:#4d5a6e;
  --accent:#c9a24b;
  --accent-dim:#8a7238;
  --grade-indicative:#6b7a8f;
  --grade-probable:#d9a441;
  --grade-confirmed:#d14343;
  --cat-cyber:#4c8fd1;
  --cat-disinformation:#a57edb;
  --cat-sabotage:#d9793f;
  --cat-maritime:#2e9e93;
  --cat-airspace:#63c2e0;
  --cat-migration:#d9b44a;
  --cat-espionage:#c0524a;
  --cat-economic:#8fa35e;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg-deep);}
body{
  font-family:var(--font-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(76,143,209,0.06), transparent 55%),
    radial-gradient(ellipse at 100% 110%, rgba(201,162,75,0.05), transparent 50%),
    var(--bg-deep);
}
a{color:var(--cat-cyber);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;align-items:center;gap:20px;
  padding:12px 20px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;}
.brand .mark{
  font-family:var(--font-display);font-weight:800;font-size:19px;
  letter-spacing:0.14em;color:var(--text);
}
.brand .mark em{font-style:normal;color:var(--accent);}
.brand .tagline{
  font-size:11px;color:var(--text-dim);letter-spacing:0.06em;
  text-transform:uppercase;display:none;
}
@media(min-width:860px){.brand .tagline{display:inline;}}

.live-pill{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  padding:5px 10px;border:1px solid var(--line);border-radius:3px;
  background:var(--bg-raised);
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--grade-confirmed);
  box-shadow:0 0 6px var(--grade-confirmed);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.35;}}
.clock{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap;}
.clock b{color:var(--text);font-weight:500;}
.refresh-note{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);white-space:nowrap;}
@media(max-width:640px){.refresh-note{display:none;}.brand .tagline{display:none;}}

/* ---------- trend strip ---------- */
.trendstrip{
  display:flex;align-items:center;gap:18px;
  padding:10px 20px;background:var(--bg-panel);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.trend-summary{flex:none;}
.trend-headline{display:flex;align-items:baseline;gap:8px;}
.trend-headline .n{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text);}
.trend-headline .label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;}
.trend-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}

.trend-delta-block{display:flex;flex-direction:column;gap:3px;flex:none;}
.trend-delta{
  font-family:var(--font-mono);font-size:12px;padding:3px 8px;border-radius:3px;font-weight:500;
  align-self:flex-start;
}
.trend-delta.up{color:var(--grade-confirmed);background:rgba(209,67,67,0.12);}
.trend-delta.down{color:#5fb87c;background:rgba(95,184,124,0.12);}
.trend-delta.flat{color:var(--text-muted);background:var(--bg-raised);}
/* Raw counts sit beside the percentage on purpose: "+83%" off a base of six
   events reads very differently once you can see the six. */
.trend-delta-note{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);white-space:nowrap;}

.trend-chart-col{flex:1;min-width:240px;max-width:600px;}
.trend-chart-wrap{position:relative;height:58px;}
.trend-chart{width:100%;height:100%;}
.trend-chart-wrap svg{display:block;width:100%;height:100%;overflow:visible;}
.trend-axis{position:relative;height:13px;margin-top:1px;}
.trend-axis span{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim);
  letter-spacing:0.04em;white-space:nowrap;
}

.trend-key{display:flex;flex-direction:column;gap:2px;flex:none;max-width:220px;}
.trend-key .tk{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);
}
.trend-key .sw{width:8px;height:8px;border-radius:1px;flex:none;}
.trend-key .sw.confirmed{background:var(--grade-confirmed);}
.trend-key .sw.probable{background:var(--grade-probable);}
.trend-key .sw.indicative{background:var(--grade-indicative);}
.trend-key .tk-note{
  font-family:var(--font-mono);font-size:9px;color:var(--text-dim);
  line-height:1.45;margin-top:5px;
}

.trend-tooltip{
  position:absolute;pointer-events:none;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:3px;padding:6px 9px;font-family:var(--font-mono);font-size:10.5px;color:var(--text);
  white-space:nowrap;opacity:0;transition:opacity .1s ease;transform:translate(-50%,-108%);
  z-index:5;line-height:1.5;box-shadow:0 6px 18px rgba(0,0,0,0.5);
}
.trend-tooltip b{color:var(--accent);font-weight:500;}
.trend-tooltip.show{opacity:1;}

/* ---------- date range row ---------- */
.rangebar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px;background:var(--bg-panel);border-bottom:1px solid var(--line);
}
.rb-label{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:0.1em;flex:none;
}
.rb-presets{display:flex;gap:4px;flex:none;}
.rb-presets button{
  font-family:var(--font-mono);font-size:10.8px;letter-spacing:0.02em;
  padding:5px 10px;border-radius:3px;border:1px solid var(--line);
  background:var(--bg-raised);color:var(--text-muted);cursor:pointer;
  transition:border-color .15s ease, color .15s ease;white-space:nowrap;
}
.rb-presets button:hover{border-color:var(--text-dim);color:var(--text);}
.rb-presets button.on{
  border-color:var(--accent-dim);color:var(--accent);background:rgba(201,162,75,0.10);
}
.rb-custom{display:flex;align-items:center;gap:6px;flex:none;}
.rb-custom input[type="date"]{
  font-family:var(--font-mono);font-size:10.8px;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:3px;
  color:var(--text-muted);padding:4px 7px;color-scheme:dark;
}
.rb-custom input[type="date"]:focus{outline:none;border-color:var(--accent-dim);color:var(--text);}
.rb-dash{color:var(--text-dim);font-size:11px;}
.rb-clear{
  font-family:var(--font-mono);font-size:10px;background:none;border:none;
  color:var(--text-dim);cursor:pointer;text-decoration:underline;padding:2px 4px;
}
.rb-clear:hover{color:var(--text);}

/* ---------- category filter row ---------- */
.catbar{
  display:flex;gap:6px;flex-wrap:wrap;padding:10px 20px;
  background:var(--bg-panel);border-bottom:1px solid var(--line);
}
.cat-chip{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.8px;letter-spacing:0.02em;
  padding:5px 10px 5px 8px;border-radius:3px;border:1px solid var(--line);
  background:var(--bg-raised);color:var(--text-muted);cursor:pointer;
  user-select:none;transition:opacity .15s ease, border-color .15s ease;
}
.cat-chip .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.cat-chip.off{opacity:0.35;}
.cat-chip:hover{border-color:var(--text-dim);}
.cat-chip .count{color:var(--text-dim);}

/* ---------- layout ---------- */
.layout{display:flex;flex:1;min-height:0;}
@media(max-width:900px){.layout{flex-direction:column;}}

.mapwrap{position:relative;flex:1 1 62%;min-width:0;background:var(--bg-deep);}
#map{width:100%;height:100%;background:var(--bg-deep);}
@media(max-width:900px){
  /* Desktop pins everything to the viewport and scrolls the feed panel inside
     itself. On a phone that maths cannot close — map plus feed exceed the
     screen — so the flex children overflowed their parent and the search bar
     rendered on top of the footer. Below 900px the PAGE scrolls instead: the
     layout sizes to its content, the feed list stops being its own scroll
     container (nested scrolling is miserable on touch anyway), and the search
     header sticks so it stays reachable however far you scroll. */
  html,body{height:auto;}
  .layout{flex:0 0 auto;min-height:0;}
  .mapwrap{min-height:260px;flex:0 0 44vh;}
  .feed{flex:0 0 auto;min-height:0;max-height:none;}
  .feed-list{overflow:visible;max-height:none;flex:0 0 auto;}
  .feed-head{position:sticky;top:0;z-index:500;background:var(--bg-panel);}
}

/* Leaflet dark-theme overrides */
.leaflet-container{background:var(--bg-deep);font-family:var(--font-body);}
.leaflet-control-zoom a{
  background:var(--bg-raised) !important;color:var(--text) !important;
  border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{background:var(--line) !important;}
.leaflet-control-attribution{
  background:rgba(16,22,31,0.85) !important;color:var(--text-dim) !important;
  font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--text-muted) !important;}
.leaflet-popup-content-wrapper{
  background:var(--bg-raised);color:var(--text);border:1px solid var(--line);
  border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,0.55);
}
.leaflet-popup-tip{background:var(--bg-raised);border:1px solid var(--line);}
.leaflet-popup-close-button{color:var(--text-dim) !important;}
.leaflet-popup-close-button:hover{color:var(--text) !important;}

.popup{font-family:var(--font-body);max-width:280px;}
.popup .p-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.popup .p-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.popup .p-title{font-size:13.5px;font-weight:600;line-height:1.35;}
.popup .p-meta{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:7px;
}
.popup .p-grade{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.05em;text-transform:uppercase;
  padding:1.5px 6px;border-radius:2px;font-weight:500;
}
.popup .p-grade.indicative{color:var(--grade-indicative);border:1px solid var(--grade-indicative);}
.popup .p-grade.probable{color:var(--grade-probable);border:1px solid var(--grade-probable);}
.popup .p-grade.confirmed{color:var(--grade-confirmed);border:1px solid var(--grade-confirmed);background:rgba(209,67,67,0.1);}
.popup .p-summary{font-size:12px;line-height:1.55;color:var(--text-muted);margin-bottom:8px;}
.popup .p-sources{border-top:1px solid var(--line-soft);padding-top:7px;}
.popup .p-sources-label{
  font-family:var(--font-mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:0.06em;margin-bottom:4px;
}
.popup .p-source{
  display:block;font-size:11px;line-height:1.5;color:var(--cat-cyber);
  text-decoration:none;margin-bottom:2px;
}
.popup .p-source:hover{text-decoration:underline;}
.popup .p-source .pub{color:var(--text-dim);font-family:var(--font-mono);font-size:9.5px;}

.new-pulse-icon{position:relative;width:14px;height:14px;}
.new-pulse-icon .core{
  position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;
}
.new-pulse-icon .ring{
  position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;
  animation:mapping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes mapping{
  0%{transform:scale(0.5);opacity:0.9;}
  100%{transform:scale(2.4);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .new-pulse-icon .ring{animation:none;opacity:0.3;}
  .live-dot{animation:none;}
}

.legend{
  position:absolute;left:14px;bottom:14px;z-index:400;
  background:rgba(16,22,31,0.92);border:1px solid var(--line);
  border-radius:4px;
  font-size:11.5px;color:var(--text-muted);
  max-width:230px;backdrop-filter:blur(3px);
  overflow:hidden;
}
.legend-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:none;cursor:pointer;color:var(--text-muted);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;padding:8px 12px;
}
.legend-toggle .chev{transition:transform .18s ease;font-size:9px;}
.legend.collapsed .legend-toggle .chev{transform:rotate(-90deg);}
.legend-body{padding:12px 14px;}
.legend.collapsed .legend-body{display:none;}
.legend h3{
  margin:0 0 8px;font-family:var(--font-display);font-size:10.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);font-weight:700;
}
.legend-row{display:flex;align-items:center;gap:7px;padding:2px 0;}
.legend-swatch{width:9px;height:9px;border-radius:50%;flex:none;}
/* wrap: three grade labels at 12px gap overflowed the 230px panel and clipped
   "Confirmed" against the right edge */
.legend-grades{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);}
.legend-grade{display:flex;align-items:center;gap:5px;font-size:10.5px;}
.grade-swatch{width:9px;height:9px;border-radius:50%;flex:none;}
.grade-swatch.indicative{background:transparent;border:1.5px dotted var(--grade-indicative);}
.grade-swatch.probable{background:var(--grade-probable);opacity:.75;}
.grade-swatch.confirmed{background:var(--grade-confirmed);}
@media(max-width:900px){
  /* The legend used to sit permanently over the map, directly on top of the
     popup of whatever marker you had just tapped. It now collapses to a single
     bar that the user opens deliberately. */
  .legend{font-size:10.5px;max-width:180px;left:8px;bottom:8px;}
  .legend-toggle{display:flex;}
  .legend-body{padding:2px 12px 11px;}
  .legend h3{font-size:9px;margin-bottom:5px;}
  .legend-row{padding:2px 0;}
  .legend-grades{margin-top:6px;padding-top:6px;gap:10px;flex-wrap:wrap;}
}

/* ---------- feed panel ---------- */
.feed{
  flex:1 1 38%;min-width:320px;max-width:480px;
  background:var(--bg-panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
@media(max-width:900px){.feed{max-width:none;border-left:none;border-top:1px solid var(--line);}}

.feed-head{
  padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;flex:none;
}
.feed-head-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.feed-head h2{
  margin:0;font-family:var(--font-display);font-size:12.5px;
  letter-spacing:0.1em;text-transform:uppercase;font-weight:700;color:var(--text-muted);
}
.feed-count{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);white-space:nowrap;}

/* ---------- search ---------- */
.feed-search{position:relative;display:flex;align-items:center;}
.feed-search .search-icon{
  position:absolute;left:9px;width:13px;height:13px;color:var(--text-dim);
  pointer-events:none;
}
.feed-search input{
  width:100%;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:4px;color:var(--text);
  font-family:var(--font-body);font-size:13px;
  padding:8px 28px 8px 28px;
  -webkit-appearance:none;appearance:none;
}
.feed-search input::placeholder{color:var(--text-dim);}
.feed-search input:focus{outline:none;border-color:var(--accent-dim);background:#1b2431;}
.feed-search input::-webkit-search-cancel-button{display:none;}
.search-clear{
  position:absolute;right:6px;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-size:17px;line-height:1;padding:2px 5px;
}
.search-clear:hover{color:var(--text);}
mark{background:rgba(201,162,75,0.28);color:var(--text);border-radius:2px;padding:0 1px;}

.feed-list{flex:1;overflow-y:auto;padding:6px;min-height:0;}
.feed-list::-webkit-scrollbar{width:9px;}
.feed-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
.feed-empty{
  padding:28px 20px;text-align:center;font-size:12.5px;color:var(--text-muted);line-height:1.6;
}
.feed-empty b{color:var(--text);}
.feed-empty .hint{color:var(--text-dim);font-size:11.5px;}

.card{
  padding:11px 12px;margin:5px;border-radius:4px;
  background:var(--bg-raised);border:1px solid var(--line-soft);
  border-left:3px solid var(--grade-indicative);
  cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.card:hover, .card.hovered{background:#1b2431;border-color:var(--text-dim);}
.card.grade-probable{border-left-color:var(--grade-probable);}
.card.grade-confirmed{border-left-color:var(--grade-confirmed);}
.card.hidden{display:none;}
.card-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.card-cat-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.card-title{font-size:13px;font-weight:600;line-height:1.35;flex:1;}
.new-badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;
  color:var(--bg-deep);background:var(--accent);padding:2px 5px;border-radius:2px;
  font-weight:600;flex:none;
}
.card-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-bottom:6px;
}
.grade-chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.05em;
  padding:1.5px 6px;border-radius:2px;text-transform:uppercase;font-weight:500;
}
.grade-chip.indicative{color:var(--grade-indicative);border:1px solid var(--grade-indicative);}
.grade-chip.probable{color:var(--grade-probable);border:1px solid var(--grade-probable);}
.grade-chip.confirmed{color:var(--grade-confirmed);border:1px solid var(--grade-confirmed);background:rgba(209,67,67,0.1);}
.card-summary{font-size:12.3px;line-height:1.55;color:var(--text-muted);margin-bottom:7px;}
.card-sources{display:flex;flex-direction:column;gap:2px;}
.card-sources a{font-size:10.8px;color:var(--cat-cyber);text-decoration:none;}
.card-sources a:hover{text-decoration:underline;}
.card-sources .pub{color:var(--text-dim);font-family:var(--font-mono);font-size:9.5px;}

/* ---------- alert banner ---------- */
.banner{
  position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-140%);
  z-index:900;
  background:var(--bg-raised);border:1px solid var(--accent-dim);
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  border-radius:5px;padding:11px 16px;
  display:flex;align-items:center;gap:12px;
  max-width:min(560px, 92vw);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.banner.show{transform:translateX(-50%) translateY(0);}
.banner .pulse-icon{
  width:9px;height:9px;border-radius:50%;background:var(--grade-confirmed);
  box-shadow:0 0 8px var(--grade-confirmed);flex:none;
  animation:blink 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.banner .pulse-icon{animation:none;}}
.banner-text{font-size:12.5px;line-height:1.4;}
.banner-text b{color:var(--accent);}
.banner-close{
  margin-left:4px;background:none;border:none;color:var(--text-dim);
  cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;flex:none;
}
.banner-close:hover{color:var(--text);}

/* ---------- footer disclaimer ---------- */
.disclaimer{
  padding:9px 20px;background:var(--bg-panel);border-top:1px solid var(--line);
  font-size:10.8px;color:var(--text-dim);line-height:1.5;
}
.disclaimer strong{color:var(--text-muted);}

.loading-note{
  padding:40px;text-align:center;font-family:var(--font-mono);
  color:var(--text-dim);font-size:12px;
}

/* ---------- phone ----------
   Three problems this block fixes, all reported from a real device:
   the reports were too small to read, the legend covered every popup, and
   the map/feed split left the feed squeezed into a sliver. */
@media(max-width:640px){
  .statusbar{gap:12px;padding:10px 14px;}
  .brand .mark{font-size:17px;letter-spacing:0.1em;}

  /* Chart first, key below it — side by side there is no room for either. */
  .trendstrip{padding:10px 14px;gap:12px;}
  .trend-chart-col{min-width:100%;order:3;}
  .trend-summary{order:1;}
  .trend-delta-block{order:2;margin-left:auto;align-items:flex-end;}
  .trend-delta-note{font-size:9px;}
  /* flex:none let the long caveat size the box wider than the viewport and
     run off the right edge; min-width:0 lets it actually wrap. */
  .trend-key{order:4;flex:1 1 100%;min-width:0;max-width:none;
             flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center;}
  .trend-key .tk-note{margin-top:0;flex:1 1 100%;min-width:0;white-space:normal;}
  .trend-chart-wrap{height:64px;}

  /* Eight full-width chips stacked into eight rows and pushed the map about a
     thousand pixels down the page. One swipeable row instead. */
  .catbar{
    padding:8px 14px;gap:6px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .catbar::-webkit-scrollbar{display:none;}
  .cat-chip{font-size:10.5px;padding:6px 9px 6px 8px;flex:0 0 auto;white-space:nowrap;}

  /* Same treatment as the chips: one swipeable row rather than a stack. */
  .rangebar{padding:8px 14px;gap:8px;}
  .rb-label{display:none;}
  .rb-presets{
    flex:1 1 100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rb-presets::-webkit-scrollbar{display:none;}
  .rb-presets button{flex:0 0 auto;}
  .rb-custom{flex:1 1 100%;}
  .rb-custom input[type="date"]{flex:1 1 0;min-width:0;font-size:11px;}

  /* Give the feed the majority of the screen — it is the readable surface. */
  .mapwrap{flex:0 0 44vh;min-height:260px;}
  .feed{min-width:0;}
  .feed-head{padding:10px 12px;}

  /* Bigger type: 12.3px summaries were unreadable on a handset. */
  .card{padding:13px 13px;margin:6px 4px;}
  .card-title{font-size:14.5px;line-height:1.4;}
  .card-summary{font-size:13.5px;line-height:1.62;color:#9dabc0;}
  .card-meta{font-size:11px;gap:9px;}
  .card-sources a{font-size:12px;line-height:1.5;}
  .card-sources .pub{font-size:10.5px;}
  .grade-chip{font-size:10px;padding:2px 7px;}

  .feed-search input{font-size:16px;padding:9px 30px;}  /* 16px stops iOS zooming on focus */

  /* Popups get most of the width and real type instead of a cramped card. */
  .popup{max-width:none;}
  .popup .p-title{font-size:14.5px;}
  .popup .p-summary{font-size:13px;line-height:1.6;}
  .popup .p-source{font-size:12px;}
  .leaflet-popup-content{margin:12px 14px;}
  .leaflet-popup-content-wrapper{max-height:52vh;overflow-y:auto;}

  .disclaimer{padding:10px 14px;font-size:10.5px;}
}

/* Must sit after the base .feed / .feed-list rules to win on source order —
   the equivalent declarations up in the 900px block are overridden by them. */
@media(max-width:900px){
  .feed{flex:0 0 auto;min-height:0;max-height:none;}
  .feed-list{overflow:visible;max-height:none;flex:0 0 auto;}
  .feed-head{position:sticky;top:0;z-index:500;background:var(--bg-panel);}
}