/* Mobile / WebView overlay. Desktop navbar and grids stay as-is above 768px. */

html{ -webkit-text-size-adjust:100%; }
a.report-row{ text-decoration:none; color:inherit; }
.report-row-foot{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:2px; }
.v-timeline{ margin-top:8px; }
.v-step{ display:grid; grid-template-columns:20px 1fr; gap:12px; }
.v-rail{ display:flex; flex-direction:column; align-items:center; }
.v-dot{ width:12px; height:12px; border-radius:50%; background:var(--line); margin-top:4px; flex-shrink:0; }
.v-dot.done{ background:var(--teal); }
.v-dot.now{ background:var(--indigo); box-shadow:0 0 0 4px var(--indigo-tint); }
.v-line{ width:2px; flex:1; min-height:22px; background:var(--line); }
.v-body{ padding-bottom:16px; }
.v-body .ttl{ font-weight:600; font-size:14px; }
.v-body .meta{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
.sla-banner{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 14px; border-radius:12px; margin:4px 0 8px;
  border:1px solid var(--line);
}

.civic-offline-banner{
  display:none; position:sticky; top:0; z-index:80;
  background:var(--amber); color:#1a1208; text-align:center;
  font-size:13px; font-weight:600; padding:8px 12px;
}
.civic-offline-banner.show{ display:block; }

.nav-menu-btn{
  display:none; width:44px; height:44px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink);
  align-items:center; justify-content:center; padding:0;
}
.civic-drawer{
  display:none; position:fixed; inset:0; z-index:90;
  background:rgba(16,24,40,.45);
}
.civic-drawer.open{ display:block; }
.civic-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,88vw);
  background:var(--paper-raised); padding:calc(18px + var(--safe-top)) 20px 24px;
  box-shadow:-12px 0 32px rgba(16,24,40,.18); overflow-y:auto;
}
.civic-drawer-panel a, .civic-drawer-panel button{
  display:flex; align-items:center; min-height:48px; width:100%;
  text-align:left; background:none; border:none; color:var(--ink);
  font:inherit; font-weight:600; padding:8px 4px; border-bottom:1px solid var(--line);
}

.civic-tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--paper-raised); border-top:1px solid var(--line);
  padding:6px 8px calc(8px + var(--safe-bottom));
  grid-template-columns:1fr 1fr 1.15fr 1fr 1fr;
  align-items:flex-end; gap:2px;
}
.civic-tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:48px; font-size:11px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; gap:2px; padding:4px 2px;
}
.civic-tabbar a.active{ color:var(--indigo); }
.civic-tabbar .tab-report{
  width:56px; height:56px; margin-top:-18px; border-radius:18px;
  background:var(--indigo); color:#fff !important;
  box-shadow:0 8px 18px rgba(36,50,107,.35);
  font-size:22px; font-weight:700;
}
.civic-tabbar .tab-report span{ font-size:10px; font-weight:700; line-height:1; }

@media (max-width:768px){
  header{ padding-top:var(--safe-top); }
  .nav{ padding:10px 0; gap:8px; }
  .navlinks{ display:none !important; }
  .nav-menu-btn{ display:inline-flex; }
  .navactions .btn-solid, .navactions .btn-text{ display:none; }
  .navactions .btn-ghost{ min-height:44px; }
  body.has-tabbar{ padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }
  body.has-tabbar .civic-tabbar{ display:grid; }
  .wrap{ padding-left:16px; padding-right:16px; }
  main.wrap, main > .wrap{ padding-top:20px !important; }
  .panel{ padding:16px; }
  .btn{ min-height:48px; padding:12px 16px; }
  .btn-sm{ min-height:44px; }
  input,select,textarea{ font-size:16px !important; min-height:48px; padding:12px 14px; }
  textarea{ min-height:120px; }
  .hero{ padding:28px 0 20px; }
  .cta-band{ padding:24px 18px; }
  .footer-grid{ grid-template-columns:1fr !important; }
  .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; margin-bottom:20px; }
  .stat-card{ padding:14px; }
  .stat-card .num{ font-size:22px; }
  .ledger-row{ grid-template-columns:1fr auto !important; gap:8px; padding:12px 14px; }
  .ledger-id{ display:none; }
  .upvote-btn{ min-height:40px; }

  .report-list{ gap:10px; background:transparent; border:none; overflow:visible; }
  .report-row, a.report-row{
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
    border:1px solid var(--line); border-radius:14px;
    padding:14px 14px 12px; gap:8px;
    min-height:64px;
  }
  .report-row .issue{
    overflow-wrap:anywhere; word-break:break-word;
    font-size:16px; line-height:1.3;
  }
  .officer-row{
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
    gap:10px; padding:14px;
  }
  .officer-actions{ flex-wrap:wrap; }
  .officer-actions .btn{ width:100%; justify-content:center; }
  .filter-bar{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .filter-btn{ min-height:44px; white-space:nowrap; }

  .map-page .section-head{ margin-bottom:12px; }
  .map-page .section-sub{ display:none; }
  .map-shell{
    height:min(72vh, 560px) !important;
    border-radius:12px;
    position:relative;
  }
  .map-page{ padding-bottom:8px; }
  .filter-bar.selects{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .filter-bar.selects select{ min-width:0; width:100%; }

  .photo-pair{ grid-template-columns:1fr !important; }
  .photo-pair img, #photo-preview-img{ max-height:240px; width:100%; object-fit:cover; }
  .modal-backdrop{ padding:24px 12px; align-items:flex-end; }
  .modal{ padding:20px; border-radius:18px 18px 12px 12px; }

  .v-timeline{ margin-top:18px; }
  .v-step{ display:grid; grid-template-columns:20px 1fr; gap:12px; }
  .v-step + .v-step{ margin-top:0; }
  .v-rail{ display:flex; flex-direction:column; align-items:center; }
  .v-dot{ width:12px; height:12px; border-radius:50%; background:var(--line); margin-top:4px; flex-shrink:0; }
  .v-dot.done{ background:var(--teal); }
  .v-dot.now{ background:var(--indigo); box-shadow:0 0 0 4px var(--indigo-tint); }
  .v-line{ width:2px; flex:1; min-height:22px; background:var(--line); }
  .v-body{ padding-bottom:16px; }
  .v-body .ttl{ font-weight:600; font-size:14px; }
  .v-body .meta{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }

  .report-step{ display:none; }
  .report-step.active{ display:block; }
  .report-stepper{ display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; }
  .report-stepper span{
    font-family:var(--mono); font-size:11px; padding:6px 10px; border-radius:100px;
    border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap;
  }
  .report-stepper span.on{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
  .report-nav{ display:flex; gap:10px; margin-top:8px; }
  .report-nav .btn{ flex:1; justify-content:center; }
  .sla-banner{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:12px 14px; border-radius:12px; margin:12px 0 16px;
    border:1px solid var(--line);
  }
}

@media (max-width:360px){
  .stat-row{ grid-template-columns:1fr !important; }
  .brand{ font-size:16px; }
}

@media (min-width:769px){
  .nav-menu-btn, .civic-tabbar, .civic-drawer, .report-stepper, .report-nav{ display:none !important; }
  .report-step{ display:block !important; }
}

@media (prefers-reduced-motion:reduce){
  .civic-tabbar .tab-report{ margin-top:0; }
}