/* sdg.theme.css — SDG Interlinkages system styling.
 * Nilsson band colours mirror the SDG_BANDS registry in Service.SDG.js
 * (Plotly canvas can't read CSS vars, so the hex lives in both — keep in sync). */

:root[data-system="sdg"],
[data-system="sdg"] {
    --sdg-band-p3: #1a9850;  --sdg-band-p2: #66bd63;  --sdg-band-p1: #a6d96a;
    --sdg-band-z0: #dddddd;
    --sdg-band-n1: #fdae61;  --sdg-band-n2: #f46d43;  --sdg-band-n3: #d73027;
}

/* Explore control bar — compact labelled selects */
.sdg-toolbar { align-items: flex-end; }
.sdg-ctl { display: flex; flex-direction: column; gap: 2px; }
.sdg-ctl-cap { font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.sdg-toolbar .ui-select { width: auto; min-width: 150px; }
.sdg-toolbar .sdg-ctl:first-child .ui-select { min-width: 200px; }

/* Explore / Manage — central panel (scrolls) beside a sticky detail */
.sdg-matrix-row    { align-items: flex-start; min-height: 0; }
.sdg-matrix-heat   { flex: 2 1 0; min-width: 0; max-height: 76vh; overflow: auto; }
.sdg-matrix-detail { flex: 1 1 320px; max-width: 420px; max-height: 76vh; overflow: auto; padding: var(--ui-space-3); }
.sdg-bars-host     { min-height: 360px; }

/* Goal × focus heatmap grid (flex rows + flex cells, value-in-cell) */
.sdg-heat        { display: flex; flex-direction: column; gap: 3px; }
.sdg-heat-row    { display: flex; gap: 3px; }
.sdg-heat-cell   { flex: 1 1 0; min-width: 52px; display: flex; align-items: center; justify-content: center;
                   height: 30px; font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold);
                   border-radius: var(--ui-radius-sm); color: #1f2937; }
.sdg-heat-label  { flex: 0 0 240px; justify-content: flex-start; padding: 0 var(--ui-space-2);
                   font-weight: var(--ui-font-normal); color: var(--ui-text);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--ui-gray-50); }
.sdg-heat-head   { background: transparent; color: var(--ui-text-muted); font-weight: var(--ui-font-semibold); height: 26px; }
.sdg-heat-clickable { cursor: pointer; }
.sdg-heat-clickable:hover { outline: 2px solid var(--ui-gray-400); outline-offset: -2px; }
.sdg-heat-back   { cursor: pointer; color: var(--ui-primary); background: transparent; }
.sdg-heat-na     { background: var(--ui-gray-100); color: var(--ui-gray-400); }
.sdg-heat-p3 { background: var(--sdg-band-p3); color: #fff; }
.sdg-heat-p2 { background: var(--sdg-band-p2); }
.sdg-heat-p1 { background: var(--sdg-band-p1); }
.sdg-heat-z0 { background: var(--sdg-band-z0); }
.sdg-heat-n1 { background: var(--sdg-band-n1); }
.sdg-heat-n2 { background: var(--sdg-band-n2); color: #fff; }
.sdg-heat-n3 { background: var(--sdg-band-n3); color: #fff; }

/* P1 — placeholder honesty: hollow cells (grey hatch, faint value), the
 * matrix-header truth chip, and a legend row (scored bands + the hollow
 * swatch). Same hatch pattern as the square matrix's diagonal, so a reader
 * already knows "hatched = not real data" before reaching this cell. */
.sdg-heat-placeholder { background: repeating-linear-gradient(45deg, var(--ui-gray-100) 0 4px, var(--ui-gray-200) 4px 8px);
                         color: var(--ui-gray-400); font-weight: var(--ui-font-normal); }
.sdg-heat-truth  { font-size: var(--ui-text-xs); color: var(--ui-text-muted); margin-bottom: var(--ui-space-2); }
.sdg-heat-legend { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); margin-top: var(--ui-space-2); }
.sdg-heat-legend-item   { display: flex; align-items: center; gap: 4px; font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.sdg-heat-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: var(--ui-radius-sm); }

/* Square (sparse) matrix — compact equal cells, rotated column headers */
.sdg-square .sdg-heat-cell  { min-width: 30px; height: 26px; font-size: var(--ui-text-xs); }
.sdg-square .sdg-heat-label { flex: 0 0 72px; }
.sdg-square .sdg-heat-head.sdg-sq-col { writing-mode: vertical-rl; transform: rotate(180deg); height: 62px; justify-content: flex-start; }
.sdg-square .sdg-heat-diag  { background: repeating-linear-gradient(45deg, var(--ui-gray-100) 0 4px, var(--ui-gray-200) 4px 8px); }
.sdg-square .sdg-heat-label.sdg-sq-focus { font-weight: var(--ui-font-semibold); color: var(--ui-text); background: var(--ui-gray-100); }

.sdg-detail-head   { margin-bottom: var(--ui-space-2); }
.sdg-detail-block  { padding: var(--ui-space-2) 0; border-top: 1px solid var(--ui-gray-200); }

/* Detail panel — outgoing / incoming relation tables */
.sdg-rel-row  { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-space-2); padding: 3px 0; border-top: 1px solid var(--ui-gray-100); }
.sdg-rel-name { font-size: var(--ui-text-xs); color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nilsson strength chip */
.sdg-band-chip { display: inline-block; padding: 0 var(--ui-space-2); border-radius: var(--ui-radius-pill);
                 font-size: var(--ui-text-xs); font-weight: var(--ui-font-semibold); color: #fff; }
.sdg-band-p3 { background: var(--sdg-band-p3); }
.sdg-band-p2 { background: var(--sdg-band-p2); }
.sdg-band-p1 { background: var(--sdg-band-p1); color: #1f2937; }
.sdg-band-z0 { background: var(--sdg-band-z0); color: #1f2937; }
.sdg-band-n1 { background: var(--sdg-band-n1); color: #1f2937; }
.sdg-band-n2 { background: var(--sdg-band-n2); }
.sdg-band-n3 { background: var(--sdg-band-n3); }

/* Manage tab — equal-width editable columns */
.sdg-tax-col { flex: 1 1 0; min-width: 0; }

/* Progress tab — goal/indicator progress bars */
.sdg-prog-row   { display: flex; align-items: center; gap: var(--ui-space-2); padding: 3px 0; border-top: 1px solid var(--ui-gray-100); }
.sdg-prog-label { flex: 0 0 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-text-sm); }
.sdg-prog-track { flex: 1 1 0; height: 16px; background: var(--ui-gray-100); border-radius: var(--ui-radius-sm); overflow: hidden; }
.sdg-prog-fill  { height: 100%; }
.sdg-prog-pct   { flex: 0 0 90px; text-align: right; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

/* References tab */
.sdg-ref-item { padding: var(--ui-space-2) 0; border-top: 1px solid var(--ui-gray-100); display: flex; flex-direction: column; gap: 2px; }

/* About → figures (System overview screenshots) */
.sdg-fig        { margin: 0 0 var(--ui-space-3) 0; }
.sdg-fig img    { max-width: 100%; height: auto; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); display: block; }
.sdg-fig figcaption { font-size: var(--ui-text-sm); color: var(--ui-text-muted); margin-top: 4px; }

/* P8 — offscreen raster host for the figure pack (attached + sized so
   Plotly lays out; parked off-viewport, never part of the interface). */
.sdg-export-offscreen { position: fixed; left: -2000px; top: 0; width: 960px; height: 560px; }

/* P9 — the robot candidate box in the vote column (distinct, never a vote). */
.sdg-candidate { display: block; border-left: 3px dashed var(--ui-gray-400, #9ca3af);
  background: var(--ui-gray-50, #f9fafb); padding: 8px; }
.sdg-candidate > div { display: block; margin-bottom: 4px; }
.sdg-candidate .ui-flex { display: flex; gap: 6px; margin-bottom: 0; }