/* Hallmark · macrostructure: Ecosystem Index · tone: warm/playful · anchor hue: clay * genre: playful · theme: Warm Uthai (locked project system) * enrichment: generated Uthai photography · nav: locked app header + bottom bar · footer: n/a app screen * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 * gates: contrast pass · slop source-pass · mobile source-pass (render gap disclosed) */ /* tokens.css is linked directly in every so it does not wait for this file to * parse; the import stays as the fallback for anything loading styles.css alone. */ /* tokens.css is linked first in every page head — an @import here fetched it a second time under a stale version key that no build bump ever touched. */ *, *::before, *::after { box-sizing: border-box; } /* Owner 2026-09-07: remove sample/demo presentation across the app. These are * annotation-only nodes; their surrounding content and runtime audience stay intact. */ [data-preview-banner], [data-presentation-note], .ux13-preview-note, .ux13-sample-chip, .ux13-inline-sample, .checkin-v3-preview-label, .checkin-v3-result-preview-label, .news-demo, .route-section-sample, .route-action-sample, .merchant-truth, .merchant-adjacent-truth, .merchant-hero__sample, .stay-sample-badge, .stay-preview-truth, .ux14-truth-banner, .ux14-sample-label, .chip--sample, .prototype-note, .footer-line--proto, .route-v3-truth, .route-sample-label, .stay-result__photo-label, .ux14-news-preview, .ux14-news-publisher, .ux14-weather-future, .search-preview-note { display: none !important; } html, body { /* Tab must never park a control behind the fixed bottom bar: the browser scrolls a focused * element into view. app-core measures the active nav surface (including its safe-area * padding), adds a 17 px measured reserve (guaranteeing at least 16 px after rounding), * and writes this one shared reserve. */ scroll-padding-block-end: var(--uthai-nav-reserve, 0px); min-height: 100%; overflow-x: clip; } /* No-nav pages start at zero. :has() gives nav pages a safe pre-JS estimate; ResizeObserver * replaces it with the real block size before any mode/zoom-dependent decision is made. */ :root { --uthai-nav-reserve: 0px; } html:has(.bottom-nav) { --uthai-nav-reserve: calc(var(--size-nav) + var(--space-md) + env(safe-area-inset-bottom, 0px)); } html { background: var(--color-canvas); } body { margin: 0; background: linear-gradient(135deg, var(--color-page-backdrop-a), var(--color-page-backdrop-b)); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, a { font: inherit; } button { color: inherit; } /* ROOT CAUSE of "a box flashes on every tap, mobile/device-mode only" (owner, 2026-08-16, * seen on this app, webuthai and the LIFF alike): Chrome on touch paints its own * -webkit-tap-highlight-color — default rgba(0,0,0,0.18), a grey slab over the tapped * element — and holds it until the next page paints. It never appears with a mouse, which * is why the desktop web looked fine. It was switched off on