:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f8fa;color:#183545;font-synthesis:none}*{box-sizing:border-box}body{margin:0;line-height:1.55}.wrap{width:min(1100px,calc(100% - 36px));margin:auto}.topbar{background:#133d55;color:#fff}.headrow{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:1.55rem;letter-spacing:.09em;font-weight:850;text-decoration:none;color:#fff}.dot{color:#66cf9a}nav{display:flex;flex-wrap:wrap;align-items:center;gap:16px}nav a,.linkbutton{color:#f4fbff;text-decoration:none;font-size:.88rem}.linkbutton{border:0;background:transparent;cursor:pointer;padding:0;font:inherit}.inline{display:inline}.hero{background:linear-gradient(125deg,#133d55,#25657b);color:#fff;margin-top:24px;border-radius:22px;padding:clamp(24px,6vw,66px)}.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;max-width:680px;margin:14px 0}.hero p{max-width:620px;font-size:1.1rem;color:#e5f2f8}.eyebrow{font-weight:750;letter-spacing:.14em;font-size:.75rem;color:#5ccf9d}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.button{background:#178257;color:#fff;border:0;border-radius:10px;padding:12px 20px;display:inline-block;text-decoration:none;font-weight:700;cursor:pointer}.button.secondary{background:#fff;color:#133d55}.notice{background:#e9f2f8;border-left:4px solid #2782b6;padding:14px 18px;margin:22px 0;border-radius:6px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{padding:23px;background:#fff;border:1px solid #dce5e9;border-radius:15px;margin:16px 0}.tile h2{font-size:1.17rem;margin:10px 0}.tile p,.sectiontitle p{color:#526c7b}.tile-icon{color:#168557;font-weight:850;font-size:1.35rem}.ad-slot{text-align:center;padding:22px;background:#e8eef2;border:1px dashed #afbfcc;color:#455f70;border-radius:12px;margin:28px 0}.ad-tag{display:block;font-size:.62rem;letter-spacing:.14em;color:#617787;margin-bottom:6px}.ad-slot small{display:block;margin-top:5px;color:#738998}.sectiontitle{margin-top:36px}.sectiontitle h1{font-size:2.5rem;margin:8px 0}.area{margin:12px 0}.area ul{margin:0;padding-left:22px}.formcard{background:white;border:1px solid #dce5e9;margin:42px auto;padding:32px;max-width:510px;border-radius:18px}.formcard h1{margin:10px 0}.formcard form{display:grid;gap:17px}.formcard label{font-weight:650;font-size:.92rem}.formcard input{display:block;width:100%;margin-top:6px;border:1px solid #a9b8c2;border-radius:9px;padding:12px;font-size:1rem}.error{background:#fff1f1;color:#9d2936;padding:10px;border-radius:8px}.fine{font-size:.8rem;color:#657b88}.pill{background:#e8f6ed;color:#146d49;padding:7px 12px;border-radius:20px;font-size:.82rem}.roles{display:flex;flex-wrap:wrap;gap:8px}.footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 36px;border-top:1px solid #dce5e9;font-size:.8rem;color:#658090;margin-top:36px}@media(max-width:700px){.headrow{align-items:flex-start;flex-direction:column;padding:16px 0}nav{gap:12px}.grid3{grid-template-columns:1fr}.hero{margin-top:14px}.formcard{padding:22px;margin:24px auto}}
/* v0.2 complaint reporting */
.report-form{display:grid;gap:18px;max-width:920px}.report-form h2{margin:8px 0 0;font-size:1.22rem}.report-form label{font-weight:650;font-size:.92rem;display:block}.report-form input:not([type=checkbox]),.report-form select,.report-form textarea{display:block;width:100%;margin-top:6px;border:1px solid #a8bac4;border-radius:9px;padding:11px;font:inherit;background:#fff;color:#183545}.fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.report-form .tick{display:flex;align-items:flex-start;gap:10px;font-weight:500}.report-form .tick input{width:20px;height:20px;flex-shrink:0}.req{color:#a32636}.outline{border:1px solid #a8bdc9!important;color:#143d55!important;background:#fff!important}.report-form .fine{margin:0}.report-form .actions{margin:0}#report-map{width:100%;height:370px;border-radius:12px;border:1px solid #c7d3db;z-index:0}.report-item{display:flex;align-items:center;justify-content:space-between;gap:15px}.report-item h2{margin:5px 0}.report-item a{color:#133d55}.report-details{display:grid;grid-template-columns:180px 1fr;gap:10px}.report-details dt{font-weight:700}.report-details dd{margin:0}.prewrap{white-space:pre-wrap;overflow-wrap:anywhere}.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,220px));gap:12px}.photos img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid #dce5e9}.timeline{padding-left:22px}.timeline li{margin:12px 0;padding-left:5px}.error{max-width:920px}
@media(max-width:700px){.fieldgrid{grid-template-columns:1fr}.report-item{align-items:flex-start;flex-direction:column}#report-map{height:310px}.report-details{grid-template-columns:1fr;gap:2px}.report-details dd{margin-bottom:10px}}

/* Phukile 0.2.1: Leaflet core positioning fallback in case external CDN CSS fails. */
#report-map{position:relative!important;display:block!important;width:100%!important;height:370px!important;max-width:100%;overflow:hidden!important;isolation:isolate;background:#e2e9e8;contain:layout paint;}
.leaflet-container{position:relative;overflow:hidden;outline-offset:1px;touch-action:none;-webkit-tap-highlight-color:transparent;font:12px/1.5 "Helvetica Neue",Arial,sans-serif;}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0;}
.leaflet-container .leaflet-map-pane img,.leaflet-container .leaflet-tile,.leaflet-container .leaflet-marker-icon,.leaflet-container .leaflet-marker-shadow{max-width:none!important;max-height:none!important;}
.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important;}
.leaflet-tile{visibility:hidden;user-select:none;-webkit-user-select:none;}
.leaflet-tile-loaded{visibility:inherit;}
.leaflet-pane{z-index:400;}.leaflet-tile-pane{z-index:200;}.leaflet-overlay-pane{z-index:400;}.leaflet-shadow-pane{z-index:500;}.leaflet-marker-pane{z-index:600;}.leaflet-tooltip-pane{z-index:650;}.leaflet-popup-pane{z-index:700;}
.leaflet-map-pane canvas{z-index:100;}.leaflet-map-pane svg{z-index:200;}
.leaflet-control{position:relative;z-index:800;pointer-events:auto;clear:both;}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none;}.leaflet-top{top:0;}.leaflet-bottom{bottom:0;}.leaflet-left{left:0;}.leaflet-right{right:0;}.leaflet-left .leaflet-control{float:left;margin-left:10px;}.leaflet-right .leaflet-control{float:right;margin-right:10px;}.leaflet-top .leaflet-control{margin-top:10px;}.leaflet-bottom .leaflet-control{margin-bottom:10px;}
.leaflet-control-zoom{border:2px solid rgba(0,0,0,.2);border-radius:5px;background:#fff;overflow:hidden;}.leaflet-control-zoom a{display:block;width:30px;height:30px;line-height:30px;text-align:center;text-decoration:none;color:#222;background:#fff;font:bold 19px/30px Arial;}.leaflet-control-zoom a+a{border-top:1px solid #ddd;}
.leaflet-control-attribution{background:rgba(255,255,255,.85);font-size:10px;line-height:1.3;padding:2px 5px;}
.leaflet-marker-icon,.leaflet-marker-shadow{display:block;}.leaflet-container a{color:#0078a8;}
/* Form enhancements for desktop, tablet and mobile */
.report-form{display:grid!important;gap:20px!important;min-width:0;max-width:920px;margin:16px 0 24px!important;padding:clamp(18px,3vw,30px)!important;overflow:hidden;}
.report-form .fieldgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;min-width:0;}
.report-form label{display:block!important;min-width:0;font-weight:650;}
.report-form input:not([type=checkbox]),.report-form select,.report-form textarea{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:12px 13px!important;margin-top:7px!important;border:1px solid #a8bac4!important;border-radius:9px!important;background:#fff!important;color:#183545!important;font:inherit!important;line-height:1.4!important;}
.report-form textarea{min-height:128px;resize:vertical;}.report-form input[type=file]{white-space:normal;}
.report-form .tick{display:flex!important;align-items:flex-start!important;gap:10px!important;}.report-form .tick input{flex:none;width:20px;height:20px;margin:2px 0 0;}
.report-form .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;}
@media(max-width:700px){.report-form .fieldgrid{grid-template-columns:1fr!important;}#report-map{height:310px!important}.report-form{padding:18px!important}}

/* v0.3 scoped staff dashboard + accountability actions */
.staff-form{display:grid;gap:15px;max-width:880px}.staff-form label{display:block;font-weight:650}.staff-form input,.staff-form select,.staff-form textarea{display:block;width:100%;max-width:100%;margin-top:6px;border:1px solid #a8bac4;border-radius:9px;padding:12px;font:inherit;background:#fff;color:#183545}.staff-form textarea{resize:vertical;min-height:85px}.staff-form .fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.staff-form .button{justify-self:start}.staff-filters{margin:15px 0 20px}.staff-filters .button{font-size:.85rem}.timeline p{margin:5px 0 10px}.timeline .prewrap{overflow-wrap:anywhere}@media(max-width:700px){.staff-form .fieldgrid{grid-template-columns:1fr}}

/* v0.3.1: persistent ad placement below the sticky navigation (no overlay). */
.topbar{position:sticky;top:0;z-index:1200}.fixed-ad-banner{position:sticky;top:76px;z-index:1100;background:#edf4f6;border-bottom:1px solid #c9d8df;box-shadow:0 2px 5px #0d3e5414}.ad-banner-inner{display:flex;gap:14px;justify-content:center;align-items:center;min-height:64px;text-align:center;font-size:.82rem;color:#325267;padding:8px}.ad-banner-label{background:#d3e1e7;color:#426174;border-radius:4px;padding:3px 5px;font-size:.62rem;letter-spacing:.09em;white-space:nowrap}
/* Dense expandable case cards */
.staff-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid #dce5e9;border-radius:12px;padding:14px}.staff-toolbar label{display:grid;gap:4px;font-size:.79rem;font-weight:650;flex:1 1 155px}.staff-toolbar input,.staff-toolbar select{border:1px solid #acbdc6;border-radius:8px;padding:9px 10px;font:inherit;min-width:0;max-width:100%;background:white}.staff-toolbar button{padding:10px 16px}.case-list{display:grid;gap:9px}.case-card{background:#fff;border:1px solid #d4e0e6;border-radius:11px;overflow:hidden}.case-card summary{list-style:none;cursor:pointer;padding:11px 15px;display:grid;gap:7px}.case-card summary::-webkit-details-marker{display:none}.case-card summary:focus-visible{outline:3px solid #168557;outline-offset:-3px}.case-card[open]{border-color:#8baab7;box-shadow:0 3px 12px #173c5014}.case-head,.case-middle,.case-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.case-head{font-size:.78rem;color:#163b51}.case-head strong{font-size:.85rem}.case-municipal{color:#536b78}.case-middle{min-width:0}.case-title{font-weight:750;min-width:180px;flex:1 1 240px}.case-address{color:#576f7b;font-size:.85rem;flex:1 1 230px}.case-middle .status-badge{margin-left:auto}.case-bottom{color:#647e8a;font-size:.76rem;justify-content:space-between}.case-age.old{color:#a83230;font-weight:750}.expand-hint{color:#177458;font-weight:650}.case-expansion{border-top:1px solid #e1e9ed;background:#f8fafb;padding:15px;display:grid;gap:9px;font-size:.88rem}.case-expansion h3{font-size:.91rem;margin:4px 0 0}.case-workflow{margin:0;padding-left:24px}.case-workflow li{margin:5px 0}.case-expansion .button{justify-self:start;margin-top:4px}.private-note{padding:12px 0;border-top:1px solid #dce5e9}.private-note p{margin:7px 0}
.status-badge{display:inline-block;border-radius:20px;font-weight:750;font-size:.74rem;padding:5px 11px;white-space:nowrap;background:#edf1f5;color:#44546b}.status-submitted{background:#dceeff;color:#155b92}.status-acknowledged{background:#e8edf2;color:#44556b}.status-referred{background:#eee2ff;color:#6733aa}.status-in_progress{background:#fff0c8;color:#8b5c00}.status-resolution_claimed{background:#fff7bf;color:#786000}.status-resolution_disputed{background:#ffe0e2;color:#ab2437}.status-verified_resolved{background:#dcf6e5;color:#126944}.status-closed_other{background:#e9ebee;color:#52616c}
@media(max-width:700px){.topbar{position:relative}.fixed-ad-banner{top:0;min-height:55px}.ad-banner-inner{font-size:.7rem;min-height:55px}.case-card summary{padding:10px}.case-middle .status-badge{margin-left:0}.case-address{flex-basis:100%}.case-title{flex-basis:100%}.case-bottom{gap:6px}.staff-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.staff-toolbar label{min-width:0}.staff-toolbar button{grid-column:1/-1}}
@media(max-width:420px){.staff-toolbar{grid-template-columns:1fr}.ad-banner-inner{gap:6px}.ad-banner-label{font-size:.55rem}}

/* v0.3.2: Compact, accessible action accordions in the full complaint view. */
.action-accordion{padding:0;overflow:hidden;margin:9px 0;}
.action-accordion>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;cursor:pointer;padding:14px 18px;min-height:57px;}
.action-accordion>summary::-webkit-details-marker{display:none;}
.action-accordion>summary:focus-visible{outline:3px solid #178257;outline-offset:-3px;}
.action-accordion[open]{border-color:#a3bdc6;}
.action-accordion-heading{font-weight:750;font-size:1rem;grid-column:1;grid-row:1;}
.action-accordion-hint{color:#637b88;font-size:.79rem;grid-column:1;grid-row:2;}
.action-accordion-toggle{color:#167958;font-size:1.1rem;grid-column:2;grid-row:1 / 3;transition:transform .15s;}
.action-accordion[open] .action-accordion-toggle{transform:rotate(180deg);}
.action-accordion-content{border-top:1px solid #e2ebef;padding:18px;background:#fafcfd;}
.action-accordion-content .staff-form{margin:0;}
@media(max-width:700px){.action-accordion>summary{padding:12px 14px}.action-accordion-content{padding:14px;}}

/* v0.4: notification centre and verification controls */
.notification-line{margin-block:10px}.notification-line a{display:inline-block;margin-top:6px}.action-accordion-content select{max-width:100%}

/* v0.6 Master issue management */
.issue-linked-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid #d5e3e8;flex-wrap:wrap}.issue-update{padding:1rem 0;border-bottom:1px solid #d5e3e8}.issue-linked-row form{margin:0}.issue-linked-row button{white-space:nowrap}

/* v0.6.1 card selection and direct master-issue grouping */
.case-group-form{display:grid;gap:12px}.case-group-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;background:#eef5f6;border:1px solid #cbdde3;padding:14px;border-radius:12px;position:relative}.case-group-actions{display:flex;gap:8px;flex-wrap:wrap}.case-group-actions button{white-space:normal}.case-group-row{display:flex;align-items:stretch;gap:9px;min-width:0}.case-group-row .case-card{flex:1;min-width:0}.case-group-select,.case-already-linked{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:9px 8px;border:1px solid #d3e1e6;border-radius:10px;background:#fff;font-size:.74rem;font-weight:700;cursor:pointer;color:#254b5c;gap:6px;text-align:center}.case-group-select:has(input:checked){background:#dff5e9;border-color:#238759}.case-group-select input{width:21px;height:21px;accent-color:#15835e}.case-already-linked{background:#f1f4f6;color:#667982;cursor:default}.case-group-form .case-card summary{width:100%}@media(max-width:600px){.case-group-bar{align-items:stretch}.case-group-actions{width:100%}.case-group-actions button{flex:1 1 145px}.case-group-select,.case-already-linked{min-width:58px;font-size:.68rem;padding:6px}.case-group-row{gap:5px}}

/* v0.6.2 in-app unread badge */
.notification-badge{display:inline-block;vertical-align:super;margin-left:4px;padding:2px 6px;min-width:17px;border-radius:16px;background:#c73636;color:white;font-size:.68rem;font-weight:800;line-height:1.35;text-align:center}

/* v0.6.3 ward street picker */
.street-results{border:1px solid #ccd8df;border-radius:10px;background:#fff;max-height:245px;overflow:auto;margin:3px 0 9px;box-shadow:0 4px 12px #173c5015}
.street-results[hidden],#street-manual-wrap[hidden]{display:none!important}
.street-option{display:block;width:100%;background:#fff;border:0;border-bottom:1px solid #edf1f3;padding:11px 13px;text-align:left;cursor:pointer;color:#173c50;font:inherit}
.street-option:hover,.street-option:focus-visible{background:#e8f7f1;outline:2px solid #1d8667;outline-offset:-2px}
#optional-map{border:1px solid #dce5e9;border-radius:10px;padding:12px;margin:14px 0}
#optional-map>summary{font-weight:650;cursor:pointer;color:#176e55}

/* v0.7.0: registration home ward dropdown matches other form controls */
.formcard select{display:block;width:100%;max-width:100%;min-width:0;margin-top:6px;border:1px solid #a9b8c2;border-radius:9px;padding:12px 13px;font:inherit;line-height:1.4;background:#fff;color:#183545;box-sizing:border-box;cursor:pointer}
.formcard select:focus-visible{outline:2px solid #178257;outline-offset:2px}

/* v0.7.1 — compact role administration */
.role-search,.role-form{display:grid;gap:12px;max-width:680px;padding:16px;background:#fff;border:1px solid #dce5e9;border-radius:12px}
.role-search label,.role-form label{display:grid;gap:5px;font-weight:650;font-size:.9rem}
.role-search input,.role-form select{width:100%;min-width:0;border:1px solid #a9b8c2;border-radius:9px;padding:11px;font:inherit;background:#fff}
.role-current{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #e4eaed;flex-wrap:wrap}
.role-current .button{font-size:.83rem;padding:8px 12px;border:1px solid #b2c8d2}
.role-add{margin-top:15px;border-top:1px solid #dce5e9;padding-top:12px}
.role-add summary{cursor:pointer;color:#176e55;font-weight:750;margin-bottom:12px}
.role-form button,.role-search button{justify-self:start}
@media(max-width:600px){.role-current{align-items:flex-start;flex-direction:column}}

/* v0.7.1 layout hotfix: consistent native controls across the entire site.
   Appended after all previous rules so it covers forms outside .formcard. */
:where(form) select:not([multiple]),
:where(form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:where(form) textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  color: #183545;
}
:where(form) select:not([multiple]) {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 36px 11px 13px;
  border: 1px solid #a9b8c2;
  border-radius: 9px;
  background-color: #fff;
  line-height: 1.4;
  cursor: pointer;
}
:where(form) select:not([multiple]):focus-visible {
  outline: 2px solid #178257;
  outline-offset: 2px;
}
/* Restore natural sizing where selectors belong to compact toolbar controls. */
.staff-toolbar select { width: 100%; min-height: 40px; }
/* Consistent vertical, full-width labelled fields in staff role administration. */
.role-search, .role-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 680px;
  margin: 12px 0;
  padding: 18px;
  background: #f8fbfc;
  border: 1px solid #dce5e9;
  border-radius: 12px;
}
.role-search label, .role-form label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  width: 100%;
  font-size: .91rem;
  font-weight: 650;
  line-height: 1.5;
}
.role-search input:not([type="hidden"]), .role-form select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #a9b8c2;
  border-radius: 9px;
  background: #fff;
  color: #183545;
  font: inherit;
  font-weight: 400;
}
.role-search button, .role-form button { justify-self: start; }
.role-add summary { padding: 8px 0; }
@media (max-width: 600px) {
  .role-search, .role-form { max-width: 100%; padding: 14px; }
  .role-search button, .role-form button { width: 100%; }
}