/* ホーム画面から開けるようにする（PWA）：保存したブリーフィングの一覧と、ホーム画面への追加の案内（pwa.js） */
:root { --a2-bg: #fff7e8; --a2-line: #f2b04a; --a2-text: #5a3b00; --a2-strong: #8a4b00; --a2-btn: #e08a00; --a2-x: #8a6a3a; }
@media (prefers-color-scheme: dark) {
  :root { --a2-bg: #33280f; --a2-line: #a8741c; --a2-text: #f3dfb8; --a2-strong: #ffcf7a; --a2-btn: #c87800; --a2-x: #d8bd8f; }
}
.a2-ic { width: 18px; height: 18px; vertical-align: -3px; flex: none; }

/* 案A：入力欄の上の帯 */
.a2-band { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--a2-bg); border: 1.5px solid var(--a2-line); color: var(--a2-text); font-size: .85rem; line-height: 1.5; }
.a2-band-tx { flex: 1; min-width: 0; }
.a2-band b { color: var(--a2-strong); }
.a2-how { flex: none; font: inherit; font-weight: 700; font-size: .8rem; color: #fff; background: var(--a2-btn); border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.a2-x { flex: none; font: inherit; font-size: 1.15rem; line-height: 1; color: var(--a2-x); background: none; border: 0; padding: 4px 6px; cursor: pointer; }

/* 案B：下から出る手順のカード */
.a2-dim { position: fixed; inset: 0; z-index: 900; background: rgb(10 25 45 / .45); }
.a2-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; max-width: 560px; margin: 0 auto; background: var(--card); color: var(--text); border-radius: 18px 18px 0 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgb(0 0 0 / .2); animation: a2-up .25s ease-out; }
@keyframes a2-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a2-sheet { animation: none; } }
.a2-sheet h3 { margin: 0 0 2px; padding-right: 36px; font-size: 1.05rem; line-height: 1.5; }
.a2-sheet .sub { margin: 0; }
.a2-lead { margin-bottom: 8px !important; padding-right: 36px; }
.a2-mas { position: absolute; right: 50px; top: -78px; width: 62px; height: auto; pointer-events: none; }
.a2-close { position: absolute; right: 10px; top: 8px; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--muted); background: none; border: 0; padding: 6px 8px; cursor: pointer; }
.a2-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.a2-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; font-size: .95rem; }
.a2-n { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.a2-steps small { display: block; color: var(--muted); font-size: .8rem; }
.a2-key { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 3px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); vertical-align: -7px; }
.a2-go { display: block; width: 100%; margin: 10px 0 4px; font: inherit; font-weight: 700; padding: 11px; border: 0; border-radius: 10px; background: var(--btn, var(--accent)); color: #fff; cursor: pointer; }
.a2-or { margin-top: 8px !important; }

/* 保存したブリーフィング（電波がなくても見られる） */
.saved { margin: 18px 0 0; padding: 10px 16px; }
.saved > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.saved-n { font-weight: 400; color: var(--muted); font-size: .85rem; }
.saved-off { margin: 8px 0 0; color: var(--imc); font-weight: 600; font-size: .9rem; }
.saved ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.saved li button { width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.saved li span { color: var(--muted); font-size: .85rem; }
.saved .sub { margin: 6px 0 0; }
.head .saved-note { color: var(--imc); }