/* Eco-Sensitive Zones: the original page had no inline styles; its stylesheet css/eco_sensitive_zones.css is loaded as is.
   Each original block sits in its own .esz-wrap: the wrap's 40px top/bottom space is kept only above the first and below the last. */
.esz-page > .esz-wrap { padding-top: 0; padding-bottom: 0; }
.esz-page > header.page-hero + .esz-wrap { padding-top: 40px; }
.esz-page > .esz-wrap:last-child { padding-bottom: 40px; }

/* Full width (the site style): the blocks run inside the 5% side margins with no 1440px cap; headings left in the site's
   type (Plus Jakarta Sans 800, up to 38px), no bar under them. The page's own designs are unchanged. */
html body .esz-page .esz-wrap, html body .esz-page .dz-band .dz-wrap { max-width: none; padding-left: 5%; padding-right: 5%; box-sizing: border-box; }
html body .esz-page .esz-section-title { text-align: left; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.035em; color: #0a2e1a; }
html body .esz-page .wa-title-bar { display: none; }
@media (max-width: 600px) { html body .esz-page .esz-wrap, html body .esz-page .dz-band .dz-wrap { padding-left: 20px; padding-right: 20px; } }

/* Official Notification Status, simple and minimal: three sand cards side by side; the status as a small chip, the name,
   the description, then the gazette facts as label / value lines under a hairline; a card lifts a little on hover */
html body .esz-page .esz-status-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
html body .esz-page .esz-status-card { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px; border: 0; border-radius: 8px; background: #f2ede1; box-shadow: none; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms; }
html body .esz-page .esz-status-card::before, html body .esz-page .esz-status-card::after { display: none; }
html body .esz-page .esz-status-card:hover { transform: translateY(-2px); background: #ece5d3; }
html body .esz-page .esz-status-icon { display: none; }
html body .esz-page .esz-status-badge { position: static; align-self: flex-start; order: -1; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(45, 106, 79, .14); color: #1a472a; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
html body .esz-page .esz-status-badge::before { content: '● '; color: #2d6a4f; }
html body .esz-page .esz-status-badge.progress { background: rgba(241, 196, 15, .2); color: #7a5c00; }
html body .esz-page .esz-status-name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #0a2e1a; }
html body .esz-page .esz-status-desc p { margin: 0; font-size: 15px; line-height: 1.65; color: #1f2a22; }
.esz-status-facts { display: flex; flex-direction: column; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid rgba(10, 46, 26, .12); }
.esz-status-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.esz-status-facts dt { color: #5b6b60; font-weight: 600; }
.esz-status-facts dd { margin: 0; text-align: right; font: 500 14px/1.4 Roboto, sans-serif; color: #0a2e1a; }

/* Gazette Notifications, last on the page, as the plain document rows used on Elephant Census: no card; the heading in
   the site style, then ruled rows (PDF icon, title and date, dark download button), a row tints on hover */
html body .esz-page .dz-k-documents { padding: 52px 0 0 !important; background: transparent !important; }
html body .esz-page .dz-k-documents .bs-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .esz-page .dz-k-documents .bs-card::before, html body .esz-page .dz-k-documents .bs-card::after { display: none; }
html body .esz-page .dz-k-documents .bs-card-header { margin: 0; padding: 0; border: 0; }
html body .esz-page .dz-k-documents .bs-section-title { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.035em; color: #0a2e1a; }
html body .esz-page .dz-k-documents .bs-section-title .icon-box { display: none; }
html body .esz-page .dz-k-documents .bs-cms-content p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: #4b5563; }
html body .esz-page .dz-k-documents .ps-docs { gap: 0; margin: 0; }
html body .esz-page .dz-k-documents .ps-doc { display: flex; align-items: center; gap: 20px; margin: 0; padding: 20px 12px; border: 0; border-top: 1px solid rgba(10, 46, 26, .15); border-radius: 0; background: transparent; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
html body .esz-page .dz-k-documents .ps-doc:last-child { border-bottom: 1px solid rgba(10, 46, 26, .15); }
html body .esz-page .dz-k-documents .ps-doc:hover { background: #f2ede1; }
html body .esz-page .dz-k-documents .ps-doc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a; font-size: 18px; }
html body .esz-page .dz-k-documents .ps-doc-text { flex: 1; }
html body .esz-page .dz-k-documents .ps-doc-text strong { display: block; margin: 0 0 2px; font-size: 17px; font-weight: 800; color: #0a2e1a; }
html body .esz-page .dz-k-documents .ps-doc-text small { font-size: 14px; color: #4b5563; }
html body .esz-page .dz-k-documents .ps-doc-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 8px; background: #0a2e1a; color: #fff; font-size: 14px; font-weight: 700; transition: background-color 150ms; }
html body .esz-page .dz-k-documents .ps-doc:hover .ps-doc-btn { background: #1a472a; }
html body .esz-page { padding-bottom: 84px; }

/* Zoning Activity Guide as one green card: the three kinds as a segmented control (red / gold / green when chosen), the
   list below as light ruled rows with a coloured dot; a row slides in a little on hover */
html body .esz-page .esz-zoning-box { padding: 32px; border: 0; border-radius: 8px; background: #0a2e1a; box-shadow: none; }
html body .esz-page .esz-zoning-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
html body .esz-page .esz-zoning-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, .7); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 150ms, color 150ms; }
html body .esz-page .esz-zoning-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
html body .esz-page .esz-zoning-tab:active { transform: translateY(1px); }
html body .esz-page .esz-zoning-tab.active[data-type="prohibited"] { background: #c8322b; color: #fff; }
html body .esz-page .esz-zoning-tab.active[data-type="regulated"] { background: #f1c40f; color: #0a2e1a; }
html body .esz-page .esz-zoning-tab.active[data-type="permitted"] { background: #2d8a5a; color: #fff; }
html body .esz-page .esz-zoning-content { display: flex; flex-direction: column; gap: 0; }
html body .esz-page .esz-zone-item { display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 12px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: transparent; box-shadow: none;
    transition: background-color 150ms, padding-left 200ms cubic-bezier(.16, 1, .3, 1); }
html body .esz-page .esz-zone-item:last-child { border-bottom: 0; }
html body .esz-page .esz-zone-item:hover { background: rgba(255, 255, 255, .06); padding-left: 20px; }
html body .esz-page .esz-zone-bullet { flex: none; width: 10px; height: 10px; padding: 0; border-radius: 50%; overflow: hidden; font-size: 0; color: transparent; background: #e0574f; box-shadow: 0 0 0 4px rgba(224, 87, 79, .2); }
html body .esz-page .esz-zone-item.regulated .esz-zone-bullet { background: #f1c40f; box-shadow: 0 0 0 4px rgba(241, 196, 15, .2); }
html body .esz-page .esz-zone-item.permitted .esz-zone-bullet { background: #5fc48a; box-shadow: 0 0 0 4px rgba(95, 196, 138, .2); }
html body .esz-page .esz-zone-text { font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .88); }
@media (max-width: 640px) { html body .esz-page .esz-zoning-box { padding: 20px; } html body .esz-page .esz-zoning-tabs { grid-template-columns: minmax(0, 1fr); } }

/* Eco-Sensitive Zone Extent, same structure, cleaner: no white box; the areas as a numbered list (the chosen one dark
   with a gold bar), the two measurements as tiles; the panel in the site's type with a gold slider */
html body .esz-page .esz-console-box { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .esz-page .esz-console-grid { display: grid; grid-template-columns: 38.2fr 61.8fr; gap: 32px; align-items: stretch; }
.esz-pick-label { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #5b6b60; }
html body .esz-page .esz-tabs-list { counter-reset: eszt; display: flex; flex-direction: column; gap: 0; border-top: 2px solid #0a2e1a; }
html body .esz-page .esz-tab-btn { counter-increment: eszt; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; width: 100%; padding: 16px 16px 16px 12px; border: 0; border-bottom: 1px solid rgba(10, 46, 26, .12); border-radius: 0; background: transparent; box-shadow: none; text-align: left; cursor: pointer; transition: background-color 150ms; }
html body .esz-page .esz-tab-btn::before { content: counter(eszt, decimal-leading-zero); grid-row: span 2; padding-top: 2px; font: 600 14px/1.2 Roboto, sans-serif; color: rgba(10, 46, 26, .45); }
html body .esz-page .esz-tab-btn::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: #f1c40f; transform: scaleY(0); transition: transform 250ms cubic-bezier(.16, 1, .3, 1); }
html body .esz-page .esz-tab-btn:hover { background: #f2ede1; }
html body .esz-page .esz-tab-btn.active { background: #0a2e1a; border-color: transparent; box-shadow: none; border-radius: 8px; }
html body .esz-page .esz-tab-btn.active::after { transform: scaleY(1); }
html body .esz-page .esz-tab-btn.active::before { color: #f1c40f; }
html body .esz-page .esz-tab-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: #0a2e1a; }
html body .esz-page .esz-tab-desc { margin-top: 2px; font-size: 13px; color: #5b6b60; }
html body .esz-page .esz-tab-btn.active .esz-tab-title { color: #fff; }
html body .esz-page .esz-tab-btn.active .esz-tab-desc { color: rgba(255, 255, 255, .65); }
.esz-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.esz-measures div { padding: 16px 20px; border-radius: 8px; background: #f2ede1; }
.esz-measures dt { font-size: 12px; font-weight: 600; color: #5b6b60; }
.esz-measures dd { margin: 4px 0 0; font: 500 16px/1.35 Roboto, sans-serif; color: #0a2e1a; }
html body .esz-page .esz-radar-screen { display: flex; flex-direction: column; padding: 32px; border: 0; border-radius: 8px; background: #0a2e1a; box-shadow: none; }
html body .esz-page .esz-radar-header { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #8fc9a3; }
html body .esz-page .esz-radar-title { margin: 20px 0 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
html body .esz-page .esz-radar-details { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
html body .esz-page .esz-svg-holder { margin: 20px auto; }
html body .esz-page .esz-slider-container { margin-top: auto; padding: 16px 20px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); }
html body .esz-page .esz-slider-header { color: rgba(255, 255, 255, .7); font-family: 'Roboto', sans-serif; font-size: 14px; }
html body .esz-page .esz-slider-header strong { color: #f1c40f !important; font-size: 22px !important; font-weight: 500; }
html body .esz-page .esz-range-slider { accent-color: #f1c40f; }
@media (max-width: 1000px) { html body .esz-page .esz-console-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .esz-measures { grid-template-columns: minmax(0, 1fr); } html body .esz-page .esz-radar-screen { padding: 20px; } }

/* Intro: the words plain on the page; the green card a labelled strip (sanctuary | buffer | outside). Animation: pressure
   pulses travel in from the outside and fade out inside the buffer, which ripples where they land */
html body .esz-page .esz-intro-grid { grid-template-columns: 61.8fr 38.2fr; gap: 52px; align-items: center; margin-top: 52px; }
html body .esz-page .esz-intro-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .esz-page .esz-intro-card::before { display: none; }
html body .esz-page .esz-intro-title { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.035em; color: #0a2e1a; }
html body .esz-page .esz-intro-title i { display: none; }
html body .esz-page .esz-intro-text, html body .esz-page .esz-intro-text p { font-size: 18px; line-height: 1.75; color: #1f2a22; }
html body .esz-page .esz-pill { padding: 8px 14px; border: 0; border-radius: 999px; background: #f2ede1; color: #0a2e1a; font-size: 14px; font-weight: 600; }
html body .esz-page .eszd { display: block; padding: 32px; border-radius: 8px; background: #0a2e1a; box-shadow: none; min-height: 0; }
html body .esz-page .eszd::before, html body .esz-page .eszd::after { display: none; }
.eszd-strip { display: grid; grid-template-columns: 1fr 1.2fr 1fr; height: 200px; border-radius: 8px; overflow: hidden; }
.eszd-strip > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px; text-align: center; overflow: hidden; }
.eszd-strip b { position: relative; z-index: 1; font-size: 14px; font-weight: 800; line-height: 1.25; color: #fff; }
.eszd-strip small { position: relative; z-index: 1; font-size: 12px; color: rgba(255, 255, 255, .7); }
.eszd-ico { position: relative; z-index: 1; font-size: 26px; margin-bottom: 6px; }
.eszd-core { background: #2d6a4f; }
.eszd-buffer { background: repeating-linear-gradient(135deg, rgba(241, 196, 15, .16) 0 10px, rgba(241, 196, 15, .08) 10px 20px); box-shadow: inset 2px 0 0 #f1c40f, inset -2px 0 0 #f1c40f; }
.eszd-buffer b { color: #f1c40f; }
.eszd-out { background: rgba(255, 255, 255, .06); }
.eszd-caption { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .75); text-align: center; }
/* the pressure pulses and the buffer's ripple */
.eszd-hit { position: absolute; top: 50%; right: -20px; width: 18px; height: 4px; border-radius: 4px; background: #e0574f; opacity: 0; }
.eszd-hit-2 { top: 30%; } .eszd-hit-3 { top: 72%; }
.eszd-wave { position: absolute; right: -40px; top: 50%; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(241, 196, 15, .6); opacity: 0; }
.eszd-wave-2 { top: 28%; }
@media (prefers-reduced-motion: no-preference) {
    .eszd-hit { animation: eszdHit 3.2s cubic-bezier(.4, 0, .6, 1) infinite; }
    .eszd-hit-2 { animation-delay: 1.1s; } .eszd-hit-3 { animation-delay: 2.1s; }
    .eszd-wave { animation: eszdWave 3.2s ease-out infinite; animation-delay: 1.1s; }
    .eszd-wave-2 { animation-delay: 2.2s; }
    @keyframes eszdHit { 0% { right: -20px; opacity: 0; } 15% { opacity: 1; } 55% { right: 100%; opacity: 1; } 70%, 100% { right: 110%; opacity: 0; } }
    @keyframes eszdWave { 0%, 30% { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
}
@media (max-width: 1000px) { html body .esz-page .esz-intro-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .eszd-strip { height: 170px; } .eszd-strip b { font-size: 12px; } .eszd { padding: 20px !important; } }

/* the simulator panel narrower: list and tiles 55%, panel 45%; the rings a little smaller */
@media (min-width: 1001px) { html body .esz-page .esz-console-grid { grid-template-columns: 55fr 45fr; } }
html body .esz-page .esz-svg-holder { transform: scale(.85); margin: 8px auto; }

/* breathing space under section headings */
html body .esz-page .esz-section-title { margin-bottom: 20px !important; }
html body .esz-page .esz-section-title + .wa-title-bar + .esz-section-subtitle { margin-top: -8px; }
.esz-pick-label { margin-top: 12px; }

/* Official Notification Status in one long dark section: the three zones side by side inside a deep-green panel,
   divided by fine lines; light words, the facts in gold; a zone lights up a little under the pointer */
html body .esz-page .esz-status-row { gap: 0; padding: 12px; border-radius: 8px; background: #0a2e1a; }
html body .esz-page .esz-status-card { background: transparent; border-radius: 8px; padding: 24px; }
html body .esz-page .esz-status-card + .esz-status-card { box-shadow: -1px 0 0 rgba(255, 255, 255, .1); }
html body .esz-page .esz-status-card:hover { transform: none; background: rgba(255, 255, 255, .05); }
html body .esz-page .esz-status-badge { background: rgba(95, 196, 138, .16); color: #8fe0b0; }
html body .esz-page .esz-status-badge::before { color: #5fc48a; }
html body .esz-page .esz-status-name { color: #fff; }
html body .esz-page .esz-status-card:hover .esz-status-name { color: #f1c40f; }
html body .esz-page .esz-status-desc p { color: rgba(255, 255, 255, .75); }
html body .esz-page .esz-status-facts { border-top-color: rgba(255, 255, 255, .12); }
html body .esz-page .esz-status-facts dt { color: rgba(255, 255, 255, .6); }
html body .esz-page .esz-status-facts dd { color: #f1c40f; }
@media (max-width: 960px) { html body .esz-page .esz-status-card + .esz-status-card { box-shadow: 0 -1px 0 rgba(255, 255, 255, .1); } }

/* The simulator panel much shorter: no top label row, a smaller title, and the rings small beside the slider in one row;
   the panel no longer stretches to the list's height */
html body .esz-page .esz-console-grid { align-items: start; }
html body .esz-page .esz-radar-screen { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "title title" "text text" "rings slider"; column-gap: 20px; row-gap: 12px; align-items: center; padding: 24px; }
html body .esz-page .esz-radar-header { display: none; }
html body .esz-page .esz-radar-title { grid-area: title; margin: 0; font-size: clamp(18px, 1.5vw, 22px); }
html body .esz-page .esz-radar-details { grid-area: text; font-size: 14px; line-height: 1.6; }
html body .esz-page .esz-svg-holder { grid-area: rings; position: relative; width: 110px !important; height: 110px !important; margin: 0 !important; transform: none; }
html body .esz-page .esz-svg-holder svg { width: 110px; height: 110px; left: 0; top: 0; }
html body .esz-page .esz-slider-container { grid-area: slider; margin: 0; padding: 12px 16px; }
html body .esz-page .esz-slider-header strong { font-size: 18px !important; }
html body .esz-page .esz-radar-screen { min-height: 0 !important; height: auto !important; align-content: start; justify-content: stretch; }

/* Extent drawn to scale (replaces the slider): rings r = core 34 + share of the 66 units to the edge */
html body .esz-page .eszs { display: block; padding: 24px; }
html body .esz-page .eszs .esz-radar-title { margin: 0 0 16px; }
.eszs-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.eszs-map { width: 200px; height: 200px; overflow: visible; }
.eszs-out { fill: none; stroke: rgba(255, 255, 255, .08); stroke-dasharray: 3 4; }
.eszs-band { r: calc(34px + var(--hi) * .66px); fill: rgba(241, 196, 15, .18); stroke: #f1c40f; stroke-width: 2; transition: r 600ms cubic-bezier(.16, 1, .3, 1); }
.eszs-in { r: calc(34px + var(--lo) * .66px); fill: #0a2e1a; stroke: rgba(241, 196, 15, .7); stroke-width: 1.5; stroke-dasharray: 4 3; transition: r 600ms cubic-bezier(.16, 1, .3, 1); }
.eszs-core { fill: #2d6a4f; }
.eszs-map text { font: 700 11px 'Plus Jakarta Sans', sans-serif; fill: #fff; }
.eszs-facts { display: grid; gap: 8px; margin: 0; }
.eszs-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.eszs-facts dt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.eszs-facts dt i { width: 14px; height: 0; border-top: 2px solid #f1c40f; }
.eszs-facts .is-lo dt i { border-top: 2px dashed rgba(241, 196, 15, .7); }
.eszs-facts div:not(.is-hi):not(.is-lo) dt i { display: none; }
.eszs-facts dd { margin: 0; font: 500 20px/1.2 Roboto, sans-serif; color: #f1c40f; }
html body .esz-page .eszs-note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
@media (max-width: 600px) { .eszs-body { grid-template-columns: minmax(0, 1fr); justify-items: center; } .eszs-facts { width: 100%; } }

/* ESZ extent as a range chart (all areas at once, one km axis) */
.eszr { padding: 32px; border-radius: 8px; background: #0a2e1a; color: #fff; }
.eszr-head, .eszr-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2.6fr) minmax(110px, .6fr) minmax(130px, .7fr); gap: 32px; align-items: center; }
.eszr-head { padding: 0 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, .15); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.eszr-axis { display: flex; justify-content: space-between; }
.eszr-axis i { font-style: normal; }
.eszr-row { padding: 20px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; transition: background-color 150ms; }
.eszr-row:hover { background: rgba(255, 255, 255, .05); }
.eszr-name { font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; transition: color 150ms; }
.eszr-row:hover .eszr-name { color: #f1c40f; }
.eszr-bar { display: block; position: relative; }
.eszr-track { position: relative; display: block; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 10%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.eszr-track::before { content: ''; position: absolute; left: 0; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: #5fc48a; }
.eszr-fill { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); min-width: 4px; border-radius: 7px; background: linear-gradient(90deg, rgba(241, 196, 15, .55), #f1c40f); transition: filter 150ms; }
.eszr-row:hover .eszr-fill { filter: brightness(1.12); }
.eszr-labels { position: relative; display: block; height: 18px; margin-top: 6px; }
.eszr-labels b { position: absolute; top: 0; font: 500 13px/1.3 Roboto, sans-serif; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.eszr-labels b:first-child { left: var(--lo); }
.eszr-labels b:last-child { left: var(--hi); transform: translateX(-100%); color: #f1c40f; }
.eszr-area { font: 500 18px/1.3 Roboto, sans-serif; color: #f1c40f; }
.eszr-gaz { display: flex; flex-direction: column; gap: 2px; font: 500 15px/1.3 Roboto, sans-serif; color: #fff; }
.eszr-gaz small { font-size: 13px; color: rgba(255, 255, 255, .6); }
.eszr-note { margin: 16px 12px 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .6); }
@media (max-width: 1000px) {
    .eszr-head { display: none; }
    .eszr-row { grid-template-columns: 1fr 1fr; gap: 12px 20px; }
    .eszr-name, .eszr-bar { grid-column: 1 / -1; }
    .eszr { padding: 20px; }
}

/* ESZ extent as a plain, readable table */
.eszt-lead { margin: 0 0 20px; max-width: 72ch; font-size: 17px; line-height: 1.6; color: #4b5563; }
.eszt-wrap { overflow-x: auto; padding: 8px 24px 12px; border-radius: 8px; background: #f2ede1; }
.eszt { width: 100%; border-collapse: collapse; }
.eszt th { padding: 16px 16px 12px; border-bottom: 2px solid #0a2e1a; text-align: left; vertical-align: bottom; font-size: 14px; font-weight: 700; color: #0a2e1a; }
.eszt th small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #5b6b60; }
.eszt td { padding: 20px 16px; border-bottom: 1px solid rgba(10, 46, 26, .12); font-size: 16px; color: #1f2a22; transition: background-color 150ms; }
.eszt tbody tr:last-child td { border-bottom: 0; }
.eszt td:first-child { font-weight: 700; color: #0a2e1a; }
.eszt td b { font: 500 18px/1.3 Roboto, sans-serif; color: #0a2e1a; }
.eszt td small { display: block; margin-top: 2px; font-size: 13px; color: #5b6b60; }
.eszt-na { font-size: 14px; color: #8a8a7a; font-style: italic; }
.eszt tbody tr:hover td { background: #ece5d3; }

/* the opening card: deep green with a yellow edge, its heading in yellow, the text in white, the pills yellow (as on Parks & Gardens) */
html body .esz-page .esz-intro-grid { align-items: stretch; }
html body .esz-page .esz-intro-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 36px 44px; border-radius: 14px;
    background: radial-gradient(520px 320px at 100% 0%, rgba(16, 185, 129, .22), transparent 70%), linear-gradient(135deg, #0b3d2c 0%, #042f1a 100%); box-shadow: 0 30px 60px -40px rgba(4, 47, 26, .7); }
html body .esz-page .esz-intro-card::before { content: none; display: none; }
html body .esz-page .esz-intro-title { color: #f1c40f; }
html body .esz-page .esz-intro-text, html body .esz-page .esz-intro-text p { color: #fff; }
html body .esz-page .esz-pill { background: rgba(255, 255, 255, .1); color: #f1c40f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html body .esz-page .esz-pill i { color: #f1c40f; }
html body .esz-page .esz-intro-text strong { color: #f1c40f; }