/* ===========================
   引越しの手続きの一覧（hikkoshi）だけの見た目。値は ../style.css のトークンだけを使う
   1 手続き ＝ 1 行（印のチェック・名前と期限・やること・窓口と根拠）。スマホで表は横にはみ出すので並べない
   =========================== */
.radios { display: flex; flex-wrap: wrap; column-gap: var(--sp-4); }
.checks { display: grid; gap: 0 var(--sp-3); }
@media (min-width: 600px) { .checks { grid-template-columns: 1fr 1fr; } }
.h-group { font-size: var(--fs-m); margin: var(--sp-4) 0 var(--sp-2); }
.h-group:first-child { margin-top: 0; }
.steps-list { list-style: none; margin: 0; padding: 0; }
.step { border-top: 1px solid var(--border); padding: var(--sp-2) 0; }
.step-head { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.step-head input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.step-name { font-weight: 700; }
.step-due { display: block; font-weight: 400; color: var(--muted); }
.step-due b { color: var(--text); }
.step.is-overdue .step-due b { color: var(--error); }
.step-body { margin: var(--sp-1) 0 0 calc(1.4rem + var(--sp-2)); }
.step-body p { margin: 0 0 var(--sp-1); }
.step-meta { color: var(--muted); font-size: var(--fs-s); }
.step.is-done .step-name, .step.is-done .step-body { color: var(--muted); }
.step.is-done .step-name { text-decoration: line-through; }
.print-only { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .print-only { display: block; }
  .result-card, form, .badge { display: none !important; }
  .card { border: 0; padding: 0; margin: 0; }
  .step { padding: 2px 0; break-inside: avoid; }
  .step-head { min-height: 0; }
  .step-body { margin-left: 1.6rem; font-size: 9pt; }
  .step-meta { font-size: 8pt; }
  #h-list { font-size: 12pt; margin: 0 0 4px; }
}