/* 初回の案内（チュートリアル）と、トップの「使い方」入口。
 * 色・余白・角・動きは app.css の :root トークン（処理券と受付票）だけを使う。
 * 例外は ::backdrop の幕の色で、::backdrop が :root の変数を継がないブラウザがあるため
 * --stage と同じ色相の値を直に書く。 */

/* ───────── トップの「使い方」入口 ───────── */
.top__brand { display: flex; flex-direction: column; min-width: 0; }
.howto-open {
  align-self: center; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 var(--s2); margin-right: calc(var(--s2) * -1);
  display: inline-flex; align-items: center; gap: var(--s1);
  background: transparent; border: 0; border-radius: var(--r-m);
  color: var(--ink-2); font-size: var(--t-meta); font-weight: 700; white-space: nowrap;
  transition: background-color var(--d-micro) var(--ease-out);
}
.howto-open svg.i { width: 18px; height: 18px; }
.howto-open:active { background: var(--paper-2); }

/* ───────── 下部シート（dialog） ───────── */
.tut {
  width: min(100%, 480px); max-width: 100%; max-height: 100%;
  margin: auto auto 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: visible;
}
.tut::backdrop { background: oklch(19% 0.012 160 / 0.56); }
.tut__sheet {
  display: flex; flex-direction: column;
  max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: var(--s2) 0 calc(var(--s4) + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 18px oklch(12% 0.01 160 / 0.18);
}
.tut[open] .tut__sheet { animation: tut-rise var(--d-long) var(--ease-out) both; }
.tut[open]::backdrop { animation: tut-fade 240ms ease-out both; }
@keyframes tut-rise { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tut-fade { from { opacity: 0; } to { opacity: 1; } }

.tut__head { flex: none; display: flex; justify-content: flex-end; padding: 0 var(--s2); }
.tut__close {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-m); color: var(--ink);
  transition: background-color var(--d-micro) var(--ease-out);
}
.tut__close:active { background: var(--paper-2); }

/* 全ページを同じマスに重ね、いちばん背の高いページで高さを決める（めくっても高さとボタン位置が動かない） */
.tut__pager { display: grid; padding: 0 var(--s4); touch-action: pan-y; }
.tut__page {
  grid-area: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  visibility: hidden; opacity: 0; transform: translateX(16px);
  transition: opacity var(--d-short) var(--ease-out), transform var(--d-short) var(--ease-out), visibility 0s linear var(--d-short);
}
.tut__page.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.tut__fig { height: 128px; display: grid; place-items: center; margin-bottom: var(--s1); }
.tut__h { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); line-height: 1.4; letter-spacing: 0.01em; }
/* 見出しは句（.tut__ph）の切れ目でだけ折る。1字だけ次の行に落ちるのを防ぐ */
.tut__ph { display: inline-block; }
.tut__p { margin: 0; line-height: 1.7; text-wrap: pretty; line-break: strict; }
.tut__note { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--paper-2); color: var(--ink-2); font-size: var(--t-meta); line-height: 1.6; text-wrap: pretty; line-break: strict; }

/* 1枚目: トップの見本と同じ写真と枠 */
.tut__photo { width: min(100%, 330px); }

/* 2枚目: 受付票の見本 */
.tut-slip {
  position: relative; width: min(100%, 300px);
  padding: var(--s2) var(--s3);
  background: var(--paper); border-radius: var(--r-s);
  box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--paper-3);
}
.tut-slip__tag {
  position: absolute; top: -10px; right: var(--s3); margin: 0;
  padding: 1px var(--s2); border-radius: 4px;
  background: var(--ink); color: var(--paper); font-size: var(--t-meta); font-weight: 700; line-height: 1.5;
}
.tut-slip__row {
  margin: 0; min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font-size: var(--t-meta); line-height: 1.3;
}
.tut-slip__row:not(:last-child) { border-bottom: 1px dashed var(--line-strong); }
.tut-slip__k { color: var(--ink-2); white-space: nowrap; }
.tut-slip__v { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; text-align: right; min-width: 0; }
.tut-slip__row--fee .tut-slip__v { font-family: var(--font-display); font-weight: 900; font-size: var(--t-body); color: var(--go); }
.tut-slip__pin { width: 14px; height: 14px; color: var(--go); }

/* 3枚目: スマホの中に鍵 */
.tut-phone { width: 200px; height: 128px; display: block; overflow: visible; }
.tut-phone__body { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.tut-phone__screen { fill: var(--stage); }
.tut-phone__sofa { fill: none; stroke: var(--stage-ink); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.tut-phone__frame { fill: var(--signal-tint); stroke: var(--signal); stroke-width: 1.6; }
.tut-phone__home { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.tut-phone__badge { fill: var(--go); stroke: var(--paper); stroke-width: 3; }
.tut-phone__lock { fill: var(--on-go); }
.tut-phone__shackle { fill: none; stroke: var(--on-go); stroke-width: 2.6; stroke-linecap: round; }

/* 下端: ドット（いまの枚）と「次へ」 */
.tut__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) 0; }
/* 当たり判定44pxのうち見える点は中央8px。点の左端がほぼ本文の左端（16px）にそろうよう、判定の余白分だけ左へ寄せる */
.tut__dots { display: flex; margin-left: calc(var(--s4) * -1); }
.tut__dot { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; }
.tut__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong);
  transition: width var(--d-short) var(--ease-out), background-color var(--d-short) var(--ease-out);
}
.tut__dot.is-on::before { width: 22px; background: var(--go); }
.tut__next { width: auto; min-width: 8em; flex: none; padding: 0 var(--s5); }

@media (prefers-reduced-motion: reduce) {
  .tut[open] .tut__sheet, .tut[open]::backdrop { animation: none; }
  .tut__page, .tut__dot::before, .howto-open, .tut__close { transition: none; }
  .tut__page { transform: none; }
}