/*
 * SGLocationWidget — standalone location-intelligence widget
 * Ported from roncasa-theme/snippets/nl-location-widget.liquid +
 * sections/location-intelligence.liquid, re-targeted at a real Leaflet
 * map (OneMap tiles, falling back to OpenStreetMap) instead of the theme's
 * fake CSS "paper map" sketch.
 *
 * Colour rule: every colour used here for the widget's own chrome comes
 * from these CSS custom properties only, so the widget inherits whatever
 * palette the host page defines at :root (or on an ancestor):
 *   --paper --paper-2 --paper-3 --ink --ink-2 --ink-3 --line --accent
 *   --sans --serif --mono
 * The one documented exception (same as the theme, "MRT line colours are
 * an approved brand exception") is the literal hex used for each transit
 * line's dot — those are Singapore's own official line colours, not a
 * design choice, so they stay hardcoded.
 *
 * Zero border-radius on every rectangular chrome element (container, rows,
 * tabs, buttons). Round dots (map pins / row icon badges / the subject
 * marker) stay circular — they represent map pins, not cards.
 * Hairline 1px borders only. No box-shadows in our own rules (Leaflet's
 * default control/popup shadows are stripped below).
 */

.sglw {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  box-sizing: border-box;
}
.sglw *{ box-sizing: border-box; }
.sglw-serif{ font-family: var(--serif); }
.sglw-mono{ font-family: var(--mono); }

/* ── Header strip: subject name + nearest-MRT walk-time badge ── */
.sglw-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper);
  flex-wrap:wrap;
}
.sglw-title{ font-family:var(--serif); font-size:18px; font-weight:400; letter-spacing:-.01em; line-height:1.15; color:var(--ink); }
.sglw-mrt{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); line-height:1;
}
.sglw-mrt-dot{ width:10px; height:10px; border-radius:999px; flex:0 0 10px; background:var(--ink); }
.sglw-mrt b{ font-family:var(--serif); font-size:15px; font-weight:400; letter-spacing:-.005em; color:var(--ink); text-transform:none; }

/* ── Body: map + panel, mobile-first (map above list) ── */
.sglw-body{ display:flex; flex-direction:column; }

.sglw-map{
  position:relative;
  height:320px;
  flex:0 0 320px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.sglw-map .leaflet-container{ width:100%; height:100%; background:var(--paper-2); font-family:var(--sans); }

.sglw-panel{ display:flex; flex-direction:column; min-width:0; }

/* ── Category tabs ── */
.sglw-tabs{
  display:flex; overflow-x:auto; border-bottom:1px solid var(--line);
  scrollbar-width:none; background:var(--paper);
}
.sglw-tabs::-webkit-scrollbar{ display:none; }
.sglw-tab{
  border:0; background:transparent; cursor:pointer; padding:12px 12px 10px;
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  flex:0 0 auto; min-height:44px;
}
.sglw-tab-t{ font-family:var(--serif); font-size:14px; font-weight:400; letter-spacing:-.01em; line-height:1; color:var(--ink-3); }
.sglw-tab-n{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); line-height:1; }
.sglw-tab--on .sglw-tab-t, .sglw-tab--on .sglw-tab-n{ color:var(--ink); }
.sglw-tab--on::after{
  content:""; position:absolute; left:22%; right:22%; bottom:-1px; height:2px; background:var(--accent);
}

/* ── List ── */
.sglw-list{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; max-height:360px; flex:1; }
.sglw-row{
  display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer;
}
.sglw-row:last-child{ border-bottom:0; }
.sglw-row:hover{ background:var(--paper-2); }
.sglw-row.sglw-row--active{ background:var(--paper-3); box-shadow:inset 2px 0 0 var(--accent); }
.sglw-ic{
  width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:500; flex-shrink:0; line-height:1;
}
.sglw-nm{ font-family:var(--serif); font-size:15px; font-weight:400; line-height:1.25; color:var(--ink); }
.sglw-cat-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:2px; line-height:1.2; }
.sglw-t{ text-align:right; white-space:nowrap; }
.sglw-t b{ font-family:var(--serif); font-size:16px; font-weight:400; letter-spacing:-.005em; color:var(--ink); }
.sglw-d{ font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-top:2px; letter-spacing:.04em; }
.sglw-empty{ padding:16px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ── Summary row (per-category quick stats, faithful port of nlw-sum) ── */
.sglw-sum{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.sglw-sum:empty{ display:none; }
.sglw-sc{ padding:9px 12px; border-right:1px solid var(--line); }
.sglw-sc:last-child{ border-right:0; }
.sglw-sl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; line-height:1; }
.sglw-sv{ font-family:var(--serif); font-size:15px; font-weight:400; letter-spacing:-.01em; color:var(--ink); line-height:1.2; }

/* ── Pin / dot colours (approved MRT-line exception, hardcoded per SG's
   official transit line colours; everything else uses the palette vars) ── */
.sglw-ic.tel, .sglw-pin.tel{ background:#9D2D31; color:#fff; }
.sglw-ic.ewl, .sglw-pin.ewl{ background:#009645; color:#fff; }
.sglw-ic.nsl, .sglw-pin.nsl{ background:#D42E12; color:#fff; }
.sglw-ic.ccl, .sglw-pin.ccl{ background:#FA9E0D; color:#fff; }
.sglw-ic.nel, .sglw-pin.nel{ background:#9900AA; color:#fff; }
.sglw-ic.dtl, .sglw-pin.dtl{ background:#005EC4; color:#fff; }
.sglw-ic.lrt, .sglw-pin.lrt{ background:#748477; color:#fff; }
.sglw-ic.bus, .sglw-pin.bus{ background:var(--ink); color:var(--paper); }
/* Non-transit categories: unified outline style on paper bg (simplification —
   the theme's semantic green/red for park/health isn't in our fixed palette,
   so every non-transit pin/dot uses the same ink outline for consistency). */
.sglw-ic.school, .sglw-pin.school,
.sglw-ic.shop, .sglw-pin.shop,
.sglw-ic.food, .sglw-pin.food,
.sglw-ic.park, .sglw-pin.park,
.sglw-ic.health, .sglw-pin.health,
.sglw-ic.cinema, .sglw-pin.cinema{
  background:var(--paper); color:var(--ink); border:1px solid var(--ink);
}

/* ── Per-block P1 coverage panel (school rows) ── */
.sglw-blk-btn{
  display:block; margin-top:8px; padding:8px 12px; min-height:36px; border:1px solid var(--line); border-radius:0;
  background:transparent; color:var(--ink); cursor:pointer;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; line-height:1;
}
.sglw-blk-btn:hover, .sglw-blk-btn[aria-expanded="true"]{ background:var(--paper-2); }
.sglw-blk-panel{ margin-top:8px; border:1px solid var(--line); background:var(--paper-2); cursor:default; }
.sglw-blk-panel[hidden]{ display:none; }
.sglw-blk-row{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.sglw-blk-id{ font-family:var(--sans); font-size:13px; color:var(--ink); line-height:1.3; }
.sglw-blk-id b{ font-weight:600; }
.sglw-blk-ring{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-align:right; line-height:1.3; }
.sglw-blk-ring--out{ color:var(--ink-2); }
.sglw-blk-dist{ display:block; text-transform:none; letter-spacing:.04em; color:var(--ink-3); }
.sglw-blk-note{ grid-column:1 / -1; font-family:var(--sans); font-size:12px; line-height:1.45; color:var(--ink-2); }
.sglw-blk-foot{ padding:10px 12px 12px; font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-2); }
.sglw-blk-verdict{ padding:10px 12px 0; font-family:var(--sans); font-size:12px; line-height:1.5; font-weight:600; color:var(--ink); }
.sglw-blk-how{ display:block; margin-top:4px; }
.sglw-blk-link{ display:inline-block; margin-top:8px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-weight:500; }

/* ── Leaflet marker/popup/control chrome — stripped of shadow + radius,
   recoloured to the palette vars ── */
.sglw-pin{
  width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9.5px; font-weight:500; line-height:1;
}
.sglw-pin.sglw-pin--spot{ outline:2px solid var(--ink); outline-offset:2px; }
.sglw-subject-pin{ position:relative; width:16px; height:16px; }
.sglw-subject-dot{ width:16px; height:16px; border-radius:999px; background:var(--ink); border:2px solid var(--paper); }
.sglw-subject-pulse{
  position:absolute; inset:-10px; border-radius:999px; background:var(--ink); opacity:.35;
  animation:sglwPulse 2.2s ease-out infinite; pointer-events:none;
}
@keyframes sglwPulse{ 0%{ transform:scale(.5); opacity:.5; } 75%,100%{ transform:scale(2.6); opacity:0; } }

.sglw-map .leaflet-popup-content-wrapper{
  border-radius:0; box-shadow:none; border:1px solid var(--line); background:var(--paper); color:var(--ink);
}
.sglw-map .leaflet-popup-content{ font-family:var(--sans); font-size:12px; margin:9px 12px; line-height:1.5; }
.sglw-map .leaflet-popup-content b{ font-family:var(--serif); font-size:14px; font-weight:400; }
.sglw-map .leaflet-popup-tip{ box-shadow:none; background:var(--paper); border:1px solid var(--line); }
.sglw-map .leaflet-bar{ border-radius:0; box-shadow:none; border:1px solid var(--line); }
.sglw-map .leaflet-bar a{
  border-radius:0; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line);
}
.sglw-map .leaflet-bar a:hover{ background:var(--paper-2); }
.sglw-map .leaflet-control-attribution{
  background:var(--paper-2); color:var(--ink-3); font-family:var(--mono); font-size:9px; padding:2px 6px;
}
.sglw-map .leaflet-control-attribution a{ color:var(--ink-2); }

/* ── Desktop: map 60% left / panel 40% right, map 560px tall ── */
@media (min-width: 900px){
  .sglw-body{ flex-direction:row; }
  .sglw-map{ width:60%; height:auto; min-height:560px; align-self:stretch; flex:0 0 60%; border-bottom:0; border-right:1px solid var(--line); }
  .sglw-panel{ width:40%; flex:0 0 40%; }
  .sglw-list{ max-height:none; flex:1; }
}

/* calm the OneMap tiles to the page register */
.sglw-map .leaflet-tile-pane{filter:saturate(.55) contrast(.96)}