/* ============================================================
   VoiceLoupe PoC — style.css
   パレットは docs/poc_scope.md §4-1 の実値のみを使用する。
   禁止: 影 / テクスチャ / グラデーション / blur / glassmorphism /
         立体的ノブ / 過剰な角丸 / アニメーション（メーター値更新を除く）/
         星などの装飾記号
   ============================================================ */

:root {
  --paper:      #F6F1E6; /* 地（生成り紙） */
  --panel-lt:   #F3EEE2; /* パネル明（読ませる面） */
  --panel-mid:  #EDE6D6; /* パネル中（第 3 層 象限市松のみ）*/
  --panel-dk:   #DFD6C4; /* パネル暗（表ヘッダ・補助情報） */
  --display:    #23201C; /* 表示面（レベルメーターのみ） */
  --ink:        #23201C; /* 主文字色 */
  --ink-sub:    #6E6659; /* 副文字色 */
  --rule:       #B9B0A0; /* 罫線 */
  --seam-dark:  #6E6659; /* 継ぎ目 濃線 */
  --seam-light: #E7E0D1; /* 継ぎ目 ハイライト */
  --accent:     #B23A2A; /* 朱（アクセント 1 色のみ） */
  --amber:      #E09A2A; /* メーターのピーク帯のみ */

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* ---------- 継ぎ目（セクション境界） ---------- */
.seam {
  height: 2px;
  background: var(--seam-dark);
  margin: 0;
}
.seam::after {
  content: "";
  display: block;
  position: relative;
  top: 2px;
  height: 1px;
  background: var(--seam-light);
}

/* ---------- ヘッダ ---------- */
.rack-head { padding: 28px 0 20px; }
.rack-head__id {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand-sub {
  font-size: 12px;
  color: var(--ink-sub);
  border: 1px solid var(--rule);
  padding: 1px 6px;
}
.rack-head__lead {
  margin: 8px 0 0;
  color: var(--ink-sub);
  font-size: 14px;
}

/* UI-2: 全 <details> の一括開閉。第 3 の表示状態は作らない操作子 */
.verbose-switch {
  margin: 10px 0 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.verbose-switch input { width: 15px; height: 15px; }
.verbose-switch label { cursor: pointer; }
.verbose-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- セクション ---------- */
.sec { padding: 26px 0 30px; }
.sec__h {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sec__no {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}
.sec__en {
  font-size: 11px;
  color: var(--ink-sub);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sub__h {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}
/* §5 に内包する §6 見出し（セクションを増やさずに番号を連続させる） */
.sub__h--sec {
  margin: 16px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* ---------- パネル ---------- */
.panel {
  background: var(--panel-lt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.panel:last-child { margin-bottom: 0; }

/* ---------- 文字 ---------- */
.sub {
  font-size: 12.5px;
  color: var(--ink-sub);
  margin: 10px 0 0;
}
.sub--head { margin: 0 0 12px; }

.notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--panel-dk);
  font-size: 14px;
  font-weight: 700;
}

.note-fixed {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: var(--panel-dk);
  border: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink);
}

.warn {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  background: var(--panel-lt);
}

.alert {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: var(--panel-lt);
  color: var(--ink);
  font-size: 13.5px;
}

.banner {
  margin: 12px 0 0;
  padding: 9px 12px;
  background: var(--display);
  color: var(--paper);
  font-size: 13px;
  font-family: var(--mono);
}

.verdict-line {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
}
.verdict-line .hit { color: var(--accent); }
/* 判定文の末尾に接続する補足（非対応が多い環境向け）。結論と同じ強さで出さない。 */
.verdict-add {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-sub);
}

.sr-live,
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.alert__msg { margin: 0; }
.alert__more { margin-top: 8px; }
.alert__more .mono { font-size: 12px; margin: 6px 0 0; }

/* ---------- 総合判定 1 行（L0 / 折りたためない） ---------- */
.verdict {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.verdict--gear {
  padding: 11px 13px;
  background: var(--panel-dk);
  border: 1px solid var(--seam-dark);
  border-left-width: 3px;
}
.verdict--voice {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-sub);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.verdict-stamp { display: block; margin: 6px 0 0; font-size: 12px; }
.verdict-link { margin: 8px 0 0; font-size: 14px; font-weight: 700; }
.verdict-link a { color: var(--accent); }

/* ---------- §3 の 1 行講評 ---------- */
.level-verdict {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* §4 のトグル直下に置く進捗の複写（読み上げは §1 側のみ） */
.mirror {
  margin: 10px 0 0;
  min-height: 1.3em;
  font-size: 12.5px;
  color: var(--ink-sub);
}

/* ---------- §8 の「次の一手」 ---------- */
.steps { margin-top: 14px; }
.steps__h { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.steps__list { margin: 0; padding-left: 1.4em; font-size: 13px; }
.steps__list li { margin-bottom: 3px; }

/* 表内から §8 への橋渡しリンク */
.xlink {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent);
}

/* ---------- ボタン ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-dk);
  border: 1px solid var(--seam-dark);
  border-radius: 2px;
  padding: 9px 16px;
  cursor: pointer;
}
.btn:hover { background: var(--seam-light); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn--primary:hover { background: #9C3123; }
.btn--sm { font-size: 12.5px; padding: 6px 12px; }

/* ---------- キー・バリュー ---------- */
.kv { border-top: 1px solid var(--rule); }
.kv__row {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding: 7px 0;
}
.kv__k {
  flex: 0 0 260px;
  font-size: 12.5px;
  color: var(--ink-sub);
}
.kv__v { font-size: 14px; font-weight: 700; }

/* ---------- 表示面（暗色。ここ以外に使わない） ---------- */
.display {
  background: var(--display);
  color: var(--paper);
  border: 1px solid var(--seam-dark);
  border-radius: 2px;
  padding: 16px 18px 14px;
}
.display__vals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.val { border-left: 1px solid #4A443B; padding-left: 10px; }
.val__k {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #A79E8C;
}
.val__n {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.display__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #D6CEBD;          /* A2: 表示面に対して 4.5:1 以上を確保する */
  font-family: var(--mono);
}

/* F3 の指示（表示面いっぱいの独立行）。音では出さない（A3） */
.display__speak {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #6E6659;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper);
}
.display__speak strong { display: block; font-size: 15px; }

/* 単一アクションスロット（B-1: 表示面に出すボタンは常に 1 個） */
.display__action {
  margin-top: 12px;
  border-top: 1px solid #4A443B;
  padding-top: 12px;
}
/* 押す前の予告（FB-7）。ボタンの直上に置き、進捗（下）と上下で役割を分ける。
   進捗より弱く、しかし本文として読める明るさにする（A2: 表示面に対して 4.5:1 以上）。 */
.display__brief {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: #E7E0D1;
}
.display__brief[hidden] { display: none; }

.btn--bay { width: 100%; padding: 12px 16px; font-size: 15.5px; }
.display__progress {
  margin: 8px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  color: #E7E0D1;          /* A2 */
  letter-spacing: 0.02em;
}
.display__unit {
  margin: 0;
  font-size: 11px;
  color: #A79E8C;
  text-align: right;
}

/* B-3 ゼロ状態: 空の目盛りだけにしない。溝の中に 1 行の刻印を置く */
.display__empty {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #E7E0D1;          /* A2: 溝の地 #14120F に対して十分な明色 */
  text-align: center;
  padding: 0 6px;
}
.display[data-state="unpermitted"] .display__empty,
.display[data-state="requesting"] .display__empty,
.display[data-state="error"] .display__empty { display: flex; }

.meter {
  position: relative;
  height: 26px;
  background: #14120F;
  border: 1px solid #4A443B;
  overflow: hidden;
}
/* A1: 稼働（実線）と待機・エラー（破線）を色ではなく線種で分ける */
.display[data-state="unpermitted"] .meter,
.display[data-state="requesting"] .meter,
.display[data-state="error"] .meter { border-style: dashed; }
/* 凍結中は目盛り帯に細い破線の上罫を 1 本引く（専用オーバーレイは作らない） */
.meter[data-frozen="true"] + .scale { border-top: 1px dashed #A79E8C; }
.meter__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
}
.meter__fill--peak { background: #4A443B; }
.meter__fill--rms  { background: #C9C0AE; height: 100%; }
.meter__fill--rms.is-warn { background: var(--amber); }
.meter__fill--rms.is-crit { background: var(--accent); }
.meter__hold {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  left: 0;
  background: var(--amber);
  border-left: 1px solid #14120F;
}
.scale {
  position: relative;
  height: 16px;
  margin-top: 3px;
}
.scale__t {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: #A79E8C;
  transform: translateX(-50%);
}

/* 表示面は §1 に常設する（ファーストビューに出るため sticky は使わない） */
.display--bay { padding: 16px 18px 16px; }
.panel--bay { padding: 18px 20px 20px; }

/* ---------- 自動検出バッジ（EC / NS / AGC） ----------
   3 値は〈等幅記号 + 日本語の状態語 + 枠線の形〉の 3 重で区別する（A1）。
   色は識別に使わない。朱はここでは一切使わない（NF-B3）。            */
.badges { display: grid; gap: 10px; margin-top: 12px; }
.badge3 {
  border: 1px solid var(--rule);
  background: var(--panel-lt);
  padding: 10px 12px;
  border-radius: 2px;
}
.badge3[data-val="on"]      { border: 2px solid var(--seam-dark); background: var(--panel-dk); }
.badge3[data-val="off"]     { border: 1px solid var(--seam-dark); }
.badge3[data-val="none"]    { border: 1px dashed var(--seam-dark); }
.badge3[data-val="unknown"] { border: 1px dashed var(--ink-sub); }
.badge3.is-changed { border-style: double; border-width: 4px; }

.badge3__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.badge3__name { font-size: 15px; font-weight: 700; }
.badge3__state {
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--seam-dark);
  padding: 2px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.badge3__sym { font-size: 13px; letter-spacing: 0.08em; }
.badge3__desc { margin: 4px 0 0; font-size: 14px; }
.badge3__note { margin: 4px 0 0; font-size: 13px; color: var(--ink-sub); }
.badge3__src  { margin: 4px 0 0; font-size: 13px; }
/* C-4: 英字略号・API 名は「くわしく」が開かれているときだけ出す */
.badge3__api { display: none; margin: 4px 0 0; font-size: 12px; color: var(--ink-sub); }
body[data-verbose="on"] .badge3__api { display: block; }

.badge-reset { margin: 12px 0 0; }

/* ---------- 3 値トグル ---------- */
.toggles { display: grid; gap: 8px; margin-top: 12px; }
.tgl {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--rule);
  background: var(--panel-lt);
  padding: 8px 12px;
}
.tgl.is-unsupported { background: var(--panel-dk); }
.tgl__labels { display: flex; flex-direction: column; }
.tgl__abbr { font-size: 14px; font-weight: 700; font-family: var(--mono); }
.tgl__api  { font-size: 11px; color: var(--ink-sub); font-family: var(--mono); }
.tgl__ja   { font-size: 12.5px; color: var(--ink); }

.seg { display: flex; border: 1px solid var(--seam-dark); border-radius: 2px; width: max-content; }
.seg__b {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 6px 14px;
  background: var(--panel-lt);
  color: var(--ink);
  border: 0;
  border-right: 1px solid var(--rule);
  cursor: pointer;
}
.seg__b:last-child { border-right: 0; }
.seg__b[aria-checked="true"] {
  background: var(--seam-dark);
  color: var(--paper);
  font-weight: 700;
}
.seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg__b:disabled { opacity: 0.4; cursor: not-allowed; }

/* 非対応は「第 4 の状態」。朱・赤字・✕ を使わない（F2-7） */
.unsup {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-sub);
  border: 1px dashed var(--ink-sub);
  padding: 5px 12px;
  border-radius: 2px;
  white-space: nowrap;
}
.tgl__hint { font-size: 11.5px; color: var(--ink-sub); grid-column: 1 / -1; margin: 0; }

/* ---------- プローブ表 ---------- */
.table-scroll { overflow-x: auto; }
.probe {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.probe th, .probe td {
  border: 1px solid var(--rule);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.probe thead th {
  background: var(--panel-dk);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.th-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-sub);
  letter-spacing: 0;
}
.probe tbody tr.is-mismatch { background: #F1E3DF; }
.probe .c-name { width: 24%; }
.probe .c-sup  { width: 7%; }
.probe .c-req, .probe .c-act, .probe .c-eff { width: 15%; }
.probe .c-jud  { width: 24%; }

.p-abbr { font-family: var(--mono); font-weight: 700; }
.p-api  { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-sub); word-break: break-all; }
.p-ja   { display: block; font-size: 11.5px; color: var(--ink); }
.p-num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.p-none { color: var(--ink-sub); font-family: var(--mono); }

/* §8 の 1 行表。§4 のバッジと同じ記号体系・同じ枠線規則を使う */
#browser-table th[scope="row"] { background: var(--panel-dk); width: 22%; }
#browser-table th[scope="row"] .celltext { display: block; font-weight: 700; }
#browser-table th[scope="row"] .stamp { display: block; }
#browser-table td[data-val="on"]      { border-width: 2px; border-color: var(--seam-dark); }
#browser-table td[data-val="off"]     { border-color: var(--seam-dark); }
#browser-table td[data-val="none"]    { border-style: dashed; }
#browser-table td[data-val="unknown"] { border-style: dashed; }
.cellmark { display: block; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.celltext { display: block; font-size: 12px; }

/* 項目ごとの一言解説（既存の <details> パターンを踏襲。既定は畳む） */
.why { margin-top: 4px; }
.why__s {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-sub);
}
.why__s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.why__p {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* MISMATCH 行の直後に添える説明（表幅いっぱいの続き行） */
.probe tbody tr.is-mm-note { background: #F1E3DF; }
.probe tbody tr.is-mm-note td {
  border-top: 0;
  padding-top: 0;
}
.mm-note { margin: 0; font-size: 12px; line-height: 1.6; }
.mm-note__k { font-family: var(--mono); font-weight: 700; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border: 1px solid var(--ink-sub);
  border-radius: 2px;
  color: var(--ink-sub);
  white-space: nowrap;
}
.badge--mismatch {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 700;
}
.badge--match { border-color: var(--rule); }
.badge--layer {
  border-color: var(--seam-dark);
  color: var(--ink);
  background: var(--panel-dk);
  font-weight: 700;
}

/* ---------- 機種名の表示解除（NF-P11-9 / NF-P11-10） ----------
   「くわしく」の中にしか置かない枠。解除中は警告を label と同一面に常時出す。 */
.reveal {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--panel-dk);
}
.reveal[data-revealed="on"] { border-left: 3px solid var(--accent); }
.reveal__ctl {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.reveal__ctl input { margin: 4px 0 0; flex: none; }
.reveal__ctl input:disabled { cursor: default; }
.reveal__ctl input:disabled + .reveal__ctl-t { color: var(--ink-sub); }
.reveal__warn {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel-lt);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.reveal__kv { margin-top: 10px; }
.reveal__kv .kv__v { word-break: break-all; }
.reveal__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-sub);
}

/* ---------- 生 JSON ---------- */
.summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}
.summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.raw-grid { display: grid; gap: 12px; margin-top: 12px; }
.raw-block { border: 1px solid var(--rule); }
.raw-block__h {
  background: var(--panel-dk);
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.raw-block pre {
  margin: 0;
  padding: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow: auto;
}

/* ---------- 対処カード ---------- */
.card {
  display: grid;
  grid-template-columns: 78px 1fr;
  border: 1px solid var(--seam-dark);
  background: var(--panel-lt);
  border-radius: 2px;
  margin-bottom: 12px;
}
.card__sleeve {
  border-right: 1px solid var(--rule);
  background: var(--panel-dk);
  padding: 12px 8px;
  text-align: center;
}
.card__no {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.card__no-en {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-sub);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.lamps { margin-top: 12px; display: grid; gap: 5px; justify-items: center; }
.lamp {
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid var(--seam-dark);
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}
.lamp--on  { background: var(--seam-dark); color: var(--paper); }
.lamp--off { background: transparent; color: var(--ink-sub); border-color: var(--rule); }

.card__body { padding: 12px 16px 14px; }
.card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.card__head {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.5;
}
.card__ev { margin: 0 0 8px; font-size: 13.5px; }
.card__more { margin-bottom: 8px; }
.card__more .summary { font-size: 12.5px; }
.card__dl { margin: 0; font-size: 13px; }
.card__dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--rule);
}
.card__dt { color: var(--ink-sub); font-size: 12px; }
.card__dd { margin: 0; }
.card__foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-sub);
  letter-spacing: 0.04em;
}
.pri-bar { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; }

/* ==========================================================================
   「▸ 次に試せること」— F8-11 の比較導線（docs/t1_zero_action_copy.md §3）
   - 対処 0 件のカード（NO ACTION）にだけ出る独立したブロック。
     カードの装飾ではなくアクションなので、上の罫で本文から切り離す。
   - 対処カードではないので、優先度バー・OBS 欄・根拠レベルの刻印は付けない。
   - 色は識別に使わない（A1）。区別は ▸ の見出しと罫の 2 チャネルが負う。
   ========================================================================== */
.nextstep {
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
}
.nextstep__h {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.nextstep__p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.7;
}
.nextstep__p:last-child { margin-bottom: 0; color: var(--ink-sub); }

/* ==========================================================================
   対処カード内「OBS での設定」欄（design/obs_translation_ui_spec.md）
   - 色は識別に使わない（A1 / OA1）。--accent はこの欄で 1 箇所も使わない（NF-B3）
   - 区分は 等幅記号 / 和語の区分語 / 枠線の形 / 値の書式 / 構造差 の 5 チャネル
   - 破線は使わない（既存の「このブラウザ非対応」バッジと混線するため）。
     TR-C は点線、TR-D は枠なし（§2-3）
   - 文字サイズは 14px を下回らせない（OA7 / A6）
   ========================================================================== */
.obs {
  display: grid;
  grid-template-columns: 20px 1fr;
  background: var(--panel-dk);           /* 暗パネル = 根本対処（明面）との造形格差（F6-29） */
  border-radius: 2px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
}
/* ③ 枠線の形 = 区分の識別チャネル */
.obs--a { border: 2px solid var(--seam-dark); }
.obs--b { border: 1px solid var(--seam-dark); }
.obs--c { border: 1px dotted var(--seam-dark); }
.obs--d { border: 0; }
/* ★[Rev.9 / F6-49]「フィルターはあるが、この環境では勧められない」状態。
   区分ではなく状態なので 4 区分の枠線語彙には足さない。実線 1px は TR-B と同じで、
   識別は見出しの反転刻印（.obs-state）と、値表・並び番号・コピーボタンが
   1 つも無いという構造差が負う（pm 決裁 N-1: 第 5 の区分を作らない）。 */
.obs--x { border: 1px solid var(--seam-dark); }

/* ★[Rev.10 / pm]「VST での調整は優先度 2、OBS 標準フィルターでの調整が優先度 1」。
   これは OBS 欄の中だけの順序であって、対処カードの順序（requirements_v1.md §2-6-5 =
   上流優先）ではない。ゆえにカードの並びには一切触れず、この欄の強弱だけで表す。
   区分の識別チャネル（枠線の形 / 等幅記号）には手を出さない — 修飾するのは
   左の余白（.obs--first の柱）と地の明度（.obs--later の後退）だけで、
   TR-A の実線 2px と TR-C の点線 1px はそのまま残る（pm 決裁 N-1: 第 5 の区分を作らない）。
   色は使わない（A1 / NF-B3）。--accent（朱）はここでは 1 箇所も使わない。

   順序は「足す」側だけで表す。後回し側の文字を薄くする（opacity / 明度を落とす）ことは
   しない — 薄くすれば本文のコントラストが落ちる。
   「読みにくくして後回しを示す」のは、可読性を順序の道具に使う設計であって採らない。 */
.obs--first { box-shadow: inset 3px 0 0 0 var(--ink); }
/* .obs--later 自体は地を一切いじらない。順序は本文の 1 行（.obs__order）と、
   .obs--first 側にだけ立つ柱の有無で伝える。クラスは JS / 検査用の目印として残す。 */
.obs--later { margin-left: 8px; }

.obs__spine {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--ink-sub);
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid var(--rule);
  user-select: none;
}
.obs--d .obs__spine { border-right: 1px solid var(--rule); }
.obs__inner { padding: 8px 12px 10px; min-width: 0; }

/* 見出し行（常時表示）。値表と注記だけが折りたためる（§3-2 代案） */
.obs__fold > .obs__sum {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}
.obs__fold > .obs__sum::-webkit-details-marker { display: none; }
.obs__fold > .obs__sum::before {
  content: "▸";
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-sub);
}
.obs__fold[open] > .obs__sum::before { content: "▾"; }
/* NF-B3 を字面どおりに読み、この欄では --accent を 1 箇所も使わない。
   フォーカス環も朱ではなく継ぎ目濃線で出す（--panel-dk 上で約 3.9:1） */
.obs__sum:focus-visible,
.obs .btn:focus-visible,
.obs textarea:focus-visible { outline: 2px solid var(--seam-dark); outline-offset: 2px; }
.obs__h {
  display: inline;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.obs__layer { font-size: 10.5px; }
.obs__stamp { font-size: 10.5px; }

/* ① 等幅記号 + ② 和語の区分語。枠線の形は区分ごとに変える */
.obs-grade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border-radius: 2px;
  font-size: 12px;
  white-space: nowrap;
}
.obs-grade__mark { letter-spacing: 0.04em; }
.obs-grade__word { font-weight: 700; }
.obs-grade--a { border: 2px solid var(--seam-dark); }
.obs-grade--b { border: 1px solid var(--seam-dark); }
.obs-grade--c { border: 1px dotted var(--seam-dark); }
.obs-grade--d { border: 0; padding-left: 0; }

/* F6-49 の状態刻印。区分バッジの代わりに出る。等幅記号を持たない（＝ 4 区分の
   記号列 [=] [~] [+] [—] に第 5 の記号を足さない）。視覚的な識別は地色の反転で行う。
   色相ではなく明度の反転なので、グレースケール印刷でも色覚特性によらず残る。 */
.obs-state {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 2px;
  font-size: 12px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
}
.obs-state__word { font-weight: 700; }

.obs__skip { margin: 6px 0 4px; color: var(--ink-sub); font-size: 14px; }
.obs__p    { margin: 4px 0; font-size: 14px; }
.obs__lead { margin: 6px 0 2px; font-size: 14px; font-weight: 700; }
/* 順序 1 行（OW2 の直後）。区分バッジではないので記号を持たず、
   左の罫 1 本と太字だけで「読む順が先にある」ことを示す */
.obs__order {
  margin: 6px 0 6px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.obs--later .obs__order { border-left-style: dotted; }
.obs__deny { margin: 6px 0 2px; font-size: 14px; font-weight: 700; }
.obs__steps { margin: 4px 0 8px; padding-left: 1.5em; font-size: 14px; }
.obs__steps li { margin: 2px 0; }

/* 値表 — 行順は OBS の入力欄の並びと一致させる（OB15）。列は 4 列固定（OB16） */
.obs-tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-lt);
  border: 1px solid var(--rule);
  margin: 8px 0;
  font-size: 14px;
}
.obs-tbl__cap {
  caption-side: top;
  text-align: left;
  padding: 6px 8px;
  background: var(--panel-lt);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink);
}
.obs-tbl__grp > th {
  text-align: left;
  padding: 5px 8px;
  background: var(--panel-dk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 700;
}
.obs-tbl__ord { font-size: 12px; color: var(--ink-sub); margin-right: 8px; }
.obs-tbl__fil { font-weight: 700; }
.obs-tbl td, .obs-tbl tbody th {
  padding: 3px 8px;
  border-top: 1px solid var(--seam-light);
  vertical-align: baseline;
}
.obs-tbl__k { text-align: left; font-weight: 400; white-space: nowrap; }
.obs-tbl__v { text-align: right; white-space: nowrap; width: 22%; }
.obs-tbl__u { text-align: left; color: var(--ink-sub); width: 14%; white-space: nowrap; }
.obs-tbl__a { text-align: right; font-size: 12px; color: var(--ink-sub); width: 14%; }
.obs-tbl__note { color: var(--ink-sub); font-size: 13.5px; }

/* VST に入れる値。値表とは造形を変える（点線 / §5-1） */
.obs-vst {
  border: 1px dotted var(--seam-dark);
  background: var(--panel-lt);
  padding: 6px 9px;
  margin: 4px 0 6px;
}
.obs-vst__h { margin: 0 0 3px; font-size: 14px; font-weight: 700; }
.obs-vst__row {
  margin: 0;
  display: flex;
  gap: 10px;
  font-size: 14px;
  border-top: 1px solid var(--seam-light);
  padding-top: 2px;
}
.obs-vst__k { color: var(--ink-sub); min-width: 11em; }

/* コピー（ブロックに 1 個だけ / OB20）。ボタン名は成功しても変えない（OB24） */
.obs__copy { margin-top: 8px; }
.obs__copy-btn { min-height: 44px; }
.obs__live { margin: 5px 0 0; font-size: 14px; color: var(--ink-sub); }
.obs-fallback {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 14px;
  border: 1px solid var(--seam-dark);
  background: var(--panel-lt);
  color: var(--ink);
  padding: 6px;
}

/* OW7 / OW8 — 折りたたみの外に常設する */
.obs__note {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-sub);
}
.obs__note + .obs__note { margin-top: 2px; padding-top: 0; border-top: 0; }
.obs__note--strong { font-weight: 700; color: var(--ink); }

/* ---------- 空きベイ（ブランクパネル） ---------- */
.blank-bay {
  border: 1px solid var(--rule);
  background: var(--panel-dk);
  border-radius: 2px;
  padding: 18px 20px;
}
.blank-bay__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-sub);
  border: 1px solid var(--ink-sub);
  padding: 1px 7px;
  border-radius: 2px;
}
.blank-bay__msg {
  margin: 10px 0 4px;
  font-size: 15px;
  font-weight: 700;
}
.blank-bay__what { margin: 0; font-size: 12.5px; color: var(--ink-sub); }

/* ---------- §5 声質判定（3 層構造 / L3 提示層） ----------
   A1: 層の区別は「枠線の形」と「日本語の見出し語」で行う。色は識別に使わない。
   第 1 層 = 実線 2px（最優先）/ 第 2 層 = 破線（分類ではない）/ 第 3 層 = 実線 1px */
.pat-ref {
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid var(--seam-dark);
  border-left-width: 4px;
  background: var(--panel-dk);
  font-size: 13.5px;
  font-weight: 700;
}
.pat-band,
.pat-session,
.pat-third { margin-bottom: 14px; }
.pat-band {
  border: 2px solid var(--seam-dark);
  border-radius: 2px;
  padding: 12px 14px 6px;
}
.pat-session {
  border: 1px dashed var(--seam-dark);
  border-radius: 2px;
  padding: 12px 14px 6px;
}
.pat-third {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px 14px 6px;
}
.pat-layer__h {
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.pat-layer__no {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-sub);
  border: 1px solid var(--ink-sub);
  padding: 1px 6px;
  border-radius: 2px;
}
.pat-layer__lead { margin: 0 0 8px; font-size: 13.5px; }
.pat-lead {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* 3 点セット（呼び名 + 現象の 1 文 + 対処への導線）。この 3 行は必ず一緒に出す */
.pat-set {
  border-top: 1px solid var(--rule);
  padding: 8px 0 10px;
}
.pat-set--badge { border-top-style: dotted; }
.pat-set__head {
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pat-set__chip {
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--seam-dark);
  padding: 1px 8px;
  border-radius: 2px;
}
.pat-set__name { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.pat-set__phen { margin: 0 0 4px; font-size: 14px; }
.pat-set__hint { margin: 0; font-size: 13px; color: var(--ink-sub); }
.pat-set__also {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-sub);
}

.pat-pins { margin-top: 2px; }

/* ---------- 2 軸マトリクス（連続座標プロット / matrix_continuous_spec.md §3・§7）
   3×3 のテーブル実装（.mtx__grid / __cell / __mark / __chip / __xh / __yh / __cap）は
   廃止した。図の実体は viewBox 0 0 100 100 の SVG 1 枚で、
   文字（軸ラベル・凡例・タグ本文）は SVG の外の HTML 側に置く。
   アニメーション・グラデーション・発光・★ は使わない（冒頭の禁止事項 / NG リスト）。 */
/* 図・軸ラベル・凡例をひとつの段にまとめ、パネルの中で左右中央に置く。
   .panel は PC で 1000 px 級まで広がるのにプロットの上限は 460 px なので、
   左寄せのままだと右に図 1 枚ぶんの余白が残る（ユーザー指摘）。
   段の幅 = プロットの上限幅。ラベル・凡例の左端もプロットの左端に揃う。

   ★ この段に入れてよいのは **図（プロット）と、その図に噛み合う軸ラベル・目盛・凡例**だけ。
     460 px はプロットの実寸を決める値であって、読みものの行長ではない。
     解説文（.mtx__lead）は図の一部ではなく本文なので、この段に入れると
     .panel が 1000 px 級まで広がっても 460 px（= 幅の 46 % 程度）しか使わず、
     右側に大きな空白が残ってしまう。.mtx__lead はここから外し、
     .panel の全幅を使わせる（他の本文段落と同じ扱い）。 */
.mtx {
  --mtx-plot: 460px;          /* プロットの上限幅（§7-1）。ここだけが図の実寸を決める */
  --mtx-col: var(--mtx-plot); /* 中央寄せする段の幅。480 px 未満では none に外す */
  margin: 0 0 10px;
}
.mtx__board,
.mtx__ax-src,
.mtx__rule1d,
.mtx__legend {
  max-width: var(--mtx-col);
  margin-inline: auto;   /* 上下の margin は各規則の値を保つ */
}

/* 解説文はパネルの全幅を使う（max-width / margin-inline: auto を持たせない）。
   480 px 未満でも同じ規則が効くので、モバイル側に追加の打ち消しは要らない。 */
.mtx__lead {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.65;
}
/* 軸ラベル（F5-2）。X 軸は図の下、Y 軸は図の上下に置く。
   どちらも「両端の和文 2 点 + 軸の名前 1 点」の 3 点セットで、同じ組み方にしてある。
   ★ Rev.1a: Y の 3 点も横書きに倒した（旧: 左列に writing-mode: vertical-rl）。
     縦書きは字が正立していても、X 軸の 1 行組と同じ速さでは読めない。
     縦順序は 軸名 → ↑ 上ほど… → プロット → ↓ 下ほど… → X の 3 点。
     §7-3 がモバイル用に定めていた版組をそのまま全幅に広げたので、
     PC とモバイルで読み順が変わらない（DOM 順 = 視覚順）。
   .mtx__board が図とラベル 2 本を噛み合わせる格子（旧 3×3 テーブルの .mtx__grid とは別物）。 */
.mtx__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "ymid"
    "yhi"
    "plot"
    "ylo"
    "xlab";
  gap: 2px 0;
}

.mtx__ax {
  margin: 4px 0;
  font-size: 11.5px;
  color: var(--ink-sub);
}
.mtx__ax--x {
  grid-area: xlab;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px;
  /* 上の「↓ 下ほど 聞き取りにくい」（縦軸の下端）と 1 行ぶん離し、
     図の下に並ぶ 2 行が別々の軸の話であることを間で示す */
  margin: 9px 0 0;
}
/* Y 軸ラベル: 3 点をプロットの上下に配り直す。両端の和文は図の左端に揃え、
   ↑ / ↓ の向きだけで縦軸の話であることが分かるようにしてある。 */
.mtx__ax--y { display: contents; }
.mtx__ax--y > * {
  justify-self: start;
  text-align: left;
  line-height: 1.35;
}
.mtx__ax-mid { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mtx__ax-end { white-space: nowrap; }
/* 縦軸の名前は図の左上の行頭に置く（X の軸名だけが中央寄せ） */
.mtx__ax--y .mtx__ax-mid { grid-area: ymid; text-align: left; margin-bottom: 2px; }
.mtx__ax--y .mtx__ax-end--hi { grid-area: yhi; margin-bottom: 3px; }
.mtx__ax--y .mtx__ax-end--lo { grid-area: ylo; margin-top: 3px; }

/* 軸の合成元（TILT / PRES）。図の直下に置く近接テキスト */
.mtx__ax-src {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-sub);
}

.mtx__frame { grid-area: plot; margin-inline: 0; }
.mtx__plot {
  display: block;
  width: 100%;
  max-width: var(--mtx-plot);
  aspect-ratio: 1 / 1;   /* viewBox が 100×100 なので常に正方形 */
}

/* 全ての線は non-scaling-stroke ＋ CSS px 指定。340 px でも 460 px でも太さが変わらない */
.mtx__plot line,
.mtx__plot path,
.mtx__plot rect,
.mtx__plot polygon { vector-effect: non-scaling-stroke; }

.mtx__bg    { fill: var(--paper); }
.mtx__quad  { fill: var(--panel-mid); }            /* 市松。良し悪しの符号ではない（F5-6 / §3-3） */
.mtx__hyst  { fill: var(--rule); }                 /* θ16 の不感帯。ベタ・不透明 */
/* 中心十字＝2 本の軸そのもの。不感帯の帯（--rule のベタ）に埋もれないよう、
   枠（1.2 px）より太い 1.8 px にして、図の中でいちばん強い線にしている。 */
.mtx__cross { fill: none; stroke: var(--ink); stroke-width: 1.8px; }
.mtx__bound { fill: none; stroke: var(--seam-dark); stroke-width: 1px; stroke-dasharray: 3 2; }
.mtx__tick  { fill: none; stroke: var(--rule); stroke-width: 1px; }
.mtx__edge  { fill: none; stroke: var(--ink); stroke-width: 1.2px; }
.mtx__edge--ref { stroke-dasharray: 4 3; }         /* 参考値（§5） */

.mtx__zone  { font-size: 3.2px; fill: var(--ink-sub); }

.mtx__est       { fill: none; stroke: var(--accent); stroke-width: 1.5px; stroke-dasharray: 5 3; }
.mtx__estarrow  { stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 5 3; }
.mtx__arrowhead { fill: var(--accent); }
.mtx__estcap    { font-size: 2.8px; fill: var(--accent); }

.mtx__leader  { stroke: var(--seam-dark); stroke-width: 0.8px; }
.mtx__tagbox  { fill: var(--panel-lt); stroke: var(--ink); stroke-width: 1px; }
.mtx__tagname { font-size: 3.2px; fill: var(--ink); }
.mtx__tagid   { font-size: 2.6px; fill: var(--ink-sub); }

.mtx__marg { fill: var(--ink); }
.mtx__over { fill: var(--ink); }                   /* レンジ外を示す実線の三角（§2-6） */
.mtx__solo { stroke: var(--ink); stroke-width: 1.5px; }  /* 片軸のみ測れたとき（§5） */

.mtx__nowarm { stroke: var(--ink); stroke-width: 2px; }
.mtx__nowbox { fill: none; stroke: var(--ink); stroke-width: 1.5px; }
.mtx__now--low .mtx__nowbox { stroke-dasharray: 2 1.5; }   /* θ5 信頼度 low */
.mtx__nowcap { font-size: 3.4px; font-weight: 700; fill: var(--ink); }

.mtx__stampbox  { fill: none; stroke: var(--accent); stroke-width: 1px; }
.mtx__stamptext { font-size: 3.4px; fill: var(--accent); }

/* P-5 の 1D 目盛。枠と分離していること自体が「座標を持たない」の説明になる（§3-7） */
.mtx__rule1d { margin: 12px 0 0; }
.mtx__rule1d[hidden] { display: none; }
.mtx__rule1d-h { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-sub); }
.mtx__rule1d-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  height: 22px;
}
.mtx__rule1d-lab { font-size: 11px; color: var(--ink-sub); white-space: nowrap; }
.mtx__rule1d-track {
  position: relative;
  display: block;
  height: 22px;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
}
.mtx__rule1d-track--off { border-top-style: dashed; }
/* 位置は app.js が CSS カスタムプロパティ --vl-x（0〜100%）で渡す。
   style 属性は CSP（style-src 'self' / 'unsafe-inline' 無し）が拒否するため使わない。
   --vl-x が来なかったときは左端に置く（描画は壊さない）。 */
.mtx__rule1d-bound {
  position: absolute;
  left: var(--vl-x, 0%);
  top: -5px;
  width: 0;
  height: 10px;
  border-left: 1px dashed var(--seam-dark);
}
/* ▲（塗り --ink）。border 三角形。影・発光は使わない */
.mtx__rule1d-mark {
  position: absolute;
  left: var(--vl-x, 0%);
  top: -9px;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid var(--ink);
}
.mtx__rule1d-cap { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-sub); }

.mtx__legend {
  margin: 10px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.mtx__legend-p { margin: 0 0 3px; font-size: 11.5px; line-height: 1.6; color: var(--ink-sub); }

/* A8 印刷: 象限のベタ塗りを外し、罫線と破線だけにする（インク節約 + 白黒での判読） */
@media print {
  .mtx__quad { fill: none; }
  .mtx__hyst { fill: none; stroke: var(--rule); stroke-width: 0.5px; }
}

/* F5-14 の注記 5 行 + 1 行。折りたたまず常設する */
.pat-notes {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.pat-notes__h { margin: 0 0 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-sub); }
.pat-notes__list { margin: 0; padding-left: 1.3em; font-size: 12.5px; color: var(--ink-sub); }
.pat-notes__list li { margin-bottom: 2px; }

/* ---------- フッタ ---------- */
.foot { padding: 20px 0 0; color: var(--ink-sub); }
.foot p { margin: 0 0 4px; font-size: 12px; }

/* ---------- 崩れ防止（作り込みはしない） ---------- */
@media (max-width: 720px) {
  .display--bay { padding: 12px 12px 14px; }
  .display__vals { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  .val { padding-left: 7px; }
  .val__n { font-size: 15px; }
  .display__empty { font-size: 10.5px; }
  .tgl { grid-template-columns: 1fr; }
  .kv__row { flex-direction: column; gap: 0; }
  .kv__k { flex: none; }
  .card { grid-template-columns: 1fr; }
  .card__sleeve { border-right: 0; border-bottom: 1px solid var(--rule); }
  .card__dl > div { grid-template-columns: 1fr; gap: 0; }
  /* OBS 欄: 縦の刻印帯は横位置が取れないので上辺の帯に倒す。文字は 14px を保つ */
  .obs { grid-template-columns: 1fr; }
  .obs__spine {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: 0.16em;
    text-align: left;
    padding: 3px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .obs--d .obs__spine { border-right: 0; border-bottom: 1px solid var(--rule); }
  .obs-tbl__v, .obs-tbl__u, .obs-tbl__a { width: auto; }
}

/* ---------- §5 マトリクス モバイル（matrix_continuous_spec.md §7） ---------- */

/* 規律 3: タグは 460 px 未満の実描画では読めない。引き出し線ごと省き、
   図の外の #pat-pins（呼び名 + 現象文 + 対処の向き）に委ねる。
   図に入らないものは、図の外にすでに全文で出ている。 */
@media (max-width: 560px) {
  .mtx__tag { display: none; }
}

/* §7-3 の縦順序（縦軸の名前 → ↑ 上ほど… → 正方形プロット → ↓ 下ほど… → X 軸ラベル）は
   Rev.1a で全幅の既定になったので、ここで組み直す必要はもう無い（上の .mtx__board を参照）。
   480 px 未満で残る仕事は「中央寄せの段幅を外して画面いっぱいに使う」ことだけ。 */
@media (max-width: 480px) {
  .mtx {
    --mtx-col: none;   /* max-width: none 相当。margin-inline: auto は効かなくなる */
  }
}

/* X 軸ラベル 3 点は折り返さず、中央の見出しを 2 行目に落とす（§7-3） */
@media (max-width: 400px) {
  .mtx__frame { margin-inline: -16px; }   /* .wrap の左右パディングを部分的に相殺して幅を稼ぐ */
  .mtx__plot { min-width: 340px; }
  .mtx__ax--x {
    grid-template-columns: auto auto;
    grid-template-areas: "lo hi" "mid mid";
    justify-content: space-between;
  }
  .mtx__ax--x .mtx__ax-end--lo { grid-area: lo; }
  .mtx__ax--x .mtx__ax-end--hi { grid-area: hi; text-align: right; }
  .mtx__ax--x .mtx__ax-mid { grid-area: mid; text-align: left; }
}

/* それでも 340 px に届かない極小幅のときだけ、横 1 方向のスクロールに退避。
   縦スクロールは潰さない（overflow ではなく overflow-x）。 */
@media (max-width: 355px) {
  .mtx__frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mtx__plot { min-width: 340px; }
}

/* ============================================================
   ★[T-4] `[6]` 処理チェーン
   ------------------------------------------------------------
   図ではなく「順序のある表」として組む（tester_readiness_scope.md T-4
   「図としての作り込み・アニメーションは不要／実測値が出ることが本質」）。
   段の状態は色ではなく、左の記号（OK / ? / — / =）と語で識別する（A1）。
   ============================================================ */
.chain {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  counter-reset: chain;
}
.chain__stage {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--panel-lt);
  border-radius: 2px;
  padding: 10px 12px;
  margin-bottom: 0;
}
/* 段と段のあいだの継ぎ目。音が流れる向きを 1 本の線だけで示す（装飾はしない） */
.chain__stage + .chain__stage { margin-top: 14px; }
.chain__stage + .chain__stage::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--seam-dark);
}
/* 読み取る手段が無い段は、枠を破線にして「埋めていない」ことを形で示す */
.chain__stage[data-state="undetectable"] { border-style: dashed; background: var(--paper); }
.chain__stage[data-state="fixed"] { background: var(--panel-dk); }

.chain__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.chain__no {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-sub);
  border: 1px solid var(--ink-sub);
  border-radius: 2px;
  padding: 0 6px;
}
.chain__name { font-size: 15px; font-weight: 700; }
.chain__who {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-sub);
  margin-left: auto;
}
.chain__sum { margin: 0 0 6px; font-size: 14px; }
.chain__sum[data-state="undetectable"] { color: var(--ink-sub); }

.chain__rows { border-top: 1px solid var(--rule); }
.chain__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}
.chain__k { font-size: 13px; color: var(--ink-sub); }
.chain__v { font-size: 13.5px; font-weight: 700; text-align: right; }
.chain__v[data-mark="undetectable"] { font-weight: 400; color: var(--ink-sub); }
.chain__mark {
  display: inline-block;
  min-width: 2.2em;
  margin-right: 6px;
  font-size: 10.5px;
  text-align: center;
  border: 1px solid var(--ink-sub);
  border-radius: 2px;
  color: var(--ink-sub);
}
.chain__mark[data-mark="readable"] { color: var(--ink); border-color: var(--ink); }
.chain__note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-sub);
}
.chain__foot {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-sub);
}

@media (max-width: 520px) {
  .chain__row { grid-template-columns: 1fr; }
  .chain__v { text-align: left; }
}

/* ============================================================
   ★[T-4] 収集導線（`[7]` の中）
   ============================================================ */
.collect__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
@media (max-width: 620px) { .collect__cols { grid-template-columns: 1fr; } }

.collect__group {
  border: 1px solid var(--rule);
  background: var(--panel-lt);
  border-radius: 2px;
  padding: 8px 12px 10px;
}
.collect__group--no { background: var(--panel-dk); }
.collect__lead { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.collect__list { margin: 0; padding-left: 1.3em; font-size: 12.5px; }
.collect__list li { margin-bottom: 3px; }

.collect__text {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--seam-dark);
  background: var(--panel-lt);
  color: var(--ink);
  padding: 8px;
  border-radius: 2px;
  resize: vertical;
}
.collect__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--seam-dark);
  border-left-width: 4px;
  border-radius: 2px;
  font-size: 14px;
}
.collect__consent input { margin-top: 5px; }
.collect__dest { margin-top: 6px; }
.collect__dest-line { margin: 2px 0; font-size: 13px; color: var(--ink-sub); }