/* ボタン、カード、バッジ、ダイアログ、トースト、タグ（設計書 4-0・4-8） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;font:inherit;font-weight:600;border-radius:var(--r);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;max-width:100%}
.btn:hover{background:var(--sunken)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent)}
.btn-danger{background:var(--surface);border-color:var(--danger);color:var(--danger)}
.btn-sm{min-height:36px;padding:4px 12px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{min-width:44px;padding:4px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stack{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.section{margin-top:40px}
.section-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.badge{display:inline-block;font-size:13px;line-height:1.5;padding:0 8px;border-radius:999px;border:1px solid var(--border);white-space:nowrap;font-weight:600}
.badge-warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-text)}
.badge-ok{color:var(--success);border-color:var(--success)}
.badge-plain{color:var(--muted)}
.badge-danger{color:var(--danger);border-color:var(--danger)}
.dlg{border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);padding:0;width:min(560px, calc(100vw - 32px));max-height:calc(100vh - 32px)}
.dlg::backdrop{background:rgba(0,0,0,.45)}
.dlg-title{padding:20px 20px 0}
.dlg-body{padding:16px 20px;overflow:auto;max-height:calc(100vh - 200px)}
.dlg-body p+p{margin-top:8px}
.dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 20px 20px}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom));z-index:50;display:grid;gap:8px;width:min(520px, calc(100vw - 32px))}
@media (min-width:960px){ .toasts{bottom:24px} }
.toast{background:var(--text);color:var(--bg);padding:10px 14px;border-radius:var(--r);transition:opacity .3s}
.toast-error{background:var(--danger);color:var(--surface)}
.toast.out{opacity:0}
.tags{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:2px;background:var(--sunken);border-radius:999px;padding:0 4px 0 10px;font-size:14px}
.tag-x{border:0;background:transparent;color:var(--muted);font:inherit;min-width:32px;min-height:32px;cursor:pointer}
.tag-static{display:inline-block;background:var(--sunken);border-radius:999px;padding:0 8px;font-size:13px;margin:0 4px 0 0}
.checklist{display:grid;gap:4px;max-height:220px;overflow:auto;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.check{display:flex;align-items:center;gap:8px;min-height:36px}
.empty{padding:24px;border:1px dashed var(--border-strong);border-radius:var(--r);text-align:center;display:grid;gap:12px;justify-items:center;color:var(--muted)}
.bar{height:6px;background:var(--sunken);border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--accent)}
.list{list-style:none;margin:0;padding:0}
.list-item{border-bottom:1px solid var(--border)}
.list-item a,.list-link{display:block;padding:12px 4px;color:var(--text);text-decoration:none}
.list-item a:hover{background:var(--sunken)}
.error-screen,.fatal{max-width:640px;margin:48px auto;padding:0 16px;display:grid;gap:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px;overflow-x:auto}
.tab{font:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;min-height:44px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.warn-text{color:var(--warn-text);font-weight:600}
.danger-text{color:var(--danger)}
.ok-text{color:var(--success)}
.opening{max-width:640px;margin:48px auto;padding:0 16px}