/* Layout and readability, loaded after the shared component kit. */
:root { --header-height: 76px; --filter-width: 310px; }
[hidden] { display: none !important; }
button, select, textarea { font-family: inherit; }
button, a, label, select { touch-action: manipulation; }
.topbar { height: var(--header-height); grid-template-columns: minmax(160px, 1fr) auto; gap: 1rem; padding-inline: 1.25rem; }
.brand, .header-actions, .header-action-group { min-width: 0; }
.brand-logo { width: 174px; height: 44px; }
.developer-credit { font-size: .59rem; }
.header-actions .button, .about-toggle { min-height: 44px; }
.header-action-group--utilities .button-secondary { width: auto; padding: 0 .85rem; font-size: .8rem; }
.workspace { height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); grid-template-columns: var(--filter-width) minmax(0, 1fr); overflow: hidden; }
.workspace.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.filters { min-width: 0; min-height: 0; gap: 1.4rem; padding: 1.15rem 1rem; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bacbc5 transparent; }
.filters > * { flex-shrink: 0; min-width: 0; }
.sidebar-heading { position: relative; display: grid; justify-content: stretch; gap: .7rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.sidebar-heading h1 { margin-top: .3rem; font-size: 1.5rem; line-height: 1.15; }
.eyebrow { font-size: .64rem; letter-spacing: .11em; }
.filters-close { display: none; }
.section-heading { gap: .5rem; min-height: 30px; margin-bottom: .5rem; }
.section-heading h2 { font-size: .72rem; letter-spacing: .08em; }
.text-button { min-height: 40px; font-size: .74rem; line-height: 1.3; }
.period-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .3rem; background: #f1f5f3; border-radius: 12px; }
.period-grid button { min-width: 0; min-height: 42px; padding: .5rem .2rem; gap: .3rem; font-size: .75rem; }
.period-grid .period-history { grid-column: auto; }
.period-grid button.active, .period-grid button[aria-pressed="true"] { color: #fff; background: var(--forest); box-shadow: 0 2px 5px #0e5a4f22; }
.category-list { gap: .35rem; }
.category-option { grid-template-columns: 30px minmax(0, 1fr) auto 34px; gap: .5rem; min-height: 48px; padding: .5rem; border-color: #e1e8e4; background: #fff; font-size: .78rem; line-height: 1.35; }
.category-option:has(input:checked) { background: color-mix(in srgb, var(--category-color) 4%, white); border-color: color-mix(in srgb, var(--category-color) 18%, #dfe7e3); }
.category-name { min-width: 0; overflow-wrap: anywhere; }
.category-count { min-width: 25px; margin: 0; padding: .2rem .3rem; background: #e9efec; font-size: .7rem; font-weight: 750; }
.category-count.is-empty { color: #6e7e77; background: #f0f3f1; }
.filter-help, .muted { font-size: .72rem; line-height: 1.6; overflow-wrap: anywhere; }
.filter-help { margin-top: .65rem; }
.compact-select { min-width: 0; min-height: 44px; font-size: .82rem; }
.infrastructure-layer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.infrastructure-layer-list label { min-width: 0; gap: .45rem; padding: .7rem .25rem; font-size: .72rem; overflow-wrap: anywhere; }
.monitoring-layer-list { grid-template-columns: minmax(0, 1fr); }
.monitoring-layer-list label { grid-template-columns: 28px minmax(0, 1fr) 34px; min-height: 48px; padding: .65rem; font-size: .78rem; }
.infrastructure-layer-status { align-items: flex-start; gap: .4rem; margin-top: .55rem; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.infrastructure-layer-status::before { margin-top: .3rem; }
.cartography-key { font-size: .69rem; row-gap: .5rem; }
.radius-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin-top: .6rem; }
.radius-actions .text-button { min-height: 44px; padding: .6rem .75rem; border: 1px solid #d9e3df; border-radius: 9px; background: #f5f8f6; text-align: center; }
.radius-actions #clear-radius { color: #9b493b; background: #fff7f3; border-color: #ead5cf; }
.summary-row { gap: .6rem; font-size: .77rem; }
.summary-row span { min-width: 0; overflow-wrap: anywhere; }
.summary-row strong { flex: none; font-variant-numeric: tabular-nums; }
.sidebar-footer { flex-wrap: wrap; gap: .4rem; font-size: .7rem; }
.map-status { max-width: calc(100% - 7rem); width: max-content; border-radius: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.spinner { flex-shrink: 0; }
.map-legend { max-width: calc(100% - 1.5rem); width: max-content; flex-wrap: wrap; justify-content: center; gap: .2rem; padding: .3rem; border: 1px solid #d5e0d9; }
.map-legend > span { font-size: .65rem; padding: .3rem .4rem; }
.incident-detail { min-width: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.incident-detail h2, .detail-summary, .detail-place, .detail-category, .detail-badge, .accuracy-note, .report-dialog-header, .about-dialog-content, .about-dialog-footer { overflow-wrap: anywhere; }
.detail-category { max-width: calc(100% - 2.75rem); border-radius: 10px; }
.detail-badge, .accuracy-note { max-width: 100%; }
.nearby-infrastructure-item { grid-template-columns: 25px minmax(0, 1fr) auto; }
.zone-now-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
.nearby-infrastructure-item > *, .zone-now-row > *, .report-location-card > *, .report-dialog-header > *, .about-dialog-header > * { min-width: 0; overflow-wrap: anywhere; }
.report-location-card { grid-template-columns: 38px minmax(0, 1fr) auto; }
.report-dialog, .about-dialog { max-width: calc(100% - 1.5rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.report-dialog-header, .about-dialog-header { padding-right: 4.1rem; }
.report-form-footer { flex-wrap: wrap; }
.report-form-footer .button { min-height: 44px; }
.report-form-footer .button-primary { min-width: 0; height: auto; padding: .65rem .55rem; white-space: normal; line-height: 1.3; }
.report-photo-preview > * { min-width: 0; }
.leaflet-tooltip.marker-tooltip, .leaflet-tooltip.facility-marker-tooltip, .leaflet-tooltip.road-route-tooltip, .leaflet-tooltip.river-route-tooltip { max-width: min(240px, calc(100vw - 4rem)); white-space: normal; overflow-wrap: anywhere; }
.leaflet-popup-content { max-width: min(280px, calc(100vw - 5rem)); overflow-wrap: anywhere; }
.road-route-popup { min-width: 0; }
@media (min-width: 761px) {
    .filters.is-desktop-collapsed { visibility: hidden; }
}
@media (max-width: 1180px) and (min-width: 761px) {
    .workspace { grid-template-columns: var(--filter-width) minmax(0, 1fr); }
    .workspace.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
    .header-action-group--utilities .button-secondary { width: 44px; padding: 0; font-size: 0; }
    .about-toggle { width: 44px; padding: 0; }
    .about-label { display: none; }
}
@media (max-width: 760px) {
    :root { --header-height: 68px; }
    .topbar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: .65rem; gap: .4rem; }
    .brand-logo { width: 138px; height: 36px; }
    .developer-credit { font-size: .47rem; }
    .header-actions, .header-action-group { gap: .25rem; }
    .about-toggle { width: 44px; padding: 0; }
    .mobile-filter-toggle { min-height: 44px; padding-inline: .6rem; font-size: .73rem; }
    .mobile-filter-toggle[aria-expanded="true"] { border-color: #9cc9bc; background: #e9f4ee; color: var(--forest-dark); }
    .workspace { display: block; }
    .filters { left: .5rem; right: .5rem; bottom: max(.5rem, env(safe-area-inset-bottom)); max-height: calc(100% - 1rem); padding: 1rem; border-radius: 18px; visibility: hidden; transition: transform .2s ease, visibility .2s; }
    .filters.is-open { visibility: visible; }
    .filters-close { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; top: 0; right: 0; border: 1px solid var(--line); border-radius: 12px; background: #f5f8f6; cursor: pointer; }
    .filters-close .app-icon { width: 18px; height: 18px; }
    .sidebar-heading { padding-right: 3rem; }
    .sidebar-heading h1 { font-size: 1.4rem; }
    .category-option { min-height: 50px; font-size: .82rem; }
    .period-grid button, .text-button { min-height: 44px; }
    .compact-select { font-size: 16px; }
    .map-status { top: .75rem; left: auto; right: .7rem; transform: none; max-width: calc(100% - 5rem); font-size: .72rem; }
    .map-legend { left: 50%; bottom: max(1.7rem, env(safe-area-inset-bottom)); transform: translateX(-50%); }
    .map-legend > span { min-width: 0; font-size: .6rem; }
    .map-legend .app-icon { width: 13px; height: 13px; }
    .report-fab { bottom: 5.3rem; min-height: 44px; }
    .incident-detail { max-height: calc(100% - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); left: .5rem; right: .5rem; }
    .report-dialog, .about-dialog { width: calc(100% - 1rem); max-width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
    .report-location-card { grid-template-columns: 34px minmax(0, 1fr); }
    .report-form-footer { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .about-dialog-footer .button { margin-left: auto; }
}
@media (max-width: 420px) {
    .brand-logo { width: 106px; height: 32px; }
    .developer-credit { font-size: .39rem; }
    .topbar { padding-inline: .5rem; }
    .mobile-filter-toggle { padding-inline: .4rem; font-size: .68rem; }
}
@media (max-width: 359px) {
    .brand-logo { width: 132px; height: 35px; }
    .developer-credit { font-size: .46rem; }
    .mobile-filter-toggle { font-size: .78rem; }
    .filters { padding: .8rem; }
    .category-option { gap: .4rem; font-size: .78rem; }
    .territorial-impact-card { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}