/* 体験ページ（/taiken）。部品は style.css のものを使い、ここでは3つの画面の並べ方と端末の見た目だけを足す */

main.taiken > * { max-width: 1240px; }
.tk-head { margin-bottom: var(--s4); }
.tk-head .lead-sm { max-width: 48em; margin-bottom: var(--s4); }
.small { font-size: 13px; }

/* 流れ（いまの段は太字と塗り。色だけに頼らない） */
.tk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tk-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.tk-step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-steps li.done { color: var(--take); }
.tk-steps li.done .tk-step-n { background: var(--take-wash); color: var(--take); }
.tk-steps li[aria-current="step"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.tk-steps li[aria-current="step"] .tk-step-n { background: var(--ink); color: #fff; }

/* 3つの画面: 広い画面は横に3つ、中くらいは本人と端末を並べて家族を下、スマホは縦に */
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.tk-pane { margin: 0; min-width: 0; }
.tk-role { font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.tk-pane .h-sm { margin-top: 2px; }
@media (min-width: 481px) { .tk-chips { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
.tk-chips .chip-btn { font-size: 14px; }
.tk-pane .amount-field input { font-size: 28px; }
.tk-pane .btn-block { margin-top: var(--s4); }
.tk-hijack { width: 100%; margin-top: var(--s2); font-size: 14px; }
.tk-status:not(:empty) { margin: var(--s4) 0; border-bottom: 1px solid var(--line); padding-bottom: var(--s4); }

/* 取引の札 */
.tk-ticket, .tk-family-card { position: relative; }
.tk-ticket-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.tk-amount { font-size: 30px; font-weight: 700; line-height: 1.25; margin-top: 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk-payee { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
/* 判子は金額の右に置き、上の行（状態・時刻・照合番号）にかぶせない */
.tk-ticket .stamp, .tk-family-card .stamp { top: 38px; right: 6px; width: 76px; height: 76px; font-size: 17px; }
.tk-result { margin-top: var(--s3); font-weight: 700; }
.tk-result.ok { color: var(--take); }
.tk-result.bad { color: var(--shu); }

/* 送れるまで（rules.js の結果の言い換え） */
.tk-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-todo li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); padding: 8px 12px; border-radius: var(--r-md); background: var(--kin-wash); }
.tk-todo li b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.tk-todo li small { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.tk-todo .tk-todo-done { background: var(--take-wash); color: var(--take); }
.tk-todo .tk-todo-done small { color: var(--take); }
.tk-todo-mark { font-weight: 700; }
.tk-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.tk-actions .btn { flex: 1 1 auto; white-space: nowrap; }

/* 手元の端末（M5StickS3 の形）。画面は実機と同じ 240×135 を拡大 */
.tk-device-pane { text-align: left; }
.m5 { position: relative; margin: var(--s4) auto var(--s3); width: min(100%, 380px); padding-right: 14px; }
.m5-body { position: relative; background: #2b2b2e; border-radius: 22px; padding: 22px 18px 16px; box-shadow: inset 0 0 0 2px #3c3c40; }
.m5-led { position: absolute; top: 9px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #4a4a4f; }
.m5-screen { display: block; width: 100%; height: auto; aspect-ratio: 240 / 135; border-radius: 6px; background: #fff; image-rendering: auto; }
.m5-btn {
  position: relative; display: grid; place-items: center; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  font: 700 15px/1 var(--f-body); color: #fff; background: #48484d;
}
.m5-btn::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid transparent; }
.m5-btn.holding::after { border-color: var(--kin-line); transition: border-color .6s linear; }
.m5-btn.fired { background: var(--ink); }
.m5-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.m5-a { margin: 14px auto 0; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 -3px 0 #333; }
.m5-b { position: absolute; right: 0; top: 34%; width: 18px; height: 64px; border-radius: 0 10px 10px 0; font-size: 12px; }
.tk-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px var(--s4); font-size: 14px; }
.tk-sound { display: block; margin: var(--s3) auto 0; min-height: 40px; padding: 0 16px; font-size: 14px; }
.tk-watch { margin: var(--s4) 0 0; padding: var(--s3) 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.tk-watch legend { padding: 0 6px; font-size: 14px; font-weight: 700; }
label.tk-radio { display: flex; align-items: center; gap: var(--s2); margin: 0; min-height: 40px; font-weight: 400; font-size: 15px; }
.tk-radio input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--ink); flex: none; }

/* 家族のスマホ */
.tk-family { display: grid; gap: var(--s3); margin-top: var(--s3); }
.tk-empty { font-weight: 700; }
.tk-family-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.tk-reasons { margin: var(--s2) 0 0; padding-left: 1.2em; font-weight: 700; color: var(--shu); }
.tk-explain { margin-top: var(--s3); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); font-size: 14px; line-height: 1.65; }
.tk-explain p + p { margin-top: 4px; }
.tk-explain-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.tk-question { font-weight: 700; }
.tk-device-line { margin-top: var(--s2); font-size: 14px; font-weight: 700; }
.tk-device-line.ok { color: var(--take); }
.tk-device-line.bad { color: var(--shu); }
.tk-device-line.pending { color: var(--kin); }

.tk-log { margin-top: var(--s4); }

@media (max-width: 1279px) {
  .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #pane-family { grid-column: 1 / -1; }
}
/* 左メニューがあるタブレット幅では2列だと狭いので1列にする */
@media (max-width: 1023px) {
  .tk-grid { grid-template-columns: minmax(0, 1fr); }
  #pane-family { grid-column: auto; }
}
@media (max-width: 760px) {
  .tk-steps li { font-size: 13px; }
  .tk-amount { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .m5-btn.holding::after { transition: none; }
}

.tk-pane { scroll-margin-top: calc(var(--top) + 8px); }

.tk-watch + .tk-watch { margin-top: var(--s3); }
.tk-rhythm-result { margin-top: var(--s2); padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.6; background: var(--surface); }
.tk-rhythm-result.ok { background: var(--take-wash); color: var(--take); font-weight: 700; }
.tk-rhythm-result.notice { background: var(--kin-wash); color: var(--kin); }
.tk-rhythm-card { border-color: var(--kin-line); background: var(--kin-wash); }

/* 短い言葉は文節で折り返し、最後の行に1〜2文字だけ残さない（対応していないブラウザではふつうの折り返し） */
.chip-btn, .chip-btn span, .check-title, .tk-todo b, .tk-todo small, .tk-result, legend, label.tk-radio, .tk-keys span, .tk-steps li, .tk-reasons li, .tk-device-line, .tk-empty { text-wrap: pretty; }
@supports (word-break: auto-phrase) {
  .chip-btn, .chip-btn span, .check-title, .check-sub, .tk-todo b, .tk-todo small, legend, label.tk-radio, .tk-steps li, .tk-reasons li,
  .tk-device-line, .tk-pane .hint, .tk-explain p, .tk-result, .tk-head .lead-sm, .tk-rhythm-result { word-break: auto-phrase; }
}
/* スマホでは例の札を「名前の下に説明」の2段にして、狭い横並びで言葉の途中で折れないようにする */
@media (max-width: 480px) {
  .tk-chips .chip-btn { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
}