:root {
    --bg: #f3efe4;
    --bg-strong: #efe4d0;
    --surface: rgba(255, 252, 246, 0.8);
    --surface-strong: rgba(255, 250, 240, 0.96);
    --surface-dark: #16332f;
    --line: rgba(19, 49, 43, 0.12);
    --text: #18322d;
    --muted: #5e716b;
    --accent: #d5612a;
    --accent-strong: #a8451b;
    --accent-soft: rgba(213, 97, 42, 0.14);
    --mint: #2f7f69;
    --warning: #b17310;
    --danger: #b44239;
    --shadow: 0 24px 60px rgba(24, 50, 45, 0.12);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(213, 97, 42, 0.18), transparent 28%),
        radial-gradient(circle at right 20%, rgba(47, 127, 105, 0.14), transparent 24%),
        linear-gradient(180deg, #f7f2e8 0%, #efe6d7 100%);
}

.map-only-shell {
    background: #d9e5de;
}

.map-only-stage {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.ambient {
    position: fixed;
    inset: auto;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.4;
}

.ambient-one {
    top: 6rem;
    right: -8rem;
    width: 22rem;
    height: 22rem;
    background: rgba(213, 97, 42, 0.18);
}

.ambient-two {
    left: -5rem;
    bottom: 10rem;
    width: 16rem;
    height: 16rem;
    background: rgba(47, 127, 105, 0.16);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 2rem;
    backdrop-filter: blur(18px);
    background: rgba(247, 242, 232, 0.78);
    border-bottom: 1px solid rgba(24, 50, 45, 0.08);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.brand-large {
    margin-bottom: 2rem;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff8f0;
    background: linear-gradient(135deg, var(--surface-dark), var(--mint));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-large .brand-copy small {
    max-width: 24rem;
    line-height: 1.35;
}

.brand-copy strong,
.hero-panel h1,
.workspace-header h2,
.auth-aside h1,
.auth-card h2,
.metric-card strong,
.overlay-card strong {
    font-family: "Space Grotesk", sans-serif;
}

.brand-copy small,
.panel-copy,
.hero-copy,
.metric-card p,
.plain-list,
.auth-links,
.field-error,
.message {
    color: var(--muted);
}

.topnav,
.topbar-actions,
.status-pills,
.form-actions,
.stack-actions,
.auth-links {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.topnav a {
    font-size: 0.95rem;
    color: var(--muted);
}

.page-grid {
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
}

.hero-panel,
.workspace-panel,
.info-strip,
.auth-card,
.auth-aside {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hero-panel,
.workspace-panel {
    padding: 2rem;
}

.hero-panel {
    overflow: hidden;
}

.eyebrow {
    display: inline-flex;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    color: var(--mint);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel h1 {
    margin: 1rem 0 0.8rem;
    max-width: 15ch;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.95;
}

.hero-copy {
    max-width: 52rem;
    font-size: 1.05rem;
}

.hero-metrics,
.stats-grid,
.info-strip {
    display: grid;
    gap: 1rem;
}

.hero-metrics {
    margin-top: 1.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.mini-stat,
.notice-card,
.panel-block,
.overlay-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(24, 50, 45, 0.08);
    background: var(--surface-strong);
}

.metric-card {
    padding: 1.2rem;
}

.metric-label,
.overlay-label,
.mini-stat span,
.user-chip-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.workspace-header,
.workspace-layout {
    display: grid;
    gap: 1.25rem;
}

.workspace-header {
    grid-template-columns: 1fr auto;
    align-items: end;
    margin-bottom: 1rem;
}

.workspace-layout {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
}

.control-panel {
    display: grid;
    gap: 1rem;
}

.panel-block,
.notice-card {
    padding: 1.1rem;
}

.filter-form,
.auth-form {
    display: grid;
    gap: 0.9rem;
}

.filter-form label,
.auth-form label {
    display: grid;
    gap: 0.38rem;
}

.filter-form span,
.auth-form span {
    font-size: 0.92rem;
    font-weight: 600;
}

.auth-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
}

.auth-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0.22rem 0 0;
    padding: 0;
    accent-color: var(--accent-strong);
}

.auth-checkbox > span:last-child {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
}

.form-hint {
    margin: 0;
}

input,
button {
    font: inherit;
}

input {
    width: 100%;
    border: 1px solid rgba(24, 50, 45, 0.16);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.92);
    color: var(--text);
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(213, 97, 42, 0.14);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 0.86rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff7f2;
    box-shadow: 0 16px 30px rgba(213, 97, 42, 0.22);
}

.button-secondary {
    background: rgba(255,255,255,0.72);
    color: var(--text);
    border: 1px solid rgba(24, 50, 45, 0.1);
}

.button-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px dashed rgba(24, 50, 45, 0.2);
}

.button-block {
    width: 100%;
}

.registration-choice-actions {
    display: grid;
    gap: 0.65rem;
}

.inline-form {
    margin: 0;
}

.user-chip {
    display: grid;
    gap: 0.1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.55);
}

.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: rgba(255,255,255,0.76);
    color: var(--muted);
    font-size: 0.85rem;
}

.pill-live {
    background: rgba(47, 127, 105, 0.14);
    color: var(--mint);
}

.map-panel {
    position: relative;
    min-height: 44rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(24, 50, 45, 0.1);
}

.map-root {
    width: 100%;
    height: 100%;
    min-height: 44rem;
    background: linear-gradient(180deg, #dce8e6 0%, #e9dec8 100%);
}

.map-root-full {
    min-height: 100vh;
}

.map-toolbar {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 3;
}

/* Desktop / default: hamburger + stack top bar omitted; tool grid stays in stack body. */
.map-toolbar-menu-button,
.map-toolbar-stack-head {
    display: none;
}

.map-toolbar-panel {
    display: contents;
}

.map-toolbar-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 5.15rem;
    padding: 0.8rem 0.42rem 0.8rem 0.3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(13, 28, 25, 0.74);
    box-shadow: 0 24px 60px rgba(9, 23, 21, 0.24);
    backdrop-filter: blur(20px);
}

.map-toolbar-stack-body {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    width: 100%;
}

.map-toolbar-brand-tooltip {
    display: grid;
    justify-items: center;
    width: 100%;
}

.brand-mark-toolbar {
    width: 3.1rem;
    height: 3.1rem;
    margin: 0 auto 0.1rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    line-height: 1.05;
    text-align: center;
}

.brand-mark-button {
    appearance: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.brand-mark-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.brand-mark-button:disabled:hover,
.brand-mark-button:disabled:focus-visible {
    filter: none;
    transform: none;
    box-shadow: none;
}

.brand-mark-button:hover,
.brand-mark-button.is-open {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.22);
}

.toolbar-button {
    display: grid;
    width: 100%;
    justify-self: center;
    text-align: center;
    justify-items: center;
    gap: 0.38rem;
    padding: 0.7rem 0.3rem;
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8f4eb;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.toolbar-button:hover,
.toolbar-button.is-open {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.toolbar-button.is-active {
    background: rgba(213, 97, 42, 0.26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.toolbar-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.toolbar-icon-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center;
}

.toolbar-icon-image-basemap {
    transform: scale(1.55);
}

.toolbar-icon-image-layers {
    transform: scale(1.2);
}

.toolbar-icon-image-legend {
    transform: scale(1.18);
}

.toolbar-icon-image-info {
    transform: scale(1.16);
}

.toolbar-icon-pin {
    overflow: visible;
}

.toolbar-pin-mark {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 999px 999px 999px 0;
    background: #ffca3a;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.toolbar-pin-mark::after {
    content: "";
    position: absolute;
    inset: 0.32rem;
    border-radius: 999px;
    background: rgba(13, 28, 25, 0.88);
}

.toolbar-text {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.15;
}

.map-popup-shell {
    position: absolute;
    top: 1.25rem;
    left: 7rem;
    z-index: 6;
    pointer-events: none;
}

.map-popup-panel {
    width: min(22rem, calc(100vw - 9rem));
    max-height: calc(100vh - 2.5rem);
    display: none;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(13, 28, 25, 0.82);
    box-shadow: 0 24px 60px rgba(9, 23, 21, 0.24);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    overflow: hidden;
}

.map-popup-panel.is-open {
    display: grid;
}

.map-popup-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: #f8f4eb;
}

#layer-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

#legend-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

#l4dc-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

.l4dc-panel-body {
    display: grid;
    gap: 0.85rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.3rem;
}

.l4dc-feature-group {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
}

.l4dc-group-head {
    display: grid;
    gap: 0.2rem;
}

.l4dc-group-head strong {
    color: #f8f4eb;
    font-size: 0.98rem;
}

.l4dc-group-head small {
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.8rem;
    line-height: 1.4;
}

.popup-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #f8f4eb;
    font: inherit;
    cursor: pointer;
}

.brand-compact .brand-copy strong,
.legend-copy strong,
.layer-toggle-copy strong {
    color: #f8f4eb;
}

.brand-compact .brand-copy small,
.banner-note,
.legend-copy small,
.layer-toggle-copy small,
.banner-label {
    color: rgba(241, 234, 220, 0.72);
}

.banner-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.banner-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.banner-select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    background: rgba(247, 242, 232, 0.94);
    color: var(--text);
    font: inherit;
}

.land-location-form,
.land-address-results,
.land-location-summary {
    display: grid;
    gap: 0.65rem;
}

.land-address-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.land-address-input {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 0.82rem 0.9rem;
    background: rgba(247, 242, 232, 0.94);
    color: var(--text);
    font: inherit;
}

.land-picker-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
}

.land-location-button,
.land-address-result-button,
.land-context-button {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 0.78rem 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    color: #f8f4eb;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.land-location-button:hover,
.land-address-result-button:hover,
.land-context-button:hover,
.land-location-button.is-active {
    background: rgba(255, 202, 58, 0.2);
    border-color: rgba(255, 202, 58, 0.45);
}

.land-location-button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
    filter: grayscale(0.35);
}

.land-location-button:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.disabled-button-tooltip {
    position: relative;
    display: block;
}

.disabled-button-tooltip .land-location-button {
    width: 100%;
}

.disabled-button-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 15rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(10, 22, 20, 0.96);
    color: #f8f4eb;
    box-shadow: 0 8px 22px rgba(9, 23, 21, 0.34);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: normal;
    z-index: 20;
}

.disabled-button-tooltip[data-tooltip]:hover::after,
.disabled-button-tooltip[data-tooltip]:focus-visible::after,
.disabled-button-tooltip[data-tooltip]:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.land-location-button-primary {
    background: rgba(255, 202, 58, 0.92);
    color: #1d1b14;
}

.land-location-button-muted {
    color: rgba(248, 244, 235, 0.76);
}

.land-address-result-button {
    display: grid;
    gap: 0.25rem;
    text-align: left;
}

.land-address-result-button small,
.land-location-summary small {
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.78rem;
    line-height: 1.35;
}

.land-location-summary {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 202, 58, 0.12);
    border: 1px solid rgba(255, 202, 58, 0.28);
    color: #f8f4eb;
}

.suitability-condition-list {
    display: grid;
    gap: 0.45rem;
}

.suitability-condition-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
    color: rgba(248, 244, 235, 0.86);
    font-size: 0.92rem;
}

.suitability-condition-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent);
}

.banner-note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.map-actions {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3;
    display: flex;
    gap: 0.8rem;
}

.map-action-button {
    min-width: 7.5rem;
    padding-inline: 1.35rem;
}

.account-menu-panel {
    position: absolute;
    top: 4.75rem;
    right: 1.25rem;
    left: auto;
    z-index: 4;
    width: min(18.5rem, calc(100vw - 2.5rem));
    grid-template-rows: auto auto;
}

.account-menu-body {
    display: grid;
    gap: 0.65rem;
}

.account-user-summary {
    display: grid;
    gap: 0.22rem;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8f4eb;
}

.account-user-summary span {
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.account-user-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
}

.account-menu-form {
    margin: 0;
}

.account-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 0.72rem 0.9rem;
    background: rgba(255, 255, 255, 0.09);
    color: #f8f4eb;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.account-menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.account-menu-item-primary {
    background: rgba(255, 202, 58, 0.92);
    border-color: rgba(255, 202, 58, 0.72);
    color: #1d1b14;
}

.account-menu-item-primary:hover {
    background: rgba(255, 214, 91, 0.98);
    border-color: rgba(255, 222, 120, 0.86);
}

.account-contact-email {
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 202, 58, 0.28);
    border-radius: 14px;
    background: rgba(255, 202, 58, 0.12);
    color: #ffe29a;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.layer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.7rem 0.85rem;
}

.layer-toggle-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 auto;
}

.layer-toggle-main-locked {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.42rem;
    min-width: 0;
}

.layer-toggle-main-locked .layer-toggle-copy {
    opacity: 0.78;
}

.layer-toggle-main-locked .layer-toggle-copy strong {
    color: rgba(248, 244, 235, 0.82);
}

.layer-locked-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 1.45rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid rgba(255, 210, 82, 0.28);
    border-radius: 999px;
    background: rgba(255, 204, 64, 0.12);
    color: rgba(255, 222, 120, 0.96);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.03);
}

.layer-toggle-expandable {
    gap: 0.65rem;
}

.layer-toggle input {
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.layer-expand-toggle {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8f4eb;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.layer-expand-icon {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 160ms ease;
}

.layer-expand-toggle[aria-expanded="false"] .layer-expand-icon {
    transform: rotate(-45deg) translateY(1px);
}

.layer-child-list {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem 0 0.1rem 1rem;
}

.layer-child-list:not(.is-expanded) {
    display: none;
}

.layer-child-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(248, 244, 235, 0.86);
    font-size: 0.9rem;
}

.layer-child-toggle input {
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.legend-list {
    display: grid;
    gap: 0.7rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.3rem;
}

.legend-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.legend-item-data-center {
    grid-template-columns: 1fr;
    gap: 0;
}

.legend-swatch {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.legend-item > .legend-swatch {
    cursor: pointer;
}

.legend-swatch-status[data-style-layer-id],
.legend-line-swatch[data-style-layer-id] {
    cursor: pointer;
}

.legend-item > .legend-swatch:focus-visible {
    outline: 2px solid rgba(255, 202, 58, 0.95);
    outline-offset: 3px;
}

.legend-swatch-status[data-style-layer-id]:focus-visible,
.legend-line-swatch[data-style-layer-id]:focus-visible {
    outline: 2px solid rgba(255, 202, 58, 0.95);
    outline-offset: 3px;
}

.legend-swatch-boundary {
    width: 1.18rem;
    height: 0.82rem;
    border-radius: 0.24rem;
    background: transparent;
    border: 1.6px solid rgba(248, 244, 235, 0.96);
    box-shadow: none;
}

.legend-swatch-land-parcels {
    width: 1.18rem !important;
    height: 0.82rem !important;
    border-radius: 0.24rem !important;
    background: transparent !important;
    border: 1.8px solid #ffff00 !important;
    box-shadow: none !important;
}

.legend-style-panel {
    position: absolute;
    top: 4.25rem;
    left: min(30rem, calc(100vw - 24rem));
    width: min(21rem, calc(100vw - 8rem));
    z-index: 5;
    pointer-events: auto;
}

.legend-style-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: rgba(13, 28, 25, 0.94);
    box-shadow: 0 26px 70px rgba(9, 23, 21, 0.34);
    color: #f8f4eb;
    backdrop-filter: blur(18px);
}

.legend-style-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.legend-style-head div {
    display: grid;
    gap: 0.2rem;
}

.legend-style-head small {
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.78rem;
}

.legend-style-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.6rem;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.legend-style-preview-swatch {
    display: inline-block;
}

.legend-style-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    color: rgba(248, 244, 235, 0.88);
    font-size: 0.88rem;
}

.legend-style-row[hidden],
.legend-style-check[hidden] {
    display: none !important;
}

.legend-style-row input[type="color"] {
    width: 3.2rem;
    height: 2.1rem;
    padding: 0.14rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.legend-style-row select {
    min-width: 7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 0.48rem 0.6rem;
    background: rgba(247, 242, 232, 0.94);
    color: var(--text);
    font: inherit;
}

.legend-style-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(248, 244, 235, 0.86);
    font-size: 0.88rem;
}

.legend-style-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.legend-style-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.legend-copy {
    display: grid;
    gap: 0.18rem;
}

.legend-item-data-center .legend-copy {
    gap: 0.4rem;
}

.legend-detail-text {
    display: grid;
    gap: 0.45rem;
    padding-left: 0.85rem;
    margin-top: 0.25rem;
    color: rgba(248, 244, 235, 0.8);
    font-size: 0.88rem;
    line-height: 1.45;
}

.legend-detail-label {
    color: #f8f4eb;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-left: 0;
}

.legend-detail-label-plain {
    margin-top: 0.25rem;
}


.legend-status-list,
.legend-size-list {
    display: grid;
    gap: 0.35rem;
}

.legend-status-item,
.legend-size-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0.9rem;
}

.legend-swatch-status {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.legend-status-operating {
    background: #16A34A;
}

.legend-status-expanding {
    background: #0EA5A4;
}

.legend-status-purple {
    background: #EAB308;
}

.legend-status-proposed {
    background: #F97316;
}

.legend-status-suspended {
    background: #64748B;
}

.legend-pollutant-ozone {
    background: #F59E0B;
}

.legend-pollutant-so2 {
    background: #DC2626;
}

.legend-pollutant-pm25 {
    background: #2563EB;
}

.legend-population-0-10000 {
    background: #0000FF;
}

.legend-population-10000-50000 {
    background: #28BCEB;
}

.legend-population-50000-100000 {
    background: #03FD80;
}

.legend-population-100000-500000 {
    background: #B3FF00;
}

.legend-population-500000-1000000 {
    background: #FFFF00;
}

.legend-population-1000000-2000000 {
    background: #FFA700;
}

.legend-population-2000000-5000000 {
    background: #FF4D00;
}

.legend-population-5000000-20000000 {
    background: #7A3E03;
}

.legend-pga-0-0-1 {
    background: #0000FF;
}

.legend-pga-0-1-0-2 {
    background: #0BF9FF;
}

.legend-pga-0-2-0-3 {
    background: #01FB9E;
}

.legend-pga-0-3-0-4 {
    background: #AAFF07;
}

.legend-pga-0-4-0-5 {
    background: #FFFF00;
}

.legend-pga-0-5-0-6 {
    background: #FFD100;
}

.legend-pga-0-6-0-8 {
    background: #FF7D00;
}

.legend-pga-0-8-1-0 {
    background: #FF3100;
}

.legend-pga-1-0-2-5 {
    background: #76151B;
}

.legend-line-swatch {
    display: inline-block;
    width: 1.2rem;
    height: 0.22rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.legend-line-unknown {
    background: #7b8187;
}

.legend-line-0-100 {
    background: #0000ff;
}

.legend-line-100-200 {
    background: #ffff00;
}

.legend-line-200-300 {
    background: #ffa500;
}

.legend-line-300-1000 {
    background: #ff0000;
}

.legend-line-intrastate {
    background: #0000ff;
}

.legend-line-interstate {
    background: #ff0000;
}

.legend-line-road-class-1 {
    background: #E63946;
}

.legend-line-road-class-2 {
    background: #F4A261;
}

.legend-line-road-class-3 {
    background: #E9C46A;
}

.legend-line-road-class-4 {
    background: #2A9D8F;
}

.legend-line-road-class-5 {
    background: #264653;
}

.legend-line-road-class-6 {
    background: #AAAAAA;
}

.legend-size-circle {
    display: inline-block;
    border-radius: 999px;
    background: #f8f4eb;
}

.map-only-shell .maplibregl-control-container .maplibregl-ctrl-top-right {
    top: auto;
    right: 1.25rem;
    bottom: 4.2rem;
}

.map-only-shell .maplibregl-control-container .maplibregl-ctrl-bottom-right {
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.map-only-shell .maplibregl-ctrl-group {
    order: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(14, 31, 27, 0.18);
}

.map-only-shell .maplibregl-ctrl-group button {
    width: 34px;
    height: 34px;
}

.map-only-shell .maplibregl-ctrl-scale {
    order: 2;
    margin: 0;
    padding: 0.18rem 0.42rem 0.1rem;
    min-width: 0;
    border: none;
    border-bottom: 2px solid #2b2b2b;
    border-radius: 2px 2px 0 0;
    background: rgba(255, 255, 255, 0.92);
    color: #2b2b2b;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.state-name-label {
    pointer-events: none;
    padding: 0.12rem 0.34rem;
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #30413d;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 1px 10px rgba(24, 50, 45, 0.14);
    backdrop-filter: blur(4px);
}

.state-name-label-satellite {
    color: #ffffff;
    background: rgba(25, 32, 39, 0.62);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.map-only-shell .maplibregl-ctrl-bottom-left {
    left: 1.25rem;
    bottom: 1.25rem;
}

.map-only-shell .maplibregl-ctrl-attrib {
    border-radius: 12px;
    background: rgba(13, 28, 25, 0.64);
    color: rgba(248, 244, 235, 0.8);
}

.map-only-shell .maplibregl-ctrl-attrib a {
    color: #f8f4eb;
}

.map-only-shell.map-identify-active .map-root {
    cursor: crosshair;
}

.map-only-shell.map-land-pick-active .map-root {
    cursor: crosshair;
}

.maplibregl-popup.map-identify-popup.map-identify-popup--offset .maplibregl-popup-tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.maplibregl-popup.map-identify-popup.map-identify-popup--dragging .identify-popup-drag-handle {
    cursor: grabbing;
}

.maplibregl-popup.map-identify-popup .maplibregl-popup-content {
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(13, 28, 25, 0.92);
    color: #f8f4eb;
    box-shadow: 0 20px 50px rgba(9, 23, 21, 0.28);
    /* MapLibre default max-width is ~240px; widen for long suitability labels */
    max-width: min(56rem, calc(100vw - 2rem));
    width: max-content;
}

.maplibregl-popup.map-identify-popup .maplibregl-popup-tip {
    border-top-color: rgba(13, 28, 25, 0.92);
    border-bottom-color: rgba(13, 28, 25, 0.92);
}

.maplibregl-popup.map-land-context-popup .maplibregl-popup-content {
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(13, 28, 25, 0.94);
    color: #f8f4eb;
    box-shadow: 0 20px 50px rgba(9, 23, 21, 0.28);
}

.maplibregl-popup.map-land-context-popup .maplibregl-popup-tip {
    border-top-color: rgba(13, 28, 25, 0.94);
    border-bottom-color: rgba(13, 28, 25, 0.94);
}

.selected-land-location-marker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 36px;
    height: 58px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36));
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.land-context-card {
    display: grid;
    gap: 0.65rem;
    min-width: 210px;
    padding: 0.9rem;
}

.land-context-card strong {
    font-size: 0.94rem;
}

.land-context-card small {
    color: rgba(241, 234, 220, 0.72);
    line-height: 1.35;
}

.identify-card {
    width: max-content;
    max-width: min(56rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    box-sizing: border-box;
}

.identify-popup-drag-handle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin: -0.2rem -0.35rem 0;
    padding: 0.35rem 0.35rem 0.55rem;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    border-bottom: 1px solid rgba(241, 234, 220, 0.12);
}

.identify-popup-drag-grip {
    flex-shrink: 0;
}

.identify-popup-drag-grip::before {
    content: "";
    display: block;
    width: 4px;
    height: 1.05rem;
    border-radius: 2px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(241, 234, 220, 0.35) 0 2px,
        transparent 2px 4px
    );
}

.identify-popup-scroll-body {
    min-width: 0;
    max-height: min(72vh, calc(100vh - 10rem));
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.identify-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: 1;
    min-width: 0;
}

.identify-list {
    display: table;
    width: auto;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 1rem 0.45rem;
}

.identify-row {
    display: table-row;
}

.identify-label {
    display: table-cell;
    vertical-align: top;
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.identify-value {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    color: #f8f4eb;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
}

.map-overlay {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    max-width: 21rem;
}

.overlay-card {
    padding: 1rem 1.1rem;
    background: rgba(16, 37, 33, 0.88);
    color: #f7f2e8;
}

.overlay-card p {
    margin: 0.55rem 0 0;
    color: rgba(247, 242, 232, 0.72);
}

.stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-stat {
    padding: 0.9rem;
}

.plain-list {
    margin: 0.8rem 0 0;
    padding-left: 1rem;
}

.layer-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.3rem;
}

.layer-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.56);
}

.layer-toggle input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
}

.layer-toggle-copy {
    display: grid;
    gap: 0.2rem;
}

.layer-toggle-group {
    display: grid;
    gap: 0.45rem;
}

.layer-child-list {
    display: grid;
    gap: 0.4rem;
    padding-left: 2rem;
}

.layer-child-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0;
    color: rgba(248, 244, 235, 0.82);
    font-size: 0.92rem;
}

.layer-child-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 1rem;
    accent-color: var(--accent);
}

.layer-toggle-copy small {
    color: var(--muted);
}

.info-strip {
    padding: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-strip article {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.45);
}

.notice-card,
.auth-card,
.auth-aside {
    backdrop-filter: blur(12px);
}

.message {
    margin-bottom: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
}

.message.success {
    background: rgba(47, 127, 105, 0.12);
    color: #215848;
}

.message.warning {
    background: rgba(177, 115, 16, 0.12);
    color: #855500;
}

.message.error,
.field-error {
    color: var(--danger);
}

.field-help {
    color: rgba(66, 49, 27, 0.82);
    font-size: 0.84rem;
    line-height: 1.4;
}

.password-rule-list {
    display: grid;
    gap: 0.36rem;
    margin: 0.1rem 0 0;
    padding: 0;
    list-style: none;
}

.password-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(66, 49, 27, 0.78);
    font-size: 0.83rem;
    line-height: 1.35;
}

.password-rule::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 0.58rem;
    border-radius: 999px;
    background: rgba(124, 110, 79, 0.34);
    box-shadow: inset 0 0 0 1px rgba(66, 49, 27, 0.08);
}

.password-rule.is-pass {
    color: #226343;
}

.password-rule.is-pass::before {
    background: #2f7f69;
}

.password-rule.is-fail {
    color: #a33d35;
}

.password-rule.is-fail::before {
    background: #cb655b;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
}

.auth-layout {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.5rem;
}

.auth-layout-single {
    grid-template-columns: minmax(320px, 560px);
    justify-content: center;
}

.auth-aside,
.auth-card {
    padding: 2rem;
}

.auth-aside h1 {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.98;
}

.auth-service-intro {
    margin: 1.1rem 0 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.auth-service-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.auth-service-list article {
    display: grid;
    gap: 0.32rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(24, 50, 45, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
}

.auth-service-list strong {
    color: var(--surface-dark);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.98rem;
}

.auth-service-list span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.auth-feature-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.auth-feature-list div {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.5);
}

.auth-links {
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.stack-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 1080px) {
    .hero-metrics,
    .info-strip,
    .workspace-layout,
    .auth-layout {
        grid-template-columns: 1fr;
    }

    .workspace-header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .topbar {
        flex-wrap: wrap;
        padding: 1rem 1.2rem;
    }

    .page-grid,
    .auth-shell {
        padding: 1rem;
    }
}

@media (max-width: 720px) {
    .hero-metrics,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topnav {
        width: 100%;
        justify-content: space-between;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .hero-panel,
    .workspace-panel,
    .auth-card,
    .auth-aside {
        padding: 1.25rem;
    }

    .map-root,
    .map-panel {
        min-height: 28rem;
    }

    .map-toolbar {
        top: 0.85rem;
        left: 0.85rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .map-toolbar-menu-button {
        display: inline-flex;
        align-items: center;
        gap: 0.38rem;
        margin: 0;
        padding: 0.5rem 0.75rem;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: rgba(13, 28, 25, 0.74);
        box-shadow: 0 12px 32px rgba(9, 23, 21, 0.22);
        backdrop-filter: blur(20px);
        color: #f8f4eb;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 160ms ease, transform 160ms ease;
    }

    .map-toolbar-menu-button:hover,
    .map-toolbar-menu-button:focus-visible {
        background: rgba(13, 28, 25, 0.88);
        outline: none;
    }

    .map-toolbar-menu-button:focus-visible {
        box-shadow: 0 0 0 2px rgba(255, 202, 58, 0.45);
    }

    .map-toolbar-menu-icon {
        font-size: 1.1rem;
        line-height: 1;
    }

    .map-toolbar-panel {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        max-width: calc(100vw - 1.7rem);
    }

    .map-toolbar-stack {
        width: 5.5rem;
        padding: 0 0 0.72rem 0;
        border-radius: 0 0 24px 24px;
        overflow: hidden;
    }

    .map-toolbar-stack-head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-shrink: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0 0.02rem 0.1rem 0;
        min-height: 0;
        line-height: 1;
        background: rgba(6, 16, 14, 0.92);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .map-toolbar-stack-body {
        padding: 0.38rem 0.45rem 0;
    }

    .map-toolbar-stack-dismiss {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        margin: -0.06rem -0.04rem 0 0;
        padding: 0;
        border: none;
        border-radius: 2px;
        background: transparent;
        color: rgba(248, 244, 235, 0.9);
        font-size: 1.45rem;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        transition: color 140ms ease;
    }

    .map-toolbar-stack-dismiss:hover,
    .map-toolbar-stack-dismiss:focus-visible {
        color: #f8f4eb;
        outline: none;
    }

    .map-toolbar-stack-dismiss:focus-visible {
        box-shadow: 0 0 0 2px rgba(255, 202, 58, 0.45);
    }

    .map-toolbar.map-toolbar--panel-open .map-toolbar-menu-button {
        display: none;
    }

    .map-toolbar:not(.map-toolbar--panel-open) .map-toolbar-panel {
        display: none;
    }

    .map-toolbar.map-toolbar--panel-open + .map-popup-shell {
        left: 6.85rem;
    }

    .map-toolbar:not(.map-toolbar--panel-open) + .map-popup-shell {
        left: 0.85rem;
    }

    .map-popup-shell {
        top: 0.85rem;
        left: 6.85rem;
        right: 0.85rem;
    }

    .map-popup-panel {
        width: min(19rem, calc(100vw - 7.85rem));
    }

    .map-actions {
        top: auto;
        right: max(0.85rem, env(safe-area-inset-right, 0px));
        bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
        left: auto;
        width: auto;
        max-width: calc(100vw - 1.7rem);
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Logged-in: Account uses the same bottom strip as Log In / Free Trial so it does not cover
       map panel close buttons (top-right of Layers / Legend / L4DC popups). */
    .account-menu-panel {
        top: auto;
        bottom: calc(max(0.85rem, env(safe-area-inset-bottom, 0px)) + 3.35rem);
        right: max(0.85rem, env(safe-area-inset-right, 0px));
        left: auto;
        width: min(18.5rem, calc(100vw - 1.7rem));
        max-height: min(70vh, calc(100vh - 6.5rem));
    }

    .map-action-button {
        min-width: 0;
    }

    .map-only-shell .maplibregl-control-container .maplibregl-ctrl-top-right {
        right: 0.85rem;
        bottom: 7.25rem;
    }

    .map-only-shell .maplibregl-control-container .maplibregl-ctrl-bottom-right,
    .map-only-shell .maplibregl-ctrl-bottom-left {
        bottom: 4.4rem;
        right: 0.85rem;
        left: auto;
    }
}

@media (min-width: 721px) {
    .map-toolbar {
        display: block;
    }

    .map-toolbar-menu-button,
    .map-toolbar-stack-head {
        display: none !important;
    }

    .map-toolbar-panel {
        display: contents !important;
    }

    .map-toolbar.map-toolbar--panel-open .map-toolbar-stack,
    .map-toolbar:not(.map-toolbar--panel-open) .map-toolbar-stack {
        display: flex !important;
        flex-direction: column !important;
    }

    .map-toolbar.map-toolbar--panel-open .map-toolbar-stack-body,
    .map-toolbar:not(.map-toolbar--panel-open) .map-toolbar-stack-body {
        display: grid !important;
    }
}

/* ===== Toolbar tooltips ===== */
.map-toolbar [data-tooltip] {
    position: relative;
}

.map-toolbar [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.65rem);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    white-space: nowrap;
    padding: 0.38rem 0.68rem;
    border-radius: 10px;
    background: rgba(10, 22, 20, 0.94);
    color: #f8f4eb;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(9, 23, 21, 0.3);
}

.map-toolbar [data-tooltip]:hover::after,
.map-toolbar [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.map-toolbar [data-tooltip].is-open::after {
    opacity: 0;
    pointer-events: none;
}

/* ── Suitability Results Panel ───────────────────────────────── */
.suitability-results-panel {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.suitability-results-head {
    color: #f8f4eb;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.suitability-results-loading,
.suitability-results-error {
    color: rgba(241, 234, 220, 0.72);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}

.suitability-results-error {
    color: #F4A261;
}

.suitability-result-list {
    display: grid;
    gap: 0.4rem;
}

.suitability-result-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.86rem;
}

.suitability-result-row:last-child {
    border-bottom: none;
}

.suitability-result-label {
    color: rgba(241, 234, 220, 0.72);
    line-height: 1.35;
}

.suitability-result-value {
    color: #f8f4eb;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.suitability-result-row:has(.suitability-soil-meta) .suitability-result-value {
    white-space: normal;
}

.suitability-soil-meta {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: rgba(248, 244, 235, 0.78);
    margin-top: 0.25rem;
    line-height: 1.35;
}

.suitability-result-value.value-good {
    color: #2A9D8F;
}

.suitability-result-value.value-warn {
    color: #E9C46A;
}

.suitability-result-value.value-bad {
    color: #E63946;
}

.suitability-result-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

.suitability-result-tag {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(230, 57, 70, 0.18);
    border: 1px solid rgba(230, 57, 70, 0.35);
    color: #f8c8cc;
    font-size: 0.78rem;
}

/* ── Suitability Results Popup (movable) ─────────────────────── */
.suitability-popup {
    position: fixed;
    z-index: 300;
    width: min(960px, calc(100vw - 1.5rem));
    max-width: none;
    max-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #1a2232;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.suitability-popup[hidden] {
    display: none;
}

.suitability-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.suitability-popup-header:active {
    cursor: grabbing;
}

.suitability-popup-title {
    color: #f8f4eb;
    font-size: 0.9rem;
    font-weight: 600;
}

.suitability-report-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.suitability-report-footer-hint {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(241, 234, 220, 0.55);
}

.suitability-popup-export-btn {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(248, 244, 235, 0.92);
    background: rgba(42, 157, 143, 0.35);
    border: 1px solid rgba(42, 157, 143, 0.55);
    border-radius: 8px;
    padding: 0.28rem 0.62rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.suitability-popup-export-btn:hover:not(:disabled) {
    background: rgba(42, 157, 143, 0.5);
    color: #f8f4eb;
}

.suitability-popup-export-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.suitability-report-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.suitability-popup-theme-btn {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(248, 244, 235, 0.9);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 0.28rem 0.62rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.suitability-popup-theme-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #f8f4eb;
}

.suitability-popup-close-btn {
    background: none;
    border: none;
    color: rgba(241, 234, 220, 0.6);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.suitability-popup-close-btn:hover {
    color: #f8f4eb;
    background: rgba(255, 255, 255, 0.1);
}

.suitability-popup-body {
    padding: 0.85rem 0.9rem;
    overflow-y: auto;
    flex: 1;
}

.suitability-report-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.suitability-overview-header {
    margin: 0;
}

.suitability-overview-title {
    margin: 0 0 0.25rem;
    color: #f8f4eb;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.suitability-overview-table-scroll {
    overflow-x: auto;
}

.suitability-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: rgba(249, 250, 251, 0.92);
}

.suitability-overview-table th,
.suitability-overview-table td {
    vertical-align: top;
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.suitability-overview-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: rgba(241, 234, 220, 0.6);
}

.suitability-overview-table tbody tr:last-child td {
    border-bottom: none;
}

.suitability-overview-table .suit-overview-value-cell-left {
    text-align: left;
}

.suitability-overview-table tr.suit-overview-row-nonattainment .suitability-result-tag-list {
    justify-content: flex-start;
}

.suit-overview-tier {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.suit-overview-tier.value-good {
    color: #2A9D8F;
}

.suit-overview-tier.value-warn {
    color: #E9C46A;
}

.suit-overview-tier.value-bad {
    color: #E63946;
}

.suit-overview-tier.muted {
    color: rgba(241, 234, 220, 0.45);
}

.suitability-detail-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.25rem 0;
}

.suitability-detail-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.suitability-detail-block h3 {
    margin: 0 0 0.45rem;
    color: rgba(251, 250, 248, 0.95);
    font-size: 0.93rem;
    font-weight: 600;
}

.suitability-detail-block p {
    margin: 0 0 0.55rem;
    color: rgba(241, 234, 220, 0.78);
    font-size: 0.82rem;
    line-height: 1.45;
}

.suitability-detail-block code {
    font-size: 0.78rem;
    color: #b9e4ff;
}

.suitability-mini-map-frame {
    position: relative;
    border-radius: 12px;
}

.suitability-mini-map-host {
    min-height: 240px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
}

.suit-mini-inset-legend {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    z-index: 3;
    max-width: min(94%, 22rem);
    padding: 0.26rem 0.36rem;
    border-radius: 8px;
    pointer-events: none;
    box-sizing: border-box;
    background: rgba(18, 24, 30, 0.87);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.suit-mini-legend-block + .suit-mini-legend-block {
    margin-top: 0.3rem;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.suit-mini-legend-title {
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(248, 244, 235, 0.92);
    margin-bottom: 0.14rem;
    letter-spacing: 0.012em;
    line-height: 1.18;
}

.suit-mini-legend-sub {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(241, 234, 220, 0.52);
    margin: 0.06rem 0 0.1rem;
    line-height: 1.15;
}

.suit-mini-legend-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.08rem 0.42rem;
    align-items: center;
}

.suit-mini-legend-rows--dense3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.06rem 0.3rem;
}

.suit-mini-legend-row {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 0;
}

.suit-mini-legend-line {
    flex: 0 0 auto;
    width: 1rem;
    height: 0.2rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.suit-mini-legend-fill {
    flex: 0 0 auto;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 0.16rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.suit-mini-legend-point {
    flex: 0 0 auto;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.suit-mini-legend-label {
    font-size: 0.52rem;
    line-height: 1.12;
    color: rgba(241, 234, 220, 0.9);
    word-break: break-word;
}

/* Single thematic row (fiber, IXP): keep one tidy row without wasting a column */
.suit-mini-legend-rows--single {
    grid-template-columns: minmax(0, 1fr);
}

.suit-mini-placeholder,
.suit-mini-map-error {
    margin: 0;
    padding: 1rem;
    font-size: 0.82rem;
    color: rgba(241, 234, 220, 0.75);
}

.suit-mini-map-error {
    color: #F4A261;
}

.suit-mini-marker-img {
    height: 38px;
    width: auto;
    display: block;
    pointer-events: none;
}

.suit-mini-nearest-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d946ef;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.suit-mini-mid-label {
    padding: 0.15rem 0;
    border-radius: 8px;
    background: transparent;
    color: #f8f4eb;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

.maplibregl-popup.suit-mini-annotation-popup .maplibregl-popup-content {
    background: rgba(18, 24, 30, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #f8f4eb;
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.maplibregl-popup.suit-mini-annotation-popup .maplibregl-popup-close-button {
    display: none;
}

.maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: rgba(18, 24, 30, 0.28);
}

.maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
    border-bottom-color: rgba(18, 24, 30, 0.28);
}

.maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: rgba(18, 24, 30, 0.28);
}

.maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: rgba(18, 24, 30, 0.28);
}

.suit-soil-kv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin: 0.45rem 0 0.75rem;
    color: rgba(249, 250, 251, 0.9);
}

.suit-soil-kv-table td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.35rem 0.45rem;
    vertical-align: top;
}

.suit-soil-kv-table code {
    display: block;
    font-size: 0.76rem;
    color: #a5e8ff;
}

.suit-soil-kv-table small {
    display: block;
    margin-top: 0.2rem;
    color: rgba(241, 234, 220, 0.55);
    font-size: 0.68rem;
    line-height: 1.35;
}

.suit-topo-bullet-list {
    margin: 0.45rem 0 0.35rem 1.1rem;
    padding: 0;
    color: rgba(241, 234, 220, 0.78);
    font-size: 0.82rem;
    line-height: 1.45;
}

.suit-topo-bullet-list li {
    margin: 0.25rem 0;
}

/* ── Suitability popup: light panel theme ────────────────────── */
#suitability-popup.suitability-popup--light {
    background: #f4f6fb;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}

#suitability-popup.suitability-popup--light .suitability-popup-header {
    background: rgba(15, 23, 42, 0.06);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suitability-popup-title {
    color: #1e293b;
}

#suitability-popup.suitability-popup--light .suitability-popup-close-btn {
    color: rgba(30, 41, 59, 0.55);
}

#suitability-popup.suitability-popup--light .suitability-popup-close-btn:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.08);
}

#suitability-popup.suitability-popup--light .suitability-report-footer {
    border-top-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suitability-report-footer-hint {
    color: rgba(30, 41, 59, 0.55);
}

#suitability-popup.suitability-popup--light .suitability-popup-theme-btn {
    color: rgba(30, 41, 59, 0.9);
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.18);
}

#suitability-popup.suitability-popup--light .suitability-popup-theme-btn:hover {
    background: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

#suitability-popup.suitability-popup--light .suitability-popup-export-btn {
    color: #0f766e;
    background: rgba(42, 157, 143, 0.18);
    border-color: rgba(42, 157, 143, 0.45);
}

#suitability-popup.suitability-popup--light .suitability-popup-export-btn:hover:not(:disabled) {
    background: rgba(42, 157, 143, 0.28);
    color: #0d9488;
}

#suitability-popup.suitability-popup--light .suitability-results-panel {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suitability-results-head {
    color: #1e293b;
}

#suitability-popup.suitability-popup--light .suitability-results-loading,
#suitability-popup.suitability-popup--light .suitability-results-error {
    color: rgba(30, 41, 59, 0.72);
}

#suitability-popup.suitability-popup--light .suitability-result-row {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

#suitability-popup.suitability-popup--light .suitability-result-label {
    color: rgba(30, 41, 59, 0.72);
}

#suitability-popup.suitability-popup--light .suitability-result-value {
    color: #1e293b;
}

#suitability-popup.suitability-popup--light .suitability-result-value.value-good {
    color: #0f766e;
}

#suitability-popup.suitability-popup--light .suitability-result-value.value-warn {
    color: #b45309;
}

#suitability-popup.suitability-popup--light .suitability-result-value.value-bad {
    color: #b91c1c;
}

#suitability-popup.suitability-popup--light .suitability-soil-meta {
    color: rgba(30, 41, 59, 0.78);
}

#suitability-popup.suitability-popup--light .suitability-result-tag {
    background: rgba(230, 57, 70, 0.1);
    border-color: rgba(230, 57, 70, 0.35);
    color: #991b1b;
}

#suitability-popup.suitability-popup--light .suitability-overview-title {
    color: #1e293b;
}

#suitability-popup.suitability-popup--light .suitability-overview-table {
    color: rgba(15, 23, 42, 0.92);
}

#suitability-popup.suitability-popup--light .suitability-overview-table th,
#suitability-popup.suitability-popup--light .suitability-overview-table td {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suitability-overview-table thead th {
    color: rgba(30, 41, 59, 0.55);
}

#suitability-popup.suitability-popup--light .suit-overview-tier.muted {
    color: rgba(30, 41, 59, 0.45);
}

#suitability-popup.suitability-popup--light .suit-overview-tier.value-good {
    color: #0f766e;
}

#suitability-popup.suitability-popup--light .suit-overview-tier.value-warn {
    color: #b45309;
}

#suitability-popup.suitability-popup--light .suit-overview-tier.value-bad {
    color: #b91c1c;
}

#suitability-popup.suitability-popup--light .suitability-detail-separator {
    border-top-color: rgba(15, 23, 42, 0.12);
}

#suitability-popup.suitability-popup--light .suitability-detail-block h3 {
    color: rgba(15, 23, 42, 0.95);
}

#suitability-popup.suitability-popup--light .suitability-detail-block p {
    color: rgba(30, 41, 59, 0.78);
}

#suitability-popup.suitability-popup--light .suitability-detail-block code {
    color: #0369a1;
}

#suitability-popup.suitability-popup--light .suitability-mini-map-host {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
}

#suitability-popup.suitability-popup--light .suit-mini-inset-legend {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-block + .suit-mini-legend-block {
    border-top-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-title {
    color: rgba(15, 23, 42, 0.92);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-sub {
    color: rgba(30, 41, 59, 0.55);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-line {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-fill,
#suitability-popup.suitability-popup--light .suit-mini-legend-point {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
}

#suitability-popup.suitability-popup--light .suit-mini-legend-label {
    color: rgba(30, 41, 59, 0.88);
}

#suitability-popup.suitability-popup--light .suit-mini-placeholder,
#suitability-popup.suitability-popup--light .suit-mini-map-error {
    color: rgba(30, 41, 59, 0.76);
}

#suitability-popup.suitability-popup--light .suit-mini-map-error {
    color: #c2410c;
}

#suitability-popup.suitability-popup--light .suit-mini-mid-label {
    color: #1e293b;
}

#suitability-popup.suitability-popup--light .maplibregl-popup.suit-mini-annotation-popup .maplibregl-popup-content {
    /* Light glass: more transparent than panel chrome so inset basemap stays visible */
    background: rgba(248, 250, 252, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1e293b;
    border-color: rgba(15, 23, 42, 0.16);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

#suitability-popup.suitability-popup--light .maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: rgba(248, 250, 252, 0.42);
}

#suitability-popup.suitability-popup--light .maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
    border-bottom-color: rgba(248, 250, 252, 0.42);
}

#suitability-popup.suitability-popup--light .maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: rgba(248, 250, 252, 0.42);
}

#suitability-popup.suitability-popup--light .maplibregl-popup.suit-mini-annotation-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: rgba(248, 250, 252, 0.42);
}

#suitability-popup.suitability-popup--light .suit-soil-kv-table {
    color: rgba(15, 23, 42, 0.9);
}

#suitability-popup.suitability-popup--light .suit-soil-kv-table td {
    border-color: rgba(15, 23, 42, 0.1);
}

#suitability-popup.suitability-popup--light .suit-soil-kv-table code {
    color: #0369a1;
}

#suitability-popup.suitability-popup--light .suit-soil-kv-table small {
    color: rgba(30, 41, 59, 0.55);
}

#suitability-popup.suitability-popup--light .suit-topo-bullet-list,
#suitability-popup.suitability-popup--light .suit-topo-bullet-list li {
    color: rgba(30, 41, 59, 0.78);
}

/* Legal / terms page & registration consent */
.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 1rem 0 0;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
}

.auth-checkbox input {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mint);
}

.auth-checkbox a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.auth-checkbox--error span {
    color: var(--danger);
}

.legal-shell {
    min-height: 100vh;
    padding: 2rem 1.25rem 3rem;
}

.legal-page {
    max-width: 44rem;
    margin: 0 auto;
}

.legal-page header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.legal-page h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--text);
}

.legal-page .legal-meta {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
}

.legal-page .legal-intro {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 1rem 0 0;
    color: var(--text);
}

.legal-page .legal-back {
    display: inline;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.legal-nav {
    max-width: 44rem;
    margin: 0 auto 0.5rem;
    font-size: 0.9rem;
}

.legal-nav-sep {
    margin: 0 0.5rem;
    color: var(--muted);
}

.legal-prose h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.2rem;
    margin: 2rem 0 0.75rem;
    color: var(--surface-dark);
}

.legal-prose h3 {
    font-size: 1.02rem;
    margin: 1.35rem 0 0.5rem;
    color: var(--text);
}

.legal-prose p,
.legal-prose li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
}

.legal-prose p {
    margin: 0 0 0.85rem;
}

.legal-prose ul {
    margin: 0 0 0.85rem 1.1rem;
    padding: 0;
}

.legal-prose li {
    margin-bottom: 0.35rem;
}

.legal-prose strong {
    font-weight: 600;
}