/* #region zone:map.style.extras — คำแนะนำขณะพิมพ์ ป้ายชี้เส้นทาง การ์ดวิเคราะห์จราจร และการ์ดสถานที่ */
.search,
.route-field {
  position: relative;
}
.suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 16px;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  animation: pop var(--t-med) var(--ease-out);
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
}
.suggest-item[aria-selected='true'],
.suggest-item:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.suggest-text {
  display: grid;
  min-width: 0;
}
.suggest-main {
  color: var(--text);
  font-weight: 500;
}
.suggest-main mark {
  background: none;
  color: inherit;
  font-weight: 750;
}
.suggest-sub {
  font-size: var(--fs-xs);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-tip {
  position: fixed;
  z-index: 30;
  max-width: 270px;
  padding: var(--u-space-2) var(--u-space-3);
  border-radius: 12px;
  font-size: var(--fs-sm);
  pointer-events: none;
  display: grid;
  gap: 2px;
}
.map-tip strong {
  font-weight: 650;
}
.map-tip p {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.analysis {
  display: grid;
  gap: var(--u-space-2);
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
}
.congestion-chip {
  color: var(--on-accent);
  background: var(--level-clear);
} /* --on-accent flips light/dark so text stays >= 4.5:1 on the level colours */
.level-busy .congestion-chip,
.congestion-chip.level-busy {
  background: var(--level-busy);
}
.congestion-chip.level-congested {
  background: #c2561a;
  color: #fff;
}
.congestion-chip.level-heavy {
  background: var(--level-heavy);
}
@media (max-width: 820px) {
  .app:has(.sheet[data-state='full']) .fab-stack,
  .app:has(.sheet[data-state='full']) .close3d {
    display: none;
  }
}
.level-congested .congestion-chip {
  background: #c2561a;
  color: #fff;
}
.level-heavy .congestion-chip {
  background: var(--level-heavy);
}
.share-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--track);
}
.share {
  display: block;
  height: 100%;
}

/* Route identity palette (map-format.js ROUTE_PALETTE; validated light + dark). */
:root {
  --route: #4338ca;
  --route-slow: #0891b2;
  --route-jam: #c0267e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --route: #6366f1;
    --route-slow: #0aa5bf;
    --route-jam: #ec4899;
  }
}
.share-normal {
  background: var(--route);
}
.share-slow {
  background: var(--route-slow);
}
.share-jam {
  background: repeating-linear-gradient(90deg, var(--route-jam) 0 6px, transparent 6px 9px);
}
.share-bar {
  gap: 2px;
}
.legend-route {
  display: flex;
  align-items: center;
  gap: 6px;
}
.swatch-route {
  flex: none;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: var(--route);
  box-shadow: 0 0 0 2px #fff;
}
.swatch-slow {
  flex: none;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--route-slow);
}
.swatch-jam {
  flex: none;
  width: 14px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--route-jam) 0 4px, transparent 4px 6px);
}
.share-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-space-1) var(--u-space-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.sub-title {
  margin: var(--u-space-1) 0 0;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.worst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--u-space-1);
}
.worst-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: var(--u-space-2);
  padding: 7px var(--u-space-2);
  border-radius: 10px;
  font-size: var(--fs-sm);
  cursor: default;
  transition: background var(--t-fast);
}
.worst-row:hover,
.worst-row:focus-visible {
  background: var(--accent-soft);
}
.worst-row.speed-SLOW .dot {
  background: var(--route-slow);
}
.worst-row.speed-TRAFFIC_JAM .dot {
  background: var(--route-jam);
  border-radius: 2px;
}
.worst-road {
  overflow-wrap: anywhere;
}
.worst-km {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.worst-speed {
  font-size: var(--fs-xs);
  color: var(--faint);
}
.best {
  font-size: var(--fs-sm);
}
.warnings ul,
.alts ul {
  margin: var(--u-space-1) 0 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.alts ul.alt-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 6px;
}
.alt-pick {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-2);
  flex-wrap: wrap;
  min-height: 44px;
  padding: var(--u-space-2) 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.alt-pick:hover,
.alt-pick:focus-visible {
  background: var(--accent-soft);
}
.alt-use {
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
}

.poi-card {
  padding: 0 0 14px;
  overflow: hidden;
  gap: 10px;
}
.poi-card > :not(.poi-photo) {
  margin: 0 var(--u-space-4);
}
.poi-photo {
  margin: 0;
  position: relative;
}
.poi-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--track);
}
.poi-photo figcaption {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.poi-photo figcaption a {
  color: inherit;
}
.poi-head {
  padding-top: var(--u-space-3);
}
.poi-card .poi-head:first-child {
  padding-top: var(--u-space-4);
}
.poi-name {
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.poi-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quiet-chip {
  background: var(--track);
  color: var(--text);
}
.open-chip {
  background: rgba(30, 158, 106, 0.16);
  color: #13724b;
}
.closed-chip {
  background: var(--danger-soft);
  color: var(--danger);
}
.poi-address {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.poi-hours summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.poi-hours ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.poi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-space-2);
}
.poi-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-sm);
}
.poi-links a {
  color: var(--accent-strong);
}
@media (prefers-color-scheme: dark) {
  .open-chip {
    color: #6fe0ae;
  }
}
/* #endregion */

/* Map key (legend): collapsible, only the active layers, each with scale, how-to-read, source and time. */
.legend-head button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-3);
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  border-radius: 12px;
}
.legend-head button:hover {
  background: var(--accent-soft);
}
.legend-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast);
}
.legend[data-open='true'] .legend-chevron {
  transform: rotate(225deg) translateY(-2px);
}
.legend[data-open='false'] .legend-body {
  display: none;
}
.legend-body {
  display: grid;
  gap: var(--u-space-3);
  padding: var(--u-space-1) 10px var(--u-space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: key-in 180ms var(--ease-out);
}
.key-section {
  display: grid;
  gap: 6px;
}
.key-section + .key-section {
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
}
.key-title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--text);
  text-transform: none;
}
.key-how {
  margin: 0;
  line-height: 1.45;
}
.key-meta {
  margin: 0;
  font-size: 11px;
  color: var(--faint);
}
.key-note {
  margin: 0;
  color: var(--warn-ink);
}
.key-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.45;
}
.key-wx {
  font-weight: 700;
  color: var(--text);
}
.key-wx-rain,
.wx-badge small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--rain, #1d6fb8);
  font-weight: 600;
}

/* Area values on the map: glass weather badges (no citywide AQ layer — spec §2.1). */
.area-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.area-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  animation: area-in 160ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
.area-item.still {
  animation: none;
}
.area-item[hidden] {
  display: none;
}
.wx-badge {
  height: 36px;
  padding: 0 10px 0 6px;
  border-radius: 18px;
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wx-badge img {
  width: 22px;
  height: 22px;
}
.wx-badge b {
  font-size: 15px;
  font-weight: 650;
}
.wx-badge small {
  font-size: var(--u-text-xs);
}
.area-item:hover,
.area-item:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@keyframes area-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes key-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .area-item,
  .legend-body {
    animation: none;
  }
  .legend-chevron {
    transition: none;
  }
}