/* Shared interface, 0.3.1. The map/data layer remains independent. */
:root { --bg:#f5f6f2; --card:#fff; --text:#203b32; --muted:#758278; --border:#e3e8df; --accent:#206a50; --working:#4b9465; --broken:#da7968; --repair:#cbab59; }
[hidden] { display:none !important; }
body { font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; transition:background .16s,box-shadow .16s; }
button:hover { filter:none; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #8ebba4; outline-offset:3px; }
input:focus,select:focus,textarea:focus { border-color:#659d7c; outline:0; box-shadow:0 0 0 3px #206a5012; }
input,select,textarea { background:#fafbf8; color:var(--text); border:1px solid var(--border); border-radius:10px; min-height:44px; padding:11px 12px; font-size:14px; }
input::placeholder,textarea::placeholder { color:#91998f; opacity:1; }
.ui-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar { height:78px; min-height:78px; padding:0 36px; background:#fff; border-bottom:1px solid var(--border); z-index:50; }
.brand-wrap { display:flex; align-items:center; gap:12px; color:var(--text); }
.brand-symbol { width:40px; height:44px; display:grid; place-items:center; background:#234b3b; color:#d4e8b4; border-radius:14px 14px 14px 4px; }
.brand-symbol .ui-icon { width:26px; height:26px; }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.topbar strong { font-size:19px; letter-spacing:-.5px; font-weight:750; line-height:1.2; }
.brand-text small { color:var(--muted); font-size:11px; letter-spacing:.04em; }
.topbar nav { gap:12px; }
.topbar nav a { display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:12px; font-weight:600; color:#7a8378; border-radius:9px; }
.topbar nav a.active { color:#2e6048; background:#eff4eb; }
.topbar nav a:hover { background:#f5f7f0; color:#2e6048; }
.topbar nav .ui-icon { width:17px; height:17px; }
.resident-workspace { max-width:1680px; margin:auto; padding:29px 36px 32px; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:14px; }
.section-kicker { display:block; font-size:9px; font-weight:750; letter-spacing:.15em; color:#7d8b7c; }
.workspace-heading h1 { font-size:26px; letter-spacing:-.8px; line-height:1.2; margin:7px 0 0; font-weight:650; }
.place-label { display:flex; align-items:center; gap:7px; color:#71826e; font-size:12px; }
.place-label .ui-icon { width:16px; height:16px; }
.resident-grid { display:grid; grid-template-columns:310px minmax(0,1fr); gap:24px; align-items:start; }
.resident-sidebar { display:flex; flex-direction:column; gap:18px; min-width:0; }
.welcome-card { background:#234b3b; color:#fff; padding:24px 24px 19px; border-radius:18px; }
.welcome-label { display:flex; align-items:center; gap:6px; font-size:8px; letter-spacing:.18em; font-weight:700; color:#bdd0ab; }
.welcome-label i { width:5px; height:5px; background:#c5dea2; border-radius:50%; }
.welcome-card h2 { font-size:25px; line-height:1.25; letter-spacing:-.7px; margin:18px 0 12px; font-weight:600; }
.welcome-card p { font-size:11px; line-height:1.7; color:#c5d1c2; max-width:240px; margin:0; }
.welcome-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #ffffff1c; padding-top:16px; margin-top:21px; font-size:10px; color:#d8e4c9; }
.welcome-footer .ui-icon { width:16px; height:16px; }
.lighting-overview { padding:2px 3px 0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-title h2,.section-title h3 { font-size:12px; font-weight:650; margin:0; }
.section-title > span { font-size:10px; color:#8b9386; }
.status-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.status-overview > div { position:relative; padding:14px 11px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.status-overview b { display:block; font-size:25px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:7px; }
.status-overview small { font-size:9px; color:#82907e; white-space:nowrap; }
.status-dot { position:absolute; top:14px; right:11px; width:5px; height:5px; border-radius:50%; }
.status-dot.working { background:var(--working); }.status-dot.broken { background:var(--broken); }.status-dot.repair { background:var(--repair); }
.map-workspace { min-width:0; background:#fff; border:1px solid var(--border); border-radius:18px; padding:12px; box-shadow:0 4px 18px #253e2e03; position:sticky; top:96px; }
.map-toolbar { display:flex; align-items:center; gap:10px; padding:0 0 12px; }
.map-search { flex:1; display:flex; align-items:center; min-width:0; gap:10px; background:#f5f7f1; border:1px solid #e6eadf; border-radius:10px; padding:0 13px; min-height:46px; position:relative; }
.map-search > .ui-icon { width:18px; height:18px; color:#7c8c76; }
.map-search input { padding:0; background:transparent; border:0; width:100%; min-width:0; box-shadow:none; font-size:12px; min-height:44px; }
.map-search:focus-within { border-color:#7a9e83; box-shadow:0 0 0 3px #206a5010; }
.filter-popover { position:relative; flex:none; }
.filter-popover > summary { display:flex; align-items:center; justify-content:center; gap:8px; list-style:none; cursor:pointer; min-height:46px; padding:0 15px; border:1px solid var(--border); border-radius:10px; font-size:12px; font-weight:600; }
summary::-webkit-details-marker { display:none; }
.filter-popover[open] > summary { background:#eff5e9; border-color:#b6cbb1; }
.filter-popover > summary .ui-icon { width:17px; height:17px; }
.filter-count { min-width:18px; height:18px; display:grid; place-items:center; background:#2d6c50; color:#fff; border-radius:6px; font-size:10px; }
.filter-content { position:absolute; z-index:20; right:0; top:54px; width:280px; padding:18px; border:1px solid var(--border); background:#fff; box-shadow:0 14px 45px #173c2924; border-radius:14px; }
.filter-content .section-title { margin-bottom:14px; }
.filter-content label { margin:12px 0 0; font-size:11px; color:#687963; }
.filter-content select,.filter-content input { font-size:13px; margin-top:6px; }
.filter-content button { padding:0; background:none; color:#407352; font-size:10px; min-height:26px; border:0; }
.filter-content p { font-size:11px; margin:14px 0 0; color:#7a8774; }
.resident-map-card { grid-area:auto; border:0; border-radius:12px; overflow:hidden; background:#e9eee2; }
#scheme.town-map { height:calc(100svh - 283px); min-height:520px; max-height:1100px; background:#e9eee2; }
.map-mode-controls { gap:4px; left:14px; top:14px; padding:4px; border:1px solid #ffffffbb; border-radius:11px; background:#ffffffed; box-shadow:0 3px 15px #1d3b2810; }
.map-mode-controls button { min-height:35px; border:0; border-radius:7px; box-shadow:none; padding:0 11px; font-size:10px; color:#566952; background:transparent; }
.map-mode-controls button:first-child { background:#315b43; color:#fff; min-width:40px; font-size:11px; }
.map-mode-controls button:hover { background:#eaf1e2; }.map-mode-controls button:first-child:hover { background:#204532; }
.maplibregl-ctrl-top-right { top:5px; right:4px; }
.maplibregl-ctrl-group { box-shadow:0 3px 15px #1d3b2810 !important; border:1px solid #ffffffb0; border-radius:10px; overflow:hidden; }
.maplibregl-ctrl-group button { width:36px; height:36px; background:#fffffff5; }
.map-3d-note { top:65px; left:15px; font-size:9px; padding:5px 8px; border:1px solid #e1e7da; }
.scheme-legend { bottom:34px; left:14px; padding:9px 12px; gap:15px; border:1px solid #e5e9dd; border-radius:9px; background:#ffffffed; box-shadow:0 2px 12px #254b2810; color:#6a7963; font-size:9px; }
.legend-dot { width:6px; height:6px; margin-right:4px; }
.map-footer { display:flex; gap:8px; align-items:center; padding:13px 2px 1px; color:#8a9682; }
.map-footer > .ui-icon { width:14px; height:14px; }
.map-footer p { margin:0; flex:1; font-size:10px; line-height:1.5; }
.map-format-label { flex:none; font-size:9px; letter-spacing:.05em; color:#a2ab99; }
.scheme-object-card { background:#fffffff7; border:1px solid #d7e4cc; padding:13px; left:14px; right:14px; bottom:84px; border-radius:13px; box-shadow:0 8px 28px #1d3b281c; }
.scheme-object-card button { display:flex; gap:7px; align-items:center; font-size:12px; border-radius:9px; padding:10px 13px; }
.scheme-object-card button .ui-icon { width:15px; height:15px; }
.scheme-object-card b { font-size:13px; }.scheme-object-card span,.scheme-object-card small { font-size:11px; }
.address-results { top:calc(100% + 7px); border-radius:12px; z-index:25; padding:6px; box-shadow:0 14px 35px #153b2420; }
.address-results button { font-size:12px; }
.report-panel { grid-area:auto; background:#fff; border:1px solid var(--border); padding:22px; border-radius:16px; max-height:none; overflow:visible; scroll-margin-top:95px; }
.report-heading { display:flex; align-items:center; justify-content:space-between; min-height:12px; }
.report-panel h2 { margin:8px 0 7px; font-size:23px; font-weight:650; letter-spacing:-.6px; }
.report-caption { color:#8a9385; font-size:11px; line-height:1.5; margin:0 0 18px; }
.location-selection { display:flex; align-items:center; gap:10px; padding:12px; background:#f6f8f1; border:1px dashed #d5dfca; border-radius:10px; min-height:60px; margin-bottom:14px; }
.location-selection > .ui-icon { color:#8b9c7b; width:19px; height:19px; }
.location-selection > span { font-size:11px; line-height:1.5; color:#7b896f; flex:1; min-width:0; overflow-wrap:anywhere; }
.location-selection.selected { border-style:solid; border-color:#cddfc6; background:#f0f6eb; }
.location-selection.selected > span { color:#42623c; }
.location-selection button { background:none; padding:4px; min-height:28px; color:#517d4b; }
.location-selection button .ui-icon { width:16px; height:16px; }
.report-steps { list-style:none; margin:18px 0; padding:0; display:grid; gap:15px; }
.report-steps li { display:flex; align-items:center; gap:10px; color:#76816d; font-size:10px; }
.report-steps li span { color:#a4b293; font-size:9px; font-variant-numeric:tabular-nums; }
.choose-location { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; color:#43623c; background:#eff4e6; min-height:43px; padding:0 13px; border-radius:9px; font-size:11px; font-weight:650; }
.choose-location:hover { background:#e5efdb; }.choose-location .ui-icon { width:16px; height:16px; }
.problem-fieldset { border:0; padding:0; margin:17px 0; min-width:0; }
.problem-fieldset legend { font-size:11px; font-weight:600; padding:0; margin-bottom:9px; color:#5c6f51; }
.problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.problem-choice { position:relative; margin:0 !important; cursor:pointer; }
.problem-choice input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; padding:0; }
.problem-choice > span { display:flex; align-items:center; gap:7px; padding:10px; min-height:44px; border:1px solid #e7ebdf; background:#fafbf7; border-radius:9px; color:#7b8871; font-size:10px; }
.problem-choice .ui-icon { width:16px; height:16px; }
.problem-choice input:checked + span { border-color:#6f9463; background:#eff5e7; color:#426b37; box-shadow:0 0 0 1px #6f946322; }
.problem-choice input:focus-visible + span { outline:3px solid #b4c9a3; outline-offset:2px; }
.photo-picker { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; border:1px dashed #cddabf; border-radius:10px; background:#fcfdf9; padding:17px 10px; cursor:pointer; margin:0 0 15px; }
.photo-picker > .ui-icon { color:#739361; width:22px; height:22px; }
.photo-picker span { display:flex; flex-direction:column; gap:4px; }
.photo-picker b { font-size:11px; font-weight:600; color:#5a754a; }
.photo-picker small { font-size:9px; color:#949f88; }
.photo-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.photo-picker:focus-within { outline:3px solid #b4c9a3; outline-offset:2px; }
.photo-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:-5px 0 14px; }
.photo-preview figure { margin:0; min-width:0; position:relative; }
.photo-preview img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; display:block; }
.photo-preview figcaption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; color:#829374; margin-top:3px; }
.photo-preview button { position:absolute; top:3px; right:3px; width:22px; height:22px; min-height:0; padding:0; display:grid; place-items:center; background:#fff; color:#496439; border-radius:50%; font-size:17px; box-shadow:0 1px 5px #0002; }
.field-error { color:#b64c3e; font-size:11px; line-height:1.5; }
.report-panel label.comment-label { display:block; font-size:11px; font-weight:600; color:#5c6f51; margin:12px 0; }
.comment-label > span { font-weight:400; color:#a0a995; font-size:9px; margin-left:4px; }
.comment-label textarea { margin-top:8px; font-size:11px; line-height:1.6; min-height:75px; resize:vertical; background:#fbfcf8; }
.contact-details { margin:14px 0 18px; }
.contact-details summary { display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#8b9980; list-style:none; cursor:pointer; min-height:28px; }
.contact-details summary .ui-icon { width:14px; height:14px; }
.contact-details[open] summary .ui-icon { transform:rotate(180deg); }
.contact-inputs label { font-size:10px; color:#718464; margin:10px 0; }
.contact-inputs input { font-size:12px; margin-top:5px; }
.report-panel .primary-submit { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:#2d6747; color:#fff; border-radius:10px; font-size:12px; font-weight:600; min-height:46px; padding:0 15px; }
.report-panel .primary-submit:hover { background:#205137; }.primary-submit .ui-icon { width:17px; height:17px; }
.sidebar-footnote { text-align:center; color:#a1ab97; font-size:10px; line-height:1.6; margin:0; }
.icon-button { display:grid; place-items:center; width:32px; height:32px; min-height:32px; padding:0; border:0; background:#eff3e8; color:#567449; border-radius:50%; }
.close-report { display:none; }
.report-dialog { border:0; padding:0; margin:auto 0 0; max-width:none; width:100%; max-height:90dvh; overflow:auto; border-radius:22px 22px 0 0; background:#fff; }
.report-dialog::backdrop { background:#142c2366; backdrop-filter:blur(3px); }
.report-dialog .report-panel { border:0; padding:22px 22px calc(24px + env(safe-area-inset-bottom)); border-radius:0; }
.report-dialog .close-report { display:grid; }
.submission-success { display:flex; align-items:center; gap:12px; border:1px solid #cde0bf; background:#eef6e8; padding:14px 18px; border-radius:12px; margin-bottom:20px; color:#517240; }
.submission-success b,.submission-success span { display:block; }.submission-success b { font-size:13px; }.submission-success span { font-size:11px; margin-top:3px; color:#809271; }
/* Administration uses the same controls and restrained palette. */
.admin-wrap { max-width:1510px; margin:28px auto; padding:0 30px 35px; }
.admin-head { margin-bottom:20px; }.admin-head h1 { font-size:27px; letter-spacing:-.8px; font-weight:650; }
.admin-wrap .card { padding:24px; border:1px solid var(--border); border-radius:16px; box-shadow:none; margin-bottom:18px; }
.admin-wrap h2 { font-size:19px; font-weight:650; letter-spacing:-.4px; }
.admin-wrap label { font-size:12px; font-weight:600; color:#6c7d64; }
.admin-wrap input,.admin-wrap select,.admin-wrap textarea { font-size:14px; }
button.secondary,.button.secondary { background:#edf3e5; color:#537344; border:1px solid #dee7d3; }
button.danger { border:1px solid #f0dcd6; background:#fcf1ed; color:#ba6a58; }
.admin-wrap table { font-size:12px; }.admin-wrap th { background:#f5f7f0; color:#8b9780; font-size:10px; font-weight:600; padding:13px; }
.admin-wrap td { padding:13px; border-color:#edf0e6; }
.admin-wrap .selected { background:#f2f7eb; border:1px dashed #ccdabc; color:#7c8b6b; border-radius:10px; }
.auth-card { width:calc(100% - 32px); max-width:420px; margin:70px auto; padding:36px; border-radius:20px; border:1px solid var(--border); background:#fff; box-shadow:0 12px 50px #244b3105; }
.auth-symbol { display:grid; place-items:center; width:52px; height:52px; background:#edf5e4; color:#628449; border-radius:16px; margin-bottom:24px; }
.auth-symbol .ui-icon { width:25px; height:25px; }
.auth-card h1 { font-size:26px; margin:10px 0; line-height:1.2; letter-spacing:-.8px; }
.auth-description { font-size:12px; color:#8a9580; line-height:1.6; margin:0 0 27px; }
.auth-card label { font-size:12px; color:#728067; }.auth-card input { margin-top:8px; }
.auth-card button { display:flex; align-items:center; justify-content:space-between; width:100%; border-radius:10px; background:#2d6747; min-height:46px; margin-top:20px; font-size:13px; }
.back-to-map { display:block; font-size:11px; text-align:center; color:#8b9980; margin-top:24px; }
@media(min-width:1550px) { .resident-grid { grid-template-columns:340px minmax(0,1fr); gap:28px; }.welcome-card h2 { font-size:28px; } }
@media(max-width:1100px) and (min-width:761px) { .topbar { padding:0 22px; }.resident-workspace { padding:24px 22px; }.resident-grid { grid-template-columns:275px minmax(0,1fr); gap:18px; }.welcome-card { padding:21px; }.welcome-card h2 { font-size:22px; }.report-panel { padding:18px; }.filter-popover > summary { padding:0 11px; }.filter-popover > summary > span:not(.filter-count) { display:none; } }
@media(max-width:760px) {
  .topbar { height:64px; min-height:64px; padding:0 18px; }.brand-symbol { width:32px; height:36px; border-radius:11px 11px 11px 3px; }.brand-symbol .ui-icon { width:22px; height:22px; }.brand-wrap { gap:9px; }.topbar strong { font-size:17px; }.brand-text small { font-size:10px; }.topbar nav { gap:0; }.topbar nav .nav-map { display:none; }.topbar nav .nav-admin { padding:9px; }.nav-admin span { display:none; }.topbar nav .ui-icon { width:21px; height:21px; }
  .resident-workspace { padding:20px 14px 26px; }.workspace-heading { margin-bottom:17px; }.workspace-heading .section-kicker { font-size:8px; }.workspace-heading h1 { font-size:23px; letter-spacing:-.7px; }.place-label { display:none; }
  .resident-grid { display:flex; flex-direction:column; gap:18px; }.resident-sidebar { display:contents; }.welcome-card { display:none; }.map-workspace { order:0; position:relative; top:auto; width:100%; padding:8px; border-radius:15px; }.lighting-overview { order:1; width:100%; padding:0 2px; }#report-slot { order:2; width:100%; }.sidebar-footnote { order:3; width:100%; }
  .map-toolbar { gap:7px; padding-bottom:8px; }.map-search { padding:0 11px; min-height:44px; }.map-search input { font-size:16px; min-height:42px; }.map-search input::placeholder { font-size:12px; }.filter-popover > summary { min-height:44px; padding:0 11px; }.filter-popover > summary > span:not(.filter-count) { display:none; }.filter-content { width:min(280px,calc(100vw - 48px)); top:52px; padding:16px; }.filter-content input,.filter-content select { font-size:16px; }
  #scheme.town-map { height:59svh; min-height:360px; max-height:800px; }.resident-map-card { border-radius:10px; }.map-footer { padding:10px 3px 3px; gap:6px; }.map-footer p { font-size:9px; }.map-format-label { display:none; }
  .map-mode-controls { left:10px; top:10px; }.map-mode-controls button { font-size:9px; min-height:33px; padding:0 8px; }.map-mode-controls button:first-child { font-size:10px; min-width:35px; }.maplibregl-ctrl-group button { width:33px; height:33px; }.map-3d-note { top:59px; left:10px; font-size:8px; }.scheme-legend { left:10px; gap:10px; padding:7px 9px; font-size:8px; }.scheme-legend span:nth-child(1) { display:inline; }.scheme-object-card { left:9px; right:9px; bottom:76px; gap:8px; }.scheme-object-card button { font-size:11px; padding:8px 10px; }
  .status-overview { gap:10px; margin-top:11px; }.status-overview > div { padding:14px; }.status-overview b { font-size:27px; }.status-overview small { font-size:10px; }.section-title h2 { font-size:12px; }
  .report-panel { padding:21px; }.report-panel h2 { font-size:24px; }.report-caption { font-size:12px; }.location-selection > span { font-size:12px; }.report-steps li { font-size:12px; }.choose-location { font-size:12px; }.problem-choice > span { font-size:12px; min-height:48px; }.problem-choice .ui-icon { width:18px; height:18px; }.problem-fieldset legend { font-size:12px; }.photo-picker { padding:18px; }.photo-picker b { font-size:12px; }.photo-picker small { font-size:10px; }.report-panel label.comment-label { font-size:12px; }.comment-label textarea,.contact-inputs input { font-size:16px; }.comment-label textarea::placeholder,.contact-inputs input::placeholder { font-size:12px; }.contact-details summary { font-size:12px; min-height:36px; }.contact-inputs label { font-size:12px; }.report-panel .primary-submit { min-height:50px; font-size:13px; }
  .mobile-report-action:not([hidden]) { position:fixed; bottom:calc(14px + env(safe-area-inset-bottom)); left:18px; right:18px; z-index:45; width:calc(100% - 36px); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; border-radius:14px; padding:0 16px; background:#285b3e; box-shadow:0 6px 26px #193e3433; color:#fff; font-size:13px; }.mobile-report-action span { flex:1; text-align:left; }.mobile-report-action .ui-icon { width:19px; height:19px; }
  .admin-wrap { margin:20px auto; padding:0 12px 30px; }.admin-head h1 { font-size:23px; }.admin-wrap .card { padding:18px; border-radius:14px; }.admin-wrap input,.admin-wrap select,.admin-wrap textarea { font-size:16px; }.admin-wrap td { padding:10px 0 10px 42%; }.admin-wrap table.mobile-cards td::before { color:#859476; }
  .auth-card { margin:35px auto; padding:28px; }.auth-card input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* Keep supporting text readable, including in the native mobile dialog. */
.report-dialog { color:var(--text); }
.section-kicker { color:#66785f; }
.report-caption,.section-title > span,.status-overview small,.place-label,.map-footer,.report-steps li,.sidebar-footnote { color:#68775f; }
.contact-details summary,.comment-label > span,.photo-picker small,.auth-description,.back-to-map { color:#707e64; }
.problem-choice > span,.location-selection > span,.contact-inputs label { color:#65765a; }
.welcome-card p { font-size:12px; }
.report-steps li { font-size:11px; }
.status-overview small { font-size:10px; }
.map-footer p { font-size:11px; }
.report-panel .comment-label textarea { font-size:12px; }
@media(max-width:760px) { .report-panel .comment-label textarea { font-size:16px; }.map-footer p { font-size:10px; } }