/* Global News Pulse — page-specific styles, layered on top of styles.css */

/* The `.card` rule sets display:flex, which outranks the UA `[hidden]{display:none}` rule
   (equal specificity, later source wins), so the hidden attribute alone wouldn't hide a
   card. Force it — setView() toggles `hidden` to switch between the default and country panels. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   "Help me understand this data" disclosure
   --------------------------------------------------------------------------- */
/* Sits between the h1 and the subtitle, so it inherits the header's own width and padding
   — no max-width or padding of its own, or it would indent away from the title above it. */
.about-note {
  margin: 0.85rem 0 0.1rem;
}

/* A bordered chip rather than a bare teal link: it reads as something to press, and it
   holds its own against the headline above it instead of trailing off the subtitle. */
.about-note > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--baseline);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--opteryx-teal);
  list-style: none;
  width: fit-content;
  transition: background 140ms ease, border-color 140ms ease;
}

.about-note > summary::-webkit-details-marker { display: none; }

.about-note > summary::before {
  content: "ⓘ";
  font-size: 0.95rem;
  line-height: 1;
}

.about-note > summary:hover,
.about-note[open] > summary {
  background: var(--opteryx-pale-teal);
  border-color: var(--opteryx-teal);
}

.about-note > summary:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
}

.about-body {
  margin-top: 0.7rem;
  max-width: 78ch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.about-body p { margin: 0 0 0.7rem; }
.about-body ul { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.about-body li { margin-bottom: 0.35rem; }
.about-body .about-foot { margin-bottom: 0; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Segmented toggle (map colour mode)
   --------------------------------------------------------------------------- */
.seg-toggle {
  display: inline-flex;
  gap: 0.2rem;
  padding: 3px;
  margin-left: auto;
  background: var(--gridline);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.seg-toggle button {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.seg-toggle button:hover { color: var(--opteryx-teal); }

.seg-toggle button.active {
  background: var(--surface);
  color: var(--opteryx-teal);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.seg-toggle.hidden { display: none; }

/* ---------------------------------------------------------------------------
   Loading state
   --------------------------------------------------------------------------- */
/* styles.css dims .chart-area while a panel's query is in flight. The map is an
   injected SVG rather than a chart-area, so without this it sat at full opacity,
   reading as live data while it was still showing the previous window's numbers. */
.card.is-loading .map-area,
.card.is-loading .mood-legend {
  opacity: 0.45;
}

/* ---------------------------------------------------------------------------
   Map
   --------------------------------------------------------------------------- */
.map-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.map-area {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 320px;
}

.map-area svg { width: 100%; height: 100%; display: block; }

.map-area svg path {
  stroke: var(--surface);
  stroke-width: 0.6;
  fill: var(--gridline);
  cursor: pointer;
  transition: opacity 120ms ease, stroke-width 120ms ease;
}

.map-area svg path:hover { stroke: var(--text-primary); stroke-width: 1.4; }
.map-area svg path.mood-selected { stroke: var(--opteryx-navy); stroke-width: 1.8; }
.map-area svg path.mood-no-data { fill: var(--gridline); cursor: default; }

.mood-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.mood-legend .legend-gradient {
  width: 180px;
  height: 10px;
  border-radius: 5px;
}

/* ---------------------------------------------------------------------------
   Empty-state message inside a chart area
   --------------------------------------------------------------------------- */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* ---------------------------------------------------------------------------
   Horizontal bars (attention, topics)
   --------------------------------------------------------------------------- */
.bars-area { display: flex; flex-direction: column; justify-content: center; gap: 0.32rem; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.15rem 0;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.bar-row-click { cursor: pointer; border-radius: 6px; transition: background 120ms ease; }
.bar-row-click:hover { background: var(--opteryx-pale-teal); }

.bar-label {
  flex: 0 0 8.5em;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  flex: 1 1 auto;
  min-width: 30px;
  height: 12px;
  background: var(--gridline);
  border-radius: 999px;
  overflow: hidden;
}

/* Attention bars are navy (see ATTENTION_COLOR_STOPS in gdelt.js) and topics bars are
   purple (see TOPIC_COLOR_STOPS) — the neutral gridline track reads as light teal next to
   both, so each panel gets its own very-light tinted track instead of the shared default.
   Lighter than each ramp's palest fill stop so a low-value bar doesn't disappear into its
   own track. */
#chart-attention .bar-track {
  background: #F3F5FB;
}

#chart-topics .bar-track {
  background: #F6F1FC;
}

.bar-fill { display: block; height: 100%; border-radius: 999px; }

.bar-value {
  flex: 0 0 4.5em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Cooperation vs. conflict split
   --------------------------------------------------------------------------- */
.quad { display: flex; flex-direction: column; gap: 0.9rem; justify-content: center; height: 100%; }

.quad-head { display: flex; align-items: baseline; }

.quad-share { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

.quad-share-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text-primary);
}

.quad-share-label { font-size: 0.85rem; color: var(--text-muted); }

.quad-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gridline);
}

.quad-seg { height: 100%; transition: opacity 120ms ease; }
.quad-seg:hover { opacity: 0.82; }

.quad-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.2rem;
}

.quad-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.quad-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.quad-name { color: var(--text-secondary); flex: 1 1 auto; min-width: 0; }
.quad-pct { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }

.quad-meter { display: flex; flex-direction: column; gap: 0.45rem; }

.quad-meter-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Ranking columns (warmest / coldest) — shared meter line
   --------------------------------------------------------------------------- */
.mood-list-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.mood-list-column { min-width: 0; }
.mood-list { display: flex; flex-direction: column; gap: 0.3rem; }

.mood-list-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease;
}

.mood-list-row:hover { background: var(--opteryx-pale-teal); }

.mood-list-row .name {
  flex: 0 0 32%;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mood-list-row .meter-line { flex: 1 1 auto; min-width: 0; }

.mood-list-heading {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.2rem;
}

/* Hero tiles: bottom-align the tone bar so tiles share a baseline. */
.hero-grid .stat-tile { display: flex; flex-direction: column; }
/* Direct children only — the padding must not reach a .meter nested inside a
   .meter-line's track, which would push its bar below the score/events text. */
.hero-grid .stat-tile > .meter,
.hero-grid .stat-tile > .meter-line { margin-top: auto; padding-top: 0.7rem; }

/* Inline "score · bar · N events" line — ranking rows + country hero tiles. */
.meter-line { display: flex; align-items: center; gap: 0.6rem; width: 100%; }

.meter-line .ml-score {
  flex: 0 0 4.2em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.meter-line .ml-track { flex: 1 1 auto; min-width: 40px; display: flex; align-items: center; }

.meter-line .ml-n {
  flex: 0 0 8em;
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

/* Slider and the Reset button share one line, the button pinned to the right edge and
   centred on the slider block, which puts it level with the track between the date readout
   above and the tick labels below. */
.date-range-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.date-range-row > #date-range { flex: 1 1 auto; min-width: 0; }

/* On a phone the slider needs the full width to be draggable, so the button drops below. */
@media (max-width: 640px) {
  .date-range-row { flex-wrap: wrap; }
  .date-range-row > #date-range { flex-basis: 100%; }
}

/* Country picker: a self-contained search field — magnifier on the left, and a clear
   affordance that lives *inside* the box rather than as a second control beside it.
   Sized for one country name rather than to the full-width slider above, which would leave
   it looking like a stretched empty bar. */
.country-picker {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
}

.country-picker input[type="search"] {
  width: 100%;
  min-width: 0;
  padding-left: 2.2rem;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%235F6B78' stroke-width='1.5'/%3E%3Cpath d='M9.2 9.2L12.5 12.5' stroke='%235F6B78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
}

/* Empty field: the list-picker chevron joins the magnifier, pinned to the right edge and
   drawn in the same muted stroke as the CVE page's select chevrons. Once a country is
   chosen the ✕ owns that corner, so the chevron drops out rather than crowding it. */
.country-picker input[type="search"]:placeholder-shown {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%235F6B78' stroke-width='1.5'/%3E%3Cpath d='M9.2 9.2L12.5 12.5' stroke='%235F6B78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235F6B78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left 0.75rem center, right 0.7rem center;
}

/* Chrome's datalist button stays as the click target that opens the country list, but
   invisible and pinned to the right edge — left alone it paints a large black triangle
   wherever the input's right padding happens to leave it, mid-field. */
.country-picker input[type="search"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* WebKit's own clear glyph would sit beside ours, in a style we don't control. */
.country-picker input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.picker-clear {
  position: absolute;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gridline);
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.picker-clear:hover {
  background: var(--baseline);
  color: var(--text-primary);
}

.clear-btn {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.clear-btn:hover { background: var(--opteryx-pale-teal); border-color: var(--opteryx-teal); color: var(--text-primary); }
.clear-btn.hidden { display: none; }
.card-header .clear-btn { margin-left: auto; }

/* Sized to match the country-search input's own height (0.55rem vertical padding, 0.9rem
   text, 1px border) rather than the smaller .clear-btn used elsewhere, so it reads as the
   same control family as the filters around it. */
.reset-btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--opteryx-navy);
  background: var(--surface);
  border: 1px solid var(--opteryx-navy);
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

.reset-btn:hover { background: var(--opteryx-navy); color: var(--surface); }

/* ---------------------------------------------------------------------------
   Diverging tone meter (stat tiles + ranking rows)
   --------------------------------------------------------------------------- */
.meter { --meter-pos: 50%; display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }

.meter-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  align-self: flex-start;
  margin-left: var(--meter-pos);
  transform: translateX(-50%);
  white-space: nowrap;
}

.meter-track {
  position: relative;
  width: 100%;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
}

/* Diverging fill: positioned/coloured inline by buildMeter (teal right, red left). */
.meter-fill { position: absolute; top: 0; bottom: 0; }

/* Faint zero baseline the fill grows out from. */
.meter-center { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--text-muted); opacity: 0.45; }

.meter-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); color: var(--text-muted); }

.meter-lg .meter-value { font-size: 1.15rem; }
.meter-lg .meter-track { height: 9px; }
.meter-lg .meter-scale { font-size: 0.68rem; }

.meter-sm .meter-value { font-size: 0.8rem; }
.meter-sm .meter-track { height: 6px; }
.meter-sm .meter-scale { display: none; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .mood-list-columns { grid-template-columns: 1fr; }
  .quad-legend { grid-template-columns: 1fr; }
  .bar-label { flex-basis: 6.5em; }
  .story-metrics { flex-direction: row; align-items: center; }
}