/* Accepted 2026-09-14: shared navigation only; page-specific layouts live in separate sheets. */
body[data-design-page] {
  --ad-surface: #fffcf7;
  --ad-border: #eadbc9;
  --ad-shadow: 0 4px 14px rgb(99 63 33 / 6%);
  --ad-radius: 20px;
}
body[data-design-page] .bottom-nav:not([hidden]) {
  border-radius: 0;
  border-top: 1px solid #f4bea3;
  background: #fefaf5;
  padding: 4px 0 max(12px, env(safe-area-inset-bottom));
  gap: 0;
  box-shadow: none;
}
body[data-design-page] .bottom-nav .nav-item {
  gap: 1px;
  min-height: 52px;
  padding: 0;
  align-content: start;
  color: #004a4e;
}
body[data-design-page] .bottom-nav .nav-item .icon {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 5px 8px;
  border-radius: 9px;
  stroke-width: 1.6;
}
/* The four outline glyphs draw ~15% larger than the house; the tile stays 38x32. */
body[data-design-page] .bottom-nav .nav-item:not(:first-child) .icon {
  width: 25px;
  height: 25px;
  padding: 3.5px 6.5px;
}
body[data-design-page] .bottom-nav .nav-item.is-active { color: #c64825; }
body[data-design-page] .bottom-nav .nav-item.is-active .icon { color: #bc5835; background: #fee8d9; stroke-linejoin: round; stroke-width: 2; }
body[data-design-page] .bottom-nav .nav-item span {
  font-size: .7rem;
  letter-spacing: -.01em;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  overflow-wrap: normal;
}
html[data-easy="on"] body[data-design-page] .bottom-nav .nav-item { min-height: 76px; }
html[data-easy="on"] body[data-design-page] .bottom-nav .nav-item .icon { padding-inline: 8px; }
@media (min-width: 700px) {
  body[data-design-page] .bottom-nav .nav-item { min-height: 68px; }
  body[data-design-page] .bottom-nav .nav-item span { font-size: .875rem; }
}

/* ===== Thai tone marks in the wordmark (2026-09-14) =====
 * The display face sets a stacked tone mark about 1.41em above the baseline. The wordmark box
 * clips its overflow at a 1.25 line box, so "เที่ยว" was losing its ไม้เอก on every page.
 * A taller line box keeps the mark inside the clip; nothing else about the mark changes. */
body[data-design-page] .app-header .wordmark { line-height: 1.5; }

/* ===== hidden means hidden (2026-09-15, found in live use on build 158) =====
 * A page-scoped `display:` rule outranks the user agent's `[hidden] { display: none }`, so any
 * control this rollout gave a display value stayed on screen while the app believed it was away.
 * Live that printed a dead "ลองเปิดแผนที่อีกครั้ง" retry button on every place with nothing to
 * retry, and an 8px empty urgent band on Home and the news pages. approved-journey.css already
 * carried this guard for its own pages; this is the same rule for every design page.
 * A visitor must never be able to press a control the app has taken away. */
body[data-design-page] [hidden] { display: none !important; }

/* Public sweep: keep the existing composition, but retain full photos and readable copy. */
html body img[data-content-photo] {
  object-fit: contain !important;
  transform: none !important;
}
.content-photo-host { position: relative; }
html body .content-photo-trigger {
  position: absolute;
  z-index: 1;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
}
html[data-input="key"] .content-photo-trigger:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}
html body :is(.save-heart, .passport-cta, .home-lang a, .map-pin, .map-place-card__close,
  .maplibregl-ctrl-group button, .maplibregl-ctrl-attrib a) {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}
html body .home-lang a, html body .maplibregl-ctrl-attrib a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body :is(.place-name, .answer-why, [data-home-route-name], .news-summary--row,
  .merchant-row__name, .merchant-row__blurb, .merchant-row__decision,
  .merchant-row__hours, .route-meta, .map-place-card__meta) {
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  overflow-wrap: anywhere;
}

/* Keep long map copy in document flow once the compact overlay cannot hold it. */
html body .places-result-status {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.5 !important;
}
html body [data-places-root][data-map-reflow="true"] :is(.view-switch--compact, .places-result-status) {
  transform: none !important;
  margin: .5rem var(--space-gutter) !important;
  max-width: calc(100% - 2 * var(--space-gutter)) !important;
}
html body [data-places-root][data-map-reflow="true"] .map-shell {
  height: auto !important;
  overflow: visible !important;
}
html body [data-places-root][data-map-reflow="true"] .map-full {
  position: relative;
  inset: auto;
  height: var(--p02-map-h, 504px);
}
html body [data-places-root][data-map-reflow="true"] .map-place-card {
  position: relative;
  inset: auto;
  max-block-size: none;
  overflow: visible;
}
html body [data-places-root][data-map-reflow="true"] .map-place-card__actions { grid-template-columns: 1fr !important; }
html body [data-places-root][data-map-reflow="true"] .maplibregl-ctrl-bottom-right { top: auto !important; bottom: 0; }