/* 出来事の流れ（/stories/・/changes/）の組版。
   部品は着地ページのモック（shared/mock.css・8回のレビューで決まった形）から、
   本番に要るものだけを移した。モックの帯・要件の注（data-req）・点線の置き場は持たない。
   ヘッダ・タブ・フッタは他の面と同じ（/context/ と同じトークン）。 */
:root{
  --teal:#004455; --teal-mid:#3D6B77; --teal-soft:#E3EDEF; --teal-faint:#F4F8F9;
  --terra:#B4532F; --ink:#16282D; --muted:#5C7278; --line:#D3DFE2;
  --bg:#F2F6F7; --paper:#FFF; --gold-soft:#F6EED9; --ok:#5E8C6A;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Inter","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.75;-webkit-text-size-adjust:100%;}
a{color:var(--teal);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

/* ── ヘッダ（他の面と同じ） */
.topbar{background:var(--teal);color:#fff;padding:12px 16px 0;}
.topbar .in{max-width:1100px;margin:0 auto;position:relative;}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:inherit;text-decoration:none;}
.brand:hover{text-decoration:underline;}
.sub{font-size:11px;color:#9FC0C9;margin-top:2px;}
.tabs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tabs a{flex:none;padding:8px 18px;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);}

/* ── 本文と右段。ヘッダと同じ 1100px（面ごとに左端がずれないように） */
.wrap{max-width:1100px;margin:0 auto;padding:0 14px 40px;display:grid;
  grid-template-columns:minmax(0,1fr) 270px;gap:0 28px;align-items:start;}
@media (max-width:900px){ .wrap{grid-template-columns:minmax(0,1fr);} }
.main{min-width:0}
.aside{min-width:0;display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;margin-top:52px}
.aside:empty{display:none}
@media (max-width:900px){ .aside{position:static;margin-top:26px} }
.loadbox{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:28px 16px;margin-top:16px;text-align:center;color:var(--muted);font-size:13px;}

.crumb{font-size:12.5px;color:var(--muted);padding:16px 0 2px;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--teal-mid)}

/* ── 冒頭 */
.head{padding:4px 0 2px;max-width:80ch}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--teal-mid);
  display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap}
.shelfpill{font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:2px 11px;border-radius:999px;line-height:1.6}
.sp-story{background:var(--gold-soft);color:#6f5414}
.head h1{font-family:var(--serif);font-size:28px;line-height:1.4;margin:4px 0 6px;color:var(--teal);
  text-wrap:balance;word-break:auto-phrase}
@media (max-width:480px){ .head h1{font-size:23px} }
.deck{font-size:15px;line-height:1.85;margin:2px 0 8px;max-width:64ch}
.defn{font-size:12.5px;background:var(--teal-faint);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;margin:0 0 8px;max-width:72ch;line-height:1.75}
.defn b{color:var(--teal);margin-right:4px}
.stats{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.stats b{color:var(--ink)}
.quietnote{display:inline-block;margin:6px 0 2px;font-size:12.5px;font-weight:700;color:var(--muted);
  background:#E3E8E9;border-radius:999px;padding:2px 12px}
.headtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.copybtn{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--paper);
  color:var(--teal);border-radius:999px;padding:3px 12px;cursor:pointer}
.copybtn+.ok{font-size:12px;color:var(--ok)}

/* ── 章 */
.sec{margin-top:26px;scroll-margin-top:12px}
.sec>h2{font-family:var(--serif);font-size:19px;color:var(--teal);margin:0 0 4px;display:flex;
  align-items:baseline;gap:10px;flex-wrap:wrap;text-wrap:balance;word-break:auto-phrase}
.sec>h2 .h2sub{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--teal-mid);
  background:var(--teal-soft);border-radius:999px;padding:1px 11px;align-self:center}
.sec>h2 .ct{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:600}
.sec>.lead{color:var(--muted);font-size:12.5px;margin:0 0 10px;max-width:72ch}
.scope{font-size:12px;color:var(--muted);background:var(--teal-faint);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;margin:0 0 10px;max-width:80ch}
.prose{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;
  font-size:14px;line-height:1.9;max-width:80ch}
.empty{font-size:13px;color:var(--muted)}

.cite{font-size:11.5px;color:var(--muted)}
.cite a{color:var(--muted)}

/* 行（日付＋本文） */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:0 12px;padding:8px 0;
  border-bottom:1px dashed var(--line);align-items:baseline}
.row .d{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;white-space:nowrap}
.row .l1{font-size:14px;line-height:1.65}
.row .l1 b{font-weight:700}
.row .l2{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;margin-top:3px;font-size:11.5px;color:var(--muted)}
.row .l1 .ol{color:var(--muted);font-size:13px;margin-left:6px}
.row .l2 details.more[open]{flex-basis:100%}
details.more summary{cursor:pointer;font-size:11.5px;color:var(--teal-mid);font-weight:700}
details.more p{color:var(--ink);font-size:13px;line-height:1.85;margin-top:4px;max-width:72ch}
.chip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:0 8px;color:var(--teal-mid);
  background:var(--paper);text-decoration:none;white-space:nowrap}
.chip.anc{border-color:#C0962F;color:#7a5d17;background:var(--gold-soft);white-space:normal;border-radius:10px;line-height:1.55;max-width:100%}
@media (max-width:480px){
  .row{grid-template-columns:minmax(0,1fr);gap:1px 0}
  .row .d{font-size:11.5px}
}
details.rest{margin-top:6px}
details.rest>summary{cursor:pointer;color:var(--teal-mid);font-size:12.5px;font-weight:700;padding:6px 0}

/* 数字の注意 */
.numnote{margin-top:6px;font-size:12.5px;line-height:1.75;background:#FBF1EC;border:1px solid #EBCFC2;
  border-radius:8px;padding:6px 10px;max-width:80ch}
.numnote b{color:var(--terra);font-size:11px;letter-spacing:.04em;margin-right:8px}

/* 札（記事の性質・予定の種類） */
.kt{display:inline-block;font-size:10.5px;font-weight:700;line-height:1.55;padding:0 6px;border-radius:4px;
  margin-right:6px;vertical-align:1px;white-space:nowrap;font-style:normal}
.kt.rep{border:1px solid #9DB3B9;color:var(--muted);background:var(--paper)}
.kt.ann{border:1px solid var(--teal);background:var(--teal);color:#fff}
.kt.exp{border:1px solid #c9b78f;color:#7a5d17;background:var(--gold-soft)}
.kt.com{border:1px dashed #9DB3B9;color:var(--muted);background:var(--paper)}
.kt.fct{border:1px dashed #c9b78f;color:#7a5d17;background:var(--paper)}
.kt.ah-rule{border:1px solid transparent;background:var(--teal-soft);color:var(--teal)}
.kt.ah-plan{border:1px solid transparent;background:var(--gold-soft);color:#6f5414}
.kt.ah-goal{border:1px dashed #9DB3B9;color:var(--muted);background:var(--paper)}

/* 計画の型 */
.plans{display:grid;gap:10px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.ph1{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.ph1 b{font-size:14.5px;line-height:1.6}
.ph1 .who{font-size:12.5px;color:var(--muted)}
.plan .pt{font-size:13.5px;line-height:1.7;margin-top:4px}
.stage{margin-left:auto;font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap;border:1px solid transparent}
.st-idea{border:1px dashed #9DB3B9;color:var(--muted)}
.st-ann{background:var(--teal-soft);color:var(--teal)}
.st-build{background:var(--gold-soft);color:#6f5414}
.st-run{background:#E4EDD9;color:#3F5B25}
.st-slow{background:#F6E2D8;color:#97401F}
.st-stop{background:var(--ink);color:#fff}
.pfs{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:13px;line-height:1.65}
.pf i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-right:6px}
.plan .l2{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;margin-top:6px;font-size:11.5px;color:var(--muted)}
@media (max-width:480px){ .stage{margin-left:0} }

/* 報道の量 */
.spark{display:grid;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.sphead{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:6px}
.sphead .spl{font-size:11.5px;color:var(--muted);font-weight:700}
.viewbar{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.vb{font:inherit;font-size:11.5px;font-weight:700;border:0;background:var(--paper);color:var(--teal-mid);padding:3px 10px;cursor:pointer}
.vb[aria-pressed="true"]{background:var(--teal);color:#fff}
.spv{display:grid;gap:4px}
.sp{display:grid;grid-template-columns:minmax(0,1fr) 4.2em;gap:10px;align-items:end;font-size:12.5px}
.sp .bars{display:flex;align-items:flex-end;gap:3px;height:44px;border-bottom:1px solid var(--line)}
.spv[data-v="d"] .bars{gap:1px}
.sp .bars i{flex:1 1 0;background:#C0962F;border-radius:2px 2px 0 0;min-height:1px}
.sp .bars i.z{background:var(--line)}
.sp .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.sp.axis .bars{border:0;height:auto;justify-content:space-between;font-size:10.5px;color:var(--muted)}

/* 地域の動き */
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.rg{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:0;display:flex;flex-direction:column;gap:6px}
.rg.jp{border-color:#C0962F}
.rgh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rgh b{font-size:14px;color:var(--teal)}
.rgh span{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:3px;background:var(--teal-soft);overflow:hidden}
.meter i{display:block;height:100%;background:var(--teal-mid)}
.rg.jp .meter i{background:#C0962F}
.rg ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:12.5px;line-height:1.65}
.rg li .rd{color:var(--muted);font-size:11px;margin-right:6px;white-space:nowrap}
.rg li .cite{margin-left:6px;font-size:11px}

/* つながり */
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.lk{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.lk h3{font-size:12px;margin:0 0 6px;color:var(--teal);letter-spacing:.04em}
.lk ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:13px}
.lk li{line-height:1.6}
.lk li small{color:var(--muted)}
.lk .nolink{color:var(--ink)}

/* このページについて */
.about{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.about dl{display:grid;grid-template-columns:9em minmax(0,1fr);gap:8px 14px;margin:0;font-size:13px}
.about dt{font-weight:700;color:var(--teal-mid)}
.about dd{margin:0;line-height:1.8}
.about ul{margin:0;padding-left:1.2em}
@media (max-width:560px){ .about dl{grid-template-columns:minmax(0,1fr)} .about dd{margin-bottom:6px} }

/* 右段 */
.box{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.box h3{font-size:12.5px;margin:0 0 8px;color:var(--teal);letter-spacing:.04em}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:12px;font-variant-numeric:tabular-nums}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.toc{margin:0;padding-left:18px;font-size:12.5px;line-height:1.9}
.toc a{color:var(--teal-mid);text-decoration:none}
.box .latest{list-style:none;display:grid;gap:7px;font-size:12px;line-height:1.55}
.box .latest small{display:block;color:var(--muted);font-size:11px}

/* 出していないページ */
.gone{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 18px;margin-top:16px;font-size:14px;line-height:1.9}
.gone h1{font-family:var(--serif);font-size:20px;color:var(--teal);margin-bottom:6px}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ── 目次・テーマの入口 */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tcard{display:flex;flex-direction:column;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;text-decoration:none;color:var(--ink);min-width:0}
.tcard:hover{border-color:var(--teal-mid)}
.tcard b{font-size:14px;color:var(--teal);line-height:1.5}
.tcard .n{font-size:12px;color:var(--muted)}
.tcard .n i{font-style:normal;font-weight:700;color:var(--ink)}
.caveat{font-size:11.5px;color:var(--muted);margin-top:8px;max-width:80ch}
.tscope{font-size:12.5px;color:var(--muted);margin:0 0 8px;max-width:72ch}
.sec>h2 .tgo{font-family:var(--sans);font-size:13px;font-weight:700;margin-left:auto}
.cside{margin:2px 0 10px}
.clab{font-size:12px;font-weight:700;color:var(--teal-mid)}
.cchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cchip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:var(--paper);color:var(--ink);white-space:nowrap}
.cchip i{font-style:normal;color:var(--muted);margin-left:5px}
.slist{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline}
.srow .sn{font-weight:700;min-width:0}
.srow .sm{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.srow .sm b{color:var(--ink)}
.srow .sl{grid-column:1/-1;font-size:13px;line-height:1.7;color:var(--ink)}
.srow .ss{grid-column:1/-1;font-size:12px;color:var(--muted)}
.srow.quiet .sn,.srow.quiet .sn a{color:var(--muted)}
.kt.ty{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.kt.qt{background:#E3E8E9;color:var(--muted);border:1px solid transparent}
h3.mini{font-size:14px;color:var(--teal);margin:14px 0 4px}
@media (max-width:560px){
  .srow{grid-template-columns:minmax(0,1fr)}
  .srow .sm{text-align:left;white-space:normal}
}

/* ── 変更記録 */
.sp-lib{background:#E3E8E9;color:var(--teal)}
.watchg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.wm{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.wm .lab{font-size:12px;color:var(--muted)}
.wm .v{font-size:22px;font-weight:700;color:var(--teal);line-height:1.3}
.wm .v small{font-size:12px;color:var(--muted);font-weight:600;margin-left:4px}
.wm .line{font-size:12px;color:var(--muted)}
.wm.ok .v::after{content:"線の内側";font-size:11px;font-weight:700;color:#3F5B25;background:#E4EDD9;border-radius:4px;padding:0 6px;margin-left:8px;vertical-align:3px}
.wm.over{border-color:#EBCFC2}
.wm.over .v{color:var(--terra)}
.wm.over .v::after{content:"線を越えた";font-size:11px;font-weight:700;color:#97401F;background:#F6E2D8;border-radius:4px;padding:0 6px;margin-left:8px;vertical-align:3px}
.cfilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.cf{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:3px 10px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:2px}
.cf.on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.row .l2 .why{color:var(--ink)}
.kt.ck-new{background:var(--teal);color:#fff;border:1px solid var(--teal)}
.kt.ck-mrg{background:#EAE5F2;color:#5A4A7C;border:1px solid #cfc4e2}
.kt.ck-spl{background:var(--gold-soft);color:#6f5414;border:1px solid #e3d3a8}
.kt.ck-ren{background:var(--paper);color:var(--teal-mid);border:1px solid #9DB3B9}
.kt.ck-typ{background:var(--paper);color:var(--teal-mid);border:1px dashed #9DB3B9}
.kt.ck-thm{background:var(--teal-faint);color:var(--teal-mid);border:1px dashed #9DB3B9}
.kt.ck-zzz{background:#E3E8E9;color:var(--muted);border:1px solid transparent}
.kt.ck-re{background:#E4EDD9;color:#3F5B25;border:1px solid transparent}
#trend .sp.k .bars i{background:var(--teal-mid)}
#trend .sp.k.me .bars i{background:#C0962F}
#trend .sp.k .bars i.z{background:var(--line)}
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 18px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:4px 16px}
.kinds .it{padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.65}
/* 名前の付いた棒の行（テーマの報道の量・変更の数） */
.sp.k{grid-template-columns:minmax(0,11em) minmax(0,1fr) 4.2em}
.sp.k .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:1px}
.sp.k .bars{height:30px}
@media (max-width:480px){ .sp.k{grid-template-columns:minmax(0,7em) minmax(0,1fr) 3.6em} }
h3.mini .ct{margin-left:8px;font-size:12px;color:var(--muted);font-weight:400}

/* セッションの体験（行ごと押せる。種類の札・題・回） */
.xlist{display:grid;gap:6px}
.xlist .xi{display:flex;align-items:baseline;gap:8px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.6}
.xlist .xi:hover{border-color:var(--teal-mid)}
.xlist .xt{flex:1;font-weight:600;text-decoration:underline;text-decoration-color:rgba(61,107,119,.35);text-underline-offset:3px}
/* 体験の種類の札。セッションの記録のページ（article.ex .k）と同じ色。種類で色を分けない */
.xlist .xk{flex:none;font-size:11px;font-weight:700;border-radius:3px;padding:0 6px;color:#8A6D3B;background:#FBF8EF;border:1px solid rgba(192,150,47,.4)}
.xlist .xs{flex:none;font-size:11.5px;color:var(--muted)}
/* 読み解きの「第N回のセッション」（その回の記録へ。/d/ の .interp a.slink と同じ見た目） */
details.more a.slink{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(0,68,85,.35)}