/* 盗難被害を登録（/report/）: 入力・確認・完了。色は parts.css の変数だけを使う */
.rp-wrap { max-width: 720px; }
.pg-wrap fieldset { min-width: 0; }
.rp-group { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.rp-group[hidden], .rp-confirm[hidden], .rp-steps[hidden], .rp-req-note[hidden], .pg-note[hidden], #rp-intro[hidden] { display: none; }
.rp-group > .pg-field, .rp-group > .pg-note { margin: 0; }
.pg-form fieldset.pg-field { border: 1px solid var(--cmt-line); padding: 14px 12px 16px; gap: 14px; }
.pg-form fieldset.pg-field > legend { padding: 0 6px; }
.rp-req-note { margin: 16px 0 0; }

/* 進み方 */
.rp-steps { display: flex; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.rp-steps li { flex: 1; text-align: center; padding: 8px 4px; font-size: var(--cmt-fs-s); color: var(--cmt-text-sub); background: var(--cmt-surface); border-top: 4px solid var(--cmt-line); }
.rp-steps li[aria-current="step"] { color: var(--cmt-navy); font-weight: 700; border-top-color: var(--cmt-navy); }

/* 選ぶ項目（種類・連絡手段）: 押せる高さ 44px 以上 */
.rp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--cmt-text-sub); background: var(--cmt-white); font-size: var(--cmt-fs-m); text-align: center; cursor: pointer; }
.rp-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rp-opt span { padding: 8px; line-height: 1.4; }
.rp-opt:has(input:checked) { background: var(--cmt-navy); border-color: var(--cmt-navy); color: var(--cmt-white); font-weight: 700; }
.rp-opt:has(input:focus-visible) { outline: 3px solid var(--cmt-car); outline-offset: 2px; }

/* 日時を2つ並べる */
.rp-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.pg-field input[type="date"], .pg-field input[type="time"], .pg-field input[type="tel"] { width: 100%; min-height: var(--cmt-touch); padding: 10px 12px; border: 1px solid var(--cmt-text-sub); background: var(--cmt-white); font: inherit; font-size: 16px; color: var(--cmt-text); border-radius: 0; }
.pg-field input[type="date"]:focus-visible, .pg-field input[type="time"]:focus-visible, .pg-field input[type="tel"]:focus-visible { outline: 3px solid var(--cmt-car); outline-offset: 1px; }

/* 写真 */
.rp-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.rp-file:focus-visible + .rp-pick { outline: 3px solid var(--cmt-car); outline-offset: 2px; }
.rp-pick { justify-content: center; }
.rp-geo { color: var(--cmt-text); background: var(--cmt-surface); padding: 8px 10px; border-left: 4px solid var(--cmt-car); }
.rp-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rp-thumbs:empty { display: none; }
.rp-thumbs li { position: relative; border: 1px solid var(--cmt-line); background: var(--cmt-surface); }
.rp-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rp-rm { display: block; width: 100%; min-height: var(--cmt-touch); border: 0; border-top: 1px solid var(--cmt-line); background: var(--cmt-white); font: inherit; font-size: var(--cmt-fs-m); color: var(--cmt-navy); cursor: pointer; }

/* 確認 */
.rp-confirm { margin-top: 20px; }
.rp-confirm h2 { margin: 0 0 8px; font-size: var(--cmt-fs-xl); color: var(--cmt-navy); }
.rp-confirm dl { margin: 12px 0; display: grid; grid-template-columns: 1fr; }
.rp-confirm dt { margin-top: 12px; font-size: var(--cmt-fs-s); font-weight: 700; color: var(--cmt-text-sub); }
.rp-confirm dd { margin: 2px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--cmt-line); font-size: var(--cmt-fs-m); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-actions { display: grid; gap: 8px; margin-top: 20px; }
#rp-receipt { font-size: var(--cmt-fs-l); }
#rp-receipt b { font-family: var(--cmt-font-mono); letter-spacing: .05em; }
@media (min-width: 760px) {
  .rp-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-confirm dl { grid-template-columns: 14em 1fr; column-gap: 16px; }
  .rp-confirm dt { margin-top: 0; padding: 10px 0; border-bottom: 1px solid var(--cmt-line); }
  .rp-confirm dd { margin: 0; padding: 10px 0; }
  .rp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 盗難対策の種類（複数選択） */
.rp-checks { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .rp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
#rp-sec-group .pg-check { border-bottom: 1px solid var(--cmt-line); }
#rp-other-wrap { margin-top: 8px; }

/* 年式（数字の欄）も、ほかの欄と同じ高さ・枠にそろえる */
.pg-field input[type="number"] { width: 100%; min-height: var(--cmt-touch); padding: 10px 12px; border: 1px solid var(--cmt-text-sub); background: var(--cmt-white); font: inherit; font-size: 16px; color: var(--cmt-text); border-radius: 0; box-sizing: border-box; }
.pg-field input[type="number"]:focus-visible { outline: 3px solid var(--cmt-car); outline-offset: 1px; }