/*
 * The national layer: comparability markers, the provisional notice, the
 * jurisdiction map, constituent lists, and the dashboard's in-page navigation.
 * Loaded after ndedi-register.css. Colors come from the brand tokens with plain
 * fallbacks; every state is carried by text as well as color, and forced-colors
 * mode keeps the borders.
 */

.ndedi-national { display: grid; gap: 1.5rem; }
.ndedi-national > * { margin-block: 0; }
.ndedi-national h3 { margin-block: 0.5rem 0.75rem; }

/* ---- Comparability markers (NAT-003 section 3) ---- */
.ndedi-marker {
    border: 1px solid var(--ncg-color-border, #767676);
    border-inline-start-width: 6px;
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    background: var(--ncg-color-bg-surface, #fff);
    color: var(--ncg-color-body, #222);
    font-size: 0.95rem;
}
.ndedi-marker p { margin: 0; }
.ndedi-marker ul { margin: 0.375rem 0 0; padding-inline-start: 1.25rem; }
.ndedi-marker li + li { margin-block-start: 0.25rem; }
.ndedi-marker-label { font-weight: 700; }
.ndedi-marker-comparable { border-inline-start-color: var(--ncg-color-primary, #23312C); }
.ndedi-marker-caveat { border-inline-start-color: var(--ncg-color-accent, #C89B7B); border-inline-start-style: double; }
.ndedi-marker-not_comparable { border-inline-start-color: var(--ncg-color-border, #767676); border-inline-start-style: dashed; }

.ndedi-measure { display: grid; gap: 0.75rem; }
.ndedi-measure + .ndedi-measure { margin-block-start: 1.25rem; }

/* ---- Provisional notice and figures ---- */
.ndedi-provisional {
    border: 2px solid var(--ncg-color-accent, #C89B7B);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--ncg-color-bg-paper, #faf8f3);
}
.ndedi-provisional p { margin: 0; }
.ndedi-provisional p + p { margin-block-start: 0.375rem; }

.ndedi-formulations {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-inline-start: 4px solid var(--ncg-color-primary, #23312C);
    background: var(--ncg-color-bg-paper, #faf8f3);
}
.ndedi-formulations p { margin: 0; }
.ndedi-formulations p + p { margin-block-start: 0.25rem; }

/* ---- The jurisdiction map: fifty-one cells by number, status in words ---- */
.ndedi-natmap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.375rem;
}
.ndedi-natmap li {
    border: 1px solid var(--ncg-color-border, #767676);
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    background: var(--ncg-color-bg-surface, #fff);
    font-size: 0.85rem;
    line-height: 1.3;
    min-height: 3.25rem;
}
.ndedi-natmap li a { text-decoration-thickness: 1px; }
.ndedi-natmap-num { display: block; font-variant-numeric: tabular-nums; font-weight: 700; }
.ndedi-natmap-status { display: block; }
.ndedi-natmap-released { border-width: 2px; border-color: var(--ncg-color-primary, #23312C); }
.ndedi-natmap-released .ndedi-natmap-status::before { content: "\2713\00a0"; }

/* ---- Constituents, mappings, and named lists ---- */
.ndedi-constituents { columns: 16rem auto; column-gap: 1.5rem; margin: 0; padding-inline-start: 1.25rem; }
.ndedi-constituents li { break-inside: avoid; margin-block-end: 0.25rem; }
.ndedi-named-list { margin: 0; padding-inline-start: 1.25rem; }
.ndedi-named-list li + li { margin-block-start: 0.25rem; }

.ndedi-dashboard-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
.ndedi-dashboard-nav a { font-weight: 600; }

.ndedi-national-empty { margin: 0; }

.ndedi-delta-up::before { content: "\2191\00a0"; }
.ndedi-delta-down::before { content: "\2193\00a0"; }

@media (forced-colors: active) {
    .ndedi-marker, .ndedi-provisional, .ndedi-natmap li, .ndedi-formulations { border-color: CanvasText; }
    .ndedi-natmap-released { outline: 2px solid CanvasText; }
}

@media print {
    .ndedi-dashboard-nav { display: none; }
    .ndedi-natmap { grid-template-columns: repeat(6, 1fr); }
}

/* ---- Comparison views by reference year ---- */
.ndedi-compare-form fieldset { border: 1px solid var(--ncg-color-border, #767676); border-radius: 6px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.ndedi-compare-form legend { font-weight: 700; padding: 0 0.25rem; }
.ndedi-compare-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.5rem; }
.ndedi-compare-fields p { margin: 0; }
.ndedi-compare-fields label { display: block; font-weight: 600; margin-block-end: 0.25rem; }
.ndedi-compare-fields select { min-width: 12rem; max-width: 100%; }
.ndedi-compare-state { border: 1px solid var(--ncg-color-border, #767676); border-radius: 6px; margin-block: 0.5rem; padding: 0 0.75rem; background: var(--ncg-color-bg-surface, #fff); }
.ndedi-compare-state > summary { cursor: pointer; font-weight: 600; padding-block: 0.625rem; }
.ndedi-compare-state[open] > summary { border-block-end: 1px solid var(--ncg-color-border, #767676); margin-block-end: 0.75rem; }
.ndedi-compare-state h4 { margin-block: 1rem 0.5rem; }
.ndedi-compare-locked p { max-width: 70ch; }

@media (forced-colors: active) {
    .ndedi-compare-form fieldset, .ndedi-compare-state { border-color: CanvasText; }
}

@media print {
    .ndedi-compare-form { display: none; }
    .ndedi-compare-state > summary { list-style: none; }
}

/* The map on the States page. Stage colours are the chart ramp (--agr-s1 to --agr-s3, with their
   inks and their dark and high-contrast values); a check mark and a stripe carry the stage without colour. */
.ndedi-map { margin: 0 0 32px; }
.ndedi-map figcaption { display: grid; gap: 4px; margin-block-end: 12px; }
.ndedi-map-title { font-weight: 700; font-size: 1.1rem; color: var(--ncg-color-heading, #111); }
.ndedi-map-sub { font-size: .95rem; color: var(--ncg-color-muted, #444); }
.ndedi-map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 8px; padding: 0; font-size: .95rem; }
.ndedi-map-legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--ncg-color-body, #111); }
.ndedi-map-swatch { width: 24px; height: 24px; flex: none; }
.ndedi-map-frame { max-width: 980px; }
.ndedi-map-svg { display: block; width: 100%; height: auto; }
.ndedi-map-state path:not(.ndedi-map-check), .ndedi-map-callout rect { stroke: var(--ncg-color-border, #767676); stroke-width: .8; stroke-linejoin: round; }
.ndedi-map-released path:not(.ndedi-map-check), .ndedi-map-released rect { fill: var(--agr-s1, #1F4E48); }
.ndedi-map-underway path:not(.ndedi-map-check), .ndedi-map-underway rect { fill: url(#ndedi-map-stripe); }
.ndedi-map-notstarted path:not(.ndedi-map-check), .ndedi-map-notstarted rect { fill: var(--ncg-color-bg-surface, #fff); }
.ndedi-map-stripe-bg { fill: var(--ncg-color-bg-surface, #fff); }
.ndedi-map-stripe-fg { fill: var(--agr-s3, #8BBDB3); }
.ndedi-map-state text { font: 700 13px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; fill: var(--ncg-color-body, #111); }
.ndedi-map-callout text { font-size: 12px; }
.ndedi-map-released text { fill: var(--agr-s1-ink, #fff); }
.ndedi-map-check { fill: none; stroke: var(--agr-s1-ink, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ndedi-map-callout line { stroke: var(--ncg-color-muted, #444); stroke-width: .8; }
.ndedi-map-callout circle { fill: var(--ncg-color-muted, #444); }
.ndedi-map-svg a { cursor: pointer; text-decoration: none; }
.ndedi-map-svg text { text-decoration: none; }
/* The site's focus rule draws a rectangle round a link's box, which for a state or a box with its
   connecting line is the wrong shape; the map marks focus along the state's own border instead (below). */
.ndedi-map-svg a:focus, .ndedi-map-svg a:focus-visible { outline: none !important; }
/* Without the script: the stroke takes the colour opposite the fill. */
.ndedi-map-svg a:hover path:not(.ndedi-map-check), .ndedi-map-svg a:hover rect { stroke: var(--ncg-color-heading, #111); stroke-width: 2; }
.ndedi-map-svg .ndedi-map-released:hover path:not(.ndedi-map-check), .ndedi-map-svg .ndedi-map-released:hover rect { stroke: var(--agr-s1-ink, #fff); }
.ndedi-map-svg a:focus-visible path:not(.ndedi-map-check), .ndedi-map-svg a:focus-visible rect { stroke: var(--agr-focus, #7A5410); stroke-width: 3.5; }
.ndedi-map-svg .ndedi-map-released:focus-visible path:not(.ndedi-map-check), .ndedi-map-svg .ndedi-map-released:focus-visible rect { stroke: var(--agr-s1-ink, #fff); }
/* With the script: a two-tone outline over every neighbour, a band (dark, or the focus colour) and a light line inside it. */
.ndedi-map-hl { pointer-events: none; }
.ndedi-map-hl[hidden] { display: none; }
.ndedi-map-hl use { fill: none; stroke-linejoin: round; }
.ndedi-map-hl-band { stroke: var(--ncg-color-heading, #111); stroke-width: 5; }
.ndedi-map-hl-line { stroke: var(--ncg-color-bg-surface, #fff); stroke-width: 2; }
.ndedi-map-hl[data-mode="focus"] .ndedi-map-hl-band { stroke: var(--agr-focus, #7A5410); stroke-width: 6; }
/* A box sits on the page, not on its neighbours: its border contrasts with the page. */
.ndedi-map-svg .ndedi-map-callout:hover rect { stroke: var(--ncg-color-heading, #111); stroke-width: 2.5; }
.ndedi-map-svg .ndedi-map-callout:focus-visible rect { stroke: var(--agr-focus, #7A5410); stroke-width: 3.5; }
.ndedi-map-credit { margin: 4px 0 0; font-size: .8rem; color: var(--ncg-color-muted, #444); }
/* On a narrow screen the map keeps a readable size and scrolls sideways; the table below lists every jurisdiction. */
@media (max-width: 640px) {
    .ndedi-map-frame { overflow-x: auto; }
    .ndedi-map-svg { min-width: 600px; }
}
@media (forced-colors: active) {
    .ndedi-map-state path:not(.ndedi-map-check), .ndedi-map-callout rect { forced-color-adjust: none; fill: Canvas; stroke: CanvasText; }
    .ndedi-map-released path:not(.ndedi-map-check), .ndedi-map-released rect { fill: CanvasText; }
    .ndedi-map-state text { fill: CanvasText; }
    .ndedi-map-released text, .ndedi-map-check { fill: Canvas; stroke: Canvas; }
    .ndedi-map-svg a:focus-visible path:not(.ndedi-map-check) { stroke: Highlight; }
    .ndedi-map-hl-band, .ndedi-map-hl[data-mode="focus"] .ndedi-map-hl-band { stroke: Highlight; }
    .ndedi-map-hl-line { stroke: Canvas; }
}


/* Year tabs above the map: the current view and each cycle, for the map and the table together. */
.ndedi-cycle-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.ndedi-cycle-nav-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ncg-color-muted, #444); }
.ndedi-cycle-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ndedi-cycle-nav li { margin: 0; }
.ndedi-cycle-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; box-sizing: border-box;
    border: 1px solid var(--ncg-color-border, #767676); border-radius: 999px;
    color: var(--ncg-color-heading, #111); text-decoration: none; font-weight: 600;
}
.ndedi-cycle-nav a:hover { border-color: var(--ncg-color-heading, #111); text-decoration: underline; text-underline-offset: 3px; }
.ndedi-cycle-nav a[aria-current="page"] { background: var(--ncg-color-primary, #1E2B45); border-color: var(--ncg-color-primary, #1E2B45); color: var(--ncg-on-chrome, #fff); }
@media (forced-colors: active) { .ndedi-cycle-nav a[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
.ndedi-cycle-nav .ndedi-cycle-nav-now { color: inherit; margin-inline-start: 6px; font-size: .8rem; font-weight: 600; text-transform: lowercase; opacity: .9; }