:root {
    --cream: #f6f2e8;
    --cream-2: #fffdf7;
    --pine: #0b543b;
    --leaf: #3e8b3c;
    --sun: #d99a16;
    --blue: #2d6fa4;
    --orange: #dd7614;
    --purple: #80559c;
    --berry: #a73561;
}

.insight-page { width: min(1760px, 100%); margin: 0 auto; padding: 14px; background: var(--cream); }
.insight-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: clamp(1.2rem, 3vw, 2.4rem); color: #fff; background: var(--pine); border-radius: 18px; }
.insight-hero.has-media { position: relative; isolation: isolate; overflow: hidden; background: var(--pine) var(--hero-image) center/cover no-repeat; }
.insight-hero.has-media::before { position: absolute; z-index: -1; inset: 0; content: ""; background: rgba(5, 56, 38, .86); }
.insight-hero h1 { max-width: 850px; margin: .1rem 0 .35rem; font-size: clamp(2.25rem, 5vw, 5rem); line-height: .88; text-transform: uppercase; }
.insight-hero p:last-child { max-width: 780px; margin: 0; color: #dceadf; }
.insight-filters { display: flex; align-items: flex-end; gap: .65rem; }
.insight-filters label { display: grid; gap: .3rem; min-width: 155px; font-size: .74rem; font-weight: 800; }
.insight-filters select { min-height: 42px; padding: 0 .75rem; background: #fff; border: 0; border-radius: 9px; }

.insight-kpis { display: grid; grid-template-columns: repeat(9, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.insight-kpi { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: .55rem; min-width: 0; min-height: 92px; padding: .65rem; overflow: hidden; background: #fff; border: 1px solid #deded4; border-radius: 12px; }
.insight-kpi svg { width: 30px; height: 30px; color: var(--kpi-color, var(--pine)); }
.insight-kpi small, .insight-kpi strong, .insight-kpi span { display: block; }
.insight-kpi > div { min-width: 0; }
.insight-kpi small { font-size: .68rem; font-weight: 800; line-height: 1.15; }
.insight-kpi strong { color: var(--kpi-color, var(--pine)); font-family: var(--display); font-size: 1.65rem; line-height: 1; }
.insight-kpi small, .insight-kpi strong, .insight-kpi span { max-width: 100%; overflow-wrap: anywhere; }
.insight-kpi span { color: var(--muted); font-size: .62rem; }
.insight-kpi .metric-map-cue { color: var(--kpi-color); }

.map-story-grid { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(520px, 2.15fr) minmax(280px, 1.05fr); gap: 10px; align-items: stretch; }
.map-story-grid > *, .management-overview > *, .indicator-detail-grid > *, .profiles-and-identity > *, .three-columns > * { min-width: 0; }
.story-left, .story-right { display: grid; gap: 10px; }
.insight-panel { min-width: 0; overflow: hidden; background: var(--cream-2); border: 1px solid #dcdccf; border-radius: 13px; box-shadow: 0 3px 12px rgba(30,57,38,.045); }
.insight-panel > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .65rem .85rem; border-bottom: 1px solid #dedfd7; }
.insight-panel > header { flex-wrap: wrap; }
.insight-panel > header > div { min-width: 0; flex: 1 1 135px; }
.insight-panel > header h2 { margin: 0; font-size: 1rem; text-transform: uppercase; }
.insight-panel > header h2 { overflow-wrap: anywhere; line-height: 1.15; }
.insight-panel > header span { color: var(--muted); font-size: .69rem; }
.territorial-map-panel, .management-map-panel { position: relative; }
.territorial-map-panel { min-height: 720px; }
.territorial-map-panel > header { position: absolute; z-index: 8; top: 12px; left: 12px; right: 12px; color: #fff; background: rgba(8,60,41,.93); border: 0; border-radius: 12px; }
.territorial-map-panel .icon-button, .management-map-panel .icon-button { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); }
.community-map { height: 100%; min-height: 620px; background: #486b4f url("../img/map-fallback.jpg") center/cover no-repeat; }
.community-map:fullscreen, .community-map:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 100vh; }
.management-map .mapboxgl-ctrl-top-right { top: 10px; right: 10px; }
.management-map .mapboxgl-ctrl-top-left { top: 10px; left: 10px; }
.management-map .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin: 0; overflow: hidden; border-radius: 7px; box-shadow: 0 2px 8px rgba(8,47,33,.28); }
.management-map .mapboxgl-ctrl-fullscreen { width: 36px; height: 36px; }
.community-map .map-empty { min-height: inherit; }
.map-message { position: absolute; z-index: 7; top: 92px; right: 16px; display: flex; align-items: center; gap: .55rem; max-width: min(330px, calc(100% - 32px)); padding: .58rem .75rem; color: var(--pine); background: rgba(255,255,255,.94); border: 1px solid rgba(11,84,59,.16); border-radius: 10px; box-shadow: 0 5px 18px rgba(5,38,26,.16); font-size: .7rem; font-weight: 700; }
.map-message svg { flex: 0 0 auto; }
.territorial-map-panel:has(.map-analysis-panel:not([hidden])) .map-message { display: none; }
:is(.territorial-map-panel, .management-map-panel):fullscreen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100vw; height: 100vh; overflow: hidden; background: #e9efea; border-radius: 0; }
:is(.territorial-map-panel, .management-map-panel):fullscreen.has-map-analysis { grid-template-columns: minmax(0, 75fr) minmax(0, 25fr); }
:is(.territorial-map-panel, .management-map-panel):fullscreen > header { position: absolute; z-index: 18; top: 12px; right: 12px; left: 12px; min-height: 58px; color: #fff; background: rgba(8,60,41,.93); border: 0; border-radius: 12px; backdrop-filter: blur(9px); }
:is(.territorial-map-panel, .management-map-panel):fullscreen.has-map-analysis > header { right: calc(25% + 12px); }
:is(.territorial-map-panel, .management-map-panel):fullscreen .community-map { grid-column: 1; grid-row: 1; width: 100%; height: 100%; min-height: 0; }
:is(.territorial-map-panel, .management-map-panel):fullscreen.has-map-analysis > .map-analysis-panel { position: relative; z-index: 20; top: auto; right: auto; grid-column: 2; grid-row: 1; width: 100%; max-height: none; padding: clamp(.7rem, 1.15vw, 1.1rem); overflow: auto; background: #fbfcfa; border: 0; border-left: 1px solid #cad7ce; border-radius: 0; box-shadow: -12px 0 32px rgba(5,38,26,.12); backdrop-filter: none; }
:is(.territorial-map-panel, .management-map-panel):fullscreen .map-analysis-chart { height: clamp(190px, 31vh, 310px); }
:is(.territorial-map-panel, .management-map-panel):fullscreen .map-analysis-chart canvas { max-height: 310px !important; }
:is(.territorial-map-panel, .management-map-panel):fullscreen .map-mode-control { bottom: 16px; left: 50%; width: min(480px, calc(100% - 180px)); transform: translateX(-50%); }
:is(.territorial-map-panel, .management-map-panel):fullscreen .map-message,
.management-map-panel:fullscreen .panel-footnote { display: none; }
.territorial-map-panel > .map-analysis-panel { top: 92px; }
.donut-box { position: relative; height: 205px; padding: .5rem; }
.donut-box.small { height: 160px; }
.leader-panel { min-height: 190px; }
.mini-profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; padding: .75rem; }
.mini-leader { padding: .5rem; background: #f0f3eb; border-radius: 8px; }
.mini-leader strong, .mini-leader span { display: block; }
.mini-leader strong { color: var(--pine); font-size: .75rem; }
.mini-leader span { color: var(--muted); font-size: .64rem; }

.bar-list { display: grid; gap: .44rem; padding: .75rem .85rem; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(90px, 2fr) 48px; align-items: center; gap: .5rem; min-width: 0; }
.bar-row label { overflow: hidden; font-size: .7rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; overflow: hidden; background: #e7e8df; border-radius: 999px; }
.bar-track span { display: block; width: var(--bar-value); height: 100%; background: var(--bar-color, var(--leaf)); border-radius: inherit; }
.bar-row strong { font-size: .68rem; text-align: right; }
.bar-row.js-chart-heat-item { margin: 0 -.3rem; padding: .28rem .3rem; border-radius: 7px; cursor: pointer; }
.bar-row.js-chart-heat-item:hover, .bar-row.js-chart-heat-item.is-map-active { background: #e8f1e9; }
.bar-row.js-chart-heat-item:focus-visible, .data-tag.js-chart-heat-item:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.blue-bars { --bar-color: var(--blue); }.orange-bars { --bar-color: var(--orange); }.red-bars { --bar-color: #b64a4a; }
.compact-bars .bar-row { grid-template-columns: minmax(100px, 1.4fr) minmax(70px, 1fr) 42px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; padding: .75rem; }
.data-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem; color: var(--pine); background: #edf2e8; border: 1px solid #d5dfd1; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.data-tag b { color: var(--orange); }
.data-tag.js-chart-heat-item { cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.data-tag.js-chart-heat-item:hover, .data-tag.js-chart-heat-item.is-map-active { color: #fff; background: var(--pine); transform: translateY(-1px); }

.insight-band { display: grid; gap: 10px; margin-top: 10px; }
.three-columns { grid-template-columns: repeat(3, 1fr); }
.learning-section { margin-top: 12px; }
.indicator-detail-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.profiles-and-identity { display: grid; grid-template-columns: 1.8fr 1fr; gap: 10px; margin-top: 10px; }
.privacy-badge { display: inline-flex; align-items: center; gap: .35rem; }
.insight-profiles { display: flex; gap: .6rem; padding: .75rem; overflow-x: auto; }
.insight-profile { display: grid; grid-template-columns: 90px 1fr; flex: 0 0 285px; min-height: 145px; overflow: hidden; background: #f6f7f2; border: 1px solid #dde1d8; border-radius: 10px; }
.insight-profile.js-locate-profile { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.insight-profile.js-locate-profile:hover { border-color: #79a886; box-shadow: 0 8px 20px rgba(11,84,59,.12); transform: translateY(-2px); }
.insight-profile.js-locate-profile:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.insight-profile img, .insight-profile .profile-lock { width: 90px; height: 100%; min-height: 145px; object-fit: cover; }
.profile-lock { display: grid; place-items: center; color: var(--pine); background: #dfe8dc; }
.profile-lock svg { width: 32px; height: 32px; }
.insight-profile div:last-child { padding: .6rem; }
.insight-profile h3 { margin: 0; font-size: .9rem; }
.insight-profile p { margin: .22rem 0; color: #556159; font-size: .68rem; }
.identity-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .7rem; }
.identity-groups > div { background: #f4f4ec; border-radius: 9px; }
.identity-groups h3 { margin: 0; padding: .65rem .65rem 0; color: var(--pine); font-size: .85rem; text-align: center; }
.identity-groups .tag-cloud { justify-content: center; padding-top: .45rem; }
.action-callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 10px; padding: 1rem 1.2rem; color: #fff; background: var(--pine); border-radius: 13px; }
.action-callout > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; }
.action-callout svg { grid-row: span 2; width: 26px; height: 26px; }
.action-callout strong, .action-callout span { display: block; }
.action-callout span { color: #d9e8dc; font-size: .75rem; }

.management-hero { background: #0a4b35; }
.management-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 10px 0; }
.management-kpi { min-width: 0; min-height: 105px; padding: .75rem; overflow: hidden; background: #fff; border: 1px solid #dddcd1; border-top: 5px solid var(--kpi-color); border-radius: 10px; text-align: center; }
.management-kpi svg { width: 27px; height: 27px; color: var(--kpi-color); }
.management-kpi strong, .management-kpi span, .management-kpi small { display: block; }
.management-kpi strong { margin: .18rem 0; color: var(--kpi-color); font-family: var(--display); font-size: 2rem; line-height: 1; }
.management-kpi span { font-size: .7rem; font-weight: 800; }
.management-kpi span { display: -webkit-box; overflow: hidden; font-size: clamp(.62rem, .65vw, .7rem); line-height: 1.18; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.management-kpi strong { max-width: 100%; font-size: clamp(1.5rem, 2vw, 2rem); overflow-wrap: anywhere; }
.management-kpi small { color: var(--muted); font-size: .62rem; }
.management-kpi .metric-map-cue { color: var(--kpi-color); }
.management-overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.15fr); gap: 10px; }
.management-overview > .insight-panel { min-height: 540px; }
.management-overview header { align-items: flex-start; justify-content: flex-start; }
.step-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: #fff !important; background: var(--pine); border-radius: 50%; font-family: var(--display); font-weight: 800; }
.step-number.danger { background: #a94444; }
.management-map { min-height: 430px; }
.panel-footnote { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .6rem; padding: .65rem; color: var(--pine); background: #edf2e8; border-radius: 8px; font-size: .7rem; font-weight: 700; text-align: center; }
.subsection-title { margin: .5rem .85rem 0; padding-top: .65rem; border-top: 1px solid #dfdfd5; font-size: .82rem; text-transform: uppercase; }

.strategy-section { margin-top: 12px; }
.section-ribbon { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 auto 10px; padding: .6rem 1rem; color: #fff; background: var(--pine); border-radius: 999px; }
.section-ribbon h2 { margin: 0; font-size: 1.2rem; text-transform: uppercase; }
.strategy-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.strategy-card { display: flex; flex-direction: column; min-height: 300px; overflow: hidden; background: #fff; border: 1px solid #dcded6; border-top: 5px solid var(--strategy-color); border-radius: 11px; }
.strategy-card .strategy-title { padding: .75rem; color: var(--strategy-color); text-align: center; }
.strategy-card .strategy-title svg { width: 30px; height: 30px; }
.strategy-card .strategy-title h3 { margin: .35rem 0 0; font-size: .92rem; text-transform: uppercase; }
.strategy-card p { flex: 1; margin: 0; padding: .25rem .85rem .85rem; overflow-wrap: anywhere; color: #4f5b52; font-size: .72rem; line-height: 1.5; }
.strategy-card footer { padding: .65rem; color: #fff; background: var(--strategy-color); font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.progress-section { margin-top: 10px; }
.progress-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: .85rem; }
.progress-card { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: .7rem; padding: .8rem; background: #f4f6f0; border-radius: 9px; }
.progress-card svg { width: 30px; height: 30px; color: var(--pine); }
.progress-card strong { display: block; color: var(--pine); font-family: var(--display); font-size: 1.7rem; }
.progress-card span { font-size: .7rem; font-weight: 800; }
.indicator-note { display: flex; align-items: center; gap: .45rem; margin: 0 .85rem .85rem; padding: .65rem .8rem; color: #5d5540; background: #fff4d2; border: 1px solid #ead79c; border-radius: 8px; font-size: .72rem; }
.indicator-note svg { flex: 0 0 auto; }
.next-steps { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 10px; }
.next-steps blockquote, .next-steps > div { margin: 0; padding: 1.2rem; background: #fff; border: 1px solid #dedfd7; border-radius: 12px; }
.next-steps blockquote { display: grid; place-items: center; color: var(--pine); font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-align: center; }
.next-steps h2 { margin: 0; text-transform: uppercase; }
.next-steps ol { margin-bottom: 0; padding-left: 1.2rem; }
.next-steps li { margin: .3rem 0; }

@media (max-width: 1350px) {
    .insight-kpis { grid-template-columns: repeat(5, 1fr); }
    .management-kpis { grid-template-columns: repeat(4, 1fr); }
    .map-story-grid { grid-template-columns: 230px minmax(470px, 2fr); }
    .story-right { grid-column: span 2; grid-template-columns: repeat(3, 1fr); }
    .management-overview { grid-template-columns: repeat(2, 1fr); }
    .strategy-grid { grid-template-columns: repeat(3, 1fr); }
    .indicator-detail-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .insight-hero { align-items: stretch; flex-direction: column; }
    .insight-filters { flex-wrap: wrap; }
    .insight-filters label { flex: 1; }
    .map-story-grid, .management-overview, .three-columns, .profiles-and-identity { grid-template-columns: 1fr; }
    .story-right { grid-column: 1; grid-template-columns: 1fr; }
    .territorial-map-panel { min-height: 540px; }
    .strategy-grid { grid-template-columns: repeat(2, 1fr); }
    .progress-grid { grid-template-columns: repeat(2, 1fr); }
    .indicator-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .insight-page { padding: 8px; }
    .insight-hero h1 { font-size: 2.4rem; }
    .insight-filters, .action-callout { align-items: stretch; flex-direction: column; }
    .insight-filters label, .insight-filters .button { width: 100%; }
    .insight-kpis, .management-kpis { grid-template-columns: repeat(2, 1fr); }
    .insight-kpi { grid-template-columns: 30px 1fr; }
    .strategy-grid, .progress-grid, .next-steps, .identity-groups, .indicator-detail-grid { grid-template-columns: 1fr; }
    .strategy-card { min-height: 230px; }
    .community-map { min-height: 430px; }
    .map-message { left: 12px; right: 12px; }
    .chart-card-map-cue { width: 30px; padding: 0; justify-content: center; font-size: 0; }
    .chart-card-map-cue svg { width: 15px; height: 15px; }
    :is(.territorial-map-panel, .management-map-panel):fullscreen.has-map-analysis { grid-template-columns: 1fr; grid-template-rows: minmax(0, 62fr) minmax(250px, 38fr); }
    :is(.territorial-map-panel, .management-map-panel):fullscreen .community-map { grid-column: 1; grid-row: 1; }
    :is(.territorial-map-panel, .management-map-panel):fullscreen.has-map-analysis > .map-analysis-panel { grid-column: 1; grid-row: 2; border-top: 1px solid #cad7ce; border-left: 0; box-shadow: 0 -12px 28px rgba(5,38,26,.12); }
    :is(.territorial-map-panel, .management-map-panel):fullscreen > header { right: 12px; }
    :is(.territorial-map-panel, .management-map-panel):fullscreen .map-analysis-chart { height: 180px; }
    :is(.territorial-map-panel, .management-map-panel):fullscreen .map-mode-control { width: calc(100% - 24px); }
}