/* =============================================================================
   とここと録音帳 — Components
   とここと手帳（misawa-techo）の site/assets/css/app.css と同じ骨格。
   白地・黒細枠カード・直角寄り・字間ひろめ・銀杏イエローのアクセント。
   絵文字は使わず、線画SVG（Tabler Icons / MIT）をインラインで置く。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: var(--fs-body); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--ginkgo-soft); color: var(--ink); }

.ic { width: 1.15em; height: 1.15em; stroke-width: 1.8; vertical-align: -0.22em; flex: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-6); }
.section.tight { padding-block: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }
.muted { color: var(--text-tertiary); }
.small { font-size: var(--fs-caption); }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink);
}
.site-header .inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px var(--space-4);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; flex: none; }
.brand:hover { text-decoration: none; }
.brand .leaf { width: 30px; height: 30px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-family: var(--font-logo); font-size: 17px; font-weight: 700; letter-spacing: var(--ls-mid); white-space: nowrap; }
.brand-text small { font-size: 10px; color: var(--text-tertiary); letter-spacing: var(--ls-wide); }
.header-nav { display: flex; gap: 2px; align-items: center; }
.header-nav .nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: var(--ls-mid);
  color: var(--ink-soft); border-radius: var(--radius-md); background: none; border: 0;
}
.header-nav .nav-item:hover { background: var(--bg-neutral); text-decoration: none; color: var(--ink); }
.header-nav .nav-item.active { font-weight: 700; color: var(--ink); }
/* ナビが5つあるので、ラベルを畳む幅を早めに取る。
   畳まないと「録 音」のように2行に割れて読めなくなる。 */
.header-nav .nav-item { white-space: nowrap; }
/* ラベルは常時表示。幅が足りない領域（720px以下）は下部ナビに切り替わる */
@media (max-width: 1180px) { .header-nav .nav-item { padding: 7px 10px; } }
@media (max-width: 380px) { .brand-text small { display: none; } .header-nav { gap: 0; } }

/* ヘッダー直下の入口（最終レポートのページへ。2026-09-15）。帯全体が押せる */
.report-strip { display: block; background: var(--ginkgo-wash); border-bottom: 1px solid var(--ginkgo-deep); color: inherit; }
.report-strip:hover { text-decoration: none; background: var(--ginkgo-soft); }
.report-strip .inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 10px; padding: 10px var(--space-4);
}
.report-strip .rs-tag {
  flex: none; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid); white-space: nowrap;
  background: var(--ginkgo-deep); color: #fff; border-radius: var(--radius-full); padding: 2px 10px;
}
.report-strip b { min-width: 0; font-size: var(--fs-sm); letter-spacing: var(--ls-mid); }
.report-strip .rs-admin {
  flex: none; font-size: 10px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap;
  border: 1px dashed var(--text-tertiary); border-radius: var(--radius-sm); padding: 0 6px;
}
.report-strip .rs-go { flex: none; margin-left: auto; display: inline-flex; color: var(--ginkgo-deep); transform: rotate(-90deg); }
@media (max-width: 520px) { .report-strip .rs-tag { display: none; } }

/* まるごとコピーが1つのソースに入りきらないときの「その1・その2…」（common.js の handoffButtons。2026-09-15） */
.bparts { margin-top: 12px; }
.bparts-lead { margin-bottom: 8px; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.7; }
.bparts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bparts-list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 6px 8px 6px 10px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
.bparts-list .pn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.bparts-list .pd b { display: block; font-size: var(--fs-caption); letter-spacing: var(--ls-mid); }
.bparts-list .pd span { display: block; font-size: var(--fs-micro); color: var(--text-tertiary); line-height: 1.6; font-variant-numeric: tabular-nums; }
.bparts-list .dl { padding: 7px 9px; }
.bparts-list li.done { background: var(--good-bg); border-color: var(--good); }
.bparts-list li.done .pn { background: var(--good); border-color: var(--good); color: #fff; }
.bparts-list li.done .btn-ginkgo { background: var(--paper); border-color: var(--good); color: var(--good); }

/* ---------- Card ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card.soft { border-color: var(--border-default); }
.card + .card { margin-top: var(--space-3); }

.sec-title {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-mid);
  margin-bottom: var(--space-4);
}
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--ink); transform: translateY(-4px); }
.sec-title .en { font-size: var(--fs-micro); font-weight: 500; color: var(--text-tertiary); letter-spacing: .14em; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid);
  padding: 2px 9px; border-radius: var(--radius-sm); line-height: 1.7; white-space: nowrap;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
}
.badge.ginkgo { background: var(--ginkgo-soft); border-color: var(--ginkgo-deep); color: #7a5a08; }
.badge.soft { border-color: var(--border-default); color: var(--text-secondary); }
.badge.good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.badge.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.badge.risk { background: var(--risk-bg); border-color: var(--risk); color: var(--risk); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-wide);
  border: 1px solid var(--ink); cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #000; }
.btn-line { background: var(--paper); color: var(--ink); }
.btn-line:hover:not(:disabled) { background: var(--bg-neutral); }
.btn-ginkgo { background: var(--ginkgo); border-color: var(--ginkgo-deep); color: #3a2d05; }
.btn-ginkgo:hover:not(:disabled) { background: var(--ginkgo-deep); color: #fff; }
.btn.sm { padding: 7px 13px; font-size: var(--fs-caption); }
.btn.block { width: 100%; }

/* ---------- Form ---------- */
.field { display: block; }
.field > .lb {
  display: block; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: var(--ls-mid); color: var(--text-secondary); margin-bottom: 5px;
}
.input, .textarea, .select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); line-height: 1.6;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink); outline: none; }
.textarea { min-height: 72px; resize: vertical; }
.input.code {
  font-size: 26px; font-weight: 700; letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: .5em;
}
.hint { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 6px; line-height: 1.7; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--ink); }

/* ---------- 通知 ---------- */
.notice {
  border: 1px solid var(--border-default); border-left: 3px solid var(--ink);
  background: var(--bg-subtle); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.8;
}
.notice.err { border-left-color: var(--risk); background: var(--risk-bg); color: #8c2318; }
.notice.ok { border-left-color: var(--good); background: var(--good-bg); color: #1d5c2c; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-mid);
  z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* ---------- 録音 ---------- */
.rec-panel { text-align: center; padding-block: var(--space-6); }
.rec-btn {
  width: 132px; height: 132px; border-radius: var(--radius-full);
  border: 2px solid var(--ink); background: var(--paper);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-wide);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rec-btn .ic { width: 38px; height: 38px; stroke-width: 1.5; }
.rec-btn:hover:not(:disabled) { background: var(--bg-neutral); }
.rec-btn.on { background: var(--risk); border-color: var(--risk); color: #fff; animation: pulse 2s infinite; }
.rec-btn.on:hover { background: #a8342a; }
.rec-btn:disabled { opacity: .4; cursor: not-allowed; animation: none; }
/* 下から「上のボタンへ」で連れてきたときに、どれを押すのかを光らせて示す */
.rec-btn.callout { box-shadow: 0 0 0 8px var(--ginkgo-soft); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.34); } 50% { box-shadow: 0 0 0 14px rgba(192,57,43,0); } }
@media (prefers-reduced-motion: reduce) { .rec-btn.on { animation: none; } }

.rec-time {
  font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .04em; line-height: 1.2; margin-top: var(--space-4);
}
.rec-state { font-size: var(--fs-caption); color: var(--text-tertiary); letter-spacing: var(--ls-wide); }
.level { height: 5px; background: var(--bg-neutral); border-radius: var(--radius-full); overflow: hidden; margin: var(--space-3) auto 0; max-width: 260px; }
.level > i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .08s linear; }

.bar { height: 6px; background: var(--bg-neutral); border-radius: var(--radius-full); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--ginkgo-deep); transition: width .2s var(--ease); }

/* ---------- 録音中の「ちゃんと録れている」表示 ---------- */
.mic-status { margin-top: var(--space-3); }
.mic-line {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex-wrap: wrap; margin-top: var(--space-2);
}
.mic-line .badge.risk { animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mic-line .badge.risk { animation: none; } }

/* ---------- 停止後の段階表示 ---------- */
.steps { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.steps li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--space-2);
  padding: 11px 2px; border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--text-disabled);
}
.steps li .mark {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-default); position: relative;
}
.steps li .sub { font-size: var(--fs-caption); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.steps li.doing { color: var(--text-primary); font-weight: 700; }
.steps li.doing .mark { border-color: var(--ink); border-top-color: transparent; animation: spin .9s linear infinite; }
.steps li.done { color: var(--text-secondary); }
.steps li.done .mark { border-color: var(--good); background: var(--good); }
.steps li.done .mark::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.steps li.failed { color: var(--risk); font-weight: 700; }
.steps li.failed .mark { border-color: var(--risk); background: var(--risk); }
.steps li.failed .mark::after {
  content: "!"; position: absolute; inset: 0; color: #fff; font-size: 12px;
  font-weight: 700; line-height: 15px; text-align: center;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.doing .mark { animation: none; border-top-color: var(--ink); } }

/* ---------- 「問題なく記録できています」 ---------- */
.assured {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--good); background: var(--good-bg); border-radius: var(--radius-md);
}
.assured-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-mid); color: #1d5c2c;
}
.assured-head .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.assured-body { margin-top: 6px; font-size: var(--fs-sm); color: #245c33; line-height: 1.9; }

/* ---------- 録音を失わないために ----------
   録音ボタンのすぐ下に、常に出しておく注意書き。
   「読ませたい情報を折りたたむと読まれない」ので開閉はしない。かわりに
   地をうすく・字を小さく・色は印だけに絞って、画面の主役（録音ボタン）を食わないようにする。 */
.caution {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.caution-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-mid);
}
.caution-head::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.caution-head .en {
  font-size: var(--fs-micro); font-weight: 500; color: var(--text-tertiary); letter-spacing: .14em;
}
.caution-lead {
  margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.9; color: var(--text-secondary);
}
.caution-lead b { color: var(--text-primary); }
.caution-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 13px; }
/* gap を1つで書くと見出しと説明のあいだ（行間）にも効いて間延びする。列だけ空ける。 */
.caution-list li { display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; row-gap: 0; align-items: start; }
.caution-list li::before {
  content: "✕"; color: var(--risk);
  font-size: 12px; font-weight: 700; line-height: 1.7; text-align: center;
}
.caution-list li.ok::before { content: "○"; color: var(--good); }
/* 見出し(b)と説明(span)は、印(::before)の右の列に縦に積む。
   grid-column を指定しないと span が印の列（16px）へ回り込み、字が縦一列に潰れる。 */
.caution-list > li > b {
  grid-column: 2; display: block; font-size: var(--fs-sm); letter-spacing: var(--ls-mid);
}
.caution-list li.ok > b { color: var(--good); }
.caution-list > li > span {
  grid-column: 2; display: block; margin-top: 3px;
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.8;
}
/* 説明文の中の強調は行のなかに置く（上の b の display:block を引き継がせない） */
.caution-list > li > span b { display: inline; font-size: inherit; color: var(--text-primary); }
.caution .hint {
  margin-top: var(--space-3); padding-top: 10px; border-top: 1px dashed var(--border-subtle);
}
@media (max-width: 520px) {
  .caution { padding: var(--space-4); }
}

/* ---------- 困ったときの案内 ---------- */
.trouble {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--risk); border-radius: var(--radius-md); background: var(--risk-bg);
}
.trouble h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-mid); color: #8c2318; }
.trouble p { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.9; }
.trouble ol { margin: var(--space-3) 0 0; padding-left: 1.4em; list-style: decimal; }
.trouble ol li { font-size: var(--fs-sm); line-height: 1.9; margin-bottom: 6px; }
.trouble .keep {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 700;
}
.trouble .keep.ok { background: var(--good-bg); color: #1d5c2c; border: 1px solid var(--good); }
.trouble .keep.warn { background: var(--ginkgo-wash); color: #7a5a08; border: 1px solid var(--ginkgo-deep); }
.trouble .small { margin-top: var(--space-3); }

/* ---------- 書き起こし ---------- */
.transcript {
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: var(--space-4); font-size: var(--fs-sm); line-height: 2;
  max-height: 52vh; overflow-y: auto;
}

/* ---------- 一覧 ---------- */
.note-list > li + li { margin-top: var(--space-3); }
.note-row {
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4);
}
.note-row.open { border-color: var(--ink); }
.note-row .head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.note-row h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); line-height: 1.6; }
.note-row .meta { font-size: var(--fs-caption); color: var(--text-tertiary); letter-spacing: var(--ls-mid); }
.note-row .body { margin-top: var(--space-4); }

.empty { text-align: center; padding: var(--space-10) var(--space-4); color: var(--text-tertiary); font-size: var(--fs-sm); }

/* ---------- 表（管理） ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--paper); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
table.tbl th { background: var(--bg-subtle); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-mid); color: var(--text-secondary); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.wrap { white-space: normal; min-width: 200px; }
.tbl .mini {
  width: 84px; padding: 5px 8px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); font-size: var(--fs-caption);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.stat {
  background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.stat .k { font-size: var(--fs-micro); color: var(--text-tertiary); letter-spacing: var(--ls-wide); }
.stat .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; }
.stat .v small { font-size: var(--fs-caption); font-weight: 500; color: var(--text-tertiary); margin-left: 3px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.tabs button {
  padding: 7px 14px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-mid);
  border: 1px solid var(--border-default); background: var(--paper); color: var(--text-secondary);
  border-radius: var(--radius-full);
}
.tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--ink); background: var(--paper);
  margin-top: var(--space-10); padding: var(--space-6) 0;
  font-size: var(--fs-caption); color: var(--text-tertiary); line-height: 1.9;
}

/* =============================================================================
   記録アシスタント（みさわ小 キャラクター素材集より）
   線画だけの画面が事務的になりすぎないよう、要所に小さく置く。
   置き方の約束:
     ・情報の邪魔をしない（pointer-events は殺す・文字に重ねない）
     ・1画面に多くて2体。並べると散らかる
     ・「うまくいった」「困った」など、状態が変わる場所にだけ出す
   ========================================================================== */
.chara { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.chara img { display: block; width: 100%; height: auto; }

/* 録音ボタンの後ろからのぞく */
.rec-btn-wrap { position: relative; display: inline-block; }
.rec-btn-wrap .rec-btn { position: relative; z-index: 1; }
.chara-peek { right: -46px; bottom: -2px; width: 76px; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 420px) { .chara-peek { right: -34px; width: 60px; } }

/* ログインの箱 */
.login-card { position: relative; padding-bottom: 74px; }
.chara-hello { right: 14px; bottom: -2px; width: 82px; }

/* 「問題なく記録できています」 */
.assured { position: relative; padding-right: 96px; }
.chara-ok { right: 10px; bottom: 4px; width: 78px; }
@media (max-width: 420px) { .assured { padding-right: 74px; } .chara-ok { width: 62px; } }

/* 困ったときの案内 */
.trouble { position: relative; }
.chara-oops { right: 12px; top: -14px; width: 62px; }
@media (max-width: 520px) { .chara-oops { width: 48px; right: 6px; } }

/* 書き起こしができた */
.result-head { position: relative; }
/* キャラの上を見出しの罫線が横切らないよう、線をキャラの手前で止める */
.result-head .sec-title::after { margin-right: 74px; }
.chara-yay { right: 0; top: -34px; width: 66px; z-index: 2; }

/* まとめて NotebookLM へ */
.bundle-card { position: relative; padding-right: 104px; }
.chara-note { right: 12px; bottom: 8px; width: 84px; }
@media (max-width: 560px) { .bundle-card { padding-right: var(--space-5); } .chara-note { display: block; position: static; width: 76px; margin: 10px 0 0 auto; } }

/* 記録がまだ無いとき */
.empty .chara-sleep { display: block; position: static; width: 130px; margin: 0 auto 10px; }  /* 絵が横長になったぶん広げて、見た目の大きさをそろえる（2026-08-14 差し替え） */

/* チームの進み具合 */
.teams-head { position: relative; }
.chara-team { right: 0; top: -20px; width: 92px; }
@media (max-width: 560px) { .chara-team { display: none; } }

@media (prefers-reduced-motion: reduce) { .chara-peek { animation: none; } }

/* =============================================================================
   使い方ページとプロンプト
   ========================================================================== */

.guide-hero { position: relative; padding-right: 120px; }
.guide-h1 {
  font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--ls-mid);
  line-height: 1.5; margin-bottom: 10px;
}
.chara-guide { right: 14px; bottom: 6px; width: 96px; }
@media (max-width: 520px) {
  /* static に落とすと DOM 順で本文の上に単独で浮いてしまう。
     位置は右上に固定したまま、本文側に逃げ幅を取る。 */
  .guide-hero { padding-right: 88px; }
  .chara-guide { width: 72px; right: 10px; bottom: auto; top: 14px; }
}

/* 手順（番号つき） */
.howto { counter-reset: howto; }
.howto > li {
  position: relative; counter-increment: howto;
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-4) 62px;
}
.howto > li + li { margin-top: var(--space-3); }
.howto > li::before {
  content: counter(howto);
  position: absolute; left: 18px; top: var(--space-4);
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--ink); color: #fff;
  font-size: var(--fs-caption); font-weight: 700; line-height: 28px; text-align: center;
}
.howto h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); line-height: 1.6; }
.howto p { margin-top: 5px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.9; }

/* よくあるつまずき */
.faq { border-top: 1px solid var(--border-default); }
.faq dt {
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--ls-mid);
  padding: var(--space-4) 0 0;
}
.faq dd {
  margin: 6px 0 0; padding: 0 0 var(--space-4);
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.9;
  border-bottom: 1px solid var(--border-subtle);
}

/* プロンプト */
.prompt {
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.prompt + .prompt { margin-top: var(--space-3); }
.prompt[open] { border-color: var(--ink); }
.prompt > summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;
  align-items: center; cursor: pointer; list-style: none;
}
.prompt > summary::-webkit-details-marker { display: none; }
.prompt .step {
  grid-row: 1; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid);
  color: #7a5a08; background: var(--ginkgo-soft); border: 1px solid var(--ginkgo-deep);
  border-radius: var(--radius-sm); padding: 1px 8px; white-space: nowrap;
}
.prompt .ttl { grid-row: 1; font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); }
.prompt .chev { grid-row: 1; grid-column: 3; color: var(--text-tertiary); transition: transform var(--dur) var(--ease); }
.prompt[open] .chev { transform: rotate(180deg); }
.prompt .lead {
  grid-row: 2; grid-column: 1 / -1;
  font-size: var(--fs-caption); color: var(--text-tertiary); line-height: 1.8;
}
.prompt-body {
  margin: var(--space-4) 0 0; padding: var(--space-4);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.95;
  white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow-y: auto;
}
@media (max-width: 520px) {
  .prompt > summary { grid-template-columns: 1fr auto; }
  .prompt .step { grid-row: 1; grid-column: 1; justify-self: start; }
  .prompt .ttl { grid-row: 2; grid-column: 1 / -1; }
  .prompt .lead { grid-row: 3; }
}

/* =============================================================================
   はじめの設定ページ（/start）
   大学1〜2年生が読む前提。文字の塊を作らず、図・表・カードで区切る。
   ========================================================================== */

.eyebrow {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em;
  color: var(--text-tertiary); margin-bottom: 8px;
}
.sub-h {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-mid);
  margin: var(--space-6) 0 var(--space-3); padding-left: 12px;
  border-left: 3px solid var(--ginkgo-deep);
}

/* ---------- これをやるとどうなるか ---------- */
.why-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-3); }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-md);
  padding: var(--space-5);
}
.why-card h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-mid); margin: 10px 0 8px; }
.why-card p { font-size: var(--fs-sm); line-height: 1.95; color: var(--text-secondary); }
.why-tag {
  display: inline-block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid);
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--ink); color: #fff;
}
.why-tag.alt { background: var(--ginkgo); color: #3a2d05; }

.stack-chart { margin-top: var(--space-4); }
.stack-chart svg { width: 100%; height: auto; display: block; }
.stack-chart .bars rect { fill: var(--ginkgo); }
.stack-chart .bars rect:last-child { fill: var(--ginkgo-deep); }
.stack-chart .lbl text { font-size: 13px; fill: var(--text-tertiary); font-weight: 700; }
.stack-chart .cap text { font-size: 13px; fill: var(--ink); font-weight: 700; }

ul.tick > li {
  position: relative; padding-left: 26px; font-size: var(--fs-sm); line-height: 1.75;
}
ul.tick > li + li { margin-top: 12px; }
ul.tick > li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 6px; height: 11px; border: solid var(--ginkgo-deep);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
ul.tick > li span { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); line-height: 1.7; }

/* ---------- スクリーンショット ---------- */
.shot { margin-top: var(--space-3); }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--paper);
}
.shot figcaption {
  margin-top: 8px; font-size: var(--fs-caption); color: var(--text-tertiary); text-align: center;
}
.shot.narrow img { max-width: 300px; margin-inline: auto; }
/* 小さなUI部品のスクショを等倍以上に伸ばさない（拡大すると粗が目立つ） */
.shot.sm img { max-width: 420px; margin-inline: auto; }

/* ---------- 比較表 ---------- */
table.tbl.compare td, table.tbl.compare th { white-space: normal; vertical-align: top; line-height: 1.8; }
table.tbl.compare td:first-child { white-space: nowrap; }

/* ---------- Studio ---------- */
.studio-wrap { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .studio-wrap { grid-template-columns: 1fr; } }
.studio-list > li {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px var(--space-4); background: var(--paper); font-size: var(--fs-sm);
}
.studio-list > li + li { margin-top: 8px; }
.studio-list > li span { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 3px; line-height: 1.7; }

/* ---------- 手順（画像つき） ---------- */
.setup-steps { counter-reset: setup; }
.setup-steps > li {
  counter-increment: setup; position: relative;
  background: var(--paper); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-5) 66px;
}
.setup-steps > li + li { margin-top: var(--space-3); }
.setup-steps > li::before {
  content: counter(setup);
  position: absolute; left: 18px; top: var(--space-5);
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--ginkgo); color: #3a2d05; border: 1px solid var(--ginkgo-deep);
  font-size: var(--fs-sm); font-weight: 700; line-height: 31px; text-align: center;
}
.setup-steps h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); }
.setup-steps p { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.95; }
.setup-steps .btn { margin-top: 12px; }
.setup-steps .shot { margin-top: var(--space-4); }
@media (max-width: 520px) {
  .setup-steps > li { padding: var(--space-5) var(--space-4) var(--space-4) var(--space-4); }
  .setup-steps > li::before { position: static; display: inline-block; margin-bottom: 8px; }
}

/* 設定用プロンプトは常時開き */
.prompt.open-fixed .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prompt.open-fixed .lead { margin-top: 6px; font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---------- 予告 ---------- */
.teaser {
  position: relative; margin-top: var(--space-8);
  border: 1.5px solid var(--ink); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ginkgo-wash), var(--paper) 62%);
  padding: var(--space-6) var(--space-6) var(--space-6);
  padding-right: 150px;
}
.teaser h2 {
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-mid);
  line-height: 1.5; margin-bottom: 12px;
}
.teaser p { font-size: var(--fs-sm); line-height: 1.95; color: var(--text-secondary); }
.teaser p + p { margin-top: 10px; }
.chara-teaser { right: 16px; bottom: 12px; width: 118px; }
@media (max-width: 620px) {
  .teaser { padding-right: var(--space-5); }
  .chara-teaser { display: block; position: static; width: 96px; margin: 14px 0 0 auto; }
}

/* 使い方ページの冒頭：はじめての人を設定ページへ送る */
.first-time {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  background: var(--ginkgo-wash); border: 1.5px solid var(--ginkgo-deep); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); color: inherit;
}
.first-time:hover { text-decoration: none; background: var(--ginkgo-soft); }
.ft-tag {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid); white-space: nowrap;
  background: var(--ginkgo-deep); color: #fff; border-radius: var(--radius-full); padding: 3px 11px;
}
.ft-body b { display: block; font-size: var(--fs-sm); letter-spacing: var(--ls-mid); }
.ft-body span { display: block; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 2px; line-height: 1.7; }
.ft-go { color: var(--ginkgo-deep); transform: rotate(-90deg); }
@media (max-width: 520px) {
  .first-time { grid-template-columns: 1fr auto; }
  .ft-tag { grid-column: 1; justify-self: start; margin-bottom: 4px; }
  .ft-body { grid-column: 1 / -1; grid-row: 2; }
}

/* =============================================================================
   狭い画面のナビ（手帳と同じ黒帯）
   375px では ブランド＋5項目＋ログアウト が横に収まらず、右端が切れていた。
   手帳が採っているのと同じ「下に黒帯」へ逃がす。
   ========================================================================== */
.icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; background: none; color: var(--ink-soft);
  border-radius: var(--radius-md);
}
.icon-btn:hover { background: var(--bg-neutral); }
.icon-btn .ic { width: 20px; height: 20px; }

.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-header);
  display: none; grid-template-columns: repeat(5, 1fr);
  background: var(--ink); color: var(--text-ondark);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; padding: 8px 2px 9px;
  font-size: var(--fs-micro); letter-spacing: 0; color: #c9c7be; text-align: center;
}
.bottom-nav .nav-item:hover { text-decoration: none; }
.bottom-nav .nav-item .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.bottom-nav .nav-item.active { color: #fff; font-weight: 700; }
.bottom-nav .nav-item.active .ic { stroke-width: 2.2; }
.bottom-nav .label { display: block; }

@media (max-width: 720px) {
  .header-nav { display: none; }
  .icon-btn { display: inline-flex; }
  .bottom-nav { display: grid; }
  body { padding-bottom: 68px; }
  /* 下の帯に隠れないよう、画面下に固定されるトーストも持ち上げる */
  .toast { bottom: 82px; }
}

/* 指で押す前提のボタンは 40px を下回らせない（スマホが7割） */
.btn.sm { min-height: 40px; }
.icon-btn, .bottom-nav .nav-item { min-height: 44px; }

/* 文中の控えめなボタン（「自分の記録だけをコピーする」） */
.linklike {
  background: none; border: 0; padding: 0;
  color: var(--text-link); font-size: var(--fs-caption); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); }

/* 記録一覧の絞り込み・並び替え */
.list-tools { align-items: center; }
/* 4周目 P3: 選択肢の中に長い名前の人（40字級）がいると、select が中身の幅まで伸びて
   320／390px で横スクロールが出た（実測 554px）。枠は画面幅までにして、中は省略する */
.mini-select { width: auto; max-width: 100%; padding: 7px 10px; font-size: var(--fs-caption); text-overflow: ellipsis; }

/* =============================================================================
   ことばの意味（用語の吹き出し）
   知らない語で読むのが止まらないように、本文の該当語に点線を引く。
   押すと意味が出る。読みを妨げないよう、線は細く・色は控えめに。
   ========================================================================== */
.gl {
  appearance: none; font: inherit; color: inherit; background: none;
  border: 0; padding: 0 1px; margin: 0; cursor: pointer;
  text-decoration: underline dotted var(--ginkgo-deep);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  border-radius: 2px;
}
.gl:hover { background: var(--ginkgo-wash); }
.gl[aria-expanded="true"] { background: var(--ginkgo-soft); text-decoration-style: solid; }
.gl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.gl-pop {
  position: fixed; z-index: 200; width: 330px; max-width: calc(100vw - 24px);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 14px 16px 14px;
  box-shadow: 0 10px 28px rgba(26,26,26,.16);
  font-size: var(--fs-caption); line-height: 1.85;
}
.gl-pop[hidden] { display: none; }
.gl-pop .gl-t { font-size: var(--fs-sm); font-weight: 700; margin: 0 22px 2px 0; letter-spacing: var(--ls-mid); }
.gl-pop .gl-r { font-size: var(--fs-micro); color: var(--text-tertiary); margin-bottom: 7px; }
.gl-pop .gl-d { margin: 0; color: var(--text-primary); }
.gl-pop .gl-u {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-default);
  color: var(--text-secondary);
}
.gl-pop .gl-u b { color: var(--text-primary); }
.gl-x {
  position: absolute; top: 6px; right: 7px; width: 24px; height: 24px;
  border: 0; background: none; color: var(--text-tertiary); cursor: pointer;
  font-size: 13px; line-height: 1; border-radius: var(--radius-sm);
}
.gl-x:hover { background: var(--bg-neutral); color: var(--ink); }

/* 使い方ページの一覧 */
.gl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gl-item {
  border: 1px solid var(--border-default); border-left: 3px solid var(--ginkgo);
  border-radius: var(--radius-sm); padding: 12px 14px; background: var(--paper);
}
.gl-item h4 { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 5px; letter-spacing: var(--ls-mid); }
.gl-item h4 .rd { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--text-tertiary); margin-top: 2px; }
.gl-item p { font-size: var(--fs-caption); line-height: 1.85; color: var(--text-secondary); margin: 0; }
.gl-item .use { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-subtle); }
.gl-item .use b { color: var(--text-primary); }

/* 「点線は押せます」の案内 */
.gl-hint {
  font-size: var(--fs-caption); line-height: 1.85; color: var(--text-secondary);
  background: var(--bg-subtle); border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 16px 0 0;
}
.gl-hint b { color: var(--text-primary); }


/* 招待URLの一斉送信（管理ページ）。押すと全員に飛ぶので、枠で囲って独立させる */
.send-all {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--border-default); border-left: 3px solid var(--ginkgo);
  border-radius: var(--radius-sm); background: var(--ginkgo-wash);
}
.send-all .sa-h {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-mid);
  margin: 0 0 8px;
}

/* 書き起こしの手直し（記録ページ・録音ページ共通） */
.fixbox {
  margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--border-default); border-left: 3px solid var(--ink);
  border-radius: var(--radius-sm); background: var(--bg-subtle);
}
.fixbox .fx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fixbox .fx-head .ic { width: 16px; height: 16px; }
.fixbox .fx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fixbox .fx-row .input { flex: 1 1 180px; min-width: 0; }
.fixbox .fx-arrow { color: var(--text-tertiary); font-weight: 700; }
@media (max-width: 560px) {
  .fixbox .fx-arrow { display: none; }
  .fixbox .fx-row .input { flex: 1 1 100%; }
}


/* =============================================================================
   場面の選択（録音ページ）と「見られる人」（記録ページ）
   2026-09-03 PBL定例：チームの話し合い／ひとりのふりかえりを分け、誰が見られるかを明示する。
   ========================================================================== */
.scene-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .scene-pick { grid-template-columns: 1fr; } }
.scene-opt {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink); cursor: pointer; line-height: 1.6;
}
.scene-opt:hover { border-color: var(--ink); }
.scene-opt .so-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-subtle); }
.scene-opt .so-ic .ic { width: 20px; height: 20px; }
.scene-opt .so-body b { display: block; font-size: var(--fs-sm); letter-spacing: var(--ls-mid); }
.scene-opt .so-body span { display: block; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 2px; }
.scene-opt.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.scene-opt.on .so-body span { color: rgba(255,255,255,.78); }
.scene-opt.on .so-ic { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.scene-opt[data-scene="journal"].on { background: var(--ginkgo-deep); border-color: var(--ginkgo-deep); }
.scene-pick.shake { animation: shake .5s ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .scene-pick.shake { animation: none; } }
/* ふりかえりを選んでいるあいだは、カード全体にうっすら印を付けて「いま自分だけの録音」だと分かるようにする */
#rec-card.scene-journal { border-color: var(--ginkgo-deep); }

/* タブの件数 */
.tabs button { display: inline-flex; align-items: center; gap: 6px; }
.tabs button .ic { width: 15px; height: 15px; }
.tabs button .cnt { font-size: var(--fs-micro); opacity: .75; }

/* 見られる人 */
.vis {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid);
  padding: 2px 9px; border-radius: var(--radius-sm); line-height: 1.7; white-space: nowrap;
  border: 1px dashed var(--border-default); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.vis .ic { width: 13px; height: 13px; }
.vis:hover { border-color: var(--ink); color: var(--ink); }
.vis.lock { border-style: solid; border-color: var(--ginkgo-deep); background: var(--ginkgo-soft); color: #7a5a08; }
.vis-long { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-secondary); white-space: normal; line-height: 1.7; }
.note-row.journal { border-left: 3px solid var(--ginkgo-deep); }


/* =============================================================================
   記録アシスタントの質問（/questions）とナビのバッジ
   ========================================================================== */
.nav-item { position: relative; }
.nav-badge {
  position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--risk); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0;
}
.header-nav .nav-badge { top: -2px; right: -2px; }
.q-hero { position: relative; padding-right: 110px; }
.chara-q { right: 14px; bottom: 6px; width: 84px; }
@media (max-width: 560px) { .q-hero { padding-right: var(--space-5); } .chara-q { display: none; } }
.q-progress { margin-top: 18px; text-align: center; }
.q-progress .level { max-width: 320px; }
.level.indeterminate > i { width: 35%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .level.indeterminate > i { animation: none; width: 100%; opacity: .5; } }
.q-card {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--paper);
  padding: var(--space-4) var(--space-5);
}
.q-card + .q-card { margin-top: var(--space-3); }
.q-card.done { background: var(--bg-subtle); }
.q-card h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); line-height: 1.7; margin-top: 4px; }
.q-src { font-size: var(--fs-caption); color: var(--text-tertiary); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-kind {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-mid); padding: 1px 8px;
  border-radius: var(--radius-full); border: 1px solid var(--ink); color: var(--ink);
}
.q-kind.speaker { background: var(--ginkgo-soft); border-color: var(--ginkgo-deep); color: #7a5a08; }
.q-kind.content { background: var(--bg-subtle); border-color: var(--border-default); color: var(--text-secondary); }
.q-quote { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 6px; line-height: 1.7; }
.q-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.q-choices .btn { max-width: 100%; white-space: normal; text-align: left; }


/* =============================================================================
   1人で振り返る（/reflect）とトップの案内
   ========================================================================== */
.rec-note { text-align: center; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 6px; }
.scene-opt.static { cursor: default; }
.scene-opt.link { text-decoration: none; color: var(--ink); }
.scene-opt.link:hover { text-decoration: none; background: var(--ginkgo-wash); border-color: var(--ginkgo-deep); }
.reflect { margin-top: 22px; }
.rf-timer { text-align: center; }
.rf-clock { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rf-clock .num { font-size: 40px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.rf-range { width: 100%; max-width: 520px; margin: 10px auto 0; display: block; accent-color: var(--ink); height: 28px; }
.rf-marks { display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto; font-size: var(--fs-micro); color: var(--text-tertiary); }
.rf-bubble {
  position: relative; margin-top: 18px; padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--paper);
}
/* イラストは右下。文字の幅にゆとりがある画面でだけ出す。
   左に置いていたときは、ブロック全体がイラストの幅ぶん右にずれて見えた（2026-09-05 の指摘）。
   狭い画面では出さない（そのぶんを文字に使う）。 */
.chara-rf { display: none; }
/* 問いごとの絵。カードの右に置く。狭い画面では出さず、そのぶんを文字に使う */
.rf-ill { display: none; }
@media (min-width: 720px) {
  .rf-bubble:not(.no-chara) { padding-right: 108px; }
  .rf-bubble:not(.no-chara) .chara-rf { display: block; right: 12px; bottom: 8px; width: 80px; }
  /* 1行だけの問いでも絵がはみ出さないよう、カードの高さをそろえる */
  .rf-asks > li { padding-right: 86px; min-height: 68px; display: flex; flex-direction: column; justify-content: center; }
  .rf-ill {
    display: block; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 62px; height: auto; max-height: calc(100% - 12px); object-fit: contain;
    pointer-events: none; user-select: none;
  }
}
.rf-say { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.9; }
/* 前半の観点。番号つきのカードにして、1件ずつ目で追えるようにする
   （2026-09-05：文がべた書きで並んでいて読めない、という指摘） */
.rf-asks { counter-reset: rfa; margin-top: 14px; display: grid; gap: 8px; }
.rf-asks > li {
  position: relative; padding: 10px 14px 10px 42px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.7; letter-spacing: var(--ls-mid);
}
.rf-asks > li::before {
  counter-increment: rfa; content: counter(rfa);
  position: absolute; left: 12px; top: 11px; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--ink); color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 700;
}
.rf-asks > li span {
  display: block; margin-top: 3px; font-weight: 400;
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.8; letter-spacing: 0;
}
.rf-q { margin-top: 10px; font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-mid); line-height: 1.7; }
.rf-hint { margin-top: 8px; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.8; }
.rf-body.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rf-body.pop { animation: none; } }


/* ---------- 記録一覧を詰める（2026-09-05 の要望：ボタンが大きく縦に伸びる） ---------- */
.btn.xs { padding: 4px 9px; font-size: 11px; gap: 4px; border-radius: var(--radius-sm); letter-spacing: var(--ls-mid); }
.btn.xs .ic { width: 13px; height: 13px; }
.note-row { padding: 10px 14px; }
.note-row h3 { font-size: var(--fs-sm); line-height: 1.5; }
.note-row .meta { font-size: 11px; margin-top: 2px; }
.note-row .meta + .meta { margin-top: 2px; }
.note-row .acts { margin-top: 6px; gap: 6px; }
.note-row .vis { font-size: 10px; padding: 1px 7px; }
.note-list > li + li { margin-top: 8px; }


/* ---------- 使い方ページのタブ ---------- */
.gtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 22px; position: sticky; top: var(--header-h, 56px); z-index: 5; background: var(--bg-neutral, #f1f0ec); padding: 8px 0; }
.gtabs a {
  padding: 7px 13px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-mid);
  border: 1px solid var(--border-default); background: var(--paper); color: var(--text-secondary);
  border-radius: var(--radius-full); text-decoration: none;
}
.gtabs a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.gtabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.gpanel[hidden] { display: none; }
.prompt-group + .prompt-group { margin-top: 28px; }
.prompt-how { display: flex; gap: 6px; align-items: center; font-size: var(--fs-caption); color: #7a5a08; background: var(--ginkgo-wash); border: 1px solid var(--ginkgo-deep); border-radius: var(--radius-sm); padding: 6px 10px; margin: 10px 0 8px; }
.prompt-how .ic { width: 14px; height: 14px; flex: none; }


/* =============================================================================
   2026-09-05 の直し：録音の入口を常設・記録カードの整理
   ========================================================================== */
/* 入口の2枚（録音ページ／ふりかえりページの両方に出る） */
.scene-pick { margin-bottom: 12px; }
.scene-opt { position: relative; }
.scene-opt .so-body b { line-height: 1.5; }
/* 説明のかたまり。中では折り返さず、かたまりとかたまりの間だけで折り返す */
.scene-opt .so-body .nb { display: inline-block; white-space: nowrap; }
/* 見出しの b はブロック（上の .so-body b）。説明の中の b はそのまま行に流す */
.scene-opt .so-body .nb b { display: inline; font-size: inherit; letter-spacing: inherit; }
/* 区切りは前のかたまりのお尻に付ける。行頭に「／」が落ちてこないようにするため */
.scene-opt .so-body .nb:not(:last-child)::after { content: "／"; color: var(--text-tertiary); margin: 0 5px; }
.scene-opt.on .so-body .nb:not(:last-child)::after { color: rgba(255,255,255,.5); }
.scene-opt { grid-template-columns: auto 1fr; }

/* 入口の下の吹き出し */
.scene-bubble b { display: block; margin-bottom: 2px; }
.scene-bubble {
  position: relative; margin: 0 0 14px; padding: 11px 14px;
  background: var(--ginkgo-wash); border: 1px solid var(--ginkgo-deep); border-radius: var(--radius-md);
  font-size: var(--fs-caption); line-height: 1.8; color: #6b4f06;
}
.scene-bubble::before {
  content: ""; position: absolute; top: -7px; left: 28px; width: 12px; height: 12px;
  background: var(--ginkgo-wash); border-left: 1px solid var(--ginkgo-deep); border-top: 1px solid var(--ginkgo-deep);
  transform: rotate(45deg);
}

/* カードの右上：見られる人 → 状態 の順に縦に積む */
.note-row .head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.note-row .head-right .vis { margin: 0; }
@media (max-width: 520px) {
  .note-row .head { flex-wrap: wrap; }
  .note-row .head-right { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; margin-top: 4px; }
}

/* 題名をその場で直す */
.note-row h3.ttl-edit { cursor: text; border-radius: var(--radius-sm); padding: 1px 4px; margin-left: -4px; }
.note-row h3.ttl-edit:hover { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-default); }
.note-row h3.ttl-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.input.title-edit { font-size: var(--fs-sm); font-weight: 700; padding: 4px 8px; margin: -2px 0 2px; }


/* ---------- 記録ページ先頭の切り替えタブ ---------- */
.tabs.top-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.tabs.top-tabs button {
  justify-content: center; padding: 12px 10px; font-size: var(--fs-sm);
  border-radius: var(--radius-md); border-width: 1.5px;
}
.tabs.top-tabs button .ic { width: 17px; height: 17px; }
.tabs.top-tabs button .cnt { font-size: var(--fs-caption); opacity: .7; }
.tabs.top-tabs button.on { box-shadow: 0 2px 0 var(--ink); }
@media (max-width: 420px) { .tabs.top-tabs button { padding: 11px 6px; font-size: var(--fs-caption); } }


/* ---------- 裏で動いていること ---------- */
.activity { margin-top: 16px; }
.act-now { font-size: var(--fs-caption); color: var(--text-secondary); margin: 6px 0 10px; line-height: 2; }
.act-list { display: grid; gap: 6px; margin-top: 8px; }
.act { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; font-size: var(--fs-caption); line-height: 1.7; }
.act-ic { color: var(--text-tertiary); padding-top: 2px; }
.act-ic .ic { width: 15px; height: 15px; }
.act.error .act-ic { color: var(--risk); }
.act.questions .act-ic, .act.title .act-ic { color: #7a5a08; }
.act-when { color: var(--text-tertiary); white-space: nowrap; }
.act-me { display: inline-block; margin-left: 6px; font-size: var(--fs-micro); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 0 6px; color: var(--text-tertiary); }


/* ---------- 記録ごとの進み具合（書き起こし → 題名 → 統合 → 質問） ---------- */
.pipe { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pipe-bar { flex: 0 0 120px; height: 5px; border-radius: var(--radius-full); background: var(--bg-neutral); overflow: hidden; }
.pipe-bar > i { display: block; height: 100%; background: var(--ginkgo-deep); transition: width .4s ease; }
.pipe.all .pipe-bar > i { background: var(--good); }
.pipe-bar > i.run { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); background-size: 40px 100%; background-repeat: no-repeat; animation: pipe-shine 1.4s linear infinite; }
@keyframes pipe-shine { 0% { background-position: -40px 0; } 100% { background-position: 160px 0; } }
@media (prefers-reduced-motion: reduce) { .pipe-bar > i.run { animation: none; } }
.pipe-lb { font-size: 11px; color: var(--text-tertiary); }
.pipe.all .pipe-lb { color: var(--good); }
.note-row .body-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }


/* =============================================================================
   2026-09-06 2周目の直し（画面担当）。1周目の不具合番号を各行に添える。
   tokens.css は触らず、ここで上書きする。
   ========================================================================== */
/* ui-5: 薄い灰色（#8b897f＝白地で 3.5:1）が状態文・手順文にまで使われていた。
   本文級に使う三次色を 4.5:1 以上（#6b6960＝地の #f1f0ec で 4.8:1）へ。装飾の英字ラベルだけ元の色を残す */
:root { --text-tertiary: #6b6960; --text-deco: #8b897f; }
.sec-title .en, .caution-head .en { color: var(--text-deco); white-space: nowrap; }
.rec-state { color: var(--text-secondary); }
.hint { color: var(--text-secondary); }
.steps li { color: var(--text-tertiary); }
.ft-tag { background: var(--ginkgo); color: #3a2d05; }         /* 白字×銀杏（2.8:1）→ 濃い字×銀杏（11:1） */
.badge.warn { color: #8a4b00; }                                /* 11px の太字は 4.5:1 が要る。#b06000 は 4.0 */
.badge.good { color: #256a36; }
/* ui-13: 失敗した段階行に「およそ1分が目安です」を残さない（rec.js は sub を消さずに failed にする） */
.steps li.failed .sub { display: none; }
/* ui-8: iPhone Safari は button の文字色を継承せず、リンク色（青）で描く */
.rec-btn { color: var(--ink); -webkit-appearance: none; appearance: none; }
.rec-btn.on { color: #fff; }
/* ui-10: 見出しが語の途中で折れる（「ちょっとだけ教 / えてください」）。語のまとまりでしか折らず、
   英字ラベルは1語のまま。入りきらないときは罫線だけが次の行に落ちる */
.sec-title, .caution-head { flex-wrap: wrap; word-break: keep-all; overflow-wrap: break-word; }
.sec-title::after, .caution-head::after { flex: 1 1 40px; }
/* ui-11: 指で押す要素の大きさ。一覧のボタンは 32px 以上・間隔 8px、削除だけ右端に離す */
.btn.xs { min-height: 32px; padding: 6px 10px; }
.note-row .acts { gap: 8px; }
.note-row .acts [data-act="del"] { margin-left: auto; }
.linklike { display: inline-block; min-height: 32px; padding: 6px 0; }
.check { min-height: 32px; padding: 4px 0; }
.check input { width: 22px; height: 22px; }
/* ui-7／ui-11: 「見られる人」は折り返せる・28px 以上。長いチーム名で横スクロールを起こさない */
.vis { min-height: 28px; white-space: normal; text-align: left; max-width: 100%; }
.note-row .vis { padding: 3px 8px; }
@media (max-width: 520px) { .note-row .head-right { flex-wrap: wrap; } }
/* ui-4: 見た目には出さず、読み上げにだけ載せる見出し（各ページの h1） */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* ui-4: 題名の「押せる部分」。h3 に role=button は付けられないので中の span がボタン */
.note-row h3.ttl { font-size: var(--fs-sm); line-height: 1.5; }
/* 4周目 P3: 40字級の長い名前を入れた人がいると「録音者：◯◯」の帯が白いまま伸びて、
   320px で横スクロールが出ていた（.badge の white-space:nowrap）。記録の1行の中の帯だけ折り返す。
   短い帯（「できた」「失敗」など）は字数が足りないので見た目は変わらない。
   「話した人 3人」を割らないための span.nowrap は帯の外なので、そのまま効く（r2v-ui-3） */
.note-row .meta .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* 4周目 P3: 題名に URL などASCIIの長い連続文字を貼ると inline-block が折り返さず、
   320px で scrollWidth 560 まで伸びていた。どこでも折り返してよい（題名は読めれば足りる） */
.note-row .ttl-edit { display: inline-block; cursor: text; border-radius: var(--radius-sm); padding: 1px 4px; margin-left: -4px; max-width: 100%; overflow-wrap: anywhere; }
.note-row .ttl-edit:hover { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-default); }
.note-row .ttl-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* ui-2／cost-2／ai-5: 進み具合の「失敗」と「見送り中」。成功の緑と同じ色にしない */
.pipe.err .pipe-lb { color: var(--risk); }
.pipe.err .pipe-bar > i { background: var(--risk); }
.pipe.hold .pipe-lb { color: var(--text-secondary); }
.pipe.hold .pipe-bar > i { background: var(--border-default); }
.err-line { color: var(--risk); margin-top: 4px; }
.hold-line { color: #8a4b00; margin-top: 4px; }
/* cost-5／ui-13: 生のエラー文は折りたたみに */
details.tech { margin-top: 4px; }
details.tech > summary { cursor: pointer; color: var(--text-secondary); }
details.tech code {
  display: block; margin-top: 4px; padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text-secondary);
  font-size: 11px; white-space: pre-wrap; word-break: break-all;
}
/* ai-5／cost-4: 履歴の失敗行は赤系 */
.act.error .act-text { color: var(--risk); }
/* ui-10 の補足: keep-all は「長いチーム名を含む見出し」には効かせない。日本語は1語扱いになって
   折り返せず、320px でページが横に伸びた（2周目の検証で発覚）。動的な見出しは従来どおりどこでも折る */
#bundle-title { word-break: normal; overflow-wrap: anywhere; }
/* ui-5 の補足: 英字ラベル（.en）も axe が拾うので、装飾用の薄い色はやめて本文級と同じ三次色にそろえる */
.sec-title .en, .caution-head .en { color: var(--text-tertiary); }
.tabs button .cnt { opacity: .9; }
/* ui-5: ふりかえりページの「いま選んでいる入口」は銀杏の濃い地に白字（2.8:1）だった。明るい銀杏に濃い字へ */
.scene-opt[data-scene="journal"].on { background: var(--ginkgo); border-color: var(--ginkgo-deep); color: #3a2d05; }
.scene-opt[data-scene="journal"].on .so-body span { color: #5a4708; }
.scene-opt[data-scene="journal"].on .so-ic { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.25); color: #3a2d05; }
.scene-opt[data-scene="journal"].on .so-body .nb:not(:last-child)::after { color: #7a5a08; }
/* ui-11 の補足: 題名（押せる）と details の summary も 30px 以上の当たり判定にする。見た目の行送りは変えない */
.note-row .ttl-edit { padding: 5px 4px; margin: -5px 0 -5px -4px; }
details > summary { min-height: 32px; padding: 5px 0; box-sizing: border-box; }  /* display は list-item のまま（▶ の印を消さない） */
/* ui-5 の補足: 記録ページ先頭のタブの件数（.top-tabs は .7 で上書きしていた） */
.tabs.top-tabs button .cnt { opacity: .9; }

/* ================================================================ 3周目の直し
   r2v-ui-1: iPhone の Safari は、文字が 16px 未満の入力にフォーカスすると
   ページを勝手に拡大する（viewport に maximum-scale は付けない＝a11y のため、
   拡大したままになり学生が自分でピンチして戻すことになる）。
   指で使う端末（pointer: coarse）でだけ 16px に上げる。マウスの画面の見た目は変えない。 */
@media (pointer: coarse) {
  .input, .textarea, .select { font-size: 16px; }
  .input.title-edit { font-size: 16px; }        /* 記録ページの題名のその場編集（13px だった） */
  .mini-select { font-size: 16px; }             /* メンバー絞り込み・並べ替え（12px だった） */
  /* .input.code（ログインの確認コード・26px）は、この一括指定より前で大きく指定してある。
     ここで 16px に落とさないよう、あえて書かない */
}

/* r2v-ui-2: 当たり判定 32px（仕様11）に届いていなかった3種。見た目の文字の大きさは変えず、
   押せる範囲だけ広げる。
   対象外にしているもの: 文中の点線用語 .gl（文の途中に置くインライン要素）と
   生のチェックボックス input（包む label.check が 32px 以上あるので実質足りている）。 */
.vis { min-height: 32px; box-sizing: border-box; }
.note-row .vis { min-height: 32px; padding: 1px 7px; }
.note-row .ttl-edit { min-height: 32px; box-sizing: border-box; }
.brand { min-height: 32px; }

/* r2v-ui-3: 「話した人 3人」が数字と「人」の間で改行される（日本語はどこでも折れる）。
   1かたまりとして扱う小物。バッジと同じ扱いにする */
.meta .nowrap, .nowrap { white-space: nowrap; }

/* 3周目 rec-1: 送りきれずに止まった記録。動くバーを出さず、赤で「止まっている」と言う。
   .pipe.err の色づけはそのまま使い、次の一手だけ行の下に添える */
.stuck-line { color: var(--risk); margin-top: 4px; }
.stuck-line b { font-weight: 700; }
/* 「次の一手」のリンクは文の中に置かない（32px にすると赤い文の行間が崩れ、リンクだと気づかれない）。
   文の下にボタン（.btn.xs＝32px）で1つだけ出す */
.stuck-go { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 4周目 P3: 文が「その端末で」、ボタンが「この端末で」と隣り合っていて取り違えやすかった。
   条件をボタンの手前に置いて、押す前に読ませる */
.stuck-if { color: var(--text-secondary); font-size: var(--fs-micro); }
/* 管理画面「送りきれていない記録」。運営が朝夕に1画面で見るところ */
.unsent-box { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.unsent-box.warn { background: var(--risk-bg); box-shadow: inset 0 0 0 1px var(--risk); }
.unsent-box ul { margin: 6px 0 0; padding-left: 18px; }
.unsent-box li { margin-top: 2px; }

/* 送信できていない録音の知らせ（録音ページのいちばん上。2026-09-12） */
.stash-alert { border-color: var(--risk); box-shadow: inset 4px 0 0 var(--risk); }
.stash-status { margin-bottom: 10px; font-weight: 700; }
.stash-status.err { color: var(--risk); }
.stash-status.ok { color: var(--good); }