/*
 * assets/style.css — AI News Agent 共通スタイル（和モダン×ミニマリズム）
 * クライアントJSゼロ方針のためCSSのみで表現（/search/ のPagefind UIのみ例外）。
 * ライト/ダーク自動対応・8pxスケールの余白・見出し明朝×本文ゴシック・静かなモーション。
 * 設計原則: knowledge/wiki/concepts/japanese-minimal-uiux.md
 */

:root {
  color-scheme: light dark;
  --color-bg: #fbfaf5;
  --color-fg: #1a1a1a;
  --color-muted: #595857;
  --color-link: #165e83;
  --color-link-visited: #33507a;
  --color-border: #e5e1d8;
  --color-code-bg: #f3f1ea;
  --color-accent: #165e83;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --content-max-width: 42rem;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #101216;
    --color-fg: #e8e6e1;
    --color-muted: #a8a49c;
    --color-link: #7fb0d4;
    --color-link-visited: #9badc9;
    --color-border: #2a2d33;
    --color-code-bg: #1b1e24;
    /* T007: ライトモードでは --color-accent は --color-link と同値（#165e83）だが、
     * ダークモードは --color-link のみ上書きされ --color-accent が未上書きのまま
     * 残っていた（実測 bg vs accent ≈2.65:1）。.now-confidence-badge の可視テキスト
     * 前景色として使われているため WCAG AA 4.5:1 を満たす必要がある（tests/test_contrast.py）。
     * --color-link のダーク値をそのまま流用し、ライトモードでの「accent=link」という
     * 元々の対応関係をダークモードでも保つ（実測 8.09:1）。 */
    --color-accent: #7fb0d4;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

a {
  color: var(--color-link);
  text-underline-offset: 2px;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover,
a:focus {
  text-decoration: none;
}

/* ---------------------------------------------------------------------
 * スキップリンク（T004/T006・contracts/pages.md §3）
 * 通常時は画面外に退避し、キーボードフォーカス時のみ画面左上に出現する。
 * --------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  /* 実高さ（line-height 1.9 の1行＋padding 16px＋border 2px ≈ 50px）より
   * 十分大きい負オフセットで完全に画面外へ退避する（QA指摘 MINOR-1: -40px では
   * 約10pxはみ出す）。 */
  top: -100px;
  left: var(--space-1);
  z-index: 1000;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

.skip-link:focus {
  top: var(--space-1);
}

/* ---------------------------------------------------------------------
 * フォーカスリング（T006・contracts/pages.md §3）
 * キーボード操作時のみ視認可能なリングを全インタラクティブ要素に出す
 * （マウス操作時の常時アウトラインは出さない = :focus-visible）。
 * --------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-header,
.site-main,
.site-footer {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.site-logo {
  display: inline-flex;
}

.site-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  row-gap: 4px;
}

.site-nav a {
  color: inherit;
}

.site-main {
  padding-top: var(--space-2);
  padding-bottom: var(--space-5);
  min-height: 60vh;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

h1 {
  font-size: 1.75rem;
  margin-top: 0;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.1rem;
}

p,
ul,
ol {
  margin: 0 0 var(--space-3);
}

blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--color-border);
  color: var(--color-muted);
}

code {
  font-family: var(--font-mono);
  background: var(--color-code-bg);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  background: var(--color-code-bg);
  padding: var(--space-2);
  border-radius: 6px;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* 表は横スクロールコンテナで包む（Markdown変換側が .table-wrapper で table をラップする想定） */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-3) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
}

th,
td {
  border: 1px solid var(--color-border);
  padding: 0.5em 0.75em;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--color-code-bg);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* ---------------------------------------------------------------------
 * 縦書き装飾銘（全ページ共通。本文の縦書きは行わない）
 * デフォルト非表示のopt-in方式: 42rem本文列と絶対に重ならない余白がある
 * 十分広い画面（1280px以上）でのみ表示する。折返し構造は使わない
 * （欧文＋vertical-rlは自然に90度回転するため折返し自体が発生しない。
 * white-spaceで明示的にも禁止しておく）。
 * --------------------------------------------------------------------- */

.site-vertical-label {
  display: none;
  position: fixed;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--color-muted);
  opacity: 0.7;
  margin: 0;
  pointer-events: none;
}

@media (min-width: 1280px) {
  .site-vertical-label {
    display: block;
  }
}

/* ---------------------------------------------------------------------
 * パンくず
 * --------------------------------------------------------------------- */

.breadcrumb {
  margin-bottom: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "\203a";
  margin: 0 var(--space-1);
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-fg);
}

/* ---------------------------------------------------------------------
 * 固定ページ・特集ハブの最終更新日（T005・contracts/pages.md §3）
 * --------------------------------------------------------------------- */

.page-meta,
.cluster-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * 記事の鮮度・素性1行メタ（spec 008 US2・h1直下・catchup枠より上。data-model.md §3）
 * 最下部の詳細メタ（.article-meta）は不変のまま残す ― こちらは即認知用の軽い1行。
 * --------------------------------------------------------------------- */

.article-meta-inline {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.article-meta-inline a {
  color: inherit;
}

/* ---------------------------------------------------------------------
 * PR表記（景表法ステマ規制対応）
 * --------------------------------------------------------------------- */

.promo-disclosure {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.25em 0.75em;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * トップ導入部の表示圧縮（spec 008 US1・research.md D7）
 * サイト名・タグライン・説明文のテキスト自体は content/site.yaml のまま不変。
 * 表示だけを縦3行以内（h1 1行＋タグライン1行＋説明文1行）に圧縮する。
 * --------------------------------------------------------------------- */

.site-intro {
  margin-bottom: var(--space-3);
}

.site-intro h1 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  line-height: 1.3;
}

.site-tagline {
  margin: 0 0 4px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-description {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
 * 記事カード（新着記事・特集記事一覧）
 * --------------------------------------------------------------------- */

.article-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-card {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.article-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  padding-left: var(--space-1);
  border-left: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: 0.8rem;
}

.article-card-topic {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* spec 007 US3: index.html のみ記事カードのトピックラベルを /topics/<key>/ へリンク化する。
 * 通常のリンク色に変わらず、従来どおり親要素（.article-card-meta）のmuted色を保つ。 */
a.article-card-topic {
  color: inherit;
}

/* topic.html のカード: 記事が持つ全トピックをリンク化して表示する（QA是正 MAJOR-1/2。
 * index.html は topics[0] のみのため専用クラスを分ける）。 */
.article-card-topics {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-card-topics a {
  color: inherit;
}

.article-card > a {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
}

/* ---------------------------------------------------------------------
 * トップ新着の日付見出し（spec 008 US1・render.py `_top_date_groups`）
 * 「今日は何が起きたか」が即分かるよう、公開日ごとに記事カードを束ねる。
 * --------------------------------------------------------------------- */

.article-date-group {
  margin-bottom: var(--space-3);
}

.article-date-group:last-child {
  margin-bottom: 0;
}

.article-date-heading {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
 * トップ記事カードの圧縮表示（QA是正・SC-001「フォールド内に日付見出し＋タイトル3件
 * 以上」）。日付グループ見出しと重複するため per-card の日付メタ行を撤去し、説明を
 * 1行クランプ・余白を詰める。トップ専用の修飾クラス（.article-card--top 等）でのみ
 * 適用し、アーカイブ・トピック別・特集ハブの記事カード（共通クラス .article-card /
 * .article-cards）には一切影響させない。
 * --------------------------------------------------------------------- */

.article-cards--top {
  gap: var(--space-1);
}

.article-card--top {
  padding-bottom: var(--space-1);
}

.article-card--top:last-child {
  padding-bottom: 0;
}

.article-card-desc-clamp {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
 * 人気記事（トップ。spec 007 US3・PopularSnapshot）
 * --------------------------------------------------------------------- */

.popular-articles {
  margin-bottom: var(--space-4);
}

.popular-article-list {
  margin: 0 0 var(--space-1);
  padding-left: 1.2em;
}

.popular-articles-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------
 * トップ「すべての記事へ」導線（spec 007 US3・/archive/ へのリンク）
 * --------------------------------------------------------------------- */

.article-list-more {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
 * トピック別ページ（/topics/<key>/。spec 007 US3）
 * --------------------------------------------------------------------- */

.topic-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.topic-lead {
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
 * アーカイブ（/archive/。spec 007 US3・月別グルーピング）
 * --------------------------------------------------------------------- */

.archive-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.archive-lead {
  color: var(--color-muted);
}

.archive-month {
  margin-top: var(--space-4);
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.archive-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.archive-item:last-child {
  border-bottom: none;
}

.archive-item time {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.archive-item-topics {
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.archive-item-topics a {
  color: inherit;
}

/* ---------------------------------------------------------------------
 * チップナビ（archive冒頭のトピック絞り込み・topicページ末尾の「他のトピック」共通。
 * spec 008 Phase8 T031）。1px枠・mutedの地味な提示（和モダン・過剰装飾しない）。
 * archive-month-index（月ジャンプ目次）もこのブロックにまとめる ― 見た目の粒度が同じため。
 * --------------------------------------------------------------------- */

.chip-nav {
  margin: 0 0 var(--space-3);
}

.chip-nav h2,
.archive-month-index h2 {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: normal;
}

.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px var(--space-1);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.chip:hover,
.chip:focus {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chip-count {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.chip-nav-more {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
}

.archive-month-index {
  margin: 0 0 var(--space-3);
}

.archive-month-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 0.9rem;
}

.not-found-links {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* アンカー着地時に固定ヘッダー等へ隠れないための着地余白（spec 008 Phase8 T031）。
 * :target（フラグメント遷移の着地先）と見出しアンカー全般（記事本文の目次ジャンプ先
 * h2[id]/h3[id]・archiveの月アンカー）の両方に適用する。 */
:target,
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id] {
  scroll-margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------
 * 洞見ボード（トップ上部「AIの現在地」ブロック・/now/ ページ・投票ページ）
 * 生成り面に極細罫線の枠＋明朝の一行（和モダン踏襲・過剰装飾しない）。
 * --------------------------------------------------------------------- */

.insight-board {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-code-bg);
}

.insight-board > h2 {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}

.insight-board-category {
  margin: 0 0 var(--space-1);
  padding-left: var(--space-1);
  border-left: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: 0.8rem;
}

.insight-board-line {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.7;
}

.insight-board-note {
  margin: 0;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * 現在地コンパクト帯（トップ。spec 008 US1・data-model.md §2）
 * 現在地マップがある場合のトップは、転換のフル展開ではなく要約1〜2行＋/now/への
 * 導線のみにする（転換・確信度・投票は /now/ に集約 — research.md D1）。
 * --------------------------------------------------------------------- */

.insight-board--compact .insight-board-compact-lead {
  margin: 0 0 var(--space-1);
  color: var(--color-fg);
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.now-lead {
  color: var(--color-muted);
}

.now-category {
  margin-top: var(--space-4);
}

.now-category-meta {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-variants {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.now-variant a {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-code-bg);
  font-family: var(--font-serif);
  text-decoration: none;
}

.now-variant a:hover,
.now-variant a:focus {
  border-color: var(--color-accent);
}

.now-current {
  font-family: var(--font-serif);
  font-weight: 600;
}

.now-evidence,
.now-history {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-history {
  margin: 0;
  padding-left: 1.2em;
}

/* ---------------------------------------------------------------------
 * 確信度UI（洞見レイヤーv2。v1.5.0改正で全確信度👍👎一本化。中低の代替解釈は
 * 補足テキスト表示（.now-alternatives-supplement）に格下げ・投票リンクではない。
 * JSゼロ＝静的GETリンク）
 * --------------------------------------------------------------------- */

.now-confidence-badge {
  display: inline-block;
  margin: 0 0 var(--space-1);
  padding: 0.1em 0.6em;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.now-author-stance,
.now-alternatives-note {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-vote-buttons {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

.now-vote-up,
.now-vote-down {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-code-bg);
  text-decoration: none;
}

.now-vote-up:hover,
.now-vote-up:focus,
.now-vote-down:hover,
.now-vote-down:focus {
  border-color: var(--color-accent);
}

.now-vote-count {
  margin-left: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8rem;
}

.now-vote-snapshot-note,
.vote-snapshot {
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* 中低確信度の代替解釈（補足テキスト・投票対象ではない — リンクにしない） */
.now-alternatives-supplement {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 0.9rem;
}

.now-alternatives-supplement li {
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------------
 * 現在地マップ（/now/ 旗艦化。spec 004 Phase3・S1）。バッジ・投票ボタン・代替解釈・
 * 根拠・履歴は既存の .now-confidence-badge / .now-vote-buttons / .now-alternatives-*
 * / .now-evidence / .now-history をそのまま流用し（既存セレクタは変更しない）、
 * ここでは新規の構造（転換カード・層カード・変更履歴・アーカイブ見出し）のみ追加する。
 * knowledge/reviews/2026-08-01-phase3-map-design.md
 * --------------------------------------------------------------------- */

.now-map-meta {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-map-lead {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
 * 「このページの読み方」＋転換目次（spec 008 US3・data-model.md §5）
 * 常時表示・3行以内。details化はしない（クリック不要で読める）。
 * --------------------------------------------------------------------- */

.now-map-howto {
  margin: 0 0 var(--space-3);
}

.now-map-howto p {
  margin: 0 0 4px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.now-map-howto p:last-child {
  margin-bottom: 0;
}

.now-map-toc {
  margin: 0 0 var(--space-4);
}

.now-map-toc ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.now-map-toc li {
  margin-bottom: 4px;
}

.now-map-section-title {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-serif);
}

.now-map-shift {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
}

.now-map-shift-headline {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
}

.now-map-shift-status {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0.1em 0.6em;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.now-map-shift-claim {
  font-family: var(--font-serif);
  font-weight: 600;
}

.now-map-shift-supporting-note,
.now-map-shift-layer {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-map-shift-supporting {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* 「支える事実」の従属表示（spec 008 US3・data-model.md §4「従属（常時・視覚的従属）」）。
 * 字下げ＋アクセント罫線で前面（見出し/断/確信度/投票）から視覚的に一段下げる。 */
.now-map-shift-supporting-block {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.now-map-shift-supporting-block .now-map-shift-supporting-note,
.now-map-shift-supporting-block .now-map-shift-supporting {
  margin-bottom: 0;
}

.now-map-shift-supporting-block .now-map-shift-supporting {
  margin-top: 4px;
}

/* 「詳しく（別の読み方・支える層・根拠）」— 既存 article-toc と一貫した見た目のdetails
 * （spec 008 US3・data-model.md §4「折りたたみ」。D8: ネイティブdetails・JSゼロ）。 */
.now-map-shift-details {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
}

.now-map-shift-details summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.9rem;
}

.now-map-shift-details[open] summary {
  margin-bottom: var(--space-1);
}

.now-map-shift-details .now-map-shift-layer:last-child,
.now-map-shift-details .now-evidence:last-child {
  margin-bottom: 0;
}

.now-map-layer {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-accent);
}

.now-map-layer-name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
}

.now-map-layer-question {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.now-map-layer-paragraph {
  margin: 0 0 var(--space-2);
}

.now-map-layer-sources,
.now-map-layer-supports-note {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-map-layer-supports {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.now-map-change-note {
  color: var(--color-muted);
}

.now-map-change-list {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
}

.now-map-change-list li {
  margin-bottom: var(--space-1);
}

.now-map-archive-note {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.now-map-board-link {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * 記事の3秒キャッチアップ（blockquote風・極細罫線の枠）＋直下の記事フィードバック
 * （👍👎有用性投票。spec 005 T005・位置変更 2026-07-26＝Changの指示でcatchup直下へ）。
 * ボタン自体は now-vote-buttons 系のスタイルを流用する。
 * --------------------------------------------------------------------- */

.article-catchup {
  margin: 0 0 var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-code-bg);
}

.article-catchup-label {
  margin: 0 0 4px;
  color: var(--color-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.article-catchup-text {
  margin: 0;
  font-family: var(--font-serif);
}

.article-vote {
  margin: 0 0 var(--space-3);
}

.article-vote-question {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * 目次・「この記事の作り方」（details/summary。JSゼロの折りたたみ。
 * spec 007 US1・contracts/pages.md §2・FR-004/FR-006）
 * 静かな開閉: 枠線のみ・アイコン等の装飾は加えず、ネイティブマーカーをそのまま使う。
 * --------------------------------------------------------------------- */

.article-toc,
.article-ai-disclosure {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
}

.article-toc summary,
.article-ai-disclosure summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 600;
}

.article-toc[open] summary,
.article-ai-disclosure[open] summary {
  margin-bottom: var(--space-1);
}

.article-toc ol {
  margin: var(--space-1) 0 0;
  padding-left: 1.2em;
}

.article-toc li {
  margin-bottom: 4px;
}

.article-ai-disclosure p {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
 * シェア（テキストリンク2つ。spec 007 US1・contracts/pages.md §4・FR-007）
 * --------------------------------------------------------------------- */

.article-share {
  margin-bottom: var(--space-3);
}

/* 2026-08-01 QA是正（MINOR-3）: 記事アウトライン汚染を避けるため<h2>ではなく<p>にした。
 * 見た目はh2見出し（見出し全体の共通ルール）と同一に保つ。 */
.article-share-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: var(--space-4) 0 var(--space-2);
}

.article-share-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------
 * 関連記事
 * --------------------------------------------------------------------- */

.article-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-related li {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------
 * 検索ページ（Pagefind UI。JSゼロ方針の唯一の例外）
 * --------------------------------------------------------------------- */

.search-page #search {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------
 * 静かなモーション（prefers-reduced-motion: no-preference の場合のみ）
 * h1・ページ先頭要素はフェード対象外（LCP保護）。transform/opacity 以外はアニメーションしない。
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* アンカージャンプ（月ジャンプ目次・目次・:target全般）を滑らかにする（spec 008 Phase8
   * T031）。reduced-motion指定時は素通り（既定のジャンプ挙動）のままにする。 */
  html {
    scroll-behavior: smooth;
  }

  a,
  .article-card {
    transition: color 200ms ease-out, background-color 200ms ease-out;
  }

  @supports (animation-timeline: view()) {
    @keyframes card-fade-in {
      from {
        opacity: 0.15;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in {
      animation: card-fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.footer-nav a {
  color: inherit;
}

.footer-copyright {
  margin: 0;
}

@media (max-width: 40rem) {
  body {
    font-size: 16px;
  }

  .site-header,
  .site-main,
  .site-footer {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* spec 008 US4: 「すべての記事」追加後の5リンクを375px幅で2行以内に収める
   * （既存トークン枠内の最小限調整。gap を1段階詰めるだけでフォントサイズは変えない）。 */
  .site-nav {
    gap: var(--space-1);
  }

  /* QA是正（spec 008）: 狭幅では1行省略（ellipsis）だとタグラインが「…」で欠けて
   * 読めなくなるため、折返しを許可する（1行固定は42rem以上の広い画面のみでよい）。 */
  .site-tagline {
    white-space: normal;
  }
}

@media print {
  .site-header,
  .site-footer {
    display: none;
  }

  .site-vertical-label {
    display: none;
  }

  /* チップナビ（トピック絞り込み・他のトピック）・月ジャンプ目次はページ内ナビであり
   * 紙面では邪魔なだけなので非表示にする（spec 008 Phase8 T031）。 */
  .chip-nav,
  .archive-month-index {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .table-wrapper {
    overflow-x: visible;
  }

  /* 目次・「この記事の作り方」・/now/「詳しく」は既定閉だが、印刷時は展開して中身を出す
   * （details のUAデフォルトは open 属性が無いと中身を display:none にするため上書きする。
   * spec 008 US3: now-map-shift-details も同じ既存規約に合流させる — D8）。 */
  .article-toc,
  .article-ai-disclosure,
  .now-map-shift-details {
    display: block;
  }

  .article-toc:not([open]) > :not(summary),
  .article-ai-disclosure:not([open]) > :not(summary),
  .now-map-shift-details:not([open]) > :not(summary) {
    display: block !important;
  }

  /* 2026-08-01 QA是正（MINOR-4）: 現行Chrome/Safariは折りたたみ内容の可視性を
   * ::details-content 擬似要素の content-visibility で制御する実装に移行済み。
   * 上のフォールバック（display:block!important）に加え、この経路も明示的に開く
   * （どちらか一方が効けば印刷時に展開される・ブラウザ実装差のフェイルセーフ）。 */
  .article-toc::details-content,
  .article-ai-disclosure::details-content,
  .now-map-shift-details::details-content {
    content-visibility: visible;
  }

  /* QA是正（spec 008）: 画面用の1行/2行クランプは印刷では解除し、詳細全文を紙に出す。
   * セレクタは元定義（.insight-board--compact .insight-board-compact-lead 等）と同じ
   * 詳細度に揃える（単一クラスのままだと元定義の複合セレクタに詳細度で負けて上書きできない）。 */
  .site-description,
  .insight-board--compact .insight-board-compact-lead,
  .article-cards--top .article-card-desc-clamp {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
}