/*
 * Adresynas.lt — "Modernist" design system, implemented as plain CSS.
 *
 * Source of truth for the tokens: the Claude Design project
 * "Adresynas naujas dizainas" (design system `modernist-bedbe2af`). The look
 * is editorial rather than app-like: no rounded corners, no cards floating on
 * a page, no shadows except on the one overlay that needs to sit above text.
 * Structure is carried by rules — 2px between bands, 1px between rows — which
 * is why almost nothing here needs a wrapper element to look right.
 *
 * Still deliberately dependency-free and buildless (§11.2 rule 5). Every page
 * is a document first: the layout is a single column of full-bleed bands, so
 * a page renders correctly with this file missing, and each band's meaning
 * comes from its markup rather than from a grid class.
 */

/* Tokens ------------------------------------------------------------------ */

:root {
    --bg: #f3f2f2;
    --surface: #eae9e9;
    --ink: #201e1d;

    /* The accent is the design doc's default (#c8102e), not the design
       system's stock red — the screens override it and that override is the
       brand. The tonal steps are derived, so retuning `--accent` retunes the
       whole ramp. */
    --accent: #c8102e;
    --accent-100: color-mix(in srgb, var(--accent) 12%, white);
    --accent-600: color-mix(in srgb, var(--accent) 85%, black);
    --accent-700: color-mix(in srgb, var(--accent) 68%, black);
    --accent-800: color-mix(in srgb, var(--accent) 52%, black);

    --n-100: #f8f4f4;
    --n-200: #eae7e7;
    --n-300: #d7d3d3;
    --n-400: #bab6b6;
    --n-500: #9b9797;
    --n-600: #7d7979;
    --n-700: #605d5d;
    --n-800: #444141;
    --n-900: #2d2b2b;

    /* Two weights of rule, and only two: 2px separates bands, 1px separates
       rows inside one. Anything else reads as a third level that is not there. */
    --divider: color-mix(in srgb, var(--ink) 40%, transparent);
    --rule: var(--n-300);

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Band padding is a variable rather than a media query repeated 30 times. */
    --pad-x: 20px;
    --pad-y: 24px;

    --shadow-md: 0 3px 10px color-mix(in srgb, var(--n-900) 16%, transparent);
}

@media (min-width: 900px) {
    :root {
        --pad-x: 48px;
        --pad-y: 40px;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font: 400 16px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}

main { display: block; }

a { color: var(--accent-700); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Type -------------------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; }

h1 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.02;
    letter-spacing: -.025em;
}

/* Section headings are labels, not titles — the numbers below them are the
   thing being read. */
h2 {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

h3 {
    margin: 22px 0 12px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

.kicker {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}

.lead {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--n-700);
    max-width: 70ch;
}

.note {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--n-800);
    max-width: 76ch;
}

.muted { color: var(--n-700); font-size: 13px; font-weight: 400; }
.absent { font-style: italic; color: var(--n-600); font-weight: 400; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: .5rem; top: .5rem; z-index: 20;
    padding: .5rem .75rem;
    background: #fff;
    border: 2px solid var(--ink);
}

@media (min-width: 900px) {
    h1 { font-size: 52px; line-height: 1; margin-bottom: 10px; }
    h2 { font-size: 13px; margin-bottom: 24px; }
    .lead { font-size: 18px; }
    .note { font-size: 15px; }
}

/* Bands ------------------------------------------------------------------- */

/*
 * The whole page is a stack of full-bleed bands. A band owns its padding and
 * the 2px rule under it; nothing else in the page draws horizontal structure.
 */
.band,
.dossier-section {
    padding: var(--pad-y) var(--pad-x);
    border-bottom: 2px solid var(--divider);
}

.band-tight { padding-top: 22px; padding-bottom: 20px; }

/* Two bands side by side on a wide screen, stacked on a narrow one. The 2px
   gap over a divider-coloured background draws the vertical rule, so neither
   child needs to know whether it is the left or the right one. */
.band-split {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 2px solid var(--divider);
}
.band-split > * { border-bottom: 2px solid var(--divider); }
.band-split > *:last-child { border-bottom: 0; }

@media (min-width: 900px) {
    .band-split {
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        background: var(--divider);
    }
    .band-split > * { background: var(--bg); border-bottom: 0; }
    .band-split-aside { grid-template-columns: 1fr 400px; }
}

/* Header and footer -------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 16px;
    min-height: 56px;
    padding: 10px var(--pad-x);
    border-bottom: 2px solid var(--divider);
}

.wordmark {
    margin: 0;
    margin-right: auto;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: .01em;
}
.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover { color: inherit; text-decoration: none; }
.wordmark-tld { color: var(--accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* In the header the form is a second row on a phone and an inline field on a
   desktop — the same markup either way. */
.site-header .address-search { flex: 1 1 100%; margin-top: 10px; }

@media (min-width: 900px) {
    .site-header { min-height: 76px; gap: 0 40px; padding-block: 0; }
    .wordmark { font-size: 19px; }
    .site-nav { gap: 32px; font-size: 12px; font-weight: 600; }
    .site-header .address-search { flex: 1 1 auto; max-width: 560px; margin-top: 0; }
}

.site-footer {
    padding: 24px var(--pad-x) 32px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--n-700);
}
.site-footer p { margin: 0; max-width: 62ch; }
.site-footer p + p { margin-top: 12px; }

@media (min-width: 900px) {
    .site-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 32px var(--pad-x) 40px;
        font-size: 14px;
    }
    .site-footer p + p { margin-top: 0; }
}

/* Search ------------------------------------------------------------------ */

.address-search {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.address-search label {
    flex: 1 1 100%;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-700);
}

.address-search input {
    flex: 1 1 10rem;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: 400 16px/1 var(--font);
    -webkit-appearance: none;
    appearance: none;
}
.address-search input:focus-visible { outline-offset: 0; }

.address-search button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    border: 2px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    font: 700 13px var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.address-search button:hover { background: var(--accent-600); border-color: var(--accent-600); }
.address-search button:active { background: var(--accent-700); border-color: var(--accent-700); }

/* The home page's search is the page's primary action, so it gets the larger
   treatment: a stacked field and button on a phone, one row on a desktop. */
.address-search-lg input { flex: 1 1 100%; height: 52px; font-size: 17px; border-right: 2px solid var(--ink); }
.address-search-lg button { flex: 1 1 100%; height: 52px; margin-top: 10px; font-size: 15px; text-align: left; }

@media (min-width: 900px) {
    /* Capped, not full-bleed: a 1440px-wide input reads as a page-width rule
       rather than as a field, and the eye has to travel to find the button. */
    .address-search-lg { max-width: 760px; }
    .address-search-lg input { flex: 1 1 auto; height: 60px; font-size: 18px; border-right: 0; }
    .address-search-lg button { flex: 0 0 auto; height: 60px; margin-top: 0; padding: 0 28px; font-size: 16px; }
}

/* Autocomplete island (task 27). The panel is the only overlay in the design
   and the only thing with a shadow — it has to read as "above the page". */
.suggestions-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 2px;
}
.suggestions-panel:empty { display: none; }

.suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    max-height: 22rem;
    overflow-y: auto;
}
.suggestions li { border-bottom: 1px solid var(--rule); }
.suggestions li:last-child { border-bottom: 0; }
.suggestions a {
    display: block;
    min-height: 44px;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
}
.suggestions a:hover,
.suggestions li.is-active a { background: var(--accent-100); color: inherit; text-decoration: none; }
.suggestion-address { display: block; font-size: 16px; font-weight: 700; }
.suggestion-context { display: block; font-size: 12px; color: var(--n-700); }

.suggestions-message {
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    line-height: 1.5;
}

/* Inside the results page the same fragment is inline content, not an
   overlay: no shadow, no border, no absolute positioning. */
.suggestions-inline .suggestions,
.suggestions-inline .suggestions-message {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-inline: 0;
    max-height: none;
}
.suggestions-inline .suggestions { border-top: 2px solid var(--divider); }
.suggestions-inline .suggestions a { padding: 14px 0; }
.suggestions-inline .suggestion-address { font-size: 19px; }
.suggestions-inline .suggestion-context { font-size: 13px; margin-top: 3px; }
.suggestions-inline .suggestions-message { margin-bottom: 20px; font-size: 15px; color: var(--n-800); }

/* Statement blocks -------------------------------------------------------- */

/*
 * A callout is a bordered statement the reader must not skim past. The
 * accent variant is reserved for the §11.4 whole-building scope banner —
 * it is the one sentence on the page that changes what every number below
 * it means.
 */
.callout {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 2px solid var(--ink);
    font-size: 14px;
    line-height: 1.5;
    max-width: 76ch;
}

.scope-banner {
    margin: 0;
    padding: 14px 16px;
    border: 2px solid var(--accent);
    background: var(--accent-100);
    color: var(--accent-800);
    font-size: 14px;
    line-height: 1.5;
    max-width: 76ch;
}

@media (min-width: 900px) {
    .callout, .scope-banner { padding: 16px 18px; font-size: 15px; }
}

/* The band that carries only a banner sits directly under the header. */
.band-banner { padding-bottom: 0; border-bottom: 0; }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
}
.tag-solid { background: var(--accent); color: #fff; }
.tag-outline { border: 2px solid var(--ink); }

/* Buttons ----------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    border: 2px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: 700 12px/1.2 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-block { display: flex; width: 100%; margin-top: 20px; }

@media (min-width: 900px) {
    .btn { font-size: 13px; }
    .btn-block { display: inline-flex; width: auto; margin-top: 24px; }
}

/* Numbers ----------------------------------------------------------------- */

/*
 * The headline figures. Two per row on a phone, four on a desktop; the 2px
 * gap over a divider background draws every internal rule at once, which is
 * why the cells carry no borders of their own.
 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--divider);
    border-bottom: 2px solid var(--divider);
}
.stat { background: var(--bg); padding: 16px var(--pad-x); }
.stat-value {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}
.stat-value .unit { font-size: .55em; }
.stat-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-700);
}
.stat-value .absent { font-size: 14px; letter-spacing: 0; }

@media (min-width: 900px) {
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
    .stat { padding: 26px 32px; }
    .stat-value { font-size: 40px; margin-bottom: 6px; }
    .stat-label { font-size: 12px; }
}

/* Facts ------------------------------------------------------------------- */

/*
 * A fact row is a label and either a value or a stated absence — never a
 * blank cell (§11.4). Stacked on a phone so a long Lithuanian label never
 * squeezes its value into a two-character column.
 */
.facts {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    border-top: 2px solid var(--divider);
}
.facts dt {
    padding: 11px 0 0;
    font-size: 14px;
    color: var(--n-700);
}
.facts dd {
    margin: 0;
    padding: 0 0 11px;
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
}
.facts .absent { font-weight: 400; }

@media (min-width: 600px) {
    .facts { grid-template-columns: minmax(0, 1fr) auto; }
    .facts dt { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
    .facts dd { padding: 12px 0; text-align: right; }
}

.disputed { display: block; font-size: 12px; font-weight: 400; color: var(--accent-700); }

/* Energy scale ------------------------------------------------------------ */

.energy-scale {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    max-width: 900px;
}
.energy-scale li {
    padding: 10px 0;
    border: 2px solid var(--n-400);
    text-align: center;
    font-weight: 800;
    font-size: 11px;
    color: var(--n-500);
}
.energy-scale .is-current {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

@media (min-width: 900px) {
    .energy-scale li { padding: 14px 0; font-size: 18px; }
}

/* Bar charts -------------------------------------------------------------- */

.bars { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bar {
    display: grid;
    grid-template-columns: 96px 1fr 44px;
    gap: 8px;
    align-items: center;
}
.bar-label { font-size: 12px; color: var(--n-700); }
.bar-track { height: 14px; background: var(--n-300); }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.bar-count { font-size: 12px; font-weight: 700; text-align: right; }

/* The energy-class chart keys on a one- or three-character class, so its
   label column is narrow and the class itself carries the weight. */
.bars-keyed .bar { grid-template-columns: 40px 1fr 44px; }
.bars-keyed .bar-label { font-size: 15px; font-weight: 800; color: var(--ink); }

@media (min-width: 900px) {
    .bars { gap: 10px; }
    .bar { grid-template-columns: 130px 1fr 56px; gap: 12px; }
    .bar-label { font-size: 14px; }
    .bar-track { height: 18px; }
    .bar-count { font-size: 14px; }
    .bars-keyed .bar { grid-template-columns: 40px 1fr 56px; }
}

/* Row lists --------------------------------------------------------------- */

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--divider);
}
.rows > li { border-bottom: 1px solid var(--rule); }
.rows > li:last-child { border-bottom: 0; }

/*
 * The row itself is styled by position, not by a class on the anchor: these
 * lists are plain `<a href>` links, which is also what the aggregate page
 * tests grep for.
 */
.rows a,
.row-static {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
    min-height: 52px;
    padding: 13px 0;
    color: inherit;
    text-decoration: none;
}
.rows a:hover { background: var(--accent-100); color: inherit; text-decoration: none; }
.row-static { color: var(--n-600); }

.row-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.row-meta { font-size: 12px; font-weight: 400; color: var(--n-700); }
.row-static .row-name { color: var(--n-600); }

@media (min-width: 900px) {
    .rows a, .row-static { padding: 14px 0; }
    .row-name { font-size: 18px; }
    .row-meta { font-size: 13px; }
    /* Two columns of rows, each column keeping its own rules. */
    .rows-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 0; }
    .rows-2col > li:nth-child(-n+2) { border-top: 2px solid var(--divider); }
    .rows-2col > li:last-child { border-bottom: 1px solid var(--rule); }
}

/* A grid of place links — the home page's settlements. One column of rules on
   a phone, a four-up grid on a desktop. */
.link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--rule);
    border-top: 2px solid var(--divider);
    border-bottom: 1px solid var(--rule);
}
.link-grid a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-height: 52px;
    padding: 14px 0;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}
.link-grid a:hover { background: var(--accent-100); color: inherit; text-decoration: none; }
.link-grid .row-meta { font-size: 13px; }

@media (min-width: 900px) {
    .link-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        background: var(--divider);
        border-top: 0;
        border-bottom: 0;
    }
    .link-grid a { padding: 18px 20px; font-size: 18px; }
}

/* A–Ž street index. Each key is a 44px hit target with its street count under
   it, so a reader can see where the streets actually are before clicking. */
/* Rules on the cells, not a gap over a coloured container: the last row is
   usually partly filled, and a container background would draw a phantom
   empty cell after the final letter. */
.letter-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--divider);
    border-left: 2px solid var(--divider);
}
.letter-index li {
    border-right: 2px solid var(--divider);
    border-bottom: 2px solid var(--divider);
}
.letter-index a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}
.letter-index a:hover { background: var(--accent-100); color: inherit; text-decoration: none; }
.letter-index a[aria-current="page"] { background: var(--accent); color: #fff; }
.letter-index-key { font-size: 17px; font-weight: 800; line-height: 1; }
.letter-index-count { font-size: 11px; color: var(--n-700); }
.letter-index a[aria-current="page"] .letter-index-count { color: #fff; }

/* Feature cells — the three "what this site is" panels on the home page. */
.cells {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--divider);
    border-bottom: 2px solid var(--divider);
}
.cells > li { background: var(--bg); padding: 24px var(--pad-x) 28px; }
.cells p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-800); }

@media (min-width: 900px) {
    .cells { grid-template-columns: repeat(3, 1fr); }
    .cells > li { padding: 36px 32px 40px; }
    .cells p { font-size: 17px; }
}

/* Tables ------------------------------------------------------------------ */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
thead th {
    padding: 8px 12px 8px 0;
    border-bottom: 2px solid var(--divider);
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-700);
}
tbody th, td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}
tbody th { font-weight: 700; }

/* Breadcrumbs ------------------------------------------------------------- */

.breadcrumbs {
    padding: 0 var(--pad-x);
    border-bottom: 2px solid var(--divider);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--n-700);
    overflow-x: auto;
}
.breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--n-500); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

@media (min-width: 900px) {
    .breadcrumbs { font-size: 12px; }
    .breadcrumbs ol { gap: 10px; min-height: 0; padding: 14px 0; }
}

/* Source note ------------------------------------------------------------- */

/*
 * Every section carries its provenance (§11.4). It is set quietly — small,
 * muted, under a hairline — because it must be present on every section
 * without competing with the facts above it.
 */
.section-source {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--n-700);
}
.section-source dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    max-width: 1000px;
}
.section-source dt { font-weight: 700; }
.section-source dd { margin: 0 0 8px; }
.section-source dd:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
    .section-source dl { grid-template-columns: 200px 1fr; gap: 4px 24px; }
    .section-source dd { margin: 0; }
}

/* Forms ------------------------------------------------------------------- */

.correction-form { max-width: 40rem; }
.correction-form fieldset {
    margin: 0 0 20px;
    padding: 16px;
    border: 2px solid var(--ink);
}
.correction-form legend {
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}
.correction-form label { display: block; margin: 0 0 6px; font-size: 14px; }
.correction-form fieldset label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    font-size: 15px;
}
.correction-form input[type="text"],
.correction-form textarea,
.correction-form select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: #fff;
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
}
.correction-form textarea { resize: vertical; }
.correction-form p { margin: 0 0 16px; }
.correction-form button { margin-top: 4px; }

.form-errors {
    margin: 0 0 20px;
    padding: 14px 16px 14px 34px;
    border: 2px solid var(--accent);
    background: var(--accent-100);
    color: var(--accent-800);
    font-size: 14px;
}

.correction-link { margin: 20px 0 0; font-size: 14px; }

/* Page-specific compositions ----------------------------------------------- */

/* The home page's hero: the search field is the page's whole purpose, so the
   heading and the field get the room a landing page normally spends on
   decoration. */
.band-hero { padding-bottom: 32px; }
.hero-title { font-size: 36px; line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
.lead-hero { font-size: 16px; color: var(--n-800); margin-bottom: 24px; max-width: 54ch; }

@media (min-width: 900px) {
    .band-hero { padding-top: 56px; padding-bottom: 48px; }
    .hero-title { font-size: 62px; line-height: .96; letter-spacing: -.02em; max-width: 15ch; text-wrap: balance; margin-bottom: 20px; }
    .lead-hero { font-size: 19px; margin-bottom: 36px; }
}

/* Map ---------------------------------------------------------------------- */

/*
 * A tile mosaic behind a fixed frame. The mosaic is absolutely positioned so
 * that the address point lands at the frame's centre — `calc(50% - Npx)`,
 * with N written by the server — and the marker is simply drawn at 50%/50%.
 *
 * The frame must never exceed 512px in either axis: StaticMapFactory's 3×3
 * grid guarantees exactly 256px of tile around the point, and a wider frame
 * would show the background through the edges.
 */
.hero-with-map { border-bottom: 2px solid var(--divider); }
.hero-with-map > .band { border-bottom: 0; }

.map-panel { padding: 0 var(--pad-x) var(--pad-y); }

.map { margin: 0; }
.map-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 512px;
    height: 220px;
    background: var(--n-200);
    border: 2px solid var(--ink);
}
.map-static { position: absolute; inset: 0; }
.map-static[hidden] { display: none; }
.map-tiles { position: absolute; }
.map-tiles img { position: absolute; max-width: none; }

/* The interactive layer sits over the static one and is empty — and so
   invisible — until the island fills it. */
.map-canvas { position: absolute; inset: 0; }
.map-canvas:not(:empty) { background: var(--n-200); }
.leaflet-container { width: 100%; height: 100%; font: inherit; background: var(--n-200); }
.leaflet-container a { color: var(--accent-700); }

/* Leaflet's controls, in the design system's terms: square, 2px, ink. */
.leaflet-touch .leaflet-bar,
.leaflet-bar {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
    border-radius: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font);
    font-weight: 800;
}
.leaflet-bar a:hover { background: var(--accent-100); }
.leaflet-bar a + a { border-top: 1px solid var(--rule); }

/* The island's marker. Same square as the static map's, so the swap from one
   to the other does not move or restyle the thing the reader is looking at.
   Selector is `.map-pin` alone on purpose: a divIcon's `className` REPLACES
   Leaflet's `leaflet-div-icon`, so requiring both matches nothing — and with
   that class gone there is no default white box left to override either. */
.map-pin {
    background: var(--accent);
    border: 0;
    box-shadow: 0 0 0 3px #fff, 0 1px 5px color-mix(in srgb, var(--n-900) 55%, transparent);
}

/* Square, not a teardrop: the marker states a coordinate, and the design
   system has no rounded corners anywhere else. */
.map-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: var(--accent);
    box-shadow: 0 0 0 3px #fff, 0 1px 5px color-mix(in srgb, var(--n-900) 55%, transparent);
}

.map-credit {
    margin-top: 8px;
    max-width: 512px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--n-700);
}

@media (min-width: 900px) {
    /* The design's hero row: heading on the left, map on the right, one 2px
       rule between them. */
    .hero-with-map {
        display: grid;
        grid-template-columns: 1fr 480px;
        gap: 2px;
        background: var(--divider);
    }
    .hero-with-map > * { background: var(--bg); }
    .map-panel { padding: 32px 32px 32px 30px; }
    .map-frame { height: 320px; }
}

/* First-in-block variants. A callout that opens a section has nothing above
   it to be separated from. */
.callout-first, .note-first { margin-top: 0; }
.callout-accent { border-color: var(--accent); background: var(--accent-100); color: var(--accent-800); }

.band .scope-banner { margin-top: 18px; }

.energy-scale + .facts { margin-top: 16px; }

/* Two columns inside one section — the condition facts beside the sentence
   that says what their absence does and does not mean. */
.section-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 900px) {
    .section-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/* Wide tables scroll inside their own box rather than widening the page. */
.table-scroll { overflow-x: auto; }

/* The building selector's options. Not "cards": no border, no elevation —
   the kicker and the fact table's own rules are enough separation. */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
}
.card-actions .correction-link { margin: 0; }

@media (min-width: 900px) {
    .card-grid { grid-template-columns: 1fr 1fr; gap: 32px 48px; }
}