/* d/app.html の組版。app.html から外に出してある —
事前レンダーでページを何百枚も焼くので、埋め込むと同じ 13KB を
毎ページ複製することになり、ページ間でキャッシュも効かない。 */
/* 投票ページ(/v/)と同じトークン。新しいデザインシステムは作らない。 */
:root{
--teal:#004455; --teal-mid:#3D6B77; --teal-soft:#E3EDEF;
--terra:#C75A3C; --terra-soft:#F8EAE3;
--ink:#16282D; --muted:#5C7278; --line:#D3DFE2;
--bg:#F2F6F7; --paper:#FFF; --moss:#8A6D3B; --moss-soft:#F5EFE2;
--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:"Inter","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
background:var(--bg);color:var(--ink);font-size:14px;line-height:1.7;}
a{color:var(--teal);}
.topbar{background:var(--teal);color:#fff;padding:12px 16px 0;}
.topbar .in{max-width:1100px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
color:inherit;text-decoration:none;}
.brand:hover{text-decoration:underline;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none;}
.sub{font-size:11px;color:#9FC0C9;margin-top:2px;}
/* **折り返させる。** タブが5つになってから、携帯幅では一行に収まらなくなった。
収まらないぶんはページごと横にはみ出し、横スクロールすると濃色の帯が
画面幅までしか塗られていないので、ヘッダが途中で切れて見える（実機で発生）。 */
.tabs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tabs a{flex:none;padding:8px 22px;font-size:12.5px;font-weight:700;color:#9FC0C9;
background:rgba(255,255,255,.07);border-radius:8px 8px 0 0;text-decoration:none;}
.tabs a.active{background:var(--bg);color:var(--teal);}
.wrap{max-width:1100px;margin:0 auto;padding:12px 14px 60px;}
.datenav{display:flex;align-items:center;justify-content:space-between;
padding:10px 2px;font-size:12px;color:var(--muted);gap:10px;}
.datenav .cur{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--teal);}
.datenav a{text-decoration:none;font-weight:600;}
.datenav a.off{color:var(--line);pointer-events:none;}
/* 冒頭ダイジェスト — Circle投稿と同じテキストを共用する */
.glance{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--teal);
border-radius:0 9px 9px 0;padding:12px 14px;margin-bottom:14px;}
.glance h2{font-family:var(--serif);font-size:14px;color:var(--teal);margin-bottom:8px;}
.glance ul{list-style:none;display:grid;gap:5px;}
.glance li{display:grid;grid-template-columns:52px 1fr;gap:9px;font-size:12.5px;line-height:1.65;align-items:baseline;}
.glance li .k{font-size:10px;font-weight:700;color:#fff;background:var(--teal);
border-radius:3px;padding:1px 0;text-align:center;}
.glance li .k.seed{background:var(--moss);}
.glance .note{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);
font-size:11px;color:var(--muted);}
.seclabel{display:flex;align-items:center;gap:8px;margin:18px 0 8px;}
.seclabel .bar{width:3px;height:15px;background:var(--teal);flex:none;}
.seclabel h3{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--teal);}
.seclabel .ct{margin-left:auto;font-size:11px;color:var(--muted);}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;margin-bottom:10px;}
.card .rk{font-size:11px;font-weight:700;color:var(--terra);letter-spacing:.06em;
font-variant-numeric:tabular-nums;}
.card h4{font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.55;
margin:2px 0 8px;text-wrap:balance;}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:20px;
padding:1px 9px;font-size:10.5px;color:var(--muted);}
.chip.anchor{background:var(--terra-soft);border-color:rgba(199,90,60,.4);
color:#9c452e;font-weight:700;}
a.chip.anchor{text-decoration:none;cursor:pointer;}
a.chip.anchor:hover{background:var(--terra);color:#fff;border-color:var(--terra);}
.glance li a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);}
.glance li a:hover{border-bottom-color:var(--teal);}
.badge{border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;}
.badge.layer{background:var(--teal-soft);color:var(--teal);border:1px solid rgba(0,68,85,.3);}
.badge.upd{background:#f3eee2;color:var(--moss);border:1px solid rgba(138,109,59,.45);}
.badge.new{background:var(--terra);color:#fff;}
blockquote{background:var(--teal-soft);border-left:3px solid var(--teal);
border-radius:0 6px 6px 0;padding:10px 12px;margin:10px 0;}
blockquote .cite{font-size:10.5px;color:var(--teal);font-weight:700;margin-bottom:4px;}
/* 補完アンカー。発言録ではないので、引用のかたち（明朝＋カギ括弧）を借りない。
地の文に近い見た目にして、誰かの言葉と読み違えられないようにする。 */
blockquote.ctx{background:#FBFAF7;border-left-style:dashed;border-left-color:var(--teal-mid);}
blockquote.ctx p{font-family:inherit;font-size:12.5px;color:var(--ink);}
blockquote.ctx .cite{color:var(--teal-mid);}
blockquote p{font-family:var(--serif);font-size:13.5px;line-height:1.95;color:#20343a;}
/* **カードの中では1つの行長に揃える。** 発言録は全幅なのに読み替えと
「試してみるなら」だけ 62ch（≒全幅の6割）で折り返していたため、同じカードの
中で行末が2段階にずれ、途中から意図せず改行が入ったように見えていた。
PCでは右の3割が丸ごと空くので、なおさら壊れて見える。行長を抑えたいなら
カード自体を狭くする話で、本文だけを狭めると不揃いになる。 */
.interp{font-size:13.5px;line-height:1.95;}
.try{background:var(--bg);border:1px dashed var(--line);border-radius:6px;
padding:9px 11px;margin-top:10px;font-size:12px;line-height:1.75;}
/* 日本語の本文の組版。
**overflow-wrap:anywhere を入れてはいけない。** 「行末の余りが揃わない」を
直そうとして入れたが、これは「どこで改行してもよい」という指定なので、
justify と組むと欧文の単語の途中でも改行して行を埋めにいく。直そうとした
問題より悪い見た目になった（Fable / AI などが分断された）。
改行位置は禁則（line-break:strict）に任せ、両端揃えは行末の余りだけを詰める。 */
.jp{text-align:justify;line-break:strict;word-break:normal;}
/* URLのような切れ目の無い文字列だけは、はみ出すより折り返すほうがよい */
.jp a, .srcs a{overflow-wrap:anywhere;}
/* AIが書いた部分・過去セッションの発言録・元記事を見分けられるようにする。
ここを混ぜると、AIの解釈が発言録の一部に見えてしまう。 */
.byline{display:flex;align-items:center;gap:6px;margin:10px 0 4px;
font-size:10.5px;color:var(--muted);}
.byline .ai{display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:16px;padding:0 5px;border-radius:4px;
background:var(--teal-mid);color:#fff;font-size:9.5px;font-weight:700;
letter-spacing:.06em;flex:none;}
.byline .who{font-weight:700;color:var(--teal-mid);}
blockquote .cite .src{display:inline-block;background:#fff;border-radius:3px;
padding:0 5px;margin-right:6px;font-size:9.5px;letter-spacing:.06em;
border:1px solid rgba(0,68,85,.25);}
.try b{display:block;color:var(--moss);font-size:10.5px;letter-spacing:.06em;margin-bottom:2px;}
.srcs{margin-top:11px;border-top:1px dashed var(--line);padding-top:9px;}
.srcs .sh{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:5px;}
.srcs a{display:flex;gap:9px;font-size:12px;text-decoration:none;padding:3px 0;line-height:1.6;}
.srcs a .dd{font-size:11px;color:var(--muted);flex:none;min-width:34px;font-variant-numeric:tabular-nums;}
.srcs a .md{display:inline-block;margin-left:7px;font-size:10.5px;color:var(--muted);
border:1px solid var(--line);border-radius:20px;padding:0 8px;vertical-align:1px;}
/* 日付を左カラムに固定して、本文を横に伸ばす。1カラムに積むとPCでは右半分が
まるごと空いてしまう（カレンダー(/events/)側と同じ組み方に揃える）。 */
.ev{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:11px 14px;margin-bottom:8px;
display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;}
.ev > .when{font-size:13px;font-weight:700;color:var(--teal);
font-variant-numeric:tabular-nums;line-height:1.45;}
.ev .nm{font-size:13.5px;font-weight:700;margin:0 0 6px;text-wrap:balance;}
.ev .upd{font-size:11.5px;color:var(--moss);margin-top:5px;line-height:1.6;}
.ev .dl{font-size:11.5px;color:var(--terra);margin-top:3px;}
.ev .evnote{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.7;}
.chip.unv{background:var(--bg);border-color:var(--line);color:var(--muted);}
.chip.est{background:#fff;border-style:dashed;border-color:var(--muted);color:var(--muted);}
.ev .evsrc{margin-top:6px;padding-top:5px;border-top:1px dashed var(--line);
font-size:10.5px;color:var(--muted);}
.ev .evsrc a{color:var(--teal-mid);}
/* ニュースカードの「今回の新展開」。催しの行（.ev）とは別物 */
.chg{background:var(--paper);border:1px solid var(--line);border-radius:8px;
padding:8px 11px;margin:8px 0;}
.chg .upd{font-size:11.5px;color:var(--moss);line-height:1.7;}
.evmore{margin:-2px 0 9px;font-size:11.5px;}
.evmore a{text-decoration:none;font-weight:700;}
/* 1話題＝1枚のカード。話題の切れ目が見えないと構造が読み取れない */
.whywrap{margin-top:2px;}
.wcard{background:linear-gradient(180deg,#FBF7EF 0%,#F5EFE2 100%);
border:1px solid #E6DCC6;border-radius:11px;padding:13px 14px;margin-bottom:12px;}
.wtop{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;}
.wno{font-size:10px;font-weight:700;letter-spacing:.08em;color:#fff;
background:var(--moss);border-radius:4px;padding:2px 8px;flex:none;}
.wlab{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--moss);}
.trigger{background:var(--paper);border:1px solid #E6DCC6;border-radius:7px;
padding:9px 11px;font-size:12.5px;line-height:1.7;}
.trigger b{color:var(--moss);font-size:10.5px;letter-spacing:.05em;display:block;margin-bottom:2px;}
.trigger .wsrc{display:inline-block;margin-left:8px;font-size:10.5px;color:var(--muted);
border:1px solid #E6DCC6;border-radius:20px;padding:0 8px;}
.wmore{margin-top:8px;font-size:11.5px;}
.wmore summary{cursor:pointer;color:var(--moss);font-weight:700;}
.idea.dim{opacity:.72;}
.idea{background:var(--paper);border:1px solid #E6DCC6;border-radius:7px;
padding:11px 12px;margin-bottom:8px;}
.idea .lab{font-size:11px;font-weight:700;color:var(--terra);}
.idea h5{font-size:14px;font-weight:700;line-height:1.55;margin:2px 0 6px;}
.idea p{font-size:12.5px;line-height:1.85;}
.asym{background:var(--terra-soft);border-radius:5px;
padding:7px 10px;margin-top:8px;font-size:11.5px;line-height:1.65;color:#8d3f2b;}
.asym summary{cursor:pointer;font-weight:700;}
.asym summary::marker{color:#c08a76;}
/* 「なぜやる価値があるのか」を案の本体として先に出す。how（作り方）は
その下に畳む。以前は body（how）しか出しておらず、「〇〇する」という
作業の説明だけが並んでいて、WHYの種という名前と中身が合っていなかった。 */
.idea .why{font-size:13px;line-height:1.9;margin:0 0 2px;}
.idea .rows{margin-top:8px;font-size:11.5px;line-height:1.75;}
.idea .rows summary{cursor:pointer;font-weight:700;color:var(--moss);}
.idea .rows dl{margin:7px 0 0;display:grid;grid-template-columns:max-content minmax(0,1fr);
gap:4px 10px;}
.idea .rows dt{color:var(--moss);font-weight:700;white-space:nowrap;}
.idea .rows dd{margin:0;color:var(--ink);}
/* おすすめ対象。案が誰に向いているかを最初に出す */
.chip.aud{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
/* 「いちばん近い」。断定の .aud と並んだとき別物だと分かるようにする ―
塗りではなく破線の枠、色も控えめ。 */
.chip.near{background:transparent;border-style:dashed;border-color:var(--teal-mid);
color:var(--teal-mid);font-weight:600;}
/* 動き方。誰向けか（.aud）とは別の情報なので、色の系統を分ける */
.chip.move{background:var(--terra-soft);border-color:rgba(199,90,60,.35);color:#8c3f27;
font-weight:600;}
.whywrap .miss{margin-top:10px;padding-top:9px;border-top:1px dashed #E6DCC6;
font-size:11px;color:#8a7a58;line-height:1.7;}
.fold{display:block;width:100%;text-align:center;border:1px dashed var(--line);
background:var(--paper);border-radius:6px;padding:7px;font-size:11.5px;
color:var(--teal);font-weight:700;cursor:pointer;margin-bottom:8px;}
.closeq{background:var(--teal);color:#fff;border-radius:9px;padding:15px;
margin-top:12px;text-align:center;}
.closeq p{font-family:var(--serif);font-size:14.5px;font-weight:700;line-height:1.8;}
.closeq .s{font-size:11.5px;color:#9FC0C9;margin-top:6px;}
.closeq a{display:inline-block;margin-top:11px;background:var(--terra);color:#fff;
border-radius:6px;padding:8px 20px;font-size:12.5px;font-weight:700;text-decoration:none;}
.arc a{display:block;background:var(--paper);border:1px solid var(--line);
border-radius:9px;padding:11px 14px;margin-bottom:7px;text-decoration:none;color:var(--ink);}
.arc .dt{font-size:12.5px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;}
.arc .hd{font-size:12.5px;line-height:1.7;margin-top:2px;}
.arc .anchors{margin-top:5px;font-size:10.5px;color:#a8a49a;
font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:6px;}
.arc-dead{background:var(--paper);border:1px dashed var(--line);border-radius:9px;
padding:11px 14px;margin-bottom:7px;color:var(--muted);}
.arc-dead .dt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.arc-dead .hd{font-size:12.5px;line-height:1.7;margin-top:2px;}
/* アーカイブの月へ飛ぶ札。広い画面では右段に置くので、本文側の控えは隠す
（狭い画面では右段が本文の下に回ってしまい、道しるべにならないため）。
⚠ 隠す側は `.mjump.narrow-only` と**詳細度を上げて**書くこと。`.narrow-only`
だけだと、下の `.mjump{display:flex}` が後から来て勝つ（実際そうなった）。 */
.mjump{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;
font-size:11px;color:var(--muted);}
@media (min-width:880px){ .mjump.narrow-only, .narrow-only{display:none;} }
.mjump a{display:inline-flex;align-items:baseline;gap:5px;background:var(--paper);
border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:11.5px;
font-weight:700;color:var(--teal);text-decoration:none;}
.mjump a:hover{border-color:var(--teal-mid);}
.mjump a b{font-size:10px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
/* 論点の一覧（索引・一緒に引かれた論点・同じ領域を扱った回）。
1行1論点。ID を左に残すのは、記事の中のチップと同じ見た目で対応が付くようにするため。 */
.rlist{margin-bottom:4px;}
.rrow{display:flex;align-items:baseline;gap:9px;background:var(--paper);
border:1px solid var(--line);border-radius:9px;padding:9px 13px;margin-bottom:6px;
text-decoration:none;color:var(--ink);}
.rrow:hover{border-color:var(--terra);}
.rrow .rid{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--terra);
font-variant-numeric:tabular-nums;min-width:54px;}
.rrow .rlb{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.65;}
.rrow .rct{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.rmore{display:inline-block;margin:2px 0 10px;font-size:11.5px;font-weight:700;
color:var(--teal);text-decoration:none;}
.rmore:hover{text-decoration:underline;}
/* その回の前後の論点。2枚並べ、狭い画面では縦に積む */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px;}
.flow .fl{display:block;background:var(--paper);border:1px solid var(--line);
border-radius:9px;padding:9px 13px;text-decoration:none;color:var(--ink);}
a.fl:hover{border-color:var(--terra);}
.flow .fl .d{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--terra);}
.flow .fl .t{display:block;font-size:12.5px;line-height:1.6;margin-top:3px;}
.flow .fl .s{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;}
.flow .fl.off{border-style:dashed;color:var(--muted);}
.flow .fl.off .d{color:var(--muted);}
/* 前後の論点にも ID を出す。右段の「同じ節の論点」等と同じ印で並ぶので、
同じものを指しているかが読み手に分かる */
.flow .fl .d .id{margin-left:7px;color:var(--muted);font-weight:700;
font-variant-numeric:tabular-nums;}
@media (max-width:520px){ .flow{grid-template-columns:1fr;} }
/* 右段の箱の中身（一覧系の面で使う。`.rrow` は本文用で、箱に入れると枠が二重になる） */
.box .ct{margin-left:auto;font-weight:400;letter-spacing:0;color:var(--muted);font-size:10px;}
.box .ah{display:flex;align-items:baseline;gap:6px;}
.box .lnk{display:flex;align-items:baseline;gap:6px;padding:6px 0;
border-top:1px dashed var(--line);text-decoration:none;color:var(--ink);
font-size:12px;line-height:1.55;}
.box .lnk:hover{color:var(--teal);}
.box .lnk .id{flex:none;font-size:10px;font-weight:700;color:var(--terra);
font-variant-numeric:tabular-nums;}
.box .lnk .t{flex:1 1 auto;min-width:0;}
.box .lnk .n{flex:none;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;}
.box .note{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);
font-size:10.5px;color:var(--muted);line-height:1.75;}
.box .mjump{margin-bottom:0;}
.loadbox{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;}
.hidden{display:none;}
@media (min-width:880px){
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start;}
.wrap > .main{min-width:0;}
.aside{position:sticky;top:14px;}
.aside .box{background:var(--paper);border:1px solid var(--line);
border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.aside .ah{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:8px;}
.datenav,.glance,.seclabel,.card,.ev,.whywrap,.arc{grid-column:1;}
}
/* 狭い画面ではサイドバーを畳むが、**中身は捨てない**。同じ内容を本文の末尾に
出す（論点チップは蓄積への入口なので、スマホで読む人から消えると意味がない）。 */
#aside-narrow{display:none;}
@media (max-width:879px){
.aside{display:none;}
#aside-narrow{display:block;margin-top:18px;}
#aside-narrow .box{background:var(--paper);border:1px solid var(--line);
border-radius:10px;padding:12px 14px;margin-bottom:10px;}
#aside-narrow .ah{font-size:10px;letter-spacing:.12em;color:var(--muted);
font-weight:700;margin-bottom:8px;}
}
/* 記事本文からの用語リンク。**本文の流れを切らない見た目にする** ―― 色を変えず、
細い下線だけ。リンクだらけに見えると読み物として読めなくなる
（1記事2語・同じ語はページで1回、という上限は d.js 側）。 */
.interp .tlink{ color:inherit; text-decoration:none;
border-bottom:1px dotted var(--teal-mid); }
.interp .tlink:hover{ color:var(--teal); border-bottom-color:var(--teal);
background:var(--teal-soft); }