/* ======================================================================
   スケジュール調整 (2026-09-14)
     答える画面は 1候補1行。 スマホで横スクロールさせない。
     横に並べるのは 集計の表だけ (そこは中で横スクロール)。
   ====================================================================== */
.poll-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.poll-back {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  color: #5f6368; background: #f1f3f4; font-size: 18px;
}
.poll-back:hover { background: #e3e6e8; color: #202124; }
.poll-head-t { min-width: 0; }
.poll-head-t h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.poll-head-t p  { margin: 2px 0 0; font-size: 0.8rem; }
.poll-note { font-size: 0.9rem; line-height: 1.7; }
.poll-h3 { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; }

.poll-decided {
  display: flex; align-items: center; gap: 10px;
  background: #e8f3ea; border-left: 4px solid #2e7d4f;
}
.poll-decided-l {
  flex: none; background: #2e7d4f; color: #fff; border-radius: 4px;
  padding: 2px 8px; font-size: 0.78rem; font-weight: 600;
}
.poll-decided strong { font-size: 1.05rem; }
.poll-released { background: #fdf4e3; border-left: 4px solid #c98a1b; font-size: 0.88rem; }

/* --- 答える --- */
.poll-row { padding: 12px 0; border-bottom: 1px solid #eceff1; }
.poll-row:last-of-type { border-bottom: 0; }
.poll-row-t { font-weight: 600; font-size: 0.98rem; }
.poll-warn {
  margin: 4px 0 0; font-size: 0.8rem; color: #a8631a;
  background: #fdf4e3; border-radius: 4px; padding: 4px 8px; display: inline-block;
}
.poll-marks { display: flex; gap: 8px; margin-top: 8px; }
.poll-mark {
  flex: 1; cursor: pointer; text-align: center;
  border: 1.5px solid #d9dde1; border-radius: 8px; padding: 10px 0;
  font-size: 1.25rem; line-height: 1; color: #9aa0a6;
  background: #fff; transition: background-color .12s, border-color .12s, color .12s;
}
.poll-mark input { position: absolute; opacity: 0; pointer-events: none; }
.poll-mark:hover { background: #f6f8f9; }
.poll-mark-ok.is-on    { border-color: #2e7d4f; background: #e8f3ea; color: #2e7d4f; }
.poll-mark-maybe.is-on { border-color: #c98a1b; background: #fdf4e3; color: #a8631a; }
.poll-mark-ng.is-on    { border-color: #b3261e; background: #fbeae9; color: #b3261e; }
.poll-cmt { display: block; margin: 14px 0 12px; font-size: 0.85rem; }
.poll-cmt input { width: 100%; margin-top: 4px; }

/* --- 集計 --- */
.poll-sum { list-style: none; margin: 0 0 14px; padding: 0; }
.poll-sum-r {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 6px; border: 1px solid #eceff1; margin-bottom: 6px;
}
.poll-sum-r.is-best { border-color: #9cc3a9; background: #f2f9f4; }
.poll-sum-r.is-dec  { border-color: #2e7d4f; background: #e8f3ea; }
.poll-sum-t { font-weight: 600; font-size: 0.92rem; }
.poll-sum-n { margin-left: auto; font-size: 0.88rem; white-space: nowrap; }
.poll-sum-n b { font-weight: 600; margin-left: 6px; }
.poll-sum-n .ok    { color: #2e7d4f; }
.poll-sum-n .maybe { color: #a8631a; }
.poll-sum-n .ng    { color: #b3261e; }
.poll-badge {
  flex: none; background: #9cc3a9; color: #1e4a2f; border-radius: 999px;
  padding: 1px 8px; font-size: 0.72rem; font-weight: 600;
}
.poll-badge.is-dec { background: #2e7d4f; color: #fff; }

.poll-grid-wrap { overflow-x: auto; }
.poll-grid { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.poll-grid th, .poll-grid td {
  border: 1px solid #eceff1; padding: 6px 10px; text-align: center; white-space: nowrap;
}
.poll-grid thead th { background: #f6f8f9; font-weight: 600; font-size: 0.8rem; }
.poll-grid tbody th { text-align: left; font-weight: 500; position: sticky; left: 0; background: #fff; }
.poll-grid tr.is-none tbody th, .poll-grid tr.is-none th { color: #9aa0a6; }
.poll-grid td.m-ok    { color: #2e7d4f; font-weight: 600; }
.poll-grid td.m-maybe { color: #a8631a; font-weight: 600; }
.poll-grid td.m-ng    { color: #b3261e; }
.poll-grid td.m-none  { color: #c6cbd0; }
.poll-cmt-r td {
  text-align: left; white-space: normal; background: #fafbfc;
  font-size: 0.8rem; color: #5f6368;
}
.poll-cmt-w { font-weight: 600; margin-right: 6px; color: #202124; }

.poll-ops { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poll-chk { display: flex; align-items: center; gap: 6px; }

/* --- チャットに出るカード --- */
.chat-pollcard {
  border: 1px solid #d9dde1; border-radius: 8px; padding: 10px 12px;
  background: #f7f9fb; max-width: 340px;
}
.chat-pollcard-t { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.chat-pollcard-t svg { width: 16px; height: 16px; flex: none; color: #1e5b96; }
.chat-pollcard-s { margin: 4px 0 8px; font-size: 0.8rem; color: #5f6368; }
.chat-pollcard-d { color: #2e7d4f; font-weight: 600; }

/* ----------------------------------------------------------------------
   作るときのモーダル (チャットの .chat-mm-box の中)

   ここは **すべて .pollnew-* で完結させる**。 style.css の .form を
   借りると、 .form label (0,0,1,1) がこちらの .pollnew-p (0,0,1,0) に勝ち、
   チェックボックスが縦に並んだり 入力欄が箱の端まで伸びたりする。
   かといって .form を直すと 他のモーダルが全部崩れるので、 借りない。

   .chat-mm-box は flex 縦並び + overflow:hidden + max-height:88dvh。
   その子は **自分で伸び方を決めないと はみ出して切れる**
   (下の「この内容で聞く」が箱の外に出ていた)。
   ---------------------------------------------------------------------- */
.pollnew-form {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* 中身。 ここだけがスクロールする */
.pollnew {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px 16px;
}

/* 見出し + 入力 の縦組み (.form label と同じ見た目を 自前で) */
.pollnew-f { display: flex; flex-direction: column; gap: 4px; }
/* ラベルを入力欄の**左**に置く形 (縦に積まないぶん 背が低い) */
.pollnew-inline { display: flex; align-items: center; gap: 8px; }
.pollnew-inline > span { flex: none; font-size: 12px; color: var(--c-muted, #5f6368); }
.pollnew-inline > input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  border: 1px solid #d9dde1; border-radius: 8px; padding: 8px 11px;
  font: inherit; font-size: 14px; background: #fff; color: inherit;
}
.pollnew-inline > input:focus {
  outline: 2px solid var(--c-blue, #1a73e8); outline-offset: -1px; border-color: transparent;
}
.pollnew-f > span { font-size: 12px; color: var(--c-muted, #5f6368); }
.pollnew-f > input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d9dde1; border-radius: 8px; padding: 9px 11px;
  font: inherit; font-size: 14px; background: #fff; color: inherit;
}
.pollnew-f > input:focus { outline: 2px solid var(--c-blue, #1a73e8); outline-offset: -1px; border-color: transparent; }

.pollnew-sec { display: flex; flex-direction: column; gap: 6px; }
/* カレンダーの段は **余っている高さを全部もらう**。
   こうすると 画面の高さいっぱいまで マスが縦に伸び、 下に余白が残らない。
   min-height:0 が無いと flex の子は縮まず、 はみ出して縦スクロールになる */
.pollnew-sec.is-cal { flex: 1 1 auto; min-height: 0; }
.pollnew-sec.is-cal .pcal-strip { flex: 1 1 auto; min-height: 0; }
.pollnew-sec-t { font-size: 12px; font-weight: 600; color: var(--c-muted, #5f6368); }

/* 候補の1行: 日付 / 開始 / 〜 / 終了 / ✕ */
.pollnew-r { display: flex; align-items: center; gap: 5px; }
.pollnew-r input {
  min-width: 0; box-sizing: border-box;
  border: 1px solid #d9dde1; border-radius: 7px; padding: 7px 8px;
  font: inherit; font-size: 13px; background: #fff;
}
.pollnew-r input[type=date] { flex: 1 1 8.5em; }
.pollnew-r input[type=time] { flex: 0 1 5.8em; }
.pollnew-w { flex: none; color: var(--c-muted, #777); font-size: 12px; }
.pollnew-x {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: #9aa0a6; cursor: pointer; font-size: 17px; line-height: 1;
}
.pollnew-x:hover { background: #eceff1; color: #b3261e; }

/* 小さなボタン (btn を借りない — .btn は他所の余白設計に乗っているため) */
.pollnew-btn {
  border: 1px solid #d9dde1; border-radius: 999px; background: #fff;
  padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: inherit;
  white-space: nowrap;
}
.pollnew-btn:hover { background: #f1f3f4; }
.pollnew-add { display: flex; }
/* 日モーダルの「＋ 時間帯を足す」は 左右の真ん中に置く */
.pday-body .pollnew-add { justify-content: center; }
.pollnew-range {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding-top: 4px; border-top: 1px dashed #e6e9ec;
}
.pollnew-range-l { font-size: 12px; color: var(--c-muted, #5f6368); white-space: nowrap; }
.pollnew-range input[type=date] {
  flex: 1 1 8em; min-width: 0; box-sizing: border-box;
  border: 1px solid #d9dde1; border-radius: 7px; padding: 5px 8px;
  font: inherit; font-size: 12.5px; background: #fff;
}

/* 聞く相手 */
.pollnew-all {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pollnew-people {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  max-height: 150px; overflow-y: auto; overscroll-behavior: contain;
  padding: 9px 10px; border: 1px solid #eceff1; border-radius: 8px;
}
.pollnew-p { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.pollnew-all input, .pollnew-p input { flex: none; margin: 0; }

@media (max-width: 620px) {
  .pollnew { padding: 12px 14px 14px; }
  .pollnew-r input[type=time] { flex: 0 1 5em; }
}

/* ======================================================================
   日程を選ぶカレンダー (作る側 / 答える側 で共用)
     月を **横に並べて** 横スクロール。 月をまたいで複製しやすくするため。
   ====================================================================== */
/* カレンダーの見出し行: 左に用途 / 中央に見えている月 / 右に人数。
   月の名前を各月の中に置くと そのぶん背が高くなるので、 ここに1つだけ出す */
.pcal-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px; font-size: 12px; color: var(--c-muted, #5f6368);
}
.pcal-head-l { flex: 1 1 auto; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.pcal-head-m { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--c-ink, #202124); }
.pcal-head-r { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.pcal-who { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pcal-who svg { width: 15px; height: 15px; }

/* 月ごとに止めない (scroll-snap は使わない)。 途中で2か月またいで見えてよい。
   止める作りにすると 少し動かしただけで戻され、 ぬるっと動かせない */
/* 月によって 5行だったり 6行だったりする (2027年1月は6行)。
   align-items:flex-start にすると 帯の高さは **いちばん行数の多い月**で決まり、
   5行の月の下に 1行ぶんの空きができる。
   stretch にして 月の表を帯いっぱいに伸ばすと、
   5行の月は 1行が高くなって埋まる → 余白が消えて 縦長にもなる */
.pcal-strip {
  display: flex; gap: 0; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.pcal-strip.is-grabbing { cursor: grabbing; user-select: none; }
.pcal-strip.is-grabbing * { cursor: grabbing; }

/* 1か月で モーダルの幅ぴったり。 横に並べて スクロールで次の月へ */
.pcal-m { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; }
.pcal { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed;
        flex: 1 1 auto; height: 100%; }
.pcal th {
  padding: 2px 0; font-size: 11.5px; font-weight: 600; color: #7a8290;
}
.pcal th.is-sun { color: #c5221f; }
.pcal th.is-sat { color: #1967d2; }
.pcal td { padding: 0; }

.pcal-d {
  width: 100%; height: 100%; min-height: 4.4em; padding: 3px 1px; cursor: pointer;
  border: 1px solid #e0e3e7; border-radius: 7px; background: #fff;
  font: inherit; font-size: 13.5px; line-height: 1; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
}
.pcal-d:hover:not(:disabled) { background: #eef3f8; border-color: #b9cde0; }
.pcal-c.is-sun .pcal-d { background: #fff7f7; }
.pcal-c.is-sat .pcal-d { background: #f6faff; }
.pcal-d:disabled { opacity: .3; cursor: default; }
.pcal-n { font-size: 13.5px; }
/* 日の下に出す印。 決めた時間帯を 「9-11:15」のように詰めて出す。
   3枠まで並ぶので 1行ずつ。 空のときも場所を取って 数字が動かないようにする */
.pcal-mk {
  flex: 1 1 auto; width: 100%; min-height: 11px;
  font-size: 9.5px; line-height: 1.25; font-weight: 600; color: #1e5b96;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.pcal-mk span { display: block; white-space: nowrap; }

/* 選んである日 */
.pcal-d.is-on {
  background: #e6f0fa; border-color: #1e5b96; color: #16497a; font-weight: 700;
}
.pcal-c.is-sun .pcal-d.is-on, .pcal-c.is-sat .pcal-d.is-on { background: #e6f0fa; }
/* 複製の行き先を選んでいるとき */
.pcal-d.is-dup { background: #fdf4e3; border-color: #c98a1b; color: #a8631a; }
/* 答える側: 候補になっている日 / 答え済み */
.pcal-d.is-cand { border-color: #1e5b96; border-width: 1.5px; }
.pcal-d.is-done .pcal-mk { color: #2e7d4f; }

.pcal-note { margin: 4px 0 0; font-size: 11.5px; color: var(--c-muted, #5f6368); }

/* --- 日をタップしたときの小さいモーダル --- */
.pday { position: fixed; inset: 0; z-index: 240; background: rgba(15,18,22,.45);
        display: flex; align-items: center; justify-content: center; padding: 16px; }
.pday[hidden] { display: none; }
.pday-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 360px;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 44px rgba(15,23,42,.28);
}
.pday-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 13px 10px 12px 16px; border-bottom: 1px solid #eceff1;
}
.pday-head h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
.pday-x {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #5f6368; font-size: 21px; line-height: 1;
}
.pday-x:hover { background: #f1f3f4; }
.pday-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 13px 16px; display: flex; flex-direction: column; gap: 11px;
}
.pday-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-top: 1px solid #eceff1;
}
.pday-foot .pollnew-btn { margin-right: auto; }

/* 時間帯の行 */
.pday-t { display: flex; align-items: center; gap: 3px; }
.pday-t select {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  border: 1px solid #d9dde1; border-radius: 7px; padding: 7px 2px 7px 5px;
  font: inherit; font-size: 13px; background: #fff; text-align: center;
}
.pday-u { flex: none; font-size: 11.5px; color: var(--c-muted, #5f6368); }
.pday-err { margin: 0; font-size: 12px; color: #b3261e; }

/* タイトルの控え (日モーダルで入れたものを 作成モーダルの上に出す) */
.pollnew-title {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 8px; background: #f3f6f9;
}
.pollnew-title-l { flex: none; font-size: 11.5px; color: var(--c-muted, #5f6368); }
.pollnew-title-v {
  min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pollnew-title-v.is-empty { font-weight: 400; color: #9aa0a6; }

/* 複製の操作。 **モーダルの足元に置き替える**。
   以前は 画面下に浮かせていたが、 募集ボタンと重なって 押し間違えていた */
.pdup-bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
}
.pdup-bar[hidden] { display: none; }
.pdup-bar > span {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--c-muted, #5f6368);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdup-bar .pollnew-btn { flex: none; }
.pdup-bar .pollnew-btn#pollDupDone {
  background: var(--c-blue, #1a73e8); border-color: var(--c-blue, #1a73e8);
  color: #fff; font-weight: 600; padding: 7px 14px;
}
.pdup-bar .pollnew-btn#pollDupDone:hover { background: #1557b0; border-color: #1557b0; }
.pdup-bar .pollnew-btn[disabled] {
  background: #e8eaed; border-color: #e8eaed; color: #9aa0a6; cursor: default;
}

/* 回答画面: 残りの案内 */
.poll-left { margin: 8px 0 10px; font-size: 12.5px; color: #2e7d4f; font-weight: 600; }
.poll-left.is-left { color: #a8631a; }
/* 日モーダルの中では 1行目に余白が要らない */
.pday-body .poll-row:first-child { padding-top: 0; }
.pday-body .poll-row:last-child  { border-bottom: 0; padding-bottom: 0; }
/* ○△× を button にしたので、 ラベルと同じ見た目に揃える */
button.poll-mark { font: inherit; font-size: 1.25rem; line-height: 1; }

/* ======================================================================
   PC で モーダルの中を縦スクロールさせない (2026-09-15)

   中身の高さは ほぼカレンダーで決まる (6行 × マスの高さ)。
   画面が低いと 上限 (88dvh) に収まらず 縦スクロールが出ていた。
   マスの高さは **画面の高さに合わせて縮める**。 これで
   ふつうの PC では スクロールが出ない。
   ※ スマホ幅 (620px 以下) は 全画面表示なので ここでは触らない。
   ====================================================================== */
@media (min-width: 621px) {
  /* この画面だけ 少し背を高く使う (共通の .chat-mm-box は触らない) */
  #chatPollMm .chat-mm-box { max-height: 92vh; max-height: 92dvh; }

  @media (max-height: 800px) {
    .pcal-d { min-height: 3.6em; }
    .pollnew { gap: 9px; padding: 11px 18px 12px; }
  }
  @media (max-height: 680px) {
    .pcal-d { min-height: 3.05em; }
    .pcal { border-spacing: 2px; }
    .pollnew { gap: 7px; padding: 9px 18px 10px; }
  }
  @media (max-height: 580px) {
    .pcal-d { min-height: 2.6em; font-size: 12.5px; }
    .pcal-mk { font-size: 9px; }
  }
}

/* タイトルが空の間は カレンダーを触れない見た目にする (2026-09-15)。
   押せないのではなく「まだ早い」と伝えたいので、 薄くするだけで
   クリック自体は受ける (押したら タイトル欄に案内する) */
.pcal-strip.is-locked { opacity: .45; }
.pcal-strip.is-locked .pcal-d { cursor: not-allowed; }