:root{
  --s311-offset: 70px;              /* set by JS to sit below header/adminbar */
  --s311-left-width: 440px;         /* natural max for the list */
}

/* ====== page layout ====== */
.s311-frame{
  display:grid;
  grid-template-columns: clamp(300px, 31vw, var(--s311-left-width)) 1fr;
  gap:14px;
  align-items:start;
  width:min(1600px, 98vw);
  margin:calc(var(--s311-offset)) auto 12px;
  padding:0 8px;
}

.s311-left{
  position:sticky;
  top:calc(var(--s311-offset) + 8px);
  height:calc(100dvh - var(--s311-offset) - 24px);
  overflow:auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  padding:5px 10px 10px;
}

#smart311-public-map{
  position:relative;
  height:calc(100dvh - var(--s311-offset));
  border-radius:12px;
  overflow:hidden;
}

/* top tools INSIDE map */
.s311-map-top{
  position:absolute; top:12px; left:12px; right:12px; z-index:705;
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  pointer-events:none;
}
.s311-map-top input{
  pointer-events:auto; flex:1; max-width:min(800px, 55vw);
  height:42px; border:1px solid #cbd5e1; border-radius:999px; padding:0 16px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.s311-base-switch{ pointer-events:auto; display:flex; gap:6px; }
.s311-base, .s311-form-base .s311-base{
  border:0; padding:8px 14px; border-radius:999px; font-weight:800;
  background:#fff; color:#111827; box-shadow:0 6px 18px rgba(0,0,0,.10); cursor:pointer;
}
.s311-base.is-active{ background:#111827; color:#fff; }

/* centered CTA INSIDE map */
.s311-map-cta{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:705;
}
.s311-map-cta a{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:14px; background:#0f172a; color:#fff; text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.25); font-weight:800;
}
.s311-map-cta .plus{
  width:22px; height:22px; border-radius:999px; background:#fff; color:#0f172a;
  text-align:center; line-height:22px; font-weight:900; display:inline-block;
}

/* list header + pager */
.s311-list-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 10px; }
.s311-list-header .title{ font-weight:800; color:#0f172a; }
.s311-list-header .count{ color:#475569; font-size:13px; display:flex; gap:10px; align-items:center; }
.s311-page-btn{ border:1px solid #cbd5e1; background:#fff; color:#111827; width:28px; height:28px; border-radius:8px; cursor:pointer; font-weight:700; }
.s311-page-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* filters */
.s311-filter-row{ display:flex; gap:8px; padding:6px 4px 12px; }
.s311-filter-row input[type="search"], .s311-filter-row select{
  flex:1; height:38px; border:1px solid #cbd5e1; border-radius:10px; padding:0 10px;
}
.s311-filter-row select{ max-width:140px; }

/* list items */
#s311-side-list{ padding:0 4px 8px; list-style:none; }
#s311-side-list .s311-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06); padding:12px; margin:10px 2px;
  display:grid; grid-template-columns:96px 1fr; gap:12px; cursor:pointer;
}
#s311-side-list .s311-item:hover{ box-shadow:0 12px 28px rgba(0,0,0,.10); transform:translateY(-1px); }
.s311-thumb{ width:96px; height:72px; object-fit:cover; border-radius:10px; background:#eef2ff; }
.s311-meta .s311-title{ margin:0 0 6px; font-weight:800; color:#0f172a; }
.s311-line{ color:#475569; font-size:13px; line-height:1.35; margin-bottom:4px; }
.s311-desc{ color:#334155; font-size:13px; line-height:1.35; margin-top:2px; }
.s311-badge{ border-radius:999px; padding:3px 9px; font-size:12px; line-height:1; margin-right:6px; font-weight:700; }
.s311-badge.Open{ background:#fee2e2; color:#b91c1c; }
.s311-badge.Resolved{ background:#dcfce7; color:#166534; }
.s311-badge.In\ Progress, .s311-badge.In%20Progress{ background:#fef3c7; color:#92400e; }

/* ====== report page (wider map + instructions) ====== */
.smart311-form.s311-report-grid{
  display:grid;
  grid-template-columns: clamp(300px, 36vw, 520px) 1fr;  /* wider map */
  gap:16px;
  width:min(1600px, 98vw);
  margin:calc(var(--s311-offset)) auto 12px;
  padding:0 8px;
}
#s311-form-map{
  display:block;
  height:calc(100dvh - var(--s311-offset) - 24px);
  position:sticky; top:calc(var(--s311-offset) + 8px);
  border-radius:12px; overflow:hidden;
}
.s311-map-wrap{ position:relative; }
.s311-form-base{ position:absolute; right:12px; top:12px; z-index:705; display:flex; gap:6px; }

/* help box */
.s311-help{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; margin:6px 0 14px;
  color:#0f172a; font-size:14px;
}
.s311-help ol{ margin:.4rem 0 0 1.1rem; }

/* form basics */
.smart311-form label{ display:block; margin:12px 0; }
.smart311-form input[type="text"], .smart311-form input[type="search"], .smart311-form textarea{
  width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:10px; font-size:14px;
}
.s311-error{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px; }
.s311-primary{ background:#0f172a; color:#fff; border:0; border-radius:10px; padding:10px 16px; cursor:pointer; }

/* center target on form map */
.s311-center-target{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%; border:2px solid rgba(17,24,39,.75);
  box-shadow:0 0 0 2px rgba(255,255,255,.9) inset; pointer-events:none; z-index:500;
}
.s311-center-target::before,.s311-center-target::after{ content:""; position:absolute; left:50%; top:50%; background:rgba(17,24,39,.8); transform:translate(-50%,-50%); }
.s311-center-target::before{ width:16px; height:2px; }
.s311-center-target::after{ width:2px; height:16px; }

/* Make the Smart311 block span the full viewport width */
.s311-frame{
  /* already your grid… keep your 35/65 split */
  display:grid;
  grid-template-columns:35% 65%;
  gap:16px;
  align-items:start;

  /* full-bleed breakout */
  width:100vw;
  max-width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}

/* Nice scrolling for the list without affecting map CSS */
.s311-left{ max-height:80vh; overflow:auto; }

/* Stack on small screens */
@media (max-width:900px){
  .s311-frame{ grid-template-columns:1fr; transform:none; margin-left:0; width:100%; max-width:100%; }
  .s311-left{ max-height:none; }
}

/* responsive */
@media (max-width:980px){
  .s311-frame{ grid-template-columns: 1fr; }
  #smart311-public-map{ height:70vh; }
}
@media (max-width:760px){
  .smart311-form.s311-report-grid{ grid-template-columns:1fr; }
  #s311-form-map{ position:relative; top:0; height:65vh; }
  .s311-map-top{ left:8px; right:8px; }
}