:root{
  --bg:#e8edf1; --ink:#222a33; --muted:#5d6b78; --line:#cdd6de;
  --gold:#c9a227;   /* 転換点マーカー。CSS(.card.big::after) と JS(凡例)の両方がこの1変数を参照する */
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mincho{ font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif; }
header{ padding:18px 24px 12px; }
h1{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:clamp(1.3rem,3.4vw,1.7rem); margin:0 0 4px; letter-spacing:.02em; }
.sub{ color:var(--muted); font-size:.9rem; margin:0 0 12px; }
.controls{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:10px; }
.themes{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.themes button, .density button{ padding:6px 13px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:.83rem; font-family:inherit; color:var(--ink); white-space:nowrap; }
.themes button.active, .density button.active{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.density{ display:flex; align-items:center; gap:7px; }
.density-label, .themes-label, .search-label{ font-size:.78rem; color:var(--muted); white-space:nowrap; }
.search{ display:flex; align-items:center; gap:7px; }
#search{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:.83rem; font-family:inherit; color:var(--ink); background:#fff; min-width:170px; }
#search:focus-visible{ outline:2px solid #3b6fb0; outline-offset:1px; }
.search-count{ font-size:.74rem; color:var(--muted); white-space:nowrap; }
/* 検索ヒットはアンバーのリング＋淡いグローで一時強調（テーマ切替で消える） */
.card.search-hit{ outline:2px solid #d9822b; outline-offset:2px; box-shadow:0 0 0 4px rgba(217,130,43,.22),0 4px 14px rgba(40,60,80,.2); z-index:7; }
.legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
/* 使い方ボタン：チップ（丸ピル）と紛らわしくないよう、パネルと同じ角丸矩形（小さめ 8px）にする。
   リード文の直後に独立配置して目立たせる（詳しい読み方は中央モーダルにまとめた）。 */
.help-btn{ display:inline-block; margin:4px 0 12px; padding:7px 16px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font-size:.84rem; font-family:inherit; color:var(--ink); }
.help-btn:hover{ border-color:var(--ink); background:#f4f7fa; }
.help-btn:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; }

.timeline-wrap{ position:relative; }
.viewport{
  position:relative; overflow:auto; height:720px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#eef3f7,#e0e7ec); cursor:grab;
}
.viewport.grabbing{ cursor:grabbing; user-select:none; }
.inner{ position:relative; height:700px; }

.lane-band{ position:absolute; left:0; border-bottom:1px solid rgba(120,140,160,.14); }
/* z-index:1 でカード(z-index:2)より必ず背面に。DOM 生成順に依らずフェーズ線がカードに被らない。 */
.phase-band{ position:absolute; top:0; border-left:1px dashed rgba(110,130,150,.45); z-index:1; }
.phase-label{ position:absolute; top:6px; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:.92rem; color:#515a63; white-space:nowrap; z-index:1; }

svg.links{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
svg.links path{ fill:none; stroke-width:1.6; opacity:.55; transition:opacity .15s,stroke-width .15s; }
svg.links path.cross{ stroke-dasharray:5 4; opacity:.5; }
/* 同一人物・二つの顔＝因果でないので、細かい点線・灰色・低不透明度で「つながりだが因果ではない」と示す */
svg.links path.identity{ stroke:#9aa6b2; stroke-dasharray:2 4; opacity:.32; }
svg.links path.hot{ opacity:1; stroke-width:3; }

/* 全体表示（絞り込み無し）は線が輻輳するため既定で淡く隠し、カードのホバー/フォーカスで
   関連線だけ preview として浮かせる。テーマ絞り込み時は本数が少なく読めるので触らない。 */
/* 全体表示でも因果線をうっすら残す（差別化の核が「年表の壁」に見えないよう texture として提示）。
   ホバー/フォーカスで該当線が濃く浮く。 */
.viewport.dim-links svg.links path.link:not(.hot):not(.preview){ opacity:.1; }
svg.links path.preview{ opacity:.85; stroke-width:2.2; }

.card{
  position:absolute; width:188px; background:#fff; border:1px solid #d7dee4; border-left-width:4px;
  border-radius:9px; padding:8px 11px 9px; box-shadow:0 1px 3px rgba(40,60,80,.08);
  cursor:pointer; transition:opacity .18s, box-shadow .15s, transform .1s; z-index:2;
}
.card:hover{ box-shadow:0 4px 14px rgba(40,60,80,.18); transform:translateY(-1px); z-index:5; }
.card .yr{ font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.card .person{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:.95rem; margin:1px 0 2px; }
.card .title{ font-size:.79rem; color:#33414d; line-height:1.36; }
.card .field{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; color:var(--muted); margin-top:5px; }
.card.big{ width:206px; box-shadow:0 2px 8px rgba(40,60,80,.16); }
.card.big .person{ font-size:1.05rem; }
.card.big::after{ content:"●"; position:absolute; top:-7px; right:-7px; font-size:.6rem; color:var(--gold); }

/* シンプルモード: 全カードを均等に「人名（主）＋表題（従）」の2行で表示する（年代・ジャンルタグ・転換点
   マーカーは出さない）。人名だけでは「何をしたか」が分からないため表題を添え、狭い幅（188px）は保つ。
   転換点も特別扱いしない＝全カード同一スタイル。長い人名・表題は折り返す。 */
.card.compact{ padding:7px 12px 8px; }
.card.compact .person{ margin:0 0 2px; font-size:.9rem; white-space:normal; word-break:break-word; }

/* 表示モード「フル」（.full）＝compact カードを全て big 相当の広いカード（表題・分野つき）で常時表示する。
   .expanded は旧・2段階開示（1クリック拡大→2クリック詳細）の名残で、現在は使われない（1クリックで即詳細）。
   resetView 等からの防御的 collapseExpanded 呼び出しのためにスタイルだけ残置している。 */
.card.compact.expanded, .card.compact.full{ display:block; width:206px; }
.card.compact.expanded{ z-index:8; box-shadow:0 6px 20px rgba(40,60,80,.22); }
.card.compact.expanded .person, .card.compact.full .person{ font-size:1rem; margin:1px 0 2px; }
.card.active{ outline:2px solid var(--ink); outline-offset:1px; z-index:6; }
.card.related{ box-shadow:0 3px 12px rgba(40,60,80,.22); }
.card:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; z-index:6; }
.themes button:focus-visible, .panel .close:focus-visible, .conn:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; }
.panel:focus{ outline:none; }

.axis-tick{ position:absolute; bottom:2px; font-size:.7rem; color:#515a63; transform:translateX(-50%); }

/* 詳細は中央モーダルのポップアップで表示（背景は半透明バックドロップ） */
/* クリックで閉じるための透明キャッチャ。背景は減光しない＝タイムラインのつながりを隠さない。
   代わりに .viewport.focus で「選択＋関連＋つながり線」以外を淡くして因果の筋を浮かせる。 */
.panel-backdrop{ position:fixed; inset:0; background:transparent; visibility:hidden; z-index:19; }
.panel-backdrop.open{ visibility:visible; }
.viewport.focus .card:not(.active):not(.related){ opacity:.28; }
/* 減光中でもキーボードで到達したカードは完全不透明に戻し、フォーカスリングを視認できるようにする */
.viewport.focus .card:not(.active):not(.related):focus-visible{ opacity:1; }
.viewport.focus svg.links path.link:not(.hot){ opacity:.06; }
.panel{
  position:fixed; top:50%;
  /* 水平中央は margin-left（幅の半分ぶん左へ）で取り、transform は縦中央＋スケールだけにする。
     こうすると JS が left(px)+margin-left:0 を上書きするだけでパネルをカードの右へ寄せられ、
     開閉アニメの scale と水平位置決めが競合しない。既定（JS未実行のフォールバック）は従来どおり中央。 */
  left:50%; margin-left:calc(min(468px,92vw) / -2);
  width:min(468px,92vw); max-height:84vh; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 64px rgba(20,32,48,.30);
  padding:26px 28px 30px; overflow-y:auto; z-index:20;
  transform:translateY(-50%) scale(.96); opacity:0; visibility:hidden;
  /* visibility は開くとき即座に visible（＝直後の focus() を可能に）、閉じるときだけ .2s 遅延で hidden */
  transition:opacity .2s, transform .2s, visibility 0s linear .2s;
}
.panel.open{ opacity:1; visibility:visible; transform:translateY(-50%) scale(1); transition:opacity .2s, transform .2s, visibility 0s; }
.panel .close{ position:absolute; top:14px; right:16px; border:none; background:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--muted); }
.panel .close:hover{ color:var(--ink); }
.panel .p-yr{ font-size:.82rem; color:var(--muted); }
.panel .p-person{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:1.3rem; font-weight:700; margin:2px 0 6px; }
.panel .p-title{ font-size:.96rem; color:#2b3742; margin-bottom:10px; }
.panel .p-field{ display:inline-block; font-size:.72rem; padding:2px 9px; border-radius:999px; color:#fff; margin-bottom:12px; box-shadow:inset 0 0 0 3em rgba(0,0,0,.24); }
.panel .p-desc{ font-size:.86rem; line-height:1.62; color:#37424d; margin-bottom:16px; }
.panel h4{ font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; border-bottom:1px solid #eef1f4; padding-bottom:4px; }
.panel .conn{ font-size:.84rem; padding:5px 0; cursor:pointer; color:#2b3742; }
.panel .conn:hover{ color:#3b6fb0; }
.panel .conn .rel{ color:var(--muted); font-size:.76rem; }
/* 同じ人物・同じ概念の別の顔＝因果でないので中立色（青/アンバーの方向色は使わない） */
#pConnIdent .conn.ident{ color:#5d6b78; }
/* 上流「流れ込んだもの」＝青、下流「波及したもの」＝アンバーで方向を色分け */
#pConnUp .conn{ color:#3b6fb0; }
#pConnDown .conn{ color:#b87a3f; }
.panel #pRefs a{ color:#3b6fb0; font-size:.8rem; word-break:break-all; }

/* 使い方モーダル：静的な読み方説明。カード詳細（背景を減光しない）と違い読書用の一時オーバーレイなので、
   ここは背景を減光してよい。中央配置＋Escape/×/背景クリックで閉じ、開いたボタンへフォーカスを戻す。 */
.help-backdrop{ position:fixed; inset:0; background:rgba(20,28,38,.4); visibility:hidden; opacity:0; z-index:29; transition:opacity .2s, visibility 0s linear .2s; }
.help-backdrop.open{ visibility:visible; opacity:1; transition:opacity .2s; }
.help{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
  width:min(560px,92vw); max-height:86vh; overflow-y:auto; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 70px rgba(20,32,48,.34);
  padding:28px 30px 30px; z-index:30; opacity:0; visibility:hidden;
  transition:opacity .2s, transform .2s, visibility 0s linear .2s;
}
.help.open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); transition:opacity .2s, transform .2s, visibility 0s; }
.help .close{ position:absolute; top:14px; right:16px; border:none; background:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--muted); }
.help .close:hover{ color:var(--ink); }
.help .close:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; }
.help h2{ font-size:1.2rem; margin:0 0 16px; letter-spacing:.02em; }
.help-list{ margin:0; display:grid; grid-template-columns:max-content 1fr; gap:11px 18px; }
.help-list dt{ font-weight:700; font-size:.85rem; color:var(--ink); white-space:nowrap; }
.help-list dd{ margin:0; font-size:.85rem; line-height:1.62; color:#37424d; }

/* モーション控えめ設定を尊重（カード hover 変形・パネル/リンクの transition・スムーススクロールを無効化） */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .card:hover{ transform:none; }
}

/* モバイル: 26チップの壁を高さ制限＋スクロールに、ビューポートを画面高に合わせ、パネルを広く */
@media (max-width:640px){
  header{ padding:12px 14px 8px; }
  h1{ font-size:1.25rem; }
  .sub{ font-size:.82rem; }
  .controls{ gap:10px; }
  .themes{ gap:5px; max-height:128px; overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; }
  .themes button, .density button{ padding:5px 10px; font-size:.78rem; }
  .search{ width:100%; }
  #search{ min-width:0; flex:1; }
  .viewport{ height:70vh; min-height:420px; }
  /* モバイルは右寄せせず中央（JS が inline の left/margin-left を消し、この規則に委ねる）。 */
  .panel{ left:50%; margin-left:calc(94vw / -2); width:94vw; padding:20px 18px 24px; max-height:88vh; }
  /* 使い方モーダルは狭幅では用語（dt）と説明（dd）を縦積みにする */
  .help{ padding:22px 18px 24px; }
  .help-list{ grid-template-columns:1fr; gap:3px 0; }
  .help-list dt{ margin-top:9px; }
}