/* =====================================================================
   AI Lifeline / AIライフライン — サイト共通スタイル
   ダーク単一テーマ（観測所モチーフ）。外部依存はGoogle Fontsのみ。
   配色ルール：緑=安定／黄=注意／赤=警戒（色単独で意味を持たせない。
   アイコン形状＋文字＋色の三重符号を必ず維持すること）
   ===================================================================== */

:root {
  /* surfaces & ink */
  --bg:        #0a0e14;
  --surface:   #111823;
  --surface-2: #0d131c;
  --ink:       #e8edf4;
  --ink-2:     #9fb0c3;
  --muted:     #6b7a8d;
  --line:      #1f2a3a;
  --line-soft: #182231;

  /* brand & series (validated: dark surface #111823) */
  --accent:    #3987e5;
  --accent-2:  #d95926;
  --pulse:     #35d0a0;

  /* status (icon+label併用。色単独で意味を持たせない) */
  --ok:    #0ca30c;
  --watch: #fab219;
  --alert: #d03b3b;

  --radius: 14px;
  --maxw: 860px; /* 2026-08-30 代表指示で1080→860（日米共通・本文幅の単一値） */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS Safari の文字自動拡大を止める（2026-09-07）。
     width=device-width を指定していても iPhone Safari は小さい文字を勝手に拡大することがあり、
     拡大が効くのは文字だけで、外枠（padding・border・角丸）の寸法計算には反映されない。
     結果として「文字だけがピルの外に出る」現象が iPhone だけで起きる。100% で無効化する。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 50% -180px, #12203a 0%, rgba(18,32,58,0) 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- 箇条書きマーカーの一元管理（A4） ----------
   本文の「・」はHTML側にテキストとして書く方針なので、
   ブラウザ既定のマーカーはサイト全体で消す。二重表示（「・・」）を
   構造的に起こらなくするための唯一の管理点。個別ページでlist-styleを
   書かないこと。装飾が必要なリストは各コンポーネント側で付ける。 */
ul, ol { list-style: none; padding-left: 0; margin-left: 0; }

/* ---------- アクセシビリティ共通 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--pulse); border-radius: 8px;
  padding: 10px 16px; font-size: 0.86rem;
}
.skip-link:focus { left: 12px; top: 12px; text-decoration: none; }
:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; border-radius: 4px; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; word-break: break-word; }
pre { overflow-x: auto; }

/* 狭い画面（320px級）で、禁則処理や長い語が原因のはみ出しを防ぐ。
   break-word ではなく anywhere を使うのは、こちらが min-content 幅にも効き、
   flex/grid の最小サイズ計算まで含めて縮められるため（2026-08-23 実測で必要） */
main :is(h1, h2, h3, h4, p, li, dt, dd, figcaption, summary, td, th),
.site-footer :is(li, p, div) { overflow-wrap: anywhere; }
.metric .v, .status-chip, .freq-badge .k, .freq-badge .v { overflow-wrap: normal; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 20, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 12px 18px;
  min-height: 60px; flex-wrap: wrap; /* Editions切替が入りきらない幅では2行目に落とす（ナビの字間折返し防止・2026-08-29） */
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand .en {
  font-family: var(--font-mono); font-weight: 400;
  font-size: 0.68rem; color: var(--muted); letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }

.global-nav { margin-left: auto; }
.global-nav ul {
  /* 項目12個・幅不足で章名が1文字ずつ縦に折れていた（2026-08-30 実測）。
     項目は nowrap で語の途中で折らず、入り切らない項目は wrap で2段目に自然に回す */
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px; list-style: none; margin: 0; padding: 0;
}
.global-nav a {
  display: block; padding: 8px 8px; border-radius: 8px;
  color: var(--ink-2); font-size: 0.86rem; font-weight: 500;
  white-space: nowrap; /* 章名・BETAチップを含め項目内では折り返さない */
}
.global-nav a:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.global-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); padding: 7px 12px; font-size: 0.9rem; cursor: pointer;
}

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 0.76rem; color: var(--muted); margin: 22px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs .sep { margin: 0 7px; opacity: 0.55; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* ---------- hero ---------- */
/* A2：ヒーロー下の余白は「ヒーローの下padding＋次セクションの上padding」の
   合算で決まる。見出しの無いセクションが続いても空きが積み上がらないよう、
   隣接セレクタで一元的に詰める（個別ページでmarginを足さないこと）。 */
.hero { padding: 56px 0 20px; }
.hero .kicker {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.22em;
  color: var(--pulse); text-transform: uppercase; margin: 0 0 14px;
}
.hero h1 {
  margin: 0 0 14px; font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.35; font-weight: 700; letter-spacing: 0.01em;
}
.hero .lead { color: var(--ink-2); max-width: none; margin: 0; } /* 本文幅は--maxwに統一（2026-08-29）。個別のmax-width上書き禁止 */
.hero .date-badge {
  display: flex; width: fit-content; max-width: 100%;   /* ai-readers-line と同じ保険（2026-09-07） */
  align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 7px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2);
}
.hero .date-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pulse);
  box-shadow: 0 0 0 0 rgba(53, 208, 160, 0.55);
  animation: pulse 2.4s infinite;
}
/* トップの「今週AIから」カード（AI読者数・1行ピル）
   2026-09-07 代表指示④：iPhone Safari で枠からはみ出す件の是正。効かせている手当ては3つ。
     ①`display: inline-flex` をやめて `flex` + `width: fit-content` + `max-width: 100%` にする。
       WebKit は inline レベルの flex コンテナの shrink-to-fit 幅を、中身の max-content 幅
       （このカードは実測 871px）寄りに取ることがあり、親（.wrap の内容幅）を超えて描画される。
       ブロックレベルの flex + fit-content なら「中身なりだが親を超えない」が確実に効く。
     ②折り返しを明示する。`overflow-wrap: anywhere` は min-content 幅にも効くので、
       flex アイテムの最小サイズ計算まで含めて縮む（`break-word` では縮まない）。
       あわせて各アイテムの `min-width: auto`（既定＝min-content）を 0 に落とし、
       英語版（/us/・/eu/）の長い英単語がアイテムを押し広げないようにする。
     ③複数行に折り返したときの見え方を padding と角丸で整える（下の狭幅メディアクエリ）。
   JP/US/EU は同じ style.css を読むため、この1か所で3版に効く。 */
.hero .ai-readers-line {
  display: flex; width: fit-content; max-width: 100%;
  align-items: center; gap: 6px 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2);
  line-height: 1.7; overflow-wrap: anywhere;
}
.hero .ai-readers-line > * { min-width: 0; }
.hero .ai-readers-line a { color: var(--muted); font-size: 0.75rem; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 160, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 208, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 160, 0); }
}

/* ---------- section ---------- */
.section { padding: 36px 0; }
.hero + .section { padding-top: 14px; }          /* A2：ヒーロー直下だけ詰める */
.crumbs + .hero { padding-top: 26px; }
.section > .wrap > h2, h2.sec {
  font-size: 1.3rem; margin: 0 0 6px; letter-spacing: 0.01em;
}
.sec-note { color: var(--muted); font-size: 0.85rem; margin: 0 0 22px; }
.sec-note:last-child { margin-bottom: 0; }

/* ---------- condition cards (トップの5条件) ---------- */
.cond-grid {
  display: grid; gap: 14px;
  /* min() を挟むのは、画面がカラム下限より狭いときに縮めないと
     グリッドがはみ出して横スクロールが出るため（320px幅で15px実測・2026-08-23） */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: 0;
}
h2 + .cond-grid, .sec-note + .cond-grid { margin-top: 18px; }
.cond-card {
  position: relative;
  display: flex; flex-direction: column;      /* A3：中身を上下に配置して間延びを解消 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 14px 22px;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.cond-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--muted);
}
.cond-card[data-status="ok"]::before    { background: var(--ok); }
.cond-card[data-status="watch"]::before { background: var(--watch); }
.cond-card[data-status="alert"]::before { background: var(--alert); }
/* 観測中は実線でなく縞にして、色が見えない環境でも「判定済みではない」と分かるようにする */
.cond-card[data-status="observing"]::before {
  background: repeating-linear-gradient(180deg, var(--ink-2) 0 5px, transparent 5px 11px);
  opacity: 0.5;
}
.cond-card:hover { transform: translateY(-3px); border-color: #2b3b52; }
.cond-card .cond-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.cond-card .cond-icon { flex: none; font-size: 1.05rem; line-height: 1; }
.cond-card h3 { margin: 0; font-size: 1.02rem; min-width: 0; }
.cond-card h3 .en {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem;
  color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-left: 8px;
}
/* カード全体をクリック可能にしつつ、ステータスバッジは別リンクにする（B7） */
.cond-link { color: var(--ink); }
.cond-link:hover { text-decoration: none; }
.cond-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cond-card .headline {
  color: var(--ink-2); font-size: 0.86rem; margin: 0 0 12px;
  min-height: 3.2em;                 /* 行内のカード高のばらつきを抑える */
  position: relative; z-index: 0;
}
.cond-card .metrics { margin: 0; padding: 0; font-size: 0.82rem; }

/* 指標1行（A1・C11）— 全カード同一規則
   行1：ラベル ｜ 値＋単位＋取得日／行2：事業者名などの補足を小さく回す */
/* ラベルと値が1行に収まらないときは、ラベルを縮めずに「値を次の行へ落とす」。
   値が割り込んでラベルが途中で分断される（例：「確認で」／「きず」）のを構造的に防ぐ。
   ラベル単独で幅を超える場合だけ、ラベル自身が折り返す（このときは値の割り込みが無い）。 */
.metric {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
}
.metric .k { flex: 1 0 auto; min-width: 0; max-width: 100%; }
.metric .v {
  flex: 0 0 auto; margin-left: auto;
  font-family: var(--font-mono); color: var(--ink);
  white-space: nowrap;
}
.metric .v .n { font-weight: 700; }
.metric .v .u { color: var(--ink-2); font-size: 0.84em; margin-left: 2px; }
.metric .v small { color: var(--muted); font-size: 0.78em; margin-left: 7px; }
.metric .note {
  flex: 1 1 100%;
  color: var(--muted); font-size: 0.72rem; line-height: 1.55; margin-top: 1px;
}

/* status chip（アイコン形状＋文字＋色の三重符号） */
.status-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.status-chip::before { font-size: 0.6rem; }
.status-chip.ok    { color: #7ee787; background: rgba(12,163,12,0.13); }
.status-chip.ok::before    { content: "●"; }
.status-chip.watch { color: #ffd35c; background: rgba(250,178,25,0.12); }
.status-chip.watch::before { content: "▲"; }
.status-chip.alert { color: #ff8f8f; background: rgba(208,59,59,0.15); }
.status-chip.alert::before { content: "■"; }
/* 観測中（F1・2026-08-23 代表裁定）
   意味：数値の収集は動いているが、良否を判定する基準がまだ無い。良い・悪いのどちらでもない。
   ・色は緑／黄／赤のどれとも重ならないスレートグレー
   ・形は ◇（●▲■○ のいずれとも異なる）
   ・実測コントラスト比 8.6:1（文字 #c3d0de ／ 合成後の下地 #252d39）。4.5:1 を満たす
   ・枠線を持たせて「未取得（○・枠なし）」と見分けられるようにしている */
.status-chip.observing {
  color: #c3d0de;
  background: rgba(159,176,195,0.13);
  box-shadow: inset 0 0 0 1px rgba(159,176,195,0.34);
  font-weight: 500; letter-spacing: 0.02em;
}
.status-chip.observing::before { content: "◇"; font-size: 0.66rem; }
.status-chip.na, .status-chip.unknown { color: var(--muted); background: rgba(107,122,141,0.15); }
.status-chip.na::before, .status-chip.unknown::before { content: "○"; }
/* B7：判定根拠へのリンクとして機能するバッジ */
.status-chip.is-link { position: relative; z-index: 2; }
.status-chip.is-link:hover { text-decoration: none; filter: brightness(1.2); }
.status-chip .chip-why {
  font-weight: 400; font-size: 0.86em; opacity: 0.75;
  border-left: 1px solid currentColor; padding-left: 6px; margin-left: 1px;
}

.sample-flag {
  display: inline-block; margin-left: 8px;
  font-size: 0.68rem; color: var(--watch);
  border: 1px solid rgba(250,178,25,0.4); border-radius: 5px; padding: 1px 6px;
  vertical-align: 2px;
}

/* ---------- 更新頻度（F3）---------- */
.freq-badge {
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6;
}
.freq-badge .k {
  color: var(--muted); letter-spacing: 0.08em;
  border: 1px solid var(--line); border-radius: 5px; padding: 0 6px;
}
.freq-badge .v { color: var(--ink-2); font-weight: 700; }
.freq-badge .n { color: var(--muted); font-family: var(--font-sans); flex: 1 1 100%; }
.cond-card .freq-badge { margin: 0 0 9px; position: relative; z-index: 0; }

/* 章ページ冒頭の帯：更新頻度＋この章の表示 */
.chapter-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px;
}
.chapter-meta .freq-badge { margin: 0; flex: 1 1 300px; }
.chapter-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.chapter-status .k { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; }
.chapter-status .status-chip { margin-left: 0; }

/* 値の状態（暫定／確定）。観測中と同じグレー＋破線の記号法に揃える（2026-08-23） */
.value-status {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 400; vertical-align: 5px;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px dashed rgba(159,176,195,0.34);
}

/* ---------- 「観測中」の説明（2026-08-23）----------
   観測中＝グレー＋破線 の記号法を踏襲する。判定済みの色（緑・黄・赤）は使わない。 */
.observing-note {
  margin: 0 0 12px; padding: 9px 0 0;
  border-top: 1px dashed var(--line);
  display: grid; gap: 6px;
  font-size: 0.78rem; line-height: 1.6;
}
.observing-note > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; align-items: baseline; }
.observing-note dt {
  margin: 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px dashed rgba(159,176,195,0.34); border-radius: 5px; padding: 0 6px;
}
.observing-note dd { margin: 0; color: var(--ink-2); min-width: 0; }
.observing-note.is-compact { font-size: 0.75rem; margin-bottom: 10px; }
.observing-note.is-compact dd { color: var(--muted); }
.cond-card .observing-note { position: relative; z-index: 0; }
.chapter-meta .observing-note {
  flex: 1 1 100%; margin: 2px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* ---------- ステータスの凡例（F1）---------- */
.status-legend {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin: 18px 0 0;
}
.status-legend h3 { margin: 0 0 10px; font-size: 0.98rem; }
.status-legend ul { margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.status-legend li { font-size: 0.85rem; color: var(--ink-2); display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
.status-legend .status-chip { margin-left: 0; margin-right: 4px; }
.status-legend .t { flex: 1 1 320px; }
.status-legend .legend-why {
  font-size: 0.86rem; color: var(--ink-2); margin: 0 0 10px;
  border-left: 3px solid var(--pulse); background: rgba(53,208,160,0.06);
  padding: 10px 14px; border-radius: 8px;
}
.status-legend .sec-note { margin: 0; }

/* 判定していない章の判定ブロックは、緑（＝判定済み）でなく中立の色で縁取る */
.hantei.is-observing { border-left-color: var(--ink-2); }
/* 「観測中」は警告ではないので、説明枠に注意色（黄）を使わない */
.hantei.is-observing .undefined-note {
  border-left-color: var(--ink-2);
  background: rgba(159,176,195,0.06);
}
.hantei .hantei-history {
  font-size: 0.82rem; color: var(--muted);
  margin: 12px 0 16px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* ---------- スパークライン（B6・E3） ----------
   軸・目盛りなしの極小折れ線。外部ライブラリなし・インラインSVG。
   点が足りない指標は .spark-none のプレースホルダで枠だけ揃える。 */
.spark { margin: 12px 0 0; position: relative; z-index: 0; }
.spark-svg { display: block; width: 100%; height: 38px; }
.spark-line {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.spark-dot { fill: var(--pulse); }
/* 暫定値の区間。記号法は「観測中」に揃える（グレー＋破線）。配色ルールは変えない */
.spark-line-provisional {
  fill: none; stroke: var(--ink-2); stroke-width: 1.6;
  stroke-dasharray: 3 2.5; opacity: 0.75;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* 日別の値の表（2026-08-23）。既定で見える形にし、暫定行は「観測中」と同じ記号法に揃える */
.chart-table.is-open { margin: 14px 0 0; }
.chart-table .table-caption { margin: 0 0 6px; font-size: .82rem; color: var(--ink-2); }
.chart-table tr.is-provisional > td { color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.chart-table tr.is-provisional > td:first-child { position: relative; }
.table-more { margin-top: 8px; }
.table-more > summary { cursor: pointer; font-size: .84rem; color: var(--ink-2); }
.value-status.final { color: var(--ink-2); }

.spark-dot.is-provisional { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark-threshold {
  stroke: var(--watch); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.spark-cap {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  margin: 5px 0 0; line-height: 1.5;
}
.spark-flag {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 0.92em; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
}
.spark-empty {
  height: 38px; border-bottom: 1px dashed var(--line);
  background: repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 9px)
              bottom / 100% 1px no-repeat;
  opacity: 0.55;
}
/* A3：行内で高さを揃えた結果あまった領域は、スパークライン（または
   同寸のプレースホルダ）を伸ばして埋める。カード内に空白の帯を作らない。 */
.cond-card .spark {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column;
  /* 上限を設けない：行内で高さを揃えた結果あまった領域は、観測データ（スパークライン）で
     すべて埋める。上限を付けると、説明の少ないカードに空白の帯が戻る（A3の再発・2026-08-23実測） */
  flex: 1 1 auto; min-height: 48px;
}
.cond-card .spark-svg { flex: 1 1 auto; height: auto; min-height: 38px; }
.cond-card .spark-empty { flex: 1 1 auto; height: auto; min-height: 30px; }
.cond-card .spark-cap { flex: none; }

/* ---------- 今日の変化：直近7日の帯（B8） ---------- */
.change-week {
  display: flex; gap: 6px; margin: 4px 0 20px; padding: 0; flex-wrap: wrap;
}
.change-day {
  flex: 1 1 68px; min-width: 62px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); padding: 7px 6px 6px;
  text-align: center; font-family: var(--font-mono); line-height: 1.4;
}
.change-day .d { display: block; font-size: 0.72rem; color: var(--ink-2); }
.change-day .n { display: block; font-size: 0.66rem; color: var(--muted); margin-top: 3px; }
.change-day.has { border-color: rgba(53,208,160,0.45); background: rgba(53,208,160,0.10); }
.change-day.has .d { color: var(--pulse); }
.change-day.has .n { color: var(--pulse); }
.change-day.unobserved { border-style: dashed; opacity: 0.5; }
.change-day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--accent); }
/* 今日の変化の階層化（2026-09-03）：定常更新は <details> に畳む・種別タグ */
.change-fold > details > summary { cursor: pointer; list-style: none; color: var(--ink-2); }
.change-fold > details > summary::-webkit-details-marker { display: none; }
.change-fold > details > summary:hover { color: var(--ink); }
.change-fold > details[open] > summary { margin-bottom: 6px; }
.change-fold .change-list { margin: 0 0 0 1.2em; padding: 0; border-left: 1px solid var(--line); }
.change-fold .change-list li { padding-left: 10px; }
.change-kind { display: inline-block; font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); vertical-align: middle; margin-right: 2px; }
.change-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.72rem; color: var(--muted); margin: 0 0 18px;
}
.change-legend .k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; border: 1px solid var(--line); }
.change-legend .k.has { border-color: rgba(53,208,160,0.45); background: rgba(53,208,160,0.10); }
.change-legend .k.none { background: var(--surface-2); }
.change-legend .k.unobserved { border-style: dashed; opacity: 0.6; }
.change-list { margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.change-list li { color: var(--ink-2); }
.change-list .cat { color: var(--ink); font-weight: 700; }
.change-list .detail { display: block; color: var(--muted); font-size: 0.82em; }
.change-date {
  margin: 20px 0 8px; font-size: 0.95rem;
  font-family: var(--font-mono); color: var(--ink-2); font-weight: 500;
}
/* 台帳を訂正した日はその事実を出す（訂正を隠さない） */
.change-rev {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 400;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px dashed rgba(159,176,195,0.34);
}

/* ---------- stat tiles ---------- */
.stat-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  margin: 22px 0;
}
.stat-tile {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.stat-tile .label { font-size: 0.78rem; color: var(--ink-2); margin: 0 0 6px; }
.stat-tile .value {
  font-family: var(--font-mono); font-size: 1.9rem; line-height: 1.2;
  margin: 0; color: var(--ink);
}
.stat-tile .value small { font-size: 0.85rem; color: var(--ink-2); margin-left: 4px; }
.stat-tile .meta { font-size: 0.7rem; color: var(--muted); margin: 8px 0 0; }
.stat-tile .spark { margin-top: auto; padding-top: 10px; }

/* ---------- chart ---------- */
.chart-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 22px 0;
}
.chart-panel h3 { margin: 0 0 4px; font-size: 1.02rem; }
.chart-panel .chart-note { font-size: 0.78rem; color: var(--muted); margin: 0 0 14px; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px;
  font-size: 0.78rem; color: var(--ink-2); list-style: none; padding: 0;
}
.chart-legend .swatch {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 6px;
}
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-tip {
  position: absolute; pointer-events: none; display: none;
  background: #0b1220; border: 1px solid #2b3b52; border-radius: 8px;
  padding: 8px 11px; font-size: 0.75rem; line-height: 1.6;
  font-family: var(--font-mono); color: var(--ink); white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45); z-index: 5;
}
.chart-src { font-size: 0.72rem; color: var(--muted); margin: 12px 0 0; }
.chart-src a { word-break: break-word; }
details.chart-table { margin-top: 12px; font-size: 0.8rem; }
details.chart-table summary { cursor: pointer; color: var(--ink-2); }
details.chart-table table { border-collapse: collapse; margin-top: 10px; width: 100%; }
details.chart-table th, details.chart-table td {
  border: 1px solid var(--line); padding: 5px 9px; text-align: right;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-2);
}
details.chart-table th { color: var(--ink); background: var(--surface-2); text-align: center; }
details.chart-table td:first-child { text-align: center; }
/* 列数の多い表は枠内で横スクロールさせる（ページ本体は横スクロールさせない・A5） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; width: 100%; } /* データ表はコンテナ幅いっぱい（2026-08-30 代表指示） */

/* ---------- article / chapter ---------- */
.article { max-width: none; } /* 本文幅は--maxwに統一（2026-08-29） */
.article h2 {
  font-size: 1.28rem; margin: 48px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
/* 記事ブロックの先頭見出しは、直前に区切る対象が無いので余白と罫線を落とす
   （A2と同じ「見出しが無い/直前が空のときに余白が積み上がる」問題の是正） */
.article > :first-child { margin-top: 0; }
.article > h2:first-child { padding-top: 0; border-top: 0; }
.article h3 { font-size: 1.05rem; margin: 30px 0 10px; }
.article h4 { font-size: 0.95rem; margin: 22px 0 8px; color: var(--ink); }
.article p { color: var(--ink-2); margin: 0 0 16px; }
.article strong { color: var(--ink); }
.article ul { color: var(--ink-2); padding-left: 0.2em; }
.article li { margin-bottom: 6px; }
.article a { word-break: break-word; }

.indicator-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.indicator-no {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--pulse);
  border: 1px solid rgba(53,208,160,0.35); border-radius: 6px; padding: 2px 8px;
  white-space: nowrap;
}
.scope-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 5px; margin: 0 0 8px;
}
.scope-tag.world { color: #8fc0ff; background: rgba(57,135,229,0.14); }
.scope-tag.japan { color: #ffb08a; background: rgba(217,89,38,0.14); }

.toc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; padding: 0; list-style: none; }
.toc-chips a {
  display: block; font-size: 0.8rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
  background: var(--surface);
}
.toc-chips a:hover { color: var(--ink); border-color: #2b3b52; text-decoration: none; }

.callout {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 14px 18px; margin: 20px 0; font-size: 0.88rem; color: var(--ink-2);
}
.callout.warn { border-left-color: var(--watch); }
.callout .t { font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }

/* ---------- 判定基準ブロック（B7：バッジの飛び先） ---------- */
.hantei {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--pulse); border-radius: 12px;
  padding: 16px 18px; margin: 20px 0;
  scroll-margin-top: 76px;               /* sticky ヘッダーに隠れないように */
}
.hantei > h3:first-child { margin: 0 0 8px; font-size: 1rem; }
.hantei p { font-size: 0.86rem; color: var(--ink-2); margin: 0 0 10px; }
.hantei table.plain { margin: 10px 0 12px; font-size: 0.8rem; }
.hantei table.plain td, .hantei table.plain th { padding: 6px 10px; }
.hantei .status-chip { margin-left: 0; }
.hantei .undefined-note {
  border-left: 3px solid var(--watch); background: rgba(250,178,25,0.07);
  padding: 10px 14px; border-radius: 8px; margin: 10px 0 0;
  font-size: 0.84rem; color: var(--ink-2);
}
.hantei ul { color: var(--ink-2); font-size: 0.86rem; }
.hantei li { margin-bottom: 5px; }

/* ---------- chapter link cards ---------- */
.chapter-links {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: 20px;
}
.chapter-links a {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; color: var(--ink); font-size: 0.9rem; font-weight: 500;
}
.chapter-links a small { display: block; color: var(--muted); font-weight: 400; font-size: 0.74rem; margin-top: 3px; }
.chapter-links a:hover { border-color: #2b3b52; text-decoration: none; }

/* ---------- pubcomment list ---------- */
.pubcom-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px;
}
.pubcom-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.pubcom-deadline {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  padding: 3px 10px; border-radius: 6px; white-space: nowrap;
  color: #ffd35c; background: rgba(250,178,25,0.12);
}
.pubcom-deadline.soon { color: #ff8f8f; background: rgba(208,59,59,0.15); }
.pubcom-deadline.ended { color: var(--muted); background: rgba(107,122,141,0.15); font-weight: 400; white-space: normal; }
.pubcom-tag {
  font-size: 0.7rem; color: #8fc0ff; background: rgba(57,135,229,0.14);
  padding: 2px 9px; border-radius: 5px;
}
.pubcom-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.pubcom-item h3 { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.6; }
.pubcom-item h3 a { color: var(--ink); }
.pubcom-meta { font-size: 0.74rem; color: var(--muted); margin: 0 0 8px; font-family: var(--font-mono); }
.pubcom-note { font-size: 0.85rem; color: var(--ink-2); margin: 0; border-top: 1px dashed var(--line); padding-top: 8px; }
.pubcom-note::before { content: "関わり："; color: var(--pulse); font-size: 0.75rem; margin-right: 4px; }

/* ---------- lifecycle stage chips（法規制章） ---------- */
.stage-chip {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 10px; border-radius: 5px; white-space: nowrap;
}
.stage-chip.shingi { color: #8fc0ff; background: rgba(57,135,229,0.14); }
.stage-chip.pubcom { color: #ffd35c; background: rgba(250,178,25,0.12); }
.stage-chip.machi  { color: #ffb08a; background: rgba(217,89,38,0.14); }
.stage-chip.sumi   { color: #7ee787; background: rgba(12,163,12,0.13); }
.stage-head { margin: 28px 0 12px; font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 60px; border-top: 1px solid var(--line-soft);
  padding: 34px 0 44px; font-size: 0.8rem; color: var(--muted);
}
.site-footer .cols {
  display: flex; flex-wrap: wrap; gap: 24px 36px;
  align-items: flex-start;
}
.site-footer .pub { line-height: 1.9; flex: 1 1 300px; }
.site-footer nav { flex: 0 1 auto; min-width: 150px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a { color: var(--ink-2); }

/* ---------- tables ---------- */
table.plain { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.85rem; }
table.plain th, table.plain td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; color: var(--ink-2); }
table.plain th { background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* ---- 脆弱性指標（各章に1本ずつ通す「起きたときにどれだけ痛いか」の指標） ---- */
.vuln-panel { border-left: 3px solid var(--accent-2); }
.vuln-figure {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  padding: 14px 16px; margin: 0 0 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px;
}
.vuln-figure .vuln-value { margin: 0; line-height: 1; }
.vuln-figure .vuln-num {
  font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em;
}
.vuln-figure .vuln-unit { font-size: 1rem; color: var(--ink-2); margin-left: 3px; }
.vuln-figure .vuln-caption { margin: 0; font-size: 0.9rem; color: var(--ink-2); flex: 1 1 260px; }
.vuln-figure .vuln-sub {
  margin: 0; flex: 1 1 100%; font-size: 0.76rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.vuln-figure .spark { flex: 1 1 100%; margin-top: 4px; }
.vuln-partial {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 0.68rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
}

/* ---------- responsive（A5：375px 幅で全ページ確認） ---------- */
/* 1024px以下：横スクロール可能な1段ナビ（2026-08-30 代表指示。旧ハンバーガーメニューを置換。
   .site-header .wrap の flex-wrap でナビはブランド行の下の全幅行に落ち、行内を横スクロールする） */
@media (max-width: 1024px) {
  .global-nav {
    flex: 1 1 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .global-nav ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
  .site-header .wrap { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .hero { padding: 34px 0 16px; }
  /* 2026-09-07 指示④：この幅では「今週AIから」カードと日付バッジが2行以上に折り返す。
     角丸 999px のままだと左右の丸みに文字が食い込んで枠外に見えるため、角丸を落として
     横 padding を広げる（幅は max-width:100% で親内に収まっている）。 */
  .hero .ai-readers-line, .hero .date-badge {
    border-radius: 14px; padding: 9px 14px; width: auto;
  }
  .hero + .section { padding-top: 12px; }
  .section { padding: 26px 0; }
  .cond-card { padding: 16px 15px 13px 19px; }
  .cond-card .headline { min-height: 0; }
  .change-day { flex: 1 1 44px; min-width: 40px; padding: 6px 3px; }
  .change-day .d { font-size: 0.64rem; }
  .change-day .n { font-size: 0.6rem; }
  .site-footer .cols { gap: 20px; }
  .site-footer nav { min-width: 130px; }
  .chapter-meta { gap: 8px; padding: 11px 13px; }
  .status-legend { padding: 14px 14px; }
  .status-legend li { gap: 2px; }
  .observing-note > div { grid-template-columns: 1fr; gap: 2px; }
  .observing-note dt { justify-self: start; }
}

@media (max-width: 420px) {
  body { font-size: 15px; }
  /* 2026-09-07 指示④：iPhone SE / mini 級。文字を1段落として横 padding を詰める */
  .hero .ai-readers-line { padding: 9px 12px; font-size: 0.78rem; gap: 4px 6px; }
  .hero .date-badge { padding: 8px 12px; }
  .metric { column-gap: 8px; }
  .metric .v small { display: block; margin-left: 0; }
  .vuln-figure .vuln-num { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .date-badge .dot { animation: none; }
  .cond-card, .cond-card:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------
   Editions切替（2026-08-29 代表指示・全地域共通）
   regions.json から site_lib.ps1 / 地域エンジンが生成。ヘッダー右端に表示。
   planned はリンクなし・薄色。current は塗りで強調。
--------------------------------------------------------------------- */
.editions-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.editions-switch .ed {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border: 1px solid var(--line-soft); border-radius: 999px;
  color: var(--muted); font-size: 0.78rem; white-space: nowrap; line-height: 1.4;
}
.editions-switch a.ed:hover { color: var(--ink); border-color: #35d0a0; text-decoration: none; }
.editions-switch .ed.is-current { color: #0a0e14; background: #35d0a0; border-color: #35d0a0; font-weight: 600; }
.editions-switch .ed.is-planned { opacity: 0.55; }
.editions-switch .ed .st { font-size: 0.68em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin-left: 2px; }
@media (max-width: 720px) {
  .editions-switch { width: 100%; justify-content: flex-end; padding-bottom: 6px; }
  .site-header .wrap { flex-wrap: wrap; }
}
/* 玄関の国別カード内の planned 表示（リンクなし） */
.chapter-links .edition-planned {
  display: block; padding: 14px 16px; border: 1px dashed var(--line-soft);
  border-radius: 12px; color: var(--muted); opacity: 0.7;
}
.chapter-links .edition-planned small { display: block; margin-top: 2px; font-size: 0.78rem; }
/* ナビ内の章Betaチップ（2026-08-30・chapters.json駆動） */
.global-nav a .nav-beta {
  font-size: 0.58em; letter-spacing: 0.06em; vertical-align: super;
  color: #8fd0ff; margin-left: 3px; font-weight: 600;
}

/* ---------- 表の短い列（日付・期間・状態）の折返し防止・ヘッダーとナビの余白（2026-09-04 代表指示・共通テンプレ） ----------
   ・日付・期間・確認日のセルは生成側が class="cl" を付ける（nowrap＋日付10文字ぶんの最小幅）。ページ個別の style では書かない
   ・内容列は width:auto＋word-break で長文を吸収し、表全体は .table-scroll の横スクロールで狭幅でも列を潰さない */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-table table, .regtbl { width: 100%; table-layout: auto; }
.chart-table td, .chart-table th, .regtbl td, .regtbl th { vertical-align: top; }
.chart-table td.cl, .chart-table th.cl, .regtbl td.cl, .regtbl th.cl, table.plain td.cl, table.plain th.cl { white-space: nowrap; min-width: 10ch; }
.chart-table td:not(.cl), .regtbl td:not(.cl) { width: auto; overflow-wrap: anywhere; word-break: break-word; }
.value-status, .change-kind, .soon-tag, .status-chip, .freq-badge .k, .freq-badge .v, .nav-beta { white-space: nowrap; }  /* freq-badge 全体は nowrap にしない（章冒頭の長い注記が横幅を押し広げる） */
/* ヘッダー：上16px・下12pxの余白（ロゴ「AIライフライン／AI LIFELINE」が上端に張り付かないように）。sticky 固定時も同じ */
.site-header .wrap { padding-top: 16px; padding-bottom: 12px; row-gap: 10px; }
.brand-text { padding: 2px 0; overflow: visible; }
/* ナビ3段（章タブ／AIの方へ・支援／地域切替）の段ごとの上下余白を揃える */
.global-nav ul { padding: 4px 0; row-gap: 6px; }
.editions-switch { padding: 4px 0; }
@media (max-width: 1024px) { .global-nav { padding: 2px 0; } }
@media (max-width: 720px) { .site-header .wrap { padding-top: 14px; padding-bottom: 10px; } .editions-switch { padding: 4px 0 8px; } }

/* ---------- AI引用対策（2026-09-06 §1・§3）：今日の答え・鮮度行・表の問い・FAQ・引用枠 ----------
   .answer-band＝章ヒーロー直下の1文（判定章は確定値と閾値の関係・観測中章は観測開始／系列数／最終確定）。
   数値は data-* で機械可読（既存の stat-tile と同じ属性名）。色だけで意味を持たせない（文字が主・帯は装飾） */
.answer-band { padding: 10px 0 0; }
.answer-band .answer-line {
  margin: 0; padding: 12px 16px; border-left: 4px solid var(--pulse); background: var(--surface);
  border-radius: 10px; font-size: 1.02rem; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere;
}
.answer-band + .section { padding-top: 14px; }   /* hero + .section と同じ詰め方 */
.hero .freshness { margin: 6px 0 0; color: var(--ink-2); font-size: 0.85rem; line-height: 1.6; }
.table-q { color: var(--ink-2); font-size: 0.88rem; margin: 14px 0 6px; }
.faq .faq-list { margin-top: 6px; }
.faq .faq-q { font-size: 1.02rem; margin: 18px 0 6px; color: var(--ink); }
.faq .faq-a { margin: 0 0 6px; color: var(--ink-2); overflow-wrap: anywhere; }
.cite-box { margin-top: 22px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; }
.cite-box h3 { margin: 0 0 6px; font-size: 0.95rem; }
.cite-box p { margin: 0 0 6px; overflow-wrap: anywhere; }
.cite-box .sec-note { margin-bottom: 0; }
@media (max-width: 720px) { .answer-band .answer-line { font-size: 0.96rem; padding: 10px 12px; } }

/* 観測中（ソース確認中）の告知枠（2026-09-08）
   以前は生成側が background:#f5f5f5 を直書きし、文字色を指定していなかったため
   暗色のページで「白い空箱」に見えていた。背景・枠・文字色をここで一組にして持つ。 */
.source-review {
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px dashed var(--watch);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
}
.source-review a { color: var(--accent); }
.source-review .source-review-lead { margin: 0 0 6px; }
.source-review ul { margin: 0; padding-left: 1.3em; color: var(--ink-2); }
.source-review li { margin: 2px 0; }
.source-review .source-review-empty { margin: 0; color: var(--ink-2); }