/* 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; }