/* ============================================================
   diagrams.css — flow / process / hierarchy diagrams.
   Reproduces the flowchart-style figures from the デジタル庁
   guidebook and encodes their principles as reusable classes.

   基本方針 (see readme.md § DIAGRAMS):
   - 流れは視線に沿わせる：左→右、または上→下。
   - ノードは白地＋1pxの細線＋8px角丸。装飾・影・3Dは使わない。
   - ラベルは「名詞（補足/ツール例）」。1ノード1概念。
   - コネクタは細い灰色の矢印。色や太さで飾らない。
   - 強調は1箇所だけ：注目する工程をアクセント色（青）にする。
   - 範囲外・補助はゴースト（破線＋灰）で控えめに。
   Link this with styles.css (+ slides.css when used on a slide).
   ============================================================ */

/* ---- Linear flow (process / pipeline) ---- */
.flow {
  display: flex; align-items: stretch; gap: 0;
  font-family: var(--font-sans);
}
.flow--col { flex-direction: column; align-items: stretch; }
.flow--wrap { flex-wrap: wrap; }

.flow-node {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 22px 24px; box-sizing: border-box;
}
.flow-node .flow-title { font: var(--fw-bold) 24px/1.3 var(--font-sans); color: var(--text-strong); }
.flow-node .flow-sub   { font: var(--fw-regular) 17px/1.4 var(--font-sans); color: var(--text-muted); }

/* Focus stage — the one thing being emphasized (青で1箇所だけ) */
.flow-node--accent {
  background: var(--blue-50);
  border-color: var(--brand);
  border-width: var(--border-width-strong);
}
.flow-node--accent .flow-title { color: var(--brand-strong); }

/* Solid accent variant (e.g. start/goal node) */
.flow-node--solid { background: var(--brand); border-color: var(--brand); }
.flow-node--solid .flow-title { color: #fff; }
.flow-node--solid .flow-sub { color: rgba(255,255,255,0.82); }

/* Out-of-scope / supporting — quiet, dashed */
.flow-node--ghost {
  background: var(--surface-page);
  border-style: dashed; border-color: var(--border-strong);
}
.flow-node--ghost .flow-title { color: var(--text-muted); font-weight: var(--fw-medium); }

/* Connector arrow between nodes (thin, gray, undecorated) */
.flow-arrow {
  flex: 0 0 auto; align-self: center;
  width: 40px; height: 2px; background: var(--gray-400);
  position: relative; margin: 0 4px;
}
.flow-arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 11px; height: 11px; border-top: 2px solid var(--gray-400); border-right: 2px solid var(--gray-400);
  transform: translateY(-50%) rotate(45deg);
}
.flow--col > .flow-arrow {
  width: 2px; height: 36px; margin: 4px 0; align-self: center;
}
.flow--col > .flow-arrow::after {
  right: 50%; top: auto; bottom: -1px; transform: translateX(50%) rotate(135deg);
}

/* Small label sitting on an arrow (条件・補足) */
.flow-arrow .flow-arrow-label {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: var(--fw-medium) 14px var(--font-sans); color: var(--text-subtle);
}

/* A band spanning under a flow (例：運用管理 が全体を支える) */
.flow-band {
  margin-top: 16px;
  background: var(--surface-control); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); padding: 16px 24px;
  font: var(--fw-medium) 18px var(--font-sans); color: var(--text-muted);
  text-align: center;
}

/* "scope" caption pointing at the focus node */
.flow-scope {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--fw-bold) 16px var(--font-sans); color: var(--brand);
}
.flow-scope::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--brand); }

/* ============================================================
   Process map — phased flow with sub-steps + a tool per phase.
   (ダッシュボード作成の流れ：要件の整理 → プロトタイピング → 実装)
   ============================================================ */
.procmap { display: flex; align-items: stretch; gap: 0; font-family: var(--font-sans); }
.phase {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-card);
}
.phase-head {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--brand); color: #fff; padding: 18px 22px;
}
.phase-head .no { font: var(--fw-bold) 18px var(--font-mono); opacity: 0.8; font-variant-numeric: tabular-nums; }
.phase-head .nm { font: var(--fw-bold) 24px var(--font-sans); }
.phase-steps { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.phase-step {
  display: flex; align-items: flex-start; gap: 12px;
  font: var(--fw-medium) 19px/1.45 var(--font-sans); color: var(--text-body);
}
.phase-step::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-top: 9px; border-radius: 2px; background: var(--brand); }
.phase-tool {
  border-top: 1px solid var(--border-subtle); padding: 16px 22px;
  background: var(--surface-page);
  font: var(--fw-regular) 16px/1.4 var(--font-sans); color: var(--text-muted);
}
.phase-tool b { display: block; font-weight: var(--fw-bold); color: var(--text-body); font-size: 14px; margin-bottom: 2px; letter-spacing: var(--ls-wide); }
.procmap-arrow {
  flex: 0 0 auto; align-self: center; width: 36px; height: 2px; background: var(--gray-400);
  position: relative; margin: 0 6px;
}
.procmap-arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 11px; height: 11px; border-top: 2px solid var(--gray-400); border-right: 2px solid var(--gray-400);
  transform: translateY(-50%) rotate(45deg);
}

/* ============================================================
   Hierarchy — whole → part (全体から部分へ).
   Reading flows top-left (overview) → bottom-right (detail).
   ============================================================ */
.hier { display: flex; flex-direction: column; gap: 0; font-family: var(--font-sans); }
.hier-level { display: flex; gap: 16px; }
.hier-node {
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 18px 22px;
  font: var(--fw-bold) 20px var(--font-sans); color: var(--text-strong);
}
.hier-node .sub { display: block; margin-top: 4px; font: var(--fw-regular) 15px var(--font-sans); color: var(--text-muted); }
.hier-node--whole { background: var(--blue-50); border-color: var(--brand); border-width: var(--border-width-strong); flex: 1; }
.hier-connect { align-self: center; width: 2px; height: 28px; background: var(--gray-400); margin: 6px 0; position: relative; }
.hier-connect::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: 10px; height: 10px; border-bottom: 2px solid var(--gray-400); border-right: 2px solid var(--gray-400); transform: translateX(-50%) rotate(45deg); }
.hier-axis { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: var(--fw-medium) 16px var(--font-sans); color: var(--text-subtle); }
.hier-axis .line { flex: 1; height: 2px; background: linear-gradient(to right, var(--brand), var(--gray-200)); border-radius: 1px; }

/* ============================================================
   Block / containment diagram — 構造図.
   Systems that CONTAIN sub-modules, joined by bidirectional
   connectors (bus / link). Use when the message is "how parts
   nest and talk", not "the order steps run in".

   基本方針 (see readme.md § DIAGRAMS):
   - 入れ子は塗りの濃淡ではなく枠線と余白で示す（外＝薄い面、
     内＝白）。色で階層を作らない。
   - 双方向のやり取りは細い灰色の両矢印＋中央のラベル札で示す。
     太い装飾ブロック矢印は使わない（コネクタは飾らない）。
   - 強調は1概念だけ：注目するノードを青にする。補助ノードは
     コントロール面で静かに沈める。
   ============================================================ */

/* outer system container (例：マイコン / センサー) — flat, no border */
.bd { display: flex; align-items: center; gap: 0; font-family: var(--font-sans); }
.bd-system {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-page);
  border-radius: 24px;
  padding: 22px 24px 26px;
  box-sizing: border-box;
}
.bd-system > .bd-label { font: var(--fw-bold) 22px/1.2 var(--font-sans); color: var(--text-body); text-align: center; }

/* a horizontal row of units + connectors inside a system */
.bd-row { display: flex; align-items: center; gap: 0; }

/* nested sub-group (例：ペリフェラル / センシング) — one shade darker, flat */
.bd-group {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-control);
  border-radius: 20px;
  padding: 16px 18px;
}
.bd-group > .bd-label { font: var(--fw-medium) 18px/1.2 var(--font-sans); color: var(--text-muted); text-align: center; }

/* a leaf node — flat white, no border */
.bd-unit {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  min-height: 56px; box-sizing: border-box;
  background: var(--surface-card);
  border-radius: 18px;
  padding: 16px 18px;
  font: var(--fw-bold) 22px/1.3 var(--font-sans); color: var(--text-strong);
  text-align: center;
}
.bd-unit .bd-sub { font: var(--fw-regular) 15px/1.35 var(--font-sans); color: var(--text-muted); }

/* the ONE emphasized concept — solid Blue fill, white text (e.g. レジスタ) */
.bd-unit--accent {
  background: var(--brand);
  color: var(--text-on-fill);
}

/* supporting / lower node — sink it quietly (e.g. 専用ハード) */
.bd-unit--muted {
  background: var(--surface-control);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* a vertical stack of units inside a group, with an internal link between them */
.bd-stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

/* internal bidirectional link between two stacked units (thin dark, no label) */
.bd-internal {
  position: relative; align-self: center;
  width: 2px; height: 26px; margin: 8px 0; background: var(--gray-700);
}
.bd-internal::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--gray-700); border-left: 2px solid var(--gray-700);
  transform: translateX(-50%) rotate(45deg);
}
.bd-internal::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; width: 9px; height: 9px;
  border-bottom: 2px solid var(--gray-700); border-right: 2px solid var(--gray-700);
  transform: translateX(-50%) rotate(45deg);
}

/* bidirectional connector with a centered label札 (例：バス / 通信) */
.bd-conn {
  flex: 0 0 auto; align-self: center; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  min-width: 96px; height: 48px; padding: 0 4px; box-sizing: border-box;
}
.bd-conn::before { /* the line */
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%;
  height: 2px; background: var(--gray-700); transform: translateY(-50%);
}
.bd-arrowhead { position: relative; z-index: 1; width: 10px; height: 10px; }
.bd-arrowhead--l { border-bottom: 2px solid var(--gray-700); border-left: 2px solid var(--gray-700); }
.bd-arrowhead--r { border-top: 2px solid var(--gray-700); border-right: 2px solid var(--gray-700); }
.bd-arrowhead--l, .bd-arrowhead--r { transform: rotate(45deg); }
.bd-conn-label {
  position: relative; z-index: 1;
  background: var(--surface-control); border-radius: 8px; padding: 3px 12px;
  font: var(--fw-bold) 17px var(--font-sans); color: var(--text-muted); white-space: nowrap;
}
/* connector sitting between systems on the page ground */
.bd-conn--onpage .bd-conn-label { background: var(--surface-control); }

/* ---- Role coloring（構造図・データ図の内部で許容）----
   Inside a figure, roles MAY be color-coded with the categorical palette
   (Chart roles: cat-1..5). Same role → same hue across the whole figure, so the
   structure reads at a glance. Kept calm: a LIGHT family tint fill + a matching
   family-400 inset ring (no heavy borders, no gradients/3D). The slide-level
   "blue only" rule still holds OUTSIDE figures. */
.bd-unit--cpu { background: var(--blue-50);   box-shadow: inset 0 0 0 2px var(--blue-400);   color: var(--text-strong); }
.bd-unit--reg { background: var(--cyan-50);   box-shadow: inset 0 0 0 2px var(--cyan-400);   color: var(--text-strong); }
.bd-unit--hw  { background: var(--green-50);  box-shadow: inset 0 0 0 2px var(--green-400);  color: var(--text-strong); }
.bd-unit--io  { background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange-400); color: var(--text-strong); }

/* ============================================================
   Anchored wires — connect child nodes ACROSS nesting (bd-wires.js).
   Declare a connection as a hidden <i class="bd-wire" data-from data-to
   data-label data-color> inside the .bd; the script measures the two
   nodes and draws a bidirectional line anchored at their facing edges,
   so a bus can reach a レジスタ deep inside a group, or 通信 can join two
   専用ハード across two systems. Give every connectable node an id.
   ============================================================ */
.bd { position: relative; }
.bd-wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.bd-wire { display: none; } /* declarative config only — drawn by JS */
.bd-wire-label {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  padding: 3px 11px; border-radius: var(--radius-sm); box-sizing: border-box;
  font: var(--fw-bold) 17px var(--font-sans); color: var(--text-body); white-space: nowrap;
  background: var(--surface-control); pointer-events: none;
}