/* ==================================================
   Tokyouba Schedule Poll
   Answer Input Form (Desktop + Mobile Card)
   ================================================== */

/* =========================
   Wrapper
   ========================= */
.tuba-answer-wrap{
  margin:12px 0 16px;
}

/* =========================
   Table (Desktop / Tablet)
   ========================= */
.tuba-answer-table{
  border-collapse:collapse;
  min-width:520px;
  background:#fff;
}

.tuba-answer-table th,
.tuba-answer-table td{
  border:1px solid #ddd;
  padding:6px;
  text-align:center;
  /* background:#fff; */
  box-sizing:border-box;
}

/* header */
.tuba-answer-table thead th{
  background:#f7f7f7;
  font-weight:600;
}

/* candidate column */
.tuba-answer-cand{
  text-align:left;
  white-space:nowrap;
  font-size:13px;
}

/* radio + label */
.tuba-answer-radio{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-size:13px;
}

/* =========================
   Mobile: Card layout
   ========================= */
@media (max-width:640px){

  /* 横スクロール完全停止 */
  .tuba-answer-wrap{
    overflow-x:visible;
  }

  /* テーブル幅制限解除 */
  .tuba-answer-table{
    min-width:0 !important;
    width:100% !important;
  }

  /* テーブル構造をカード化 */
  .tuba-answer-table,
  .tuba-answer-table thead,
  .tuba-answer-table tbody,
  .tuba-answer-table tr,
  .tuba-answer-table th,
  .tuba-answer-table td{
    display:block;
    width:100%;
  }

  /* ヘッダーは不要 */
  .tuba-answer-table thead{
    display:none;
  }

  /* 1候補 = 1カード */
  .tuba-answer-row{
    border:1px solid #ddd;
    border-radius:8px;
    padding:10px;
    margin-bottom:12px;
    background:#fff;
    box-sizing:border-box;
  }

  /* 候補名 */
  .tuba-answer-cand{
    font-weight:600;
    font-size:14px;
    margin-bottom:8px;
    white-space:normal;
    word-break:break-word;
    background:#9fb3f3;
  }

  /* 回答ボタン3列 */
  .tuba-answer-cell{
    display:inline-block;
    width:33.333%;
    border:none;
    padding:0 4px;
    box-sizing:border-box;
  }

  /* ボタン化 */
  .tuba-answer-radio{
    width:100%;
    justify-content:center;
    border:1px solid #ccc;
    border-radius:6px;
    padding:8px 0;
    font-size:14px;
    background:#fafafa;
  }

  /* radioは残す（アクセシビリティ） */
  .tuba-answer-radio input{
    margin-right:6px;
  }

  /* 選択中 */
  .tuba-answer-radio input:checked + span{
    font-weight:700;
  }
}

/* ==================================================
   Answer buttons – colored (OK / Maybe / No)
   ================================================== */

/* 共通：ボタンとして見せる */
.tuba-answer-radio{
  transition: background-color .15s ease,
              border-color .15s ease,
              color .15s ease;
}

/* ===== OK (◯) ===== */
.tuba-answer-cell:nth-child(2) .tuba-answer-radio{
  border-color:#2e7d32;
  color:#2e7d32;
}
.tuba-answer-cell:nth-child(2) .tuba-answer-radio input:checked + span{
  background:#2e7d32;
  color:#000;
  padding:2px 6px;
  border-radius:4px;
}

/* ===== Maybe (△) ===== */
.tuba-answer-cell:nth-child(3) .tuba-answer-radio{
  border-color:#f9a825;
  color:#f9a825;
}
.tuba-answer-cell:nth-child(3) .tuba-answer-radio input:checked + span{
  background:#f9a825;
  color:#000;
  padding:2px 6px;
  border-radius:4px;
}

/* ===== No (×) ===== */
.tuba-answer-cell:nth-child(4) .tuba-answer-radio{
  border-color:#c62828;
  color:#c62828;
}
.tuba-answer-cell:nth-child(4) .tuba-answer-radio input:checked + span{
  background:#c62828;
  color:#000;
  padding:2px 6px;
  border-radius:4px;
}

/* ===== Hover（PC向け） ===== */
@media (hover:hover){
  .tuba-answer-radio:hover{
    background:#f5f5f5;
  }
}
/* ==================================================
   PC / Mobile color emphasis switch
   ================================================== */

/* =========================
   PC（hoverあり）：控えめ
   ========================= */
@media (hover:hover){

  /* 選択中でも背景は付けない（文字＋枠のみ） */
  .tuba-answer-radio input:checked + span{
    background:transparent !important;
    color:inherit;
    font-weight:700;
  }

  /* OK */
  .tuba-answer-cell:nth-child(2) .tuba-answer-radio{
    border-color:#2e7d32;
    color:#2e7d32;
  }

  /* Maybe */
  .tuba-answer-cell:nth-child(3) .tuba-answer-radio{
    border-color:#f9a825;
    color:#f9a825;
  }

  /* No */
  .tuba-answer-cell:nth-child(4) .tuba-answer-radio{
    border-color:#c62828;
    color:#c62828;
  }
}

/* =========================
   Mobile（hoverなし）：強調
   ========================= */
@media (hover:none){

  /* 選択中は背景を強く */
  .tuba-answer-radio input:checked + span{
    display:inline-block;
    width:100%;
    padding:4px 0;
    border-radius:4px;
    font-weight:700;
  }

  /* OK */
  .tuba-answer-cell:nth-child(2)
    .tuba-answer-radio input:checked + span{
    background:#2e7d32;
    color:#fff;
  }

  /* Maybe */
  .tuba-answer-cell:nth-child(3)
    .tuba-answer-radio input:checked + span{
    background:#f9a825;
    color:#000;
  }

  /* No */
  .tuba-answer-cell:nth-child(4)
    .tuba-answer-radio input:checked + span{
    background:#c62828;
    color:#fff;
  }
}