/* Copyright (C) 2026 Cabocia Inc. All rights reserved. */
/* 自治体比較ページ（/compare）。**muni.css の後に読む差分だけ**を置く。
   世界観（白カード・赤茶見出し・細罫線表・出典行）は muni.css の部品をそのまま借りるので、
   ここには「2列に並べる」ための骨組みしか書かない。新しい見た目を作らない。

   ★色は app.css の :root トークンだけを var() で使う（このファイルに色コードは 1 つも
     書かない = ui-baseline.md / contrast_check.py の台帳を壊さない）。
   ★2 系列の線は色だけで区別しない（--leaf と --terracotta-ink は色覚特性によっては
     近く見える）。実線 / 破線を併用して、色が見えなくても読み分けられるようにする。

   NEVER: 色の直書き / グラデーション / 巨大角丸 / 表自身への display:block。
   MUST: 数値は tabular-nums、数字と単位の間に空白なし、375px で横はみ出しゼロ。 */

/* --- 見出し ------------------------------------------------------------- */

.cmp-head { margin-bottom: 18px; }
.cmp-head h1 { margin-bottom: 6px; }
.cmp-head p { margin: 0; }

/* --- 自治体を選ぶ欄 ------------------------------------------------------ */

.cmp-picker {
  display: grid;
  /* 2 列 + ボタン。3 列目を足しても auto-fit が自然に折り返す。 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: end;
  margin: 0 0 24px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cmp-picker-field { min-width: 0; }
.cmp-picker-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--terracotta-ink);
}
.cmp-picker-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.cmp-picker-field input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cmp-current { margin: 6px 0 0; font-size: 0.78rem; overflow-wrap: anywhere; }
.cmp-picker-submit { margin: 0; }
.cmp-picker-submit .btn { width: 100%; }

.cmp-empty { padding: 20px; }
.cmp-empty p { margin: 0 0 6px; }
.cmp-empty p:last-child { margin-bottom: 0; }

/* --- 節 ------------------------------------------------------------------ */

.cmp-section { margin-top: 28px; }
.cmp-section .qa-section-heading { margin-top: 0; }

/* --- 比較表 --------------------------------------------------------------
   細罫線・右揃え・tabular-nums は muni.css の .mini-table と同じ作法。
   ★横スクロールは**ラッパー側**（table 自身に display:block を当てない = 列幅崩壊）。 */

.cmp-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.cmp-table {
  width: 100%;
  /* ★375px で「項目」列に押し込むと、見出しが 1 行 1〜2 文字まで潰れて読めなくなる
     （2026-08-28 のモバイル実測で踏んだ: 「将来推計人口 2070年」が 6 行に割れた）。
     読める幅を下限として持たせ、足りない分は .cmp-table-scroll が横スクロールで
     受ける（= ui-baseline.md の「ラッパーで包む」の意図どおりの使い方）。 */
  min-width: 440px;
  border-collapse: collapse;
  font-size: 0.86rem;
}
/* 項目名は折り返してよいが、1 文字ずつには割らない。 */
.cmp-table tbody th { min-width: 7.5em; }
.cmp-table th,
.cmp-table td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cmp-table thead th {
  background: var(--bg-subtle);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.cmp-table thead th a { color: var(--accent); }
.cmp-col-pref {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--fg-muted);
}
.cmp-table tbody th {
  font-weight: 400;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td.num,
.cmp-table th.num {
  text-align: right;
  font-variant-numeric: var(--num);
  white-space: nowrap;
}
.cmp-value {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--moss);
}
/* 単位は数字より一段小さく、**空白を入れずに**続ける（ui-baseline.md）。 */
.cmp-unit { font-size: 0.76rem; font-weight: 400; color: var(--fg-muted); }
.cmp-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-muted);
  white-space: normal;
}
/* 欠測は「数字が無い」ことが一目で分かる淡さにする（0 と読ませない）。 */
.cmp-missing { color: var(--fg-muted); }

/* --- 用途地域ドーナツ 2 枚 ----------------------------------------------- */

.cmp-donuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.cmp-donut-card { min-width: 0; }
.cmp-donut-card .qa-q { color: var(--terracotta-ink); }

/* --- 地価推移の重ね描き --------------------------------------------------- */

.cmp-series-legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
}
.cmp-series-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cmp-series-swatch {
  flex: 0 0 auto;
  width: 20px;
  height: 0;
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: 2px;
}
.cmp-chart { max-width: 560px; }

.cmp-line { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* 系列 1 = 実線、系列 2 = 破線、系列 3 = 点線。**色が見えなくても読み分けられる**。 */
.cmp-line.cmp-series-1 { stroke: var(--leaf); }
.cmp-line.cmp-series-2 { stroke: var(--terracotta-ink); stroke-dasharray: 6 4; }
.cmp-line.cmp-series-3 { stroke: var(--youto-industrial); stroke-dasharray: 2 3; }
.cmp-dot.cmp-series-1 { fill: var(--leaf); }
.cmp-dot.cmp-series-2 { fill: var(--terracotta-ink); }
.cmp-dot.cmp-series-3 { fill: var(--youto-industrial); }
.cmp-series-swatch.cmp-series-1 { border-top-color: var(--leaf); }
.cmp-series-swatch.cmp-series-2 { border-top-color: var(--terracotta-ink); border-top-style: dashed; }
.cmp-series-swatch.cmp-series-3 { border-top-color: var(--youto-industrial); border-top-style: dotted; }

/* --- 375px --------------------------------------------------------------- */

@media (max-width: 560px) {
  .cmp-picker { padding: 14px; gap: 12px; }
  .cmp-table th,
  .cmp-table td { padding: 8px 7px; }
  .cmp-value { font-size: 0.95rem; }

  /* ★比較ページの肝は「2つが同時に見えること」。横スクロールに追い出すと、
     片方を見るためにもう片方が画面から消えて**比較にならない**。
     375px では列幅を固定して 2 列とも画面に収める。
     ★`table-layout: fixed` が要る理由: 既定の auto レイアウトだと、補足行
     （「2026年・地価公示・自治体内の全地点の平均」）の長さが値の列を押し広げ、
     「項目」列が 1 行 1〜2 文字まで潰される（実測で踏んだ）。 */
  .cmp-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 0.8rem;
  }
  .cmp-table th:first-child { width: 30%; }
  /* 値は折り返さないが、補足は折り返してよい（列幅を決めるのは値のほうだけ）。 */
  .cmp-table td.num { white-space: normal; }
  .cmp-value { white-space: nowrap; }
}