/* この製品だけの並べ方。色・余白・角は ohnology.css の値だけを使う。 */

/* 画面の骨組み：上のタブは固定。どの画面も同じ幅を使う。ロゴは左下 */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-wide { --container: 1840px; }
.app-head { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.app-head__in { display: flex; align-items: center; min-height: var(--s-14); }
.app-main { flex: 1 0 auto; padding-top: var(--s-10); padding-bottom: var(--s-14); }
.app-foot { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.app-logo { display: block; height: 20px; width: auto; }
.app-narrow { max-width: var(--measure); }
.app-gap-1 { gap: var(--s-1); }
.app-gap-2 { gap: var(--s-2); }
.app-gap-3 { gap: var(--s-3); }
.app-gap-6 { gap: var(--s-6); }
.app-gap-8 { gap: var(--s-8); }
.app-option { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
select.oh-input { -webkit-appearance: menulist; appearance: auto; }
/* 見出しの左端を、ほかのラベルとそろえる */
legend.oh-label { padding: 0; }

/* ---------- 折りたたみ、発言、文面（始める画面、比較画面） ---------- */
.sv-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sv-details summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); min-height: var(--tap); display: flex; align-items: center; }
.sv-turn__who { font-weight: 700; font-size: var(--text-xs); }
.sv-turn__text { font-size: var(--text-sm); line-height: 1.7; }
.tp-past { font-size: var(--text-xs); color: var(--muted); }
.tp-past summary { cursor: pointer; min-height: var(--s-8); display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .tp-past summary { min-height: var(--tap); } }
.in-text { margin: 0 0 var(--s-4); padding: var(--s-4); background: var(--surface); border-radius: var(--r-card); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 対話画面 ---------- */
.pt-talk { display: flex; flex-direction: column; gap: var(--s-3); }
.pt-msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); font-size: var(--text-body); align-self: flex-start; }
.pt-msg--mine { align-self: flex-end; background: var(--surface); border-color: transparent; }
.pt-msg--ai { align-self: stretch; max-width: 100%; border-color: var(--ink); }
.pt-msg__who { font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.pt-say { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; border-top: 1px solid var(--line); padding-top: var(--s-5); }
.pt-say .oh-field { width: 100%; }
.pt-say textarea.oh-input { min-height: var(--s-18); }

/* ---------- モニターの画面 ---------- 会話｜様子｜AIに入力した文｜AIの返答。広い画面では4列 */
.mn-clean .app-head, .mn-clean .app-foot { display: none; }
.mn-clean .app-main { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.mn-controls { gap: var(--s-4); align-items: flex-end; }
.mn-scrub { flex: 1 1 200px; }
.mn-scrub input { width: 100%; min-height: var(--tap); accent-color: var(--ink); }
a.mn-tab { display: inline-flex; align-items: center; text-decoration: none; }
.mn-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (min-width: 1001px) {
  .mn-cols { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .mn-left { grid-row: span 3; }
  .mn-state, .mn-input, .mn-output { grid-column: 2; }
  .mn-talk { max-height: calc(100vh - var(--s-24) - var(--s-24) - var(--s-8)); overflow-y: auto; }
  .mn-clean .mn-talk { max-height: calc(100vh - var(--s-24) - var(--s-14)); }
}
@media (min-width: 1700px) {
  .mn-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 9fr) minmax(0, 6fr) minmax(0, 5fr); }
  .mn-left { grid-row: auto; }
  .mn-state { grid-column: 2; }
  .mn-input { grid-column: 3; }
  .mn-output { grid-column: 4; }
  /* 4列のときは、AIに入力した文を欄の中で上下に動かす（ほかの列と高さをそろえるため） */
  .mn-scroll { max-height: calc(100vh - var(--s-24) * 4 - var(--s-14)); overflow-y: auto; }
  .mn-clean .mn-scroll { max-height: calc(100vh - var(--s-24) * 4); }
}
.mn-left, .mn-state, .mn-input, .mn-output { min-width: 0; }
.mn-left { display: flex; flex-direction: column; gap: var(--s-2); }
.mn-h { font-size: var(--text-sm); line-height: 1.4; font-weight: 700; padding-bottom: var(--s-2); border-bottom: 2px solid var(--ink); }
.mn-lead { font-size: var(--text-xs); color: var(--muted); line-height: 1.6; }
.mn-turn { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-bottom: 1px solid var(--line); }
.mn-turn[aria-current="true"] { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
.mn-turn__who { font-weight: 700; font-size: var(--text-xs); }
.mn-turn__text { font-size: var(--text-sm); line-height: 1.7; }
.mn-turn__meta { font-size: var(--text-xs); color: var(--muted); }
.mn-turn__meta b { color: var(--ink); }
.mn-wait { font-size: var(--text-sm); color: var(--muted); padding: var(--s-3) 0; }
/* 時刻に合わせた再生：いま話している人と、AIの処理の様子 */
.mn-media { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-card); }
.mn-live { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-card); }
.mn-live__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); line-height: 1.6; }
.mn-live__row > span:first-child { min-width: 0; }
.mn-live__who { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; }
.mn-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.mn-live__bar { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.mn-live__bar span { display: block; height: 100%; background: var(--ink); }
.mn-live__note { font-size: var(--text-xs); color: var(--muted); }
.mn-block { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }

.mn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s-3); }
.mn-tile { display: flex; flex-direction: column; padding: var(--s-2) var(--s-4) var(--s-3); background: var(--surface); border-radius: var(--r-card); min-width: 0; }
.mn-tile__label { font-size: var(--text-xs); font-weight: 700; line-height: 1.5; }
.mn-tile__top { display: flex; align-items: baseline; gap: var(--s-2); }
.mn-tile__value { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mn-tile__change { font-size: var(--text-sm); font-weight: 700; }
.mn-tile__note { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; }

.mn-table th, .mn-table td { padding: var(--s-2) var(--s-2); vertical-align: middle; }
.mn-table th.oh-num { font-family: var(--font-sans); }
.mn-table .oh-chip { white-space: nowrap; }
.mn-table .mn-topic { display: flex; flex-direction: column; min-width: 9em; }
.mn-topic__name { font-weight: 700; line-height: 1.5; }
.mn-topic__counts { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; }
.mn-table tr.mn-now td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.mn-strip svg { max-width: none; }
.mn-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); align-items: center; font-size: var(--text-xs); color: var(--muted); }
.mn-legend__item { display: inline-flex; align-items: center; gap: var(--s-1); }

/* AIに入力した文：内訳の帯と、文面 */
.mn-comp { display: flex; flex-direction: column; gap: var(--s-2); }
.mn-comp__bar { display: flex; gap: 2px; min-height: var(--s-4); background: var(--surface); border-radius: var(--r-chip); overflow: hidden; }
.mn-comp__seg { min-width: 2px; }
.mn-comp__legend { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.mn-comp__legend li { display: flex; gap: var(--s-2); align-items: center; }
.mn-comp__legend li > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
.mn-comp__key { flex: none; width: var(--s-3); height: var(--s-3); border-radius: 2px; border: 1px solid var(--line-3); }
.mn-sections { display: flex; flex-direction: column; gap: var(--s-3); }
.mn-sec { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.mn-sec__name { font-size: var(--text-xs); font-weight: 700; line-height: 1.5; }
details.mn-sec > summary { cursor: pointer; min-height: var(--s-8); display: flex; align-items: center; }
.mn-other { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.mn-text, .mn-raw { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-card); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

.mn-kv { gap: var(--s-1) var(--s-4); font-size: var(--text-xs); }
@media (min-width: 561px) { .mn-kv { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); } }
.mn-log li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.6; }
.mn-log li > b { flex: none; font-size: var(--text-xs); }
.mn-log li > span:last-child { flex: 1 1 0; min-width: 0; }
.mn-plots { display: flex; flex-direction: column; gap: var(--s-2); overflow-x: auto; }
.mn-plot { display: flex; flex-direction: column; }
.mn-plot__cap { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--text-xs); line-height: 1.5; }
.mn-plot__cap span { color: var(--muted); }
.mn-plots svg { flex: none; max-width: none; }
.mn-axis { font-family: var(--font-sans); font-size: 12px; fill: var(--muted); }
.mn-axis--name { fill: var(--ink-2); font-weight: 700; }
.mn-axis--now { fill: var(--ink); font-weight: 700; }
.mn-grid { stroke: var(--line-2); stroke-width: 1; }
.mn-tip { position: absolute; z-index: 20; display: flex; flex-direction: column; padding: var(--s-2) var(--s-3); background: var(--ink); color: var(--paper); border-radius: var(--r-control); font-size: var(--text-xs); line-height: 1.5; pointer-events: none; box-shadow: var(--shadow-1); }

/* ---------- 始める画面 ---------- */
.hm-load { padding: var(--s-2) 0 var(--s-6); }

/* ---------- 対話画面：声で入力、終える ---------- */
.tk-voice { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.tk-fix { align-self: flex-start; min-height: var(--s-8); font-size: var(--text-xs); color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.tk-fix:hover { color: var(--ink); }
@media (max-width: 820px) { .tk-fix { min-height: var(--tap); } }
.tk-end { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.oh-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- 二人に渡すリンク ---------- */

/* ---------- 振り返り画面：解析の進み具合、評価 ---------- */

/* ---------- 比較画面 ---------- 発言｜会話履歴のみ｜人物別メモリー */
.cp-totals th[scope="row"] { color: var(--ink); font-size: var(--text-sm); font-weight: 400; white-space: normal; }
.cp-head, .cp-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); gap: var(--s-6); }
.cp-head { font-size: var(--text-sm); font-weight: 700; padding-bottom: var(--s-2); border-bottom: 2px solid var(--ink); }
.cp-row { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.cp-row--differs { box-shadow: inset 2px 0 0 var(--accent); padding-left: var(--s-4); }
.cp-said, .cp-cell { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cp-kv { grid-template-columns: minmax(0, 6em) minmax(0, 1fr); gap: var(--s-2) var(--s-3); }
.cp-say { display: block; background: var(--surface); border-radius: var(--r-card); padding: var(--s-2) var(--s-3); line-height: 1.7; }
.cp-ai { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.cp-input { border-bottom: 0; }
.cp-input .in-text { margin-bottom: var(--s-2); }
@media (max-width: 900px) {
  .cp-head { display: none; }
  .cp-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .cp-cell::before { content: attr(data-label); font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
}

/* ---------- 上のタブ（対話サポート／履歴） ---------- */
.app-head__in { gap: var(--s-6); }
.app-tab { display: inline-flex; align-items: center; min-height: var(--s-14); font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.app-tab:hover { color: var(--ink); }
.app-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 対話画面：テーマ ---------- */
.tk-meta { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); }

/* ---------- 振り返り画面：実際に表示した媒介発話、人物別メモリー、判断、解析 ---------- */
.mn-turn__ai { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface); border-left: 2px solid var(--ink); font-size: var(--text-sm); line-height: 1.7; }
.mn-turn__ai b { font-size: var(--text-xs); }
.mn-judge { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
.mn-say { background: var(--surface); border-radius: var(--r-card); padding: var(--s-3) var(--s-4); font-size: var(--text-sm); line-height: 1.7; }
.mn-analysis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-card); border-left: 3px solid var(--ink); }
.mn-analysis__text { font-size: var(--text-sm); }

/* ---------- 対話画面：戻る、聞き取っている途中の文 ---------- */
.tk-back { align-self: flex-start; }
.pt-msg--live { border-style: dashed; color: var(--muted); }