/* ═══════════════════════════════════════════════════════════════════
   無敗営業® 3分ロープレ
   決めごとは docs/スタイルガイド.md。迷ったらそちらに従う。

   色は3つ。金＝進む／濃紺＝地と構造／白＝本文。赤は「入力の誤り」だけ。
   囲みは濃紺の面だけ。それ以外は罫と余白と文字の大小で階層を作る。
   ═══════════════════════════════════════════════════════════════════ */

/* hidden 属性を、必ず効かせる。
   display:flex や display:grid を指定した要素では、ブラウザ既定の [hidden]{display:none} が負けて、
   el.hidden = true にしても画面から消えない。入力欄の3つ（.talkbar .listening .compose）が
   すべてこれに当たり、3つ同時に出ていた（2026-09-14、高橋さんの実機で発見）。
   書くロープレで踏んだのと同じ落とし穴。消すなら、ここで必ず消す。 */
[hidden]{display:none !important}

:root{
  /* 地と構造 */
  /* 2026-09-20、高橋さんのご指定で**書影の色**に合わせた。
     『無敗営業』表紙の青 #00469E（白抜き文字で 8.9:1）。以前の #0E1B3D はブランドの色ではなかった。
     『チーム戦略』の赤 #A4001D は、いまは使わない（赤は入力の誤りのため空けてある） */
  --navy:#00469E; --navy-2:#003A85; --navy-line:#2E6FC0;
  --paper:#fff; --ink:#12161F; --ink-2:#555E6D; --ink-3:#8B939F;
  --line:#E2E5EB;        /* 仕切りの細罫 */
  --line-2:#8B939F;      /* 入力欄の下線。白地で 3.2:1 あり、枠の要件を満たす */
  --surface:#EDF0F7;     /* 自分（営業）の発言の面 */
  /* 進む＝金。白地では文字に使えない（2.1:1）ので、明るい地用と暗い地用を対で持つ */
  --gold:#D8A537;        /* 暗い地の上。ボタンの面・点・メーター */
  --gold-ink:#8A6410;    /* 明るい地の上の文字（5.4:1） */
  --gold-line:#B4862B;   /* 白地に置く金ボタンの枠（面だけでは境界が 3:1 を切る） */
  --on-gold:#12161F;
  /* 濃紺の上の文字 */
  /* 青を明るくした（#0E1B3D → #00469E）ぶん、上に載る文字を見直した（2026-09-20）。
     #9FB0D9 は新しい青では 4.1:1 しかなく、小さな文字に使えない */
  --on-navy:#fff; --on-navy-2:#C6D2EE; --on-navy-3:#AEC0E4;
  /* 金は**面と点の色**。青の上の「文字」には、明るい金を使う（#D8A537 は 3.5:1 で足りない） */
  --gold-on-navy:#E8C46A;
  /* 意味の色。入力の誤りだけに使う */
  --error:#B3261E; --error-on-navy:#FF8A73;

  /* 書体（2026-09-20、6案を見比べて C を採用）。
     Noto Sans JP は無料サイトの標準装備で既視感が出る、Shippori Mincho B1 の太字は
     見出しにすると自費出版の気配が出る、というご指摘への答え。
     **数字と英字だけ欧文書体にする**（和欧混植）。「2:21」の野暮ったさは、ここが原因だった */
  --f-g:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-m:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --f-n:"IBM Plex Sans","Zen Kaku Gothic New",system-ui,sans-serif;

  --r:4px;               /* 角はこれひとつ。チップだけ 999px、写真は 0 */
  --pill:999px;
  --pad:20px;            /* 画面の左右 */
  --t-fast:120ms; --t-slow:260ms;
  --e-in:cubic-bezier(.2,0,0,1); --e-out:cubic-bezier(.4,0,1,1);
  --time-left:100%;      /* 残り時間の線。app.js が毎秒書き換える */
}

*{box-sizing:border-box}
html{color-scheme:light}   /* v1 はライトのみ。OSのダークで勝手に反転させない */
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-g);font-size:16px;line-height:1.75;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  word-break:auto-phrase;          /* 日本語を文節で折り返す。未対応の環境では従来どおり */
  hanging-punctuation:allow-end}   /* 行末の約物をぶら下げる（Safari が解釈する） */
input,select,textarea,.code{word-break:normal}
::selection{background:#F6E3B4;color:var(--ink)}

/* フォーカス。デジタル庁デザインシステムの「黄と黒の2重構造」に倣う。
   人前で操作するアプリなので、キーボードで追えることに実利がある */
:focus-visible{outline:3px solid #F6CF00;outline-offset:1px;
  box-shadow:0 0 0 5px rgba(0,0,0,.85);border-radius:2px}

/* ── 見出しの帯（ロゴタイプ）────────────────────────────── */
.band{background:var(--navy);color:var(--on-navy);
  padding:14px var(--pad);display:flex;align-items:center;gap:12px;
  border-bottom:2px solid var(--gold)}
/* ロゴは「入口へ戻る」ボタン。見た目は文字のまま（押せることは、触れた反応で伝える） */
.band-home{display:flex;align-items:baseline;gap:0;background:none;border:none;padding:0;
  color:inherit;font:inherit;cursor:pointer;text-align:left}
.band-home:hover .band-title{text-decoration:underline;text-underline-offset:4px}
.band-title{font-family:var(--f-m);font-feature-settings:"palt" 1;
  font-weight:800;font-size:18px;letter-spacing:.12em}
.band-title::after{content:"";display:inline-block;width:1px;height:13px;
  background:rgba(255,255,255,.55);margin:0 0 0 12px;vertical-align:-1px}
.band-sub{font-size:14px;font-weight:500;letter-spacing:.3em;text-indent:.3em;
  color:var(--on-navy-2)}
.band-mode{margin-left:auto;font-size:14px;letter-spacing:.12em;color:var(--gold-on-navy)}
/* 統合サイトへの文字リンク（2026-10-09、DECISIONS §6.9）。色は文字リンク（.link）の青の上版：補助文字の色に下線。
   金は「進む」の色なので使わない。主役はロープレの操作なので、目立たせすぎない。
   **出すのは入口と合言葉の画面だけ。**ほかの画面（設定・聞き取り・コード）は、押すと選んだ設定や書きかけが消える。
   ロープレ中と振り返りは、帯ごと隠れている（下の2行）。
   押せる広さは縦横 44px 以上。上下は帯の余白に食い込ませて、帯の高さを変えない（画面ごとに帯が伸び縮みしないように） */
.band-tools{display:none;margin:-9px -8px -9px auto;padding:0 8px;min-height:44px;min-width:44px;
  align-items:center;font-size:14px;letter-spacing:.06em;color:var(--on-navy-2);
  text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.band-tools:hover{color:var(--on-navy)}
/* 書きかけがあるときの1回目（app.js の toTools）。「書いた文章は消えます。／もう一度押すと移ります」の2行を、
   ロゴの右の残りの幅に収める。375px で帯の高さが変わらない大きさにした。
   それより狭い端末では、語の切れ目でだけ折れて3〜4行になり、そのあいだだけ帯が伸びる（6秒で戻る）。
   ロゴは縮めない（押された長い文に押されて、ロゴが2行に割れないように） */
.band-tools[data-armed="1"]{padding:0;font-size:13px;letter-spacing:0;line-height:1.35;color:var(--on-navy);
  white-space:pre-line;word-break:keep-all;text-align:right;justify-content:flex-end}
.band:has(.band-tools[data-armed="1"]) .band-home{flex-shrink:0}
body:has(#gate:not([hidden])) .band-tools,
body:has(#pass:not([hidden])) .band-tools{display:inline-flex}
/* 入口と合言葉の画面では、モード名を出さない。まだどちらも選んでいないので。
   ロゴで入口へ戻ると消える作り（app.js の toGate）だったが、**端末の「戻る」で入口へ来たときは残っていた。**
   2026-10-09、そこへ「ツール一覧へ」が並び、375px で帯が折れて横にはみ出したことで気づいた。
   JS ではなくここで消すのは、どの道で入口へ来ても効くように。「進む」でモードの画面へ戻れば、また出る */
body:has(#gate:not([hidden])) .band-mode,
body:has(#pass:not([hidden])) .band-mode{display:none}
/* ロープレ中と振り返りは、お客様の写真が見出しの役をする。帯は引っ込める */
body:has(#play:not([hidden])) .band,
body:has(#debrief:not([hidden])) .band{display:none}

/* ── 画面と組みもの ──────────────────────────────────── */
.screen{max-width:520px;margin:0 auto;padding:0 0 calc(28px + env(safe-area-inset-bottom))}
.screen.wide{max-width:1280px;padding-left:var(--pad);padding-right:var(--pad)}
.card{padding:28px var(--pad) 0}
.card + .card{padding-top:26px}
h1,h2{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  letter-spacing:.06em;line-height:1.6;margin:0 0 14px}
h2{font-size:22px}
/* その画面でいちばん見てほしい見出し。白を基調にしたぶん埋もれやすいので、
   **上に金の短い罫**を置いて視線を止める（2026-09-20、高橋さんのご指摘）。
   面で囲まないので、§5「使わない形」には触れない */
/* 入口のメリット3行（改善①、2026-09-30）。囲まず、罫と余白で。問い（h2.lead）より控えめに置く */
.merits-lead{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--ink-2)}
.merits{list-style:none;margin:0 0 30px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.merits li{margin:0;font-size:17px;line-height:1.95;font-weight:700;color:var(--ink)}
h2.lead{font-size:24px;margin-bottom:16px}
h2.lead::before{content:"";display:block;width:34px;height:3px;border-radius:var(--pill);
  background:var(--gold);margin:0 0 14px}

/* 見落とされると困る「お知らせ」は、青の面に載せる。文字より先に、面として目に入る */
.card.notice{background:var(--navy);color:var(--on-navy);padding:22px var(--pad) 24px;margin-bottom:8px}
.card.notice h2{color:var(--on-navy)}
.card.notice h2.lead::before{background:var(--gold-on-navy)}
.card.notice .msg{color:var(--on-navy)}
.card.notice .hint{color:var(--on-navy-2)}
.card.notice .ghost{background:transparent;border-color:var(--navy-line);color:var(--on-navy)}
.hint,.note{font-size:14px;line-height:1.85;color:var(--ink-2);margin:0 0 18px}
.note b,.hint b{color:var(--ink)}
.err{font-size:15px;line-height:1.8;color:var(--error);margin:10px 0 0}
/* 場面に合わない設定の知らせ。エラーではないので赤にしない。色面や角丸の囲みも作らない
   （スタイルガイド §5「AIの手癖」）。読ませたいので本文と同じ濃さにし、太字だけで立てる */
.stage-fix{font-size:14px;line-height:1.85;color:var(--ink);margin:0 0 18px}
/* 危ない語があるときだけ出す1行（2026-10-10 高橋さんのご判断。app.js の watchLeak）。**赤にしない**：地の文と同じ灰色。
   誤りではなく「置き換えると安心」という案内なので、誤りの色（--error）も囲みも使わない */
.leak-hint,.fit-hint{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.stage-fix .link{font-size:14px;padding:4px 2px;color:var(--gold-ink);text-decoration:underline;
  text-underline-offset:4px}
.mode-line{display:flex;gap:14px;align-items:baseline;font-size:14px;
  color:var(--ink-2);padding:14px var(--pad) 0;margin:0}

/* 戻る行。**画面の下、操作の並びのあと**（2026-09-22、DECISIONS.md §6.6）。
   「前の画面に戻る」を先に置く——近い動作を手前に。
   戻れないときは、そのボタンだけ hidden になる（押せない灰色にはしない） */
.nav-bottom{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  margin:4px 0 0;padding-bottom:6px}

/* 並んだ選択肢。カードにせず、罫で区切った行にする */
.picks{margin:0 calc(-1 * var(--pad)) 22px;border-top:1px solid var(--line)}
.pick{display:block;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);border-radius:0;
  padding:18px var(--pad);font:inherit;color:inherit;cursor:pointer;
  transition:background var(--t-fast) var(--e-in)}
.pick b{display:block;font-size:17px;font-weight:700}
.pick span{display:block;margin-top:6px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.pick:hover{background:#F7F8FA}
.pick[aria-pressed=true]{background:var(--navy);color:var(--on-navy);border-bottom-color:var(--navy)}
/* 場面が7つになり、選んだあとも891px（画面1つぶん）スクロールしないと次へ行けなくなった。
   選び終わったら、選んだ行だけ残す（2026-09-21、高橋さんの承認） */
#sceneList.chosen .pick[aria-pressed=false]{display:none}
/* 選んだ場面へ送ったとき、上端にぴったり付けない（アプリ内ブラウザの帯に寄りすぎないように。2026-10-10） */
#sceneList .pick{scroll-margin-top:12px}
.scene-again{display:none;margin-bottom:22px}
#sceneList.chosen ~ .scene-again{display:inline-block}
/* この場面までの経緯（2026-10-09、高橋さんのご判断・案2）。何回目の訪問か・前回の話は場面の持ちものなので、
   選んだ場面のすぐ下に出す（下の「これまでの文脈」の欄とは分ける）。見出しは入力欄の見出しと同じ大きさ・色。
   一覧を開き直しているあいだは隠す（選び直している最中に、前の場面の経緯が残って見えないように） */
.scene-history{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--ink)}
.scene-history-label{display:block;margin-bottom:4px;font-size:14px;color:var(--ink-2)}
#sceneList:not(.chosen) ~ .scene-history{display:none}
.pick[aria-pressed=true] span{color:var(--on-navy-2)}

/* 入力欄は枠で囲まず、下線だけ */
.field{display:block;margin:0 0 22px}
.field>span{display:block;margin-bottom:5px;font-size:14px;color:var(--ink-2)}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line-2);
  border-radius:0;padding:6px 0 8px;min-height:44px}
textarea{resize:none;line-height:1.85;min-height:0;field-sizing:content;max-height:34vh}
select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555E6D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:22px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
.row{display:flex;gap:20px}.row .field{flex:1}
/* お客様の会社名の欄の右の「様」（2026-10-27、DECISIONS §6.98）。見出しの span の見た目（.field>span）を打ち消し、欄と同じ大きさで並べる */
.field>.with-sama{display:flex;align-items:baseline;gap:8px;margin:0;font-size:16px;color:var(--ink)}
.with-sama input{flex:1;min-width:0}
.with-sama .sama{flex:none}
/* 直せない値（自社名など）。入力欄に見せない。下線を引くと「書ける」と思わせてしまう */
.fixed{margin:0;padding:6px 0 8px;font-size:16px;color:var(--ink);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fixed small{font-size:14px;color:var(--ink-3)}

/* ── ボタン ────────────────────────────────────────── */
button{font:inherit;cursor:pointer;border-radius:var(--r);border:1px solid transparent;
  transition:transform var(--t-fast) var(--e-in),background var(--t-fast) var(--e-in)}
button:active:not(:disabled){transform:scale(.985)}   /* 影を落とさないので、沈む代わりに縮める */
button:disabled{cursor:default}
.primary{width:100%;min-height:58px;background:var(--gold);color:var(--on-gold);
  border-color:var(--gold-line);font-size:17px;font-weight:700;
  letter-spacing:.18em;text-indent:.18em}  /* 字間のぶん右に寄るので、同じだけ字下げして戻す */
.primary:disabled{background:#EDE3CB;border-color:#DCD0B4;color:#8C8778}
.ghost{background:none;border-color:var(--line);color:var(--ink-2);
  min-height:44px;padding:0 18px;font-size:15px}
.ghost:hover:not(:disabled){border-color:var(--line-2);color:var(--ink)}
.ghost:disabled{color:#BFC5CD;border-color:#EEF0F3}
.small{min-height:44px;padding:0 16px;font-size:14px}
.link{background:none;border:none;padding:8px 2px;font-size:15px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:4px}
.link:hover{color:var(--ink)}

/* ── ロープレ中。お客様の写真が画面の頭になる ─────────────── */
/* 画面ごとスクロールさせない。時計と顔は、いつでも見えていなければならない。
   伸び縮みするのは会話だけ（2026-09-20、実機で時計が上へ逃げたため） */
#play{height:100dvh;display:flex;flex-direction:column;padding-bottom:0}
#play>*{flex:none}
#play .talk{flex:1 1 auto;min-height:0;max-height:none}
#play .under{padding-bottom:4px}
/* ロープレ中・振り返りの出口（2026-10-21）。操作の並びのあと、いちばん下（§6.6）。画面の下端の余白はここが持つ */
.play-nav,.db-nav{padding:0 var(--pad) calc(10px + env(safe-area-inset-bottom))}
.play-nav .link,.db-nav .link{font-size:14px;min-height:44px}
body.standby .play-nav{display:none}   /* 始める前には、読む画面の中に同じ出口がある */
.hero{position:relative;height:268px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:30% 30%;display:block;
  transform-origin:50% 100%;animation:breathe 5.5s ease-in-out infinite;
  transition:opacity .18s ease}
.hero img.talking{animation:talk 620ms ease-in-out infinite}
.hero img.swapping{opacity:0}
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
/* 覆いは4段。2段だと帯の輪郭が見えてしまう */
.hero::before{top:0;height:120px;
  background:linear-gradient(to bottom,rgba(8,16,38,.82) 0%,rgba(8,16,38,.46) 38%,rgba(8,16,38,.14) 70%,rgba(8,16,38,0) 100%)}
.hero::after{bottom:0;height:120px;
  background:linear-gradient(to top,rgba(8,16,38,.90) 0%,rgba(8,16,38,.58) 30%,rgba(8,16,38,.22) 60%,rgba(8,16,38,0) 100%)}
.hero>*:not(img){position:absolute;z-index:1;color:var(--on-navy);
  text-shadow:0 2px 12px rgba(8,16,38,.75)}
.hero-time,.hero-time i{text-shadow:none}
#hudScene{top:16px;left:var(--pad);right:110px;font-size:14px;letter-spacing:.06em;font-weight:400}
#hudWho{display:none}   /* 同じ内容が写真の下に出るので、二重に出さない */
.timer{top:8px;right:var(--pad);font-family:var(--f-n);
  font-weight:600;font-size:34px;line-height:1.15;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--on-navy)}   /* 色は変えない。金は「進む」の色なので、残り時間に使わない */
/* 通話が切れて止まった時計。**色だけで伝えない**（文字でも「時計は止めています」と出す） */
.timer.stopped{color:var(--on-navy-3)}
.face-name{left:var(--pad);bottom:14px;margin:0;line-height:1.5}
.face-name b{display:block;font-size:16px;font-weight:700}
.face-name span{display:block;margin-top:2px;font-size:14px;color:#DCE3F2}
/* ロープレ中に開く「設定」。会話と同じ場所に出し、開いている間は会話を隠す */
.setting-panel{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px var(--pad);display:grid;gap:14px}
.setting-panel h3{margin:0;font-size:15px;font-weight:700;color:var(--navy)}
.setting-panel dl{margin:0;display:grid;gap:10px}
.setting-panel dt{font-size:14px;color:var(--ink-3);margin-bottom:2px}
.setting-panel dd{margin:0;font-size:15px;line-height:1.75}
.setting-panel .row-sep{height:1px;background:var(--line)}
body.showing-setting .talk{display:none}

/* 場面①の電話。顔の代わりに、受話器と会社名だけ */
.hero-phone{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--navy);color:var(--on-navy);text-shadow:none}
.hero-phone span{font-size:15px;letter-spacing:.06em;color:var(--on-navy-2)}

/* 残り時間。数字を読まなくても、周辺視で残量が分かる */
.hero-time{left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25)}
.hero-time i{display:block;height:100%;width:var(--time-left);background:#fff;
  transition:width 1s linear}

/* 3分で、ここまで行く */
.goalbar{background:var(--navy);color:var(--on-navy);padding:12px var(--pad)}
.goalbar .goal-label{display:block;margin:0 0 3px;font-size:14px;font-weight:700;
  letter-spacing:.1em;color:var(--gold-on-navy)}
.hud-goal{margin:0;font-size:15px;line-height:1.55}
.hud-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tagline{font-size:14px;white-space:nowrap;color:var(--on-navy-2);
  border:1px solid rgba(255,255,255,.38);border-radius:var(--pill);padding:2px 12px}
.tagline:empty{display:none}

/* 会話。お客様は明朝、自分はゴシックの面。声の主が入れ替わったことが、読む前に分かる */
.talk{padding:18px var(--pad);display:grid;gap:14px;max-height:44vh;overflow-y:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
.bubble{margin:0}
.bubble.c{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:700;
  font-size:17px;line-height:1.85}
.bubble.s{background:var(--surface);border-radius:var(--r);padding:12px 14px;
  margin-left:40px;font-size:15px;line-height:1.75}
.bubble.sys{font-size:14px;color:var(--ink-3);text-align:center;line-height:1.8}

/* ── 始める前に（2026-10-21）──────────────────────────────
   設定画面の「次へ」で、ロープレ画面をこの形で開く。時計は 3:00 のまま止まり、話すための帯は出さない。
   お相手とゴールは上の写真と帯に出ているので、ここは経緯・商材・文脈・練習することと、整理を促す問いだけ。
   囲まない（§5）。罫と余白と文字の大小で分ける。「はじめる」で通話と時計が動く */
body.standby #play .talk,body.standby .talkbar,body.standby .listening,body.standby .compose,
body.standby .livebar,body.standby .under{display:none}
/* 読んでいる間は、ページごと流す（ロープレ中の「画面の高さに収める」をやめる）。
   内側だけが動く枠にすると、iPhone では動くことに気づきにくく、下の「はじめる」が見つからない */
body.standby #play{height:auto;min-height:100dvh}
#play .brief{padding:14px var(--pad) calc(16px + env(safe-area-inset-bottom))}
.brief-facts{margin:0}
.brief-facts>div{padding:0 0 12px}
.brief-facts>div+div{border-top:1px solid var(--line);padding-top:10px}
.brief-facts dt{font-size:14px;color:var(--ink-2)}
.brief-facts dd{margin:0;font-size:15px;line-height:1.75;color:var(--ink)}
.brief-think{margin:4px 0 16px}
.brief-label{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--ink)}
.brief-label::before{content:"";display:block;width:34px;height:3px;border-radius:var(--pill);
  background:var(--gold);margin:0 0 10px}
.brief-think ol{margin:0;padding:0;list-style:none;font-size:16px;line-height:1.75}
.brief-think li{margin:0;padding-left:1.2em;text-indent:-1.2em}   /* ①② の2行目を、本文の頭にそろえる */
.brief-note{margin:8px 0 0}

/* 声で話す */
.talkbar{border-top:1px solid var(--line);padding:16px var(--pad) 0;display:grid;gap:14px}
.mic{width:100%;min-height:60px;background:var(--gold);color:var(--on-gold);border:none;
  font-size:18px;font-weight:700;letter-spacing:.22em;text-indent:.22em;border-radius:var(--r)}
.mic:disabled{background:#EDE3CB;color:#8C8778}
.talkbar-sub{display:flex;gap:24px;justify-content:center}

/* 聞いています。囲みは濃紺の面だけ、という決めごとに沿う */
.listening,.livebar{background:var(--navy);color:var(--on-navy);border-radius:var(--r);
  margin:14px var(--pad) 0;padding:16px 18px;display:grid;gap:12px}
.listening-head{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.listening-head .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);
  flex:none;animation:pulse 1.1s ease-in-out infinite}
.livebar .dot{background:var(--on-navy-2)}
.livebar.talking .dot{background:var(--gold)}
.meter{height:8px;border-radius:var(--pill);background:rgba(255,255,255,.18);overflow:hidden}
.meter-bar{height:100%;width:0;background:var(--gold);border-radius:var(--pill);
  transition:width .08s linear}
.meter-bar.speaking{background:#fff}
.heard{margin:0;font-size:15px;line-height:1.7;color:#DCE3F2;min-height:1.5em}
.listening-foot{display:flex;gap:8px}
.listening .ghost,.livebar .ghost{flex:1;background:none;border-color:rgba(255,255,255,.45);
  color:var(--on-navy)}
.listening .ghost:hover,.livebar .ghost:hover{border-color:#fff;color:#fff}
#hold.on,#liveMute.on{background:rgba(255,255,255,.18)}

/* キーボードで入力する */
.compose{padding:16px var(--pad) 0;display:grid;gap:14px}
.compose-side{display:flex;align-items:center;gap:16px}
.compose-side .primary{flex:1;width:auto}
.compose-side .ghost{border:none;text-decoration:underline;text-underline-offset:4px;padding:8px 2px}

/* 下の操作列。3つを等幅で並べず、重さを変える */
.under{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px var(--pad) 0;margin-top:14px;border-top:1px solid var(--line)}
.under #playNote{flex:1 0 100%;order:-1;margin-bottom:6px;
  font-size:14px;line-height:1.7;color:var(--ink-3)}
.under #playNote:empty{display:none}
/* Word で保存・メールで送る・この端末に残す（2026-10-24 夜、高橋さん「文字の色が薄くて目立たないので、ほぼ全てのユーザーが見逃してしまう…ボタンが目立つように」）。
   金の面は「テキストで保存」の1つだけに保ち（主役は1つ）、こちらは枠つきの2番手。横に3つ並べず、幅いっぱいで縦に積む（スタイルガイド「等幅で横並びする3つのボタン」を使わない）。
   並び：金（最後の1枚だけ）→ 枠つき3つ → 案内 → 文字のリンク（振り返りをコピー・もう一度やる） */
.under .ghost.keep-btn{flex:1 0 100%;order:1;border:1px solid var(--line-2);border-radius:4px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:700;min-height:48px;padding:0 16px}
.under .ghost.keep-btn:hover:not(:disabled){border-color:var(--ink-2);color:var(--ink)}
.under #wordMsg{order:2}
#debrief:not(.db-last) .keep-btn,#debrief:not(.db-last) #wordMsg{display:none}
.under #copy,.under #again,.under #download:not(.primary){order:3}
/* 最後の1枚で金になる「テキストで保存」は、行の幅いっぱいで先頭に（横の2つに挟まれて「テキストで／保存」と2行に折れていた） */
.under #download.primary{flex:1 0 100%;order:0}
.under #wordMsg{flex:1 0 100%;margin:0 0 6px;font-size:14px;line-height:1.7;color:var(--ink-3)}
.under #wordMsg:empty{display:none}
.under .ghost{border:none;padding:8px 0;color:var(--ink-3);font-size:14px;min-height:44px}
.under .ghost:hover{color:var(--ink-2)}
#toDebrief,#again{text-decoration:underline;text-underline-offset:4px;color:var(--ink-2)}
.under .primary{flex:1;width:auto;min-height:58px}
.step{font-size:14px;color:var(--ink-3)}
.paused .hero img{filter:saturate(.25) brightness(.52);animation:none;
  transition:filter var(--t-slow) var(--e-in)}
.paused .timer{color:var(--on-navy-3)}
.paused .talk{opacity:.45}

/* ── 振り返り ──────────────────────────────────────── */
/* 縦組みで「振り返り」。商談中から切り替わったことを、写真の上で示す */
.switch-note{top:18px;right:22px;writing-mode:vertical-rl;
  font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  font-size:22px;letter-spacing:.22em;color:var(--on-navy);
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
#debrief .hero::before{display:none}
#debrief .hero::after{height:110px}
.db-meta{font-size:14px;color:var(--ink-3);margin:12px var(--pad) 0;text-align:right}
.db h3{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  font-size:22px;letter-spacing:.06em;line-height:1.6;margin:0 0 18px}
.db .item{margin:0 0 26px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.db .item:last-child{border-bottom:none;padding-bottom:0}
/* ラベルは小さく上に。囲みも縦罫も使わない */
.db .tag{display:block;margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.16em;
  background:none;padding:0}
.tag.good{color:var(--gold-ink)}
.tag.more{color:var(--ink-2)}
/* お客様の言葉。この画面の主役 */
.db .quote{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  font-size:22px;line-height:1.8;letter-spacing:.02em;color:var(--ink);
  border:none;padding:0;margin:0 0 12px}
.db .why{font-size:15px;line-height:1.9;color:var(--ink-2);margin:0 0 6px}
.db .why b{color:var(--ink)}
/* 「なるほど」。SNS のいいねと同じで、押すだけ。絵文字は使わない */
.like{margin-top:14px;min-height:44px;padding:0 20px;background:none;
  border:1px solid var(--line-2);color:var(--ink-2);border-radius:var(--pill);
  font-size:14px;letter-spacing:.08em}
.like:hover{border-color:var(--navy);color:var(--navy)}
.like.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.db .item.picked{background:none;padding:0 0 26px;margin:0 0 26px}
.pick-note{color:var(--ink-2)}
/* レベル。数字は主役にしない。主役は「次のレベルに上がるには」 */
.db .level{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  font-size:42px;line-height:1;color:var(--navy)}
.db .level small{font-size:15px;color:var(--ink-2);font-weight:400}
.db .na{font-size:17px;color:var(--ink-2)}
.goal-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.badge{font-size:15px;color:var(--ink-2)}
.badge.ok{color:var(--gold-ink);font-weight:700}
/* 『無敗営業』に照らすと。書影の隣。囲まず、上に細罫を1本 */
.db .book{background:none;border:none;border-top:1px solid var(--line);
  border-radius:0;padding:22px 0 0;margin:24px 0 0}
.db .book .why:first-child b{font-family:var(--f-m);font-weight:700;color:var(--ink)}
.setting{margin:0 0 22px;font-size:15px}
.setting summary{cursor:pointer;color:var(--ink-2)}
.setting .why{margin:8px 0 0}
.ask{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.ask input{flex:1}
.ask .primary{width:auto;min-height:52px;padding:0 22px;font-size:16px;letter-spacing:.1em;text-indent:.1em}
.examples{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.examples button{min-height:44px;padding:0 18px;background:none;
  border:1px solid var(--line-2);color:var(--ink);border-radius:var(--pill);font-size:15px}
.examples button:hover{border-color:var(--navy)}
/* 振り返りを待つあいだの自己評価（改善②、2026-09-30）。段は場面の一覧と同じ罫の行（.pick）を1行に詰め、
   ゴールの数はチップ。選ばれたものは、ほかの選択と同じ濃紺 */
.self .q{margin:18px 0 8px}
.self-lv{margin-bottom:6px}
.self-lv .pick{padding:11px var(--pad);min-height:44px}
.self-lv .pick b{display:inline;font-size:16px;margin-right:12px}
.self-lv .pick span{display:inline;margin:0}
.self-hits{margin-top:0}
.self-vs{margin:6px 0 10px}
.convo-head{font-family:var(--f-m);font-weight:700;font-size:17px;
  margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.db .convo,.convo{max-height:44vh;overflow-y:auto;margin-top:12px;border:none;padding-top:0}
.convo .line{margin:0 0 8px;font-size:15px;line-height:1.8}
.convo .line b{display:inline-block;min-width:3.5em;color:var(--ink-3);font-weight:400}
.convo .line.sales b{color:var(--navy)}
/* 保存のうながし。囲まず、罫1本で区切って、すぐ下にボタンを置く */
.keep{background:none;border:none;border-top:1px solid var(--line);border-radius:0;
  padding:22px 0 0;margin:26px 0 0}
.keep p{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.7}
.keep p + p{font-size:15px;font-weight:400;color:var(--ink-2);line-height:1.8}
.keep p:last-child{margin-bottom:0}
.keep-what{color:var(--ink-2);font-size:14px !important;font-weight:400 !important;line-height:1.9 !important}
#note{width:100%}

/* ── 入口・管理者モード ───────────────────────────────── */
/* コードは口頭でも伝える。1文字ずつ確かめられるように組む */
.code{font-family:var(--f-m);font-feature-settings:"palt" 1;font-weight:900;
  font-size:30px;letter-spacing:.34em;text-indent:.34em}
#codeInput,#adminCodeInput,#newCode{font-size:22px;font-weight:700;letter-spacing:.4em;text-indent:.4em}
#issued{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
#issued p{margin:0 0 8px}
#issued p:last-child{font-size:15px;color:var(--ink-2)}
.q{font-size:16px;margin:0 0 8px;font-weight:700}
#adminQs .field{margin-bottom:22px}
.qopts{margin-bottom:10px}
.qopts button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
/* 2段目（大分類を押すと出る中身）。1段目と区別がつくよう、内側に寄せる */
/* 2段目は、押した大分類の直下に来るよう、1段目の中で行を独占する（2026-09-20 ご指摘） */
.qsub{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;
  margin:2px 0 10px 14px;padding-left:12px;border-left:1px solid var(--line)}
/* 「いったんお任せ」。選ぶ候補ではなく“預ける”ボタンなので、点線で区別する */
.qopts .omakase{border-style:dashed;color:var(--ink-2)}
.qopts .omakase[aria-pressed=true]{background:var(--ink-2);border-style:solid;
  color:#fff;border-color:var(--ink-2)}
.admin-mic{display:flex;gap:12px;align-items:center;margin-top:10px}
/* 長い文の欄の「声で入力する」（2026-10-27、DECISIONS §6.99）。欄（label）のすぐ下に寄せる（.field の下の余白に入り込む） */
.field + .field-mic{margin:-12px 0 22px}
.field-mic .hint{font-size:13px;line-height:1.6}
/* 聞き取りの例は一文が長い。チップに丸めると読みにくいので、罫で区切った行にする */
#adminExamples{display:block;margin:0 0 20px;border-top:1px solid var(--line)}
#adminExamples button{display:block;width:100%;text-align:left;background:none;
  border:none;border-bottom:1px solid var(--line);border-radius:0;
  padding:15px 0;min-height:44px;font-size:15px;line-height:1.8;color:var(--ink)}
#adminExamples button:hover{background:#F7F8FA}
.kpi>span{margin-bottom:10px}
/* 読み上げだけに届く文字（画面には出さない） */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* TORiX への導線。決めごとの原本は muhaieigyo-top/DECISIONS.md §6.4。
   売り込みにしないため、囲まず・色を足さず・罫1本の下に本文より静かに置く。
   外すときは、この規則と index.html の <p class="offer"> を消すだけでよい */
.offer{margin:0;padding:24px var(--pad) 0;font-size:14px;line-height:1.9;color:var(--ink-2)}
.offer::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:18px}
.offer a{color:var(--navy);text-decoration:underline;text-underline-offset:4px;
  white-space:nowrap}   /* 社名と矢印を離さない。矢印だけが次の行へ落ちるのを防ぐ */
.offer a:hover{color:var(--navy-line)}
.offer .ext{vertical-align:-1px;margin-left:5px}

/* フィードバックの窓口。原本は 仕様-フィードバック窓口.md。
   導線と同じ扱い。囲まず・色を足さず・罫1本の下に静かに置く。
   終わりの画面では TORiX 導線のすぐ下に並ぶので、罫は1本だけにする */
.fb{padding:24px var(--pad) 0}
.fb:empty{display:none}   /* 窓口を出さないとき、罫だけが残らないように */
.fb::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:18px}
.offer + .fb{padding-top:10px}
.offer + .fb::before{display:none}
.fb-line{margin:0}
.fb-form{display:grid;gap:14px}
.fb-note{margin:0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.fb-err{margin:0;font-size:15px;line-height:1.8;color:var(--error)}
.fb-foot{display:flex;align-items:center;gap:16px}
.fb-foot .fb-send{flex:1;width:auto;min-height:52px;font-size:16px;
  letter-spacing:.12em;text-indent:.12em}
.fb-thanks{margin:0;font-size:15px;line-height:1.9;color:var(--ink-2)}

/* 商標。入口に一度だけ */
.tm{margin:0;padding:26px var(--pad) 0;font-size:14px;line-height:1.8;color:var(--ink-3)}
.tm::before{content:"";display:block;width:40px;height:2px;background:var(--gold);margin-bottom:16px}

/* ── 振り返りの比べ比べ（試験。手元だけで出る）───────────── */
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:960px){.cmp-grid{grid-template-columns:1fr}}
.cmp-card{margin-bottom:0}
.cmp-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.cmp-head b{font-family:var(--f-m);font-size:26px;color:var(--navy)}
.cmp-who{font-size:14px;color:var(--gold-ink);font-weight:700}
.rate{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:15px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.rate label,.best label{display:inline-flex;gap:5px;align-items:center}
.rate input[type=radio],.best input[type=radio]{width:auto;min-height:0}
.rate-note{width:100%;margin-top:8px}
.best{display:flex;gap:16px;align-items:center;margin-bottom:14px;font-size:15px}
.cmp-table{border-collapse:collapse;width:100%;margin-top:16px;font-size:15px}
.cmp-table th,.cmp-table td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left}
.verdict{font-weight:700}
.verdict.ok{color:var(--gold-ink)}
.verdict.ng{color:var(--error)}

/* ── 動き ────────────────────────────────────────── */
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.006)}}
@keyframes talk{
  0%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-2.5px) rotate(-.25deg)}
  60%{transform:translateY(1px) rotate(.2deg)}
  100%{transform:translateY(0) rotate(0)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
/* 呼吸・うなずき・明滅・線は止める。状態の切り替えは残す（止めると何が起きたか分からなくなる） */
@media (prefers-reduced-motion:reduce){
  .hero img,.listening-head .dot{animation:none !important}
  .hero-time i{transition:none}
}

/* ── 携帯（2026-09-20、高橋さんが実機で試すため）─────────── */
/* 使った額。管理者だけが見る1行。ふだんは目立たせず、上限に近いときだけ色を持たせる */

/* 管理者からのメッセージ。箇条書きの改行を、そのまま見せる */
.msg{white-space:pre-wrap;margin:0 0 14px;font-size:15px;line-height:1.95}

/* 振り返りを作っている間の進み具合。砂時計は置かず、残り時間と同じ「金の細い線」で表す
   （2026-09-20、高橋さんのご指摘。画面の語彙を揃える） */
.thinking{height:3px;border-radius:var(--pill);background:var(--line);overflow:hidden;margin:2px 0 14px}
.thinking i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s linear}
/* 振り返りが届かなかったとき（つながりの切れ。2026-10-27）。文と「振り返りを読み込み直す」を、待つ画面のいちばん上に */
.db-retry{margin:0 0 22px}
.db-retry .err{margin:0 0 12px}
/* 待ちが長いとき（45秒）だけ、待つ画面に出す。止まったように見えるとき、自分で読み直せるように */
.db-slow{font-size:14px;line-height:1.8;color:var(--ink-2);margin:8px 0 14px}
.db-slow[hidden]{display:none}
.db-slow button{display:block;margin-top:8px}

/* お客様の第一声を待っている間。金の点は「あなたの番」の合図なので、ここでは灯さない */
.livebar.waiting .dot{background:var(--on-navy-3);animation:none}

/* 会話が始まったら、使い方の案内は畳む（状態とメーターとボタンだけ残す）。
   一度読めば足りる案内に、画面の大半を使わない。2026-09-20、高橋さんのご指摘 */
.livebar.lean .heard{display:none}
body.inchat #playNote{display:none}

/* 375px では、ロゴタイプ＋モード名が1行に収まらず折れていた（2026-09-21 実機幅で発見）。
   3つとも消さずに、文字を詰めて収める */
@media (max-width:420px){
  .band{gap:10px;padding:14px 16px}
  .band-title{font-size:18px}
  .band-title::after{margin-left:10px}
  .band-sub{letter-spacing:.1em;text-indent:.1em}
}

@media (max-width:560px){
  /* 写真は臨場感の要なので残すが、**画面の4割を占めない**ところまで下げる。
     顔の位置（object-position 30% 30%）のおかげで、低い箱でも顔は切れない。2026-09-20 ご指摘 */
  .hero{height:25vh;min-height:172px;max-height:220px}
  /* ゴールの帯も少し詰める。ここが厚いと、会話の居場所がなくなる */
  .goalbar{padding:9px var(--pad)}
  .goalbar .goal-label{font-size:14px;margin-bottom:2px}
  .hud-goal{font-size:14px;line-height:1.5}
  .hud-tags{margin-top:6px;gap:6px}
  .tagline{font-size:14px;padding:1px 10px}
  /* つないでいる間のバーも詰める。案内文は .lean で畳まれる */
  .listening,.livebar{margin-top:10px;padding:12px 14px;gap:9px}
  /* 会話中は1行に畳む：左に状態、右に「マイクを止める」、その下に細いメーター */
  /* 左の列は文の長さで広がらない（minmax(0,…)）。長い文は「…」で切り、右のボタンを押しつぶさない
     （10/3 要望030：「お客様が考えています（裏で GPT-6 Astra）…」がボタンを細くし、文字が縦に並んで帯が縦に伸びた） */
  .livebar.lean{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:10px 12px;align-items:center}
  .livebar.lean .listening-head{grid-column:1;grid-row:1;white-space:nowrap;font-size:14px;min-width:0}
  .livebar.lean #liveNote{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .livebar.lean .listening-foot{grid-column:2;grid-row:1;justify-self:end}
  .livebar.lean .meter{grid-column:1/-1;grid-row:2;height:4px}
  .livebar.lean .listening-foot .ghost{padding:6px 12px;font-size:14px;white-space:nowrap}
  .talk{padding-top:12px;padding-bottom:12px;gap:12px}
  /* つないでいる間のバーは下に貼りつけておく。
     どこまでスクロールしていても、状態と「マイクを止める」が押せる */
  .livebar{position:sticky;bottom:8px}
  .row{flex-direction:column;gap:0}
  .mode-line{flex-wrap:wrap;gap:6px 12px}
  .mode-line .link{white-space:nowrap}
}