#tlt-live-map {
  width: 100%;
  height: 100%;
  background: #dfe7df;
}

.maplibregl-map,
.maplibregl-popup,
.maplibregl-ctrl {
  font-family: "IBM Plex Sans Thai", sans-serif;
}

.maplibregl-ctrl-attrib {
  max-width: min(70vw, 680px);
  font-size: 10px;
}

/* MapLibre translates each marker from the canvas origin. Keep marker roots
   out of document flow; relative positioning adds a cumulative row offset. */
.maplibregl-marker.tlt-map-marker,
.maplibregl-marker.tlt-area-marker {
  position: absolute;
  top: 0;
  left: 0;
}

.tlt-map-marker {
  z-index: 5;
  width: 44px;
  height: 41px;
  display: grid;
  place-items: start center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .34));
}

.tlt-map-marker__pin {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: #f4bf2a;
  transform: rotate(-45deg);
  transition: transform .16s ease, filter .16s ease;
}

.tlt-map-marker__icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #102d4f;
  transform: rotate(45deg);
}

.tlt-map-marker:hover .tlt-map-marker__pin,
.tlt-map-marker:focus-visible .tlt-map-marker__pin {
  transform: rotate(-45deg) scale(1.12);
  filter: brightness(1.08);
}

.tlt-map-marker:focus-visible {
  outline: 3px solid #f5d872;
  outline-offset: 2px;
  border-radius: 8px;
}

.tlt-map-marker--verified {
  z-index: 6;
}

.tlt-map-marker--verified .tlt-map-marker__pin {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 5px rgba(244, 191, 42, .7);
}

.tlt-map-marker--candidate {
  z-index: 4;
}

.tlt-map-marker--candidate .tlt-map-marker__pin {
  background: #f0642a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 5px rgba(143, 63, 10, .72);
}

.tlt-map-marker--candidate:focus-visible {
  outline-color: #f0642a;
}

.tlt-map-marker__candidate-badge {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -1px;
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
  pointer-events: none;
}

.tlt-map-marker__candidate-badge svg {
  display: block;
}

.tlt-area-marker {
  z-index: 3;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 3px solid #c96e08;
  border-radius: 999px;
  background: rgba(232, 137, 32, .78);
  color: #fff;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .85) inset, 0 5px 12px rgba(0, 0, 0, .24);
  font: 800 12px/1 "IBM Plex Sans Thai", sans-serif;
  cursor: pointer;
}

.tlt-area-marker[data-type="ns3"] {
  border-color: #626970;
  background: rgba(125, 133, 140, .82);
}

.tlt-area-marker:hover,
.tlt-area-marker:focus-visible {
  filter: brightness(1.08);
  outline: 3px solid rgba(255, 255, 255, .95);
  outline-offset: 2px;
}

.tlt-map-legend {
  position: absolute;
  z-index: 8;
  left: 20px;
  bottom: 102px;
  display: grid;
  gap: 6px;
  width: min(235px, calc(100% - 40px));
  padding: 9px 10px;
  border: 1px solid rgba(24, 33, 27, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  color: #344039;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  font-size: 9px;
  line-height: 1.25;
  pointer-events: auto;
}

.tlt-map-legend__item {
  display: grid;
  grid-template-columns: 21px 1fr;
  align-items: center;
  gap: 7px;
}

.tlt-map-legend__item b {
  color: #18211b;
}

.tlt-map-legend__exact {
  width: 15px;
  height: 15px;
  justify-self: center;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 4px;
  background: #f4bf2a;
  box-shadow: 0 0 0 1px rgba(118, 82, 0, .24);
  transform: rotate(-45deg);
}

.tlt-map-legend__candidate {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 4px;
  background: #f0642a;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(143, 63, 10, .62);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-45deg);
}

.tlt-map-legend__candidate i {
  display: block;
  font-style: normal;
  transform: rotate(45deg);
}

.tlt-map-legend__area {
  width: 20px;
  height: 14px;
  justify-self: center;
  border: 2px solid;
  border-radius: 50%;
}

.tlt-map-legend__area--ns3k {
  border-color: #c96e08;
  background: rgba(232, 137, 32, .3);
}

.tlt-map-legend__area--ns3 {
  border-color: #626970;
  background: rgba(125, 133, 140, .3);
}

.tlt-map-legend__source {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(24, 33, 27, .1);
  color: #68736d;
  font-size: 8px;
}

.tlt-map-legend__source a {
  color: inherit;
  text-decoration: underline;
}

.tlt-map-popup {
  min-width: 240px;
  max-width: 310px;
  line-height: 1.45;
}

.tlt-map-popup h3 {
  margin: 0 24px 4px 0;
  font-size: 15px;
  line-height: 1.35;
}

.tlt-map-popup p {
  margin: 4px 0;
  color: #4f5d54;
  font-size: 12px;
}

.tlt-map-popup strong {
  display: block;
  margin-top: 8px;
  color: #18211b;
  font-size: 17px;
}

.tlt-map-popup small {
  display: block;
  margin-top: 6px;
  color: #66736b;
}

.tlt-map-popup__eyebrow {
  display: inline-flex;
  margin: 0 0 7px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.tlt-map-popup__eyebrow--candidate {
  border: 1px solid #b4480f;
  background: rgba(240, 100, 42, .14);
  color: #913706;
}

.tlt-map-popup__warning {
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.45;
}

.tlt-map-popup__warning--candidate {
  border: 1px solid rgba(180, 72, 15, .25);
  background: #fff2e8;
  color: #71300c;
}

.tlt-map-popup__candidate-source {
  color: #71300c !important;
  font-weight: 700;
}

.tlt-map-popup__candidate-observed {
  color: #7a6860 !important;
  font-size: 10px;
}

.tlt-map-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.tlt-map-popup__actions button,
.tlt-map-popup__actions a {
  border: 1px solid #d9ddd6;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: #18211b;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.tlt-map-popup__actions button {
  background: #18211b;
  color: #fff;
  border-color: #18211b;
}

.tlt-area-popup__type {
  display: inline-flex;
  margin: 0 0 7px;
  padding: 3px 7px;
  border: 1px solid #626970;
  border-radius: 999px;
  background: rgba(125, 133, 140, .14);
  color: #3f474d;
  font-size: 10px;
  font-weight: 700;
}

.tlt-area-popup__type[data-type="ns3k"] {
  border-color: #c96e08;
  background: rgba(232, 137, 32, .14);
  color: #8f4b03;
}

.tlt-area-popup__warning {
  margin-top: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  background: #f1f3f4;
  color: #4e585e;
  font-size: 11px;
  line-height: 1.4;
}

.tlt-area-popup__source {
  margin-top: 7px !important;
  color: #7a8480 !important;
  font-size: 9px;
}

.tlt-map-status {
  position: absolute;
  z-index: 8;
  left: 20px;
  bottom: 63px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(24, 33, 27, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
  color: #344039;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  font-size: 10px;
  pointer-events: none;
}

.tlt-map-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17845b;
}

.tlt-map-status[data-state="pending"]::before {
  background: #d9a928;
}

.tlt-map-status[data-state="fallback"]::before,
.tlt-map-status[data-state="error"]::before {
  background: #d74c3f;
}

main > .pin,
main > .cluster {
  display: none !important;
}

@media (max-width: 720px) {
  .tlt-map-legend {
    left: 10px;
    bottom: calc(43% + 82px);
    width: min(220px, calc(100% - 20px));
  }

  .tlt-map-status {
    left: 10px;
    bottom: calc(43% + 44px);
  }

  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right {
    bottom: 42%;
  }
}

/* Compact map chrome. Scope header overrides to the map page only. */
.tlt-ui-ready > header { gap: 14px; }
.tlt-ui-ready > header .header-actions { margin-left: 0; }
.tlt-ui-ready main > .legend { display: none; }
.tlt-disclosure > summary { list-style: none; cursor: pointer; }
.tlt-disclosure > summary::-webkit-details-marker { display: none; }
.tlt-disclosure > summary:focus-visible,
.tlt-map-tool:focus-visible { outline: 3px solid #b78612; outline-offset: 3px; }
.tlt-disclosure:not([open]) > :not(summary) { display: none !important; }
.tlt-disclosure[open] > summary { background: #fff5d6; border-color: #d9a928; }
.tlt-overview { position: relative; margin-left: auto; flex-shrink: 0; }
.tlt-overview > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 12px; border: 1px solid #e5dbb9; border-radius: 12px;
  background: #fbf7e9; color: #60490e;
}
.tlt-overview svg, .tlt-map-tool svg {
  width: 21px; height: 21px; flex-shrink: 0; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tlt-overview #liveTotal { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; max-width: 180px; }
.tlt-overview__arrow { font-size: 16px; }
.tlt-overview[open] .tlt-overview__arrow { transform: rotate(180deg); }
.tlt-ui-ready header .summary {
  display: block; position: absolute; left: auto; right: 0; top: calc(100% + 12px);
  width: min(320px, calc(100vw - 24px)); padding: 18px; border-radius: 16px;
  background: #fff; color: #18211b; border: 1px solid #e6e7df;
  box-shadow: 0 12px 35px rgba(18,28,22,.18); backdrop-filter: none;
}
.tlt-ui-ready header .summary .eyebrow { font-size: 15px; color: #18211b; font-weight: 700; letter-spacing: 0; }
.tlt-ui-ready header .summary p { color: #66736b; font-size: 12px; margin-top: 6px; }
.tlt-ui-ready header .summary .metric { justify-content: space-between; gap: 12px; border-color: #ecece4; }
.tlt-ui-ready header .summary .metric b { color: #846211; font-size: 21px; }
.tlt-ui-ready header .summary .metric span { color: #536157; font-size: 11px; }
.tlt-ui-ready header .summary .tlt-overview__note { border-top: 1px solid #ecece4; margin-top: 14px; padding-top: 12px; line-height: 1.6; }
.tlt-post-icon { display: none; }
.tlt-map-tools {
  position: absolute; z-index: 8; left: 64px; bottom: 27px;
  display: flex; align-items: center; gap: 8px;
}
.tlt-map-tools .tlt-map-legend,
.tlt-map-tools .tlt-map-health {
  position: static; display: block; width: auto; padding: 0; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; background: none;
}
.tlt-map-tools .tlt-map-tool {
  position: relative; inset: auto; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid #e2e5dd; border-radius: 12px; background: #fff; color: #354c3f;
  box-shadow: 0 3px 12px rgba(18,28,22,.12); cursor: pointer;
}
.tlt-map-tool:hover { background: #f7f4e9; }
.tlt-map-tools .tlt-disclosure[open] > summary { background: #fff5d6; border-color: #d9a928; }
.tlt-map-tools #mapToggle { font-size: 0; }
.tlt-map-tools #mapToggle::before { content: '▧'; font-size: 25px; line-height: 1; }
.tlt-map-tools #mapToggle[aria-pressed="true"]::before { content: '▤'; }
.tlt-map-tools #mapToggle:disabled { opacity: .55; cursor: wait; }
.tlt-tool-panel {
  position: absolute; left: -44px; bottom: 54px; width: min(310px, calc(100vw - 32px));
  max-height: min(420px, calc(100dvh - 230px)); overflow: auto;
  display: grid; gap: 14px; padding: 18px; background: #fff;
  border: 1px solid #e2e5dd; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(18,28,22,.18); color: #344039; font-size: 12px; line-height: 1.55;
}
.tlt-tool-panel h3 { font-size: 16px; color: #18211b; margin: 0; }
.tlt-tool-panel__note { margin: 0; padding: 9px 10px; border-radius: 8px; background: #fbf5e6; color: #77591a; font-size: 11px; }
.tlt-map-legend__item { grid-template-columns: 25px 1fr; gap: 10px; }
.tlt-map-legend__source { font-size: 10px; line-height: 1.7; }
.tlt-map-health .tlt-map-status {
  position: static; min-height: 0; padding: 0; background: none; border: 0;
  border-radius: 0; box-shadow: none; font-size: 12px; line-height: 1.6;
}
.tlt-map-health .tlt-map-status::before { flex-shrink: 0; }
.tlt-health-dot { position: absolute; width: 8px; height: 8px; right: 7px; top: 7px; border: 1px solid #fff; border-radius: 50%; background: #17845b; }
.tlt-map-health[data-state="pending"] .tlt-health-dot { background: #d9a928; }
.tlt-map-health[data-state="error"] .tlt-health-dot,
.tlt-map-health[data-state="fallback"] .tlt-health-dot { background: #d74c3f; }
@media (max-width: 1200px) {
  .tlt-ui-ready > header .tabs { display: none; }
}
@media (max-width: 720px) {
  .tlt-ui-ready > header { gap: 8px; padding: 0 12px; }
  .tlt-ui-ready .tlt-overview > summary { gap: 5px; padding: 8px; }
  .tlt-ui-ready .tlt-overview #liveTotal { font-size: 12px; max-width: 120px; }
  .tlt-ui-ready .tlt-overview svg { width: 18px; height: 18px; }
  .tlt-ui-ready header .summary { position: fixed; top: 65px; right: 12px; }
  .tlt-map-tools { left: 58px; bottom: calc(41% + 26px); gap: 7px; }
  .tlt-tool-panel { left: -46px; max-height: calc(59dvh - 175px); }
  .tlt-ui-ready .header-actions .primary { min-width: 44px; min-height: 44px; padding: 8px; }
}
@media (max-width: 460px) {
  .tlt-ui-ready .header-actions .tlt-post-label { display: none; }
  .tlt-ui-ready .tlt-post-icon { display: inline; font-size: 22px; line-height: 1; }
  .tlt-ui-ready .tlt-brand-logo { width: 112px; }
}