/*
 * event.css — よてい を あわせる 画面
 *
 * 値の正本は tokens.css。ここに生の px や色コードを書かないこと。
 * ★ 30日ぶんを縦に並べる前提。1行ずつが独立して読めることを優先し、
 *   マトリクス（人 × 日 の表）にしない。11〜20人だと横に破綻するため。
 */

.wrap--wide { max-width: 40rem; }

/* --- タブ --------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.tab {
  flex: 1;
  min-height: var(--tap-min);
  border: var(--border) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-body);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* ★ 選択中を色だけで表さない。太字と下線でも示す。 */
.tab--on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tab { transition: transform 60ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tab:active { transform: scale(0.97); }
.tab:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

/* --- こたえる: 1日1行 ---------------------------------------------------- */
.days { list-style: none; margin: 0; padding: 0; }
.day {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-line);
}
.day__date {
  flex: 1;
  min-width: 7.5em;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
/* 休みの日はうっすら色を敷く。★ただし色だけに頼らず「(日)」の曜日も出す。 */
.day--rest .day__date { background: rgba(200, 132, 42, 0.12); border-radius: 6px; padding: 2px 6px; }
.day__dow { color: var(--c-ink-weak); font-size: var(--fs-caption); margin-left: 0.3em; }
.day__buttons { display: flex; gap: var(--sp-2); }

.pick {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radius);
  border: var(--border) solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-weak);
  font-size: var(--fs-head);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  /* ★ 押した瞬間に見た目が変わること。
     指で触っている間はボタンが指の下に隠れるので、
     「押せたのか分からない」が起きやすい。色の変化だけでなく
     大きさも変えて、指をどけた後にも変化が残るようにする。 */
  transition: transform 60ms ease-out, background-color 60ms ease-out;
  /* タップ後の300ms待ち（ダブルタップ拡大の判定）をなくす */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pick:active { transform: scale(0.90); background: var(--c-bg); }
.pick:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

/* 選ばれている状態。
   ★ 枠線を太くするだけでは弱い（指をどけた後に見て分からない）。
     塗りつぶして白抜き文字にし、遠目にも一目で分かるようにする。
   ★ 色・枠線の種類・背景の模様の3つで区別する（色だけに頼らない）。 */
.pick[aria-pressed='true'] {
  border-width: 4px;
  color: var(--c-accent-ink);
}
.pick--o[aria-pressed='true'] {
  background-color: var(--c-ok); border-color: var(--c-ok); border-style: solid;
}
.pick--t[aria-pressed='true'] {
  background-color: var(--c-maybe); border-color: var(--c-maybe); border-style: dashed;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.30) 0 4px, transparent 4px 9px);
}
.pick--x[aria-pressed='true'] {
  background-color: var(--c-ng); border-color: var(--c-ng); border-style: dotted;
  background-image: radial-gradient(rgba(255,255,255,.45) 1.5px, transparent 1.6px);
  background-size: 8px 8px;
}
.pick[aria-pressed='true']:active { transform: scale(0.90); }

/* --- けっか -------------------------------------------------------------- */
.ranks { list-style: none; margin: 0; padding: 0; }
.rank {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.rank__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.rank__no {
  font-size: var(--fs-head); font-weight: 700; min-width: 2.4em;
  font-variant-numeric: tabular-nums;
}
.rank__date { font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank__verdict { margin-left: auto; font-size: var(--fs-caption); color: var(--c-ink-weak); }

/* 積み上げ棒。★色だけで分けず、模様も変える。 */
.bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin: var(--sp-2) 0; border: 1px solid var(--c-line); }
.bar__seg { height: 100%; }
.bar__seg--o { background: var(--c-ok); }
.bar__seg--t {
  background: var(--c-maybe);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 3px, transparent 3px 7px);
}
.bar__seg--x {
  background: var(--c-ng);
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.2px);
  background-size: 6px 6px;
}
.bar__seg--u {
  background: var(--c-bg);
  background-image: repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 6px);
}

.rank__counts { font-size: var(--fs-caption); color: var(--c-ink-weak); font-variant-numeric: tabular-nums; }
.rank__blocked { color: var(--c-ng); font-size: var(--fs-caption); }

.runs { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.runs li {
  padding: var(--sp-3);
  border: var(--border) solid var(--c-accent);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
  font-weight: 700;
}

summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-weight: 700; }

/* --- トップの一覧 -------------------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; }
.card--link { padding: 0; }
.card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  /* ★ カード全体を押せるようにする。細いリンクだけだと親世代が押しにくい。 */
  min-height: var(--tap-min);
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--c-ink);
}
.card__link:focus-visible { outline: 3px solid var(--c-ink); outline-offset: -3px; }
.card__title {
  font-size: var(--fs-head);
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card__meta { font-size: var(--fs-caption); color: var(--c-ink-weak); }

/* --- まとめて入力 -------------------------------------------------------- */
.bulk {
  border: var(--border) solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
  background: var(--c-surface);
}
.bulk__label { font-weight: 700; margin-bottom: var(--sp-2); }
.bulk__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* 曜日のふだ。7〜8個が狭い画面でも折り返して収まるようにする。 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  /* ★ 高さは指の当たりやすさを決めるので削らない。幅は折り返しで吸収する。 */
  min-height: var(--tap-min);
  min-width: 3.2em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: var(--border) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-body);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.chip { transition: transform 60ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chip__n { font-size: var(--fs-caption); font-weight: 400; color: var(--c-ink-weak); }
/* ★ 選ばれている状態を色だけで表さない。塗りつぶし・太い枠・✓ の3つで示す。 */
.chip--on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  border-width: 4px;
  color: var(--c-accent-ink);
}
.chip--on::before { content: '✓'; font-size: var(--fs-caption); }
.chip--on .chip__n { color: var(--c-accent-ink); }
.chip:active:not(:disabled) { transform: scale(0.94); }
.chip:disabled { opacity: 0.4; cursor: default; }
.chip:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

.bulk__btn {
  /* ★ まとめて入力は何十日分も一度に変える。押しやすさより「押し間違えにくさ」を
     優先し、1日ぶんのボタン(56px正方)より横長にして指が滑らないようにする。 */
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: var(--border) solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: var(--fs-caption);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.bulk__btn { transition: transform 60ms ease-out, background-color 60ms ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bulk__btn:active:not(:disabled) { transform: scale(0.96); background: var(--c-bg); }
.bulk__btn:disabled { opacity: 0.4; cursor: default; border-color: var(--c-line); color: var(--c-ink-weak); }
.bulk__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.bulk__btn--undo { border-color: var(--c-ink); color: var(--c-ink); border-style: dashed; }

/* --- 週の見出し ---------------------------------------------------------- */
.week {
  list-style: none;
  margin: var(--sp-5) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border-left: 4px solid var(--c-accent);
  border-radius: 4px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-ink-weak);
}
.week:first-child { margin-top: 0; }

/* --- だれとして答えるか（ログインができるまでの仮置き）------------------- */

/* --- 保存 ---------------------------------------------------------------- */
.savebar {
  position: sticky;
  bottom: 0;
  /* ★ 他の要素の下に潜らないこと。押す場所が見えないのが一番困る。 */
  z-index: 10;
  /* ★ 横に並べない。状態の文が長いと、隣のボタンが潰れて
     文字が縦書きのようになる（実際にそうなった。2026-08-31）。
     下の操作バーは、文が上・ボタンが下の二段にする。 */
  display: block;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  margin-top: var(--sp-4);
  background: var(--c-bg);
  border-top: var(--border) solid var(--c-line);
}
.btn--send {
  margin-top: 0;
  flex: 1;
  transition: transform 60ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn--send:active:not(:disabled) { transform: scale(0.97); }
.btn--send:disabled { opacity: 0.5; cursor: default; }
.save-state { margin: 0; font-size: var(--fs-caption); }
.save-state--wait { color: var(--c-ink-weak); }
.save-state--ok { color: var(--c-ok); font-weight: 700; }
.save-state--ok::before { content: '✓ '; }
.save-state--ng { color: var(--c-ng); font-weight: 700; }
.save-state--ng::before { content: '！ '; }

/* --- 結果のカレンダー ----------------------------------------------------
   ★ 決まりは2つだけ。
     1. マスは全部おなじ形。候補でない日も同じ枠に入れて薄くする。
        枠なしの裸の数字を混ぜると升目のリズムが壊れ、
        どこが何週目なのか目で追えなくなる（2026-08-31 に指摘を受けた）。
     2. 日にちの色は曜日のために空ける（日曜・祝日=赤／土曜=青）。
        地色は「その日の具合」に**ごく薄く**使う。
        濃く塗ると曜日が消えるが、薄ければ両立する。

   ★ マスの中でいちばん大きいのは「○が何人か」。
     日にちと同じ大きさにすると、数字が並んでいるだけに見える。 */
.cal__month { font-size: var(--fs-head); margin: var(--sp-5) 0 var(--sp-2); }
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal__head {
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--c-ink-weak);
  padding: var(--sp-1) 0;
}
.cal__head--sun { color: var(--c-sun); }
.cal__head--sat { color: var(--c-sat); }
.cal__pad { min-height: 4.4rem; }

.cal__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  min-height: 4.4rem;
  padding: 3px 2px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  font-family: inherit;
  cursor: pointer;
  transition: transform 60ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cal__cell:active:not(:disabled) { transform: scale(0.94); }
.cal__cell:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

.cal__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
}
.cal__day { font-size: 0.72rem; font-weight: 800; line-height: 1.1; }

/* ★ ここが本体。マスの中でいちばん大きい。 */
.cal__n {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-top: auto;
  color: var(--c-ink);
}
.cal__n strong { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.cal__n small { font-size: 0.6rem; font-weight: 700; opacity: 0.7; }

/* × がある日だけ小さく出す。無い日には何も足さない。 */
.cal__ng {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--c-ng-deep);
  line-height: 1.2;
}

/* 上位3日。★ 読める大きさの札にする（前は豆粒の四角だった）。 */
.cal__rank {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border-radius: 999px;
  padding: 1px 4px;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- 曜日ごとの日にちの色 ------------------------------------------------ */
.cal__cell--wd .cal__day { color: var(--c-ink-weak); }
.cal__cell--sun .cal__day { color: var(--c-sun); }
.cal__cell--sat .cal__day { color: var(--c-sat); }

/* --- その日の具合 ---------------------------------------------------------
   ★ 色は3段だけにする。5段あっても、どれがどれか覚えられない。
     覚えられない色分けは、無いのと同じ（むしろ邪魔になる）。

       緑 … 行けそう（×がいない）
       白 … 返事まち（×はいないが、まだ答えていない人がいる）
       赤 … 行けない人がいる

   ★ ごく薄く。濃く塗ると曜日の色が消える。
   ★ そして必ず凡例を出す（.callegend）。色の意味を書かずに
     色で分けても、読む側には何も伝わらない。 */
.cal__cell--bA,
.cal__cell--bB { background: var(--c-ok-soft); }
.cal__cell--bA { box-shadow: 0 0 0 2px var(--c-ok) inset; }
.cal__cell--bC { background: var(--c-surface); }
.cal__cell--bD,
.cal__cell--bE { background: var(--c-ng-soft); }
.cal__cell--bA .cal__n,
.cal__cell--bB .cal__n { color: var(--c-ok-deep); }
.cal__cell--bD .cal__n,
.cal__cell--bE .cal__n { color: var(--c-ng-deep); }

/* マスの中の ○ と ×。★ 数字だけを置かない。
   「4人」だけでは何が4人なのか分からない、と指摘を受けた。 */
.cal__mk { font-size: 0.75rem; font-weight: 800; opacity: 0.85; }

/* --- 凡例 -----------------------------------------------------------------
   ★ 色で分けるなら、その色が何かを書く。書かない色分けは伝わらない。 */
.callegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-ink-weak);
}
.callegend__i { display: inline-flex; align-items: center; gap: 5px; }
.callegend__sw {
  width: 1.1rem; height: 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--c-line);
}
.callegend__sw--ok { background: var(--c-ok-soft); box-shadow: 0 0 0 2px var(--c-ok) inset; }
.callegend__sw--wait { background: var(--c-surface); }
.callegend__sw--ng { background: var(--c-ng-soft); }
.callegend__marks { flex-basis: 100%; color: var(--c-ink); }

/* 候補になっていない日。★ 枠は残す。升目のリズムを壊さないため。 */
.cal__cell--off {
  background: transparent;
  border-color: transparent;
  cursor: default;
  justify-content: flex-start;
}
.cal__cell--off .cal__day { color: var(--c-line); font-weight: 700; }

.cal__cell--sel { outline: 4px solid var(--c-ink); outline-offset: -1px; }

.cal__detail {
  margin: var(--sp-3) 0 var(--sp-5);
  padding: var(--sp-3);
  border-left: 4px solid var(--c-accent);
  background: var(--c-surface);
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* --- ひとこと（記入時）--------------------------------------------------- */
.day { flex-wrap: wrap; }
.day__note { flex-basis: 100%; padding: 0 0 var(--sp-2); }
.note__btn {
  min-height: 2.4rem;
  padding: var(--sp-1) var(--sp-3);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink-weak);
  font-size: var(--fs-caption);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* ★ ひとことが入っている行は、入っていない行と一目で違って見えること。
   点線→実線＋文字色で示す（色だけに頼らない）。 */
.note__btn--has {
  border-style: solid;
  border-color: var(--c-accent);
  color: var(--c-ink);
}
.note__btn--has::before { content: '💬 '; }
.note__btn:active { background: var(--c-bg); }
.note__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  /* ★ 1rem 未満にしない。iOS はフォーム要素が16px未満だとタップ時に画面を拡大する。 */
  font-size: var(--fs-body);
  font-family: inherit;
  border: var(--border) solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
}

/* --- だれがどう答えたか（結果）------------------------------------------- */
.who-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
}
.who-list__k {
  font-weight: 700;
  white-space: nowrap;
  /* ★ 記号（○△×）が先頭に付くので、色が見えなくても何の行か分かる */
}
.who-list__k--o { color: var(--c-ok); }
.who-list__k--t { color: var(--c-maybe); }
.who-list__k--x { color: var(--c-ng); }
.who-list__k--u { color: var(--c-unknown); }
.who-list__v { margin: 0; overflow-wrap: anywhere; }

.rank__who { margin-top: var(--sp-2); }
.rank__who summary {
  min-height: 2.6rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-accent);
}
.cal__detail-head { font-weight: 700; margin-bottom: var(--sp-1); }

/* --- 書きかけのお知らせ ---------------------------------------------------- */
.draft-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-caption);
}
.draft-notice span { flex: 1; min-width: 12em; }
/* 候補の日が変わっていた場合。★色だけでなく枠線でも変える。 */
.draft-notice--stale {
  border-left-color: var(--c-maybe);
  border: var(--border) dashed var(--c-maybe);
  border-left-width: 4px;
  border-left-style: solid;
}
/* まだ送っていないことを示す。★「保存しました」と見た目で紛れないようにする。 */
.save-state--draft { color: var(--c-maybe); font-weight: 700; }
.save-state--draft::before { content: '✎ '; }

/* 送っていない変更があるとき。★ここが「次に押す場所」だと一目で分かること。 */
.savebar--unsent {
  border-top: 4px solid var(--c-accent);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.10);
}
.savebar--unsent .btn--send {
  /* 押し忘れを減らすため、変更があるときだけ大きくする */
  min-height: calc(var(--tap-min) + 8px);
  font-size: var(--fs-head);
}

/* ==========================================================================
   見本 (design/mockup/ui-a.png) に寄せた作り直し。2026-08-31
   ★ 下にあるので、上の同名の規則より後に効く。上を消していないのは、
     並び (grid の組み方や幅) はそのまま使えるため。ここで替えるのは
     「色・丸み・影」だけに絞る。
   ========================================================================== */

/* --- 切り替えタブ。1本のバーの中で滑らせる形にする --- */
.tabs {
  gap: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--c-accent-soft);
  box-shadow: none;
}
.tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #06526b;
  font-weight: 700;
}
.tab--on {
  background: var(--c-surface);
  color: var(--c-accent);
  box-shadow: var(--shadow-1);
}

/* --- ○△× のボタン。丸くして、選ぶと塗りつぶす --- */
.pick {
  border-radius: 999px;
  border: 2px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  font-weight: 800;
}
.pick[aria-pressed='true'] { border-color: transparent; box-shadow: var(--shadow-2); }
.pick--o[aria-pressed='true'] { background: var(--c-ok); color: #fff; }
.pick--t[aria-pressed='true'] { background: var(--c-maybe); color: #fff; }
.pick--x[aria-pressed='true'] { background: var(--c-ng); color: #fff; }

/* --- 1日の行。枠ではなく細い線で区切る --- */
.day {
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
}
.days {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
.day:last-child { border-bottom: 0; }

/* --- 順位。丸い番号と、棒の中に割合を書く --- */
.ranks { gap: var(--sp-3); }
.rank {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
.rank__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--grad-accent);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 800;
}
.bar { border-radius: 999px; overflow: hidden; box-shadow: none; }
.bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
}

/* --- 一覧のカード --- */
.card--link {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.card--link:active { transform: scale(0.985); box-shadow: var(--shadow-press); }
.card__title { color: var(--c-accent); font-weight: 800; }

/* 進み具合の細い棒。カードに「あと何人か」を出す。 */
.progress {
  height: 8px;
  margin-top: var(--sp-2);
  border-radius: 999px;
  background: var(--c-accent-soft);
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--grad-accent); border-radius: 999px; }

/* --- 一括入力の丸ボタン --- */
.chip, .bulk__btn {
  border-radius: 999px;
  border: 2px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
.chip--on { border-color: transparent; background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-2); }

/* --- 送信バー --- */
.savebar {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 16px rgba(15, 36, 48, 0.10);
}

/* 一覧の「消す」。
   ★ 小さくして誤爆を防ごうとしたが、それは間違いだった。
     手の震えがある人には 36px は当たらない (AGENTS.md ルール17 / --tap-min)。
     押し間違いは「小さくする」ではなく「確認する・取り消せる」で防ぐ
     (docs/PRINCIPLES.md 原則3)。実際、消しても行は残る。
   ★ 代わりに、開く場所と重ならないよう行を分け、色で役割を分ける。 */
.card--link { position: relative; padding-bottom: calc(var(--tap-min) + var(--sp-3)); }
.card__del {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: 999px;
  background: #fadddd;
  color: #8d1c1c;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.card__del:active { transform: scale(0.94); }

/* 送信バーの2つのボタン。★ 取り消しは左、送るは右。
   押し間違いを「小さくする」ではなく「取り消せる」で防ぐため、
   取り消しも同じ大きさで置く (docs/PRINCIPLES.md 原則3)。 */
.savebar__row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
  /* ★ 折り返しを既定にする。メディアクエリで幅を見張る形にしていたが、
     狭い画面で効かず、ボタンが横に溢れたまま切れていた。
     「入らなければ勝手に下へ落ちる」ほうが、幅を当てにするより確実。 */
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.savebar__row .btn {
  min-height: var(--tap-min);
  margin-top: 0;
  /* ★ 押せる場所の文字を折り返させない。
     折り返すと丸みが効いて、円の中に縦書きが入ったような形になる。 */
  white-space: nowrap;
  /* ★ min-width の既定 (auto) だと中身より縮まないので、溢れる。
     0 にして、縮む余地を作る。 */
  min-width: 0;
}
/* 取り消しは控えめ。送るを主役にする。 */
.savebar__row #undo-btn { flex: 1 1 8rem; padding: 0 var(--sp-3); }
.savebar__row .btn--send { flex: 2 1 11rem; }


/* ==========================================================================
   結果の作り直し（2026-08-31）

   ★ 「日にちと得票数で 数字しか書いてない」「フォントの大きさが同じだから
     数字の羅列を見させられてるだけ」という指摘への答え。
     見本は design/mockup/result-a.png。

   考え方は3つ。
     1. いちばん知りたいのは「どの日か」。日にちを飛び抜けて大きくする
     2. 棒の中に人数を書く。書かないと何の棒か分からない
     3. 名前は「、」でつながず、1人ずつ札にする
   ========================================================================== */

.ranks { display: flex; flex-direction: column; gap: var(--sp-4); list-style: none; padding: 0; }

.rank {
  padding: var(--sp-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
/* 1位だけ少し持ち上げる。並びの中で最初に目が行くように。 */
.rank--top { box-shadow: var(--shadow-2), 0 0 0 2px var(--c-accent) inset; }

.rank__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.rank__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: var(--grad-accent);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 800;
  min-width: 0;
}
.rank--top .rank__no { width: 3.6rem; height: 3.6rem; font-size: var(--fs-body); }

/* ★ ここが一番大きい。他と同じ大きさにしない。 */
.rank__date {
  flex: 1 1 auto;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rank--top .rank__date { font-size: 2.05rem; }
.rank__dow { font-size: 0.55em; font-weight: 700; color: var(--c-ink-weak); margin-left: 2px; }
.rank__dow--sun { color: var(--c-sun); }
.rank__dow--sat { color: var(--c-sat); }

/* 判定の札。★ 色だけでなく言葉で書く。 */
.rank__verdict {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 800;
  white-space: nowrap;
}
.rank__verdict--A { background: var(--c-ok-soft); color: var(--c-ok-deep); }
.rank__verdict--B { background: var(--c-ok-soft); color: var(--c-ok-deep); }
.rank__verdict--C { background: var(--c-unknown-soft); color: var(--c-unknown-deep); }
.rank__verdict--D { background: var(--c-maybe-soft); color: var(--c-maybe-deep); }
.rank__verdict--E { background: var(--c-ng-soft); color: var(--c-ng-deep); }

/* --- 棒 ------------------------------------------------------------------ */
.bar {
  display: flex;
  height: 2rem;
  margin: 0 0 var(--sp-3);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-unknown-soft);
}
.bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--fs-caption);
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.bar__seg--o { background: var(--c-ok); }
.bar__seg--t { background: var(--c-maybe); }
.bar__seg--x { background: var(--c-ng); }
/* ★ 未回答だけ地が明るいので、字を濃くする（白だと 2:1 で読めない）。 */
.bar__seg--u { background: var(--c-unknown); color: var(--c-unknown-deep); }

/* カレンダーのマスに入れる小さい版。文字は入れない。 */
.bar--mini { height: 8px; margin: auto 0 0; border-radius: 2px; }

/* --- だれが どう答えたか --------------------------------------------------- */
.marks { display: flex; flex-direction: column; gap: var(--sp-2); }
.marks__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.marks__key {
  flex: 0 0 auto;
  min-width: 3.4rem;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-caption);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.marks__key--o { background: var(--c-ok-soft); color: var(--c-ok-deep); }
.marks__key--t { background: var(--c-maybe-soft); color: var(--c-maybe-deep); }
.marks__key--x { background: var(--c-ng-soft); color: var(--c-ng-deep); }
.marks__key--u { background: var(--c-unknown-soft); color: var(--c-unknown-deep); }

/* ★ 名前は札にして折り返す。区切り文字を使わない。 */
.marks__names { display: flex; flex-wrap: wrap; gap: 6px; }
.name-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.5;
}
.name-chip--o { background: var(--c-ok-soft); color: var(--c-ok-deep); }
.name-chip--t { background: var(--c-maybe-soft); color: var(--c-maybe-deep); }
.name-chip--x { background: var(--c-ng-soft); color: var(--c-ng-deep); }
.name-chip--u { background: var(--c-unknown-soft); color: var(--c-unknown-deep); }
.name-chip__note { font-weight: 400; opacity: 0.85; }

.rank__blocked {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-ng-soft);
  color: var(--c-ng-deep);
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* ==========================================================================
   答え方の選択と、カレンダーで答える（2026-08-31）

   ★ 30日の候補に1日ずつ ○△× を付けるのは、それだけで人が離れる。
     たいていの人は「行ける日はこことここ」か「この日だけ無理」の
     どちらかしか言うことがない。先に方式を決めれば、
     押す回数が 30回 から 3〜4回 に減る。

   ★ 1マスに ○△× の3つを置けないから一覧にしていたが、
     方式を先に決めれば1マスに要る印は1つになり、その制約が消える。
   ========================================================================== */

.modepick { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.modebtn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 4.5rem;
  padding: var(--sp-2);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform 60ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.modebtn:active { transform: scale(0.96); }
.modebtn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.modebtn__sym { font-size: 1.5rem; line-height: 1; font-weight: 800; }
.modebtn__label { font-size: var(--fs-caption); }
/* ★ 選んだ状態を色だけで示さない。太い枠と ✓ も付ける。 */
.modebtn--on { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }
.modebtn--on .modebtn__label::after { content: ' ✓'; }
.modebtn--ok.modebtn--on { border-color: var(--c-ok); color: var(--c-ok-deep); background: var(--c-ok-soft); }
.modebtn--ng.modebtn--on { border-color: var(--c-ng); color: var(--c-ng-deep); background: var(--c-ng-soft); }

.modepick__note {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  color: #06526b;
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* --- 答えるカレンダーのマス ------------------------------------------------
   ★ 結果のカレンダーより大きくする。ここは「押す」ための面だから。
     手が震える人でも当たる大きさを優先する。 */
.acell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.4rem;
  padding: 2px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font: inherit;
  cursor: pointer;
  transition: transform 60ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.acell:active:not(.acell--off) { transform: scale(0.9); }
.acell:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.acell__day { font-size: var(--fs-caption); font-weight: 700; line-height: 1; }
.acell__mark { font-size: 1.25rem; font-weight: 800; line-height: 1; min-height: 1.25rem; }

/* 曜日の色。結果のカレンダーと同じ決まりに揃える。 */
.acell--wd .acell__day { color: var(--c-ink-weak); }
.acell--sun { background: var(--c-sun-bg); }
.acell--sun .acell__day { color: var(--c-sun); }
.acell--sat { background: var(--c-sat-bg); }
.acell--sat .acell__day { color: var(--c-sat); }

/* 印が付いた日。★ 塗りつぶして、遠目でも「選んだ」が分かるようにする。 */
.acell--has { border-color: transparent; box-shadow: var(--shadow-1); }
.acell--o { background: var(--c-ok); }
.acell--t { background: var(--c-maybe); }
.acell--x { background: var(--c-ng); }
.acell--has .acell__day,
.acell--has .acell__mark { color: #fff; }

/* 候補になっていない日。押せないことが見て分かること。 */
.acell--off {
  border-color: transparent;
  background: transparent;
  color: var(--c-line);
  font-size: var(--fs-caption);
  cursor: default;
  box-shadow: none;
}

.acell__sum {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  font-weight: 700;
}

/* 予定ごとの相談部屋へ行くボタン。
   ★ 予定のすぐそばに置く。話は予定と一緒にあるべきなので。 */
.talkbtn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap-min);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 60ms ease-out;
  touch-action: manipulation;
}
.talkbtn:active:not(:disabled) { transform: scale(0.985); }
.talkbtn:disabled { opacity: 0.6; }
.talkbtn__mark { font-size: 1.6rem; line-height: 1; }
.talkbtn__body { flex: 1; min-width: 0; }
.talkbtn__title { display: block; font-weight: 800; color: var(--c-accent); }
.talkbtn__sub { display: block; font-size: var(--fs-caption); color: var(--c-ink-weak); }
.talkbtn__badge {
  flex: 0 0 auto;
  min-width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; border-radius: 999px;
  background: var(--c-urgent); color: #fff;
  font-size: var(--fs-caption); font-weight: 800;
}