/* 最初の声（.voice*）。答えが来なかったカードには理由と「もう一度聞く」。4人とも同じ理由なら、理由は上（.voices-notice）に1回だけ。 */
.voices-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 0 var(--space-7);
}
.voices-page > .work-context {
  margin: 0 0 var(--space-2);
}
.voices-q .searchbox {
  width: 100%;
}
.voices-lead {
  margin: var(--space-5) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--type-note);
}
.voices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.voice {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.voice .initial,
.voice .portrait {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: cover;
  border-radius: var(--radius-3);
}
.voice-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.voice h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.voice-meta {
  font-size: var(--fs-note);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}
/* 選んだ分け方と英語名：英語名はいつも次の行の左端から。入るときだけ同じ行にすると、カードごとに並びが変わる（斉藤さん 2026-10-23「Extreme と同じように改行して」）。 */
.voice-group {
  margin: 0.125rem 0 0;
}
.voice-group .term-en {
  display: block;
  margin-left: 0;
}
/* Under the name of a person the product's words found: where they were found, and the words (two lines at most, cut with …). */
.voice-why {
  margin: var(--space-2) 0 0;
  font-size: var(--type-note);
  line-height: 1.6;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.voice-why .match-where {
  color: var(--text-muted);
}
.voice-line {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  margin: var(--space-4) 0;
  color: var(--text);
  flex: 1;
}
.voice-wait {
  margin: var(--space-4) 0 var(--space-4);
  color: var(--text-muted);
  flex: 1;
  animation: voice-pulse 1.6s ease-in-out infinite;
}
.voice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}
.voice-failed {
  animation: none;
  color: var(--text);
  word-break: auto-phrase;
}
.voices-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--surface);
}
.voices-notice p {
  margin: 0;
  word-break: auto-phrase;
}
.voices-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin-top: var(--space-6);
}
@media (max-width: 800px) {
  .voices-grid {
    grid-template-columns: 1fr;
  }
  .voice {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .voice .initial,
  .voice .portrait {
    width: 4.5rem;
    height: 4.5rem;
  }
  .voice {
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .voice-line {
    font-size: var(--fs-lead);
  }
  /* Beside a small portrait the column is narrow: the line may take three. */
  .voice-why {
    -webkit-line-clamp: 3;
  }
}
/* An answer still being written ends with a pulsing 「…」, so the words so far never read as the whole answer (本番の確認2
   2026-10-10: a first impression read as cut off at 「…そのまま自分の仕事に使」). */
.voice-line.writing::after {
  content: '…';
  margin-left: 0.125em;
  color: var(--text-muted);
  animation: voice-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .voice-wait,
  .voice-line.writing::after {
    animation: none;
  }
}
@keyframes voice-pulse {
  50% {
    opacity: 0.45;
  }
}
/* The people chosen for a stance (1 to 6): the stance and why, under the name. Later questions asked of everyone come as
   rows below the first answers, one cell per person, in the order chosen (job.js answersFor). */
.voices-grid.many {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.voices-grid.many .voice {
  grid-template-columns: minmax(0, 1fr);
  /* 顔の段は顔の高さだけ。カードが伸びた分は本文の段に回す（顔と名前の高さが人によってずれないように）。 */
  grid-template-rows: auto 1fr;
}
.voices-grid.many .voice .portrait,
.voices-grid.many .voice .initial {
  width: 5rem;
  height: 5rem;
}
.stance-line {
  margin: var(--space-2) 0 0;
  font-size: var(--type-note);
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}
.stance-name {
  display: inline-block;
  color: var(--fill-text);
  font-weight: 600;
}
.stance-reason {
  color: var(--text-muted);
}
.ask-row {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ask-q {
  font-size: var(--fs-lead);
  margin: 0 0 var(--space-4);
}
.ask-cells {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
}
.ask-cell {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--surface);
}
.ask-cell .portrait,
.ask-cell .initial {
  width: 3.5rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius-2, 6px);
}
.ask-cell h3 {
  margin: 0;
  font-size: var(--fs-lead);
}
.ask-cell .voice-line,
.ask-cell .voice-wait {
  font-size: var(--fs-lead);
  margin: var(--space-2) 0 var(--space-2);
}
@media (max-width: 1000px) {
  .voices-grid.many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .voices-grid.many {
    grid-template-columns: minmax(0, 1fr);
  }
  .voices-grid.many .voice {
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-rows: auto;
  }
}
/* 「こういう人はいかがでしょう？」（2026-10-06、docs/AHA-WORDS.md と画面案 design/aha-demo/mock-propose.html）。
   五つの段に3人ずつ1列、段ごとに背景（開いた状態が標準）、右に「聞きたい人」。スマホでは「聞きたい人」を画面の下に貼り付ける。 */
.pc-page {max-width: 76rem; margin: 0 auto; padding: 1rem 0 3rem;}
.pc-page .voices-q {margin-top: var(--space-3);}
.pc-wait {margin: var(--space-5) 0; color: var(--text-muted); animation: voice-pulse 1.6s ease-in-out infinite;}
.pc-lead {display: flex; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; flex-wrap: wrap; margin: 1.5rem 0 0.25rem;}
.pc-lead h1 {font-size: var(--fs-head);}
.pc-lead p {color: var(--text-muted); font-size: var(--type-note); word-break: auto-phrase;}
.pc-layout {display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; align-items: start;}
.pc-main {min-width: 0;}
.pc-frame {margin-top: var(--space-6); padding-top: 1rem; border-top: 1px solid var(--line);}
.pc-frame h2 {font-size: var(--fs-title); word-break: auto-phrase;}
.pc-learn {margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-note); color: var(--text);}
.pc-learn summary {display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; color: var(--fill-text); font-size: var(--type-note);}
.pc-learn[open] .pc-closed, .pc-learn:not([open]) .pc-open {display: none;}
.pc-learn p {margin: 0 0 var(--space-2); max-width: 46rem; line-height: 1.9; word-break: auto-phrase;}
.pc-learn .pc-learning {color: var(--text-muted);}
.pc-cards {display: grid; gap: 0.75rem; margin-top: 0.5rem;}
.pc-card {display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-3); background: var(--surface);}
.pc-card.on {border-color: var(--fill); background: var(--brand-1, var(--surface-quiet));}
.pc-card .portrait, .pc-card .initial {width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-3);}
.pc-body {min-width: 0;}
.pc-body h3 {font-size: var(--fs-lead); font-weight: 500; margin: 0;}
.pc-why-label {margin: var(--space-2) 0 0; font-size: var(--fs-tag); color: var(--text-muted);}
.pc-reason {margin: 0.125rem 0 0; font-size: var(--fs-body); line-height: 1.8; word-break: auto-phrase; overflow-wrap: anywhere;}
.pc-like {white-space: nowrap;}
.pc-more {margin-top: var(--space-2); min-height: 2.75rem; display: inline-flex; align-items: center;}
.pc-side {position: sticky; top: 1rem; border-left: 1px solid var(--line); padding-left: 1.5rem;}
.pc-side h2 {font-size: var(--fs-lead); margin: 0.5rem 0 0.75rem; display: flex; align-items: baseline; gap: 0.75rem;}
.pc-count {font-family: inherit; font-size: var(--type-note); color: var(--text-muted);}
.pc-side ul {list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem;}
.pc-side li {display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; font-size: var(--fs-note);}
.pc-side li .portrait, .pc-side li .initial {width: 2.25rem; height: 2.25rem; border-radius: var(--radius-face); object-fit: cover; font-size: 0.875rem;}
.pc-side li small {display: block; color: var(--text-muted); font-size: var(--fs-tag); word-break: auto-phrase;}
.pc-side .primary {width: 100%; margin-top: 1rem;}
.pc-note {margin: var(--space-2) 0 0; font-size: var(--type-note); color: var(--text-muted); word-break: auto-phrase;}
@media (max-width: 900px) {
  .pc-layout {grid-template-columns: minmax(0, 1fr); gap: 0;}
  .pc-card {grid-template-columns: 4rem minmax(0, 1fr);}
  .pc-card .portrait, .pc-card .initial {width: 4rem; height: 4rem;}
  .pc-like {grid-column: 2; justify-self: start;}
  .pc-page {padding-bottom: var(--space-9);}
  /* 画面の下に貼り付く帯：人数と主役のボタン。並んだ人は、帯の中で横に流す。 */
  .pc-side {position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; border: 0; border-top: 1px solid var(--line); padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--shadow-sticky);}
  .pc-side h2 {margin: 0 0 var(--space-2); font-size: var(--fs-lead);}
  .pc-side ul {display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;}
  .pc-side li {display: flex; flex: none; gap: 0.375rem; font-size: var(--fs-note);}
  .pc-side li small, .pc-side li .small-button {
    display: none;
  }
  .pc-side .primary {margin-top: var(--space-2);}
  .pc-note {display: none;}
  .pc-note.over {display: block; margin: 0.375rem 0 0;}
}
@media (max-width: 380px) {.pc-lead h1 {font-size: var(--fs-head);}}
/* 選ばれた顔が灯る。 */
.fw-grid.choosing .fw-tile:not(.chosen) {opacity: 0.35; transition: opacity 0.4s;}
.fw-tile.chosen {position: relative; z-index: 3; opacity: 1; outline: 2px solid var(--fill); outline-offset: 1px; transform: scale(1.5); transition: transform 0.25s ease-out;}
@media (prefers-reduced-motion: reduce) {.fw-tile.chosen {transform: none;}}
/* The wait on the top page: faces flicker while the AI reads the plan, then the chosen light one by one. */
.fw-tile.scan {opacity: 1; outline: 2px solid var(--fill); outline-offset: 0; transition: outline-color 0.3s;}
.pick-status {margin: var(--space-3) 0 0; color: var(--text); font-weight: 600; min-height: 1.6em;}
.fw-person .pick-stance {grid-column: 1 / -1; margin: 0 0 0.5rem; color: var(--fill-text); font-weight: 600;}
.fw-person .pick-stance span {margin-left: var(--space-3); color: var(--text-muted); font-weight: 400;}
.pc-reason.pending {color: var(--text-muted);}
/* 第一印象の見出し（2026-10-09）。見出しの下に斉藤さんの一文。 */
.voices-head {
  margin: 0 0 var(--space-5);
}
.voices-head h1 {
  font-size: var(--fs-head);
  margin: 0;
}
.voices-head .voices-lead {
  margin: var(--space-2) 0 0;
}
/* 答えのあとに、選んだ理由を小さく。 */
.voice .voice-stance {
  margin: 0 0 var(--space-4);
}
.voices-q .searchbox .voices-q-go {
  width: auto;
  padding: 0 var(--space-4);
  font-size: var(--type-note);
  white-space: nowrap;
}

/* トップからすぐ6人に聞く試作（統括 2026-10-15、gather.js・voices.js askInstantly）。
   顔は壁から飛んでくる。答えは届いた順に吹き出しで出る。6人そろうと、上に一行。 */
.voices-page.instant .voices-head { min-height: 2.5rem; }
.instant-lead { opacity: 0; transition: opacity 0.4s ease; }
.instant-lead.in { opacity: 1; }
.voice.landing .portrait { visibility: hidden; }
.gather { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.gather-face { position: absolute; left: 0; top: 0; object-fit: cover; border-radius: var(--radius-3); will-change: transform; background: var(--avatar-fill); }
.gather-face.lit { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fill), var(--shadow-3); }
.voice-line.bubble {
  position: relative;
  flex: 0 0 auto;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  animation: bubble-in 260ms ease-out both;
  transform-origin: 1.5rem 0;
}
/* 吹き出しのしっぽ（上の顔と名前のほうへ） */
.voice-line.bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 1.25rem;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.voice-line.bubble[data-shown] { animation: none; }
.voice-wait.bubble-wait { animation: none; flex: 0 0 auto; margin: var(--space-3) 0 var(--space-4); min-height: 0; }
.voices-page.instant .voice-actions { margin-top: auto; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .voice-line.bubble, .instant-lead { animation: none; transition: none; }
}
/* 試作のカード：顔の横に名前、その下に吹き出しを全幅で。6人が1画面（1440×900）に入る大きさ。カード全体で対話へ。 */
.voices-page.instant .voices-grid.many { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.voices-page.instant .voice {
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--space-3);
  row-gap: 0;
  padding: var(--space-4);
  align-content: start;
}
.voices-page.instant .voice.ready { cursor: pointer; }
/* 指で触る端末では :hover が押したあとに残る（スマホの写真で真ん中の人の枠が太く見えた、斉藤さん 2026-10-17）：ポインタのある端末だけ。 */
@media (hover: hover) { .voices-page.instant .voice.ready:hover { border-color: var(--line-strong); } }
.voices-page.instant .voice .portrait { width: 3.5rem; height: 3.5rem; grid-row: 1 / 3; grid-column: 1; }
.voices-page.instant .voice-body { display: contents; }
.voices-page.instant .voice h2 { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--fs-body); }
.voices-page.instant .voice-meta { grid-column: 2; grid-row: 2; align-self: start; font-size: var(--fs-tag); margin: 0; }
.voices-page.instant .voice-line.bubble,
.voices-page.instant .voice-wait.bubble-wait,
.voices-page.instant .voice-failed { grid-column: 1 / -1; grid-row: 3; }
.voices-page.instant .voice-line.bubble { font-size: var(--fs-body); line-height: 1.75; margin: var(--space-3) 0 var(--space-3); word-break: normal; line-break: strict; }
.voices-page.instant .voice-actions { grid-column: 1 / -1; grid-row: 4; align-self: end; }
.voices-page.instant .voice-actions .secondary { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--fs-note); }
@media (max-width: 1000px) { .voices-page.instant .voices-grid.many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .voices-page.instant .voices-grid.many { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .voices-page.instant .voice-actions .secondary { min-height: var(--tap); }
}
.instant-lead { text-wrap: balance; }
/* 答えの上の1行（どんな相手に聞いたか）：｜で区切った一つひとつは、入るかぎり途中で折らない。 */
.instant-lead .seg { display: inline-block; }
.instant-lead.who { font-size: 1.125rem; line-height: 1.6; }
@media (max-width: 767px) { .instant-lead.who { font-size: 1rem; } }
/* 3人の答えを、トップの上に重ねる窓（voices.js drawThree、斉藤さん 2026-10-17）。後ろのトップは暗くして見えたまま。
   PC は真ん中の枠、スマホは下から画面いっぱい。右上に「閉じる」（Esc・戻る・暗いところを押しても閉じる）。 */
.three-sheet { max-width: 1180px; width: calc(100% - 64px); padding: 28px 40px 40px; }
.three-sheet .voices-page.in-three { margin: 0; padding: 0; max-width: none; }
.three-sheet .three-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 3;
  min-height: 2.75rem;
  padding: 0 1rem;
  margin: -12px -16px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
}
.three-sheet .instant-lead:focus { outline: none; }
@media (max-width: 767px) {
  .three-sheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0; padding: 12px 16px 32px; border: 0; animation: three-up 0.28s ease-out; }
  /* スマホは「閉じる」を一段に置き、答えの上の一行を狭めない（上に貼り付く） */
  .three-sheet .three-close { float: none; display: block; margin: 0 0 8px auto; }
  @keyframes three-up { from { transform: translateY(32px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .three-sheet { animation: none; } }
/* トップで企画を送ったあと、AI が相手を考えるあいだ：壁の顔が順に一瞬光る（gather.js scanWall）。壁の上に重ねた層だけで、壁は描き直さない。 */
.wall-scan { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.wall-scan-ring { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 2px solid var(--fill); border-radius: 2px; animation: wall-scan 0.7s ease-out forwards; }
@keyframes wall-scan { from { opacity: 1; } to { opacity: 0; } }
/* 「次も聞いてみる」（voices.js nextTopicsHTML）：3人が答えたあと、残りの相談を1行に */
.next-topics {
  margin-top: var(--space-6);
}
.next-topics-label {
  margin: 0 0 var(--space-2);
  font-size: var(--type-note);
  color: var(--text-muted);
}
.next-topics-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 新しいトップから来た人の第一印象（public/js/top-flow.js が html に data-top="new"）。企画の名前・見出し・一行は紺の帯
   （band.js、tone.css）に。カードとボタンはどのページとも同じ形（角は --radius-card、ボタンは parts.css の3つ）のまま。
   顔は金の輪、分け方は濃い金（斉藤さん 2026-10-25「全体的に紺色とゴールドをいれて、トンマナを統一」）。 */
html[data-top='new'] .voice .portrait,
html[data-top='new'] .voice .initial {
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #fff;
}
html[data-top='new'] .voice-group > span:not(.term-en),
html[data-top='new'] .voices-page .stance-name {
  color: var(--text-mark);
}
/* 本文の左の端を、帯の字の左の端にそろえる（帯の中身と同じ幅に） */
html[data-top='new'] .voices-page:not(.instant) {
  max-width: none;
}
/* 見出しの決まり（統括 2026-10-25）：本文の h2（全員に聞いた問い）は明朝 800・21px・紺、左に金の細い縦線。
   カードの名前は見出しではなくカードの名札なので、ゴシックの太字を紺に */
html[data-top='new'] .voices-page:not(.instant) .ask-q {
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-mincho);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--brand-12);
}
html[data-top='new'] .voices-page:not(.instant) .voice h2 {
  font-weight: 700;
  color: var(--brand-12);
}
/* スマホ：顔の右の細い列に答えまで押し込めない。顔と名前・分け方を上に並べ、答えからはカードの幅いっぱいに */
@media (max-width: 560px) {
  html[data-top='new'] .voices-page:not(.instant) .voice {
    display: block;
  }
  html[data-top='new'] .voices-page:not(.instant) .voice .portrait,
  html[data-top='new'] .voices-page:not(.instant) .voice .initial {
    float: left;
    width: 4rem;
    height: 4rem;
    margin: 0 var(--space-3) var(--space-2) 0;
  }
  html[data-top='new'] .voices-page:not(.instant) .voice-body {
    display: block;
  }
  /* 肩書きの並び（dom.js segsHTML）は、どのカードでも顔の右で折る（入りきらない並びだけが顔の下へ回り、カードどうしで形が違った。
     saito-review 2026-10-28） */
  html[data-top='new'] .voices-page:not(.instant) .voice-meta > span.segs {
    /* 箱を顔（float）の右に収める。顔の下まで広がると、行の頭の区切りを切る位置が顔の側になる */
    display: flow-root;
    /* 顔の右に置く箱では左の負の余白が効かないので、行の頭の区切りの1字ぶんは位置でずらして切る */
    position: relative;
    left: -1em;
    margin-left: 0;
    margin-right: -1em;
  }
  html[data-top='new'] .voices-page:not(.instant) .voice-body > :is(.voice-line, .voice-wait, .voice-stance, .voice-actions, .voice-facts, .voice-intent-why) {
    clear: both;
  }
}

/* 第一印象のカード（public/js/voices.js）：カードには判断の材料の行（.voice-facts）。
   名前の下に利用意向の札：使いたい側は金、使いたくないは灰。答えの下に小さく、選んだ言葉と理由の一言。 */
/* 判断の材料：欄の名前を小さく、値をふつうの字で（欄にない人の行は出さない） */
.voice-facts {
  display: grid;
  gap: 2px;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-note);
  line-height: 1.5;
}
.voice-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.voice-facts dt {
  flex: none;
  color: var(--text-muted);
}
.voice-facts dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
}
.voice-intent {
  margin: var(--space-1) 0 0;
}
.voice-intent > span {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-round);
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.5;
}
.voice-intent.yes > span {
  background: var(--gold);
  color: var(--brand-12);
}
.voice-intent.no > span {
  background: #e3e6ea;
  color: #4a5361;
}
/* 答えのすぐ下に付ける（答えの段の伸びはこちらが受ける） */
.voice-line:has(+ .voice-intent-why) {
  flex: none;
  margin-bottom: 0;
}
.voice-intent-why {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 8px;
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--text-muted);
}
.voice-intent-word {
  font-weight: 700;
  color: var(--text);
}
/* 第一印象のカードの上の一行「聞いた相手」（public/js/voices.js heardHTML。斉藤さん 2026-11-02 了承）。札は表示だけ（押せない、×もない）。
   右端に「別の6人にも聞く」（secondary）と、太字の小さな「もっと詳しく選ぶ」。スマホでは札もボタンも折り返す（横に流さない） */
.voices-heard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 var(--space-5);
}
.voices-heard-label {
  margin: 0 6px 0 0;
  font-size: var(--fs-note);
  color: var(--text-muted);
}
.voices-heard-tags {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voices-heard-tags li {
  padding: 4px 14px;
  border: 1px solid var(--line, #d7dce4);
  border-radius: var(--radius-round);
  background: #fff;
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.5;
  color: var(--brand-12);
}
.voices-heard-count {
  margin: 0 0 0 4px;
  font-size: var(--fs-note);
  color: var(--text-muted);
}
.voices-heard-count b {
  color: var(--text);
}
.voices-heard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-left: auto;
}
.voices-heard-actions .link {
  min-height: var(--tap);
  padding: 0 4px;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--brand-12);
}
@media (max-width: 560px) {
  .voices-heard-label,
  .voices-heard-count {
    flex-basis: 100%;
    margin-left: 0;
  }
  .voices-heard-actions {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* 枠のある声の画面（askPeople の frame。業界のペルコモの③声など）：見出し・小さな注記・6人。帯・手順・印・暮らしの欄は出さない */
.voices-framed { max-width: 1040px; margin: 0 auto; }
.voices-frame { margin: 1.5rem 0 1.75rem; }
.voices-frame-eyebrow { margin: 0; font-size: var(--type-note, 0.875rem); color: var(--text-quiet); }
.voices-frame h1 { margin: 0.375rem 0 0; font-size: 1.375rem; line-height: 1.5; color: var(--text-head); word-break: auto-phrase; }
.voices-frame-note { margin: 0.75rem 0 0; font-size: var(--type-note, 0.875rem); color: var(--text-quiet); }
.voices-framed .voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.voices-framed .voice-keep { min-height: 2.75rem; }
.voices-framed .voice-keep[aria-pressed='true'] { font-weight: 600; text-decoration: none; color: var(--text); }