/* ==========================================================================
   US aid explorer (/aid). Loaded after trade.css, whose chart frame, headline
   grid, bars, tables and notes it reuses; this file adds the transaction-type
   colours, the filters and the activities table.
   Colours, for marks only (text stays in ink / muted), the trade dashboard's
   validated pair:   obligations #6E42A6 (accent)   disbursements #1A9E8F (teal)
   ========================================================================== */

.aid, .aid-hero { --aid-obl: #6E42A6; --aid-dis: #1A9E8F; }
.tr-sw-obl { background: var(--aid-obl); }
.tr-sw-dis { background: var(--aid-dis); }
.aid-line-obl { stroke: var(--aid-obl); }
.aid-line-dis { stroke: var(--aid-dis); }
.aid-dot-obl { fill: var(--aid-obl); }
.aid-dot-dis { fill: var(--aid-dis); }
.aid-bar-obl { background: var(--aid-obl); }
.aid-bar-dis { background: var(--aid-dis); }

/* Filters: one row above the charts (wraps on small screens). */
.aid-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-2);
  border: 1px solid var(--line); background: var(--mist); border-radius: 4px;
}
.aid-field { display: grid; gap: 0.25rem; min-width: 0; flex: 0 1 8.5rem; }
.aid-field-wide { flex: 1 1 13rem; }
.aid-field-mid { flex: 0 1 12.5rem; }
.aid-field label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.aid-field select { width: 100%; min-width: 0; padding: 0.45rem 0.5rem; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 3px; }
.aid-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aid-actions { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.1rem; }
.aid-actions a { font-size: 0.88rem; font-weight: 600; color: var(--accent-dark); }

.aid-context { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--muted); }
.aid-context a { color: var(--accent-dark); font-weight: 600; }

/* Activities. */
.aid-act-wrap { max-height: none; }
.aid-act th[scope="row"] { min-width: 14rem; }
.aid-act a { color: var(--accent-dark); font-weight: 600; }
.aid-id { display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--muted); word-break: break-all; }
.aid-act td { font-size: 0.86rem; }

@media (max-width: 560px) {
  .aid-filters { padding: var(--s-2) 0.75rem; }
  .aid-field, .aid-field-wide { flex: 1 1 calc(50% - 0.5rem); }
  .aid-act th[scope="row"] { min-width: 11rem; }
}
@media print {
  .aid-filters { display: none; }
}
@media (forced-colors: active) {
  .aid-line-obl, .aid-line-dis { stroke: CanvasText; }
  .aid-line-dis { stroke-dasharray: 6 4; }
  .aid-bar-obl, .aid-bar-dis { forced-color-adjust: none; }
}

/* ==========================================================================
   River of aid (src/features/aid/river.js, public/assets/js/aid-river.js).
   Water = the page's transaction colours (obligations purple, disbursements
   teal); land = warm sand; buoys = banner gold. Motion runs only while
   .is-flowing (on screen, tab visible) and never under reduced motion.
   ========================================================================== */
.aid-river { --river-gold: #D9A441; --river-sand: #E9E1CF; margin: var(--s-4) 0 var(--s-5); }
.aid-river-head { max-width: 46rem; margin: 0 0 var(--s-3); }
.aid-river-kicker { margin: 0 0 0.35rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); }
.aid-river-h { margin: 0 0 0.6rem; font-family: var(--font-serif); font-weight: var(--hed-weight); letter-spacing: var(--hed-track); font-size: var(--fs-h2); line-height: 1.08; color: var(--ink); }
.aid-river-dek { margin: 0; font-family: var(--font-serif); font-size: 1.16rem; line-height: 1.5; color: var(--text); }
.aid-river-dek a { color: var(--accent-dark); font-weight: 600; }

.aid-river-fig { margin: 0; }
.aid-river-stage {
  position: relative; border-radius: 6px; overflow: hidden; background: var(--river-sand);
  box-shadow: 0 1px 0 rgba(42, 27, 69, 0.06), 0 24px 48px -28px rgba(42, 27, 69, 0.45), inset 0 0 0 1px rgba(42, 27, 69, 0.07);
}
.aid-river-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.aid-river-stage::after { /* soft vignette: the view from above */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(42, 27, 69, 0.14) 100%);
}
@media (min-width: 1000px) { /* break out of the text column: a wide river */
  .aid-river-fig { width: min(100vw - 4rem, 1400px); margin-left: 50%; transform: translateX(-50%); }
}
.aid-river-svg { display: block; width: 100%; height: auto; }
.aid-river-narrow { display: none; }
@media (max-width: 640px) {
  .aid-river-wide { display: none; }
  .aid-river-narrow { display: block; }
}

/* Land and banks. */
.aid-river-contours path { fill: none; stroke: #8C7A55; stroke-linecap: round; }
.aid-river-c1 { stroke-width: 1.1; opacity: 0.32; }
.aid-river-c2 { stroke-width: 0.9; opacity: 0.2; stroke-dasharray: 1 0; }
.aid-river-c3 { stroke-width: 0.8; opacity: 0.13; stroke-dasharray: 3 5; }
.aid-river-shore { fill: none; stroke: #CFC3A3; stroke-width: 9; stroke-linejoin: round; opacity: 0.75; }
.aid-river-dry { stroke: #A8977A; stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.aid-river-obl { stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; }
.aid-river-dis { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.6; opacity: 0.94; }

/* Water. */
.aid-river-readout[hidden], .aid-river-caption[hidden] { display: none; }
.aid-river-glint { pointer-events: none; }
.aid-river-flow { fill: none; stroke: #fff; stroke-linecap: round; pointer-events: none; }
.aid-river-f1 { stroke-width: 1.1; opacity: 0.32; stroke-dasharray: 26 34; }
.aid-river-f2 { stroke-width: 0.9; opacity: 0.24; stroke-dasharray: 14 40; }
.aid-river-f3 { stroke-width: 0.7; opacity: 0.2; stroke-dasharray: 8 46; }
.is-flowing .aid-river-glint { animation: aid-river-glint 18s linear infinite; }
.is-flowing .aid-river-f1 { animation: aid-river-flow 7s linear infinite; }
.is-flowing .aid-river-f2 { animation: aid-river-flow 9.5s linear infinite; }
.is-flowing .aid-river-f3 { animation: aid-river-flow 12s linear infinite; }
@keyframes aid-river-glint { to { transform: translateX(-240px); } }
@keyframes aid-river-flow { to { stroke-dashoffset: -240; } }

/* Labels on the banks. */
.aid-river-era { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; fill: var(--ink); opacity: 0.78; }
.aid-river-narrow .aid-river-era { font-size: 10.5px; }
.aid-river-era-tick { stroke: var(--ink); stroke-opacity: 0.22; stroke-width: 1; }
.aid-river-years text { font-family: var(--font); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; fill: #6E5F3E; }
.aid-river-narrow .aid-river-years text { font-size: 10px; }
.aid-river-years .aid-river-yend { font-weight: 600; fill: var(--ink); }

/* Year readout. */
.aid-river-cols rect { fill: transparent; cursor: crosshair; }
.aid-river-guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.is-reading .aid-river-guide { opacity: 0.6; }
.aid-river-readout {
  position: absolute; top: 0.6rem; z-index: 2; display: grid; gap: 0.1rem; padding: 0.45rem 0.7rem; pointer-events: none;
  font-size: 0.82rem; line-height: 1.35; white-space: nowrap; color: #fff; background: rgba(42, 27, 69, 0.92); border-radius: 4px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
}
.aid-river-readout strong { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; }
.aid-river-readout span::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.02rem; }
.aid-river-readout .o::before { background: #B9A2DD; }
.aid-river-readout .d::before { background: #4FC2B2; }

/* Buoys. */
.aid-buoy { cursor: pointer; }
.aid-buoy-ring { fill: none; stroke: #fff; stroke-width: 1; opacity: 0.55; }
.aid-buoy-body { fill: var(--river-gold); stroke: #2A1B45; stroke-width: 1.2; }
.aid-buoy-key .aid-buoy-body { fill: #F0C35B; }
.aid-buoy-cap { fill: #fff; opacity: 0.75; }
.aid-buoy-hit { fill: transparent; }
.aid-buoy:hover .aid-buoy-body, .aid-buoy:focus .aid-buoy-body { fill: #fff; }
.aid-buoy:focus { outline: none; }
.aid-buoy:focus-visible .aid-buoy-ring { stroke: #fff; stroke-width: 2.5; opacity: 1; }
.aid-buoy-bob { transform-box: fill-box; }
.is-flowing .aid-buoy-bob { animation: aid-buoy-bob 4s ease-in-out infinite; }
@keyframes aid-buoy-bob { 0%, 100% { transform: translateY(-1.2px); } 50% { transform: translateY(1.4px); } }

.aid-river-caption {
  position: absolute; z-index: 3; width: min(20rem, 80%); padding: 0.7rem 0.85rem; pointer-events: none;
  background: var(--paper); color: var(--text); border-top: 3px solid var(--river-gold); border-radius: 4px;
  box-shadow: 0 14px 34px -14px rgba(42, 27, 69, 0.55); font-size: 0.86rem; line-height: 1.4;
}
.aid-river-caption strong { display: block; margin: 0.1rem 0 0.25rem; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.25; color: var(--ink); }
.aid-river-cap-date { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.aid-river-cap-dek { display: block; color: var(--muted); }
.aid-river-cap-more { display: block; margin-top: 0.35rem; font-weight: 600; color: var(--accent-dark); }

/* Legend and event list. */
.aid-river-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: 0.85rem 0 0; font-size: 0.84rem; color: var(--muted); }
.aid-river-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.aid-river-sw { display: inline-block; width: 1.4rem; height: 0.6rem; border-radius: 0.3rem; }
.aid-river-sw-obl { background: linear-gradient(#B9A2DD, #6E42A6 50%, #B9A2DD); }
.aid-river-sw-dis { background: linear-gradient(#4FC2B2, #0F7468 50%, #4FC2B2); }
.aid-river-sw-buoy { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--river-gold); box-shadow: inset 0 0 0 1.2px #2A1B45; }
.aid-river-sw-dry { height: 0; border-radius: 0; border-top: 2px dotted #A8977A; }
.aid-river-hint { margin-left: auto; font-style: italic; }
.aid-river-events { margin-top: 0.8rem; font-size: 0.9rem; }
.aid-river-events summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.aid-river-events ol { columns: 2 18rem; margin: 0.6rem 0 0; padding-left: 1.3rem; }
.aid-river-events li { break-inside: avoid; margin-bottom: 0.25rem; }
.aid-river-events a { color: var(--ink); }

/* The empty river bed (no figures stored yet): decorative only. */
.aid-river-empty { position: relative; margin-bottom: var(--s-3); }
.aid-river-bed { border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(42, 27, 69, 0.07); }
.aid-river-bed svg { display: block; width: 100%; height: clamp(150px, 18vw, 220px); }
.aid-river-bedline { fill: none; stroke-linecap: round; }
.aid-river-bedline.b3 { stroke: #DCD0B4; stroke-width: 74; }
.aid-river-bedline.b2 { stroke: #D2C4A3; stroke-width: 46; }
.aid-river-bedline.b1 { stroke: #C6B691; stroke-width: 20; }
.aid-river-dryline { fill: none; stroke: #9C8A69; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.aid-river-bedcap {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); width: min(36rem, calc(100% - 2rem)); margin: 0;
  padding: 0.7rem 1rem; display: grid; gap: 0.2rem; text-align: center; font-family: var(--font-serif); font-size: 1rem; line-height: 1.4;
  color: var(--ink); background: rgba(255, 255, 255, 0.82); border-radius: 4px; backdrop-filter: blur(2px);
}
.aid-river-bedcap .aid-river-kicker { margin: 0; font-family: var(--font); }

@media (max-width: 640px) {
  .aid-river { margin-top: var(--s-3); }
  .aid-river-dek { font-size: 1.04rem; }
  .aid-river-hint { margin-left: 0; }
  .aid-river-readout { font-size: 0.76rem; }
  .aid-river-bed svg { height: 230px; }
  .aid-river-bedcap { position: static; transform: none; width: auto; margin-top: 0.6rem; background: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-flowing .aid-river-glint, .is-flowing .aid-river-flow, .is-flowing .aid-buoy-bob { animation: none; }
}
@media print {
  .aid-river-readout, .aid-river-caption { display: none; }
  .aid-river-fig { width: auto; margin-left: 0; transform: none; }
}
@media (forced-colors: active) {
  .aid-river-obl, .aid-river-dis, .aid-buoy-body { forced-color-adjust: none; }
}