/* Stone Lake Community — interactive inspection map
 * Precision Sewer Inspections
 *
 * Layout contract: the HUD is a single grid overlay. Every card lives in its own
 * grid cell (left column / right column × top row / bottom row), so two cards can
 * never occupy the same pixels. On narrow screens the cards leave the grid and
 * become tabs + a bottom sheet.
 */

@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* palette */
  --ink:#062737; --ink-2:#0b3348; --blue:#12587d; --blue-2:#17668c;
  --line:#8f9aa6; --line-2:#e3ecf3; --paper:#f6f9fb;
  --accent:#eb6417; --flag:#d62728; --photo:#7c3aed;

  /* surfaces */
  --card:rgba(255,255,255,.97);
  --card-edge:rgba(6,39,55,.07);
  --sh-1:0 1px 2px rgba(6,39,55,.10), 0 10px 28px -14px rgba(6,39,55,.5);
  --sh-2:0 1px 2px rgba(6,39,55,.12), 0 20px 44px -20px rgba(6,39,55,.55);

  /* geometry */
  --r:14px; --r-sm:9px; --r-pill:999px;
  --gap:16px; --pad:14px;
  --card-w:252px;
  --scale-bar:26px;              /* room kept for the Maps scale control */

  /* motion */
  --ease:cubic-bezier(.22,.68,.16,1);
  --dur:.34s;

  --z-map:1; --z-hud:5; --z-status:7;
}

*{box-sizing:border-box}
html,body{height:100%}
@supports (height:100dvh){html,body{height:100dvh}}

body{
  margin:0; overflow:hidden;
  font:400 14px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

#map{position:absolute; inset:0; z-index:var(--z-map); background:#0a1a22}

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip{position:absolute; z-index:20; top:12px; left:12px; transform:translateY(-200%);
  background:var(--ink); color:#fff; padding:10px 14px; border-radius:var(--r-sm);
  font-size:13px; text-decoration:none; transition:transform var(--dur) var(--ease)}
.skip:focus{transform:none}

/* ── HUD grid: cells cannot overlap ────────────────────────────────────── */
.hud{
  position:absolute; inset:0; z-index:var(--z-hud);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--gap);
  padding:var(--gap);
  padding-bottom:calc(var(--gap) + var(--scale-bar));
  align-items:start; justify-items:start;
  pointer-events:none;
}
.hud > *{pointer-events:auto; min-width:0}

.brand{grid-area:1/1/2/2; max-width:min(560px,100%)}
.units{grid-area:1/2/2/3; justify-self:end; width:var(--card-w); max-height:min(54vh,600px)}
.legend{grid-area:3/1/4/2; align-self:end}
.controls{grid-area:3/2/4/3; justify-self:end; align-self:end; width:216px}
.tabs{display:none}

/* ── cards ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  padding:var(--pad);
}
.card__head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px}
.card__head h2, .card h2{
  margin:0; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--blue);
}
.pill{
  font-size:11px; font-weight:600; color:var(--blue);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:1px 8px; font-variant-numeric:tabular-nums;
}

/* brand */
.brand{display:flex; gap:12px; align-items:center; border-left:5px solid var(--accent)}
.brand img{width:46px; height:46px; object-fit:contain; flex:none}
.brand__txt{min-width:0}
.brand__txt h1{margin:0 0 2px; font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.2; letter-spacing:.2px}
.brand__addr{margin:0; font-size:12.5px; color:var(--blue)}
.brand__tag{margin:2px 0 0; font-size:11px; color:var(--line); font-style:italic}

/* units */
.units{display:flex; flex-direction:column; min-height:0}
.field{
  width:100%; margin-bottom:8px; padding:8px 10px;
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field::placeholder{color:var(--line)}
.field:focus{outline:none; border-color:var(--blue-2); background:#fff; box-shadow:0 0 0 3px rgba(23,102,140,.14)}
.list{list-style:none; margin:0; padding:0; overflow:auto; min-height:0; flex:1 1 auto; overscroll-behavior:contain}
.unit{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 9px; border:0; border-radius:7px; background:transparent;
  font:inherit; font-size:13px; color:var(--ink); text-align:left; cursor:pointer;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.unit:hover{background:#e9f3f9}
.unit:focus-visible{outline:2px solid var(--blue-2); outline-offset:-1px}
.unit[aria-current="true"]{background:var(--blue); color:#fff}
.unit__n{opacity:.62; font-size:12px; font-variant-numeric:tabular-nums}
.unit[aria-current="true"] .unit__n{opacity:.85}
.list__empty{padding:8px 9px; font-size:12.5px; color:var(--line)}
.hint{margin:8px 2px 0; font-size:11px; color:var(--line); flex:none}
.units.is-empty .hint{display:none}

/* legend */
.lg{list-style:none; margin:0; padding:0; font-size:12.5px}
.lg li{display:flex; align-items:center; gap:8px; padding:2.5px 0}
.lg__n{margin-left:auto; color:var(--line); font-size:11.5px; font-variant-numeric:tabular-nums}
.sw{width:13px; height:13px; border-radius:3px; flex:none}
.sw--bldg{background:#dbe7f1; border:1px solid #6d8aa5}
.sw--lat{background:var(--accent); height:4px; border-radius:2px}
.sw--loc{background:var(--blue); border-radius:50%}
.sw--cond{background:var(--flag); border-radius:50%}
.sw--pho{background:var(--photo); border-radius:2px}
.credit{margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line-2); font-size:10.5px; color:var(--line)}

/* controls */
.controls .row{display:flex; align-items:center; gap:9px; padding:4px 0; font-size:13px; cursor:pointer}
.controls input{accent-color:var(--blue-2); width:15px; height:15px; flex:none; cursor:pointer}
.controls hr{border:0; border-top:1px solid var(--line-2); margin:9px 0}
.btn{
  width:100%; margin-top:8px; padding:9px 12px; border:0; border-radius:var(--r-sm);
  background:var(--blue); color:#fff; font:600 13px/1 'Inter',sans-serif; cursor:pointer;
  transition:background .16s var(--ease), transform .12s var(--ease);
}
.btn:hover{background:var(--blue-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ── status / fatal ────────────────────────────────────────────────────── */
.status{
  position:absolute; z-index:var(--z-status); top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px; margin:0;
  padding:11px 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:13px; box-shadow:var(--sh-2);
  transition:opacity .3s var(--ease);
}
.status[hidden]{display:none}
.status__spin{
  width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.34); border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.status.is-error{flex-direction:column; align-items:flex-start; gap:12px;
  border-radius:var(--r); padding:18px 20px; max-width:min(560px,86vw); background:#fff; color:var(--ink);
  box-shadow:var(--sh-2)}
.status.is-error .status__spin{display:none}
.status__h{font-family:'Fraunces',Georgia,serif; font-size:17px}
.status__b{margin:0; font-size:13px; color:#53677e}
.status__b code{background:var(--paper); padding:1px 5px; border-radius:5px; font-size:12px}
.status__b em{font-style:italic}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Google Maps overrides ─────────────────────────────────────────────── */
.gm-style .gm-style-iw-c{
  border-radius:var(--r); padding:0 !important;
  box-shadow:var(--sh-2); font-family:'Inter',sans-serif;
}
.gm-style .gm-style-iw-d{overflow:auto !important; padding:0}
.gm-style .gm-style-iw-tc::after{background:rgba(255,255,255,.98)}
.gm-style-iw button.gm-ui-hover-effect{top:2px !important; right:2px !important; opacity:.5}
.gm-style-iw button.gm-ui-hover-effect:hover{opacity:.9}

/* popup content (DOM-built, never string-concatenated) */
.pop{padding:14px 16px 15px; max-height:min(58vh,420px); overflow:auto}
.pop__k{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue)}
.pop__k--flag{color:var(--flag)}
.pop__t{margin:1px 0 8px; font-family:'Fraunces',Georgia,serif; font-size:16px; line-height:1.25}
.pop dl{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; font-size:12.5px}
.pop dt{color:var(--line)}
.pop dd{margin:0; overflow-wrap:anywhere}
.pop__sep{border:0; border-top:1px solid var(--line-2); margin:12px 0}
.pop img{display:block; width:100%; border-radius:var(--r-sm); margin-top:10px; background:var(--paper)}
.pop__meta{margin-top:7px; font-size:11.5px; color:var(--line); display:flex; justify-content:space-between; gap:10px}
.pop__link{color:var(--blue-2); font-weight:600; text-decoration:none}
.pop__link:hover{text-decoration:underline}
.pop__row{display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  padding:9px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; margin-bottom:6px;
  transition:border-color .14s var(--ease), background .14s var(--ease)}
.pop__row:hover{background:var(--paper); border-color:var(--blue-2)}
.pop__row:last-child{margin-bottom:0}
.pop__thumb{width:44px; height:33px; flex:none; object-fit:cover; border-radius:5px; background:var(--paper)}
.pop__dot{width:11px; height:11px; border-radius:50%; flex:none; margin:0 16px}
.pop__dot--flag{background:var(--flag)}
.pop__dot--clear{background:var(--blue)}
.pop__dot--photo{background:var(--photo); border-radius:2px}
.pop__row-t{min-width:0}
.pop__row-s{display:block; color:var(--line); font-size:11.5px}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px), (max-height:620px){
  :root{--gap:12px; --pad:13px}

  .hud{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto}

  .brand{grid-area:1/1/2/2; width:100%; max-width:none}
  .brand__tag{display:none}

  /* the three cards leave the grid and become a sheet stack above the tab bar */
  .units, .legend, .controls{
    position:absolute; left:10px; right:10px; width:auto;
    bottom:calc(58px + env(safe-area-inset-bottom,0px));
    justify-self:stretch; align-self:auto;
    max-height:min(52vh,440px);
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .26s var(--ease), transform .26s var(--ease);
  }
  .units.is-open, .legend.is-open, .controls.is-open{
    opacity:1; transform:none; pointer-events:auto;
  }

  .tabs{
    display:flex; gap:6px;
    position:absolute; left:10px; right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:6px; border-radius:var(--r-pill);
    background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--sh-2);
  }
  .tabs__b{
    flex:1 1 0; padding:9px 10px; border:0; border-radius:var(--r-pill);
    background:transparent; color:var(--blue);
    font:600 13px/1 'Inter',sans-serif; cursor:pointer;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .tabs__b[aria-pressed="true"]{background:var(--blue); color:#fff}
}

@media (max-width:560px){
  .brand__addr{font-size:11.5px}
  .brand img{width:38px; height:38px}
  .brand__txt h1{font-size:17px}
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}