/* coffee-yarinaoshi (project-09-03) 固有スタイル
   design-tokens.css (バンドル内コピー) の上に載せる。
   外部フォント・CDN・外部画像は使わない(完成基準11)。 */
@import url("../design-tokens.css");

/* design-tokens.css の body に word-break 指定が無いため、狭い画面幅で日本語の禁則が崩れる。
   line-break: strict で行頭禁則を維持し、word-break: keep-all でカタカナ語の途中改行を防ぎ、
   overflow-wrap: break-word を安全弁に置く(04-01/04-02/04-03 と同じ三点セット)。 */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.page-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

/* ===== 画面切替 =====

   ★ 入場演出で opacity を使わない。動かすのは位置だけにする。

   04-03 は「opacity:0 から始める演出」で2回、結果画面が真っ白になった。
   **演出が止まった時に何が残るかで設計を決める。**
   opacity を 0 から始める演出は、止まると「見えない」に落ちる。
   位置(transform)だけなら、止まっても「12px ずれた場所にちゃんと見える」で済む。
   **中身が読めなくなる演出は、演出として釣り合っていない。** */
.screen {
  transform: none;
}

.screen:not([hidden]) {
  animation: coffee-screen-in var(--duration-base, 0.24s) var(--ease, ease) 1;
}

@keyframes coffee-screen-in {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.screen[hidden] { display: none; }

/* ===== 入口 =====
   ★ 04-02 では hero が 320×568 で 413px=画面の7割強を占め、道具本体を毎回画面外へ
     押し出していた(2026-08-26 実測)。ここは2行に抑え、症状の選択肢と同居させる。 */
.hero {
  padding: var(--space-2) 0 var(--space-1);
}

.hero[hidden] { display: none; }

.hero__title {
  margin: 0;
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  line-height: 1.45;
}

/* ===== 画面の枠 ===== */

.hd { padding: var(--space-2) 0 var(--space-1); }

/* ★ 2026-08-29 実描画で見つけた見落とし:
   design-tokens.css の `h2` は**「小さく追跡させたラベル」**として定義されていて、
   `font-size: 0.8rem / letter-spacing: 0.25em / color: --color-text-muted` が付いている。
   こちらは h2 を**画面の見出し**として使っているのに font-size と line-height しか
   上書きしておらず、**letter-spacing 0.25em(実測 4.2px)と muted 色がそのまま残っていた**
   ——「先 に 分 け て か ら 、」と1文字ずつ離れて出ていた。
   **共通部品を別の役割で使う時は、その部品が持っている指定を全部見て打ち消す。**
   font-size を上書きしたことで letter-spacing の em 値が実寸で増えてもいた(0.8rem→1.05rem)。 */
.hd h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

.lead {
  margin: 4px 0 0;
  font-size: var(--fs-sm, 0.82rem);
  color: var(--color-text-muted);
}

.body { padding-bottom: var(--space-2); }

.foot {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== 選択肢 =====
   ★ タップ対象は 44px を割らない。ID261/ID263 で 04-01 に17件・04-02 に9件の
     44px未満が見つかっている。**最初から割らない形で作る。** */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              background-color var(--duration-fast, 0.15s) var(--ease, ease);
}

.opt:hover { border-color: var(--color-accent-strong); }

.opt__t {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.opt__s {
  display: block;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ===== 出どころ =====
   ★ 結果と同じ画面に置く。**アフィリエイト表示の列を省略しない**
     (advisor 2026-08-29 指摘2の対案。当サイト自身も同じ立場にいることを併記する)。 */
.src {
  margin-top: var(--space-2);
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.src__lead {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--color-text);
}

.src__list{
  margin: 0;
  padding-left: 1.1em;
}

.src__list li { margin-bottom: 4px; }

.src__list b { color: var(--color-text); }

/* ===== 収益導線 =====
   ★ 10分プランを開いた後にだけ出る(手を動かす前に物を売らない)。
     開示は導線の**直前**に置く——04-02 ID242 で、開示とリンクが 518px 離れていて
     320×568 では同一画面に入らなかった(是正後 101px)。 */
.offer {
  margin-top: var(--space-2);
  padding: 10px 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs, 0.76rem);
  line-height: 1.55;
}

.offer[hidden] { display: none; }

.offer__pr {
  display: block;
  margin-bottom: 5px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.offer__why {
  display: block;
  margin-top: 5px;
  color: var(--color-text-muted);
}

/* ===== ボタン =====
   ★ 高さは 44px を割らない。04-01/04-02 では .btn--ghost が 320px 幅でだけ 39px になり、
     375px 以上では届いていた——**1つの幅だけ見ると存在しない欠陥に見える形**だった
     (ID261/ID263)。最初から min-height で押さえる。 */
.btn {
  display: block;
  width: 100%;
  min-height: 44px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-bottom: 3px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              color var(--duration-fast, 0.15s) var(--ease, ease);
}

.btn--ghost:hover {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

.btn--small { font-size: var(--fs-xs, 0.76rem); }

.offer__link { width: 100%; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm, 0.82rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.back:hover { color: var(--color-accent-hover); }

/* ===== 版表示 =====
   ★ 04-01 ID258: ユーザーテストで「是正が効いていない」ように見えた時、
     **キャッシュで古い版が動いていたのか、直っていないのか**を切り分ける手段が無かった。
     テストのたびに「どの版を触ったか」を確定できるようにする。 */
.build-stamp {
  margin: var(--space-3) 0 0;
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ===== 日本語組版(完成基準9) ===== */

/* カタカナ複合語を途中で折らない。分割は app-state.js splitKatakanaSegments が行う */
.no-break-katakana { white-space: nowrap; }

/* 地の文は通常の改行点を使わせる(禁則を効かせるため)。
   カタカナ語の保護は上の .no-break-katakana が個別に担う
   (04-02 ID148 と同じ考え方: CSSの全面適用ではなくトークン単位で守る)。 */
.hero__title, .hd h2, .lead, .note, .opt__t, .opt__s, .src, .offer, /* ★ 2026-09-03(project-06-01)で足した枠。
   `body` の `word-break: keep-all` + `overflow-wrap: break-word` のままだと、
   日本語のひとつながりが「切れない語」として扱われ、**溢れた時に禁則を飛ばして折り返す**
   ——実測(320px)で `.source-note` の「…世論調査です。」の**句点だけが行頭に落ちた**。
   `word-break: normal` に戻すと `line-break: strict` の禁則が効く。
   **新しい表示枠を足したら、この一覧にも足すこと。** */
.cause, .move, .move__d, .revisit__v, .revisit__d, .source-section, .source-note, .offer__why{
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ハブ復帰導線のタップ対象については、このファイルには何も置かない。
   ★ 2026-08-29(ID271)に 90×18 / 112×24 / 54×16 を検出して**ツールの中だけ**を
     暫定で上書きしていたが、**原因は design-tokens.css(正本)側で全ツール共通**だった。
     ID275 で正本が直った(--hub-tap-min: 44px)ため、**この上書きは削除した**(ID276)。
     暫定の上書きを残すと、正本が直ったことに誰も気づかないまま二重管理になる。
   ★ 2026-09-03(project-06-01): この注記は、付いていた規則(.act)を未使用として
     削除した後も**決定として生きている**ので残す。 */

/* ===== 完成基準7: prefers-reduced-motion で動きを止める =====
   design-tokens.css 側にも一括対応(*, *::before, *::after)があるが、
   **依存を前提にしない。**このファイルで新設した動きをここでも明示して止める。

   ★ 04-03 ID249 の教訓: 自分の点検が `animation` だけを数えていて `transition` を
     見落とし、`.quiz-opt` が漏れていた。**animation と transition の両方**を数えること。
     このファイルで動きを持つのは:
       animation … .screen:not([hidden])
       transition … .opt / .btn--ghost
     の**3つ**。ここに3つとも書く。
     ★ 2026-09-03(project-07-01)で数え直した。**3つのままで変わらない**
       (06-01 から複製した時点で `.check__btn` `.time__fill` は既に無い)。
       **数を書いたコメントは、規則を消した時に一緒に嘘になる。**削除の後は必ず数え直すこと。
       なお `.offer__link` は `.btn--ghost` を付けているので、この3つに含まれている。 */
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) {
    animation: none;
  }
  .opt, .btn--ghost{
    transition-duration: 0.01ms;
  }
}

/* ハブフッターの3つ目の子(プライバシーの1行)。
   .hub-footer は flex なので、そのままだとブランド・ナビと同じ行に並ぼうとする。
   幅いっぱいで折り返して、独立した1行にする。 */
.hub-footer__privacy {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
}

/* 開示の中の法令リンク。地の文の中のリンクなので、文の流れを壊さない
   (44px の下限は、独立した操作要素に掛ける指標であって、文中のリンクには掛けない)。 */
.offer__pr a {
  color: var(--color-accent-hover);
}

/* ===== この手順のもとになった記事(ID288 ③)=====
   ★ 記事リンクは「導線」ではなく**結論の出どころ**として出す(04-03 と同型)。
     静的HTMLに置いてあるので、リンクグラフの実測にも検索側にも出る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===================================================================
   09-03 固有(09-02 から複製した土台の上に載せる)

   ★ 土台には 09-02 用のセレクタ(.steps / .notice / .timebar / .tells 等)も
     含まれている。**このツールでは使っていない。**
     消さずに残しているのは、**共通部品の書き方をコピーする(標準A1)方針の下で、
     次に同型のツールを作る人が同じ土台から始められるようにするため。**
     ただし「使っていないものが載っている」ことは事実なので、ここに書いておく
     ——**黙って残さない。**総合監査で不要と判定されたら削る。
   =================================================================== */

/* ===== 原因(出典の強さを見出しで区別する)=====
   ★ **強さの違う根拠を、同じ見た目で並べない**(advisor 着手条件2)。
     6命題のうち3つは独立2系統、3つは単独出典。 */
.cause {
  padding: 9px 11px;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.5;
}

.cause b {
  display: block;
  color: var(--color-accent-strong);
  font-size: var(--fs-xs, 0.74rem);
}

/* ===== 次の1杯で試す1手(このツールの主役)===== */
.move {
  margin: 8px 0 0;
  padding: 10px 11px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent-strong);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

.move .move__d {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.74rem);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ===== この手順のもとになった記事(標準B1)=====
   ★ リンクは静的HTMLに置いてある。JS は印を付けるだけで、リンクは作らない
     ——JS が動かなくても2本のリンクは残る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list li:last-child { border-bottom: 0; }

.source-list li.is-primary {
  background: var(--color-accent-wash);
  padding-left: 8px;
  padding-right: 8px;
}

.source-mark {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-accent-strong);
}

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===== 法令導線のタップ対象(ID303。ID300 監査の条件)=====
   ★ 地の文の中に置いたままでは 44px にできない(縦に広げると行が重なる)。
     **文と分けて独立した行に出し**、そのうえで 44px を確保する。
   ★ それまでは「文中のリンクには 44px を掛けない」という扱いを status.md に書いていたが、
     **監査の判断で、法令導線は独立した操作要素として扱うことになった**(2026-08-29)。 */
.offer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
}

.offer__pr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
}

/* ===== 布石α(ID340): 入口の再訪枠 =====
   ★ **保存データが無い時は JS が枠ごと hidden にする。**初回の人の画面を変えない。
   ★ `.back`/`.btn` を `<a>` に付けているので、`[hidden]` の上書き事故に注意
     (このリポジトリで3回踏んだ形。`.btn` 側は display を持つため、
     枠の親を hidden にして中を隠している——**子に [hidden] を付けていない**)。 */
.revisit {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 2px solid var(--color-accent-strong);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg);
}

.revisit__k {
  margin: 0;
  font-size: var(--fs-xs, 0.72rem);
  font-weight: 700;
  color: var(--color-accent-strong);
}

.revisit__v {
  margin: 3px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

.revisit__d {
  margin: 5px 0 8px;
  font-size: var(--fs-xs, 0.74rem);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ★★ 防御(2026-09-03 maker)★★
   `.no-break-katakana` は**カタカナ語の途中改行を防ぐためだけ**のラッパーで、
   見た目を持つ意図は無い。ところが element セレクタ(`.move span` `.quiz-opt__text span`
   `.tell span` 等)は**このラッパーにも当たる。**
   実測(2026-09-03): 公開中の 09-03 で `.move span { display: block }` が
   「次の1杯:豆の量を増やす(**コーヒー**:水 = …)」の「コーヒー」に当たり、
   1つの文が**3行に割れて**いた(小さい灰色の別行になっていた)。06-01 でも同じ形が出ていた。
   → **改行のためだけの入れ物は、他のスタイルを受け取らない**ようにここで固定する。
   セレクタを `span.no-break-katakana`(0,1,1)にして、`.xxx span`(0,1,1)と同点にしたうえで
   **ファイル末尾に置いて後勝ちにしている。**位置を動かすと効かなくなる。 */
span.no-break-katakana {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* ===== 共有ブロック(queue ID381)=====
   ★ 04-02 の同型ブロックの**書き方をコピー**した(標準A1)。共通CSSに寄せない——
     配信バンドルは階層を跨げず、各ツールが自前の style.css を持つ設計のため。
   ★ 手入力欄の min-height:44px は ID307 の実測(288x31.6=44px未満)に由来する。 */
.share-section {
  margin-top: var(--space-3);
  text-align: center;
}
.share-section__lead {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}
.share-section__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}
.share-section__status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}
.share-section__status[hidden] {
  display: none;
}
.share-section__manual-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--measure);
  margin: var(--space-1) auto 0;
  padding: 0.5em 0.7em;
  /* ★ 2026-08-29(ID307 の全数走査で発見。実測 288x31.6 = 44px 未満)。
       04-01 と同一の部品・同一の是正。読み取り専用だが、
       **利用者がタップして選択・コピーする欄**なので操作要素として扱う。 */
  min-height: 44px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}
.share-section__manual-input[hidden] {
  display: none;
}