/* App styles. Every value comes from tokens.css; comments cite TOKENS.md rows
   or DESIGN-STUDY sections. [P] = provisional until an app screenshot. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }

/* ---------- Page ---------- */
.view {
  width: 100%;
  max-width: var(--column-max);
  margin: 0 auto;
  min-height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-32));
  outline: none;
}
body.no-tabbar .view { padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-48)); }

/* Large tab title [P]: app-only; uses the 32/36/700 style (§1.2). */
.page-title {
  padding: var(--space-24) var(--inset-page) var(--space-16);
  font-size: var(--font-size-32);
  line-height: var(--font-line-32);
  letter-spacing: var(--font-track-32);
  font-weight: var(--font-weight-bold);
}
/* Detail title: listing-page title 26/30 (§1.2) */
.page-title--detail {
  padding: var(--space-24) var(--inset-page) var(--space-4);
  font-size: var(--font-size-26);
  line-height: var(--font-line-26);
  letter-spacing: var(--font-track-26);
  font-weight: var(--font-weight-semibold);
}
.page-sub {
  padding: 0 var(--inset-page);
  margin: calc(-1 * var(--space-8)) 0 var(--space-24);
  font-size: var(--font-size-14);
  line-height: var(--font-line-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.page-title--detail + .page-sub { margin-top: 0; }
.lede {
  padding: 0 var(--inset-page);
  font-size: var(--font-size-16);
  line-height: var(--font-line-16-body);
  color: var(--color-text-secondary);
}
.section { padding: 0 var(--inset-page); }
.divider { height: 1px; margin: 0 var(--inset-page); background: var(--color-border); }
.accent { color: var(--color-accent); font-weight: var(--font-weight-semibold); }

/* ---------- Text roles ---------- */
.row__title { font-size: var(--font-size-16); line-height: var(--font-line-16); font-weight: var(--font-weight-medium); }
.row__meta { font-size: var(--font-size-14); line-height: var(--font-line-14); color: var(--color-text-secondary); }
.row__detail { margin-top: var(--space-4); font-size: var(--font-size-14); line-height: var(--font-line-14-body); color: var(--color-text-secondary); }

/* ---------- Section header (checklist row 3) ---------- */
.sechead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: var(--size-arrow-chip);
  padding: var(--pad-section-top) var(--inset-page) 0;
  margin-bottom: var(--space-18);
}
.sechead__title {
  font-size: var(--font-size-18);
  line-height: var(--font-line-18);
  letter-spacing: var(--font-track-18);
  font-weight: var(--font-weight-semibold);
}
.arrowchip {
  flex: none; display: grid; place-items: center;
  width: var(--size-arrow-chip); height: var(--size-arrow-chip);
  border-radius: var(--radius-round);
  background: var(--color-bg-interactive);
  transition: transform var(--dur-press) var(--ease-standard);
}
a.sechead:active .arrowchip { transform: scale(var(--press-icon)); }

/* ---------- Chips / tags (checklist rows 23, 24) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.chip {
  display: inline-block;
  padding: 2.5px var(--space-4);
  border-radius: var(--radius-6);
  background: var(--color-tag-bg);
  font-size: var(--font-size-11);
  line-height: var(--font-line-11);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.chip--accent { background: var(--color-accent-tint); color: var(--color-accent); }
.chip--success { background: var(--color-success-tint); color: var(--color-success); }
.chip--note { margin-top: var(--space-12); }
/* Leave-by is the headline of a departure, so its chip is one step larger. */
.chip--leave {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-12);
  line-height: var(--font-line-12);
  font-weight: var(--font-weight-semibold);
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

/* ---------- Home: countdown (MIRROR-MAP row 17) ---------- */
.countdown { padding: var(--space-8) var(--inset-page) var(--space-32); }
.countdown__number {
  font-size: var(--font-size-72); line-height: var(--font-line-72);
  letter-spacing: var(--font-track-72); font-weight: var(--font-weight-medium);
}
.countdown__label {
  margin-top: var(--space-8);
  font-size: var(--font-size-18); line-height: var(--font-line-18);
  letter-spacing: var(--font-track-18); font-weight: var(--font-weight-semibold);
}
.countdown__meta {
  margin-top: var(--space-4);
  font-size: var(--font-size-15); line-height: var(--font-line-15);
  font-weight: var(--font-weight-medium); color: var(--color-text-secondary);
}

/* ---------- Home: Now & Next panel (search-modal panel, §3.10) ---------- */
.panel {
  margin: 0 var(--inset-float);
  padding: var(--space-24);
  border-radius: var(--radius-24);
  background: var(--color-bg);
  box-shadow: var(--shadow-panel);
}
.panel__label { font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.panel__now {
  margin-bottom: var(--space-16); padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium);
}
.panel__headline {
  margin: var(--space-4) 0 var(--space-8);
  font-size: var(--font-size-26); line-height: var(--font-line-26);
  letter-spacing: var(--font-track-26); font-weight: var(--font-weight-semibold);
}

/* Tomorrow strip: pill-style row (search pill border + shadow, §3.1) */
.strip {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 var(--inset-float);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-pill);
  transition: transform var(--dur-press) var(--ease-standard);
}
.strip:active { transform: scale(0.99); }
.strip__label { font-size: var(--font-size-12); line-height: var(--font-line-12); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.strip__value { font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium); }

/* ---------- Day rows (suggestion-row anatomy, §3.10) ---------- */
.list { padding: 0 var(--inset-page); }
.dayrow {
  display: flex; gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-divider);
}
.dayrow:first-child { padding-top: 0; }
.dayrow:last-child { border-bottom: 0; }
.datetile {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--size-thumb); height: var(--size-thumb);
  border-radius: var(--radius-12);
  background: var(--color-bg-interactive);
}
.datetile__mon { font-size: var(--font-size-11); line-height: var(--font-line-11); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.datetile__num { font-size: var(--font-size-18); line-height: var(--font-line-18); font-weight: var(--font-weight-semibold); }
.dayrow__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Timeline (list-row anatomy, §3.9) ---------- */
.timeline { padding: 0 var(--inset-page); }
.ev {
  display: grid; grid-template-columns: var(--space-48) 1fr; gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-divider);
}
.ev:first-child { padding-top: 0; }
.ev__time {
  font-size: var(--font-size-14); line-height: var(--font-line-16);
  font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
}
.ev__body { min-width: 0; }
.ev--past { opacity: 0.45; }

.notes, .bullets { padding: 0 var(--inset-page) 0 calc(var(--inset-page) + var(--space-16)); list-style: disc; }
.notes li, .bullets li {
  margin-bottom: var(--space-8);
  font-size: var(--font-size-14); line-height: var(--font-line-14-body);
  color: var(--color-text-secondary);
}
.bullets { margin-top: var(--space-16); }

/* ---------- Top bar (search-results header, §2.3) ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--inset-page) 0;
}
.iconbtn {
  flex: none; display: grid; place-items: center;
  width: var(--size-icon-button); height: var(--size-icon-button);
  border-radius: var(--radius-round);
  transition: transform var(--dur-press) var(--ease-standard);
}
.iconbtn:active { transform: scale(var(--press-icon)); }
.iconbtn--filled { background: var(--color-bg-interactive); }
.iconbtn--ghost { visibility: hidden; }
.pill--compact {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 58px;
  padding: 10px 19px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
}
.pill__l1 { font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium); }
.pill__l2 { font-size: var(--font-size-12); line-height: 18px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }

/* ---------- Large card (checklist row 6) ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-card-stack); padding: 0 var(--inset-page); }
.cards--past { opacity: 0.6; }
.lcard { display: block; }
.lcard__photo {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: var(--ratio-card-lg);
  border-radius: var(--radius-20);
  background: var(--color-clay-base);
  overflow: hidden;
}
.lcard__art { width: 42%; height: auto; transition: transform var(--dur-fast) var(--ease-spring-fast); }
.lcard:active .lcard__art { transform: scale(0.96); }
.badge {
  position: absolute; top: var(--inset-photo-ui); left: var(--inset-photo-ui);
  padding: 5.5px 9.5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-14);
  background: var(--material-badge-bg);
  -webkit-backdrop-filter: var(--material-badge-blur);
  backdrop-filter: var(--material-badge-blur);
  box-shadow: var(--shadow-2);
  font-size: var(--font-size-11); line-height: 13px; font-weight: var(--font-weight-semibold);
}
.lcard__text {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-text-rows);
  padding: var(--gap-photo-text-lg) var(--inset-card-text) 0;
  font-size: var(--font-size-15); line-height: var(--font-line-15); font-weight: var(--font-weight-medium);
}
.lcard__row1 { display: flex; justify-content: space-between; gap: var(--space-8); }
.lcard__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__aside { flex: none; }
.lcard__sub { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__price { margin-top: var(--space-6); color: var(--color-accent); font-weight: var(--font-weight-semibold); }

/* ---------- Explore carousels (app screenshot 2026-11-11 + §3.4, §2.1) ---------- */
.sechead--btn { width: 100%; text-align: left; }
.sechead--btn:active .arrowchip { transform: scale(var(--press-icon)); }
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - var(--gap-carousel-2) / 2);
  gap: var(--gap-carousel-2);
  padding: var(--space-4) var(--inset-page) var(--space-8);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: inline mandatory; scroll-padding: 0 var(--inset-page);
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.scard { position: relative; min-width: 0; scroll-snap-align: start; }
.scard__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-20); }
.scard__photo {
  position: relative; aspect-ratio: var(--ratio-card-sm);
  border-radius: var(--radius-20); overflow: hidden;
  background: var(--color-bg-photo);
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-press) var(--ease-standard);
}
.scard:has(.scard__link:active) .scard__photo { transform: scale(0.98); }
.scard__img { width: 100%; height: 100%; object-fit: cover; }
.scard__clay { display: grid; place-items: center; width: 100%; height: 100%; }
.scard__clay img { width: 52%; height: auto; }
/* Save button: 32px box, 24px icon, 8px from the photo corner (heart, §3.4) */
.scard__star {
  position: absolute; z-index: 2; top: var(--space-8); right: var(--space-8);
  display: grid; place-items: center;
  width: var(--size-heart); height: var(--size-heart);
  border-radius: var(--radius-round);
  transition: transform var(--dur-press) var(--ease-standard);
}
.scard__star:active { transform: scale(var(--press-heart)); }
.scard__star path { fill: var(--color-heart-fill); stroke: #FFFFFF; }
.scard__star--on path { fill: var(--color-accent); }
.scard__text { display: grid; gap: var(--gap-text-rows); padding: var(--gap-photo-text-sm) var(--inset-card-text) 0; }
.scard__title {
  font-size: var(--font-size-13); line-height: var(--font-line-13); font-weight: var(--font-weight-medium);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.scard__meta {
  font-size: var(--font-size-12); line-height: var(--font-line-12);
  color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Places header stays white on the grey results page */
.phead { background: var(--color-bg); padding-top: env(safe-area-inset-top); margin-top: calc(-1 * env(safe-area-inset-top)); }
body.page-grey .rlist { padding-top: var(--space-24); }

/* ---------- Area results page (app screenshot 2026-11-11, results) ----------
   [S] = measured from the iPhone screenshot at 2.367 px/pt, ±1pt. */
.rhead {
  position: sticky; top: 0; z-index: var(--z-header);
  padding: env(safe-area-inset-top) 0 var(--space-12);
  background: var(--color-bg);
  box-shadow: var(--shadow-header);          /* results header (§2.3) */
}
.fchips {
  display: flex; gap: var(--gap-chip-filter);
  padding: var(--space-12) var(--inset-chiprow) 0;
  overflow-x: auto; scrollbar-width: none;
}
.fchips::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; height: var(--size-chip-filter);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border); border-radius: var(--radius-24);
  background: var(--color-bg);
  font-size: var(--font-size-12); line-height: var(--font-line-12); white-space: nowrap;
  transition: border-color var(--dur-color) var(--ease-standard), background-color var(--dur-color) var(--ease-standard), transform var(--dur-chip-press) var(--ease-standard);
}
.fchip:active { transform: scale(var(--press-chip)); }
.fchip--on { border-color: var(--color-border-strong); box-shadow: inset 0 0 0 1px var(--color-border-strong); background: var(--color-bg-secondary); }

.rlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding: var(--space-24) var(--space-16) 0; } /* [S] 15–16pt side, ~22pt gap */
.rcard {
  position: relative;
  padding: var(--space-6);                   /* [S] photo inset ~7pt */
  border-radius: var(--radius-28);     /* [S] */
  background: var(--color-bg);
  box-shadow: var(--shadow-3);
}
.rcard__media { position: relative; }
.rcard__photo {
  display: block; position: relative;
  aspect-ratio: var(--ratio-card-lg);        /* [S] 346x259 = 4:3 */
  border-radius: var(--radius-20); overflow: hidden;
  background: var(--color-bg-photo);
}
.badge--lg { padding: 4px 12px; font-size: var(--font-size-14); line-height: var(--font-line-14); } /* [S] 28pt tall, 12pt from the photo corner */
.rcard__star { top: var(--space-12); right: var(--space-12); } /* [S] icon sits 16pt in = 12 + 4 box padding */
.rcard__map {
  position: absolute; right: var(--space-12); bottom: var(--space-12);
  display: grid; place-items: center;
  width: 44px; height: 44px;                 /* [S] 44x44, 12pt from the photo corner */
  border-radius: var(--radius-12);
  overflow: hidden;
  border: 2px solid #FFFFFF;                 /* [S] white rim around the map tile */
  box-shadow: var(--shadow-control);
  transition: transform var(--dur-press) var(--ease-standard);
}
.rcard__map:active { transform: scale(var(--press-icon)); }
.rcard__map svg { width: 100%; height: 100%; display: block; }
.dots { position: absolute; left: 0; right: 0; bottom: var(--space-10); display: flex; justify-content: center; gap: var(--space-4); pointer-events: none; } /* [S] dot centre 13pt above photo bottom */
.dot { width: var(--size-dot); height: var(--size-dot); border-radius: 3px; background: rgba(255, 255, 255, 0.6); transition: width var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
.dot--on { width: 14px; background: #FFFFFF; } /* [S] app: active dot is a short pill */
.rcard__text {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-text-rows);
  padding: var(--space-12) var(--space-10) var(--space-10);   /* +6 card padding = 16pt text inset [S] */
  font-size: var(--font-size-15); line-height: var(--font-line-15); font-weight: var(--font-weight-medium);
}
/* Price slot (§3.3): main part #222 underlined, rest grey ("¥26,065 JPY for 4 nights") */
.rcard__price { margin-top: var(--space-6); }
.rcard__price-main { text-decoration: underline; text-underline-offset: 2px; }
.rcard__price-rest { color: var(--color-text-secondary); }
/* Tags row: 11/15 tags, green for planned days (screenshot: #EDF8EB fill, dark text) */
.rcard__tags { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.rtag {
  padding: 2.5px var(--space-4); border-radius: var(--radius-6);
  background: #F6F6F6;                       /* [S] */
  font-size: var(--font-size-11); line-height: var(--font-line-11); font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.rtag--green { background: #EDF8EB; }       /* [S] */

/* Results page sits on light grey; cards are white (screenshot page bg #F5–#F9) */
/* Results pages sit on white (Marsel's call, Nov 11; Airbnb's app uses #F7F7F7 here). */
body.page-grey { background: var(--color-bg); }

/* Floating Map pill (§3.11, app size [S]: 84x35, 15pt label, 14pt icon, 24pt above tab bar) */
.mappill {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-24));
  z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-8) 18px;
  border-radius: var(--radius-24);
  background: var(--color-bg-inverse); color: var(--color-text-inverse);
  font-size: var(--font-size-15); line-height: var(--font-line-15); font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard);
}
.mappill:active { transform: translateX(-50%) scale(var(--press-icon)); }

/* ---------- Home cards (Places › Stays) ---------- */
.lcard__photo--tint { background: var(--color-clay-tint); }
.lcard__art--lg { width: 52%; }
.hcard__name { font-weight: var(--font-weight-semibold); }
.hcard__rows { display: grid; gap: var(--space-2); margin: var(--space-6) 0 0; }
.hcard__rows div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-8); }
.hcard__rows dt { color: var(--color-text-secondary); }
.hcard__rows dd { margin: 0; }
.hcard__addr { margin-top: var(--space-6); }
.hcard__notes { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.hcard__notes li {
  font-size: var(--font-size-12); line-height: var(--font-line-12); font-weight: var(--font-weight-book);
  color: var(--color-text-secondary);
}
.hcard__btn { display: block; margin-top: var(--space-12); }

.hcard__link { display: block; }

/* ---------- Detail pages: hero, panel, facts band, sections, book bar ----------
   Airbnb mobile listing page (DESIGN-STUDY §2.5, §3.7, §3.9). */
.detail { padding-bottom: calc(var(--size-button) + var(--space-12) + var(--space-16) + var(--space-24) + env(safe-area-inset-bottom)); }
body.no-tabbar .view:has(.detail) { padding-top: 0; }
.hero { position: relative; aspect-ratio: 390 / 370; overflow: hidden; background: var(--color-bg-photo); }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__slot { display: grid; place-items: center; width: 100%; height: 100%; }
.hero__art { width: 46%; height: auto; }
.hero__back { position: absolute; z-index: 1; top: calc(env(safe-area-inset-top) + var(--space-12)); left: var(--inset-float); }
/* Swipeable hero: one photo per screen width, snapping (listing photos, §3.3) */
.gallery__track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
/* Photo counter (§3.13): sits above the white panel's 24px overlap */
.gallery__count {
  position: absolute; z-index: 1;
  right: var(--space-12); bottom: calc(var(--space-24) + var(--space-12));
  padding: 3px 10px;
  border-radius: var(--radius-4);
  background: var(--color-counter-bg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-12); line-height: var(--font-line-12); font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lcard__cover { width: 100%; height: 100%; object-fit: cover; }
.iconbtn--material {
  background: var(--material-thin-bg);
  -webkit-backdrop-filter: var(--material-thin-blur);
  backdrop-filter: var(--material-thin-blur);
}
/* White panel overlaps the hero [S]: ~24px radius in the listing screenshot. */
.detail__panel {
  position: relative;
  margin-top: calc(-1 * var(--space-24));
  border-radius: var(--radius-24) var(--radius-24) 0 0;
  background: var(--color-bg);
}
.detail__head { position: relative; padding: var(--space-24) var(--space-48) var(--space-16); text-align: center; }
.detail__title {
  font-size: var(--font-size-26); line-height: var(--font-line-26);
  font-weight: var(--font-weight-medium);
}
.detail__sub {
  margin-top: var(--space-8);
  font-size: var(--font-size-14); line-height: var(--font-line-14);
  color: var(--color-text-secondary);
}
.starbtn {
  position: absolute; top: var(--space-24); right: var(--inset-page);
  display: grid; place-items: center;
  width: var(--size-icon-button); height: var(--size-icon-button);
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0 0;
  border-radius: var(--radius-round);
  color: var(--color-text-tertiary);
  transition: transform var(--dur-press) var(--ease-standard), color var(--dur-color) var(--ease-standard);
}
.starbtn:active { transform: scale(var(--press-heart)); }
.starbtn--on { color: var(--color-accent); }

.facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 0 var(--inset-page);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.fact { padding: 0 var(--space-8); text-align: center; }
.fact + .fact { border-left: 1px solid var(--color-border); }
.fact__value { font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-semibold); }
.fact__value .chip { margin: var(--space-2) 0; }
.fact__label { margin-top: var(--space-4); font-size: var(--font-size-12); line-height: var(--font-line-12); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }

.dsec {
  margin: 0 var(--inset-page);
  padding: var(--pad-section-top) 0 var(--pad-section-bottom);
  border-top: 1px solid var(--color-border);
}
.detail__head + .dsec, .facts + .dsec { border-top: 0; }
.dsec__title {
  margin-bottom: var(--space-24);
  font-size: var(--font-size-22); line-height: var(--font-line-22);
  letter-spacing: var(--font-track-22); font-weight: var(--font-weight-semibold);
}
.dsec__body p, .dsec__text {
  margin-bottom: var(--space-12);
  font-size: var(--font-size-16); line-height: var(--font-line-16-body);
}
.dsec__actions { display: grid; gap: var(--space-8); margin-top: var(--space-12); }
.lead { font-size: var(--font-size-18); line-height: var(--font-line-18-body); }
.host__name { font-size: var(--font-size-16); line-height: var(--font-line-16); font-weight: var(--font-weight-medium); }
.mapblock { aspect-ratio: 16 / 10; margin-bottom: var(--space-16); border-radius: var(--radius-12); background: var(--color-bg-interactive); }

/* Highlight / info rows: amenity-row anatomy (§3.9): 24 icon, 16 gap, 24 between rows */
.hlrows { display: grid; gap: var(--space-24); }
.hlrow { display: grid; grid-template-columns: var(--icon-24) minmax(0, 1fr); gap: var(--space-16); }
.hlrow__icon { color: var(--color-text-primary); }
.hlrow__label { font-size: var(--font-size-14); line-height: var(--font-line-14); color: var(--color-text-secondary); }
.hlrow__text { font-size: var(--font-size-16); line-height: var(--font-line-16); padding-top: 2px; }
.copyval { font-weight: var(--font-weight-semibold); text-decoration: underline; font-variant-numeric: tabular-nums; }

.chips--days { gap: var(--gap-chip-filter); margin-top: 0; }
.daychip {
  display: inline-flex; align-items: center;
  height: var(--size-chip-filter);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-24);
  font-size: var(--font-size-12); line-height: var(--font-line-12);
}

/* Sticky bottom bar (listing booking bar, §3.7) */
.bookbar {
  position: fixed; bottom: 0; left: 50%;
  width: 100%; max-width: var(--column-max);
  transform: translateX(-50%);
  z-index: var(--z-float);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-12) var(--inset-page) calc(var(--space-16) + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.bookbar__left { min-width: 0; }
.bookbar__strong { font-size: var(--font-size-16); line-height: var(--font-line-16); font-weight: var(--font-weight-semibold); }
.bookbar__sub { font-size: var(--font-size-14); line-height: var(--font-line-14); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn--pill { flex: none; display: inline-flex; align-items: center; border-radius: var(--radius-pill); }

/* ---------- Show the driver, full screen ---------- */
.driver { min-height: 100vh; background: var(--color-bg); }
.driver__label {
  padding: var(--space-32) var(--inset-page) var(--space-8);
  font-size: var(--font-size-16); line-height: var(--font-line-16); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.driver__address {
  padding: 0 var(--inset-page);
  font-size: var(--font-size-32); line-height: var(--font-line-32);
  letter-spacing: var(--font-track-32); font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.driver__note {
  padding: var(--space-16) var(--inset-page) 0;
  font-size: var(--font-size-16); line-height: var(--font-line-16-body);
  color: var(--color-text-secondary);
}
.driver__actions { display: grid; gap: var(--space-12); padding: var(--space-32) var(--inset-page) 0; }

/* ---------- Full-screen ticket (MIRROR-MAP row 13) ---------- */
.ticket { background: var(--color-bg); min-height: 100vh; }
.ticket__status {
  padding: var(--space-24) var(--inset-page) 0;
  font-size: var(--font-size-32); line-height: var(--font-line-32);
  letter-spacing: var(--font-track-32); font-weight: var(--font-weight-bold);
}
.ticket__status--ok { color: var(--color-success); }
.ticket__status--info { color: var(--color-text-secondary); }
.ticket__title {
  padding: var(--space-8) var(--inset-page) var(--space-16);
  font-size: var(--font-size-26); line-height: var(--font-line-26);
  letter-spacing: var(--font-track-26); font-weight: var(--font-weight-semibold);
}
.legs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16);
  margin: 0 var(--inset-page);
  padding: var(--space-24) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.leg__label { font-size: var(--font-size-12); line-height: var(--font-line-12); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.leg__value {
  margin-top: var(--space-4);
  font-size: var(--font-size-22); line-height: var(--font-line-22);
  letter-spacing: var(--font-track-22); font-weight: var(--font-weight-semibold);
}
.refs { padding: 0 var(--inset-page); }
.ref {
  display: grid; gap: var(--space-2); width: 100%;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: opacity var(--dur-press) var(--ease-standard);
}
.ref:active { opacity: 0.6; }
.ref__label { font-size: var(--font-size-14); line-height: var(--font-line-14); color: var(--color-text-secondary); }
.ref__value {
  font-size: var(--font-size-26); line-height: var(--font-line-26);
  letter-spacing: var(--font-track-26); font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ref__value--long { font-size: var(--font-size-22); line-height: var(--font-line-22); letter-spacing: var(--font-track-22); }
.ref__hint { font-size: var(--font-size-12); line-height: var(--font-line-12); color: var(--color-text-tertiary); }
.ticket__detail {
  padding: 0 var(--inset-page);
  font-size: var(--font-size-16); line-height: var(--font-line-16-body);
  color: var(--color-text-secondary);
}

/* ---------- Places: area chips (checklist row 4) ---------- */
.chiprow {
  display: flex; gap: var(--gap-chip);
  padding: var(--space-4) var(--inset-page) var(--space-24);
  overflow-x: auto; scroll-snap-type: inline mandatory; scroll-padding: 0 var(--inset-page);
  scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }
.achip {
  flex: none; scroll-snap-align: start;
  height: var(--size-chip);
  padding: 10px 14px;
  border: 1px solid #FFFFFF;
  border-radius: var(--radius-40);
  box-shadow: var(--shadow-chip-raised);
  font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: box-shadow var(--dur-chip) var(--ease-enter), transform var(--dur-chip-press) var(--ease-enter);
}
.achip:active { transform: scale(var(--press-chip)); }
.achip--on { box-shadow: var(--shadow-chip-inset); border-color: rgba(255, 255, 255, 0.5); }

.places { padding: 0 var(--inset-page); }
.place { display: block; padding: var(--space-24) 0; border-bottom: 1px solid var(--color-divider); transition: opacity var(--dur-press) var(--ease-standard); }
.places li:first-child .place { padding-top: 0; }
.place:active { opacity: 0.6; }
.place__head { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-2); }
.star { flex: none; color: var(--color-accent); }
.place__sig { margin-top: var(--space-4); font-size: var(--font-size-14); line-height: var(--font-line-14); }
.textlink {
  display: inline-block; margin-top: var(--space-8);
  font-size: var(--font-size-14); line-height: var(--font-line-14-body);
  font-weight: var(--font-weight-medium);
  text-decoration: underline; color: var(--color-accent);
}

/* ---------- More ---------- */
.money__headline {
  margin-top: var(--space-4);
  font-size: var(--font-size-22); line-height: var(--font-line-22);
  letter-spacing: var(--font-track-22); font-weight: var(--font-weight-semibold);
}
.btn {
  height: var(--size-button);
  padding: 14px var(--space-24);
  border-radius: var(--radius-12);
  font-size: var(--font-size-16); line-height: var(--font-line-16); font-weight: var(--font-weight-medium);
  text-align: center;
  transition: transform var(--dur-press) var(--ease-standard), background-color var(--dur-color) var(--ease-standard);
}
.btn:active { transform: scale(0.99, 0.96); }
.btn--secondary { background: var(--color-bg-interactive); }
.btn--secondary:active { background: var(--color-bg-pressed); }
.btn--primary { background: var(--gradient-brand); color: var(--color-text-inverse); }
.btn--primary:active { background: var(--color-brand); }
/* Small secondary (checklist row 13) */
.btn--sm {
  height: var(--size-button-sm);
  padding: 11px 20px;
  font-size: var(--font-size-14); line-height: var(--font-line-14);
}

.rows { padding: 0 var(--inset-page); }
.textbtn { font-size: var(--font-size-14); line-height: var(--font-line-14-body); text-decoration: underline; }
.check {
  display: flex; align-items: flex-start; gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-16); line-height: var(--font-line-16);
  cursor: pointer;
}
.rows li:first-child .check { padding-top: 0; }
.check input { flex: none; width: var(--icon-24); height: var(--icon-24); margin: -2px 0 0; accent-color: var(--color-text-primary); }
.check input:checked + span { color: var(--color-text-tertiary); text-decoration: line-through; }

.addresses { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding: 0 var(--inset-page); }
.addr {
  display: grid; gap: var(--space-4); width: 100%;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-bg-secondary);
  transition: transform var(--dur-press) var(--ease-standard);
}
.addr:active { transform: scale(0.99); }
.addr__text {
  font-size: var(--font-size-22); line-height: var(--font-line-22);
  letter-spacing: var(--font-track-22); font-weight: var(--font-weight-semibold);
}

.setting {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--font-size-16); line-height: var(--font-line-16);
}
.seg { display: flex; padding: var(--space-4); border-radius: var(--radius-pill); background: var(--color-bg-interactive); }
.seg__btn {
  height: 32px; padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-color) var(--ease-standard), color var(--dur-color) var(--ease-standard);
}
.seg__btn--on { background: var(--color-bg); color: var(--color-text-primary); box-shadow: var(--shadow-1); }

/* ---------- Toast (floating card, checklist row 22) ---------- */
.toast {
  position: fixed; left: 50%;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-12));
  z-index: var(--z-sheet);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
  background: var(--material-xthick-bg);
  -webkit-backdrop-filter: var(--material-xthick-blur);
  backdrop-filter: var(--material-xthick-blur);
  box-shadow: var(--shadow-4);
  font-size: var(--font-size-14); line-height: var(--font-line-14); font-weight: var(--font-weight-medium);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, var(--space-8));
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring-fast);
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bottom tab bar (checklist row 1) ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 50%;
  width: 100%; max-width: var(--column-max);
  transform: translateX(-50%);
  z-index: var(--z-float);
  display: flex; justify-content: center; gap: var(--space-2);
  padding: var(--space-10) var(--space-4) calc(var(--space-10) + env(safe-area-inset-bottom));
  background: var(--tabbar-bg);
  border-top: 1px solid var(--color-divider);
}
.tabbar[hidden] { display: none; }
.tab {
  flex: 0 1 var(--tabbar-item-width);
  height: var(--size-tap);
  display: flex; flex-direction: column; align-items: center; gap: var(--tabbar-icon-gap);
  color: var(--color-text-secondary);
  transition: color var(--dur-color) var(--ease-standard);
}
.tab__icon {
  width: var(--tabbar-icon); height: var(--tabbar-icon);
  filter: grayscale(1);
  opacity: var(--tabbar-icon-idle-opacity);
  transition: opacity var(--dur-color) var(--ease-standard), filter var(--dur-color) var(--ease-standard);
}
.tab__label {
  font-size: var(--font-size-10); line-height: var(--font-line-10);
  letter-spacing: var(--font-track-10); font-weight: var(--font-weight-medium);
}
.tab[aria-current="page"] { color: var(--color-accent); }
.tab[aria-current="page"] .tab__icon { filter: none; opacity: 1; }

/* ---------- Japanese mode [+] (japan-ux audit, Nov 11) ----------
   Kanji are illegible below 12px, so the two sub-12px styles step up to 12
   in JP mode only. English keeps Airbnb's measured 10px / 11px. The tab still
   fits its 44px height: 32 icon + 12 label. */
html[lang="ja"] body { line-break: strict; font-synthesis: none; overflow-wrap: break-word; }
html[lang="ja"] .tab__label { font-size: var(--font-size-12); line-height: var(--font-line-10); letter-spacing: 0; }
html[lang="ja"] .chip,
html[lang="ja"] .datetile__mon { font-size: var(--font-size-12); line-height: var(--font-line-12); }

:focus-visible { outline: 2px solid var(--color-border-strong); outline-offset: 2px; border-radius: var(--radius-8); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}