/* Stardust Log — timeline stylesheet (年表コンテンツ専用)
   本番配置先: public_html/timeline.css(ルート直下 = デプロイ基盤の許可ディレクトリ)
   参照は <link rel="stylesheet" href="/timeline.css?v=5">
   style.css を触らないので、既存ページの ?v=3 を上げる必要がない。

   前提: style.css が先に読み込まれ、:root の色変数が定義済みであること。
   CSP: style属性・<style>タグは使わない。すべてクラスで表現する。 */

/* ---- 種別の色。すべて既存パレット(style.css の cat-* )から取っている ---- */
:root{
  --kind-theory:     #8481c4;  /* 理論 — violet(= --violet) */
  --kind-discovery:  #6db8c4;  /* 発見 — ice cyan(= .cat-quantum) */
  --kind-milestone:  #cf9d6c;  /* マイルストーン — ember(= --ember) */
  --kind-deployment: #6fae7c;  /* 実用化 — leaf green(= .cat-climate) */
}
.k-theory     { --k: var(--kind-theory); }
.k-discovery  { --k: var(--kind-discovery); }
.k-milestone  { --k: var(--kind-milestone); }
.k-deployment { --k: var(--kind-deployment); }

/* ================= 年表ページ共通の見出し部 ================= */
.tl-head{ max-width: 680px; padding-top: 8px; }
.tl-head h1{ font-size: 32px; font-weight: 600; line-height: 1.6; letter-spacing: 0.01em; margin: 18px 0 16px; }
.tl-head .tl-sub{ font-size: 14px; color: var(--text-muted); margin: 0 0 22px; }
.tl-head .tl-summary{ font-size: 15px; color: var(--text); margin: 0 0 10px; }
.tl-meta{ font-size: 12px; color: var(--text-faint); letter-spacing: 0.04em; }
.tl-meta .tl-dot{ margin: 0 9px; opacity: 0.5; }

/* ---- 凡例 ---- */
.tl-legend{
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 30px 0 0; padding: 16px 20px;
  background: var(--bg-panel); border: 1px solid var(--line);
}
.tl-legend-item{ display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.tl-legend-item::before{
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--k, var(--text-faint)); flex-shrink: 0;
}
.tl-legend-note{ flex-basis: 100%; font-size: 11.5px; color: var(--text-faint); margin: 2px 0 0; }

/* ---- 表示形式の切り替えリンク(JSなし。別URLへの単なるリンク) ---- */
.tl-views{ display: flex; gap: 14px; margin: 26px 0 0; font-size: 12.5px; }
.tl-views a{
  color: var(--text-muted); text-decoration: none; padding: 6px 15px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  transition: color 0.3s, border-color 0.3s;
}
.tl-views a:hover{ color: var(--text); border-color: var(--accent); }
.tl-views a.is-current{ color: var(--text); border-color: var(--accent); }

/* ================= 縦スクロール型 ================= */
.tl-vertical{ margin-top: 52px; padding-bottom: 40px; }

.tl-era{
  margin: 46px 0 6px; padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  display: flex; align-items: baseline; gap: 14px;
}
.tl-era:first-child{ margin-top: 0; }
.tl-era-range{ font-family: 'EB Garamond', serif; font-size: 13px; color: var(--text-faint); letter-spacing: 0.06em; }
.tl-era-name{ font-family: 'Shippori Mincho', serif; font-size: 15px; color: var(--text-muted); letter-spacing: 0.04em; }

/* 1件 = 記事一覧(.post)と同じログブック的な構造を踏襲する */
.tl-item{
  display: grid; grid-template-columns: 104px 1fr; gap: 28px;
  padding: 26px 0; border-top: 1px solid var(--line);
  position: relative;
}
.tl-item:last-child{ border-bottom: 1px solid var(--line); }

.tl-when{ position: relative; padding-left: 18px; padding-top: 3px; }
.tl-when::before{
  content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--k, var(--accent));
}
.tl-when::after{
  content: ''; position: absolute; left: 3px; top: 21px; bottom: -27px; width: 1px;
  background: var(--line-strong);
}
.tl-item:last-child .tl-when::after{ display: none; }
.tl-year{ font-family: 'EB Garamond', serif; font-size: 21px; color: var(--text); line-height: 1.2; letter-spacing: 0.02em; }
.tl-date{ display: block; font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; margin-top: 3px; }

/* 未達成・計画中は輪郭だけの点にする */
.is-projected .tl-when::before{ background: transparent; box-shadow: inset 0 0 0 1.5px var(--k, var(--accent)); }
.is-projected .tl-year{ color: var(--text-muted); }

.tl-kind{
  display: inline-block; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--k, var(--accent)); margin-bottom: 9px;
}
.tl-kind::before{
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
  border-radius: 50%; background: var(--k, var(--accent)); vertical-align: middle;
}
.tl-title{ font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 600; line-height: 1.65; margin: 0 0 10px; letter-spacing: 0.01em; }
.tl-body{ font-size: 14px; color: var(--text-muted); margin: 0; max-width: 560px; line-height: 1.9; }

/* 数値。年表の売りは固有名詞と数字なので独立したブロックにする */
.tl-metrics{ display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.tl-metric{
  font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.02em;
  padding: 4px 11px; border: 1px solid var(--line); background: var(--bg-panel);
}
.tl-metric b{ font-weight: 500; color: var(--text); font-family: 'EB Garamond', serif; font-size: 12.5px; }

.tl-actors{ font-size: 11.5px; color: var(--text-faint); margin: 12px 0 0; letter-spacing: 0.02em; }

.tl-sources{ margin: 12px 0 0; padding: 0; list-style: none; font-size: 11.5px; max-width: 560px; }
.tl-sources li{ margin-top: 5px; }
.tl-sources a{ color: var(--text-faint); text-decoration: none; border-bottom: 1px solid var(--line); }
.tl-sources a:hover{ color: var(--accent); border-color: var(--accent); }
.tl-sources .tl-pub{ color: var(--text-faint); opacity: 0.75; }

/* 検証状態の注記。推測で埋めない方針を、読者にも見える形にする。
   todo(裏取り未了)だけを目立たせ、書誌の補足は控えめに出す。 */
.tl-flag{
  display: block; margin: 12px 0 0; padding: 8px 13px; max-width: 560px;
  border-left: 2px solid var(--line-strong);
  font-size: 11.5px; color: var(--text-faint); line-height: 1.75;
}
.tl-flag b{ font-weight: 500; letter-spacing: 0.05em; margin-right: 9px; color: var(--text-muted); }
.tl-flag.is-todo{
  border-left-color: var(--kind-milestone);
  background: rgba(207,157,108,0.07);
  color: var(--text-muted);
}
.tl-flag.is-todo b{ color: var(--kind-milestone); }

/* ================= 横スクロール型 ================= */
/* 10年ごとの等幅カラム。年内の厳密な比例配置はインラインstyleが要るため
   CSPで採れない。等幅の10年カラムにすると「その10年に何件あったか」が
   そのまま列の密度として読めるので、分野横断の比較にはむしろ都合がよい。 */
.tl-horizontal{ margin-top: 46px; }

.tl-hscroll{
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 18px;
  scrollbar-color: var(--line-strong) transparent;
}
.tl-hscroll::-webkit-scrollbar{ height: 8px; }
.tl-hscroll::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 999px; }
.tl-hscroll::-webkit-scrollbar-track{ background: transparent; }

/* トラック全体を1つのグリッドにする。行(上段/軸/下段)の高さを全カラムで
   共有させるため。カラムごとに独立したグリッドにすると 1fr が列内で均等配分され、
   中身のない上段が下段と同じ高さまで膨らんでしまう。 */
.tl-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 244px;
  grid-template-rows: auto 42px auto;
  min-width: max-content;
  padding: 4px 0;
}

.tl-cell{ border-left: 1px solid var(--line); padding: 0 13px; }
.tl-track > .tl-cell:nth-last-child(-n+3){ border-right: 1px solid var(--line); }

/* 上段 = 基礎研究(理論・発見)。軸に接するよう下詰めで積む */
.tl-band-basic{ display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-bottom: 8px; }
/* 下段 = 工学・実用(マイルストーン・実用化)。軸から下へ積む */
.tl-band-applied{ display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding-top: 8px; }

.tl-axis{
  display: flex; align-items: center;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(233,231,242,0.025);
}
.tl-axis-label{ font-family: 'EB Garamond', serif; font-size: 14px; color: var(--text-faint); letter-spacing: 0.08em; }

.tl-band-label{
  font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 0 10px 2px;
}

.tl-card{
  border: 1px solid var(--line);
  border-left: 2px solid var(--k, var(--accent));
  background: var(--bg-panel);
  padding: 9px 12px 10px;
}
.tl-card.is-projected{ border-style: dashed; border-left-style: solid; background: transparent; }
.tl-card .tl-card-year{ font-family: 'EB Garamond', serif; font-size: 12px; color: var(--k, var(--accent)); letter-spacing: 0.04em; }
.tl-card .tl-card-title{
  font-family: 'Shippori Mincho', serif; font-size: 12.5px; font-weight: 600;
  line-height: 1.6; margin: 3px 0 0; letter-spacing: 0.01em;
}
.tl-card .tl-card-flag{ display: inline-block; font-size: 10px; color: var(--kind-milestone); margin-top: 5px; letter-spacing: 0.05em; }
.tl-card a{ color: inherit; text-decoration: none; display: block; }
.tl-card a:hover .tl-card-title{ color: var(--accent); }

.tl-hint{ font-size: 11.5px; color: var(--text-faint); margin: 12px 0 0; letter-spacing: 0.03em; }

/* ================= 一覧ページ(timelines/index) ================= */
.tl-index-list{ list-style: none; margin: 40px 0 0; padding: 0; }
.tl-index-item{ border-top: 1px solid var(--line); padding: 28px 0; }
.tl-index-item:last-child{ border-bottom: 1px solid var(--line); }
.tl-index-item h2{ font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.tl-index-item h2 a{ color: var(--text); text-decoration: none; }
.tl-index-item h2 a:hover{ color: var(--accent); }
.tl-index-item p{ font-size: 13.5px; color: var(--text-muted); margin: 0; max-width: 560px; }
.tl-index-item .tl-index-meta{ font-size: 11.5px; color: var(--text-faint); margin-top: 10px; letter-spacing: 0.03em; }

/* ================= レスポンシブ ================= */
@media (max-width: 640px){
  .tl-head h1{ font-size: 26px; }
  .tl-item{ grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .tl-when::after{ display: none; }
  .tl-when{ padding-left: 16px; }
  .tl-when::before{ top: 8px; }
  .tl-year{ font-size: 18px; }
  .tl-date{ display: inline; margin-left: 10px; }
  .tl-track{ grid-auto-columns: 196px; }
  .tl-legend{ padding: 14px 16px; }
}

/* ---- パンくず(2026-09-25 追加。?v=2) ----
   年表ページの back-link の位置に置く。<nav class="breadcrumb"> なので、
   style.css の汎用 nav{ display:flex; gap:32px; font-size:13.5px } をここで打ち消す。
   nav a の下線ホバーはそのまま効かせる。区切りの「/」は .tl-dot と揃えた。 */
.breadcrumb{ display: block; gap: 0; margin: 44px 0 20px; font-size: 13px; color: var(--text-faint); }
.breadcrumb ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
.breadcrumb li{ display: inline-flex; align-items: baseline; }
.breadcrumb li + li::before{ content: "/"; margin: 0 10px; color: var(--text-faint); }
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb [aria-current="page"]{ color: var(--text-faint); }

/* ---- スクロールの演出(2026-09-25 追加。?v=3) ----
   縦型の年表を読み進めると、各項目が下からふわっと現れ、点が灯り、
   点と点を結ぶ縦線が「いま読んでいる位置」(画面の上から55%)まで光っていく。
   スクロール連動の CSS アニメーション(animation-timeline)なので JS は使わない。
   非対応ブラウザでは @supports の中が無視され、これまでどおりの静的な表示になる。
   アンカー(#id)で飛んできた項目は画面内にあるので、最初から表示されている。
   縦線は 640px 以下では元から出していない(1列表示のため)。 */
@supports (animation-timeline: view()){
  .tl-vertical .tl-item{
    animation: tl-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  .tl-vertical .tl-when::before{
    animation: tl-light linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
  /* 縦線: 画面を高さ0の「読む位置の線」に絞った view() で、線がその位置を通過するあいだに上から塗る */
  .tl-vertical .tl-when::after{
    background: linear-gradient(var(--accent), var(--accent)) top / 100% 100% no-repeat, var(--line-strong);
    animation: tl-trace linear both;
    animation-timeline: view(block 55% 45%);
  }
}
@keyframes tl-rise{ from{ opacity: 0; transform: translateY(18px); } }
@keyframes tl-light{ from{ opacity: 0.25; transform: scale(0.4); } 60%{ transform: scale(1.35); } }
@keyframes tl-trace{ from{ background-size: 100% 0%; } }

/* 「動きを減らす」設定では、項目の浮き上がりと点の拡大をやめる。
   縦線の塗りはスクロール位置を示すだけで勝手には動かないので残す。 */
@media (prefers-reduced-motion: reduce){
  .tl-vertical .tl-item, .tl-vertical .tl-when::before{ animation: none !important; }
}

/* ---- 分野横断リンク(2026-09-25 追加。?v=4) ----
   縦型の各項目の末尾に「ほかの年表とのつながり」を出す。データは JSON の related[]
   (年の早いほうの項目にだけ書き、相手側の表示はジェネレータが逆引きで作る)。
   種別ラベルは琥珀色、つながる先の分野名・年・題を1行のリンクにし、その下に
   「どうつながるのか」の一文と出典。リンク先の項目は :target で薄く光らせる。 */
.tl-links{
  margin: 18px 0 0; padding: 14px 16px 12px; max-width: 560px;
  border-left: 2px solid var(--ember); background: rgba(207,157,108,0.05);
}
.tl-links-label{ font-size: 11px; letter-spacing: 0.09em; color: var(--text-faint); margin: 0 0 10px; }
.tl-link + .tl-link{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tl-rel{ margin: 0; line-height: 1.7; }
.tl-rel-kind{ display: block; font-size: 11px; letter-spacing: 0.05em; color: var(--ember); margin-bottom: 2px; }
.tl-rel-target{ font-size: 14px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color 0.3s, border-color 0.3s; }
.tl-rel-target:hover{ color: var(--accent); border-color: var(--accent); }
.tl-rel-field{ font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); margin-right: 8px; }
.tl-rel-year{ font-family: 'EB Garamond', serif; font-size: 14px; color: var(--text-muted); margin-right: 8px; }
.tl-rel-note{ font-size: 12.5px; line-height: 1.85; color: var(--text-muted); margin: 6px 0 0; }
.tl-rel-todo{ font-weight: 500; color: var(--ember); margin-right: 6px; }
.tl-rel-sources{ margin-top: 6px; }

/* リンクで飛んできた項目を見つけやすく */
.tl-item{ scroll-margin-top: 28px; }
.tl-item:target{ background: linear-gradient(90deg, rgba(132,129,196,0.10), rgba(132,129,196,0) 70%); }

/* ---- この項目を記事で詳しく読む(2026-10-15 追加。?v=5) ----
   縦型の各項目の出典の下(「ほかの年表とのつながり」の上)に、その項目を掘り下げた
   サイト内の記事(連載)へのリンクを出す。データは JSON の milestones[].articles(任意)。
   記事の題名は posts.json から取る。分野横断リンク(琥珀色)と見分けがつくよう、
   こちらはページのアクセント色の縦線にする。 */
.tl-reads{
  margin: 18px 0 0; padding: 12px 16px; max-width: 560px;
  border-left: 2px solid var(--accent); background: rgba(132,129,196,0.06);
}
.tl-reads-label{ font-size: 11px; letter-spacing: 0.09em; color: var(--text-faint); margin: 0 0 8px; }
.tl-read + .tl-read{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tl-read-head{ margin: 0; line-height: 1.7; }
.tl-read-series{ display: block; font-size: 11px; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 2px; }
.tl-read-link{ font-size: 14px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color 0.3s, border-color 0.3s; }
.tl-read-link:hover{ color: var(--accent); border-color: var(--accent); }
.tl-read-note{ font-size: 12.5px; line-height: 1.85; color: var(--text-muted); margin: 6px 0 0; }