/*
 * public/css/emergency.css — 緊急時の掲示板
 *
 * ★ 普段の画面より、すべてを大きく・少なくする。
 *   緊急時は手が震え、画面が見にくく、考える余裕が無い。
 *   ここでは「小さくても情報が多いほうが親切」という普段の判断が逆になる。
 */

/* --- 呼びかけの帯 --- */
.callbar {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--grad-urgent);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.callbar--drill { background: linear-gradient(180deg, #6a7f8c 0%, #55676f 100%); }
.callbar__title { margin: 0; font-size: var(--fs-head); font-weight: 800; color: #fff; }
.callbar__when { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); opacity: 0.92; }

/* --- 送れていないときの帯 -------------------------------------------------
   ★ これがこの機能でいちばん大事な表示。
     送れたと誤解させると、本人は連絡したつもりのまま待ってしまう。
     だから「送れていない」と言い切り、すぐ隣に電話を置く
     (docs/PRINCIPLES.md 原則5)。 */
.stuckbar {
  position: sticky;
  /* ★ 上の帯の下に置く。0 にすると戻るボタンを覆う（実測で確認）。 */
  top: var(--tap-min);
  z-index: 15;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: #fff3cd;
  box-shadow: var(--shadow-2), 0 0 0 3px #b8860b inset;
}
.stuckbar--hard { background: #fadddd; box-shadow: var(--shadow-2), 0 0 0 3px var(--c-urgent) inset; }
.stuckbar__title { margin: 0 0 var(--sp-1); font-size: var(--fs-head); font-weight: 800; color: #8d1c1c; }
.stuckbar__sub { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); color: var(--c-ink); }
/* ★ 帯を高くしない。高いと名簿が押し出され、
   「誰に電話するか」がひと目で入らなくなる。 */
.stuckbar__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.stuckbar__row .btn { flex: 1 1 auto; min-height: var(--tap-min); }

/* --- 大きな選択ボタン ------------------------------------------------------ */
.picks2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.bigpick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 7.5rem;
  padding: var(--sp-3);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bigpick__mark { font-size: 2.4rem; line-height: 1; }
.bigpick:active { transform: scale(0.95); box-shadow: var(--shadow-press); }
.bigpick:focus-visible { outline: 4px solid var(--c-ink); outline-offset: 3px; }
/* ★ 選んだ状態は「色が変わる」だけにしない。✓ と太い枠も付ける。 */
.bigpick[aria-pressed='true'] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.bigpick[aria-pressed='true'] .bigpick__label::after { content: ' ✓'; color: var(--c-accent); }

/* 助けが必要。★ 他と離して、幅いっぱいに置く。
   無事の並びの隣に置くと、押し間違いが起きる。 */
.bigpick--help {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  min-height: 6rem;
  border-color: var(--c-urgent);
  color: #8d1c1c;
}
.bigpick--help[aria-pressed='true'] { background: var(--grad-urgent); color: #fff; border-color: transparent; }
.bigpick--help[aria-pressed='true'] .bigpick__label::after { color: #fff; }

/* --- みんなのようす -------------------------------------------------------- */
.people { list-style: none; margin: 0; padding: 0; }
.person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  /* ★ 狭い画面（320px の古い iPhone SE）で、名前と札が
     電話ボタンの下に潜って読めなくなっていた。折り返して逃がす。 */
  flex-wrap: wrap;
}
.person__name { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.person__body { flex: 1 1 8rem; }
.person:last-child { border-bottom: 0; }
.person__mark { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.person__body { flex: 1; min-width: 0; }
.person__name { font-weight: 700; }
.person__note { font-size: var(--fs-caption); color: var(--c-ink-weak); overflow-wrap: anywhere; }
/* まだ返事が無い人と、助けが必要な人を面ごと目立たせる。 */
.person--none { background: rgba(176, 37, 37, 0.05); }
.person--help { background: rgba(176, 37, 37, 0.11); }

/* 電話。★ この丸ボタンが緊急機能の本体 (docs/PRINCIPLES.md 原則5)。 */
.callbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: 999px;
  background: var(--grad-accent);
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform 60ms ease-out;
  touch-action: manipulation;
}
.callbtn:active { transform: scale(0.92); }
.callbtn--urgent { background: var(--grad-urgent); }

/* --- 掲示板 --------------------------------------------------------------- */
.board { list-style: none; margin: 0; padding: 0; }
.board li { padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.board li:last-child { border-bottom: 0; }
.board__who { font-size: var(--fs-caption); font-weight: 700; color: var(--c-accent); }
.board__when { font-size: var(--fs-caption); color: var(--c-ink-weak); margin-left: var(--sp-2); }
.board__body { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }

.write { display: flex; flex-direction: column; gap: var(--sp-2); }
.write textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: var(--sp-3);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font: inherit;
  font-size: var(--fs-body);
  resize: vertical;
}
.write textarea:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 1px; }