/* ergo：白地に黒の文字。吹き出しは色で役目を分ける（2026-10-31、モック mock.html から移した） */
:root {
  --ink: #000;
  --paper: #fff;
  --sub: #555;
  --soft: #f4f4f4;
  --rule: #e6e6e6;
  --enji: #9d2933;
  /* 主張は赤、反論は青（紅白・赤組青組のように向かい合う組）、観察は緑、理由は黄。裏付けと限定は白に灰の縁 */
  --c-claim: #fadcdc; --c-obs: #dcf1e0; --c-warrant: #fbf0c2; --c-backing: #fff; --c-rebuttal: #dde9fb; --c-qualifier: #fff;
  /* 書体（2026-10-31、依頼）。吹き出しは BIZ UDPゴシック、観察はしっぽり明朝、画面の部品は丸ゴシック、ロボットは Yomogi */
  --ui: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --meta: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --hand: "Yomogi", "Klee One", cursive;
  --t1: #333; --t2: #666; --t3: #999; --t4: #bbb; --line: #ddd; --line2: #ccc; --soft2: #ececec; --glass: rgba(255,255,255,.7);
  color-scheme: light;
}
/* 暗い色の画面（2026-10-31、アプリ検査 H02）。吹き出しの色は役目ごとの色相を残し、地を暗くする */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f2; --paper: #161616; --sub: #aaa; --soft: #242424; --soft2: #2e2e2e; --rule: #333;
    --t1: #e6e6e6; --t2: #b4b4b4; --t3: #8a8a8a; --t4: #666; --line: #444; --line2: #555; --glass: rgba(0,0,0,.25);
    --enji: #d0626b;
    --c-claim: #4a2a2d; --c-obs: #22392a; --c-warrant: #463d1c; --c-backing: #1e1e1e; --c-rebuttal: #23324a; --c-qualifier: #1e1e1e;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--t1); font: 500 16px/1.7 var(--meta); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

.top, main { max-width: 680px; margin: 0 auto; padding: 0 16px; }
main { position: relative; padding-bottom: 64px; }
.top { display: flex; align-items: center; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.logo { font-weight: 700; letter-spacing: 0.02em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; }
.logo:hover { text-decoration: none; }
/* 印は「∵（なぜなら）」の3つの点。ergo が強めるのは理由だからな。臙脂で塗る（2026-10-31、依頼。∴ から替えた） */
/* 印の下の点を ergo の字のベースラインに載せる。flex の中の svg は下の辺がベースラインになる（2026-10-31、指摘） */
.logo .mark { width: 0.68em; height: 0.64em; fill: var(--enji); flex: none; } /* 点の外の余白を viewBox で切り、下の点の底を字の底にそろえる。上の点は x の高さに合わせる */
.search { flex: 1; max-width: 260px; min-width: 0; margin-left: auto; border: 0; outline: 0; background: var(--soft); border-radius: 999px; padding: 4px 14px; font-size: 14px; }
.search::placeholder { color: var(--t3); }
.search:focus { background: var(--soft2); }
.lang { font-size: 13px; color: var(--sub); white-space: nowrap; }
.lang:hover { color: var(--ink); }
.me { font-size: 14px; color: var(--sub); display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.me button:hover { color: var(--ink); }

/* 名前の代わりのアイコン。画像のない人は線の丸にする */
.who { display: inline-flex; vertical-align: -3px; }
.who:hover { text-decoration: none; }
.face { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: inline-block; background: var(--soft); }
.face.empty { background: var(--paper); box-shadow: inset 0 0 0 1px var(--t4); }
.face.large { width: 28px; height: 28px; }
.person { display: flex; align-items: center; gap: 10px; }

h1 { font: 700 20px/1.5 var(--ui); color: var(--ink); margin: 0 0 12px; overflow-wrap: anywhere; }
.kind { font-size: 13px; color: var(--sub); margin: 0 0 4px; }
.note { font-size: 14px; color: var(--sub); margin: 10px 0 0; }
.note button { text-decoration: underline; text-underline-offset: 3px; }
.error { font-size: 14px; color: #b00; margin: 8px 0 0; }
.lens { width: 0.9em; height: 0.9em; vertical-align: -0.1em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* 書く欄。枠は下の線だけにする */
.field { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--ink); }
.field input { border: 0; outline: 0; padding: 8px 0; background: transparent; min-width: 0; font-family: var(--ui); }
.field input::placeholder { color: var(--t4); }
.field .m { text-align: center; font-family: var(--ui); }
/* 頭の記号（！や虫眼鏡）と書く欄の字は、ベースラインでそろえる。字数の円だけ縦の真ん中に置く（2026-10-31、指摘） */
.field { align-items: baseline; }
.field .count { align-self: center; }
.field .m .lens { vertical-align: -0.05em; }
.cite { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); margin: 6px 0 0; }

/* 字数の円と送るボタン（bianco と同じ形）。書いていないときは出さない */
.count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; padding-left: 8px; }
.count.empty { visibility: hidden; }
.gauge { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.gauge .ring { position: absolute; inset: 0; width: 36px; height: 36px; fill: none; stroke-width: 2; pointer-events: none; }
.gauge .track { stroke: var(--rule); }
.gauge .fill { stroke: var(--ink); stroke-linecap: round; }
.gauge .send { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.gauge .send:disabled { opacity: .3; cursor: default; }
.arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.count.over { color: #b00; }
.count.over .fill { stroke: #b00; }
.count.busy .send { animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .count.busy .send { animation: none; opacity: .35; } }

/* ロボットの言葉。少年の言葉に「ゴ」の語尾を付ける */
.intro { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.robot { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.robot .eye { fill: currentColor; stroke: none; }
.says { background: var(--soft); border-radius: 12px 12px 12px 3px; padding: 6px 12px; font: 400 15px/1.6 var(--hand); }
.bot { display: flex; align-items: flex-start; gap: 10px; margin: 64px 0 0; }
.bot .robot { margin-top: 4px; }
.bot .lines { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bot .says { font-size: 14px; }

/* 帰属の1行。どのページでも本文の下に小さく出す */
footer.site { max-width: 680px; margin: 0 auto; padding: 24px 16px 32px; }
/* 本文が短いページでも、帰属の1行は画面の下に置く（2026-10-31、指摘） */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > .top, body > main, body > footer.site { width: 100%; }
body > main { flex: 1 0 auto; }
footer.site .fine { font-size: 12px; color: var(--t3); margin: 0; }
footer.site a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 821px) { footer.site { max-width: 1000px; } }

/* 見本へのリンク */
.samples { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 28px 0 0; font-size: 14px; }
.samples .lbl { color: var(--enji); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.book { width: 1.1em; height: 1.1em; fill: none; stroke: var(--enji); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vertical-align: -0.2em; margin-right: 3px; }
.samples a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(157, 41, 51, .35); }
.samples a:hover { color: var(--enji); }

/* 一覧 */
.sort { font-size: 13px; color: var(--sub); margin: 40px 0 0; display: flex; gap: 14px; }
.sort button { color: var(--t4); }
.sort button[aria-pressed="true"] { color: var(--enji); font-weight: 700; } /* 臙脂は、いま選んでいるものと見本の印にだけ使う（2026-10-31、依頼） */
.sessions { list-style: none; margin: 12px 0 0; padding: 0; }
.sessions li { padding: 10px 0; }
.no { font: 500 13px/1.6 var(--meta); color: var(--sub); font-variant-numeric: tabular-nums; }
.sessions .name .no { margin-right: 8px; color: var(--enji); }
.sessions .name { font: 700 16px/1.6 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.sessions a { display: block; }
.sessions a:hover { text-decoration: none; }
.sessions a:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.first { font: 500 14px/1.6 var(--mincho); color: var(--sub); margin: 2px 0 0; overflow-wrap: anywhere; }
.sessions .n { font-size: 13px; color: var(--sub); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.sessions .leaps { color: var(--t3); }
.faces { display: inline-flex; }
.faces .face { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--paper); }
.faces .face:first-child { margin-left: 0; }
.faces .face.empty { box-shadow: inset 0 0 0 1px var(--t4), 0 0 0 1.5px var(--paper); }
/* セッションの見出しと、付け直したときの元の観察 */
h1.title { position: relative; }
h1 + .first { margin: -8px 0 12px; }
.pen.inline { position: static; display: inline-grid; vertical-align: 2px; margin-left: 6px; opacity: 0; }
h1:hover .pen.inline, .pen.inline:focus { opacity: 1; }
@media (hover: none) { .pen.inline { opacity: .8; } }

/* 人のページ */
.history { list-style: none; margin: 0; padding: 0; }
.history li { padding: 0 0 14px; }
.history .text { font-family: var(--ui); overflow-wrap: anywhere; }
.history .where { font-size: 13px; color: var(--sub); display: block; }

/* セッションのページ */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--sub); margin: 0 0 28px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.compose { margin: 0 0 48px; }
.howto { margin: -16px 0 28px; font-size: 13px; color: var(--sub); }
.howto summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; }
.howto .bot { margin: 12px 0 0; }

/* 吹き出し。形はそろえ、色で役目を分ける。字は本文より小さくする */
.b { border-radius: 12px; padding: 5px 12px; max-width: 100%; position: relative; z-index: 1; font: 400 14px/1.6 var(--ui); color: var(--t1); overflow-wrap: anywhere; }
.claim { background: var(--c-claim); font-weight: 600; font-size: 15px; padding: 6px 12px; text-align: center; }
/* 強めるのは理由だ。このサイトでいちばん大事なのが理由を用意することだからな */
.warrant { background: var(--c-warrant); font-weight: 700; font-size: 15px; }
.backing { background: var(--c-backing); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.rebuttal { background: var(--c-rebuttal); font-size: 13px; }
.obs { background: var(--c-obs); font: 500 13px/1.6 var(--mincho); }
.warrant, .rebuttal, .backing { padding: 7px 14px; line-height: 1.65; }
.claim .q { display: block; width: fit-content; margin: 4px 0 0 auto; font: 400 12px/1.6 var(--ui); background: var(--c-qualifier); box-shadow: inset 0 0 0 1px #e5c6c6; border-radius: 10px; padding: 1px 10px; position: relative; }
/* 反論は「ただし〜なら成り立たない」の型で書く。型の字は淡い灰色で固定する */
.frame { color: var(--t2); font: 500 12px/1.6 var(--meta); white-space: nowrap; margin: 0; }
.derive { display: block; width: fit-content; margin: 2px 0 0 auto; font: 500 11px/1.6 var(--meta); color: var(--sub); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.from { font: 500 13px/1.6 var(--meta); color: var(--t2); margin: 0 0 8px; }
.from a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ergo と ergo のあいだは、時刻と細い線で区切る */
.when { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--t1); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.when::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.card { position: relative; margin: 0 0 56px; display: flex; flex-direction: column; align-items: stretch; }
.right { display: flex; flex-direction: column; }
.right > .rebs { order: -1; } /* スマホの幅では反論を主張の上に置く */
.rebs { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 10px; }
.mid { align-self: stretch; padding: 34px 0 30px; display: flex; flex-direction: column; position: static; }
.mid .wbox { margin-left: 44px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.leapnote { align-self: flex-start; margin-left: 30px; font: 500 12px/1.4 var(--meta); color: var(--t2); background: var(--paper); padding: 0 8px; position: relative; z-index: 1; white-space: nowrap; }
.leapnote { display: flex; flex-direction: column; align-items: center; }
.leapnote .add { font: 500 12px/1.6 var(--meta); color: var(--sub); }
.leapnote .add:hover { color: var(--ink); }
.stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.pipes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.pipes path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.pipes .leap { stroke: var(--t3); stroke-dasharray: 4 4; }
.pipes .backline { stroke: var(--t3); }

/* 書いた人のアイコン・鉛筆・「直した」は、指を載せたときだけ出す。字の流れから外し、吹き出しの角に浮かせる */
.b .who { position: absolute; top: -7px; right: -7px; }
.b .who .face { width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--paper); }
.pen { position: absolute; top: -8px; right: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--sub); }
.pen svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.edited { position: absolute; right: 8px; bottom: -17px; font: 500 11px/1.6 var(--meta); color: var(--sub); white-space: nowrap; }
.b .who, .b .pen, .b .edited { opacity: 0; transition: opacity .15s; }
.b:hover > .who, .b:hover > .pen, .b:hover > .edited, .b:focus-within > .who, .b:focus-within > .pen, .b:focus-within > .edited { opacity: 1; }
@media (hover: none) { .b .who, .b .edited { opacity: .5; } .b .pen { opacity: .8; } }

/* 採用・採用待ち・見送り。見送りは淡い灰色にするだけで、言葉は出さない（2026-10-31、決めた） */
.ok { font-size: 13px; margin-left: 6px; color: var(--sub); }
.pending { color: var(--t3); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line2); }
.pending.obs { box-shadow: inset 0 0 0 1.5px #b5dcbd; }
.pending.warrant { box-shadow: inset 0 0 0 1.5px #e8d68c; }
.aside { color: var(--t3); background: var(--soft); box-shadow: none; font-weight: 400; }
.wait { font: 500 11px/1.6 var(--meta); color: var(--sub); margin-left: 6px; }
.vote { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: -2px; }
.vote button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--t3); background: var(--paper); color: var(--sub); font-size: 10px; line-height: 1; display: grid; place-items: center; }
.vote button:hover { border-color: var(--ink); color: var(--ink); }

/* 理由に付ける「納得」。印は、手のひらを拳で打つ形の線画にする。押すと拳を臙脂で塗る */
.nod { display: flex; align-items: center; gap: 3px; width: fit-content; margin: 4px 0 0 auto; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--glass); font: 700 12px/1.4 var(--meta); color: var(--enji); }
.nod .lbl { font-weight: 500; color: var(--t2); margin-right: 2px; }
.nod svg { width: 17px; height: 17px; fill: none; stroke: #8a7a7c; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nod[aria-pressed="true"] svg { stroke: var(--enji); }
.nod[aria-pressed="true"] .fist { fill: var(--enji); }
.nod[aria-pressed="true"] .fist + path { stroke: var(--paper); }
.nod:hover:not(:disabled) { background: var(--paper); }
.nod:disabled { cursor: default; }

/* 「ほか〜件を読む」と「＋ 〜を足す」は、列のいちばん下に右寄せで置く */
.foot { align-self: stretch; display: flex; justify-content: flex-end; gap: 14px; margin-top: 2px; }
.foot button { font: 500 12px/1.6 var(--meta); color: var(--sub); }
.foot .more { text-decoration: underline; text-underline-offset: 3px; }
.foot button:hover { color: var(--ink); }

/* 合言葉付き（2026-10-31） */
.send-text { font-size: 14px; padding: 4px 0 4px 10px; text-decoration: underline; text-underline-offset: 3px; }
.private { margin: 0 0 20px; }
.private button { margin-left: 4px; }
.cite input[type="password"] { border: 0; border-bottom: 1px solid var(--t4); outline: 0; padding: 2px 0; margin-left: 8px; font: inherit; }
.cite input[hidden] { display: none; }

/* 吹き出しの中で書く欄 */
.b.writing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; text-align: left; }
.b.writing.claim, .b.writing.warrant { font-weight: 400; }
.b.writing input { border: 0; outline: 0; background: var(--glass); border-radius: 8px; padding: 2px 8px; min-width: 6em; font: inherit; }
.b.writing .count { padding-left: 0; }
.b.writing .gauge { width: 30px; height: 30px; }
.b.writing .gauge .ring { width: 30px; height: 30px; }
.b.writing .gauge .send { width: 22px; height: 22px; }
.b.writing .drop { font: 500 11px/1.6 var(--meta); color: #b00; }
.b.writing .err { grid-column: 1 / -1; font: 500 12px/1.6 var(--meta); color: #b00; }
.b.writing .err:empty { display: none; }

/* 反論と、そこから生まれた主張を、右の余白の細い線でつなぐ。スマホの幅では線は出さず、リンクの字だけにする */
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.links path { fill: none; stroke: #9bb3d6; stroke-width: 1; }

/* 広い画面では横に置く。観察を左、主張を右、理由と裏付けを真ん中の下、反論は主張の下 */
@media (min-width: 821px) {
  /* どのページも上の帯と本文を同じ1000pxにする。ページを移るたびに幅が変わってガクガクしないように（2026-10-31、指摘） */
  .top, main { max-width: 1000px; }
  .card { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 56px; align-items: start; grid-template-areas: "obs mid right"; }
  .card > .right { grid-area: right; gap: 12px; }
  .right > .claim { text-align: left; }
  .right > .rebs { order: 1; margin: 0; }
  .card > .mid { grid-area: mid; padding: 84px 0 0; }
  /* 理由がないときは、採用待ちの理由と「＋ 理由を足す」を点線より下に置く。点線と「理由がまだない」に重ねない（2026-10-31、指摘） */
  .card > .mid.leap { padding-top: 6px; }
  .card > .mid.leap:has(.wbox .b) { padding-top: 64px; }
  .mid .wbox { margin-left: 0; }
  .mid .leapnote { margin: 0; align-self: center; }
  .card > .stack { grid-area: obs; }
}
@media (max-width: 820px) {
  .links { display: none; }
  .right > .b { text-align: left; }
}