/* Ari · Find a few — app styles on the design-system tokens (tokens/tokens.css).
   Flat surfaces, no device frame, pill shapes reserved for primary actions. */

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--neutral-50); /* visible only beside the column on desktop */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Visually-hidden but screen-reader accessible. The TCT info button relies on
   this to hide its label text; without it the label spills out of the 22px
   button and breaks the row on first paint. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Thai face everywhere in Thai mode; .th covers Thai content inside EN UI */
.th { font-family: var(--font-th); }
html[lang="th"] body { font-family: var(--font-th); }
/* Thai script stacks marks above/below the baseline; tight Latin leading clips
   them. Loosen line-height wherever Thai renders (TH UI mode or .th content). */
html[lang="th"] h1, html[lang="th"] .sp-word, html[lang="th"] .sp-line,
html[lang="th"] .detail-sheet h1, html[lang="th"] .imgcap .name,
h1.th, .name.th, .detail-sheet h1.th, .sp-line.th { line-height: var(--lh-th-tight); }
html[lang="th"] .best, html[lang="th"] .sub, html[lang="th"] .dsec p,
html[lang="th"] .detail-meta, .best.th, .dsec p.th { line-height: var(--lh-th); }

/* ---------- App column (no fake phone) ---------- */
#app {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-page);
  overflow: hidden;
}
@media (min-width: 480px) {
  #app { border-left: var(--border-w) solid var(--border-subtle); border-right: var(--border-w) solid var(--border-subtle); }
}

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--space-200) + env(safe-area-inset-top)) var(--space-250)
           calc(var(--space-300) + env(safe-area-inset-bottom));
  background: var(--bg-page);
}
.screen.on { display: flex; }

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-150);
  color: var(--text-primary);
}

.sub {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-200);
}

/* ---------- Brand bar (Ask) ---------- */
.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-400);
}
.wordmark {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

/* ---------- Language toggle (44px hit area) ---------- */
.lang {
  display: inline-flex;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-25);
  gap: var(--space-25);
}
.lang__opt {
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--space-150);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.lang__opt:hover { color: var(--text-primary); }
.lang__opt:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.lang__opt.on { background: var(--neutral-900); color: var(--neutral-0); }
/* Mini toggle is visually compact but keeps the design system's 44px touch
   target — it lives on in-motion screens (deck/detail on a moving BTS), where
   an undersized tap target fails one-handed use and WCAG 2.2 target-size. */
.lang--mini .lang__opt { min-width: var(--target-min); padding: 0 var(--space-100); font-size: var(--fs-micro); }

/* Topbar rewind button (deck): matches the backlink pill weight */
.topbtn {
  width: var(--target-min);
  height: var(--target-min);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 140ms, color 140ms, opacity 140ms;
}
.topbtn:not(:disabled):hover { background: var(--neutral-100); color: var(--text-primary); }
.topbtn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.topbtn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Ask: search field (the anchor) ---------- */
.field {
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-200) var(--space-250);
  display: flex;
  align-items: center;
  gap: var(--space-150);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms, box-shadow 140ms;
}
.field:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.field svg { flex: none; color: var(--text-secondary); }
#need {
  border: 0;
  outline: 0;
  font: inherit;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: transparent;
  width: 100%;
}
#need::placeholder { color: var(--text-secondary); font-weight: var(--fw-regular); }
/* Clear (×) appears only while there is text; ::before pads the hit area
   to ~44px without growing the field. */
.field__clear {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -2px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms, color 120ms, transform 120ms var(--ease);
}
.field__clear::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.field__clear:hover { background: var(--neutral-200); color: var(--text-primary); }
.field__clear:active { transform: scale(0.9); }
.field__clear:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.field__clear[hidden] { display: none; }
.fieldhint {
  margin: var(--space-75, 6px) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

/* ---------- Ask: example chips (they fill the input) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-100);
  margin-bottom: var(--space-300);
}
.chip {
  position: relative;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  min-height: 34px;
  padding: 0 var(--space-150);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  animation: chipin 360ms var(--ease) forwards;
  transition: background 140ms, border-color 140ms, transform 140ms var(--ease), box-shadow 140ms;
}
.chip::before {
  content: "";
  position: absolute;
  inset: -5px -4px;
}
.chip.pulse { transform: translateY(-2px); border-color: var(--pink-300); box-shadow: var(--shadow-sm); }
.chip:hover { color: var(--text-primary); background: var(--surface-raised); border-color: var(--neutral-400); }
.chip:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.chip:active { transform: scale(0.97); }
@keyframes chipin {
  to { opacity: 1; transform: none; }
}

/* ---------- Ask: location status ---------- */
.locpill {
  margin-top: var(--space-200);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 var(--space-200);
  min-height: var(--target-min);
  max-width: 100%;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: background 140ms, border-color 140ms, color 140ms, box-shadow 140ms, transform 140ms var(--ease);
}
.locpill svg { flex: none; }
.locpill span { min-width: 0; }
.locpill:hover { background: var(--surface-raised); border-color: var(--neutral-400); }
.locpill:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.locpill:active { transform: scale(0.98); }
.locpill.on {
  color: var(--pink-700);
  border-color: var(--pink-200);
  background: var(--pink-50);
  cursor: default;
}

/* ---------- Ask: ไทยช่วยไทย hard-filter checkbox ---------- */
.tct {
  margin-top: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  min-height: var(--target-min);
  max-width: 100%;
  cursor: pointer;
}
/* Native input drives state + a11y; the box is the visible control. */
.tct input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tct__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 2px solid var(--neutral-400);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--neutral-0);
  transition: background 150ms ease, border-color 150ms ease;
}
.tct__box svg { opacity: 0; transform: scale(0.6); transition: opacity 150ms ease, transform 150ms ease; }
.tct__logo {
  flex: none;
  width: 76px;
  height: 50px;
  object-fit: contain;
}
.tct__text { min-width: 0; }
.tct__info {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.tct__info:hover,
.tct__info[aria-expanded="true"] { color: var(--pink-600); }
.tct__info:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: 999px; }
/* Tap-triggered floating popover (Card surface spec): understanding stays a
   tap away rather than always on-screen, since the eligibility rules are
   dense and most users never need them. Anchored to the icon, not in flow,
   so it never pushes the row below it around. */
/* position:fixed + JS-computed top/left (see tct-info click handler): #app
   clips overflow for the swipe-card fan effect elsewhere, so an
   absolutely-positioned popover anchored inside it gets silently clipped
   the moment it extends past #app's own box. Fixed positioning escapes that
   ancestor entirely and paints above everything regardless of scroll. */
/* Ink surface (same family as the toast): reads as a system hint, floats
   clearly above the page without needing a border. */
.tct__tooltip {
  position: fixed;
  z-index: var(--z-modal);
  width: max-content;
  max-width: min(280px, calc(100vw - var(--space-400)));
  padding: var(--space-150) var(--space-200);
  border-radius: var(--radius-md);
  background: var(--neutral-900);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--neutral-0);
  text-align: left;
}
html[lang="th"] .tct__tooltip { line-height: var(--lh-th); }
.tct__tooltip[hidden] { display: none; }
.tct__tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 11px; /* aligns to the ~22px info icon's center */
  border: 6px solid transparent;
  border-bottom-color: var(--neutral-900);
}
.tct__tooltip.above::before {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--neutral-900);
}
.tct:hover .tct__box { border-color: var(--pink-500); }
.tct input:checked + .tct__box {
  background: var(--pink-600);
  border-color: var(--pink-600);
}
.tct input:checked + .tct__box svg { opacity: 1; transform: none; }
.tct input:checked ~ .tct__text { color: var(--text-primary); }
.tct input:focus-visible + .tct__box { outline: 0; box-shadow: var(--focus-ring); }

/* ---------- Ask: teaser fan (five distinct Ari photos) ---------- */
.teaser {
  position: relative;
  flex: 1;
  min-height: 130px;
  margin: var(--space-150) 0;
}
.tease {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 122px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
  border: var(--border-w) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
/* five-card fan, five distinct Ari photos - depth falls off to the edges */
.tease--1 { transform: translate(-50%, -50%) translateX(-114px) rotate(-13deg) scale(0.9); opacity: 0.3; }
.tease--2 { transform: translate(-50%, -50%) translateX(-60px) rotate(-7deg) scale(0.96); opacity: 0.55; }
.tease--4 { transform: translate(-50%, -50%) translateX(60px) rotate(7deg) scale(0.96); opacity: 0.55; }
.tease--5 { transform: translate(-50%, -50%) translateX(114px) rotate(13deg) scale(0.9); opacity: 0.3; }
.tease--3 {
  transform: translate(-50%, -50%) rotate(-1.5deg);
  box-shadow: var(--shadow-md);
  animation: teasefloat 6s ease-in-out 1.5s infinite;
}
@keyframes teasefloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  50% { transform: translate(-50%, -50%) translateX(8px) rotate(0.5deg); }
}
.tease__stamp {
  position: absolute;
  top: var(--space-100);
  left: var(--space-100);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--green-600);
  border: 2px solid var(--green-600);
  background: var(--surface-raised);
  padding: var(--space-25) var(--space-100);
  border-radius: var(--radius-xs);
  transform: rotate(-10deg);
}

/* ---------- Primary CTA (pill: reserved for primary actions) ---------- */
.cta {
  font: inherit;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-400);
  min-height: 54px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 150ms var(--ease), background 120ms, box-shadow 150ms;
}
.cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.cta:focus-visible { outline: 0; box-shadow: var(--focus-ring), var(--shadow-md); }
.cta:active { background: var(--color-primary-press); transform: translateY(0) scale(0.98); }

/* ---------- Byline ---------- */
.byline {
  margin: var(--space-200) 0 0;
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}
.byline__link {
  color: var(--text-link);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.byline__link:hover { text-decoration: underline; }
.byline__link:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  margin-bottom: var(--space-100);
}
.topbar__spacer { flex: 1; }
.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 var(--space-200) 0 var(--space-100);
  min-height: var(--target-min);
  flex: none;
  cursor: pointer;
  transition: background 140ms;
}
.backlink:hover { background: var(--neutral-100); }
.backlink:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* ---------- Deck progress ---------- */
.progress {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 340ms var(--ease);
}
.progress.indeterminate .progress__fill {
  width: 32%;
  animation: indet 1.2s ease-in-out infinite alternate;
}
@keyframes indet {
  from { transform: translateX(-40%); opacity: 0.6; }
  to { transform: translateX(240%); opacity: 1; }
}

.deckhead {
  font-size: var(--fs-label);
  color: var(--text-secondary);
  margin: var(--space-150) var(--space-25) var(--space-50);
  line-height: var(--lh-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deckhead b { color: var(--text-primary); font-weight: var(--fw-bold); }

/* ---------- Card stage ---------- */
/* Size container: cards adapt to the height that's actually left after the
   browser chrome (custom-tab header, Android nav bar) eats into 100dvh —
   a viewport media query can't see that, a container query can. */
.stage {
  position: relative;
  flex: 1;
  margin: var(--space-100) 0 var(--space-50);
  min-height: 0;
  container-type: size;
}

.card {
  position: absolute;
  inset: 0;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.card.behind {
  transform: scale(0.94) translateY(15px);
  z-index: 1;
  box-shadow: var(--shadow-sm);
  filter: saturate(0.94);
}
.card.top { z-index: 2; cursor: grab; }
.card.top:active { cursor: grabbing; }
.card.anim { transition: transform 380ms var(--ease), opacity 380ms var(--ease); }

/* Onboarding hint: sweep right (Choose peeks), settle, sweep left (Pass peeks) */
.card.hint { animation: swipehint 2600ms var(--ease) 600ms 1 both; }
@keyframes swipehint {
  0% { transform: none; }
  15% { transform: translateX(32px) rotate(2.5deg); }
  27% { transform: translateX(26px) rotate(2.1deg); }
  42% { transform: none; }
  57% { transform: translateX(-32px) rotate(-2.5deg); }
  69% { transform: translateX(-26px) rotate(-2.1deg); }
  84%, 100% { transform: none; }
}
.card.hint .stamp--keep { animation: peekkeep 2600ms var(--ease) 600ms 1 both; }
@keyframes peekkeep { 0%, 40%, 100% { opacity: 0; } 13%, 30% { opacity: 0.9; } }
.card.hint .stamp--skip { animation: peekskip 2600ms var(--ease) 600ms 1 both; }
@keyframes peekskip { 0%, 46%, 88%, 100% { opacity: 0; } 55%, 72% { opacity: 0.9; } }

.card__img {
  position: relative;
  flex: 0 0 52%;
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
}
.card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 26, 0.84) 0%, rgba(9, 9, 26, 0.28) 38%, rgba(9, 9, 26, 0) 62%);
}
.imgcap {
  position: absolute;
  left: var(--space-250);
  right: var(--space-250);
  bottom: var(--space-200);
  z-index: 2;
  color: var(--text-on-dark);
}
.imgcap .name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  text-shadow: 0 2px 12px rgba(9, 9, 26, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__body {
  flex: 1;
  padding: var(--space-200) var(--space-250);
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  min-height: 0;
  overflow: hidden;
}

.place-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-50) var(--space-100);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.place-line .dot { width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--neutral-300); }
.place-line .walk { flex: none; color: var(--pink-700); font-weight: var(--fw-bold); }
.place-line .gscore { flex: none; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-secondary); }
.gscore .star { color: var(--amber-500); flex: none; }
.gscore .num { font-family: var(--font-mono); }

.tct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: var(--border-w) solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}
.tct-badge img {
  width: 60px;
  height: 40px;
  object-fit: contain;
}
.tct-badge--card,
.tct-badge--pick {
  position: absolute;
  z-index: 3;
  top: var(--space-150);
  right: var(--space-150);
  padding: 3px 5px;
}
.tct-badge--detail {
  margin-bottom: var(--space-150);
  padding: 4px 6px;
}

/* ---------- closed-now: trust signal, top-left so it never fights the TCT badge ---------- */
.closed-badge {
  position: absolute;
  z-index: 3;
  top: var(--space-150);
  left: var(--space-150);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(20, 20, 20, 0.78);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.closed-inline {
  margin-left: var(--space-100);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken, rgba(0, 0, 0, 0.06));
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 600;
}

/* ---------- ไทยช่วยไทย: empty-state logo + recheck link ---------- */
.none__logo {
  display: block;
  width: 92px;
  height: 60px;
  object-fit: contain;
  margin-bottom: var(--space-150);
}
/* Both carry an explicit display, which beats the browser's [hidden]:display:none.
   Without these guards the ไทยช่วยไทย logo + recheck link show on EVERY empty
   result screen, even when the user never ticked the filter. */
.none__logo[hidden] { display: none; }
.none__recheck[hidden] { display: none; }
/* Tertiary action: reads as the third button under the primary/secondary
   pair — centred, 44px target, quiet text-only weight. */
.none__recheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  text-align: center;
  margin-top: var(--space-100);
  min-height: var(--target-min);
  padding: 0 var(--space-200);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--pink-700);
  text-decoration: none;
  transition: background 120ms;
}
.none__recheck:hover { background: var(--pink-50); }
.none__recheck:active { background: var(--pink-100); }
.none__recheck:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* ---------- ไทยช่วยไทย: acknowledgement bottom sheet ---------- */
.sheet-scrim[hidden] { display: none; }
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 16, 14, 0.44);
  animation: scrimin 160ms ease forwards;
}
.sheet {
  width: 100%;
  max-width: 430px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--space-300) var(--space-250)
           calc(var(--space-300) + env(safe-area-inset-bottom));
  text-align: center;
  animation: sheetin 260ms var(--ease) forwards;
}
.sheet__logo {
  width: 92px;
  height: 60px;
  object-fit: contain;
  margin: 0 auto var(--space-150);
}
.sheet__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-100);
}
.sheet__body {
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-200);
}
.sheet__link {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--pink-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: var(--space-250);
}
.sheet__link:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.sheet__ack { width: 100%; }

@keyframes scrimin { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sheet-scrim, .sheet { animation: none; }
}

.best {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prov {
  /* The provenance line is the trust disclosure the POC hinges on ("does
     presentation alone build trust?") — it must stay legible outdoors, so it
     sits at caption size, not the smallest micro size. */
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin: 0;
}

/* facts: plain icon + text rows, not chips */
.facts { display: flex; flex-direction: column; gap: var(--space-50); margin-top: auto; }
.fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  max-width: 100%;
}
.fact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact svg { color: var(--neutral-400); flex: none; }

.maplink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  min-height: 40px;
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-link);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-100);
  margin-left: calc(var(--space-100) * -1);
  transition: background 120ms;
}
.maplink:hover { background: var(--pink-50); }
.maplink:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.maplink svg { flex: none; }

/* Body rows never shrink — if space runs out the summary drops a clamp line
   (below) instead of any row getting clipped mid-line. */
.place-line, .best, .prov, .facts, .maplink { flex: none; }

/* ---------- Compact card (short stage after browser chrome) ----------
   Card content priority: photo > name > summary > facts > map link.
   As height disappears the card gives up from the bottom of that list,
   and the photo cedes a little of its share so text never clips. */
@container (max-height: 540px) {
  .card__img { flex-basis: 46%; }
  .card__body { padding: var(--space-150) var(--space-250); gap: var(--space-75, 6px); }
  .imgcap .name { font-size: var(--fs-h4); }
  .best { -webkit-line-clamp: 2; }
  .maplink { min-height: 36px; }
}
@container (max-height: 440px) {
  .card__img { flex-basis: 42%; }
  .maplink { display: none; } /* lowest-priority content; detail view still has it */
}

/* ---------- Loading skeleton ---------- */
.card.skeleton { pointer-events: none; }
.sk {
  background: linear-gradient(100deg, var(--neutral-100) 40%, var(--neutral-50) 50%, var(--neutral-100) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -20% 0; } }
.sk--img { flex: 0 0 52%; }
.sk--line { height: 13px; border-radius: var(--radius-sm); }
.sk--line.w80 { width: 80%; }
.sk--line.w55 { width: 55%; }

/* ---------- Swipe stamps ---------- */
.stamp {
  position: absolute;
  top: var(--space-300);
  z-index: 5;
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  padding: var(--space-50) var(--space-200);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  background: var(--surface-raised);
}
.stamp--keep { left: var(--space-250); color: var(--green-600); border: 4px solid var(--green-600); transform: rotate(-14deg); }
.stamp--skip { right: var(--space-250); color: var(--red-600); border: 4px solid var(--red-600); transform: rotate(14deg); }

/* ---------- Undo ---------- */
.undopill {
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  z-index: 6;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--neutral-0);
  background: var(--neutral-900);
  border: 0;
  border-radius: var(--radius-pill);
  min-height: var(--target-min);
  padding: 0 var(--space-300);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.undopill:focus-visible { outline: 0; box-shadow: var(--focus-ring), var(--shadow-md); }

/* ---------- Dock ---------- */
.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-300);
  padding: var(--space-150) 0 var(--space-50);
}
.round {
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 150ms var(--ease), box-shadow 150ms, background 120ms;
}
.round:hover { transform: translateY(-2px); }
.round:focus-visible { outline: 0; box-shadow: var(--focus-ring), var(--shadow-md); }
.round:active { transform: scale(0.92); }
.round.skip {
  width: 56px; height: 56px;
  color: var(--red-600);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.round.keep {
  width: 68px; height: 68px;
  color: var(--color-on-primary);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.round.keep:hover { background: var(--color-primary-hover); }

/* ---------- Shortlist ---------- */
.echo { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0 0 var(--space-200); }
.echo b { color: var(--text-primary); font-weight: var(--fw-bold); }

.picks {
  list-style: none;
  margin: 0;
  padding: var(--space-25);
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.pick {
  flex: none;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 150ms var(--ease), box-shadow 150ms;
}
.pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pick:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.pick:active { transform: scale(0.99); }
.pick__img {
  position: relative;
  height: 128px;
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
}
.pick__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 26, 0.55), rgba(9, 9, 26, 0));
}
.badge {
  position: absolute;
  top: var(--space-150);
  left: var(--space-150);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--neutral-900);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-50) var(--space-150);
}
.badge.first::before { content: "✓"; color: var(--green-600); }
.badge.kept { color: var(--neutral-700); }
.pick__name {
  position: absolute;
  left: var(--space-150);
  bottom: var(--space-100);
  right: var(--space-150);
  z-index: 2;
  color: var(--text-on-dark);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  text-shadow: 0 2px 10px rgba(9, 9, 26, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick__body { padding: var(--space-150); display: flex; align-items: center; gap: var(--space-100); }
.pick__facts {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick__go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-link);
  flex: none;
}

.honesty { margin-top: var(--space-150); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-secondary); }
.honesty a { color: var(--pink-700); font-weight: var(--fw-bold); border-radius: var(--radius-xs); }
.honesty a:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* ---------- Detail (Lyft sheet) ---------- */
.detail { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-250); }
.detail-hero {
  position: relative;
  min-height: 224px;
  margin: var(--space-150) calc(var(--space-250) * -1) 0;
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
}
.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 26, 0.16), rgba(9, 9, 26, 0));
}
.detail-sheet { padding: var(--space-300) 0; }
.detail-sheet h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 var(--space-100); }
.detail-meta {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-300);
}
.detail-meta .gscore { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: var(--fs-caption); }
.detail-cta { display: grid; gap: var(--space-200); }

.pillbtn {
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  min-height: 52px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-w) solid transparent;
  transition: transform 150ms var(--ease), background 120ms, box-shadow 150ms;
}
.pillbtn:active { transform: scale(0.98); }
.pillbtn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.pillbtn.primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md); }
.pillbtn.primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-lg); }
.pillbtn.ghost { background: var(--surface-card); color: var(--text-primary); border-color: transparent; }
.pillbtn.ghost:hover { background: var(--neutral-100); }

.dsec { border-top: 1px solid var(--border-subtle); padding: var(--space-300) 0; }
.dsec h3 {
  font-size: var(--fs-micro);
  margin: 0 0 var(--space-100);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.dsec p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); }
.dsec .prov { margin-top: var(--space-100); }
.dquote p { font-style: italic; }
.dquote .by {
  display: block;
  margin-top: var(--space-100);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.caveat { display: flex; gap: var(--space-100); align-items: flex-start; }
.caveat svg { flex: none; color: var(--amber-600); margin-top: 3px; }

.drow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-150);
  padding: var(--space-100) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.drow + .drow { border-top: 1px solid var(--border-subtle); }
.drow svg { flex: none; color: var(--neutral-400); margin-top: 3px; }
.drow .num { font-size: var(--fs-label); }

/* ---------- None screen ---------- */
/* Lyft-style empty state: a calm, centred moment rather than a top-aligned
   error. The content column centres vertically when there is no skip list to
   scroll; an accent glyph anchors the eye, a bold headline states the situation
   plainly, and the actions read as a clear primary/secondary pair. */
#s-none { justify-content: center; }
#s-none.has-list { justify-content: flex-start; } /* skip list needs the scroll room */

.none__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-100);
  margin-bottom: var(--space-250);
}
.none__glyph[hidden] { display: none; } /* let the hidden attr win over inline-flex */
.none__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-pill);
  background: var(--pink-50);
  color: var(--pink-600);
  margin-bottom: var(--space-100);
}
#s-none.has-list .none__hero { text-align: left; align-items: flex-start; margin-bottom: var(--space-150); }
#s-none.has-list .none__glyph { display: none; } /* keep the list-recovery view compact */
#s-none .none__hero h1 { margin-bottom: var(--space-75, 6px); }
#s-none .none__hero .sub { margin-bottom: 0; }

.checkline {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-150) var(--space-200);
  margin: 0 0 var(--space-150);
}
.sub2 {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: var(--space-100) 0 0;
}
.mini {
  list-style: none;
  margin: var(--space-100) 0 0;
  padding: var(--space-25);
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.mini__item {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-100);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform 150ms var(--ease), box-shadow 150ms;
}
.mini__item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mini__item:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.mini__thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--neutral-200);
  flex: none;
}
.mini__body { flex: 1; min-width: 0; }
.mini__name { display: block; font-weight: var(--fw-bold); font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-secondary); margin-top: var(--space-25); }
.mini__go { color: var(--text-link); flex: none; }

.actions { display: flex; flex-direction: column; gap: var(--space-100); margin-top: var(--space-150); }
.btn2 {
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  padding: var(--space-200);
  min-height: var(--target-min);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: var(--border-w) solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-primary);
  transition: transform 150ms var(--ease), background 150ms;
}
.btn2:hover { background: var(--neutral-100); }
.btn2:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn2:active { transform: scale(0.98); }
.btn2.primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn2.primary:hover { background: var(--color-primary-hover); }

/* ---------- Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  max-width: calc(100% - var(--space-400));
  text-align: center;
  background: var(--neutral-900);
  color: var(--neutral-0);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  padding: var(--space-150) var(--space-250);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Splash / onboarding ---------- */
.splash {
  padding: 0;
  z-index: var(--z-modal);
  background: var(--neutral-900);
}
.splash[hidden] { display: none; }
.splash.on { display: flex; }
.splash__bg { position: absolute; inset: 0; }
.splash__g { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.splash__g--vivid {
  background:
    radial-gradient(120% 90% at 18% 8%, var(--pink-600) 0%, rgba(214, 0, 160, 0) 56%),
    radial-gradient(110% 85% at 85% 78%, var(--ari-bougain) 0%, rgba(198, 65, 126, 0) 60%),
    var(--neutral-900);
}
.splash__g--mid {
  background:
    radial-gradient(120% 90% at 22% 12%, var(--pink-100) 0%, rgba(255, 214, 241, 0) 62%),
    radial-gradient(100% 80% at 82% 82%, var(--pink-300) 0%, rgba(255, 92, 207, 0) 55%),
    var(--neutral-0);
}
.splash__g--soft {
  background:
    radial-gradient(100% 70% at 50% 0%, var(--pink-50) 0%, rgba(255, 240, 250, 0) 62%),
    var(--bg-page);
}
.splash[data-beat="1"] .splash__g--vivid,
.splash[data-beat="2"] .splash__g--mid,
.splash[data-beat="3"] .splash__g--soft { opacity: 1; }

.splash__content {
  position: relative;
  z-index: 1;
  transition: color 500ms var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--space-800) + env(safe-area-inset-top)) var(--space-300)
           calc(var(--space-400) + env(safe-area-inset-bottom));
  color: var(--text-primary);
}
.splash[data-beat="1"] .splash__content { color: var(--neutral-0); }
.splash h1 { color: inherit; }

.sp-word {
  font-size: 64px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
.sp-line { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: var(--space-150) 0 0; }


/* staggered entrance for beat content */
.sp-in {
  opacity: 0;
  transform: translateY(12px);
  animation: spin-up 480ms var(--ease) forwards;
}
@keyframes spin-up { to { opacity: 1; transform: none; } }
.sp-out { animation: spin-out 260ms var(--ease) forwards; }
@keyframes spin-out { to { opacity: 0; transform: translateY(-12px); } }

/* ---------- Short viewports (browser chrome eats ~150-200px on real phones) ----------
   Trim vertical chrome so the stage — and therefore the card's text area —
   keeps as much height as possible. Touch targets stay >= 44px. */
@media (max-height: 740px) {
  .screen {
    padding-top: calc(var(--space-150) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-150) + env(safe-area-inset-bottom));
  }
  h1 { font-size: var(--fs-h2); }
  .brandbar { margin-bottom: var(--space-250); }
  .chips { margin-bottom: var(--space-200); }
  .teaser { min-height: 96px; }
  .deckhead { margin-top: var(--space-100); }
  .dock { gap: var(--space-250); padding: var(--space-100) 0 var(--space-25); }
  .round.skip { width: 50px; height: 50px; }
  .round.keep { width: 60px; height: 60px; }
  .undopill { bottom: 92px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .card.anim, .card.hint, .card.hint .stamp--keep, .card.hint .stamp--skip,
  .tease--3, .sk, .chip, .sp-in, .sp-out, .progress.indeterminate .progress__fill {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .splash__g { transition: none; }
  .card, .cta, .round, .pick, .btn2, .pillbtn, .toast, .backlink, .locpill,
  .lang__opt, .progress__fill, .mini__item {
    transition: none;
    animation: none;
  }
}