/* データの引っ越し（/move/）。最初に「移し方は 2 つ」を出し、選んだ方の画面に進む。色と土台は /move/theme.css */

/* トップアプリバー（戻る） */
.app-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; height: 64px; max-width: 600px; margin: 0 auto; padding: 0 8px 0 4px; background: var(--md-surface); }
.app-bar .icon-btn { visibility: hidden; }
.app-bar.has-back .icon-btn { visibility: visible; }

/* 画面（共有軸 X で切り替え） */
.stage { max-width: 600px; margin: 0 auto; }
.stage > .prep { margin: 0 24px 8px; }
.screen { display: none; flex-direction: column; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); padding: 8px 24px 0; }
.screen.is-on { display: flex; }
.screen.in-fwd { animation: mv-in-fwd .3s var(--md-emphasized); }
.screen.in-back { animation: mv-in-back .3s var(--md-emphasized); }
@keyframes mv-in-fwd { from { opacity: 0; transform: translateX(30px); } }
@keyframes mv-in-back { from { opacity: 0; transform: translateX(-30px); } }
@keyframes mv-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .screen.in-fwd, .screen.in-back { animation: mv-fade .15s; } }

.head .hero { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.head .hero .msr { font-size: 32px; }
.head .hero--ok { background: color-mix(in srgb, var(--ok) 18%, var(--md-surface)); color: var(--ok); }
.head .hero--err { background: var(--md-error-container); color: var(--md-on-error-container); }
.head h1 { margin: 20px 0 0; font-size: 32px; line-height: 40px; font-weight: 500; word-break: auto-phrase; }
.sub { margin: 12px 0 0; color: var(--md-on-surface-variant); }
.body { flex: 1; padding: 24px 0; }

/* 選ぶ */
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 16px 12px 16px 16px; border: 0; border-radius: 20px; background: var(--md-surface-container-low); color: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.choice:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.choice .lead { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.choice .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.choice b { font-weight: 500; font-size: 17px; line-height: 24px; }
.choice small { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); margin-top: 2px; }
.choice > .msr:last-child { color: var(--md-on-surface-variant); }
.badge { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 8px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 11px; line-height: 20px; font-weight: 500; vertical-align: 2px; }

/* リスト */
.list-h { margin: 0 0 4px; padding-left: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-primary); }
.list-h--gap { margin-top: 24px; }
.list { list-style: none; margin: 0; padding: 4px 0; border-radius: 20px; background: var(--md-surface-container-low); }
.item { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 16px; }
label.item { cursor: pointer; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.avatar .msr { font-size: 22px; }
.avatar--toolbox { background: var(--c-toolbox); color: var(--c-toolbox-ink); }
.avatar--nagi { background: var(--c-nagi); color: var(--c-nagi-ink); }
.avatar--malu { background: var(--c-malu); color: var(--c-malu-ink); }
.avatar--lab { background: var(--c-lab); color: var(--c-lab-ink); }
.avatar--site { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-text b { font-weight: 500; }
.item-text small { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 11px; flex: none; border: 2px solid var(--md-on-surface-variant); border-radius: 2px; display: grid; place-items: center; cursor: inherit; transition: background-color .15s, border-color .15s; }
.check::after { content: ""; width: 5px; height: 10px; border: solid var(--md-on-primary); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; scale: 0; transition: scale .15s var(--md-emphasized); }
.check:checked { background: var(--md-primary); border-color: var(--md-primary); }
.check:checked::after { scale: 1; }
.check:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 6px; }
.note { display: flex; gap: 12px; margin: 16px 0 0; padding: 0 16px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.note .msr { font-size: 20px; }

/* 移している途中 */
.linear { height: 4px; margin: 0 4px 16px; border-radius: 2px; background: var(--md-secondary-container); overflow: hidden; }
.linear i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--md-primary); transition: width .45s var(--md-emphasized); }
.status { display: grid; place-items: center; min-width: 40px; height: 40px; flex: none; font-size: 13px; color: var(--md-on-surface-variant); }
.status .spin, .status .msr { display: none; }
.status .spin { width: 22px; height: 22px; border: 3px solid var(--md-primary); border-right-color: transparent; border-radius: 50%; animation: mv-spin .8s linear infinite; }
.status .msr { color: var(--md-primary); }
.item.is-busy .status .spin { display: block; }
.item.is-busy .status .wait, .item.is-done .status .wait { display: none; }
.item.is-done .status .msr { display: inline-block; }
/* 向こうにデータがあって、置きかえなかった */
.item.is-skip .status .wait { display: inline; }
/* この端末にデータがないアプリ（選べない） */
.item.is-empty { opacity: .55; }
.item.is-empty .check { cursor: default; }
@keyframes mv-spin { to { rotate: 360deg; } }
/* 届くのを待っているあいだ（どれだけかかるか分からないので、行ったり来たり） */
.linear--wait i { width: 35%; animation: mv-wait 1.3s var(--md-emphasized) infinite; }
@keyframes mv-wait { from { translate: -100% 0; } to { translate: 290% 0; } }
@media (prefers-reduced-motion: reduce) { .linear--wait i { animation-duration: 3s; } }
/* 移したあとの画面: アプリを開く行 */
a.item { color: inherit; text-decoration: none; }
a.item > .msr:last-child { color: var(--md-on-surface-variant); }
label.text-btn { cursor: pointer; }

/* 手順 */
.steps { list-style: none; margin: 0; padding: 0 0 0 4px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; column-gap: 16px; padding: 8px 0; }
.steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--md-primary); color: var(--md-on-primary); font-size: 12px; font-weight: 500; }
.steps b { font-weight: 500; }
.steps small { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.callout { display: flex; gap: 12px; margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--md-surface-container-high); font-size: 14px; line-height: 20px; }
.callout .msr { font-size: 20px; color: var(--md-primary); }

/* 下のバー（左に text、右に filled） */
.bottom { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -24px; padding: 12px 24px max(16px, env(safe-area-inset-bottom)); background: var(--md-surface); }
.bottom.is-raised { box-shadow: 0 -1px 0 var(--md-outline-variant); }
.bottom .m3-btn { margin-left: auto; }
.bottom .text-btn { margin-left: -16px; }

@media (max-width: 480px) {
  .head h1 { font-size: 28px; line-height: 36px; }
  .stage > .prep { margin: 0 16px 8px; }
  .screen { padding: 4px 16px 0; }
  .bottom { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .bottom .text-btn { margin-left: -8px; }
}