@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* =============================================================
     MyPage 手続きフローステップ (移植元: mypage.css)
     -------------------------------------------------------------
     Blade: resources/views/mypage/partials/action_links.blade.php
     旧デモ環境の `mypage.css` から必要最小限のクラスを移植。
     Tailwind v4 利用下でも独自ユーティリティとしてそのまま運用。
     役割: ステップインジケーターの視覚スタイル再現。
     ============================================================= */

/* コンテナ */
.mp-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2.5rem; align-items:stretch; margin-left:auto; margin-right:auto; }
.mp-step { position:relative; }

/* カード本体 */
.mp-step__card { display:block; background:#fff; border:2px solid #cbd5e1; border-radius:10px; padding:1.25rem 1.4rem 1.15rem; text-decoration:none; transition:border-color .25s, box-shadow .25s; }
.mp-step--current .mp-step__card { border-color:#f59e0b; box-shadow:0 0 0 1px #f59e0b inset; }
.mp-step--done .mp-step__card { border-color:#16a34a; }
.mp-step__card:hover { text-decoration:none; border-color:#64748b; }

/* ヘッダー行 */
.mp-step__head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.mp-step__title { font-size:1.05rem; font-weight:600; line-height:1.35; color:#111827; }

/* タイトル＋所要時間のまとまり */
.mp-step__title-wrap { display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:baseline; }

/* 所要時間表示 */
.mp-step__time { font-size:.78rem; font-weight:500; color:#6b7280; white-space:nowrap; }

/* バッジ */
.mp-step__badge { display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.5px; padding:.35rem .65rem; border-radius:999px; line-height:1; }
.mp-step__badge--todo { background:#6b7280; color:#fff; }
.mp-step__badge--current { background:#f59e0b; color:#111827; }
.mp-step__badge--done { background:#16a34a; color:#fff; }

/* ロック説明 */
.mp-step__lock-hint { margin:.65rem 0 0; font-size:.75rem; color:#6b7280; line-height:1.4; }

/* ステップ間矢印 */
.mp-step__arrow { text-align:center; margin:.75rem 0 0; font-size:1.25rem; color:#6b7280; }

@media (min-width:720px){
    .mp-steps { max-width:520px; }
}
@media (max-width:480px){
    .mp-step__title { font-size:.95rem; }
    .mp-step__time  { font-size:.7rem; }
    .mp-steps { gap:2rem; }
}