/* 画面共通の表示規約（FR-038〜FR-043）。Bulma の上から最小限を上書きする。
 *
 * 配色はOSのライト／ダーク設定に追随する。Bulma 1.x は prefers-color-scheme で
 * 自前の変数を切り替えるので、Bulma製の部品（.input、.table など）はそのまま任せる。
 * ここで定義するのは独自クラスの色だけ。
 *
 * 独自クラスの色は必ず下のパレット変数を経由すること。規則の中に色の実値を直接書くと、
 * 片方のテーマだけ更新され、白地に薄い文字といった読めない組み合わせが生まれる。
 * この決まりは experiment/tests/test_theme.py が機械的に検査している。
 *
 * ただし意見分布バーの色は実験刺激そのものなので、両テーマで同一に保つ（下部を参照）。
 */

:root {
  /* 余白の段階。画面ごとに任意の値を足さず、必ずこの中から選ぶ。
   * 値がばらつくと、同じ意味の区切りが画面によって違う幅になり、視線の基準が定まらない。 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --exp-page-bg: #ffffff;
  --exp-page-fg: #363636;
  --exp-box-bg: #f5f5f5;
  --exp-box-fg: #363636;
  --exp-muted-fg: #5b5b5b;
  --exp-emphasis-fg: #d02b2b;
  --exp-line: #b5b5b5;
  --exp-hairline: #dcdcdc;
  --exp-surface-bg: #ffffff;
  --exp-surface-fg: #363636;
  --exp-button-bg: #dbdbdb;
  --exp-button-border: #b5b5b5;
  --exp-button-fg: #363636;
  --exp-selected-border: #3273dc;
  --exp-selected-bg: #eef4fd;
  --exp-selected-fg: #1f3f7a;

  /* 前へ進む主動作のボタン。並び立つ副次動作（同意しない等）と重みを変えるために使う。 */
  --exp-accent-bg: #2c66c4;
  --exp-accent-fg: #ffffff;

  /* 入力の誤りを知らせる帯。FR-039 の赤字強調（.emphasis）と見た目を分ける。
   * 同じ赤で書くと「読むべき注意」と「直すべき誤り」が区別できない。 */
  --exp-error-bg: #fdecec;
  --exp-error-fg: #a11b1b;
  --exp-error-border: #d02b2b;

  /* 意見分布バー：実験刺激のためテーマで変えない */
  --exp-bar-a: #f2994a;
  --exp-bar-b: #4a7ff2;
  --exp-bar-fg: #ffffff;
  --exp-bar-outline: rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --exp-page-bg: #14161a;
    --exp-page-fg: #e6e7ea;
    --exp-box-bg: #23262d;
    --exp-box-fg: #e6e7ea;
    --exp-muted-fg: #a8adb6;
    /* 赤字強調（FR-039）は暗い背景で沈むため、明度を上げた赤に置き換える */
    --exp-emphasis-fg: #ff8f85;
    --exp-line: #565c66;
    --exp-hairline: #3a3f47;
    --exp-surface-bg: #1b1e24;
    --exp-surface-fg: #e6e7ea;
    --exp-button-bg: #3a3f47;
    --exp-button-border: #565c66;
    --exp-button-fg: #e6e7ea;
    --exp-selected-border: #7aa7ff;
    --exp-selected-bg: #26344a;
    --exp-selected-fg: #d6e4ff;

    /* 暗い地では明るい面に濃い文字を置くほうが、主動作として前に出る */
    --exp-accent-bg: #7aa7ff;
    --exp-accent-fg: #10233f;

    --exp-error-bg: #3a2426;
    --exp-error-fg: #ffb3ab;
    --exp-error-border: #ff8f85;

    /* バーの色は変えず、暗い背景から浮くよう輪郭だけ調整する */
    --exp-bar-outline: rgba(255, 255, 255, 0.22);
  }
}

html,
body {
  background: var(--exp-page-bg);
  color: var(--exp-page-fg);
}

/* hidden 属性は UA スタイルの display:none で効くだけなので、Bulma が .button などに
 * 与える display に負ける。JSで隠した要素が残って見えるため、ここで優先させる。 */
[hidden] {
  display: none !important;
}

/* 全画面1カラム（FR-038） */
.experiment-container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}

/* 画面左上の進捗ラベル（FR-038）。
 * 本文と同じ大きさ・濃さだと読み物の一部に見えるので、現在地の表示として一段下げる。 */
.progress-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--exp-muted-fg);
  margin-bottom: var(--sp-4);
}

/* ページ見出し。Bulma の .title に任せると余白がこの画面の段階と揃わないので自前で持つ。 */
.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--exp-page-fg);
  margin-bottom: var(--sp-5);
}

/* 見出し直下の導入文。Bulma は素の p に余白を与えないため、ここで与える。 */
.lead {
  margin-bottom: var(--sp-4);
}

/* 導入文のあとに設問が続く画面では、導入文が最初の設問の一部に見えないよう距離を取る。 */
.lead + form > .survey-item:first-of-type {
  margin-top: var(--sp-5);
}

/* コンテンツ本文はグレーの背景ボックス（FR-040）。
 *
 * 段落は空行ではなく <p> で分ける。空行に頼ると、行送りと段落の空きが同じ高さになり、
 * 折り返しの改行と段落の切れ目が見分けられなくなる。
 * DBから来る自由文など、文字列中の改行をそのまま見せたい箇所には .preserve-lines を添える。
 */
.content-box {
  background: var(--exp-box-bg);
  color: var(--exp-box-fg);
  border-radius: 6px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  line-height: 1.7;
}

.content-box > p {
  margin-bottom: var(--sp-6);
}

.content-box > :last-child {
  margin-bottom: 0;
}

.preserve-lines {
  white-space: pre-wrap;
}

/* 選択肢への問いかけ。選択肢の直前に置くので、下は詰めて上は離す。 */
.choice-prompt {
  margin: var(--sp-6) 0 var(--sp-3);
  font-weight: 700;
  color: var(--exp-page-fg);
}

/* Likert画面で再提示する「自分が選んだ回答」。
 * 設問文（.content-box）と同じグレーの箱にすると新しい設問に見えるので、
 * シナリオ画面で選択中の項目に使うのと同じ色を借りて、既に決めた自分の答えだと分かるようにする。 */
.chosen-answer {
  background: var(--exp-selected-bg);
  color: var(--exp-selected-fg);
  border-left: 4px solid var(--exp-selected-border);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* 操作の補足。本文ではないので一段弱く見せる。 */
.hint {
  margin-top: var(--sp-3);
  font-size: 0.85rem;
  color: var(--exp-muted-fg);
}

/* 手順の列挙（実験の説明）。箱の中の段落と同じ間隔にはせず、項目として詰める。 */
.step-list {
  margin: 0 0 var(--sp-6);
  padding-left: 1.5em;
  list-style: decimal;
}

.step-list li {
  margin-bottom: var(--sp-2);
}

.step-list li:last-child {
  margin-bottom: 0;
}

/* 重要箇所の赤字強調（FR-039） */
.emphasis {
  color: var(--exp-emphasis-fg);
  font-weight: 700;
}

/* 入力の誤り。強調（.emphasis）と紛れないよう、面と罫で「直す場所」だと示す。 */
.form-error {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--exp-error-border);
  border-radius: 0 4px 4px 0;
  background: var(--exp-error-bg);
  color: var(--exp-error-fg);
  font-weight: 700;
  line-height: 1.6;
  white-space: normal;
}

/* フォーム全体に関わる誤り。送信ボタンの近くではなく先頭に出るので、幅を持たせて目に留める。 */
.form-error.is-summary {
  margin: 0 0 var(--sp-5);
}

.form-error-link {
  margin-left: var(--sp-3);
  color: var(--exp-error-fg);
  text-decoration: underline;
}

/* 進行ボタンは画面下部中央（FR-040） */
.action-area {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.action-area .button {
  background: var(--exp-button-bg);
  border: 1px solid var(--exp-button-border);
  border-radius: 4px;
  color: var(--exp-button-fg);
  min-width: 12rem;
}

/* 前へ進む動作。同じ画面に並ぶ副次動作より前に出す。 */
.action-area .button.is-forward {
  background: var(--exp-accent-bg);
  border-color: var(--exp-accent-bg);
  color: var(--exp-accent-fg);
}

.action-area .button:hover:not(:disabled) {
  border-color: var(--exp-selected-border);
}

/* 未回答で進めないときは、主動作の色を落とす。
 * 色を残したまま薄くすると、押せる状態との差が透明度だけになって伝わらない。 */
.action-area .button:disabled {
  background: var(--exp-button-bg);
  border-color: var(--exp-button-border);
  color: var(--exp-button-fg);
  opacity: 0.5;
  cursor: not-allowed;
}

/* 選択肢ボタン。選択状態が視覚的に分かるようにする（FR-032） */
.choice-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
}

.choice-buttons > div {
  flex: 1 1 0;
}

.choice-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-buttons label {
  display: block;
  padding: var(--sp-4);
  border: 2px solid var(--exp-button-border);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  background: var(--exp-surface-bg);
  color: var(--exp-surface-fg);
}

.choice-buttons input[type="radio"]:checked + label {
  border-color: var(--exp-selected-border);
  background: var(--exp-selected-bg);
  color: var(--exp-selected-fg);
  font-weight: 700;
}

.choice-buttons input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--exp-selected-border);
  outline-offset: 2px;
}

/* Likert：1〜7を線でつないだ横一列（FR-031）
 *
 * 質問1問ぶん（質問文・尺度・アンカー）を .likert-item でひとまとまりにする。
 * 問と問の間に余白を置かないと、前の問のアンカーに次の問の箱が接してしまう。
 */
.likert-item {
  margin-bottom: var(--sp-6);
}

/* 質問文の箱。1行の設問に対して本文用の padding は大きすぎるので詰める */
.likert-item .content-box {
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: 0;
}

.likert-scale {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-2);
}

.likert-anchors {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--exp-muted-fg);
}

.likert-point {
  flex: 1 1 0;
  text-align: center;
  position: relative;
}

.likert-point::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--exp-line);
  z-index: 0;
}

.likert-point:first-child::before {
  display: none;
}

.likert-point input,
.likert-point span {
  position: relative;
  z-index: 1;
  display: block;
}

/* ブロック化した input は親の text-align: center の対象外になる。
 * margin: auto で中央に置かないと、目盛りの数字と接続線から左へずれる。 */
.likert-point input {
  margin: 0 auto;
}

.likert-point span,
.likert-point label {
  color: var(--exp-page-fg);
  cursor: pointer;
}

/* 生成AIの回答（FR-042）。箱の中に要素を組み立てるので、間隔を明示的に与える。 */
.answer-head {
  margin-bottom: var(--sp-2);
  font-size: 1.05rem;
}

.answer-body {
  margin-bottom: var(--sp-5);
}

/* 生成AIの回答と、集計されたユーザーの意見は出どころが違う。細い罫で区切る。 */
.distribution-block {
  border-top: 1px solid var(--exp-hairline);
  padding-top: var(--sp-5);
}

.distribution-head {
  margin-bottom: var(--sp-4);
}

.comments-toggle {
  margin-top: var(--sp-4);
}

/* 意見分布バー（FR-022）。色は実験刺激なのでテーマで変えない。 */
.distribution-bar {
  display: flex;
  height: 2rem;
  border-radius: 2px;
  overflow: hidden;
  margin: var(--sp-1) 0 0;
  box-shadow: 0 0 0 1px var(--exp-bar-outline);
}

.distribution-bar .side-a {
  background: var(--exp-bar-a);
  color: var(--exp-bar-fg);
}

.distribution-bar .side-b {
  background: var(--exp-bar-b);
  color: var(--exp-bar-fg);
}

.distribution-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.distribution-labels {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: var(--exp-box-fg);
}

/* ユーザコメント（FR-026、FR-027） */
.comment-list {
  margin-top: var(--sp-5);
}

.comment-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  line-height: 1.6;
  border-top: 1px solid var(--exp-hairline);
  color: var(--exp-box-fg);
}

/* 4件で終わりだと分かるよう、最後の行を罫で閉じる（FR-023） */
.comment-item:last-child {
  border-bottom: 1px solid var(--exp-hairline);
}

.comment-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.comment-stance {
  font-weight: 700;
  flex: 0 0 auto;
}

/* 事後アンケート（FR-034）。設問は1問1ブロックで縦に積む（FR-038 の1カラム構成）。 */
.survey-item {
  margin-bottom: var(--sp-6);
}

.field {
  margin-bottom: var(--sp-5);
}

.survey-item > .label,
.field > .label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--exp-page-fg);
}

/* 「その他」の内容など、直前の選択肢にぶら下がる入力。字下げで従属関係を示す。 */
.sub-field {
  margin-top: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--exp-hairline);
}

.sub-field .label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--exp-muted-fg);
}

/* ラジオ・チェックの並び。
 * Django の RadioSelect は <div id="…"> の中に選択肢ごとの <div> を出すので、
 * 行として整えるのも、横一列にするのも、その内側の <div> が対象になる。 */
.radio-group > div > div {
  padding: var(--sp-1) 0;
}

/* 選択肢どうしの間は設問どうしの間より狭くする。同じくらい空けると、
 * 選択肢の並びがどこで終わって次の設問が始まるのかが読み取れない。
 * 行を詰めるぶん、ラベルを行幅いっぱいに広げてクリックできる範囲を確保する。 */
.radio-group label {
  display: block;
  cursor: pointer;
  color: var(--exp-page-fg);
}

/* 短い入力に本文幅をあてると、長文を書く欄に見えてしまう */
.input.is-short {
  max-width: 24rem;
}

.input.is-tiny {
  max-width: 8rem;
}

/* 補足文はラベルと入力の間に入る。両方に接すると塊が読み取れない。 */
.field .help {
  margin: 0 0 var(--sp-2);
  color: var(--exp-muted-fg);
}

/* Q8 の順位付け。行として読ませるため、区切りとゆとりを与える。
 * 本文幅いっぱいに広げると相談相手と順位が離れ、対応を目で追う距離が長くなる。 */
.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 32rem;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--exp-hairline);
}

.rank-row:last-of-type {
  border-bottom: 1px solid var(--exp-hairline);
}

.rank-row select {
  min-width: 5rem;
}

/* 完了確認コード（FR-043）。
 * この画面で最も重要な情報なので、周りの説明文より強い枠を与える。 */
.completion-code {
  display: block;
  border: 2px solid var(--exp-accent-bg);
  border-radius: 6px;
  padding: var(--sp-5) var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-size: 2rem;
  font-weight: 700;
  color: var(--exp-page-fg);
  text-align: center;
  letter-spacing: 0.15em;
}

.completion-code-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--exp-muted-fg);
}