/* ライブラリーの棚のページ（用語 /terms/{slug}/・道具の種 /tools/…）の共通の見た目。
 * 部品の描き方は /shared/libpage.js。棚ごとの欄の見た目は terms.css・tools.css。 */

/* 面の土台（/d/ /events/ /context/ と同じトークン ―― 新しいデザインシステムは作らない） */
: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;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;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none;}
.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);}

/* ヘッダ（.topbar .in）と同じ 1100px。**幅を揃えないと本文の左端がロゴより
   内側に入り、面ごとにずれて見える**（820px だった頃に実際そう見えていた）。 */
.wrap{max-width:1100px;margin:0 auto;padding:14px 14px 40px;}
.loadbox{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;}

/* 2段組（/d/ /events/ と同じ作り・同じ折り返し幅）
 *
 * 右段は、用語集の一覧では「節への飛び先」と「絞り込み」、棚のページでは「基本情報」と
 * 「このページの中身」。**スクロールしても消えない位置**に置き、本文側には描かない
 * （同じものを2箇所に描くと、片方だけ直されて必ずずれる）。 */
@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;}
}
/* 狭い画面では段組をやめ、**右段を本文の上に**出す（棚のページは下。body.tp-page）。
   DOM は1つのまま order で入れ替える ―― 同じ内容を2度描かないため。 */
@media (max-width:879px){
  .wrap{display:flex;flex-direction:column;}
  .aside{order:-1;}
  .aside .ah{display:none;}
}


/* ── 棚のページ（.tp の下）─────────────────────────────
 *
 * 形はモックの用語のページ（フィジカルAI）と道具の種のページ（Claude Code）。部品は
 * 出来事の流れ（stories.css）と同じ形だが、用語集の一覧（.sec など）と名前がぶつかるので、
 * ここでは .tp の下に閉じる。 */
.tp .crumb{font-size:12.5px;color:var(--muted);padding:2px 0 2px;display:flex;flex-wrap:wrap;gap:6px}
.tp .crumb a{color:var(--teal-mid)}
.tp .eyebrow{display:flex;align-items:center;gap:4px 10px;margin-top:6px}
.tp .shelfpill{font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:2px 11px;border-radius:999px;
  line-height:1.6;background:#E4EDD9;color:#3F5B25}
.tp h1{font-family:var(--serif);font-size:28px;line-height:1.4;margin:4px 0 8px;color:var(--teal);word-break:auto-phrase}
.tp h1 small{font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);margin-left:8px;white-space:nowrap}
@media (max-width:480px){ .tp h1{font-size:23px} }
.tp .termdef{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:10px;padding:12px 16px;max-width:76ch}
.tp .termdef .lab{font-size:11.5px;font-weight:700;color:var(--teal-mid);letter-spacing:.05em}
.tp .termdef p{font-size:15px;line-height:1.9;margin-top:2px}
.tp .termdef .src{font-size:11.5px;color:var(--muted);margin-top:6px}
.tp .stats{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted);font-size:12.5px;margin-top:10px}
.tp .stats b{color:var(--ink)}
.tp .headtools{display:flex;gap:10px;align-items:center;margin-top:8px}
.tp .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}
.tp .copybtn+.ok{font-size:12px;color:#5E8C6A}
.tp .psec{margin-top:26px;scroll-margin-top:12px}
.tp .psec>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}
.tp .psec>h2 .ct{font-family:inherit;font-size:12px;color:var(--muted);font-weight:600}
.tp .psec>.lead{color:var(--muted);font-size:12.5px;margin:0 0 10px;max-width:72ch}
.tp .empty{font-size:13px;color:var(--muted)}
.tp .rows{border-top:1px solid var(--line)}
.tp .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}
.tp .row .d{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tp .row a{font-size:14px;font-weight:700;text-decoration:none}
.tp .row a:hover{text-decoration:underline}
@media (max-width:480px){ .tp .row{grid-template-columns:minmax(0,1fr)} }
.tp .vlist{display:grid;gap:10px}
.tp .vi{background:var(--paper);border:1px solid var(--line);border-left:4px solid #C0962F;border-radius:10px;padding:12px 16px}
.tp .vh{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.tp .vh b{color:var(--ink);font-size:13.5px}
.tp .vh .memberlink{margin:0}
.tp .vq{font-family:var(--serif);font-size:15px;line-height:1.95;margin-top:6px;max-width:66ch}
.tp .lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.tp .lk{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tp .lk h3{font-size:12px;margin:0 0 6px;color:var(--teal)}
.tp .lk ul{list-style:none;display:grid;gap:6px;font-size:13px}
.tp .lk li small{display:block;color:var(--muted);font-size:11.5px}
.tp .about{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tp .about dl{display:grid;grid-template-columns:9em minmax(0,1fr);gap:8px 14px;font-size:13px}
.tp .about dt{font-weight:700;color:var(--teal-mid)}
.tp .about dd{margin:0;line-height:1.8}
@media (max-width:560px){ .tp .about dl{grid-template-columns:minmax(0,1fr)} }
/* 右段（基本情報・このページの中身）。語のページでは本文の下に置く */
.aside .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:12px}
.aside .kv dt{color:var(--muted)}
.aside .kv dd{margin:0}
.aside .toc{margin:0;padding-left:18px;font-size:12.5px;line-height:1.9}
.aside .toc a{color:var(--teal-mid);text-decoration:none}
@media (max-width:879px){
  body.tp-page .aside{order:1;margin-top:26px}
  body.tp-page .aside .box{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
  body.tp-page .aside .ah{display:block}
}
.aside .ah{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:8px}
/* 台帳の欄（語のページ）：登場の推移・見ておく会社・最近の記事 */
.tp .row .src{font-size:11.5px;color:var(--muted);margin-top:2px}
.tp .row .src a{font-size:11.5px;font-weight:400}
.tp .lk h3 small{font-weight:400;color:var(--muted)}
.tp ol.who{margin:0;padding-left:1.4em;display:grid;gap:4px;font-size:13px}
.tp ol.who small{color:var(--muted)}
.tp .spark{display:grid;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tp .sphead{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:6px}
.tp .sphead .spl{font-size:11.5px;color:var(--muted);font-weight:700}
.tp .viewbar{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.tp .vb{font:inherit;font-size:11.5px;font-weight:700;border:0;background:var(--paper);color:var(--teal-mid);padding:3px 10px;cursor:pointer}
.tp .vb[aria-pressed="true"]{background:var(--teal);color:#fff}
.tp .spv{display:grid;gap:4px}
.tp .spv[hidden]{display:none}
.tp .sp{display:grid;grid-template-columns:minmax(0,1fr) 4.2em;gap:10px;align-items:end;font-size:12.5px}
.tp .sp .bars{display:flex;align-items:flex-end;gap:2px;height:44px;border-bottom:1px solid var(--line)}
.tp .sp .bars i{flex:1 1 0;background:#C0962F;border-radius:2px 2px 0 0;min-height:1px}
.tp .sp .bars i.z{background:var(--line)}
.tp .sp .v{text-align:right;color:var(--muted)}
.tp .sp.axis .bars{border:0;height:auto;justify-content:space-between;font-size:10.5px;color:var(--muted)}
/* 名前のある行を並べる図（道具の種：自分と同じ働きの道具を同じ目盛りで） */
.tp .spv.named .sp{grid-template-columns:9.5em minmax(0,1fr) 4.2em}
.tp .spv.named .sp .nm{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
.tp .spv.named .sp .nm a{color:var(--teal-mid);text-decoration:none}
.tp .spv.named .sp .bars{height:30px}
.tp .sp:not(.me) .bars i:not(.z){background:#9DB8BF}
.tp .spv:not(.named) .sp .bars i:not(.z),.tp .sp.me .bars i:not(.z){background:#C0962F}
.tp .sp.me .nm{font-weight:700;color:var(--ink)}
@media (max-width:480px){ .tp .spv.named .sp{grid-template-columns:6.5em minmax(0,1fr) 3.4em} }
/* 毎朝の読み解きの本文（readings[].interpretation）。畳んでおく */
.tp details.more{margin-top:4px;font-size:12.5px}
.tp details.more summary{cursor:pointer;color:var(--teal-mid);font-weight:700}
.tp details.more p{line-height:1.9;margin-top:4px;max-width:70ch}

/* 棚のページで共通の小さな部品（道具の種・課題の種・戦略の種） */
.tp .eyebrow .kind{font-size:12.5px;color:var(--muted);font-weight:700}
.tp .deck{font-size:14px;line-height:1.9;max-width:72ch;color:var(--ink)}
/* ページの頭の要点（AIが週1回書く）。題名のすぐ下 */
.tp .ailead{max-width:72ch;margin:8px 0 8px;padding:2px 0 2px 12px;border-left:3px solid var(--teal-soft)}
.tp .ailead p{font-size:14.5px;line-height:1.85;color:var(--ink);margin:0}
.tp .ailead .by{font-size:11px;color:var(--muted);margin-top:3px}
/* 札：発表（会社・提供元自身）と報道 */
.tp .kt{display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;padding:0 6px;margin-right:6px;
  line-height:1.7;vertical-align:1px;white-space:nowrap}
.tp .kt.off{background:var(--teal);color:#fff}
.tp .kt.rep{background:var(--teal-soft);color:var(--teal-mid)}
/* 記録の行 */
.tp .rec .l1{font-size:14px;line-height:1.75}
.tp .rec .l1 b{font-weight:700}
.tp details.rest{margin-top:8px}
.tp details.rest summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--teal-mid)}
.tp .figure{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tp ul.insight{margin:10px 0 0 1.2em;display:grid;gap:4px;font-size:13px;line-height:1.8;max-width:72ch}
.tp .caveat{font-size:11.5px;color:var(--muted);margin-top:6px}
/* 一覧の札（/tools/・/issues/・/companies/） */
.tp h2.ih{font-family:var(--serif);font-size:19px;color:var(--teal);margin:22px 0 8px;display:flex;align-items:baseline;gap:10px}
.tp h2.ih .ct{font-family:inherit;font-size:12px;color:var(--muted);font-weight:600}
.tp .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tp .tcard{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.tp .tcard h2 a{color:var(--teal);text-decoration:none}
.tp .tcard ul{list-style:none;display:grid;gap:4px;font-size:13.5px}
.tp .tcard li a{font-weight:700;text-decoration:none}
.tp .tcard li small{color:var(--muted);font-size:11.5px;margin-left:8px}

/* どんな会社・製品か／もう少し詳しく（AIが月1回書く）。題名の下・用語の「ひとことで」の下 */
.tp .aiabout{max-width:72ch;margin:10px 0 8px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.tp .aiabout .lab{font-size:11.5px;font-weight:700;color:var(--teal);margin-bottom:4px}
.tp .aiabout p{font-size:14px;line-height:1.9;margin:0}
.tp .aiabout .by{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted);margin-top:6px}
.tp .aiabout .by a{font-weight:700;color:var(--teal-mid)}
.tp .row .src a.tostory{color:var(--teal-mid)}

/* セッションの体験（行ごと押せる。種類の札・題・回） */
.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)}
/* 棚をまたぐ行き先（題の下）。道具の種の提供元 ⇔ 戦略の種の会社 */
.tp .jump{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.tp .jump a{display:inline-block;font-size:13.5px;font-weight:700;color:var(--teal);background:var(--paper);border:1px solid var(--teal-mid);border-radius:999px;padding:5px 14px;text-decoration:none}
.tp .jump a:hover{background:var(--teal-soft)}
.tp .jump .jl{align-self:center;font-size:13px;font-weight:700;color:var(--ink)}
/* グループ会社（戦略の種の会社のページの頭） */
.tp .grp{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px;margin:0 0 12px}
.tp .grp b{font-size:11.5px;color:var(--muted);font-weight:700;margin-right:6px}
.tp .grp a{color:var(--teal-mid);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(61,107,119,.45)}
/* 読み解きの「第N回のセッション」（その回の記録へ。/d/ の .interp a.slink と同じ見た目） */
details.more a.slink{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(0,68,85,.35)}