/* Observatory views and the chart kit. Chart colours are the validated reference palette
   (dark steps by default, light steps under the light theme) and the fixed status palette. */
:root {
  --viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70;
  --viz-grid:rgba(163,218,227,.14); --viz-axis:#9aabb1; --viz-ink:#f4f8f8; --viz-surface:#0d2632;
  --seq-1:#cde2fb; --seq-2:#9ec5f4; --seq-3:#6da7ec; --seq-4:#3987e5; --seq-5:#256abf; --seq-6:#184f95; --seq-0:rgba(255,255,255,.04);
  --st-good:#0ca30c; --st-warning:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;
}
[data-theme="light"] { --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-grid:rgba(26,42,34,.12); --viz-axis:#52514e; --viz-ink:#0b0b0b; --viz-surface:#fcfcfb; --seq-0:rgba(0,0,0,.035); }

/* Figures */
.viz { margin:0; padding:16px 18px; border-radius:var(--radius); background:var(--surface-card-2); border:1px solid var(--line); display:grid; gap:10px; }
.viz figcaption { display:grid; gap:2px; }
.viz figcaption strong { font:600 15px var(--font-display); color:var(--ink-strong); }
.viz figcaption span { color:var(--muted); font-size:12px; }
.viz-svg { width:100%; height:auto; display:block; overflow:visible; }
.viz-grid { stroke:var(--viz-grid); stroke-width:1; }
.viz-axis { fill:var(--viz-axis); font:11px var(--font-body); }
.viz-label { fill:var(--viz-ink); font:600 11px var(--font-body); }
.viz-line { fill:none; stroke:var(--viz-1); stroke-width:2; }
.viz-point { fill:var(--viz-1); stroke:var(--viz-surface); stroke-width:2; cursor:pointer; }
.viz-point.hollow { fill:var(--viz-surface); stroke:var(--viz-1); }
.viz-point:hover, .viz-point:focus { r:7; outline:none; }
.viz-bar { fill:var(--viz-1); }
.viz-bar:hover, .viz-bar:focus { fill:var(--seq-5); outline:none; }
.viz-tile { fill:var(--viz-1); fill-opacity:.85; stroke:var(--viz-surface); stroke-width:2; }
.viz-tile:hover, .viz-tile:focus { fill-opacity:1; outline:none; }
.viz-tile-label { fill:#fff; font:600 12px var(--font-body); pointer-events:none; }
.viz-tile-label.dim { font-weight:400; opacity:.85; }
.viz-ribbon { fill:var(--viz-1); fill-opacity:.28; stroke:var(--viz-surface); stroke-width:1; }
.viz-ribbon:hover, .viz-ribbon:focus { fill-opacity:.55; outline:none; }
.viz-node { fill:var(--viz-ink); }
.viz-edge { stroke:var(--viz-axis); stroke-width:1.6; }
.viz-edge.suggested, .viz-edge.ai_suggested { stroke:var(--viz-2); stroke-dasharray:5 4; }
.viz-gnode circle { fill:var(--viz-surface); stroke:var(--viz-1); stroke-width:2; }
.viz-gnode.root circle { fill:var(--viz-1); }
.viz-gnode[role="button"] { cursor:pointer; }
.viz-gnode:hover circle, .viz-gnode:focus circle { stroke-width:3.5; }
.viz-gtype { fill:var(--viz-axis); font:600 8px var(--font-body); letter-spacing:.08em; }
.viz-glabel { fill:var(--viz-ink); font:11px var(--font-body); }
.viz-empty { padding:24px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--radius-sm); font-size:13px; }
.viz-note { margin:0; color:var(--muted); font-size:12px; }
.viz-meta { display:flex; flex-wrap:wrap; gap:4px 16px; color:var(--dim); font-size:11px; line-height:1.5; }
.viz-meta b { color:var(--muted); font-weight:600; margin-right:4px; }
.viz-legend { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:12px; align-items:center; }
.viz-legend span { display:inline-flex; align-items:center; gap:6px; }
.viz-dot { width:10px; height:10px; border-radius:50%; background:var(--viz-1); display:inline-block; }
.viz-dot.hollow { background:transparent; border:2px solid var(--viz-1); }
.viz-line-key { width:22px; height:0; border-top:2px solid var(--viz-axis); display:inline-block; }
.viz-line-key.dashed { border-top:2px dashed var(--viz-2); }
.viz-geo-dot-key { width:12px; height:12px; border-radius:50%; border:2px solid var(--viz-2); display:inline-block; }
.viz-ramp { display:inline-flex !important; gap:0 !important; }
.viz-ramp i { width:16px; height:10px; display:inline-block; }
.viz-hatch { width:14px; height:10px; display:inline-block; background:repeating-linear-gradient(45deg, var(--line-strong) 0 2px, transparent 2px 5px); }
.seq-1 { background:var(--seq-1); fill:var(--seq-1); } .seq-2 { background:var(--seq-2); fill:var(--seq-2); } .seq-3 { background:var(--seq-3); fill:var(--seq-3); }
.seq-4 { background:var(--seq-4); fill:var(--seq-4); color:#fff; } .seq-5 { background:var(--seq-5); fill:var(--seq-5); color:#fff; } .seq-6 { background:var(--seq-6); fill:var(--seq-6); color:#fff; }
.seq-0 { background:var(--seq-0); fill:var(--seq-0); } .seq-x { background:repeating-linear-gradient(45deg, var(--line-strong) 0 2px, transparent 2px 5px); color:var(--muted); }
.viz-table summary { cursor:pointer; color:var(--cyan); font-size:12px; }
.viz-table-scroll, .viz-matrix-scroll { overflow-x:auto; }
.viz-table table { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.viz-table th, .viz-table td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
.viz-matrix { border-collapse:separate; border-spacing:2px; font-size:11px; }
.viz-matrix th { color:var(--muted); font-weight:500; text-align:left; padding:3px 6px; white-space:nowrap; }
.viz-matrix thead th { writing-mode:vertical-rl; transform:rotate(180deg); padding:6px 2px; height:64px; text-align:left; }
.viz-matrix thead th:first-child { writing-mode:horizontal-tb; transform:none; vertical-align:bottom; }
.viz-matrix th button, .viz-heat th button { background:none; border:0; padding:0; color:var(--ink); font:inherit; cursor:pointer; text-align:left; }
.viz-matrix th button:hover { color:var(--cyan); }
.viz-matrix td { padding:0; }
.viz-status { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:5px; font:700 12px/1 var(--font-body); background:var(--seq-0); color:var(--muted); }
.viz-status.good { background:var(--st-good); color:#fff; } .viz-status.warning { background:var(--st-warning); color:#2b1d00; } .viz-status.serious { background:var(--st-serious); color:#2b0f08; } .viz-status.critical { background:var(--st-critical); color:#fff; }
.viz-heat { border-collapse:separate; border-spacing:2px; font-size:11px; }
.viz-heat th { color:var(--muted); font-weight:500; padding:3px 6px; text-align:left; white-space:nowrap; }
.viz-heat thead th span { writing-mode:vertical-rl; transform:rotate(180deg); display:inline-block; height:96px; }
.viz-heat td { min-width:30px; height:26px; text-align:center; border-radius:4px; color:#0b2540; font-weight:600; }
.viz-map-wrap { position:relative; }
.viz-world .viz-ocean { fill:transparent; }
.viz-land { stroke:var(--viz-surface); stroke-width:.5; cursor:pointer; }
.viz-land.seq-0 { fill:rgba(163,218,227,.12); }
[data-theme="light"] .viz-land.seq-0 { fill:rgba(26,42,34,.1); }
.viz-land.selected { stroke:var(--viz-2); stroke-width:2; }
.viz-land:hover, .viz-land:focus { stroke:var(--viz-ink); stroke-width:1; outline:none; }
.viz-geo-dot { fill:var(--viz-2); fill-opacity:.55; stroke:var(--viz-2); stroke-width:1.5; cursor:pointer; }
.viz-geo-dot.selected { fill-opacity:.9; stroke:var(--viz-ink); }
.viz-tooltip { position:fixed; z-index:400; max-width:260px; padding:7px 10px; border-radius:8px; background:var(--panel-strong); border:1px solid var(--line-strong); color:var(--ink); font-size:12px; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; box-shadow:var(--shadow); }
.viz-tooltip.on { opacity:1; transform:none; }

/* Shared observatory UI */
.n-segment { display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.n-segment button { padding:7px 12px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.n-segment button.on { background:var(--btn-primary-fill); color:var(--btn-primary-ink); }
.n-segment button:disabled { opacity:.45; cursor:default; }
.n-view-row { justify-content:space-between; }
.n-date { display:grid; gap:2px; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.n-date input { color:var(--ink); background:var(--surface-input); border:1px solid var(--line); border-radius:8px; padding:7px 8px; }
.n-more-filters summary { cursor:pointer; color:var(--cyan); font-size:12px; margin-bottom:8px; }
.n-pager { display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.n-ev-card .n-card-actions { margin-top:6px; }
.n-ev-card.grid .n-title { font-size:15px; }
.n-ev-rolodex { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; }
.n-ev-rolo-card h2 { font:600 26px/1.15 var(--font-display); margin:8px 0; }
.n-pipeline summary { cursor:pointer; color:var(--cyan); font-size:13px; margin:10px 0; }
.n-warn-box { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid rgba(234,203,131,.35); background:rgba(234,203,131,.07); font-size:13px; }
.n-ev-head h1 { font:600 clamp(26px,3.4vw,40px)/1.1 var(--font-display); margin:6px 0 10px; }
.n-verify-box { border-color:rgba(132,228,229,.3); }
.n-check-card { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:8px; display:grid; gap:4px; }
.n-check-card.ai { border-style:dashed; }
.n-check-card small { color:var(--dim); font-size:11px; }
.n-check-card ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:12px; }
.n-check-card li { display:flex; justify-content:space-between; gap:8px; color:var(--muted); }
.chk-yes { color:var(--green); } .chk-no { color:var(--coral); } .chk-unclear { color:var(--gold); } .chk-not_checked { color:var(--dim); font-weight:400; }
.n-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 12px; }
.n-review-tools { border-color:rgba(234,203,131,.3); }
.n-review-tools h4 { margin:14px 0 4px; }
.n-progress-bar { position:relative; height:30px; border-radius:999px; background:var(--surface-card-2); border:1px solid var(--line); overflow:hidden; }
.n-progress-bar span { position:absolute; inset:0 auto 0 0; background:rgba(57,135,229,.35); transition:width .3s; }
.n-progress-bar b { position:relative; display:block; line-height:30px; padding:0 14px; font-size:12px; font-weight:500; }
.n-series-list { display:grid; gap:8px; }
.n-series { padding:0; }
.n-series summary { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:12px 16px; cursor:pointer; }
.n-series-name { flex:1 1 280px; font-size:13px; }
.n-series-val { font:600 13px var(--font-body); color:var(--ink-strong); }
.n-series-body { padding:0 16px 14px; display:grid; gap:8px; }
.n-country-obs .n-head h1 { margin-bottom:4px; }
.n-defs dt { font-weight:600; }

/* Living Reef */
.n-living-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.n-stat-btn { cursor:pointer; text-align:left; color:var(--ink); font:inherit; }
.n-stat-btn.on, .n-stat-btn:hover { border-color:var(--viz-1); }
.n-lr-panel .n-rows li { justify-content:space-between; }

/* Ask Data Reef */
.n-agent-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.n-agent { display:grid; gap:4px; text-align:left; padding:12px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-card); color:var(--ink); cursor:pointer; }
.n-agent span { color:var(--muted); font-size:11px; line-height:1.4; }
.n-agent.on { border-color:var(--cyan-dark); background:rgba(132,228,229,.08); }
.n-ask-form { padding:14px; display:grid; gap:10px; }
.n-ask-form textarea { width:100%; color:var(--ink); background:var(--surface-input); border:1px solid var(--line); border-radius:10px; padding:12px; font:15px var(--font-body); resize:vertical; }
.n-answer h2 { font:600 22px/1.25 var(--font-display); margin:6px 0 12px; }
.n-ans-block { border-left:3px solid var(--line-strong); padding:4px 0 4px 14px; margin:12px 0; }
.n-ans-block h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.n-ans-block ul { margin:0; padding-left:18px; display:grid; gap:4px; }
.n-ans-block.direct { border-color:var(--cyan); } .n-ans-block.direct p { font-size:16px; margin:0; }
.n-ans-block.verified { border-color:var(--green); } .n-ans-block.community { border-color:var(--gold); } .n-ans-block.interpretation { border-color:var(--violet); } .n-ans-block.limitations { border-color:var(--coral); } .n-ans-block.suggested { border-color:var(--blue); }
.n-refs { display:inline-flex; gap:3px; margin-left:4px; }
.n-ref { font:600 10px var(--font-body); padding:1px 5px; border-radius:4px; background:var(--surface-card-2); border:1px solid var(--line); color:var(--cyan); text-decoration:none; }
.n-ref-list { margin:0; padding-left:18px; display:grid; gap:10px; }
.n-ref-list li:target { outline:2px solid var(--cyan-dark); outline-offset:4px; border-radius:4px; }

/* Search, radar, governance */
.n-search-bar { display:flex; gap:8px; flex-wrap:wrap; }
.n-search-bar input { flex:1 1 320px; color:var(--ink); background:var(--surface-input); border:1px solid var(--line-strong); border-radius:12px; padding:13px 14px; font:15px var(--font-body); }
.n-search-title { font-size:14px; font-weight:600; color:var(--ink-strong); }
.n-click-chips { gap:6px; }
.n-click-chips > span { display:inline-flex; align-items:center; gap:2px; padding:0; border:0; background:none; }
.n-radar-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.n-radar-list li { padding:12px 16px; display:grid; gap:4px; }
.n-radar-list li.followed { border-color:rgba(234,203,131,.35); }
.n-follow-chips span { display:inline-flex; gap:4px; align-items:center; }
.n-gov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.n-gov-item h4 { margin:0 0 4px; font-family:var(--font-display); }
.n-gov-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

/* Impact Passport and reports */
.n-passport-head h1 { font:600 clamp(26px,3.4vw,40px)/1.1 var(--font-display); margin:6px 0 10px; }
.n-rules ul { margin:0; padding-left:18px; display:grid; gap:4px; font-size:13px; }
.n-impact-entry { padding:12px 0; border-bottom:1px solid var(--line); display:grid; gap:4px; }
.n-impact-entry:last-child { border-bottom:0; }
.n-impact-entry p { margin:0; font-size:13px; }
.n-impact-value { font:600 24px var(--font-display) !important; color:var(--ink-strong); }
.n-impact-value span { font-size:13px; color:var(--muted); }
.n-media-row { display:flex; gap:10px; flex-wrap:wrap; }
.n-media-row figure { margin:0; width:160px; }
.n-media-row img { width:160px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.n-media-row figcaption { font-size:11px; color:var(--muted); }
.n-report-doc h1 { font:600 clamp(26px,3.4vw,38px)/1.1 var(--font-display); margin:6px 0 12px; }
.n-report-doc h2 { font:600 18px var(--font-display); margin:22px 0 8px; }
.n-report-doc p, .n-report-doc li { font-size:14px; line-height:1.6; }

/* Map additions */
.obs-layer-panel { display:grid; gap:4px; margin:12px 0; padding-top:10px; border-top:1px solid var(--line); }
.obs-layer-source { margin:0 0 6px 30px; color:var(--dim); font-size:10.5px; line-height:1.45; }
.obs-layer-missing summary { cursor:pointer; color:var(--muted); font-size:11px; }
.obs-layer-missing ul { margin:4px 0 0; padding-left:16px; font-size:11px; color:var(--dim); }
.obs-map-card { position:absolute; left:14px; bottom:14px; z-index:5; width:min(320px,calc(100% - 28px)); display:grid; gap:6px; padding:14px; border-radius:14px; background:var(--panel-strong); border:1px solid var(--line-strong); box-shadow:var(--shadow); color:var(--ink); }
.obs-map-card span { color:var(--cyan); font:600 10px var(--font-body); letter-spacing:.1em; }
.obs-map-card p { margin:0; font-size:13px; color:var(--muted); }
.obs-map-card small { color:var(--dim); font-size:11px; line-height:1.45; }
.obs-map-card .btn { justify-self:start; }
.obs-map-card-close { position:absolute; top:6px; right:8px; background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; }

.n-live-head { display:flex; align-items:center; gap:8px; }
.n-live-dot { width:8px; height:8px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 0 0 rgba(255,77,94,.6); animation:n-live-pulse 1.8s ease-out infinite; }
@keyframes n-live-pulse { 70% { box-shadow:0 0 0 8px rgba(255,77,94,0); } 100% { box-shadow:0 0 0 0 rgba(255,77,94,0); } }
.n-live-log { max-height:520px; overflow-y:auto; }
.n-live-new { animation:n-live-in .9s ease-out; }
@keyframes n-live-in { from { opacity:0; transform:translateY(-6px); background:color-mix(in srgb, var(--cyan) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .n-live-dot, .n-live-new { animation:none; } }
@media (max-width: 980px) { .n-living-layout { grid-template-columns:1fr; } }
@media (max-width: 640px) {
  .n-ev-rolodex { grid-template-columns:1fr; }
  .n-ev-rolodex > .btn { justify-self:center; }
  .viz { padding:12px; }
  .n-segment { border-radius:12px; }
}
@media print {
  .n-no-print, .x-dock { display:none !important; }
  body:has(.n-report-doc) * { visibility:hidden; }
  body:has(.n-report-doc) .n-report-doc, body:has(.n-report-doc) .n-report-doc * { visibility:visible; }
  .n-report-doc { position:absolute; inset:0; }
  .n-report-doc { box-shadow:none; border:0; background:#fff; color:#000; }
  .n-report-doc a { color:#000; }
}