/* ==========================================================================
   Components — 公開側 4 画面を構成する部品一式
   tokens.css → base.css → components.css の順で読み込む。
   ========================================================================== */

/* ==========================================================================
   1. APP BAR — 各ページ上部の固定バー
   すりガラスは「背後にコンテンツが流れる」場所でだけ意味を持つ。
   固定バーはその唯一の正当な用途なので、ここだけ backdrop-filter を許可する。
   ========================================================================== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.appbar.is-scrolled {
  border-bottom-color: var(--line);
}

.appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding-block: var(--space-2);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
}

.appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   LOGO — 支給されたアウトライン SVG をそのまま使う
   黒版・白版の 2 ファイルが提供されているため、色を書き換えず
   テーマに応じて表示するファイルを切り替える（公式データを改変しない）。
   -------------------------------------------------------------------------- */
.logo {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}

.logo img {
  display: block;
  width: auto;
  height: var(--logo-h, 26px);
}

.logo [data-logo-dark] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo [data-logo-light] {
    display: none;
  }
  :root:not([data-theme="light"]) .logo [data-logo-dark] {
    display: block;
  }
}

:root[data-theme="dark"] .logo [data-logo-light] {
  display: none;
}
:root[data-theme="dark"] .logo [data-logo-dark] {
  display: block;
}

/* 写真の上ではテーマに関係なく必ず白版 */
.logo--on-photo [data-logo-light] {
  display: none !important;
}
.logo--on-photo [data-logo-dark] {
  display: block !important;
}

.logo--sm {
  --logo-h: 22px;
}
.logo--md {
  --logo-h: 34px;
}
.logo--lg {
  --logo-h: clamp(42px, 3vw + 30px, 62px);
}

.appbar .logo--square {
  --logo-h: 34px;
}

.entry__brandbar .logo--square {
  --logo-h: clamp(88px, 10vw, 120px);
}

.appbar__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.appbar__name {
  min-width: 0;
  font-size: var(--size-callout);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-body);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__title {
  font-size: var(--size-callout);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-body);
}

/* ページ見出し（バーの下に大きく置く。iOS の Large Title に相当） */
.page-head {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

.page-head__eyebrow {
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: var(--touch-min);
  /* 高さは固定せず min-height にする。ドイツ語・フランス語・ロシア語の
     ラベルは日本語の 3 倍近い長さになるため（例: 「現在の予約を取消して確定」
     → "Annuler l'actuelle et confirmer la nouvelle" 43 字）、
     nowrap にすると必ずはみ出す。折り返せる前提で組む。 */
  padding: var(--space-3) var(--space-5);
  border: var(--hairline) solid var(--btn-line);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--size-body-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-body);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: scale(0.978);
}

/* 無効状態は不透明度を下げるのではなく、無彩色に置き換える。
   塗りボタンを半透明にすると（薄い赤に白文字など）読めない色の組み合わせが
   生まれるため、色そのものを中立に差し替えるほうが確実。 */
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-fg: var(--text-3);
  --btn-line: transparent;
  cursor: not-allowed;
  transform: none;
}

.btn--primary:disabled,
.btn--secondary:disabled,
.btn--danger-solid:disabled,
.btn--on-photo:disabled {
  --btn-bg: var(--surface-2);
}

.btn--outline:disabled {
  --btn-line: var(--line);
}

/* 主行動 — 1 画面に 1 つだけ。ここがアクセント面積の大半を占める */
.btn--primary {
  --btn-bg: var(--accent-solid);
  --btn-fg: var(--text-on-accent);
}
.btn--primary:hover:not(:disabled) {
  --btn-bg: var(--accent-hover);
}
.btn--primary:active:not(:disabled) {
  --btn-bg: var(--accent-press);
}

/* 副次行動 — 塗りはグレー、枠線なし。Apple のグレーボタン */
.btn--secondary {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
}
.btn--secondary:hover:not(:disabled) {
  --btn-bg: var(--surface-3);
}

/* 面のない行動 — 文字だけ。戻る・閉じるなど */
.btn--plain {
  --btn-fg: var(--accent);
  padding-inline: var(--space-3);
  font-weight: var(--weight-medium);
}
.btn--plain:hover:not(:disabled) {
  --btn-bg: var(--accent-tint);
}

/* 輪郭のみ — 白背景に置く副 CTA */
.btn--outline {
  --btn-line: var(--line-strong);
  --btn-fg: var(--text);
}
.btn--outline:hover:not(:disabled) {
  --btn-bg: var(--surface-2);
}

.btn--danger {
  --btn-fg: var(--danger);
}
.btn--danger:hover:not(:disabled) {
  --btn-bg: var(--danger-tint);
}

.btn--danger-solid {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
}

.btn--lg {
  min-height: var(--control-h-lg);
  font-size: var(--size-body-lg);
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding-inline: var(--space-3);
  font-size: var(--size-callout);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--pill {
  border-radius: var(--radius-pill);
}

/* 行動の並べ方。
   狭い画面では縦積みになり、DOM 順（副 → 主）のまま主行動が最下段＝親指に
   最も近い位置に来る。広い画面では横並びにし、order で主行動を右へ送る。 */
.btn-group {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 30rem) {
  .btn-group--inline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .btn-group--inline > .btn--primary {
    order: 2;
  }
}

/* ==========================================================================
   3-A. LANGUAGE GATE — 言語の「選択」ではなく「関門」
   --------------------------------------------------------------------------
   このシステムでは言語選択が単なる表示切替ではなく、業務上の分岐点になっている。
   locale === "ja"  → 電話必須 / ふりがな有 / 注意事項なし / カード登録なし
   locale !== "ja"  → メール必須 / 注意事項＋同意必須 / カード登録必須
   既定値は "ja" のため、非日本語話者が言語を選ばないまま進むと
   「日本語話者」として登録され、ノーショー対策のカード登録を取りこぼす。

   したがって設計上の要件は「言語を切り替えられること」ではなく
   「非日本語話者が言語を選ばずに先へ進めないこと」。以下 3 点で担保する。

   1. 全言語をそれぞれの文字体系で表示する（日本語のラベルを一切使わない）
   2. どの言語も同じ大きさ・同じ重さにする（既定・推奨を作らない＝必ず選ばせる）
   3. 明示的な選択がない状態では、予約フローに入る前に必ずこの関門を通す
   ========================================================================== */

.langgate {
  display: grid;
  gap: var(--space-4);
}

.langgate__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-2);
}

.language-globe-icon {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--accent);
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/lucide-globe.svg") center / contain no-repeat;
  mask: url("/assets/icons/lucide-globe.svg") center / contain no-repeat;
}

.langgate__head svg,
.langgate__icon {
  width: 18px;
  height: 18px;
}

/* 見出しは必ずラテン文字の "Language"。
   「言語を選択してください」と書いても、読めない人には届かない。 */
.langgate__head span {
  font-size: var(--size-callout);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.langgate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .langgate__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* すべての言語ボタンは完全に同一の見た目。
   日本語だけを大きく/先頭で強調すると、読めない人が「とりあえず一番目立つ方」を
   押してしまい、分岐を誤る。優劣をつけないことが最大の安全策。 */
.langbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--space-3);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.langbtn:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.langbtn:active {
  transform: scale(0.98);
}

.langbtn.is-current {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: var(--text-on-accent);
}

/* 言語名は必ずその言語自身の文字で表示する（English / 中文 / 한국어 / ไทย …）。
   自分の言語の綴りは、他が読めなくても必ず認識できる。 */
.langbtn__name {
  font-size: var(--size-body-lg);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

/* 日本語にだけ "Japanese" を併記する。選ばせるためではなく、
   非日本語話者が誤って押さないようにするため。 */
.langbtn__sub {
  font-size: 0.6875rem;
  font-weight: var(--weight-regular);
  line-height: 1.2;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.langbtn.is-current .langbtn__sub {
  color: color-mix(in srgb, var(--text-on-accent) 72%, transparent);
}

/* 関門をシートで出すとき。閉じるボタンは置かない（選ばないと進めない）。 */
.langgate-sheet {
  width: min(30rem, 100%);
  padding: var(--space-8) var(--space-6);
}

.langgate-sheet .langgate__grid {
  margin-top: var(--space-5);
}

/* ==========================================================================
   3-B. LANGUAGE SWITCH — 選択後、全ページに常設する切替ボタン
   選択済みの言語をその言語の文字で表示することで、
   「これは言語の操作子だ」と読めない人にも伝わるようにする。
   ========================================================================== */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-footnote);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.langswitch:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.langswitch svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-2);
}

.langswitch .chevron {
  width: 7px;
  height: 7px;
  transform: rotate(135deg);
  margin-left: 2px;
}

/* 写真の上に置くとき */
.langswitch--on-photo {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.langswitch--on-photo svg {
  color: rgba(255, 255, 255, 0.8);
}

.langswitch--on-photo:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   3. LANGUAGE SELECT（旧: select ベース。i18n 検証ページで比較用に残す）
   ========================================================================== */
.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control-h-sm);
  padding-left: var(--space-3);
  padding-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
}

.lang:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.lang__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-2);
}

.lang select {
  height: 100%;
  padding: 0 var(--space-5) 0 var(--space-2);
  border: 0;
  background: transparent;
  font-size: var(--size-footnote);
  font-weight: var(--weight-medium);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lang select:focus-visible {
  outline: none;
}

.lang::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* ==========================================================================
   4. FIELDS
   ========================================================================== */
.field {
  display: block;
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--size-callout);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.field__optional {
  margin-left: var(--space-2);
  font-size: var(--size-footnote);
  font-weight: var(--weight-regular);
  color: var(--text-3);
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-body-lg);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.input:hover,
.textarea:hover {
  border-color: var(--text-3);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.field__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--size-footnote);
  color: var(--text-2);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--size-footnote);
  color: var(--danger);
}

.field.is-invalid .input,
.field.is-invalid .textarea {
  border-color: var(--danger);
}

.field.is-invalid .input:focus,
.field.is-invalid .textarea:focus {
  box-shadow: 0 0 0 3px var(--danger-tint);
}

/* 読み取り専用のトリガー（日付/時刻ピッカーを開くやつ） */
.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-body-lg);
  text-align: left;
  cursor: pointer;
}

.picker-trigger[data-empty="true"] {
  color: var(--text-3);
}

.picker-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-2px) rotate(45deg);
}

.picker-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

/* ==========================================================================
   5. CHECKBOX
   ========================================================================== */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.check input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.check input:checked {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
}

.check__text {
  font-size: var(--size-callout);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   6. STEPPER — 人数入力
   数値入力そのものが主役なので、数字を大きく、ボタンは輪郭を持たない円にする。
   ========================================================================== */
.stepper {
  display: grid;
  grid-template-columns: var(--touch-min) 1fr var(--touch-min);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 17rem;
  margin-inline: auto;
  padding: var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.stepper__btn {
  display: grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}

.stepper__btn:active:not(:disabled) {
  transform: scale(0.9);
}

.stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15em;
}

.stepper__input {
  width: 2.6ch;
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-display);
  line-height: 1.1;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.stepper__unit {
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  color: var(--text-2);
}

/* ==========================================================================
   7. SURFACES — card / group list
   ========================================================================== */
.card {
  padding: var(--space-6);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

/* iOS 設定アプリの「グループ化リスト」。
   行間の罫線は左を内容位置まで下げる（インセットセパレータ）。この 1 点で
   一覧の見え方が「web の table」から「ネイティブアプリの一覧」に変わる。 */
.group {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.group__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 58px;
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--size-body-lg);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.group__row + .group__row {
  box-shadow: inset 0 var(--hairline) 0 0 var(--line);
  /* インセット: 罫線をアイコン幅ぶん右から始めたい場合は ::before を使う */
}

.group__row:hover {
  background: var(--surface-2);
}

.group__row:active {
  background: var(--surface-3);
}

.group__row-body {
  flex: 1;
  min-width: 0;
}

.group__row-title {
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.group__row-sub {
  margin-top: 2px;
  font-size: var(--size-footnote);
  color: var(--text-2);
  line-height: 1.4;
}

.group__row-value {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: var(--size-callout);
}

/* 行末の > 。SVG を使わず擬似要素で描くことで、色・太さが常にトークン追従する */
.chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.75px solid var(--text-3);
  border-top: 1.75px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.group__row:hover .chevron {
  transform: rotate(45deg) translate(1.5px, -1.5px);
}

/* ==========================================================================
   8. WIZARD PROGRESS
   5 個のチップを並べる代わりに、細いセグメント + 「2 / 5」の文字だけにする。
   進捗表示は情報であって装飾ではないので、面積を最小に抑える。
   ========================================================================== */
.progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.progress__track {
  display: flex;
  flex: 1;
  gap: 4px;
}

.progress__seg {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  transition: background-color var(--dur) var(--ease);
}

.progress__seg.is-done {
  background: var(--accent);
}

.progress__seg.is-current {
  background: var(--accent);
}

.progress__count {
  flex: 0 0 auto;
  font-size: var(--size-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-3);
  letter-spacing: var(--track-caption);
}

/* ==========================================================================
   9. CALENDAR
   ========================================================================== */
.calendar {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
}

.calendar__toolbar {
  display: grid;
  grid-template-columns: var(--touch-min) 1fr var(--touch-min);
  align-items: center;
  margin-bottom: var(--space-3);
}

.calendar__nav {
  display: grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, opacity var(--dur-fast) linear;
}

.calendar__nav:hover:not(:disabled) {
  background: var(--accent-tint);
}

.calendar__nav:disabled {
  color: var(--text-3);
  opacity: 0.4;
  cursor: not-allowed;
}

.calendar__nav svg {
  width: 11px;
  height: 18px;
}

.calendar__month {
  font-size: var(--size-title-3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-title);
  text-align: center;
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar__weekdays {
  margin-bottom: var(--space-2);
}

.calendar__weekdays span {
  padding-block: var(--space-1);
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--text-3);
  text-align: center;
}

.calendar__weekdays span[data-sat] {
  color: var(--weekday-sat);
}
.calendar__weekdays span[data-sun] {
  color: var(--weekday-sun);
}

.calendar__cell {
  aspect-ratio: 1 / 1;
}

.calendar__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.calendar__day:hover:not(:disabled) {
  background: var(--surface-2);
}

/* 空き状況は日本の予約 UI の慣習に合わせて ○ △ × で示す。
   「空きあり／受付不可」の文字を入れると 1 セルが 2 行になり、月表示が
   文字で埋まって一覧性が失われるため、記号 1 文字に圧縮する。
   ※スクリーンリーダーには .sr-only で従来どおりの文言を読ませる。
   ※記号は多言語でも翻訳不要（言語非依存）という利点もある。 */
.calendar__mark {
  display: block;
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--accent);
  transition: color var(--dur-fast) linear;
}

/* ○ = 空きあり */
.calendar__day[data-avail="open"] .calendar__mark {
  color: var(--accent);
}

/* △ = 選択人数で予約可能な開始時刻候補が少ない（要バックエンド対応） */
.calendar__day[data-avail="few"] .calendar__mark {
  color: var(--warning);
}

/* × = 受付不可・定休 */
.calendar__day[data-avail="none"] .calendar__mark {
  color: var(--text-3);
}

.calendar__day:disabled {
  color: var(--text-3);
  cursor: not-allowed;
}

.calendar__day:disabled .calendar__mark {
  color: var(--text-3);
  opacity: 0.7;
}

.calendar__day.is-today {
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.calendar__day.is-selected {
  background: var(--accent-solid);
  color: var(--text-on-accent);
}

.calendar__day.is-selected .calendar__mark,
.calendar__day.is-selected[data-avail] .calendar__mark {
  color: var(--text-on-accent);
}

.calendar__legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--size-caption);
  color: var(--text-2);
}

.calendar__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================================================
   10. TIME TILES
   ========================================================================== */
/* 最小幅は 6.5rem。フランス語の "Appel uniquement"（電話のみ）など、
   注記が長い言語でもタイルが破綻しない幅を確保する。 */
.timegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: var(--space-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-body-lg);
  font-weight: var(--weight-medium);
  line-height: 1.1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tile:hover:not(:disabled) {
  border-color: var(--accent);
}

.tile:active:not(:disabled) {
  transform: scale(0.97);
}

.tile.is-selected {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: var(--text-on-accent);
}

.tile:disabled {
  border-color: transparent;
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}

.tile__note {
  font-size: 0.6875rem; /* 11px — 補助情報だけに許す例外サイズ */
  font-weight: var(--weight-regular);
  line-height: 1.25;
  color: var(--text-3);
  letter-spacing: 0;
  text-wrap: balance;
}

.tile.is-selected .tile__note {
  color: color-mix(in srgb, var(--text-on-accent) 78%, transparent);
}

.tile--phone .tile__note {
  color: var(--warning);
}

/* ==========================================================================
   11. SUMMARY LIST — 予約内容の確認表示
   ========================================================================== */
.summary {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.summary__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.summary__row + .summary__row {
  box-shadow: inset 0 var(--hairline) 0 0 var(--line);
}

.summary__key {
  font-size: var(--size-callout);
  color: var(--text-2);
}

.summary__val {
  min-width: 0;
  font-size: var(--size-body-lg);
  line-height: var(--leading-snug);
}

.summary__val--strong {
  font-weight: var(--weight-semibold);
}

@media (max-width: 30rem) {
  .summary__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* 変更前 → 変更後 の対比表示 */
.diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch; /* 片方だけ 2 行になっても箱の高さを揃える */
  gap: var(--space-3);
}

.diff__box {
  padding: var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.diff__box--after {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.diff__arrow {
  align-self: center;
  color: var(--text-3);
}

@media (max-width: 30rem) {
  .diff {
    grid-template-columns: 1fr;
  }
  .diff__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   12. BANNERS / BADGES
   ========================================================================== */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--size-callout);
  line-height: var(--leading-normal);
}

.banner__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--text-2);
}

.banner--info .banner__icon {
  color: var(--accent);
}
.banner--success {
  background: var(--success-tint);
}
.banner--success .banner__icon {
  color: var(--success);
}
.banner--error {
  background: var(--danger-tint);
}
.banner--error .banner__icon {
  color: var(--danger);
}
.banner--warning {
  background: var(--warning-tint);
}
.banner--warning .banner__icon {
  color: var(--warning);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--size-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caption);
  line-height: 1.3;
}

.badge--success {
  background: var(--success-tint);
  color: var(--success);
}
.badge--accent {
  background: var(--accent-tint);
  color: var(--accent);
}
.badge--danger {
  background: var(--danger-tint);
  color: var(--danger);
}

/* 注意事項のリスト。中黒や • ではなく、細い縦罫で束ねる */
.notes {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
  font-size: var(--size-callout);
  color: var(--text-2);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   13. SHEET (modal)
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fade var(--dur) var(--ease) both;
}

.sheet {
  width: min(30rem, 100%);
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
  animation: sheet-in var(--dur-slow) var(--ease) both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}

/* モバイルでは下から出るボトムシートにする（親指の届く位置に行動を置く） */
@media (max-width: 30rem) {
  .sheet-backdrop {
    align-items: end;
    padding: 0;
  }
  .sheet {
    width: 100%;
    max-height: 90dvh;
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation-name: sheet-up;
  }
  @keyframes sheet-up {
    from {
      transform: translateY(100%);
    }
  }
}

/* ==========================================================================
   14. POPOVER — 日付/時刻ピッカー
   ========================================================================== */
.popover {
  position: absolute;
  z-index: 100;
  top: calc(100% + var(--space-2));
  left: 0;
  width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: pop-in var(--dur) var(--ease) both;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

.popover .calendar {
  border: 0;
  padding: var(--space-2);
}

.field-anchor {
  position: relative;
}

/* ==========================================================================
   15. STICKY ACTION BAR
   ウィザードの主行動を常に親指の届く位置に固定する。
   ========================================================================== */

/* 内容が 1 画面に満たないときも、行動バーが画面下端に留まるようにする。
   sticky は「流し込み位置より下には行かない」ため、本体を伸ばす必要がある。 */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell > main {
  flex: 1 0 auto;
}

.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: var(--space-8);
  padding-block: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-bar);
}

/* ==========================================================================
   16. COMPLETION
   ========================================================================== */
.done-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success);
}

.done-mark svg {
  width: 30px;
  height: 30px;
}

.done-mark path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: draw var(--dur-slow) var(--ease-out) 120ms both;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.reservation-id {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--size-title-3);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.reservation-id span {
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  letter-spacing: var(--track-label);
}

/* ==========================================================================
   17. HERO — トップ / 入口ページ
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding-block: var(--space-12);
}

/* 「サイエンスバーらしさ」は装飾グラフィックではなく、
   等間隔の細い罫線＝“目盛り”で表現する。1px のラインが等ピッチで並ぶこと
   そのものが精密さの記号になる。 */
.rule-marks {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 14px;
}

.rule-marks i {
  width: var(--hairline);
  height: 6px;
  background: var(--line-strong);
}

.rule-marks i:nth-child(5n + 1) {
  height: 14px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   入口ページ

   店舗ごとの承認済み写真を使用し、情報パネルとは重ねない。
   重要な被写体が中央基準のレスポンシブ表示で欠けない素材を選ぶ。

     狭い画面 : 写真ブロック（上） → 言語ゲート（下）の縦積み
     広い画面 : 写真（左半分・全高） ｜ 言語ゲート（右半分）の 2 カラム

   どちらでも写真は一度も覆われない。
   -------------------------------------------------------------------------- */
.entry {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

/* 狭い画面は3:2で表示する。店舗ごとの素材選定時に、この枠内で
   重要な被写体が欠けないことを確認する。 */
.entry__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #000;
  overflow: hidden;
}

/* 直接の子だけに当てる。子孫セレクタにするとロゴ SVG の <img> も
   100% × cover になって潰れる。 */
.entry__photo > picture {
  position: absolute;
  inset: 0;
}

.entry__photo > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 素材契約として中央基準の切り取りに耐える写真だけを使用する */
  object-position: center;
}

/* 減光は上端だけ。ロゴを読ませるためだけの最小限で、
   写真全体のコントラストは落とさない。 */
.entry__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.18) 20%,
    rgba(0, 0, 0, 0) 38%
  );
  pointer-events: none;
}

/* ロゴは写真の左上へ。各店舗の写真で可読性と被写体への重なりを確認する。 */
.entry__brandbar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

.entry__brandbar .logo img {
  max-width: 200px;
  object-fit: contain;
}

.entry__photo.is-photo-empty {
  background: var(--surface-2);
}

.entry__photo.is-photo-empty .entry__scrim {
  display: none;
}

.entry__photo.is-photo-empty .logo--on-photo [data-logo-light] {
  display: block !important;
}

.entry__photo.is-photo-empty .logo--on-photo [data-logo-dark] {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entry__photo.is-photo-empty .logo--on-photo [data-logo-light] {
    display: none !important;
  }

  :root:not([data-theme="light"]) .entry__photo.is-photo-empty .logo--on-photo [data-logo-dark] {
    display: block !important;
  }
}

.entry__panel {
  display: grid;
  align-content: center;
  padding: var(--space-6) var(--gutter)
    max(var(--space-6), env(safe-area-inset-bottom));
}

/* 画面の目的を日英併記で置く。写真の上ではなくパネル側に置くことで、
   写真の構図を邪魔せず、かつ「予約するために言語を選ぶ」という
   縦の流れ（目的 → LANGUAGE → 各言語）が成立する。 */
.entry__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--size-title-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-title);
  line-height: 1.2;
  text-align: center;
}

/* 区切りのスラッシュは情報ではないので、明度を落として
   2 つの言語の「あいだ」であることだけを示す */
.entry__title-sep {
  color: var(--text-3);
  font-weight: var(--weight-regular);
}

.entry__panel-inner {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.entry__venue {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
}

@media (min-width: 52rem) {
  .entry {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }

  /* 広い画面では左カラム全高。縦長の枠になるので、ここは cover で
     左右を切る。被写体が中央にあるため中央基準の切り取りで収まる。 */
  .entry__photo {
    position: sticky;
    top: 0;
    aspect-ratio: auto;
    height: 100vh;
    height: 100dvh;
  }

  .entry__panel {
    padding-block: var(--space-12);
  }
}

/* 写真の上のボタンは白ベタ + 黒文字。すりガラスは使わない
   （背景写真が変わるたびに可読性が変動するため）。 */
.btn--on-photo {
  --btn-bg: #fff;
  --btn-fg: #000;
}

.btn--on-photo:hover:not(:disabled) {
  --btn-bg: rgba(255, 255, 255, 0.88);
}

.btn--on-photo-ghost {
  --btn-fg: #fff;
  --btn-line: rgba(255, 255, 255, 0.4);
}

.btn--on-photo-ghost:hover:not(:disabled) {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-line: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   18. VENUE META
   ========================================================================== */
.venue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--size-footnote);
  color: var(--text-2);
}

.venue-meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

[data-venue-map],
[data-venue-phone] {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--touch-min);
}

.venue-meta a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   19. WIZARD STEP TRANSITION
   ステップ切替は「置き換わった」ことがわかる最小限だけ動かす。
   ========================================================================== */
.step[hidden] {
  display: none !important;
}

.step {
  animation: step-in var(--dur) var(--ease-out) both;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ==========================================================================
   20. EMPTY STATE
   ========================================================================== */
.empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  border: var(--hairline) dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: var(--size-callout);
  text-align: center;
}

/* ==========================================================================
   21. TOP PAGE
   ========================================================================== */
.ds-v3.ds-page-top .top-main {
  padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
}

.ds-v3.ds-page-top .action-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: var(--space-5);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.ds-v3.ds-page-top .action-row + .action-row {
  box-shadow: inset 0 var(--hairline) 0 0 var(--line);
}

.ds-v3.ds-page-top .action-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.ds-v3.ds-page-top .action-row__title {
  min-width: 0;
  font-size: var(--size-title-3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-title);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ds-v3.ds-page-top .action-row--primary .action-row__title {
  color: var(--accent);
}

.ds-v3.ds-page-top .top-section {
  margin-top: var(--space-10);
}

.ds-v3.ds-page-top .top-section > .t-label {
  margin-bottom: var(--space-3);
  padding-inline: var(--space-2);
}

.ds-v3.ds-page-top .venue-summary .summary__val {
  grid-column: 1 / -1;
}

.weekly-hours {
  width: 100%;
}

.weekly-hours__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.7fr) minmax(8.5rem, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-1);
}

.weekly-hours__row > :last-child {
  text-align: right;
}

/* 狭幅リフローでは、曜日と営業時間の固定最小幅を解除する。
   通常幅の2列表示は維持しつつ、240px級の表示でもsummaryの内側で欠けさせない。 */
@media (max-width: 20rem) {
  .ds-v3.ds-page-top .venue-summary .summary__row {
    padding-inline: var(--space-3);
  }

  .ds-v3.ds-page-top .weekly-hours__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ds-v3.ds-page-top .weekly-hours__row > :last-child {
    text-align: left;
  }
}

/* Android Chromeの200%表示では、412px級の端末でも有効幅が約206pxになる。
   見出しをLarge Titleのまま押し込まず、余白と文字サイズを一段だけ詰めて
   単語末尾の孤立・アクション行の横欠けを防ぐ。 */
@media (max-width: 15rem) {
  .ds-v3.ds-page-top .page {
    padding-inline: var(--space-3);
  }

  .ds-v3.ds-page-top .page-head .t-display {
    font-size: var(--size-title-1);
  }

  .ds-v3.ds-page-top .action-row {
    padding-inline: var(--space-4);
  }
}

.ds-v3.ds-page-top .top-footer {
  margin-top: var(--space-12);
  padding-block: var(--space-8);
  border-top: var(--hairline) solid var(--line);
  color: var(--text-3);
  font-size: var(--size-footnote);
}

.langswitch__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ==========================================================================
   22. NEW RESERVATION PAGE
   ========================================================================== */
.ds-v3.ds-page-new .public-form-topbar .venue-identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ds-v3.ds-page-new .public-form-topbar .venue-identity-copy {
  min-width: 0;
}

.ds-v3.ds-page-new .public-form-topbar .venue-meta {
  display: none;
}

.ds-v3.ds-page-new .new-main {
  padding-top: var(--space-6);
  padding-bottom: max(var(--space-10), env(safe-area-inset-bottom));
}

.ds-v3.ds-page-new .reservation-wizard-card {
  display: grid;
  gap: var(--space-6);
}

.ds-v3.ds-page-new .wizard-step {
  min-width: 0;
  min-height: min(34rem, calc(100dvh - 12rem));
}

.ds-v3.ds-page-new .wizard-step > * + * {
  margin-top: var(--space-5);
}

.ds-v3.ds-page-new .wizard-step-head {
  display: grid;
  gap: var(--space-2);
}

.ds-v3.ds-page-new .muted {
  color: var(--text-2);
  font-size: var(--size-callout);
}

.ds-v3.ds-page-new .party-input-wrap {
  width: min(21rem, 100%);
  margin-inline: auto;
}

.ds-v3.ds-page-new .party-stepper {
  width: 100%;
}

.ds-v3.ds-page-new .party-input {
  min-width: 0;
  width: 100%;
  max-width: 2.6ch;
}

.ds-v3.ds-page-new .wizard-actions.actionbar {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.booking-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.context__chip {
  display: inline-grid;
  gap: 1px;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.context__chip:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.context__chip small {
  color: var(--text-3);
  font-size: var(--size-caption);
}

.ds-v3.ds-page-new .notice,
.ds-v3.ds-page-new .error,
.ds-v3.ds-page-new .success {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--size-callout);
  line-height: var(--leading-normal);
}

.ds-v3.ds-page-new .error {
  background: var(--danger-tint);
  color: var(--danger);
}

.ds-v3.ds-page-new .success {
  background: var(--success-tint);
  color: var(--success);
}

.ds-v3.ds-page-new .field__error,
.ds-v3.ds-page-new .field-error {
  color: var(--danger);
}

.ds-v3.ds-page-new .notice-list {
  padding-left: var(--space-4);
  list-style: none;
}

.ds-v3.ds-page-new .notice-consent {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--line);
}

.ds-v3.ds-page-new .payment-panel {
  display: grid;
  gap: var(--space-3);
}

.ds-v3.ds-page-new #stripe-card-element {
  min-height: var(--control-h);
  padding: 15px var(--space-4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.ds-v3.ds-page-new .availability-alternatives {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
}

.ds-v3.ds-page-new .alternative-group,
.ds-v3.ds-page-new .alternative-option-grid {
  display: grid;
  gap: var(--space-2);
}

.ds-v3.ds-page-new .alternative-option-grid {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.ds-v3.ds-page-new .alternative-option {
  display: grid;
  justify-items: center;
}

.ds-v3.ds-page-new .completion-hero {
  display: grid;
  place-items: center;
  padding-block: var(--space-4);
}

.ds-v3.ds-page-new .completion-actions,
.ds-v3.ds-page-new .modal-panel .actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.ds-v3.ds-page-new .duplicate-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ds-v3.ds-page-new .duplicate-reservation-card {
  padding: var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
}

.ds-v3.ds-page-new .duplicate-reservation-details {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.ds-v3.ds-page-new .duplicate-reservation-details div {
  display: grid;
  gap: var(--space-1);
}

.ds-v3.ds-page-new .duplicate-reservation-details dt {
  color: var(--text-3);
  font-size: var(--size-caption);
}

.ds-v3.ds-page-new .duplicate-impact,
.ds-v3.ds-page-new .duplicate-check,
.ds-v3.ds-page-new .phone-only-message,
.ds-v3.ds-page-new .phone-only-tel {
  display: block;
  margin-top: var(--space-4);
}

.language-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-min);
  margin-bottom: var(--space-4);
}

body.has-open-sheet {
  overflow: hidden;
}

.ds-v3.ds-page-new .public-page-bottom-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.ds-v3.ds-page-new .scroll-more-cue {
  display: none;
}

@media (max-width: 36rem) {
  .ds-v3.ds-page-new .appbar__title {
    display: none;
  }

  .ds-v3.ds-page-new .new-main {
    padding-top: var(--space-5);
  }

  .ds-v3.ds-page-new .wizard-step {
    min-height: calc(100dvh - 10rem);
  }
}

/* ==========================================================================
   23. MANAGE RESERVATION PAGE
   ========================================================================== */
.ds-v3.ds-page-manage .public-form-topbar .venue-identity {
  min-width: 0;
}

.ds-v3.ds-page-manage .public-form-topbar .venue-meta {
  display: none;
}

.ds-v3.ds-page-manage .manage-back-link {
  flex: 0 0 auto;
  margin-left: calc(var(--space-3) * -1);
}

.ds-v3.ds-page-manage .manage-main {
  display: grid;
  gap: var(--space-10);
  padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
}

.ds-v3.ds-page-manage .manage-lookup,
.ds-v3.ds-page-manage .manage-reservation {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.ds-v3.ds-page-manage .manage-contact-field {
  max-width: var(--measure);
}

.ds-v3.ds-page-manage .manage-lookup-actions,
.ds-v3.ds-page-manage .manage-primary-actions {
  justify-items: start;
}

.ds-v3.ds-page-manage .manage-lookup-actions {
  width: 100%;
  max-width: var(--measure);
}

.ds-v3.ds-page-manage .manage-lookup-actions .btn {
  width: 100%;
}

.ds-v3.ds-page-manage .manage-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ds-v3.ds-page-manage .booking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.ds-v3.ds-page-manage .booking-head__date {
  font-family: var(--font-display);
  font-size: var(--size-title-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-title);
  line-height: var(--leading-snug);
}

.ds-v3.ds-page-manage .booking-head__meta {
  margin-top: var(--space-2);
  color: var(--text-2);
  font-size: var(--size-callout);
}

.ds-v3.ds-page-manage .booking-head__side {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
  min-width: 7rem;
  text-align: right;
}

.ds-v3.ds-page-manage .booking-head__id-label {
  margin-top: var(--space-2);
  color: var(--text-3);
  font-size: var(--size-caption);
}

.ds-v3.ds-page-manage .booking-head__id {
  max-width: 16rem;
  color: var(--text-2);
  font-size: var(--size-footnote);
  overflow-wrap: anywhere;
}

.ds-v3.ds-page-manage .detail-panel {
  margin-top: var(--space-4);
}

.ds-v3.ds-page-manage .manage-change-section {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.ds-v3.ds-page-manage .manage-section-label {
  padding-inline: var(--space-2);
}

.ds-v3.ds-page-manage .manage-change-grid {
  display: grid;
  gap: var(--space-4);
}

.ds-v3.ds-page-manage .manage-party-stepper {
  max-width: none;
  margin: 0;
}

.ds-v3.ds-page-manage .manage-party-input {
  min-width: 3ch;
  font-size: 1.5rem;
}

.ds-v3.ds-page-manage .manage-date-calendar {
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  padding: 0;
}

.ds-v3.ds-page-manage .manage-time-popover {
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-4);
}

.ds-v3.ds-page-manage .manage-time-popover .notice,
.ds-v3.ds-page-manage .manage-time-popover .error {
  margin-top: var(--space-3);
}

.ds-v3.ds-page-manage .notice,
.ds-v3.ds-page-manage .error,
.ds-v3.ds-page-manage .success {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--size-callout);
  line-height: var(--leading-normal);
}

.ds-v3.ds-page-manage .error {
  background: var(--danger-tint);
  color: var(--danger);
}

.ds-v3.ds-page-manage .success {
  background: var(--success-tint);
  color: var(--success);
}

.ds-v3.ds-page-manage .manage-cancel-section {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--line);
}

.ds-v3.ds-page-manage .manage-cancel-section p {
  max-width: var(--measure);
}

.ds-v3.ds-page-manage .manage-confirm-summary,
.ds-v3.ds-page-manage .manage-result-modal .summary {
  margin-top: var(--space-5);
}

.ds-v3.ds-page-manage .modal-panel .actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.ds-v3.ds-page-manage .modal-panel .notice,
.ds-v3.ds-page-manage .modal-panel .error,
.ds-v3.ds-page-manage .modal-panel .success,
.ds-v3.ds-page-manage #cancel-fee-confirm-note,
.ds-v3.ds-page-manage #cancel-success-note {
  margin-top: var(--space-4);
}

.ds-v3.ds-page-manage .public-bottom-back {
  align-self: end;
  justify-self: center;
}

@media (min-width: 46rem) {
  .ds-v3.ds-page-manage .manage-change-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 38rem) {
  .ds-v3.ds-page-manage .manage-back-link {
    display: none;
  }

  .ds-v3.ds-page-top .appbar__name,
  .ds-v3.ds-page-new .public-form-topbar .venue-identity-copy,
  .ds-v3.ds-page-manage .public-form-topbar .venue-identity-copy {
    display: none;
  }

  .ds-v3.ds-page-manage .booking-head {
    display: grid;
  }

  .ds-v3.ds-page-manage .booking-head__side {
    justify-items: start;
    text-align: left;
  }
}