/* ハーネス設計ページ（harness.html）だけが読む、ページ固有のスタイル。

   配色トークン・アイコン・タグ・パネル・KPI カードなどの土台は assets/doc-dark.css にある
   （skills.html / loop.html と共有）。**読み込む順は style.css → doc-dark.css → このファイル。**
   ここに書くのは、このページの図（レール図・段階の表・負債の 3 段）だけ。

   リテラル色はここに書かない。doc-dark.css の .hx { } にあるトークンを var(--*) で使う。
   書体を外部（Google Fonts）から読む判断の経緯も doc-dark.css の冒頭にある。 */

/* ---------- 導入 ---------- */

.hx-intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 0 0;
}

.hx-lead + .hx-lead { margin-top: -8px; }

/* 3 つ並びの注意書き。カード 1 枚ぶんの見た目は doc-dark.css の .hx-note が持つ */
.hx-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* 数字は 5 枚。列数と畳み方はページ側で決める（doc-dark.css は既定の 4 を持つだけ） */
.hx-kpis { --hx-kpi-cols: 5; }

/* ---------- レール図（1 枚で見渡すほう） ----------

   モック 1a 案の形。1 本のレールの上に自動、下に能動を吊るし、左から右へ読ませる。
   下の表と同じ 30 件を、名前だけで一覧にしたもの（説明文は表が持つ）。

   6 列に長い名前（`pr-test-analyzer / type-design-analyzer / ...`）が入るので、
   狭い画面では**この図だけ横スクロールに逃がす**。説明文を持たない図なので、
   横に流しても読めなくならない（表のほうは説明が読めなくなるので縦積みにしてある）。
   overflow は doc-dark.css の .hx-scroll が持ち、min-width は中の .hx-rail が持つ。 */

.hx-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 1180px;
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-xl);
  background: var(--hx-card);
  box-shadow: var(--hx-shadow);
}

.hx-rail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.hx-rail-label .ms { font-size: 14px; }
.hx-rail-label.is-auto { color: var(--hx-ok); }
.hx-rail-label.is-gate { color: var(--accent); }

/* 上の段は下端から積み上げ、下の段は上端から吊るす。こうしておくと、段階ごとに
   件数が違ってもレールの線がまっすぐ通る（中央揃えにすると線が波打つ）。

   列数は harness.html が --hx-rail-cols で渡す（段階の数そのもの）。ここに 6 を
   焼き込むと、段階を 1 つ足したときに本文と KPI だけ 7 になり、図が崩れる。
   既定の 6 は、JS が動かなかったときに枠だけでも整うようにした保険。 */
.hx-rail-lane {
  display: grid;
  grid-template-columns: repeat(var(--hx-rail-cols, 6), minmax(0, 1fr));
  gap: 10px;
}

.hx-rail-lane.is-auto { align-items: end; }
.hx-rail-lane.is-gate { align-items: start; }

.hx-rail-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hx-chip {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-md);
  background: var(--hx-sunken-soft);
  font-size: 12px;
  line-height: 1.45;
  color: var(--hx-body);
}

.hx-chip.is-auto {
  border-color: var(--hx-ok-line);
  background: var(--hx-ok-fill);
  color: var(--hx-body-2);
}

.hx-chip.is-empty {
  border-color: var(--accent);
  background: var(--hx-accent-wash);
}

.hx-chip-name { display: block; margin: 0; }
.hx-chip .hx-tag { margin-top: 5px; }

.hx-chip.is-empty .hx-chip-name {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.hx-chip-sub {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* レール本体。線は ::before で敷き、番号の丸が地の色で上から隠す */
.hx-rail-line {
  position: relative;
  padding-top: 14px;
}

.hx-rail-line::before {
  content: "";
  position: absolute;
  /* 丸の中心は padding-top 14px ＋ 半径 14px ＝ 28px。線は 2px あるので、
     その半分だけ上から引いた 27px が線の上端になる（27〜29px の中心が 28px）。 */
  top: 27px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent) 16%, var(--accent) 84%, var(--border));
}

.hx-rail-nodes {
  position: relative; /* 線より上に重ねる */
  display: grid;
  grid-template-columns: repeat(var(--hx-rail-cols, 6), minmax(0, 1fr));
  gap: 10px;
}

.hx-rail-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.hx-rail-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--hx-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hx-rail-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* 自動強制を置いていない段階。丸を塗って現在地のように立てる */
.hx-rail-node.is-focus .hx-rail-dot {
  background: var(--accent);
  color: var(--on-accent);
}

.hx-rail-node.is-focus .hx-rail-name { color: var(--accent); }

/* ---------- 段階の表（このページの主役） ----------

   行 = 段階、列 = STAGE / AUTO / GATE。見出し行と各行が同じ列指定を持つ形にしてある
   （1 つの grid にまとめると、行ごとの罫線と差し色が書きにくいため）。
   表の行は .hx-grid-row。パネルの行（.hx-rows > li ＝ .hx-row-name / .hx-row-desc）
   とは別物なので、名前を分けてある。 */

.hx-grid {
  border: 1px solid var(--border);
  border-radius: var(--hx-r-xl);
  overflow: hidden;
}

/* 段階の列は 230px。モックの 180px だと、実データの「この段階で何が起きるか」の一文が
   1 行 6〜7 字で折り返して読めなくなる（モックにはこの一文が無かった）。 */
.hx-grid-head,
.hx-grid-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr);
}

.hx-grid-head {
  border-bottom: 1px solid var(--border);
  background: var(--hx-sunken);
}

.hx-grid-head > div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--hx-subtle);
}

.hx-grid-head .ms { font-size: 13px; }
.hx-grid-head .is-auto { color: var(--hx-ok); }
.hx-grid-head .is-gate { color: var(--accent); }

.hx-grid-row { border-bottom: 1px solid var(--border); }
.hx-grid-row:last-child { border-bottom: 0; }

/* 自動強制を置いていない段階の行。ここを見ろ、の意 */
.hx-grid-row.is-focus { background: var(--hx-accent-row); }

.hx-stage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}

.hx-stage-n {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--hx-r-sm);
  background: var(--muted);
  color: var(--on-accent);
  font-family: var(--hx-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hx-grid-row.is-focus .hx-stage-n { background: var(--accent); }

.hx-stage-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.hx-grid-row.is-focus .hx-stage-name { color: var(--accent); }

.hx-stage-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hx-subtle);
}

.hx-stage-effect {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--hx-subtle);
}

.hx-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.hx-lane.is-auto { border-right: 1px solid var(--border); }

/* 狭い画面で表を縦積みにしたときだけ出す、列の名札 */
.hx-lane-label {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--hx-subtle);
}

.hx-lane.is-auto .hx-lane-label { color: var(--hx-ok); }
.hx-lane.is-gate .hx-lane-label { color: var(--accent); }
.hx-lane-label .ms { font-size: 13px; }

/* 表のセルに積む 1 件 */
.hx-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-lg);
  background: var(--hx-sunken-soft);
}

.hx-item.is-auto {
  border-color: var(--hx-ok-line);
  background: var(--hx-ok-fill);
}

.hx-item-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--hx-body-2);
}

.hx-item-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
}

/* 「意図的に空」。空欄のまま置くと、載せ忘れなのか意図なのかが読み手に分からない */
.hx-empty {
  padding: 11px 13px;
  border: 1px solid var(--accent);
  border-radius: var(--hx-r-lg);
  background: var(--hx-accent-wash);
}

.hx-empty-name {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.hx-empty-desc {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 負債の 3 段 ---------- */

.hx-debt {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.hx-debt-sev {
  display: flex;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-lg);
  background: var(--hx-sunken-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hx-body-2);
}

.hx-debt-sev.is-top { color: var(--hx-warn); }

.hx-debt-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-lg);
}

.hx-debt-items i {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px dashed var(--hx-dash);
  border-radius: var(--hx-r-sm);
}

/* 着手済みは塗る。未着手は破線の空枠のまま残す */
.hx-debt-items i.is-done {
  border: 1px solid var(--hx-warn);
  background: var(--hx-warn);
}

.hx-debt-count {
  margin-left: auto;
  font-family: var(--hx-mono);
  font-size: 11px;
  color: var(--hx-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---------- 畳み方 ----------
   広い方から順に書く。逆順だと 375px でも後ろの広い方の指定が勝つ。
   共通部分（パネル・見出し帯）の畳み方は doc-dark.css が持つ。 */

@media (max-width: 1100px) {
  .hx-kpis { --hx-kpi-cols: 3; }
}

@media (max-width: 900px) {
  .hx-notes { grid-template-columns: 1fr; }
  .hx-grid-head,
  .hx-grid-row { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); }
  .hx-stage,
  .hx-lane { padding: 14px 12px; }
}

/* 375px の実効描画幅は 343px。3 列のままだと 1 列 100px を切って説明文が読めないので、
   横スクロールに逃がさず縦積みにする（読ませたいのは説明文の方なので）。 */
@media (max-width: 640px) {
  .hx-kpis { --hx-kpi-cols: 1; }
  .hx-grid-head { display: none; }
  .hx-grid-row { grid-template-columns: 1fr; }
  /* 縦積みになるので、右の仕切りを下の仕切りへ移す */
  .hx-stage,
  .hx-lane.is-auto {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .hx-lane-label { display: flex; }
  .hx-debt { grid-template-columns: 1fr; }
}