/*
 * 共通の部品（ペルコモのデザインシステム、2026-10-10）。
 *
 * > 斉藤さん（2026-10-09）「全画面でUXは徹底的に統一してほしい」
 *
 * どの画面でも同じ形で出る部品を、ここで一度だけ決めます。index.html の並びのいちばん後ろに読み込むので、
 * 画面ごとの CSS で形（高さ・字・角・線）を変えないでください。置き場所（余白・並び）は画面の側で決めてかまいません。
 *   - ボタン（3つ：主役・脇役・文字だけ）
 *   - 作業の帯（WorkBar）：対話・片づけたい用事・打ち手を考える
 *   - 企画の一行（作業の帯の下、画面の題の上）
 * 文の中のリンクと、どの button にも効く土台は buttons.css。値はすべて kosei.css の名前。
 */

/* ボタン（2026-10-11）。形は3つだけ。
 * 斉藤さん（2026-10-11）「ボタンの色やサイズは統一されていますか？」——数えると29通りありました
 * （同じ主役が高さ40と44、スマホでは「この人たちに聞く →」だけ色が違う、字は12〜17pxの6通り）。
 *
 *   主役 .primary     紺の塗り（--fill）に白い字。高さ44px、字14px、角6px、横の余白24px。
 *   脇役 .secondary   白（--surface）に灰の枠（--line-strong）、紺の字。主役と同じ寸法。
 *   文字だけ .small-button（と前からの <button class="link small">）
 *                     紺の字13px。見える枠は高さ30pxの淡い線（::before）、押せる範囲は44px。
 *                     斉藤さん（2026-10-09）「『← 対話に戻る』みたいなテキストリンクは、小さくおしゃれなボタンにすると
 *                     美しくならないかな。大きいとダサいので注意。ただし全画面でUXは徹底的に統一してほしい」。
 *
 * 触れたとき（hover）の色は、マウスのある端末だけ（@media (hover: hover)）。指で押す端末では、押したあとも
 * その場所に hover が残り、次の画面の同じ位置に出たボタンが違う色に見えていた（スマホの「この人たちに聞く →」）。
 * 押せないとき（:disabled）は3つとも薄く（buttons.css の 45%）。焦点の輪は紺の2px。
 *
 * 画面ごとの CSS では、形（高さ・字・角・線・色）を変えない。変えてよいのは置き場所（幅・余白・並び・順番）と、
 * 狭い並びに収めるときの --control-pad だけ。tools/dev/button-consistency.mjs が主な画面で確かめます。
 * :is(button, a, …) を付けているのは、画面の CSS の「.〜 button」（強さが同じ）より、いちばん後ろに読むここを勝たせるため。 */
:is(button, a, label).primary,
:is(button, a, label).secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--control-pad);
  border-radius: var(--radius-control);
  font-size: var(--fs-control);
  font-weight: 400;
  line-height: var(--lh-control);
  text-decoration: none;
  transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
/* !important: button:hover や画面の「.〜 button:hover」（字を紺に替える）より強くして、塗りの上の白い字を保つ */
:is(button, a, label).primary {
  color: var(--on-fill) !important;
  border: 1px solid var(--fill);
  background: var(--fill);
}
:is(button, a, label).secondary {
  border: 1px solid var(--line-strong);
  color: var(--fill);
  background: var(--surface);
}
@media (hover: hover) {
  :is(button, a, label).primary:hover:not(:disabled) {
    background: var(--fill-hover);
    border-color: var(--fill-hover);
  }
  :is(button, a, label).secondary:hover:not(:disabled) {
    color: var(--fill);
    background: var(--surface-quiet);
  }
}

/* 文字だけ（小さい脇役）。ボタンそのものは押せる範囲の44px（透明）。見える枠（30px）は ::before で描くので、中に span を足さなくてよい。 */
:is(button, a, summary, span).small-button,
button.link.small {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1;
  color: var(--fill);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
:is(button, a, summary, span).small-button::before,
button.link.small::before {
  content: '';
  position: absolute;
  inset: calc((var(--tap) - var(--control-sm-h)) / 2) 0;
  z-index: -1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  transition: background-color var(--quick) var(--ease);
}
.small-button:hover:not(:disabled),
button.link.small:hover:not(:disabled) {
  color: var(--fill);
}
.small-button[aria-expanded='true']::before,
.small-button[aria-pressed='true']::before {
  background: var(--surface-quiet);
}
@media (hover: hover) {
  .small-button:hover:not(:disabled)::before,
  button.link.small:hover:not(:disabled)::before {
    background: var(--surface-quiet);
  }
}
/* 焦点の輪は、見える枠のまわりに */
.small-button:focus-visible,
button.link.small:focus-visible {
  outline: none;
}
.small-button:focus-visible::before,
button.link.small:focus-visible::before {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
/* 並べるとき、見える枠どうしの間は --space-2。押せる範囲の上下の余白は、まわりの行に食い込ませる */
.small-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
}


/* 作業の帯（WorkBar）。対話・片づけたい用事・打ち手を考えるで同じ形・同じ位置（work.js workBarHTML）。
 * 左に戻る道を1つ（スマホでは「←」だけ）と、対話では話している人。右の端に切り替え（どの画面でも同じ場所）、
 * その左に保存。高さ 56px、下に線。いまの画面は、字を太く＋朱の2px下線（頭のメニューと同じ印）。
 * まだ開けない画面は薄い字（押すと理由が出る）。Claude Design の画面デザイン（2026-10-10）に合わせた形。 */
.work-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'start end steps';
  align-items: center;
  gap: 0 var(--space-5);
  min-height: var(--bar-h);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.work-bar-start {
  grid-area: start;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.work-bar-end {
  grid-area: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.work-bar-end:empty {
  display: none;
}
/* 戻る道：帯の中の小さい脇役のボタンは枠を描かない（紺の字、触れると淡い面）。左の端を本文の端にそろえる */
.work-bar .nav-back {
  gap: var(--space-1);
  margin-left: calc(-1 * var(--space-3));
}
.work-bar .nav-back::before {
  border-color: transparent;
  background: none;
}
.work-bar .nav-back:hover::before {
  background: var(--surface-quiet);
}
.work-bar .journey-steps {
  grid-area: steps;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.work-bar .journey-steps button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bar-h);
  margin: 0 0 -1px;
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: var(--fs-control);
  font-weight: 400;
  line-height: var(--lh-control);
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 1;
}
.work-bar .journey-steps button::after {
  display: none;
}
.work-bar .journey-steps button:hover {
  color: var(--text);
}
.work-bar .journey-steps .current {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--mark);
}
.work-bar .journey-steps button[aria-disabled='true'],
.work-bar .journey-steps button:disabled {
  color: var(--text-faint);
  opacity: 1;
}
/* 新しいトップから来たとき（html[data-top='new']）：いまの場所は紺の字に金の下線（トップ・相手を選ぶ画面の紺と金、
   斉藤さん 2026-10-25）。ほかの場所の字も紺に寄せる。並びと言葉は同じ */
html[data-top='new'] .work-bar .journey-steps button:not([aria-disabled='true']):not(:disabled):hover {
  color: var(--brand-12);
}
html[data-top='new'] .work-bar .journey-steps .current {
  color: var(--brand-12);
  font-weight: 700;
  /* 金は白地で淡いので、線を1px太く見せる（字の位置はほかの場所とそろえたまま） */
  border-bottom-color: var(--gold);
  box-shadow: inset 0 -1px 0 var(--gold);
}
.work-save {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
#work-save-status {
  font-size: var(--fs-note);
  color: var(--text-muted);
  white-space: nowrap;
}
.save-short {
  display: none;
}
.save-long {
  display: inline;
}
/* 帯が狭いとき（タブレット）：戻る道と切り替えに場所を残す。保存の状態の字を出さず、900px 以下は「ファイル ↓」 */
@media (max-width: 1100px) {
  #work-save-status {
    display: none;
  }
}
@media (max-width: 900px) {
  .save-long {
    display: none;
  }
  .save-short {
    display: inline;
  }
}
/* 頭の帯（ロゴとメニュー）：高さ64px（スマホは56px）、下に淡い線 */
.header {
  min-height: var(--space-8);
  padding-block: 0;
  border-bottom-color: var(--line-soft);
}
@media (max-width: 700px) {
  .header {
    min-height: var(--bar-h);
  }
}
/* 企画の一行。作業の帯の下、画面の題の上（片づけたい用事・打ち手を考える） */
.work-context {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* スマホ（700px以下）：二段。上に「←」と道具、下に切り替え（全幅で等分）。保存は「ファイル ↓」 */
@media (max-width: 700px) {
  .work-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'start end' 'steps steps';
    gap: 0 var(--space-3);
    min-height: 0;
    border-bottom-color: var(--line-soft);
  }
  .work-bar .nav-back {
    margin-left: calc(-1 * var(--space-2));
  }
  .work-bar-start,
  .work-bar-end {
    min-height: 52px;
  }
  .work-bar .nav-back-word,
  #work-save-status,
  .save-long {
    display: none;
  }
  .save-short {
    display: inline;
  }
  .work-bar .journey-steps {
    gap: 0;
    border-top: 1px solid var(--line-soft);
  }
  .work-bar .journey-steps button {
    flex: 1;
    min-height: var(--tap);
    padding: 0 var(--space-1);
  }
  .work-context {
    margin-top: var(--space-5);
  }
}

/* 札（Chip）：選ぶもの（絞り込み、個人｜会社）。丸・見た目32px・13px、押せる範囲は44px。
 * 選んだ札は淡い面＋紺の枠＋紺の字（相手探しの札は find.css の .find-chip）。
 * 「たとえば」の例は札にしない。単なる例なので、少し薄い色の下線付きの言葉にする（斉藤さん 2026-10-12）。 */
.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.chip::before {
  content: '';
  position: absolute;
  inset: calc((var(--tap) - 32px) / 2) 0;
  z-index: -1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--quick) var(--ease);
}
.chip:hover:not(:disabled)::before {
  background: var(--surface-quiet);
}
.chip:hover:not(:disabled) {
  color: var(--text);
}
.chip[aria-pressed='true'] {
  color: var(--fill);
}
.chip[aria-pressed='true']::before {
  background: var(--chosen-bg);
  border-color: var(--fill);
}
.chip:focus-visible {
  outline: none;
}
.chip:focus-visible::before {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
.examples {
  gap: 0 var(--space-2);
  font-size: var(--fs-note);
  color: var(--text-muted);
}
.examples > span {
  margin-right: var(--space-1);
}
.examples button {
  min-height: var(--tap);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  white-space: nowrap;
  cursor: pointer;
}
.examples button:hover:not(:disabled) {
  color: var(--text);
  text-decoration-color: currentColor;
}
.examples button:focus-visible {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
/* 開いて読む説明（「＋ この〜について」）も小さい脇役のボタン。開くと「− 閉じる」 */
summary.small-button {
  padding: 0 var(--space-3);
  color: var(--fill);
  list-style: none;
  width: fit-content;
  cursor: pointer;
}
summary.small-button::-webkit-details-marker {
  display: none;
}
details[open] > summary.small-button::before {
  background: var(--surface-quiet);
}
details[open] > summary .pc-closed,
details:not([open]) > summary .pc-open {
  display: none;
}

/* 作業の続きの入口（next-card.js）。話した人と企画を引き継いで、話し方を学ぶ・100人に聴くへ進む静かなカード。
   塗らない・飾らない。結果を読み終えた下に、ページの流れの中で1つだけ。ボタンは脇役（.secondary）。 */
.next-card {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.next-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-note, 0.875rem);
  color: var(--text-quiet);
  font-weight: 600;
}
.next-card .next-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}
.next-card .next-row + .next-row {
  border-top: 1px solid var(--line-soft);
}
.next-card .next-text {
  flex: 1 1 16rem;
  min-width: 0;
}
.next-card .next-text p {
  margin: 0;
}
.next-card .next-title {
  font-weight: 600;
  word-break: auto-phrase;
}
.next-card .next-text .small {
  margin-top: var(--space-1);
  word-break: auto-phrase;
}
.next-card .next-tier {
  margin-left: var(--space-2);
  white-space: nowrap;
}
.next-card .secondary {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .next-card .secondary {
    width: 100%;
  }
}
/* 対話の画面：広い画面は右の欄にだけ出す。狭い画面（スマホ）は、会話の欄が小さく、会話の終わりにカードを置くと、
   「全員に聞く」のあと聞いた問いが画面の外へ押し出されるので、対話には出さない（作戦の最後とレポートの下には出る）。
   CI の mobile-ask-all-in-sight で見つけた（2026-11-05）。 */
body.is-chat .cv .next-card-end {
  display: none;
}
@media (max-width: 1000px) {
  body.is-chat .cv .quest-card .next-card {
    display: none;
  }
}
.next-card .next-text p {
  line-height: 1.6;
}
/* 右の欄の中：二重の枠にしない。罫を1本だけ引いて、ボタンは幅いっぱいに縦に */
body.is-chat .cv .quest-card .next-card {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0 var(--space-3);
  border: 0;
  border-top: 1px solid var(--line-soft);
  /* 右の欄は目がいきにくいので、見出しと同じ黄色の縦線で、カードに目を向ける。ボタンの形は変えない（主役は一画面に一つ、形は3つだけ） */
  border-left: 3px solid var(--gold);
  border-radius: 0;
}
body.is-chat .cv .quest-card .next-card h3 {
  color: var(--text);
}
body.is-chat .cv .quest-card .next-card .next-row {
  flex-direction: column;
  align-items: stretch;
}
body.is-chat .cv .quest-card .next-card .secondary {
  width: 100%;
}
body.is-chat .cv .quest-card .next-card .next-text {
  flex: none;
}
.vs-page .next-card {
  margin-bottom: var(--space-6);
}

/* 使えない人に見せる、結果の例（roleplay.js sampleHTML・survey.js resultSampleHTML）。本物の結果と同じ部品で、「例です」とだけ添える */
.feature-sample {
  margin: var(--space-6) 0;
}
.feature-sample > h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.feature-sample .sample-tag {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-quiet);
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  padding: 0 var(--space-2);
  white-space: nowrap;
}

/* トップ・料金ページの、結果の画面の例（showcase.js）。広い画面は2つを横に、狭い画面は縦に */
.showcase,
.showcase.doc {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
}
.showcase > h2 {
  margin: 0 0 var(--space-5);
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-6);
  align-items: start;
}
/* 話し方を学ぶと100人に聴くは、同じ幅で縦に（話し方を学ぶは三つの達人の説明が入るので、横に並べない） */
.showcase-lead {
  margin: 0 0 var(--space-4);
  line-height: 1.75;
}
.showcase-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.showcase-audience {
  margin: 0 0 var(--space-5);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-quiet);
}
.showcase .feature-sample {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.showcase-go {
  margin: var(--space-6) 0 0;
}
.billing-page .showcase {
  padding-left: 0;
  padding-right: 0;
}