/* Annual report: the world explorer and the city dialog's context panels.

   Scoped under #annual-report like report.css. The --explorer-* tokens are concrete colours,
   not color-mix(): explorer.js reads them with getComputedStyle and hands them to MapLibre,
   which cannot parse color-mix(). The red bins match the hero map's layer-bin-1..4. Dark values
   are set under html[data-bs-theme="dark"], which color-modes.js sets. Logical properties only,
   so the Arabic (RTL) build mirrors correctly. */

#annual-report .world-explorer {
   --explorer-bin-0: #e9eef0;
   --explorer-bin-1: #f2c6c4;
   --explorer-bin-2: #e8908d;
   --explorer-bin-3: #dd5f5c;
   --explorer-bin-4: #c42b2d;
   --explorer-searched: #9aa7b0;
   --explorer-unsearched: #eef2f4;
   --explorer-line: #7d8a93;
   --explorer-cohort: #20272d;
   --explorer-halo: #ffffff;
   --explorer-corridor: #22634b;
   --explorer-cycleway: #13795b;
   --explorer-heat-low: #ffd8a8;
   --explorer-heat-high: #e8590c;
   --explorer-accent: #2458b8;
   background: var(--report-wash);
}

html[data-bs-theme="dark"] #annual-report .world-explorer {
   --explorer-bin-0: #1f272e;
   --explorer-bin-1: #5a2b2e;
   --explorer-bin-2: #8e3a3c;
   --explorer-bin-3: #c4494b;
   --explorer-bin-4: #ff6b6d;
   --explorer-searched: #6b7a85;
   --explorer-unsearched: #1c2329;
   --explorer-line: #56636d;
   --explorer-cohort: #e6ecef;
   --explorer-halo: #161c21;
   --explorer-corridor: #4fb486;
   --explorer-cycleway: #5fd39b;
   --explorer-heat-low: #7a4a1e;
   --explorer-heat-high: #ff922b;
   --explorer-accent: #8fb4ff;
}

#annual-report .explorer-headline {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 24px;
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
   font-weight: 600;
   color: var(--report-ink);
}

/* Full bleed: the map runs edge to edge, the side panel sits at the inline end. */
#annual-report .explorer-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   margin-block-start: 24px;
   border-block: 1px solid var(--report-line);
   background: var(--report-page);
}

#annual-report .explorer-map {
   position: relative;
   min-height: 560px;
   height: 72vh;
   max-height: 820px;
   background: var(--report-land);
}

#annual-report .explorer-side {
   display: flex;
   flex-direction: column;
   gap: 16px;
   max-height: min(72vh, 820px);
   min-height: 560px;
   overflow-y: auto;
   padding: 20px;
   border-inline-start: 1px solid var(--report-line);
   font-size: 14px;
   color: var(--report-body);
}

#annual-report .explorer-layers {
   display: grid;
   gap: 8px;
   margin: 0;
   padding: 0;
   border: 0;
}

#annual-report .explorer-layers legend {
   margin-block-end: 6px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--report-muted);
}

#annual-report .explorer-layers label {
   display: flex;
   gap: 8px;
   align-items: center;
   min-height: 32px;
   cursor: pointer;
}

#annual-report .explorer-layers label[hidden] {
   display: none;
}

#annual-report .explorer-metric {
   display: grid;
   gap: 4px;
   padding-inline-start: 24px;
}

#annual-report .explorer-layers input {
   inline-size: 18px;
   block-size: 18px;
   accent-color: var(--report-red);
}

#annual-report .explorer-legend p {
   margin: 0 0 6px;
}

#annual-report .explorer-bins {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4px 12px;
   margin: 0 0 8px;
   padding: 0;
   list-style: none;
   font-size: 12px;
}

#annual-report .explorer-bins li {
   display: flex;
   gap: 6px;
   align-items: center;
}

#annual-report .explorer-bins i {
   flex: 0 0 auto;
   inline-size: 14px;
   block-size: 14px;
   border: 1px solid var(--explorer-line);
   border-radius: 2px;
}

#annual-report .explorer-bins .explorer-bin-1 { background: var(--explorer-bin-1); }
#annual-report .explorer-bins .explorer-bin-2 { background: var(--explorer-bin-2); }
#annual-report .explorer-bins .explorer-bin-3 { background: var(--explorer-bin-3); }
#annual-report .explorer-bins .explorer-bin-4 { background: var(--explorer-bin-4); }
#annual-report .explorer-bins .explorer-searched { background: var(--explorer-searched); }
#annual-report .explorer-bins .explorer-unsearched { background: var(--explorer-unsearched); }

#annual-report .explorer-muted,
#annual-report .context-muted {
   font-size: 12px;
   color: var(--report-muted);
}

#annual-report .explorer-panel {
   padding-block-start: 16px;
   border-block-start: 1px solid var(--report-line);
}

#annual-report .explorer-panel-title {
   margin: 0 0 8px;
   font-size: 20px;
   line-height: 1.2;
   color: var(--report-ink);
}

/* --- Context panels (city dialog and explorer panel) ------------------------------------- */
#annual-report .dialog-context {
   margin-block: 16px;
}

#annual-report .context-block {
   margin-block: 0 18px;
   padding-block-start: 14px;
   border-block-start: 1px solid var(--report-line);
}

#annual-report .context-block h3 {
   margin: 0 0 6px;
   font-size: 16px;
   color: var(--report-ink);
}

#annual-report .context-block h4 {
   margin: 12px 0 6px;
   font-size: 13px;
   color: var(--report-ink);
}

#annual-report .context-block h5 {
   margin: 10px 0 4px;
   font-size: 12px;
   font-weight: 700;
   color: var(--report-ink);
}

#annual-report .context-count {
   margin: 4px 0;
   font-weight: 700;
   color: var(--report-ink);
}

#annual-report .context-stages,
#annual-report .context-projects,
#annual-report .context-programmes,
#annual-report .context-observations {
   margin: 6px 0;
   padding: 0;
   list-style: none;
}

#annual-report .context-stages li {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding-block: 3px;
   border-block-end: 1px dotted var(--report-line);
   font-size: 13px;
}

#annual-report .context-project,
#annual-report .context-programmes li {
   display: grid;
   gap: 2px;
   padding-block: 8px;
   border-block-end: 1px solid var(--report-line);
   font-size: 13px;
}

#annual-report .context-project a,
#annual-report .context-programmes a {
   font-weight: 600;
}

#annual-report .context-project-facts,
#annual-report .context-project-amount {
   font-size: 12px;
   color: var(--report-muted);
}

#annual-report .context-project-details summary {
   min-height: 32px;
   padding-block: 6px;
   font-size: 12px;
   cursor: pointer;
   color: var(--report-blue-text);
}

#annual-report .context-observations li {
   padding-block: 3px;
   font-size: 12px;
}

#annual-report .context-outcome {
   margin: 4px 0;
   font-size: 12px;
}

#annual-report .context-outcome dt {
   font-weight: 700;
}

#annual-report .context-outcome dd {
   margin: 0 0 6px;
}

#annual-report .context-note {
   margin: 8px 0 0;
   font-size: 12px;
   color: var(--report-muted);
}

#annual-report .context-register-link {
   display: inline-block;
   margin-block-start: 8px;
}

@media (max-width: 900px) {
   #annual-report .explorer-layout {
      grid-template-columns: minmax(0, 1fr);
   }

   #annual-report .explorer-map {
      min-height: 420px;
      height: 62vh;
   }

   #annual-report .explorer-side {
      max-height: none;
      min-height: 0;
      border-inline-start: 0;
      border-block-start: 1px solid var(--report-line);
   }
}

@media print {
   #annual-report .world-explorer {
      display: none;
   }
}

#annual-report .context-more {
   margin-block: 8px 4px;
}

/* The purged theme CSS sets a bare canvas { pointer-events: none }, which silently swallows
   every wheel, drag and click on a MapLibre map: the pointer lands on the map's container,
   whose handlers never fire, so the explorer could neither pan, zoom nor select anything.
   Same override as the scorecard's .cci-build-map; guarded by test_annual_report_explorer. */
#annual-report .explorer-map .maplibregl-canvas {
   pointer-events: auto;
}