/* 読み物ページ（スキル / ハーネス / ループ）だけが読む追加スタイル。
   作品一覧は読まないので、一覧の見た目は変わらない。
   色は assets/style.css の変数をそのまま使う（ここでリテラル色を書くと
   ダークで破綻する）。ここで足しているのは「形の規律」だけ。

   形の規律は DESIGN.md Gallery（作品 #160）の reverve を出所にしている。
   同ギャラリーの実測では、デザインの個性を運ぶのは色ではなく構造の側なので、
   色は持ち出さず、次の 5 つだけを借りた。
     1. 角丸ゼロ。面は #ddd 相当のヘアライン 1 本だけで仕切り、塗り・影・グラデを足さない
     2. 見出しの左上に浮く 45×4px の短棒。ページ内の装飾はこれ一種類しか置かない
     3. 行間 1.8 ／ letter-spacing 1px を和文にも一律
     4. 欧文見出しだけ Josefin Sans、本文は既存のシステム書体（混植関係を保つ）
     5. 差し色は「点」でしか出さない（リンク・現在地・タグ）
   6 つ目として「タグを間引かない（物量そのものが質感）」も借りている。
   スキル 92 件をそのまま並べるのはこの規律に沿ったもので、絞り込みで隠さない。 */

/* 見出しの欧文書体。Google Fonts から読ませず、ファイルを自分で持って自分で配る。
   外部から読むと、閲覧のたびに閲覧者の IP・ブラウザ情報・見ているページの URL が
   配信元へ渡る。この作品集は「URL を渡した相手だけが見る」運用なので、
   閲覧の事実が第三者に伝わる経路をここで作りたくない（外部を読むページは他に無い）。

   latin サブセットの可変フォント 1 本（約 28KB）で 400 と 600 の両方をまかなう。
   和文は含まれていないので、日本語は下の var(--font)（OS の既定ゴシック）に落ちる。
   Josefin Sans は SIL Open Font License 1.1（assets/fonts/OFL.txt）。 */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700; /* 可変フォントなので単一の値ではなく範囲で宣言する */
  font-display: swap;
  src: url("fonts/josefin-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

.doc {
  --radius: 0px; /* 角丸ゼロ。カード・バッジなど既存クラスもこのページでは角を落とす */
  --doc-display: "Josefin Sans", var(--font);
  line-height: 1.8;
  letter-spacing: 1px;
}

/* Josefin Sans が読めない環境（オフライン・file:// で回線なし）では
   var(--font) に落ちる。落ちても崩れないよう、字送りは本文側で持つ。 */

.doc .wrap { max-width: 1080px; }

/* ---------- 見出しまわり ---------- */

.doc-head {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--doc-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.doc-title {
  margin: 0 0 18px;
  font-family: var(--doc-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.doc-title .thin {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
}

.doc-lead {
  margin: 0 0 16px;
  max-width: 74ch;
  font-size: 15px;
}

.doc-lead strong { font-weight: 600; }

.doc-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 数字の並び ---------- */

.kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.kpi {
  flex: 1 1 150px;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kpi b {
  display: block;
  font-family: var(--doc-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.kpi span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- セクション ---------- */

.doc-sec { padding: 46px 0 0; }

.doc-sec > h2 {
  position: relative;
  margin: 0 0 14px;
  padding-top: 18px;
  font-family: var(--doc-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ページ内の装飾はこの短棒ひとつだけ。他に塗りや影を足さない */
.doc-sec > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 4px;
  background: var(--text);
}

.doc-sec > h3 {
  margin: 30px 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.doc-note {
  margin: 0 0 20px;
  max-width: 78ch;
  color: var(--muted);
  font-size: 13.5px;
}

/* 節の中の「ただの段落」だけに効かせる。`.doc-sec p` と書くと優先度で勝ってしまい、
   .doc-note / .rail-name / .rail-desc / .stage-effect / .layer-empty の指定を
   まとめて上書きする（実際に 5 つとも 14.5px に潰れ、行の見出しと説明が同じ大きさに
   なっていた）。クラスを持つ段落はそれぞれの指定に任せる。 */
.doc-sec p:not([class]) { max-width: 78ch; font-size: 14.5px; }

/* ---------- ヘアラインだけで仕切る行 ---------- */

.rail {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.rail > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.rail-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rail-desc {
  margin: 0;
  max-width: 82ch;
  color: var(--muted);
  font-size: 13.5px;
}

/* 行頭に立てる細い印。色は「点」でしか使わない規律に合わせ、幅 3px に留める */
.rail.marked > li {
  padding-left: 14px;
  border-left: 3px solid var(--border-strong);
}

.rail.marked > li.is-accent { border-left-color: var(--accent); }

/* ---------- タグ（間引かない） ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}

.chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip.is-own {
  border-color: var(--accent);
  color: var(--accent);
}

/* 絞り込みボタン。押されている状態だけ差し色が点で出る */
.doc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}

.doc-filters button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.doc-filters button:hover { color: var(--text); }

.doc-filters button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------- 表 ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 18px;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.doc-table th,
.doc-table td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.doc-table thead th {
  border-bottom-color: var(--border-strong);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ---------- ハーネスの段階 ---------- */

.stages {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.stage {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.stage-n {
  font-family: var(--doc-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stage-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.stage-sub {
  color: var(--muted);
  font-family: var(--doc-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stage-effect {
  margin: 0 0 16px;
  max-width: 82ch;
  color: var(--muted);
  font-size: 13.5px;
}

.layer { margin: 0 0 14px; }

.layer:last-child { margin-bottom: 0; }

.layer-label {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.layer-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 出典・脚注 ---------- */

.doc-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.doc-sources li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

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

.doc .site-tabs a { text-decoration: none; }

.doc-foot {
  margin: 44px 0 0;
  padding: 20px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.doc-foot p { margin: 0 0 6px; max-width: 82ch; }

/* ===================== 図 =====================

   本文は「塗り・影・グラデを足さない」規律で組んであるが、**図だけはこの規律を緩めている**。
   読み物 3 枚は初見の第三者に向けたページで、罫線と余白だけの図は正確ではあっても
   一目で掴めない、と判断したため（2026-08-31 の判断）。ただし緩めるのは面の塗りだけで、
   影とグラデは引き続き使わない。語彙は 6 つに固定し、全部の図がこれだけで描かれる。

     枠     … 1px の実線。構造と区画
     地の面 … --surface-2。ひとまとまりであることを示す
     強調面 … --accent-soft。1 図につき最大 1 か所だけ。ここを見ろ、の意
     刻み   … 幅 2px の縦線を n 本。1 本 = 1 件
     欠落   … 破線＋差し色。未完成・意図的な空・繋がっていないこと
     点     … 8px の塗り。現在地

   濃淡（ヒートマップ・塗りの棒グラフ）は使わない。ライトとダークで濃い / 薄いの意味が
   反転しやすく、色の意味を読み手が学び直すことになるため。面は上の 2 種類だけを使う
   （どちらもライト / ダーク両方に値があるので、そのまま反転してくれる）。

   図の中で守ること 3 つ（どれも実際に踏んだ罠）:
     1. 図の中の <p> には必ずクラスを付ける。クラスの無い段落は
        `.doc-sec p:not([class])` に拾われて 14.5px に膨らみ、桁が崩れる
     2. 数字には letter-spacing: 0 と tabular-nums。`.doc` の字間 1px が数字にも乗る
     3. 主要な罫は --border ではなく --border-strong。ダークで --border は 1px だと沈む */

.fig {
  margin: 0 0 24px;
}

.fig-cap {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* --- ループ成立の 4 条件: 梁を支える 4 本の柱 --- */

.pillars-beam {
  margin: 0;
  padding: 0 0 9px;
  border-bottom: 2px solid var(--border-strong);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.pillars-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* 柱は梁からぶら下がるので上辺を持たない。
   `border-top: none` ではなく幅 0 にするのが要点 — none は「線種なし・太さは初期値」なので、
   後から .is-gap が線種を dashed に変えた瞬間に太さが初期値（3px）で復活し、
   破線の柱にだけ上辺が生えてしまう（実際に踏んだ）。幅 0 なら線種が変わっても出てこない。 */
.pillar {
  padding: 13px 11px 15px;
  border: 1px solid var(--border-strong);
  border-top-width: 0;
  background: var(--surface-2);
  letter-spacing: 0.02em; /* 375px では 4 本で 1 本 78px しかないので字間を詰める */
}

/* 立っていない 1 本。破線に加えて面も差し色にし、図の中で一番目に入る場所にする */
.pillar.is-gap {
  background: var(--accent-soft);
}

.pillar-name {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.pillar-sub {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.pillar-flag {
  margin: 8px 0 0;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}

/* --- 階段。3 つの図が共有する（積み上がる層 / 権限の段 / 判断の降り方）---

   段は --i（段の深さ）ぶん横へずれる。どちらへ広がるかは --i の振り方だけで決まるので、
   下から積み上がる図（上の段ほど --i を大きく）も、上から降りていく図（下の段ほど大きく）も
   同じ CSS のまま書ける。左列の幅は --lw で変える（時期を置くなら狭く、状況の文を置くなら広く）。 */

.ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ladder-step {
  display: grid;
  grid-template-columns: var(--lw, 92px) 1fr;
  gap: 3px 16px;
  margin-left: calc(var(--i, 0) * 12px);
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

/* 立っていない段は面を持たない（破線の枠だけが残る） */
.ladder-step.is-gap { background: none; }

.ladder-key {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ladder-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.ladder-name .dot { margin-left: 9px; }

.ladder-sub {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* --- パイプライン。6 段階 × 2 層 ＋ 下を貫く横断帯 ---

   375px では 6 レーンで 1 本 57px しか取れないので、横スクロールに逃がす。
   overflow は .fig-scroll が持ち、min-width は中の .pipeline が持つ。
   min-width を .fig-scroll 側に置くと、外側が広がって本文ごとはみ出す（点検に落ちる）。 */

.fig-scroll {
  overflow-x: auto;
}

.pipeline {
  display: grid;
  grid-template-columns: 132px repeat(6, 1fr);
  gap: 3px;
  min-width: 800px;
}

.pipe-flow {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 11.5px;
}

.pipe-flow svg { margin-left: auto; }

.pipe-head {
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.pipe-n {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pipe-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.pipe-lane {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.pipe-cell {
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* 自動強制が 1 つも無い段階。空欄にすると抜けに見えるので、意図であることを面で言う */
.pipe-cell.is-gap { background: var(--accent-soft); }

.pipe-count {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pipe-note {
  margin: 8px 0 0;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.5;
}

.pipe-band {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.pipe-band-name {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.pipe-band-list {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

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

.debt-fig {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 3px;
  align-items: stretch;
}

.debt-sev {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 600;
}

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

.debt-item {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
}

/* 着手済みは塗る。未着手は .is-gap（破線）だけを付けて、面を持たない空枠のまま残す */
.debt-item.has-status {
  border-color: var(--accent);
  background: var(--accent);
}

.debt-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- 比率の帯。1 本の線を件数どおりに区切る --- */

.share-bar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
}

.share-seg {
  padding: 9px 2px;
  border-left: 1px solid var(--border-strong);
  background: var(--surface-2);
  text-align: center;
  overflow: hidden; /* いちばん細い区間（4/92）は 375px で 15px しかない */
  white-space: nowrap;
}

.share-seg:first-child { border-left: 0; }

.share-seg.is-own {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.share-n {
  font-size: 12px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- 事故 → 対策の対比 --- */

/* align-items は stretch のまま（既定）にしておくこと。center にすると
   3 つのセルの高さが中身なりになり、.split > * が引く区切り線が行ごとに
   最大 10px ずれてバラバラの短い線になる（実測）。左の面も行の高さまで届かず
   ガタつく。矢印だけは下の .split-arrow が自分で中央に置く。 */
.split {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  gap: 0;
  border-top: 1px solid var(--border-strong);
}

.split > * {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-strong);
}

.split-problem { background: var(--surface-2); }

.split-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  color: var(--muted);
}

.split-arrow svg { display: block; margin: 0 auto; }

.split-name {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.split-body {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* --- スキルのカード --- */

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 26px;
}

.skill-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* 自作だけ差し色の縦棒を立てる（一覧が行だった頃と同じ目印） */
.skill-card.is-own {
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}

.skill-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
}

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

/* 識別名は下端に揃える（説明の長さが違ってもカードの足並みが揃う） */
.skill-dir {
  margin: auto 0 0;
  padding-top: 4px;
}

.skill-dir code {
  color: var(--muted);
  font-size: 11px;
}

/* --- 共通語彙。どの図でも同じ意味を持つ修飾 ---

   .is-focus / .is-gap は、各図が border（一括指定）で引いた実線に、線種と色だけを重ねる。
   クラス 1 つぶんの強さしかないので勝ち負けは記述順で決まる。**この節を各図の指定より前へ
   動かすと実線に戻り、破線が黙って消える**（足すときもこの節の中に足すこと）。
   一方、各図側の .pillar.is-gap / .ladder-step.is-gap などはクラス 2 つぶんで常に強く、
   面の色だけを図ごとに上書きしている（差し色で強めるか、面を持たせないか）。
   ここは記述順に依存しないので、図のブロックはどこへ動かしてもよい。 */

/* 強調面。1 図につき最大 1 か所 */
.is-focus {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* 欠落。未完成・意図的な空・繋がっていない */
.is-gap {
  border-style: dashed;
  border-color: var(--accent);
}

/* 現在地 */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  vertical-align: middle;
}

/* 件数。1 本 = 1 件 */
.ticks {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.ticks i {
  display: block;
  width: 2px;
  height: 100%;
  background: var(--border-strong);
}

/* 図の中の数字。`.doc` の字間 1px が数字にも乗るので打ち消し、桁を揃える */
.fig-num {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 表の中で自作の件数だけ差し込む */
.is-own-num { color: var(--accent); font-weight: 600; }

/* 広い方から順に書く。狭い方を先に書くと、375px でも後ろの 900px 用が勝ってしまう */
@media (max-width: 900px) {
  .skill-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .doc { letter-spacing: 0.4px; }
  .skill-grid { grid-template-columns: 1fr; }
  .doc-head { padding-top: 30px; }
  .kpi { flex-basis: 100%; }
  .pillars-row { gap: 6px; }
  .pillar { padding: 11px 7px 13px; }
  /* 段のずれは残す（土台がどれかが図の意味そのものなので）。幅だけ詰める */
  .ladder-step {
    grid-template-columns: 1fr;
    margin-left: calc(var(--i, 0) * 6px);
    padding: 11px 12px;
  }
  .ladder-sub { grid-column: 1; }
  .split { grid-template-columns: 1fr; }
  .split-arrow { transform: rotate(90deg); padding: 6px 0; border-bottom: 0; }
}