/* ============================================================
   test-b.css — Component layer / Phase 6 TEST B
   PROFILE B（INTERACTIVE APPLICATION の QA・表現基準） × MODE 2（INTERACTIVE_UI）
   ------------------------------------------------------------
   docs/06 §2.0 TD-3：Component は Semantic だけを参照する。
   本ファイルに Primitive（--p-*）と生の色値を書かない。
   MODE 2 の Semantic（操作面・業務状態）は tokens-mode2.css が持つ。

   視覚文法（TEST A と共有しない）
     ・明るい情報面の上に、暗い操作面（コンソール）を重ねる2層構造
     ・情報密度・グリッド・等幅の数値・状態表示が主語
     ・状態は「色・形・文言」の3つで表す。色だけに依存しない
     ・動きは短い（120–200ms）。出現以外の演出を持たない（docs/07 §3.2 PROFILE B）
     ・見出しはゴシック。明朝・縦組み・図版的SVGを使わない（TEST A との差別化）

   アクセント（--color-accent / --color-accent-on-inverse）を使ってよい箇所
     1. 主CTAの面          .btn--primary
     2. フォーカスリング    :focus-visible
     3. 章番号の標識        .eyebrow::before / .chapter__idx
     4. 選択中のタブとチップ .tab[aria-selected="true"] / .chip[aria-pressed="true"]
     5. 進行フローの帯      .stage__bar
   業務状態の色（--color-state-*）はアクセントとは別系統であり、
   状態表示以外に使わない。
   ============================================================ */

/* ---------- 0. reset（最小） ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }

ol, ul { padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; }

summary::-webkit-details-marker { display: none; }

[hidden] { display: none !important; }


/* ---------- 1. base ---------- */

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-feature-settings: "palt" 1;
  line-break: strict;
}

/* 見出しの改行制御：意味単位を inline-block にして、単位の境界だけで折る。 */
.u { display: inline-block; }

/* 識別子・数値・時刻は等幅で桁を揃える */
.num,
.kpi__num,
.stage__num,
.figures__num,
.problem__no,
.feature__no,
.policy__no {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

a { color: inherit; }

:focus-visible {
  outline: var(--border-strong) solid var(--color-focus);
  outline-offset: 2px;
}

.on-inverse :focus-visible,
.console :focus-visible { outline-color: var(--color-focus-inverse); }


/* ---------- 2. layout primitives ---------- */

.shell {
  width: 100%;
  max-width: calc(var(--layout-max) + var(--space-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.skip-link {
  position: absolute;
  left: var(--space-gutter);
  top: 0;
  z-index: var(--z-skip);
  transform: translateY(-140%);
  display: inline-block;
  padding: var(--space-inline) var(--space-element);
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  text-decoration: none;
  font-size: var(--text-caption);
}

.skip-link:focus { transform: translateY(0); }


/* ---------- 3. 検証サンプル注記 ---------- */

.sample {
  background-color: var(--color-surface-sunken);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
}

.sample__sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  padding-block: 0.5rem;
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
  align-content: center;
}

.sample__tag {
  flex: none;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  background-color: var(--color-rule-strong);
  color: var(--color-surface-raised);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-control);
}

/* モバイルでは要約を独立した行へ落とす。ラベルと開閉語のあいだへ押し込むと
   「検証用／サンプルです。」のように文節の途中で折れる。 */
.sample__lead { flex: 1 1 100%; order: 2; min-width: 0; color: var(--color-text); }

.sample__more {
  flex: none;
  margin-left: auto;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
  white-space: nowrap;
}

.sample__more::after { content: " +"; }
.sample__d[open] .sample__more::after { content: " −"; }

.sample__body {
  padding-bottom: var(--space-element);
  max-width: 60em;
  color: var(--color-text-muted);
  line-height: var(--leading-lead);
}


/* ---------- 4. masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-surface);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-element);
  min-height: 3.25rem;
}

.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  text-decoration: none;
  min-height: 2.75rem;
  align-content: center;
  flex-wrap: wrap;
}

.mark__latin {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-h3);
  letter-spacing: 0.14em;
}

.mark__ja {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-inline: var(--space-inline);
  cursor: pointer;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 1rem;
  height: var(--border-hairline);
  background-color: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--border-hairline);
  background-color: currentColor;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

.site-nav { display: none; }
.site-nav[data-open="true"] { display: block; }

.site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--color-surface-raised);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  box-shadow: var(--shadow-floating);
  max-height: calc(100vh - 3.25rem);
  overflow-y: auto;
}

.site-nav__list { display: flex; flex-direction: column; }

.site-nav__list a {
  display: block;
  padding: var(--space-inline) var(--space-gutter);
  min-height: 2.75rem;
  text-decoration: none;
  border-top: var(--border-hairline) solid var(--color-rule);
}

.site-nav__cta {
  padding: var(--space-element) var(--space-gutter) var(--space-row);
  border-top: var(--border-hairline) solid var(--color-rule);
}

/* JS 無効時：開閉ボタンを出さず、ナビを常時表示する（docs/07 §3.7）。 */
.no-js .nav-toggle { display: none; }
.no-js .masthead__inner { flex-wrap: wrap; }

.no-js .site-nav {
  display: block;
  position: static;
  flex: 1 0 100%;
  background: none;
  border-bottom: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  padding-bottom: var(--space-inline);
}

.no-js .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-element); }
.no-js .site-nav__list a { padding-inline: 0; border-top: 0; }
.no-js .site-nav__cta { padding: var(--space-inline) 0 0; border-top: 0; }


/* ---------- 5. buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7em 1.7em;
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  cursor: not-allowed;
}

.on-inverse .btn--primary {
  background-color: var(--color-accent-on-inverse);
  color: var(--color-inverse-surface);
}

.btn--quiet {
  border: var(--border-hairline) solid var(--color-rule-strong);
  color: var(--color-text);
}

.btn--quiet:hover { background-color: var(--color-rule-strong); color: var(--color-surface-raised); }
.btn--sm { min-height: 2.75rem; padding: 0.45em 1.1em; font-size: var(--text-caption); }
.btn[aria-disabled="true"] { cursor: not-allowed; }

.cta-note {
  margin-top: var(--space-inline);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: 36em;
}

.on-inverse .cta-note { color: var(--color-inverse-muted); }


/* ---------- 6. typography helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: var(--border-strong);
  background-color: var(--color-accent);
}

.chapter {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.chapter__idx {
  font-family: var(--font-numeric);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.on-inverse .chapter__idx,
.console .chapter__idx { color: var(--color-accent-on-inverse); }

.chapter__title {
  margin-top: var(--space-element);
  font-size: var(--text-h2);
  max-width: 22em;
}

.chapter__lead {
  margin-top: var(--space-element);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: var(--layout-measure);
  color: var(--color-text-muted);
}

.on-inverse .chapter__lead { color: var(--color-inverse-muted); }

.footnote {
  margin-top: var(--space-element);
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
  max-width: 52em;
}


/* ---------- 7. hero ---------- */

.hero { padding-block: clamp(2rem, 1rem + 4vw, 3.75rem) clamp(2rem, 1rem + 4vw, 3.5rem); }

.hero__grid { display: grid; gap: var(--space-block); }

.hero__title {
  margin-top: var(--space-element);
  /* PROFILE B のプロダクト面。編集面（TEST A）より1段小さく取り、
     初期表示のなかへ製品UIを入れる。 */
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  max-width: 14em;
}

.hero__lead {
  margin-top: var(--space-element);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: 34em;
  color: var(--color-text-muted);
}

.hero__cta { margin-top: var(--space-element); }

.hero__meta {
  align-self: start;
  display: grid;
  gap: 0;
  border-top: var(--border-strong) solid var(--color-rule-strong);
}

.hero__meta div {
  display: flex;
  gap: var(--space-element);
  align-items: baseline;
  padding-block: var(--space-inline);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
}

.hero__meta dt { flex: none; width: 4em; letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.hero__meta dd { margin: 0; }


/* ---------- 7.1 pulse（Hero の要約ビュー） ----------
   操作デモの縮小版ではない。読むだけで状態が分かる固定表示であり、
   持つ情報も粒度も操作デモと変えている（同じUIを二度置かない）。
   面はコンソール側の色を使い、下の操作面へ視覚的に接続する。 */

.pulse {
  background-color: var(--color-console);
  color: var(--color-inverse-text);
  border: var(--border-hairline) solid var(--color-inverse-rule);
  border-radius: var(--radius-control);
  padding: var(--space-element);
  display: grid;
  gap: var(--space-element);
  align-content: start;
  min-width: 0;
}

.pulse__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-inline);
  flex-wrap: wrap;
  padding-bottom: var(--space-inline);
  border-bottom: var(--border-hairline) solid var(--color-inverse-rule);
}

.pulse__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-inverse-text);
}

.pulse__stamp { font-size: var(--text-label); color: var(--color-inverse-muted); letter-spacing: 0; }

.pulse__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border-hairline);
  background-color: var(--color-inverse-rule);
  border: var(--border-hairline) solid var(--color-inverse-rule);
}

.pulse__kpis li {
  background-color: var(--color-console-raised);
  padding: var(--space-cell) var(--space-cell-lg);
  display: grid;
  gap: 0.1em;
  min-width: 0;
}

.pulse__k { font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-inverse-muted); }
.pulse__v { display: flex; align-items: baseline; gap: 0.25em; }
.pulse__num { font-size: var(--text-h3); line-height: 1.2; }
.pulse__u { font-size: var(--text-label); color: var(--color-inverse-muted); }

/* 継目：段階と段階のつなぎ目。節点を線でつなぎ、切れ目が無いことを図にする。
   モバイルでは出さない。狭い幅で5段階を並べると、どれも読めない密度になる。
   同じ段階別の件数は、下のデモ「進行フロー」で全幅・全項目が読める。 */
.seam {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  padding-top: 0.45rem;
}

.seam::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0.66rem;
  height: var(--border-hairline);
  background-color: var(--color-accent-on-inverse);
  opacity: 0.45;
}

.seam__i {
  display: grid;
  justify-items: center;
  gap: 0.15em;
  position: relative;
  min-width: 0;
}

.seam__node {
  width: 0.45rem;
  height: 0.45rem;
  background-color: var(--color-accent-on-inverse);
  transform: rotate(45deg);
}

.seam__n { font-size: var(--text-caption); line-height: 1.3; }
.seam__name { font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-inverse-muted); }

.pulse__rows {
  display: grid;
  gap: var(--border-hairline);
  background-color: var(--color-inverse-rule);
  border: var(--border-hairline) solid var(--color-inverse-rule);
}

.pulse__row {
  background-color: var(--color-console-raised);
  padding: var(--space-cell) var(--space-cell-lg);
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.1em 0.7em;
  font-size: var(--text-caption);
  min-width: 0;
}

.pulse__id { color: var(--color-inverse-text); }
.pulse__site { color: var(--color-inverse-text); min-width: 0; }
.pulse__state { grid-column: 1; display: inline-flex; align-items: baseline; gap: 0.45em; }
.pulse__note { grid-column: 2; font-size: var(--text-label); color: var(--color-inverse-muted); min-width: 0; }

.pulse__cap {
  font-size: var(--text-label);
  line-height: var(--leading-lead);
  color: var(--color-inverse-muted);
  padding-top: var(--space-inline);
  border-top: var(--border-hairline) solid var(--color-inverse-rule);
}


/* ---------- 8. band ---------- */

.band {
  padding-block: var(--space-section);
  border-top: var(--border-hairline) solid var(--color-rule);
}

.band--sunken { background-color: var(--color-surface-sunken); border-top: 0; }

.band--inverse {
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-text);
  border-top: 0;
}

/* 操作面は2層で重ねる：帯（深）＋パネル（面） */
.band--demo {
  background-color: var(--color-console-deep);
  border-top: 0;
  padding-block: clamp(1.5rem, 0.5rem + 3.5vw, 3rem);
}


/* ---------- 9. console（製品UIデモ＝視覚主役） ---------- */

.console {
  background-color: var(--color-console);
  color: var(--color-inverse-text);
  border: var(--border-hairline) solid var(--color-inverse-rule);
  border-radius: var(--radius-control);
  overflow: hidden;
}

/* 面は3段で持つ。見出しと本体が同じ面、そのあいだの操作列（前提と切替）だけを
   一段沈める。影やガラスを使わず、面・罫・余白だけで層をつくることで、
   1440 でも「大きな一枚の矩形」に見えないようにする。
     console        見出し帯／パネル本体
     console-deep   コンテキスト帯／タブ列（操作の列）
     console-raised KPI・案件行・通知（データの升目） */
.console__head {
  padding: var(--space-element) var(--space-element) var(--space-inline);
  border-bottom: var(--border-hairline) solid var(--color-inverse-rule);
}

.console .chapter { color: var(--color-inverse-muted); }

.console__title {
  margin-top: 0.5em;
  font-size: var(--text-h2);
  max-width: 20em;
}

.console__lead {
  margin-top: var(--space-inline);
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--color-inverse-muted);
  max-width: 46em;
}

/* 9.1 コンテキスト帯（操作より先に前提を固定する） */

.ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-element);
  padding: var(--space-cell) var(--space-element);
  background-color: var(--color-console-deep);
  border-bottom: var(--border-hairline) solid var(--color-inverse-rule);
  font-size: var(--text-label);
}

.ctx__i {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding-right: var(--space-element);
  border-right: var(--border-hairline) solid var(--color-inverse-rule);
}

.ctx__i:last-child { border-right: 0; padding-right: 0; }
.ctx dt { letter-spacing: var(--tracking-label); color: var(--color-inverse-muted); }
.ctx dd { margin: 0; color: var(--color-inverse-text); letter-spacing: 0; }

/* 9.2 タブ */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: var(--border-hairline) solid var(--color-inverse-rule);
  background-color: var(--color-console-deep);
}

.tab {
  appearance: none;
  cursor: pointer;
  min-height: 2.75rem;
  padding: 0 var(--space-element);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--color-inverse-muted);
  border-bottom: var(--border-strong) solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.tab:hover { color: var(--color-inverse-text); }

.tab[aria-selected="true"] {
  color: var(--color-inverse-text);
  border-bottom-color: var(--color-accent-on-inverse);
  background-color: var(--color-console);
}

/* JS が有効なときだけ、選択されていないパネルを隠す。
   JS 無効時は全パネルが積まれて表示される（情報が欠落しない）。 */
.js [data-panel][data-active="false"] { display: none; }
.no-js .tabs { display: none; }
.no-js .tools { display: none; }

.panel { padding: var(--space-element); }
.panel:focus { outline: none; }
.panel:focus-visible { outline: var(--border-strong) solid var(--color-focus-inverse); outline-offset: -4px; }

.panel__title {
  font-size: var(--text-h3);
  padding-bottom: var(--space-inline);
  border-bottom: var(--border-hairline) solid var(--color-inverse-rule);
}

.no-js .panel + .panel { border-top: var(--border-hairline) solid var(--color-inverse-rule); }

.panel__cap {
  margin-top: var(--space-element);
  padding-top: var(--space-inline);
  border-top: var(--border-hairline) solid var(--color-inverse-rule);
  font-size: var(--text-label);
  line-height: var(--leading-lead);
  color: var(--color-inverse-muted);
  max-width: 60em;
}

/* 9.2 KPI */

.kpis {
  margin-top: var(--space-element);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-hairline);
  background-color: var(--color-inverse-rule);
  border: var(--border-hairline) solid var(--color-inverse-rule);
}

.kpi {
  background-color: var(--color-console-raised);
  padding: var(--space-cell) var(--space-cell-lg);
  min-width: 0;
}

.kpi__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-inverse-muted);
}

.kpi__v { display: flex; align-items: baseline; gap: 0.3em; margin-top: 0.1em; }

.kpi__num {
  font-size: var(--text-h2);
  line-height: 1.15;
  transition: color var(--duration-fast) var(--ease-standard);
}

.kpi__unit { font-size: var(--text-label); color: var(--color-inverse-muted); }

/* 9.3 フィルター */

.tools {
  margin-top: var(--space-element);
  display: grid;
  gap: var(--space-inline);
}

.tools__label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-inverse-muted);
}

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* 選択状態は色だけに預けない。四角の塗り（形）＋面の反転（色）＋太さ（文字）の
   3つで表す。撮影のタイミングや色覚差に依存せず、状態が確定して見える。 */
.chip {
  appearance: none;
  cursor: pointer;
  min-height: 2.75rem;
  padding: 0 var(--space-element);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--text-caption);
  color: var(--color-inverse-text);
  background-color: var(--color-console-raised);
  border: var(--border-hairline) solid var(--color-inverse-rule);
  border-radius: var(--radius-control);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.chip::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border: var(--border-strong) solid currentColor;
}

.chip:hover { border-color: var(--color-accent-on-inverse); }

.chip[aria-pressed="true"] {
  background-color: var(--color-accent-on-inverse);
  border-color: var(--color-accent-on-inverse);
  color: var(--color-console);
  font-weight: var(--font-heading-weight);
}

.chip[aria-pressed="true"]::before { background-color: currentColor; }

.tools__live {
  font-size: var(--text-caption);
  color: var(--color-inverse-muted);
  border-left: var(--border-strong) solid var(--color-accent-on-inverse);
  padding-left: var(--space-inline);
}

.tools__num { font-family: var(--font-numeric); font-size: var(--text-h3); color: var(--color-inverse-text); }

/* 9.4 業務状態（色・形・文言の3つで表す） */

.state { display: inline-flex; align-items: baseline; gap: 0.5em; }

.state__mark {
  position: relative;
  flex: none;
  align-self: center;
  width: 0.72em;
  height: 0.72em;
  border: var(--border-strong) solid currentColor;
}

.state--idle { color: var(--color-state-idle); }

.state--active { color: var(--color-state-active); }
.state--active .state__mark::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  background-color: currentColor;
}

.state--hold { color: var(--color-state-hold); }
.state--hold .state__mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 30%;
  height: 40%;
  background-color: currentColor;
}

.state--done { color: var(--color-state-done); }
.state--done .state__mark { background-color: currentColor; }

.state--over { color: var(--color-state-over); }
.state--over .state__mark { background-color: currentColor; transform: rotate(45deg); }

/* 9.5 案件ボード */

.board { margin-top: var(--space-element); }

.board__head { display: none; }

.rows { display: grid; gap: var(--border-hairline); background-color: var(--color-inverse-rule); border: var(--border-hairline) solid var(--color-inverse-rule); }

/* モバイル：1件を2列に折りたたむ。縦に6行積むと1画面に1件しか入らない。 */
.row {
  background-color: var(--color-console-raised);
  padding: var(--space-cell) var(--space-cell-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem 0.8rem;
  font-size: var(--text-caption);
  min-width: 0;
}

.cell {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 0 0.5em;
  align-items: baseline;
  min-width: 0;
}

.cell__k {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-inverse-muted);
}

.cell__v { min-width: 0; }

/* モバイルでは PC の縮小ではなく、優先順位を組み替える。
     1行目 状態（全幅）
     2行目 番号 ／ 期限
     3行目 拠点（全幅）
     4行目 種別 ／ 担当（補助行。文字を1段落として密度を上げる）
   どの項目も消さない。JavaScript が無くても全項目が読める。 */
.cell--state { order: 0; grid-column: 1 / -1; }
.cell--state .cell__v { font-size: var(--text-body); }

.cell--state .cell__k {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cell--state { grid-template-columns: minmax(0, 1fr); }

.cell:nth-child(1) { order: 1; }
.cell:nth-child(4) { order: 2; }
.cell:nth-child(2) { order: 3; grid-column: 1 / -1; }

.cell:nth-child(3),
.cell:nth-child(5) { order: 4; }

.cell:nth-child(3) .cell__v,
.cell:nth-child(5) .cell__v {
  font-size: var(--text-label);
  color: var(--color-inverse-muted);
}

.board__empty {
  margin-top: var(--space-element);
  padding: var(--space-element);
  border: var(--border-hairline) dashed var(--color-inverse-rule);
  border-radius: var(--radius-control);
  font-size: var(--text-caption);
  color: var(--color-inverse-muted);
}

/* 9.6 進行フロー */

.stages { margin-top: var(--space-element); display: grid; gap: var(--border-hairline); background-color: var(--color-inverse-rule); border: var(--border-hairline) solid var(--color-inverse-rule); }

.stage {
  background-color: var(--color-console-raised);
  padding: var(--space-cell) var(--space-cell-lg);
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr) 4.5em;
  align-items: center;
  gap: 0.3rem 0.8rem;
  font-size: var(--text-caption);
}

.stage__name { letter-spacing: 0.04em; }

.stage__gauge { display: block; height: 0.65rem; background-color: var(--color-console-track); }

.stage__bar {
  display: block;
  height: 100%;
  width: calc(var(--b) * 1%);
  background-color: var(--color-accent-on-inverse);
}

.stage__count { text-align: right; display: flex; align-items: baseline; justify-content: flex-end; gap: 0.25em; }
.stage__num { font-size: var(--text-h3); }
.stage__unit { font-size: var(--text-label); color: var(--color-inverse-muted); }

.stage__note {
  grid-column: 1 / -1;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-inverse-muted);
}

/* 9.7 通知（時刻が主語。左端に時刻の列を立て、記録として読ませる） */

.events {
  margin-top: var(--space-element);
  display: grid;
  gap: var(--border-hairline);
  background-color: var(--color-inverse-rule);
  border: var(--border-hairline) solid var(--color-inverse-rule);
}

.event {
  background-color: var(--color-console-raised);
  border-left: var(--border-strong) solid currentColor;
  padding: var(--space-cell-lg);
  min-width: 0;
}

.event__meta { display: flex; align-items: baseline; gap: 0.9em; font-size: var(--text-label); letter-spacing: var(--tracking-label); }
.event__time { color: var(--color-accent-on-inverse); letter-spacing: 0; font-size: var(--text-caption); }
.event__kind { display: inline-flex; align-items: baseline; gap: 0.5em; }

.event__title {
  margin-top: 0.25em;
  font-size: var(--text-caption);
  color: var(--color-inverse-text);
  line-height: var(--leading-lead);
}

.event__body {
  margin-top: 0.2em;
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--color-inverse-muted);
}


/* ---------- 10. problems（途切れた案件フロー） ----------
   章の視覚文法：破線の縦鎖。節点（案件が止まる位置）だけが実線の枠を持つ。
   運用章（solid の縦罫）と対にして、「切れる／切れない」を版面で言う。 */

.problems {
  position: relative;
  margin-top: var(--space-block);
  display: grid;
}

.problems::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: var(--border-hairline);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-rule-strong) 0 5px,
    transparent 5px 14px
  );
}

.problem {
  position: relative;
  padding-block: var(--space-row);
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 var(--space-element);
  min-width: 0;
}

.problem__no {
  position: relative;
  z-index: 1;
  align-self: start;
  text-align: center;
  padding-block: 0.3em;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-rule-strong);
}

/* 番号だけが1列目。見出しと本文は2列目へ置く（自動配置だと本文が1列目へ落ちる）。 */
.problem__title,
.problem__body { grid-column: 2; }

.problem__title { font-size: var(--text-h3); }
.problem__body { margin-top: var(--space-inline); color: var(--color-text-muted); max-width: var(--layout-measure); font-size: var(--text-caption); }

.afterstate {
  margin-top: var(--space-block);
  padding-left: var(--space-element);
  border-left: var(--border-strong) solid var(--color-accent);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  max-width: 32em;
}


/* ---------- 11. features（情報をつなぐ構造） ----------
   章の視覚文法：継目の節点を持つ罫。項目は「並ぶ」のではなく「つながる」。 */

.features { margin-top: var(--space-block); display: grid; gap: var(--space-block); }

.feature {
  position: relative;
  border-top: var(--border-strong) solid var(--color-rule);
  padding-top: var(--space-element);
  min-width: 0;
}

.feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.28rem;
  width: 0.55rem;
  height: 0.55rem;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

.feature__no { font-size: var(--text-label); letter-spacing: 0.2em; color: var(--color-text-muted); }
.feature__name { margin-top: 0.2em; font-size: var(--text-h3); }
.feature__body { margin-top: var(--space-inline); font-size: var(--text-caption); color: var(--color-text-muted); }


/* ---------- 12. process（拠点単位の展開タイムライン） ----------
   章の視覚文法：1本の時間軸。節点が段階、帯の伸びが対象拠点の広がり。
   列の間を空けず、上の罫を隣とつなげて1本の線として見せる。 */

.phases { margin-top: var(--space-block); display: grid; gap: var(--space-row) 0; }

.phase {
  position: relative;
  border-top: var(--border-strong) solid var(--color-rule);
  padding-top: var(--space-element);
  min-width: 0;
}

.phase::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.32rem;
  width: 0.62rem;
  height: 0.62rem;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

.phase__rail {
  position: relative;
  display: block;
  height: 0.3rem;
  margin-bottom: var(--space-element);
  background-color: var(--color-rule);
}

.phase__node { display: none; }

.phase__spread {
  display: block;
  height: 100%;
  width: calc(var(--s) / 4 * 100%);
  background-color: var(--color-accent);
}

.phase__meta { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; }

.phase__step {
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  color: var(--color-accent);
}

.phase__term {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-control);
  padding: 0.1em 0.55em;
}

.phase__title { margin-top: var(--space-inline); font-size: var(--text-h3); }
.phase__body { margin-top: var(--space-inline); font-size: var(--text-caption); color: var(--color-text-muted); }


/* ---------- 13. ops（止まったときの手順書） ----------
   章の視覚文法：切れない縦罫に手順が並ぶ runbook。
   課題章（破線）と対にして、運用側は途切れないことを版面で言う。 */

.policies { position: relative; margin-top: var(--space-block); border-top: var(--border-strong) solid var(--color-rule-strong); }

.policies::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: var(--border-hairline);
  background-color: var(--color-rule-strong);
}

.policy {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 var(--space-element);
  padding-block: var(--space-element);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  min-width: 0;
}

.policy__no {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 0.2em;
  text-align: center;
  padding-block: 0.25em;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  background-color: var(--color-surface-sunken);
}

.policy__title { font-size: var(--text-body); }
.policy__body p { margin-top: 0.25em; font-size: var(--text-caption); color: var(--color-text-muted); max-width: var(--layout-measure); }


/* ---------- 14. trust（証跡台帳） ----------
   章の視覚文法：台帳。項目が左、値が右、行ごとに罫。箱に入れない。 */

.figures {
  margin-top: var(--space-block);
  display: grid;
  border-top: var(--border-strong) solid var(--color-rule-strong);
}

.figures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--space-element);
  padding-block: var(--space-element);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.figures__v { display: flex; align-items: baseline; gap: 0.3em; order: 2; }
.figures__num { font-size: var(--text-h2); line-height: 1.1; }
.figures__unit { font-size: var(--text-caption); color: var(--color-text-muted); }
.figures__label { order: 1; font-size: var(--text-caption); color: var(--color-text-muted); min-width: 0; }

.rules { margin-top: var(--space-block); border-top: var(--border-hairline) solid var(--color-rule); }
.rules li { padding-block: var(--space-element); border-bottom: var(--border-hairline) solid var(--color-rule); }
.rules h3 { font-size: var(--text-body); }
.rules p { margin-top: 0.25em; font-size: var(--text-caption); color: var(--color-text-muted); }


/* ---------- 15. contact ---------- */

.contact { display: grid; gap: var(--space-block); }

.contact__vp {
  margin-top: var(--space-block);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-h3);
  line-height: var(--leading-lead);
  max-width: 24em;
}

.terms {
  align-self: end;
  display: grid;
  gap: var(--space-inline);
  padding-top: var(--space-element);
  border-top: var(--border-hairline) solid var(--color-inverse-rule);
  font-size: var(--text-caption);
  color: var(--color-inverse-muted);
}

.terms li { display: flex; gap: 0.6em; }
.terms li::before { content: "—"; flex: none; }


/* ---------- 16. colophon ---------- */

.colophon {
  padding-block: var(--space-block);
  border-top: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.colophon__brand {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-h3);
  color: var(--color-text);
}

.colophon__latin { font-size: var(--text-label); letter-spacing: 0.2em; color: var(--color-text-muted); }

.colophon__facts { margin-top: var(--space-element); display: grid; gap: var(--space-inline); }
.colophon__facts div { display: flex; gap: var(--space-element); }
.colophon__facts dt { flex: none; width: 6em; letter-spacing: var(--tracking-label); }
.colophon__facts dd { margin: 0; }

.legal {
  margin-top: var(--space-block);
  padding-top: var(--space-element);
  border-top: var(--border-hairline) solid var(--color-rule);
  display: grid;
  gap: var(--space-inline);
  max-width: 64em;
}

.legal li { display: flex; gap: 0.6em; }
.legal li::before { content: "※"; flex: none; }

.colophon__copy {
  margin-top: var(--space-block);
  padding-top: var(--space-element);
  border-top: var(--border-hairline) solid var(--color-rule);
}


/* ============================================================
   17. RESPONSIVE — モバイルファースト
   ============================================================ */

@media (min-width: 48rem) {

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: var(--space-block);
    row-gap: var(--space-block);
    align-items: start;
  }

  .hero__text { grid-column: 1; grid-row: 1; }
  .pulse { grid-column: 2; grid-row: 1; }
  /* 3項目を横へ並べる。ラベルを値の左へ置いたままだと、1列あたりの幅が
     足りず「3拠点以上の設備保／守」のように語の途中で折れる。 */
  .hero__meta {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-element);
    padding-top: var(--space-element);
    border-top: var(--border-strong) solid var(--color-rule-strong);
  }

  .hero__meta div { display: block; padding-block: 0; border-bottom: 0; }
  .hero__meta dt { width: auto; }
  .hero__meta dd { margin-top: 0.35em; }

  .sample__lead { flex: 1 1 12em; order: 0; }

  .seam { display: grid; }

  .console__head { padding: var(--space-block) var(--space-block) var(--space-element); }
  .ctx { padding: var(--space-cell) var(--space-block); }
  .panel { padding: var(--space-block); }
  .tab { padding: 0 var(--space-block); }

  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .tools { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-element); }
  .tools__live { justify-self: end; text-align: right; }

  /* 表形式へ切り替える。ラベルは列見出しが担うため各セルからは隠す。 */
  .board__head {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1.5fr) minmax(0, 1fr) 4.5rem minmax(0, 1fr) 7rem;
    gap: 0 0.8rem;
    padding: var(--space-cell) var(--space-cell-lg);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-inverse-muted);
    border: var(--border-hairline) solid var(--color-inverse-rule);
    border-bottom: 0;
    background-color: var(--color-console-deep);
  }

  /* 行の密度を上げる。読ませる面の行送りのままだと、表としては間延びする。 */
  .row { grid-template-columns: 6.5rem minmax(0, 1.5fr) minmax(0, 1fr) 4.5rem minmax(0, 1fr) 7rem; gap: 0 0.8rem; align-items: baseline; line-height: var(--leading-lead); }
  .board__head { line-height: var(--leading-lead); }

  .cell { display: block; }
  .cell--state { order: 0; grid-column: auto; grid-template-columns: none; }
  .cell--state .cell__v { font-size: var(--text-caption); }

  .cell:nth-child(1),
  .cell:nth-child(2),
  .cell:nth-child(3),
  .cell:nth-child(4),
  .cell:nth-child(5) { order: 0; grid-column: auto; }

  .cell:nth-child(3) .cell__v,
  .cell:nth-child(5) .cell__v { font-size: var(--text-caption); color: var(--color-inverse-text); }

  .cell__k {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stage { grid-template-columns: 7em minmax(0, 1fr) 5em 10em; }
  .stage__note { grid-column: auto; text-align: right; }

  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 課題は縦の鎖のまま（列を増やして並べ直さない）。本文だけ広げる。 */
  .problem { grid-template-columns: 3rem minmax(0, 1fr); }

  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-block); }

  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase { padding-right: var(--space-block); }

  .policy { grid-template-columns: 3rem minmax(0, 1fr); }

  .figures li { grid-template-columns: minmax(0, 1fr) 12rem; }
  .figures__v { justify-content: flex-end; }

  .rules li { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: var(--space-block); align-items: baseline; }
  .rules p { margin-top: 0; }

  .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--space-block); }

  .colophon__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-inline) var(--space-block); }
}

@media (min-width: 64rem) {

  .masthead__inner { min-height: 4rem; }
  .nav-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .site-nav__inner { display: flex; align-items: center; gap: var(--space-block); }
  .site-nav__list { flex-direction: row; gap: var(--space-element); }

  .site-nav__list a {
    padding: 0.8rem 0;
    border-top: 0;
    border-bottom: var(--border-strong) solid transparent;
    font-size: var(--text-caption);
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .site-nav__list a:hover { border-bottom-color: var(--color-accent); }
  .site-nav__cta { padding: 0; border-top: 0; }

  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }

  /* 要約ビューは文章と項目表の2行にまたがる。左の段が先に終わって
     大きな空きが残る状態を、版面の構造そのもので解消する。 */
  .pulse { grid-row: 1 / span 2; align-self: start; }
  .hero__meta { grid-column: 1; grid-row: 2; }

  /* 章の標識を版面の外へ出す（TEST A と同じ機構だが、幅と罫の扱いが異なる） */
  .chapters {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--space-block);
    align-items: start;
  }

  .chapters > * { grid-column: 2; }

  .chapters > .chapter {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 30;
    align-self: start;
    display: block;
    padding-top: 0.3em;
    border-top: var(--border-strong) solid var(--color-accent);
  }

  /* 継目の節点。章の標識にも同じモチーフを置き、頁全体の視覚言語を1つに保つ。 */
  .chapters > .chapter::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.28rem;
    width: 0.55rem;
    height: 0.55rem;
    background-color: var(--color-accent);
    transform: rotate(45deg);
  }

  .chapters > .chapter .chapter__idx { display: block; font-size: var(--text-h3); }
  .chapters > .chapter .chapter__label { display: block; margin-top: 0.2em; }
  .chapters > .chapter__title { margin-top: 0; }

  /* 見出しの位置を章ごとに変える。左の柱が7章続くと版面が単調になる。
     ここでは標識を本文の上へ戻し、見出しを全幅で置く。 */
  .chapters--inline { display: block; }
  .chapters--inline > .chapter { border-top: 0; }
  .chapters--inline > .chapter::after { content: none; }

  .board__head,
  .row { grid-template-columns: 8rem minmax(0, 1.4fr) minmax(0, 1fr) 5.5rem minmax(0, 1fr) 8rem; }

  .events { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .policy { grid-template-columns: 3.5rem minmax(0, 1fr); }

  .colophon__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .colophon__facts div { display: block; }
  .colophon__facts dt { width: auto; }
  .colophon__facts dd { margin-top: 0.3em; }
}


/* ============================================================
   18. MOTION（docs/07 §3.2・§4：PROFILE B は主役演出を持たない）
   出現1種＋操作フィードバックの短い遷移だけ。
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  .js .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--duration-reveal) var(--ease-standard),
                transform var(--duration-reveal) var(--ease-standard);
  }

  .js .reveal.is-visible { opacity: 1; transform: none; }

  .row { transition: background-color var(--duration-fast) var(--ease-standard); }
}

/* reduced-motion 時：情報は最初から全表示。フォーカス表示は残す（M-6） */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}