/*
 * Education sector view styles.
 * Scoped to #sectorEducationView. The view reuses the sector-5 (.ec5-*/.ec-*)
 * layout classes and the shared map classes (.district-*, .map-*), so this file
 * only adds: the chrome-hide hook for this sector and the District-Atlas layout.
 */

/* Hide the generic dashboard chrome when the Education view is active. */
/* sector chrome consolidated in core bundle */

#sectorEducationView {
    display: block;
}

/* ---- District Atlas tab ---- */
.edu-atlas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.edu-atlas-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.edu-atlas-controls .ec5-filter-label {
    margin-right: 4px;
}
.edu-atlas-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 308px;
    gap: 18px;
    align-items: stretch;
}
.edu-atlas-stage {
    position: relative;
    background: #ffffff;
    border: 1px solid #e0e7ee;
    border-radius: 12px;
    padding: 12px;
    min-height: 460px;
    box-shadow: 0 1px 2px rgba(15, 51, 84, 0.04);
}
.edu-atlas-aside {
    background: #ffffff;
    border: 1px solid #e0e7ee;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15, 51, 84, 0.04);
}
.edu-atlas .map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 420px;
    color: #8295a8;
    font-size: 14px;
}

@media (max-width: 880px) {
    .edu-atlas-layout {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   Shared card provenance + honesty chips (NISR institutional standard)
   --------------------------------------------------------------------------
   A single canonical look for the "Source:" line and the "Data note" chip
   used across every sector view (Population & Youth, Poverty, Infrastructure,
   Environment). Each sector partial only overrides the accent colour via the
   `--card-source-accent` custom property; everything else lives here so the
   attribution is visually identical dashboard-wide.
   ========================================================================== */

.card-source {
    --card-source-accent: #2d51a1;
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    margin: 0.65rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(45, 81, 161, 0.10);
    color: #5e6672;
    font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.card-source .card-source-label {
    flex: none;
    color: var(--card-source-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.64rem;
}

/* Segmented "NISR · EICV 7 · 2023/24" provenance chip used on curated sector
   cards. Institution is bolded in the accent colour; the survey and year read
   in soft muted ink, each part joined by punctuation marks. */
.card-source-flex {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em;
}

/* Icon-led provenance chip (curated sector views). A small official-statistics
   seal inside a tinted disc, followed by the "NISR · EICV 7 · 2023/24" copy.
   Published at the foot of every card. */
.card-source-icon {
    align-self: flex-start;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    margin-top: -0.05em;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--card-source-accent), color-mix(in srgb, var(--card-source-accent) 62%, #1b3a86));
    box-shadow: 0 1px 3px rgba(45, 81, 161, 0.35);
}

.card-source-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

.card-source-copy {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em 0.45em;
    min-width: 0;
}

/* Small "Source" caption that anchors the provenance chip. */
.card-source-label {
    flex: none;
    color: var(--card-source-accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Institution badge: a filled navy pill that reads as the official publisher. */
.card-source-institution {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    background: var(--card-source-accent);
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(45, 81, 161, 0.25);
}

.card-source-divider {
    color: rgba(94, 102, 114, 0.55);
    font-size: 0.9em;
}

.card-source-text {
    color: #383838;
    font-weight: 700;
}

.card-source-year {
    color: #5e6672;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Hero / page-level source line is a touch larger and has no top border. */
.card-source--hero {
    margin: 0.5rem 0 0;
    padding-top: 0;
    border-top: 0;
    font-size: 0.8rem;
}

/* Honesty chip: shown when the stored survey table differs from the
   indicator's catalogue name. Amber-toned, low-key, never alarming. */
.data-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45em;
    margin: 0.55rem 0 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(176, 124, 22, 0.28);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(246, 181, 51, 0.08);
    color: #6b5a2a;
    font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.72rem;
    line-height: 1.4;
}

.data-note .data-note-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.08em;
    border-radius: 50%;
    background: #b07c16;
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

@media (max-width: 640px) {
    .card-source { font-size: 0.68rem; }
    .data-note { font-size: 0.68rem; }
}
/*
 * Sector 4 - Environment and Natural Resources.
 * Renders through the shared grouped-dashboard factory (ec-* markup), so this
 * partial only hides the generic dashboard chrome and scopes the section,
 * exactly like the other bespoke sector views.
 */

/* sector chrome consolidated in core bundle */

#sectorEnvironmentView {
    display: block;
}
#sectorEnvironmentView[hidden] {
    display: none;
}

/* The factory emits the Trade/Health "ec-dashboard" markup; give the
   Environment instance the same comfortable page padding as the others. */
#sectorEnvironmentView .ec-dashboard {
    padding: clamp(10px, 1.6vw, 18px);
}

/* Source attribution accent for any card-source lines inside the env view. */
#sectorEnvironmentView .card-source {
    --card-source-accent: #2d51a1;
}
/* National KPI strip + single-value KPI tiles.
   The strip carries the aggregate values that are deliberately excluded from
   chart bars; the tile replaces one-bar charts for single-value indicators. */

.dashboard-shell .featured-kpi-strip[hidden] {
    display: none;
}

.dashboard-shell .kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.dashboard-shell .kpi-chip {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 108px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--dashboard-line);
    border-radius: 10px;
    background: var(--dashboard-surface-soft);
}

.dashboard-shell .kpi-chip-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dashboard-muted);
}

.dashboard-shell .kpi-chip-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dashboard-text);
}

.dashboard-shell .kpi-chip--total {
    border-left: 3px solid var(--dashboard-context);
}

.dashboard-shell .kpi-chip--female {
    border-left: 3px solid var(--dashboard-female);
}

.dashboard-shell .kpi-chip--female .kpi-chip-value {
    color: var(--dashboard-female);
}

.dashboard-shell .kpi-chip--male {
    border-left: 3px solid var(--dashboard-male);
}

.dashboard-shell .kpi-chip--male .kpi-chip-value {
    color: var(--dashboard-male);
}

.dashboard-shell .kpi-chip--gap {
    border-left: 3px solid var(--dashboard-brand-navy);
    background: var(--dashboard-blue-soft);
}

.dashboard-shell .featured-chart.is-composite-panel {
    height: auto;
    min-height: 430px;
}

.dashboard-shell .sector-one-composite-chart {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.85fr);
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 430px;
}

.dashboard-shell .sector-one-composite-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #d7e6f2;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.dashboard-shell .sector-one-composite-panel--secondary {
    background: linear-gradient(180deg, rgba(178, 230, 250, 0.18), rgba(255, 255, 255, 0.96));
}

.dashboard-shell .sector-one-composite-head {
    display: grid;
    gap: 2px;
    min-height: 42px;
}

.dashboard-shell .sector-one-composite-head span {
    color: var(--dashboard-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-shell .sector-one-composite-head strong {
    color: var(--dashboard-brand-navy);
    font-size: 0.92rem;
    line-height: 1.2;
}

.dashboard-shell .sector-one-composite-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.dashboard-shell .sector-one-composite-panel--primary .sector-one-composite-canvas {
    min-height: 340px;
}

.dashboard-shell .sector-one-composite-panel--secondary .sector-one-composite-canvas {
    min-height: 300px;
}

.dashboard-shell .sector-one-composite-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Single-value indicator tile (featured panel and catalog cards). */
.dashboard-shell .kpi-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 160px;
    height: 100%;
    border-radius: 12px;
    background: var(--dashboard-surface-soft);
}

.dashboard-shell .kpi-tile-value {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dashboard-brand-navy);
}

.dashboard-shell .kpi-tile-unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dashboard-muted);
}

/* Top-bar filters the active dataset cannot answer stay hidden. */
.dashboard-shell .portal-field[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .dashboard-shell .featured-chart.is-composite-panel {
        min-height: 760px;
    }

    .dashboard-shell .sector-one-composite-chart {
        grid-template-columns: 1fr;
        min-height: 760px;
    }

    .dashboard-shell .sector-one-composite-panel--primary .sector-one-composite-canvas,
    .dashboard-shell .sector-one-composite-panel--secondary .sector-one-composite-canvas {
        min-height: 320px;
    }
}
/* ==========================================================================
   Unified KPI card design system (NISR institutional standard)
   --------------------------------------------------------------------------
   One shared anatomy for every headline/KPI card on the public dashboard,
   across all sector views:

     · grouped-factory views (.ec-kpi-card)  — Infrastructure, Environment,
       Economic Activity (LFS), Health (DHS), Trade & Business, Education
     · Poverty view (.sp-kpi)
     · Population & Youth view (.sector1-kpi-card)
     · Featured strip (.kpi-chip) and single-value tile (.kpi-tile)

   Each card reads: tone accent bar -> uppercase eyebrow label -> big tabular
   value -> muted detail -> professional source citation footer (the icon-led
   .card-source chip from public-dashboard-18-card-source.css). Sectors keep
   their tone identity through the --kpi-accent custom property; everything
   else (elevation, motion, typography, provenance footer) is identical
   dashboard-wide. Loaded last so it refines the earlier sector partials.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared card foundation (factory + poverty views)
   -------------------------------------------------------------------------- */

.ec-dashboard .ec-kpi-card,
.sp-root .sp-kpi {
    --kpi-accent: #2d51a1;
    position: relative;
    min-height: 152px;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Tone accent bar across the top edge. */
.ec-dashboard .ec-kpi-card::before,
.sp-root .sp-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 42%, #33a7df));
    pointer-events: none;
}

.ec-dashboard .ec-kpi-card:hover,
.sp-root .sp-kpi:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--kpi-accent) 36%, #dce5f0);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 22px 42px color-mix(in srgb, var(--kpi-accent) 15%, transparent);
}

/* --------------------------------------------------------------------------
   2. Tone system — one accent variable per tone, ink derived for contrast
   -------------------------------------------------------------------------- */

.ec-dashboard .ec-kpi-card--blue,
.ec-dashboard .ec-kpi-card--green,
.sp-root .sp-kpi.is-blue,
.sp-root .sp-kpi.is-green,
.sp-root .sp-kpi.is-navy {
    --kpi-accent: #2d51a1;
}

.ec-dashboard .ec-kpi-card--teal,
.sp-root .sp-kpi.is-teal,
.sp-root .sp-kpi.is-purple {
    --kpi-accent: #33a7df;
}

.ec-dashboard .ec-kpi-card--orange,
.ec-dashboard .ec-kpi-card--orange-soft,
.sp-root .sp-kpi.is-orange {
    --kpi-accent: #f68d32;
}

.ec-dashboard .ec-kpi-card--neutral {
    --kpi-accent: #64748b;
}

/* Value ink: the accent darkened toward navy so big numerals stay readable
   on the white surface. */
.ec-dashboard .ec-kpi-card,
.sp-root .sp-kpi {
    --kpi-ink: color-mix(in srgb, var(--kpi-accent) 78%, #0b2b52);
}

/* --------------------------------------------------------------------------
   3. Factory KPI cards (.ec-kpi-card) — six sector views
   -------------------------------------------------------------------------- */

.ec-dashboard .ec-kpi-card {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
}

.ec-dashboard .ec-kpi-main {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 18px 18px 14px;
}

.ec-dashboard .ec-kpi-copy {
    min-width: 0;
}

.ec-dashboard .ec-kpi-card h3 {
    color: #52627a;
    font-size: 0.64rem;
}

.ec-dashboard .ec-kpi-value {
    color: var(--kpi-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ec-dashboard .ec-kpi-detail {
    font-size: 0.72rem;
}

/* Icon in a gradient tone disc — the "brand mark" of every KPI card. */
.ec-dashboard .ec-kpi-card .ec-kpi-icon {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 58%, #101f3c));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--kpi-accent) 30%, transparent);
}

.ec-dashboard .ec-kpi-card .ec-kpi-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Provenance footer: a full-width strip pinned to the card foot. */
.ec-dashboard .ec-kpi-card .card-source.ec-kpi-source {
    margin: 0;
    padding: 9px 18px 11px;
    border-top: 1px solid #e6edf5;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fe 100%);
    font-size: 0.66rem;
}

/* --------------------------------------------------------------------------
   4. Poverty KPI cards (.sp-kpi)
   -------------------------------------------------------------------------- */

.sp-root .sp-kpi .sp-kpi-value {
    color: var(--kpi-ink);
    letter-spacing: -0.01em;
}

.sp-root .sp-kpi .sp-kpi-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 58%, #101f3c));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--kpi-accent) 30%, transparent);
}

.sp-root .sp-kpi .card-source {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e6edf5;
    font-size: 0.68rem;
}

/* --------------------------------------------------------------------------
   5. Population & Youth KPI cards (.sector1-kpi-card)
   The sector-1 partial already ships the accent border, hover lift and
   provenance chip; here we only align the icon disc with the shared system.
   -------------------------------------------------------------------------- */

.sector1-kpi-card {
    --kpi-accent: var(--s1-navy, #2d51a1);
}

.sector1-kpi-card.is-orange {
    --kpi-accent: var(--s1-orange, #f68d32);
}

.sector1-kpi-card.is-purple {
    --kpi-accent: var(--s1-blue, #33a7df);
}

.sector1-kpi-card .sector1-kpi-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 58%, #101f3c));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--kpi-accent) 30%, transparent);
}

/* --------------------------------------------------------------------------
   6. Featured strip chips (.kpi-chip) + single-value tile (.kpi-tile)
   -------------------------------------------------------------------------- */

.dashboard-shell .kpi-chip {
    position: relative;
    gap: 0.15rem;
    min-width: 118px;
    padding: 0.6rem 0.95rem;
    border: 1px solid #dce5f0;
    border-left-width: 3px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-shell .kpi-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 14px 28px rgba(15, 23, 42, 0.09);
}

/* Re-declare the semantic left accents so they survive the base restyle. */
.dashboard-shell .kpi-chip--total {
    border-left-color: var(--dashboard-context);
}

.dashboard-shell .kpi-chip--female {
    border-left-color: var(--dashboard-female);
}

.dashboard-shell .kpi-chip--male {
    border-left-color: var(--dashboard-male);
}

.dashboard-shell .kpi-chip--gap {
    border-left-color: var(--dashboard-brand-navy);
}

.dashboard-shell .kpi-chip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.dashboard-shell .kpi-chip-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.dashboard-shell .kpi-tile {
    border: 1px solid #dce5f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-shell .kpi-tile-value {
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7. Motion safety + small screens
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ec-dashboard .ec-kpi-card,
    .sp-root .sp-kpi,
    .dashboard-shell .kpi-chip {
        transition: none;
    }

    .ec-dashboard .ec-kpi-card:hover,
    .sp-root .sp-kpi:hover,
    .dashboard-shell .kpi-chip:hover {
        transform: none;
    }
}

@media (max-width: 640px) {
    .ec-dashboard .ec-kpi-main {
        padding: 16px 16px 12px;
    }

    .ec-dashboard .ec-kpi-card .card-source.ec-kpi-source {
        padding: 8px 16px 10px;
    }

    .ec-dashboard .ec-kpi-card .ec-kpi-icon,
    .sp-root .sp-kpi .sp-kpi-icon,
    .sector1-kpi-card .sector1-kpi-icon {
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 11px;
    }
}
/* ==========================================================================
   Search catalog cards — institutional redesign
   --------------------------------------------------------------------------
   The indicator catalog (#catalogGrid) is what the dashboard search filters;
   these cards are the "search results". This partial gives them the same
   flagship design language as the KPI system (partial 20) and the sector-10
   charts: elevated white cards with a hover accent bar, a metadata eyebrow
   (indicator code + unit), a clamped Outfit title, a tinted preview well,
   and a footer pairing the professional source-citation chip (partial 18,
   via renderSourceChip) with a pill call-to-action.
   Scoped to .dashboard-shell .dashboard-indicator-card and loaded last, so
   it cleanly refines the baseline card rules in partials 03/06/07/08.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Card shell — elevation, accent bar, active state
   -------------------------------------------------------------------------- */

.dashboard-shell .dashboard-indicator-card {
    position: relative;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Brand accent bar revealed on hover / when active. */
.dashboard-shell .dashboard-indicator-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 3px;
    background: linear-gradient(90deg, #2d51a1, #33a7df);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.dashboard-shell .dashboard-indicator-card:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 81, 161, 0.30);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 22px 42px rgba(45, 81, 161, 0.12);
}

.dashboard-shell .dashboard-indicator-card:hover::before,
.dashboard-shell .dashboard-indicator-card.is-active::before {
    opacity: 1;
}

.dashboard-shell .dashboard-indicator-card.is-active {
    border-color: rgba(45, 81, 161, 0.45);
    box-shadow: 0 0 0 3px rgba(45, 81, 161, 0.12), 0 18px 38px rgba(45, 81, 161, 0.12);
}

/* --------------------------------------------------------------------------
   2. Head — metadata eyebrow + clamped title
   -------------------------------------------------------------------------- */

.dashboard-shell .dashboard-indicator-card .catalog-card-head {
    display: grid;
    gap: 10px;
    align-content: start;
}

.dashboard-shell .catalog-card-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

/* Indicator code: the "catalogue reference", set in the mono face loaded
   for the dashboard (IBM Plex Mono / Spline Sans Mono). */
.dashboard-shell .catalog-card-code {
    padding: 2px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f1f5f9;
    color: #5e6672;
    font-family: "IBM Plex Mono", "Spline Sans Mono", monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dashboard-shell .catalog-card-unit {
    margin-left: auto;
}

.dashboard-shell .catalog-card-active-flag {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(45, 81, 161, 0.10);
    color: #2d51a1;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-shell .dashboard-indicator-card .catalog-card-title {
    color: #17385f;
    font-family: "Outfit", "Source Sans 3", sans-serif;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   3. Preview well
   -------------------------------------------------------------------------- */

.dashboard-shell .dashboard-indicator-card .catalog-preview {
    border: 1px solid #e3ecf6;
    border-radius: 14px;
    background: linear-gradient(180deg, #fdfeff 0%, #f7fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   4. Footer — provenance chip + pill call-to-action
   -------------------------------------------------------------------------- */

.dashboard-shell .catalog-card-foot {
    display: grid;
    gap: 10px;
    align-self: end;
}

/* The shared provenance chip, seated as the card's citation line. */
.dashboard-shell .catalog-card-foot .card-source.catalog-card-source {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid #e6edf5;
    font-size: 0.68rem;
}

.dashboard-shell .catalog-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.dashboard-shell .catalog-card-cta svg {
    width: 15px;
    height: 15px;
    transition: transform 160ms ease;
}

.dashboard-shell .catalog-card-cta:hover svg {
    transform: translateX(3px);
}

/* Selected state: outlined, calm — clearly distinct from the default CTA. */
.dashboard-shell .dashboard-indicator-card.is-active .catalog-card-cta,
.dashboard-shell .dashboard-indicator-card.is-active .catalog-card-cta:hover,
.dashboard-shell .dashboard-indicator-card.is-active .catalog-card-cta:focus-visible {
    border: 1.5px solid rgba(45, 81, 161, 0.4);
    background: #ffffff;
    color: #2d51a1;
}

.dashboard-shell .dashboard-indicator-card.is-active .catalog-card-cta:hover {
    background: rgba(45, 81, 161, 0.06);
}

/* --------------------------------------------------------------------------
   5. Motion safety
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dashboard-shell .dashboard-indicator-card,
    .dashboard-shell .dashboard-indicator-card::before,
    .dashboard-shell .catalog-card-cta svg {
        transition: none;
    }

    .dashboard-shell .dashboard-indicator-card:hover {
        transform: none;
    }

    .dashboard-shell .catalog-card-cta:hover svg {
        transform: none;
    }
}