/* 写真まわり（表示画面のギャラリー・編集画面の写真の帯）。色は app.css の変数だけを使う —
 * ここにリテラルの色を書かない、ここで新しい色の変数を定義しない（足すなら app.css の両方の
 * パレットに）。tests/test_css.py が見張る。
 *
 * ⚠️ 見た目はここが全部持つ。gallery.js と photo-upload.js はクラスを付け外しするだけで、
 *    寸法も色も1つも書かない（JS に色を書くと、テーマの切り替えを生き延びる）。
 */

.gallery, .photo-strip {
  /* 小さい写真の一辺。⚠️ テンプレートの img の width/height 属性（96）と同じ数にしておく
     — 属性は読み込み中の場所取りで、ここは実際の大きさ。ずれると読み込んだ瞬間に跳ねる。 */
  --photo-tile: 96px;
  /* 縦長の写真が画面を食いつぶさないための上限。横長はたいてい列の幅で先に止まる。 */
  --photo-main-max-h: 70vh;
}

/* hidden を付けた要素は消える。⚠️ !important が要る: 下で display: flex を当てている
   ものは、それだけでブラウザ既定の hidden（display: none）に勝ってしまう。 */
.gallery [hidden], .photo-strip [hidden] { display: none !important; }

/* ---- 表示画面のギャラリー ------------------------------------------------ */

.gallery { display: flex; flex-direction: column; gap: 10px; }
/* ⚠️ align-items を flex-start にしないと、縦並びの flex の既定（stretch）が img の幅を
   列いっぱいに引き伸ばす。max-height と合わさると縦横の比が崩れて、写真が横に伸びる
   （実機で 900×700 の写真が 853×630 になっていた）。 */
.gallery-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* 素のまま（JS なし）は、この形で全部の写真が縦に並ぶ。 */
.gallery-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--photo-main-max-h);
  border-radius: var(--radius);
  background: var(--surface0);
}

/* gallery.js が .is-enhanced を付けたときだけ「1枚出して入れ替える」になる。 */
.gallery.is-enhanced .gallery-photo { display: none; }
.gallery.is-enhanced .gallery-photo.is-active { display: block; }

.gallery-thumbs { display: none; }
.gallery.is-enhanced .gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }

.gallery-pick {
  padding: 0;
  line-height: 0;
  cursor: pointer;
  background: none;
  border: 2px solid var(--surface1);
  border-radius: var(--radius);
}
.gallery-pick img {
  display: block;
  width: var(--photo-tile);
  height: var(--photo-tile);
  object-fit: cover;
  border-radius: calc(var(--radius) - 3px);
}
/* 今出ている1枚。JS は aria-current を動かすだけで、見た目はここが引き受ける
   （読み上げと見た目が同じ1つの事実から出る）。 */
.gallery-pick[aria-current="true"] { border-color: var(--blue); }
.gallery-pick:hover { border-color: var(--overlay); }
.gallery-pick[aria-current="true"]:hover { border-color: var(--blue); }
.gallery-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- 編集画面の写真の帯 -------------------------------------------------- */

.photo-strip { display: flex; flex-direction: column; gap: 8px; }

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(var(--photo-tile) + 22px);
  padding: 8px;
  background: var(--base);
  border: 1px solid var(--surface0);
  border-radius: var(--radius);
  font-size: 0.8rem;
  text-align: center;
}

.photo-thumb {
  display: block;
  width: var(--photo-tile);
  height: var(--photo-tile);
  object-fit: cover;
  border-radius: calc(var(--radius) - 3px);
  background: var(--surface0);
}

/* 「一覧に出る1枚」は先頭にだけ。どれが先頭かは :first-child が決めるので、並べ替えても
   印を付け替える処理が要らない。visibility にしてあるのは場所を残すため — display: none に
   すると、並べ替えのたびに札の高さのぶん段がずれる。 */
.photo-cover-mark { margin: 0; color: var(--peach); font-size: 0.75rem; }
.photo-list .photo-item:not(:first-child) .photo-cover-mark { visibility: hidden; }

.photo-move { display: flex; gap: 4px; margin: 0; }
.photo-move .btn { padding: 2px 8px; line-height: 1.4; }

.photo-del { display: flex; align-items: center; gap: 4px; color: var(--subtext); cursor: pointer; }
.photo-del input { margin: 0; }

/* 消す印を付けた写真。色を変えるだけでなく灰色にするのは、印を見落としたまま保存して
   「消えていた」を起こさないため。 */
.photo-item.is-doomed { border-color: var(--red); opacity: 0.55; }
.photo-item.is-doomed .photo-thumb { filter: grayscale(1); }

.photo-item.is-pending { border-color: var(--green); }
.photo-pending-mark { margin: 0; color: var(--green); font-size: 0.75rem; }

.photo-message {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--peach);
  border-radius: var(--radius);
  background: var(--tint-peach);
  font-size: 0.9rem;
}
/* 縮めている間の知らせは、断りではないので落ち着いた色で。 */
.photo-strip.is-busy .photo-message { border-color: var(--blue); background: var(--tint-blue); }
.photo-strip.is-busy { cursor: progress; }

@media (max-width: 600px) {
  .gallery, .photo-strip { --photo-tile: 72px; }
  .photo-item { font-size: 0.75rem; }
}