/* 暮らしの道具だけの見た目（共通の style.css の後に読む）。写真の一覧と、選び方のカード */

/* 消すものの選び方：ラジオボタンをカードにする */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mode {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px 16px; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.mode:hover { border-color: var(--accent); }
.mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.mode input { margin-top: .35em; flex: none; }
.mode span { font-size: .88rem; line-height: 1.65; color: var(--text-2); }
.mode strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 2px; }

/* 読み込んだ写真の一覧 */
.photos { display: grid; gap: 10px; margin-top: 12px; }
.photo { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.photo.has-error { background: var(--error-bg); }
.thumb { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.thumb-none { display: grid; place-items: center; color: var(--muted); font-size: 1.4rem; }
.photo-body { min-width: 0; flex: 1; }
.photo-name { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.5; }
.photo-size { font-weight: 400; font-size: .82rem; color: var(--muted); margin-right: 4px; }
.photo-error { margin: 0; font-size: .9rem; color: var(--error); }
.meta-list { list-style: none; padding: 0; margin: 0; font-size: .88rem; line-height: 1.7; color: var(--text-2); }
.meta-list li { overflow-wrap: anywhere; }
.meta-list li.is-gps { color: var(--error); font-weight: 700; }
.meta-list li.is-person { color: var(--warning); font-weight: 700; }
.meta-none { margin: 0; font-size: .88rem; color: var(--muted); }
.warn-text { color: var(--error); margin-left: 4px; }

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.row-actions button { padding: 4px 12px; font-size: .85rem; }
.note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }

@media (max-width: 720px) {
  .thumb { width: 60px; height: 60px; }
  .photo { padding: 10px; gap: 10px; }
}

/* 容量の入力：数の後ろに単位を付け、よく使う容量はボタンで選べるようにする */
.kb-input { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.kb-input input { width: 8em; font-variant-numeric: tabular-nums; }
.kb-input input[aria-invalid="true"] { border-color: var(--error); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chips .chip {
  padding: 3px 12px; font-size: .85rem; font-weight: 600; border-radius: 999px;
  background: var(--surface); color: var(--text-2); border-color: var(--border-strong);
}
.chips .chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chips .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.field-error { margin: 8px 0 0; font-size: .88rem; color: var(--error); font-weight: 700; }

/* 仕上がりを大きく見る */
details.preview { margin: 8px 0 0; }
details.preview summary { font-size: .85rem; }
details.preview img { display: block; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); }

/* PDF のページの並び：番号を付け、並べ替えのボタンを置く */
ol.pages { list-style: none; padding: 0; margin: 12px 0 0; }
.page-row { align-items: center; }
.page-no {
  flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.page-row.has-error .page-no { background: var(--surface-2); color: var(--muted); }
/* PDF と同じに見えるように、画像の全体を白い紙の上に見せる */
.page-row .thumb { object-fit: contain; background: #fff; transition: transform .15s; }

/* 証明写真：切り抜きの画面と、動かすボタン */
.crop-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin: 10px 0 0; }
.crop-stage { display: block; max-width: 100%; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; touch-action: none; cursor: grab; }
.crop-stage:active { cursor: grabbing; }
.crop-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 200px; }
.crop-tools button { padding: 6px 10px; font-size: .88rem; }
.sheet-preview { display: block; max-width: min(100%, 360px); height: auto; margin: 6px 0 4px; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
.steps-list { margin: 14px 0 0; padding-left: 1.4em; font-size: .92rem; line-height: 1.8; color: var(--text-2); }