/* d-check Portal — デザイントークン（K-013 で確定）
 *
 * 使い方は design/README.md。値を変えるときは、この 1 ファイルだけを変える。
 *
 * v2 の狙い: **情報密度の高い業務用の道具**。運営は 1 日に何度も開く画面で、
 * 顧客も「読む・取る」を短時間で終える。装飾で面積を使わず、罫線と余白で区切る。
 * 旧デザインシステムは大柄で（ボタン 56px・角丸 18〜28px・pill 形のバッジ・影 2 段）、
 * スマートフォンのアプリをそのまま広い画面に置いた見え方になっていた。
 * v2 はそこを詰める——出どころと旧実装の値は design/vendor-notes-old-ds.md。
 *
 * 引き継ぐもの: 色と書体（レポート本文の紙面と色を揃えるため）。
 * 作り直すもの: 大きさ・角丸・影・余白・行送り（＝密度に関わるすべて）。
 *
 * 命名の決め: 色は素材で呼ぶ（--pink / --ink / --line）。--color-primary のような
 * 抽象層は作らない——1 人で作る規模では、対応表を覚える手間が増えるだけになる。
 */

:root {
  /* ---- 色: ピンク（面と文字で使い分ける） ---- */
  --pink: #e62486;        /* 面。主ボタン・現在地 */
  --pink-dark: #bd176a;   /* 文字。ピンクを文字色にするときは必ずこちら（白地でも読める） */
  --pink-pale: #fff0f7;   /* 地。注意を引く行の面 */

  /* ---- 色: 墨（数字は元の不透明度。実際の値は不透明色） ---- */
  --ink: #15171a;         /* 本文・見出し・暗い面（左メニュー）の地 */
  --ink-80: #2b2f34;      /* 少し退いた本文 */
  --ink-64: #4a5058;      /* 表の付帯情報・列見出し */
  --ink-48: #646a73;      /* 補助文 */
  --ink-30: #9aa0a8;      /* もっとも退いた文字 */

  /* ---- 色: 地と罫 ----
   * **明るさを 3 段にする**（2026-09-02 USER・K-164）——ページの地がいちばん暗く、
   * パネルの下地がその中間、パネルの中身が白。奥から手前へ明るくなる並びが
   * 「どこからどこまでが 1 つの項目か」を伝える主役になる。
   * 差は小さく取る——強くすると業務の画面が読み物のように見える。 */
  --white: #fff;
  --bg: #e8ebf0;          /* 1 段目: ページの地 */
  --panel: #f4f5f7;       /* 2 段目: パネルの下地（題の行もこの色） */
  --panel-2: #fff;        /* 3 段目: パネルの中身。中身がいちばん明るい */
  --soft: #f6f7f9;        /* 表の見出し行・交互に敷く面・二次ボタンのホバー */
  --line: #e1e4e8;        /* 罫線・枠線。区切りの主役なので旧より少しはっきりさせる */
  --line-soft: #eef0f2;   /* 表の行間の罫 */

  /* ---- 色: 説明・前置きの面 ---- */
  --blue-soft: #eef4ff;
  --blue-rule: #8da9d1;

  /* ---- 色: うまくいかなかったことを伝える ----
   * ブランドのピンク（マゼンタ寄り）とは色相を離した赤にする。
   * 主操作のピンクと、直せというしるしの赤が、同じ色に見えないようにするため */
  --alert: #c92a2a;
  --alert-pale: #fff5f5;

  /* ---- 書体 ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Noto Sans Mono", monospace;

  /* アイコンの書体（2026-09-02 USER・K-165）。Google の Material Symbols を使う。
   * **本番は自分で配る**——画面の CSP は `default-src 'none'` ＋ `style-src 'self'` で、
   * 外部の CDN からは読めない（`app/src/csp.ts`）。woff2 を `/assets/` から配り、
   * `font-src 'self'` を 1 つ足す。見本（design/screens/frame.html）だけは
   * Google の CDN を読んでいて、そこが本番と唯一違う。
   * Material Symbols は Apache-2.0 なので自分で配ってよい。 */
  --font-icon: "Material Symbols Outlined";
  --icon-size: 18px;      /* 本文 14px の行に置いて、字の高さとそろう大きさ */

  --lh: 1.6;              /* 本文の行送り（旧 1.75 から詰めた） */
  --lh-tight: 1.35;       /* 表の行・見出し */

  --t-h1: 22px;           /* 画面の題。可変幅（clamp）はやめ、どの幅でも同じ大きさにする */
  --t-h2: 17px;
  --t-h3: 15px;
  --t-body: 14px;         /* 本文の基準（旧 16px から詰めた） */
  --t-sm: 13px;
  --t-xs: 12px;

  /* ---- 余白（4px 刻み。クラスごとの px 直書きをやめる） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- 角丸（小さく。pill 形は使わない——業務用の画面では丸みが情報を膨らませる） ---- */
  --r-sm: 3px;            /* 入力欄・ボタン・小さな箱 */
  --r-card: 8px;          /* パネル・表の外枠（2026-09-02 USER が 6px から少し丸めた・K-164） */
  --r-lg: 10px;           /* 大きめの箱・ポップアップ。パネルより 1 段大きく保つ */

  /* ---- 影 ----
   * 区切りの主役は「地とパネルの色の差」と罫線。影はその補助で、1 段だけ・ごく薄く。
   * 旧デザインシステムの 2 段の影には戻さない（2026-09-02 USER が薄い 1 段だけ許容・K-164）。 */
  --sh-panel: 0 1px 2px rgba(24, 32, 48, .06);  /* パネル。地から 1mm 浮く程度 */
  --sh-pop: 0 8px 24px rgba(30, 36, 45, .12);   /* ポップアップ・メニューの展開 */

  /* ---- 寸法 ---- */
  --w-page: 1240px;       /* 通常の内容の最大幅（表を広く使えるよう旧より広げる） */
  --w-narrow: 640px;      /* 読ませる画面・入力させる画面 */
  --w-side: 216px;        /* 左メニューの幅（横並びのとき。旧 248px から詰めた） */
  --gutter: 16px;         /* 本文の左右の余白 */

  --w-modal-sm: 380px;    /* 確認だけのモーダル */
  --w-modal: 520px;       /* 既定のモーダル */
  --w-modal-lg: 800px;    /* 表や複数の入力を入れるモーダル */

  --h-top: 48px;          /* 本文の上のヘッダの高さ（左メニューの右側） */

  --ctl-h: 32px;          /* ボタン・入力欄の高さ（旧 56px から詰めた） */
  --ctl-h-sm: 26px;       /* 表の中に置く小さいボタン */
  --row-h: 38px;          /* 一覧・表の 1 行の高さの目安 */
}

/* 広い画面では本文の左右をゆったり取る。切り替えの幅は base.css と同じ 768px。
 * （メディアクエリの条件にカスタムプロパティは使えないため、値を直に書く） */
@media (min-width: 768px) {
  :root { --gutter: 20px; }
}

/* 指で操作する端末では、押せるものを 44px 以上にする。
 * 見た目の密度はマウスの画面で決め、指の画面でだけ広げる——
 * 「業務用に詰める」と「押せる大きさ」を両立させる唯一の分岐。 */
@media (pointer: coarse) {
  :root {
    --ctl-h: 44px;
    --ctl-h-sm: 38px;
    --row-h: 48px;
  }
}

/* 明暗テーマの切り替えは持たない（旧実装も持っていない）。
 * レポート本文（スキルが作る HTML）が明るい地の前提で作られており、
 * Portal 側だけ暗くすると本文との段差が出るため。 */

/* d-check Portal — 共通レイアウトと基本部品（K-013 で確定）
 *
 * design/tokens.css を先に読み込むこと。実装時は 2 本を結合して 1 本で配信してよい。
 * クラスの接頭辞は d-（d-check）。
 *
 * この CSS が守る規則は 3 つ。破るときは design/conventions.md ごと直す。
 *   1. ホバーで見た目が変わるのは、押せるものだけ（読むだけの表・並びは反応しない）
 *   2. 区切りは罫線が担う。影を落とすのは、画面に重ねるものだけ
 *   3. 左メニューとヘッダの開閉は <details> で行う（JS を足す理由が出るまで今の形でよい）。
 *      モーダルの開閉だけは design/app.js が行う（2026-09-03 USER・conventions.md #7）
 */

/* ============================================================
 * 1. 土台
 * ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* 押せるものの既定。押せないものに cursor:pointer を付けない */
a { color: var(--pink-dark); }
a:hover { color: var(--pink); }
button, summary { cursor: pointer; font-family: inherit; font-size: inherit; }

/* ---- アイコン（2026-09-02 USER・K-165） ----
 * Material Symbols を字の合字（ligature）で出す: <span class="d-icon">home</span>。
 * **必ず aria-hidden を付ける**——読み上げに "home" と読まれるのを止める。意味は隣の字が持つ。
 * 書体が読めなかったときは合字の名前がそのまま出る（"home" と表示される）——
 * 本番は自分で配るので、読めないのは配り忘れたときだけ。 */
.d-icon {
  font-family: var(--font-icon);
  font-size: var(--icon-size);
  line-height: 1;
  flex: 0 0 auto;
  font-weight: normal; font-style: normal;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

/* 数字は桁を揃える（金額・件数・日付） */
.d-num { font-variant-numeric: tabular-nums; }
.d-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
 * 2. ページ外枠（左メニュー＋本文）
 * ============================================================ */

.d-app { display: flex; align-items: stretch; min-height: 100vh; position: relative; }
.d-side { width: var(--w-side); flex: 0 0 auto; background: var(--ink); }
.d-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d-body { flex: 1 1 auto; padding: var(--sp-6) 0 var(--sp-12); }

/* 本文の幅。左右の余白は幅の中に畳み込む（親に横 padding を持たせない） */
.d-wrap { width: min(calc(100% - var(--gutter) * 2), var(--w-page)); margin-inline: auto; }
.d-narrow { width: min(calc(100% - var(--gutter) * 2), var(--w-narrow)); margin-inline: auto; }
/* 広い本文の中で、読ませる塊だけ幅を絞るとき。
 * .d-wrap の中で .d-narrow を使うと左右の余白が二重に引かれて狭い画面で痩せるため、
 * 内側ではこちらを使う（余白は外側の .d-wrap が持っている） */
.d-measure { max-width: var(--w-narrow); }

/* ---- 左メニュー ---- */
.d-side-inner { padding: 0 var(--sp-2) var(--sp-4); }
.d-side-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  color: var(--white); font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em;
}
/* ロゴ。文字の輪郭は currentColor を継承する（暗い面では白）。
 * ✓ だけはピンクで固定してあり、地の色に関わらず同じ見え方になる */
.d-logo { display: block; height: 18px; width: auto; }
/* 運営の画面であることを示すバッジ。顧客の画面には出さない。
 * 暗い左メニューの上に置く版。明るい地の上（ログイン画面など）では .d-mark を使う */
.d-side-mark {
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16); color: var(--white);
  font-size: var(--t-xs); font-weight: 600;
}
.d-side-sect {
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  color: rgba(255, 255, 255, .45);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
}
.d-side-list { list-style: none; margin: 0; padding: 0; }
.d-side-list a {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .72);
  font-size: var(--t-sm); line-height: var(--lh-tight); text-decoration: none;
}
.d-side-list a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
/* 現在地。暗い地の上のピンクは「いまここ」、白い地の上のピンクは「次の一手」——
 * 地が違うので混ざらない */
.d-side-list a.is-on { background: var(--pink); color: var(--white); }
.d-side-list a.is-on:hover { background: var(--pink); }

/* 診断対象の行は「名称＋ドメイン」の 2 段。幅が狭いので 1 行に並べない。
 * ドメインを出す画面がまだ無いので、いま 2 段目が出るのは見本だけ
 * （app/src/views/customer.tsx は診断対象が URL を持たないという決めで 1 段目しか出さない）。
 *
 * 名称は運営が登録した任意の文字列で、ホスト名や英字だけの語がそのまま入る（K-143）。
 * 折らないと 1 つの塊のまま伸び、**768px 以上で幅の決まった左メニュー（--w-side）を突き抜けて
 * 本文に重なる**（72 字の英字の名称で右端が 490px。左メニューは 216px。実測）。
 * 768px 未満は .d-side-inner が overflow-y: auto を持ち、横も auto に計算されるので
 * ページは流れない——代わりに名称が左メニューの中で切れて読めなくなる。
 * `anywhere` を選ぶ理由はこの CSS の #3 と同じ——親（.d-side-list a）が flex なので、
 * `break-word` だと文字は折れても親が押し広げられたままになる */
.d-side-name {
  display: block;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.d-side-host {
  display: block; margin-top: 1px;
  color: rgba(255, 255, 255, .5); font-size: var(--t-xs);
  word-break: break-all;
}
.d-side-count {
  margin-left: auto; padding: 0 var(--sp-1);
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .12);
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}
.is-on .d-side-count { background: rgba(255, 255, 255, .26); }

/* 行けない項目は消さずに落とす（後から増えると場所を覚え直すことになる） */
.d-side-list a.is-off { color: rgba(255, 255, 255, .3); pointer-events: none; }

/* 左メニューの開閉。
 * 構造は <details class="d-side-toggle"><summary>名乗り</summary><div class="d-side-inner">…</div></details>。
 * 狭い画面 = 閉じた 1 行（押すと開く）。広い画面 = 常に開いた 248px の列。
 * 旧実装は 860px 以下で左メニューを本文の上に全幅で積んでいたため、どの画面も
 * 先頭に 700〜900px の暗い面が来ていた——v2 はここを 1 行に畳む。
 * クライアント JS は使わない（<details> だけで開閉する）。 */

/* summary はどちらの幅でも「名乗り（ロゴ）を置く行」。狭い画面ではそこが開閉も兼ねる */
.d-side-toggle > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--white); font-size: var(--t-sm); font-weight: 700;
  list-style: none;
}
.d-side-toggle > summary::-webkit-details-marker { display: none; }

/* 広い画面: 開閉させず、閉じていても中身を出す。
 * 2 通りの書き方を併記しているのは、閉じた <details> の中身の隠し方が
 * ブラウザによって違うため（新しい ::details-content と、従来の子要素の display）。 */
@media (min-width: 768px) {
  .d-side-toggle > summary { cursor: default; pointer-events: none; }
  .d-side-toggle > .d-side-inner { display: block; }
  .d-side-toggle::details-content { content-visibility: visible; block-size: auto; opacity: 1; }
}

@media (max-width: 767px) {
  .d-app { display: block; }
  .d-side { width: auto; position: sticky; top: 0; z-index: 10; }
  .d-side-toggle > summary { min-height: var(--ctl-h); padding: 0 var(--gutter); }
  /* 開いているかを字で示す（記号だけに頼らない） */
  .d-side-toggle > summary::after {
    content: "メニュー"; margin-left: auto;
    font-weight: 400; color: rgba(255, 255, 255, .65);
  }
  .d-side-toggle[open] > summary::after { content: "閉じる"; }
  .d-side-inner { padding: 0 var(--sp-2) var(--sp-4); max-height: 70vh; overflow-y: auto; }
  .d-side-brand { padding: var(--sp-2) 0; }  /* 畳んだ 1 行が名乗りを兼ねる */
  .d-body { padding: var(--sp-4) 0 var(--sp-10); }
}

/* ---- 画面の高さちょうどに収める形 ----
 * 取り込んだ HTML（レポート本文）を出す画面で使う。ページ自体はスクロールせず、
 * 本文の iframe の中だけが流れる。中身の高さを外に伝えるには JS が要り、
 * 高さの固定値も置けない（本文は 723px から 34,656px まで振れる）ため、
 * 「画面の高さに固定して中でスクロールさせる」を選んだ。
 * 使い方: <div class="d-app is-fit"> … <div class="d-body is-doc"> */
.d-app.is-fit { height: 100vh; min-height: 0; }
/* 携帯のブラウザは上下のバーの分だけ 100vh が実際より高い。使える高さが取れる端末では
 * そちらを使う（対応していない端末は上の 100vh のまま動く） */
@supports (height: 100dvh) { .d-app.is-fit { height: 100dvh; } }
.d-app.is-fit > .d-main { min-height: 0; }
.d-app.is-fit > .d-side { overflow-y: auto; }
.d-body.is-doc { display: flex; flex-direction: column; min-height: 0; padding: 0; }

@media (max-width: 767px) {
  /* 狭い画面では .d-app が display:block になるので、縦に積む形へ戻す */
  .d-app.is-fit { display: flex; flex-direction: column; }
  .d-app.is-fit > .d-side { flex: 0 0 auto; }
  .d-app.is-fit > .d-main { flex: 1 1 auto; }
}

/* ---- ログインなど、1 枚だけの画面 ----
 * 左メニューが無い画面で、中身を画面の中央（上下・左右とも）に置く。
 * 業務システムのログイン画面の定型。中身が画面より高いときは上に寄って全部読める。
 * 使い方: <div class="d-solo"><div class="d-narrow"> … </div></div> */
.d-solo {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-10) 0;
}
@supports (min-height: 100dvh) { .d-solo { min-height: 100dvh; } }

/* ---- ログインしていない人に見せる 1 枚（申込・パスワードの再設定） ----
 * **上からの空白を固定し、左右だけ中央にそろえる**（2026-09-02 USER・K-165）。
 * 上下中央（.d-solo）にすると、画面ごとに中身の高さが違うぶん、次の画面へ進むたびに
 * 中身の位置が上下に飛ぶ。歩数のある流れでは、上端がそろっているほうが読み手が迷わない。
 * 使い方: <div class="d-entry"> … </div>（.d-narrow で包まなくてよい。幅はこの部品が持つ） */
.d-entry {
  flex: 1 1 auto;
  padding: var(--sp-12) 0;
  display: flex; flex-direction: column; align-items: center;
}
.d-entry > * { width: min(calc(100% - var(--gutter) * 2), var(--w-narrow)); }
@media (max-width: 767px) {
  .d-entry { padding: var(--sp-6) 0 var(--sp-10); }
}

/* ---- 操作バー（本文の上に全幅で置く） ----
 * 罫線と地は画面いっぱい、中身だけ .d-wrap の幅に収める。
 * ページがスクロールしないので position:sticky は要らない（JS も要らない） */
.d-bar {
  flex: 0 0 auto;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
/* バーの中身。題は左（長ければ縮む）、操作は右 */
.d-bar-inner { align-items: flex-start; }        /* .d-wrap.d-row と併せて使う */
.d-bar-title { min-width: 0; }
.d-bar-title .d-h1 { margin: 0; }
.d-bar .d-head-actions { align-items: center; }

/* ---- 本文の上のヘッダ（左メニューの右側・2026-09-02 USER・K-164） ----
 * 左がメニューなのは変えず、右側の本文の上に 1 本置く。右上にユーザプロファイル。
 * .d-bar（レポートの操作バー）とは別の部品——あちらは 1 つの画面の中の操作、
 * こちらはどの画面にも同じ形で乗るヘッダ。 */
.d-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--h-top); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.d-top-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.d-top-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* 診断対象の切り替え。<select> 1 つで作り、選んだだけで切り替わる
   （実装は data-island で引き継ぐ）。送信ボタンは置かない——adr/0002 */
.d-top-pick {
  height: var(--ctl-h-sm); max-width: 15em;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: var(--t-sm); padding: 0 var(--sp-2);
}

/* ユーザプロファイル。名乗り・組織名・ログアウトを 1 か所に集める。
 * 狭い画面では組織名を落とす（名乗りは残す）。 */
/* ---- ヘッダの右に置く、押すと開くもの（2026-09-02 USER・K-165） ----
 * ヘッダに出すのは**アイコン 1 つずつ**。押すと中身が下に開く。
 * **開閉は <details> だけで行い、JS を使わない**（左メニューと同じ縛り）。
 * いまは 2 つ——通知（.d-icon notifications）とアバター（.d-icon account_circle）。
 * **同じ name を付けて、片方を開くともう片方が閉じるようにする**（<details name="…">）——
 * 付けないと 2 つとも開いて中身が重なる。name に対応していない古いブラウザでは
 * 2 つとも開けるが、重なるだけで押せなくなるものは無い。
 *
 * 名乗りをヘッダに出しっぱなしにするのをやめたので、長い名前が狭い画面で
 * ヘッダを押し広げることがなくなった。 */
.d-menu { position: relative; }
.d-menu > summary {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--ctl-h); height: var(--ctl-h);
  border-radius: 50%; color: var(--ink-64);
  list-style: none;
}
.d-menu > summary::-webkit-details-marker { display: none; }
.d-menu > summary:hover { background: var(--soft); color: var(--ink); }
.d-menu[open] > summary { background: var(--soft); color: var(--ink); }
.d-menu > summary .d-icon { font-size: 24px; }

/* 未読があることを示す赤い点。数は出さない——数えて安心させる場所ではなく、
 * 「見ていないものがある」だけを伝える */
.d-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--alert); border: 2px solid var(--white);
}

/* 開いた中身。ヘッダの右端に合わせて下に垂らす */
.d-pop {
  position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 30;
  min-width: 256px; max-width: min(92vw, 360px);
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  overflow: hidden;
}
/* 誰でログインしているか。押せない見出しの塊 */
.d-pop-who {
  display: block; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.d-user-name { display: block; font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.d-user-org { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--ink-48); overflow-wrap: anywhere; }
/* 行き先と操作。1 行 1 つ */
.d-pop-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2) var(--sp-4); min-height: var(--ctl-h);
  border: 0; background: none; color: var(--ink);
  font-size: var(--t-sm); text-align: left; text-decoration: none;
}
.d-pop-item:hover { background: var(--soft); color: var(--pink-dark); }
.d-pop form { margin: 0; }

/* 通知の 1 件。見出しと日時の 2 段で、押すとホームへ行く——
 * **お知らせだけの画面は作らない**（2026-09-02 USER）。ホームに情報を集める */
.d-pop-notice { display: block; align-items: stretch; line-height: var(--lh-tight); }
.d-pop-notice.is-unread { background: var(--pink-pale); }
.d-pop-notice .d-sub { display: block; margin-top: 2px; font-size: var(--t-xs); }
/* 中身が無いときと、末尾の行き先 */
.d-pop-foot { border-top: 1px solid var(--line-soft); }

@media (max-width: 767px) {
  .d-top { height: auto; min-height: var(--h-top); padding: var(--sp-2) var(--gutter); }
  .d-top-pick { max-width: 11em; }
}

/* ---- 顧客のページの下端に置くフッタ（2026-09-02 USER） ----
 * 中身は問い合わせ先と法定ページへの行き先、そして著作権表示。
 * **問い合わせ先をページの中のパネルにしない**——どのページにも同じものが要るので、
 * 本文の話題として 1 枚置くと、画面ごとに「その画面と関係の無いパネル」が 1 枚増える。
 *
 * 明るさの 3 段（ページの地 → パネルの面 → 中身の白）には数えない。
 * ヘッダ（.d-top）と同じで、これは本文ではなく本文を囲む部分——だから同じ白い面にして、
 * 上下で 1 組に見せる。中身の幅は本文と同じ .d-wrap にそろえる。
 *
 * 置き場所は .d-main の中、.d-body の次。.d-body が flex: 1 1 auto なので、
 * 本文が短いページでも画面の下端に着く。
 * 使い方:
 *   <footer class="d-foot"><div class="d-wrap d-foot-inner">
 *     <ul class="d-foot-links">…</ul><p class="d-foot-copy">© 2026 D-Check</p>
 *   </div></footer> */
.d-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--white);
  font-size: var(--t-sm);
}
.d-foot-inner {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) 0;
}
.d-foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; }
/* 行き先は本文のリンクより退かせる——読ませたいのは本文で、ここは探したときに見つかればよい */
.d-foot-links a { color: var(--ink-64); text-decoration: none; }
.d-foot-links a:hover { color: var(--pink-dark); text-decoration: underline; }
.d-foot-copy { margin: 0; margin-left: auto; color: var(--ink-48); font-size: var(--t-xs); }
/* 狭い画面では行き先が 2 行になるので、著作権表示を右端に押し出さず次の行に置く */
@media (max-width: 767px) { .d-foot-copy { margin-left: 0; } }

/* ---- 取り込んだ HTML の iframe ----
 * 枠線も地の色も持たない。本文（診断スキルが作る HTML）が自前で地の色と影を持つため、
 * 外側が同じものを持つと二重に見える */
.d-doc {
  flex: 1 1 auto; min-height: 0;
  display: block; width: 100%; height: auto;
  border: 0;
}

/* 取り込んだ HTML を出す iframe（.d-doc）を、ページ全体ではなくパネルの中に置くときの本体。
 * .d-doc は「残りの高さを全部使う」部品なので、**置き場所が高さを持っていないと
 * iframe の既定の 150px に潰れる**（1440px で実測・K-1304）。高さはここが決める。
 * 320px は見本が置いた高さ（design/screens/ops-issues.html の画面 5）——
 * 入るのは指摘 1 件ぶんの文で、レポート本文のように何十枚も続かない。
 * 失効条件: ここに入る中身がレポート本文と同じ長さになったら、
 * ページ全体を使う組み方（.d-app.is-fit + .d-body.is-doc）へ移す。
 * 余白を持たないのは .is-flush と同じ理由で、中身が自前で地の色と余白を持つため */
.d-panel-body.is-doc {
  display: flex; flex-direction: column;
  height: 320px;
  padding: 0;
}

/* ============================================================
 * 3. 見出しと文章
 * ============================================================ */

.d-h1 { margin: 0 0 var(--sp-4); font-size: var(--t-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; }
.d-h2 { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--t-h2); font-weight: 700; line-height: var(--lh-tight); }
.d-h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-tight); }
.d-p { margin: 0 0 var(--sp-3); }
.d-sub { color: var(--ink-48); font-size: var(--t-sm); }

/* 画面の頭。題と、その画面で押せる主な操作を横に並べる */
.d-head {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.d-head .d-h1 { margin: 0; }
.d-head-actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

/* ---- 読ませるものは、切れ目の無い長い文字列でも折り返す（K-126） ----
 * 既定の折り返しは空白と一部の記号でしか切れない。ブラウザは URL のパスの `/` では折らないので、
 * `https://portal.example.co.jp/company/address/headquarters-information-page` は 1 つの塊のまま
 * 画面の幅を突き抜け、ページごと横に流れる（design/conventions.md #3
 * 「ページ全体を横スクロールさせない」）。同じことがメールアドレスと英字だけの社名でも起きる。
 * 法定 3 ページとランディングは本文を design/copy.md から受け取るので、実際の文面が
 * 入った日に出る——いま出ていないのは、特定商取引法の値がまだ「—」だからにすぎない。
 *
 * `anywhere` を選んだのは、`break-word` が最小幅の計算に入らないため。
 * .d-head と .d-list の項目は flex で、その中の要素は最小幅ぶんの場所を取り続けるので、
 * `break-word` だと文字は折れても親が押し広げられたままになる。
 * 折り返しは継承するので、ここに挙げた要素の中に置かれたもの（.d-list の中のリンクなど）にも効く。
 *
 * 表は挙げない——列は既定で折り返さず、入らないときは .d-scroll-x で横に流す（#4）。 */
.d-h1, .d-h2, .d-h3, .d-p, .d-sub,
.d-list > li, .d-fields dd,
.d-note, .d-alert, .d-empty, .d-panel-body {
  /* `anywhere` を解釈しないブラウザ（Safari 15.3 以前）向け。文字は折れるが、
   * 上に書いた最小幅までは面倒を見ない——flex の中の要素は親を押し広げたままになる */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 桁をそろえる数字は、上の折り返しを継承しない（#1「数字は桁を揃える」）。
 * 金額・件数・日付は不可分の塊で、`2026-09-01` が `2` と `026-09-01` に割れると読めない。
 * 折れる位置は前置きの文字数で決まるので、社名を 1 件登録し直すだけで見え方が変わる */
.d-num, .d-mono { overflow-wrap: normal; }

/* 切れ目の無い機械の値（SSH 公開鍵・接続元 IP アドレス・クラウドの識別子）を、表の列の中で
 * 折り返す（2026-09-03）。公開鍵は空白の無い 68 字の塊で、折り返さないと列が入らず
 * ページごと横に流れる（#1「ページ全体を横スクロールさせない」）。
 * **.d-mono は使えない**——1 つ上の行のとおり、桁をそろえる数字のためにわざと折り返さない。
 * 表の外（.d-fields の dd など）は上の折り返しが効くので、この部品は要らない
 * （design/screens/targets.html は公開鍵を dd に素で置いている）。
 * **失効条件**: 表の列が既定で折り返すようになったら（#4 の決めが変わったら）要らなくなる */
.d-code { font-family: var(--mono); font-size: var(--t-xs); overflow-wrap: anywhere; }

/* ============================================================
 * 4. 表と並び
 *
 * ここが v2 で最も直したかったところ。旧実装は「押せる行」の型しか無く、
 * 読むだけの一覧にもホバーで色が変わる見た目が付いていて、
 * 押せそうに見えるのに押せない、という誤解を与えていた。
 * v2 は「読むだけ（.d-table）」と「行が押せる（.d-table.is-nav）」を分ける。
 * ============================================================ */

/* ---- 読むだけの表。ホバーで何も変わらない ---- */
.d-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); line-height: var(--lh-tight);
}
.d-table th, .d-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: top;
  /* 表は折り返さないのが既定。狭い画面で列が縦に潰れるより、横に流したほうが読める。
   * 折り返してよい列にだけ .is-wrap を付ける */
  white-space: nowrap;
}
.d-table .is-wrap { white-space: normal; min-width: 12em; }
.d-table thead th {
  padding-top: var(--sp-1); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink-64); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.d-table tbody tr:last-child td { border-bottom: 0; }
.d-table td { height: var(--row-h); }
/* 数値の列。右寄せと桁揃えは列ごとに指定する */
.d-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 付帯情報（日時・識別子など）は退かせる */
.d-table .is-meta { color: var(--ink-64); }

/* 段落（パネル）——見出しと、その中に入るコンテンツのまとまり。
 *
 * **明るさは 3 段**（2026-09-02 USER・K-164）:
 *   1 段目 ページの地（--bg）——いちばん暗い
 *   2 段目 段落の面（--panel）——このパネル自身。見出しはこの面の上に直接置く
 *   3 段目 コンテンツのブロック（--panel-2 の白）——段落の中に入る 1 つ 1 つの中身
 *
 * 段落は中身を padding で包むので、**3 段が同時に見える**——外に地、その内側に段落の面、
 * さらに内側に白いブロック。中身が 1 つでも複数でも、それぞれを白いブロックにする
 * （複数のときは間が段落の面の色で空くので、罫線で切る必要が無い）。
 * 縦に全部並べるのをやめ、段落に分けて置くのが既定の組み方。 */
.d-panel {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); box-shadow: var(--sh-panel);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* 段落の見出し。2 段目の面の上に直接置く（白いブロックにしない）——
 * 見出しが面と同じ色でいることで、下の白いブロックが「その見出しの中身」に見える */
/* 見出しの行は折り返す（2026-09-02）。題のほかに操作や絞り込みを置くようになったので、
 * 折り返さないと狭い段落で題が 1 文字ずつ縦に潰れる
 * （3 列に並んだ段落の中で「members.example.co.jp」が 2 行に割れた。実測） */
.d-panel-head {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-1) var(--sp-2) 0;
  font-size: var(--t-sm); font-weight: 700;
}
.d-panel-head .d-sub { font-weight: 400; }
/* 節の見出しの右に置く操作のまとまり（絞り込みの欄がこれ）。
 * .d-panel-actions は素の入れ物で、選んだ瞬間に絞る（実装は data-island で引き継ぐ）。
 * <form> が残るのは字を打って絞る欄だけで、Enter で送る——運営の顧客の一覧がこれ
 * （app/src/views/ops-admin.tsx の companyFilter・design/screens/ops-organizations.html）。
 * どちらも〔絞り込む〕の送信ボタンを持たない（adr/0002-モダンブラウザを前提にする.md）。
 * 実装した絞り込みは、どちらも結果が URL になるので、共有と再読み込みの両方が効く。
 * 段落の直下の <form> は白いブロックになるが、こちらは見出しの中なので面の上に乗る */
.d-panel-head > form,
.d-panel-head > .d-panel-actions {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
}
/* 見出しの行に置く操作は右端へ寄せる（節の題は左、操作は右——.d-head と同じ並び） */
.d-panel-head > .d-btn:first-of-type { margin-left: auto; }
/* 1 画面の中で先に読ませたい段落の見出し。ほかの段落より 1 段大きくする
 * （顧客のホームで、いま見ている診断対象の段落だけに使う・2026-09-02 USER） */
.d-panel-head.is-lead { font-size: var(--t-h3); }

/* 3 段目——段落の中のコンテンツのブロック。白く、角を丸め、細い罫線で締める */
.d-panel > .d-panel-body,
.d-panel > .d-scroll-x,
.d-panel > .d-table,
.d-panel > .d-list,
.d-panel > .d-empty,
.d-panel > form,
.d-panel > .d-fields {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* 横に流す .d-scroll-x は、上の overflow: hidden を打ち消す（打ち消さないと列が入りきらないとき
 * 表がページごと横に広がる。390px で実測して見つけた） */
.d-panel > .d-scroll-x { overflow-x: auto; overflow-y: hidden; }
/* 段落は縦並びの flex なので、中身が縮めるように最小幅を外す */
.d-panel > * { min-width: 0; }

.d-panel > .d-table thead th:first-child,
.d-panel > .d-table tbody td:first-child,
.d-panel > .d-scroll-x > .d-table thead th:first-child,
.d-panel > .d-scroll-x > .d-table tbody td:first-child { padding-left: var(--sp-4); }
.d-panel > .d-table thead th:last-child,
.d-panel > .d-table tbody td:last-child,
.d-panel > .d-scroll-x > .d-table thead th:last-child,
.d-panel > .d-scroll-x > .d-table tbody td:last-child { padding-right: var(--sp-4); }

/* 文やボタンを入れる既定のブロック */
.d-panel-body { padding: var(--sp-4); }
.d-panel-body > :first-child { margin-top: 0; }
.d-panel-body > :last-child { margin-bottom: 0; }
.d-panel > form { padding: var(--sp-4); }
.d-panel > form > :last-child { margin-bottom: 0; }
.d-panel > .d-fields { padding: 0 var(--sp-4); }

/* ---- パネルを並べる ----
 * 1 画面に複数のパネルを置くときの外側。縦にも横にも同じ間隔で並べる。
 * 横に何列置けるかは幅が決める（列数を画面ごとに決め打ちしない）。
 * .is-half は「広い画面では 2 列」、既定は「入るだけ並べる」。 */
.d-grid {
  display: grid; gap: var(--sp-4); grid-template-columns: 1fr;
  /* 高さは中身ぶんだけ取る。列で揃えると、中身の少ないパネルに空白が残る */
  align-items: start;
}
/* 格子の升は既定では中身より狭くならない。外さないと、横に流すはずの表が
 * 升ごとページを押し広げる（390px で実測して見つけた） */
.d-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .d-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .d-grid.is-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 幅いっぱいを占めるパネル（表のように横に広いもの） */
  .d-grid > .is-wide { grid-column: 1 / -1; }
}

/* 数字を 1 つ大きく出すとき（件数・金額）。
 * **構造の何段目にいても地は白**（2026-09-02 USER・K-164）——数字を読ませるのが役目なので、
 * 面の色を段に合わせて変えない。ほかの中身のブロックと同じ枠線と角丸を持つ */
.d-stat {
  padding: var(--sp-4);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.d-stat-num {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.d-stat-label { display: block; margin-top: var(--sp-1); font-size: var(--t-xs); color: var(--ink-48); }

/* ---- 行が押せる表。ここだけホバーで反応する ----
 * 使い方: <table class="d-table is-nav"> の各行の主なセルに <a> を置く。
 * 行そのものをリンクにはできないので、a を td いっぱいに広げる */
.d-table.is-nav tbody tr:hover { background: var(--soft); }
/* 押せるセルは色で示す——マウスを持たない端末では、ホバーが唯一の手がかりだと
 * 押せることが伝わらない。行全体のホバーは補助であって、これが主 */
.d-table.is-nav tbody td a {
  display: block;
  margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none; color: var(--pink-dark);
}
.d-table.is-nav tbody td a:hover { color: var(--pink); text-decoration: underline; }

/* ---- 行ごとの操作を並べるセル（2026-09-02 USER・顧客のレポートの一覧） ----
 * 1 行に対してできることが 2 つ以上あるとき、その行のセルにボタンを横に並べる。
 * 使う表は `.d-table`（`.is-nav` を付けない）——行そのものは押せず、押せるのはボタンだけ。
 * `.is-nav` と併せると、あちらが `td` の中の `a` を `display: block` にしてセルいっぱいに
 * 広げるので、ボタンが縦に積まれて 1 行が 3 段になる。
 *
 * **折り返さない**（`flex-wrap` を既定の `nowrap` のままにする）。折ると 10 行の一覧で
 * 縦が 3 倍になり、日付と診断対象の対応が読めなくなる。幅が足りないときは、
 * 外側の `.d-scroll-x` が表ごと横に流す（表は折り返さないのが既定・conventions.md #3）。
 * 使い方: <td><div class="d-cell-actions"><a class="d-btn is-sm">…</a>…</div></td> */
.d-cell-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ---- 読むだけの並び（表にするほど列が無いとき）。ホバー反応なし ---- */
.d-list { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.d-list > li {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--row-h); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: var(--lh-tight);
}
.d-list > li:last-child { border-bottom: 0; }

/* ---- 項目が押せる並び。ここだけホバーで反応する ---- */
.d-list.is-nav > li { padding: 0; }
.d-list.is-nav > li > a {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto;
  min-height: var(--row-h); padding: var(--sp-2) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm); text-decoration: none; color: inherit;
}
.d-list.is-nav > li > a:hover { background: var(--soft); color: var(--pink-dark); }

/* ---- 名前と値の並び（1 件の詳細） ---- */
.d-fields { margin: 0; font-size: var(--t-sm); }
.d-fields > div {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft);
}
.d-fields > div:last-child { border-bottom: 0; }
.d-fields dt { flex: 0 0 auto; width: 8.5em; color: var(--ink-48); }
.d-fields dd { flex: 1 1 auto; margin: 0; min-width: 0; }

/* 列の多い表は、この要素で包んで横に流す。ページ全体を横スクロールさせない。
 * 使い方: <div class="d-scroll-x"><table class="d-table">…</table></div>
 *
 * **この要素は幅を問い合わせられる**（K-1003）——中の部品が
 * `@container table-frame (…)` で、画面の幅ではなく**この要素の内側の幅**を見られる。
 * 問い合わせているのは下の `.d-table.is-stack` 1 つだけ。
 * **切り替えは 768px の 1 本という決めは動かしていない**（design/conventions.md #3）——
 * 画面の幅で切り替えるものは、今までどおり `@media` で書く。
 *
 * **幅を問い合わせられる要素を .d-panel ではなくここに置いた理由**: `container-type` は
 * その要素を position: fixed の子の基準にするので、段落に置くと**段落の中に置いた
 * モーダル（`.d-modal-overlay`）が画面全体ではなく段落を覆う**形になる。
 * この要素が包むのは表だけなので、その心配が無い。 */
.d-scroll-x {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  container-type: inline-size; container-name: table-frame;
}

@media (max-width: 767px) {
  /* 狭い画面では名前を上、値を下に積む（横に並べると値が 1 文字ずつ折れる） */
  .d-fields > div { display: block; }
  .d-fields dt { width: auto; font-size: var(--t-xs); }
}

/* ---- .d-scroll-x に収まらないときは 1 件ずつの並びに変える表（2026-09-02 USER・K-1003） ----
 * 行を横に流すのをやめて 1 件ぶんを縦に積む。セルは書いた順に上から積まれるので、
 * `<td>` の並びがそのまま読む順になる（診断日 → 診断対象 → 行の操作のボタン）。
 *
 * **付けるのは、行にボタンが並ぶ表だけ。** 表は折り返さず横に流すのが既定で
 * （design/conventions.md #3）、読むだけの表はそのままでよい。横に流す形は読むぶんには足りるが、
 * **行の右端にボタンがあると押せない**——390px では表の幅が 662px になり、
 * .d-scroll-x の幅は 330px で、3 つ目のボタンがその外に出る（実測）。
 *
 * **1 件ぶんを囲まない。** 区切りは罫線 1 本が持つ（.d-list と同じ）。
 * .d-item を使わないのは 2 つの理由——あれは 1 件ずつ足したり消したりできる入力の 1 件ぶんで、
 * ここは読むだけの一覧である。そして `<tr>` には付けられない——
 * border-collapse: collapse の表では、その罫線が幅の広いときでも行の周りに出てしまう。
 *
 * **1 件ずつの並びでは表の意味づけ（列と行）が読み上げから外れる。** 見出しの行を消し、
 * セルを縦に積むので、列の名前とセルが結び付かなくなる。この表の 3 列は日付・診断対象の名前・
 * ボタンで、**どれも字を読めば何かが分かる**ので外してよい。値だけでは意味が決まらない列
 * （数量・金額が並ぶ表）には、この修飾クラスを付けない。
 *
 * **切り替えるのは画面の幅ではなく、表が入る .d-scroll-x の内側の幅**（K-1003）。
 * 画面の幅（`@media`）で切り替えていたあいだ、画面 768〜960px では表がはみ出したまま
 * 止まっていた——**768px 以上では左メニューが横に出るので、画面が広がった瞬間に .d-scroll-x は狭くなる**
 * （実測: 画面 767px で .d-scroll-x 707px・画面 768px で 484px）。表が要るのは 662px なので、
 * 画面 768px で 178px・800px で 146px・900px で 46px はみ出していた
 * （design/screens/customer-home.html・2026-09-06 実測）。
 *
 * **切り替えの数字 680px の根拠**: この表が縮められる限界（min-content）が 662px で、
 * その上に 18px の余りを載せた値。**.d-scroll-x がこれより狭ければ、表の形では入らない**。
 * *失効条件*: 列を足す・ボタンの字を長くするなど、662px が動く変更をしたら測り直す。
 *
 * 直した後の実測（同じ見本・9 つの幅で、はみ出しはどれも 0px）:
 *   画面 390 / 600 / 700 / 740px → .d-scroll-x 330 / 540 / 640 / 680px・1 件ずつの並び
 *   画面 741 / 767px            → .d-scroll-x 681 / 707px・表のまま（左メニューが畳まれている）
 *   画面 768 / 800 / 900 / 960px → .d-scroll-x 484 / 516 / 616 / 676px・1 件ずつの並び
 *   画面 1000 / 1024 / 1200 / 1440px → .d-scroll-x 716 / 740 / 916 / 1156px・表のまま
 *
 * **この修飾クラスを付ける表は、必ず `.d-scroll-x` で包む**（幅を問い合わせられる要素がそこにある）。
 * 包まずに置くと問い合わせる要素が無く、**1 件ずつの並びに 1 度も変わらない**。
 *
 * 使い方: <div class="d-scroll-x"><table class="d-table is-stack">…</table></div>。
 * .d-scroll-x が広いときの見え方は .d-table のまま変わらない */
@container table-frame (max-width: 680px) {
  .d-table.is-stack,
  .d-table.is-stack tbody,
  .d-table.is-stack tbody tr,
  .d-table.is-stack tbody td { display: block; }
  .d-table.is-stack thead { display: none; }
  /* 余白と区切りの罫線は行が持つ（セルではなく） */
  .d-table.is-stack tbody tr {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
  }
  .d-table.is-stack tbody tr:last-child { border-bottom: 0; }
  .d-table.is-stack tbody td {
    height: auto; padding: 0; border-bottom: 0; white-space: normal;
  }
  /* パネルの中の表は左右の端のセルに余白を足しているが（上の .d-panel > … の規則）、
   * 1 件ずつの並びでは左右の余白は行が持つ。**打ち消しに同じ強さの選択子が要る** */
  .d-panel > .d-table.is-stack tbody td:first-child,
  .d-panel > .d-table.is-stack tbody td:last-child,
  .d-panel > .d-scroll-x > .d-table.is-stack tbody td:first-child,
  .d-panel > .d-scroll-x > .d-table.is-stack tbody td:last-child {
    padding-left: 0; padding-right: 0;
  }
  /* 2 つ目から下のセルは、上のセルとの間を 1 段空ける */
  .d-table.is-stack tbody td + td { margin-top: var(--sp-1); }
  /* ボタンの並びは日付と診断対象の下に置き、**ここだけは折り返す**——
   * 横に流す形がもう無いので、入りきらないボタンは次の行へ送る */
  .d-table.is-stack .d-cell-actions { flex-wrap: wrap; margin-top: var(--sp-2); }
}

/* ---- 同じ形の入力が何件も並ぶときの、1 件ぶん（2026-09-02 USER） ----
 * 「1 件ずつ足したり消したりできる」並びに使う（診断対象の付加情報のサーバ・リポジトリなど）。
 * **地の色は変えない。** ページの地・パネルの下地・パネルの中身の 3 段で描き、
 * .d-panel-body を入れ子にして 4 段目を作らない（design/conventions.md #2）。
 * 区切りは罫線と角丸だけが持つ。 */
.d-item {
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
}
.d-item > :last-child { margin-bottom: 0; }
/* .d-item の内側の 1 行目は、.d-item の余白と二重に空けない */
.d-item .d-fields > div:first-child { padding-top: 0; }

/* ---- 絵が入るまで、場所と縦横比だけを取っておく面（2026-09-02 USER） ----
 * 絵が決まったら <img> に差し替える。中の文には、どの絵が入るかを書く。
 * 16:9 は、案内に入れるイメージカットの比率。ほかの比率が要る日が来たら修飾クラスで足す */
.d-figure {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; margin-bottom: var(--sp-3);
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--soft); color: var(--ink-48); font-size: var(--t-xs);
}

/* 中身が無いときの案内。空欄のまま返さない */
.d-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--ink-48); font-size: var(--t-sm); }

/* ---- ページ送り（2026-09-02 USER） ----
 * 長い一覧を切って出すときに、表の下に置く。**送りは素のリンク**（`?page=2`）で、
 * サーバが次のページを描き直す。画面の JS は 2026-09-02 に解禁されたが
 * （design/conventions.md #8）、**リンクで用が足りているものは書き直さない**——
 * 押した先が URL になるので、そのページを共有でき、戻るボタンも効く。
 *
 * **ページ番号を並べない。** 番号の行は件数が増えるほど長くなり、390px で必ず折り返す。
 * 代わりに「全体の件数と、いま出している範囲」を字で書く——いま何件目を読んでいるかは
 * 番号よりこちらのほうが速く分かり、幅が件数に左右されない。
 * 端（1 ページ目・最後のページ）では、押せないほうのボタンに .is-off を付けて残す——
 * 消すと、もう一方のボタンの位置がページごとに動く。
 *
 * 置き場所は段落（.d-panel）の直下、表の次。白いブロックにはしない（.d-panel-head と同じで、
 * これは中身ではなく中身に添える操作）。
 * 使い方:
 *   <nav class="d-pager" aria-label="ページ送り">
 *     <p class="d-pager-count">57 件中 <span class="d-num">21–40</span> 件</p>
 *     <div class="d-pager-nav">
 *       <a class="d-btn is-sm" href="?page=1" rel="prev">前へ</a>
 *       <a class="d-btn is-sm" href="?page=3" rel="next">次へ</a>
 *     </div>
 *   </nav> */
.d-pager {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  padding: 0 var(--sp-2);
  font-size: var(--t-sm);
}
.d-pager-count { margin: 0; color: var(--ink-48); font-size: var(--t-xs); }
.d-pager-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
/* 狭い画面では件数が 1 行を占めるので、ボタンを右端に押し出さず次の行の左端に置く */
@media (max-width: 767px) { .d-pager-nav { margin-left: 0; } }

/* ============================================================
 * 5. ボタンと入力
 * ============================================================ */

.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctl-h); padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  font-size: var(--t-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none;
}
.d-btn:hover { background: var(--soft); color: var(--ink); }
.d-btn:disabled, .d-btn.is-off { opacity: .5; pointer-events: none; }

/* 主操作。1 つの画面に 1 つだけ */
.d-btn.is-primary { background: var(--pink); border-color: var(--pink); color: var(--white); }
.d-btn.is-primary:hover { background: var(--pink-dark); border-color: var(--pink-dark); color: var(--white); }

/* 取り消し・削除など、戻せない操作 */
.d-btn.is-quiet { border-color: transparent; background: transparent; color: var(--ink-48); }
.d-btn.is-quiet:hover { background: var(--soft); color: var(--ink); }

/* 表の中に置く小さいボタン */
.d-btn.is-sm { height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--t-xs); }

/* 横幅いっぱいのボタン。狭い画面で主操作を押しやすくするときに使う */
.d-btn.is-block { display: flex; width: 100%; }

/* 字面に長さの決まらない語が入るボタン（K-143）。既定の .d-btn は 1 行 32px で固定し、
 * 字面を折らない——押せるものの高さをそろえるため。ここだけ外すのは、運営が登録した会社名を
 * ボタンの字面に載せる場面があるため（app/src/views/ops-admin.tsx のお買い上げの記録）。
 *
 * 2 つの宣言が別の向きの溢れを受け持つ。片方だけでは足りない:
 *   white-space: normal → 横。折らないとボタンが横に伸び、ページごと横に流れる
 *                         （24 字の会社名・390px で本文が 571px になる。実測）
 *   height: auto        → 縦。折れた 2 行目がボタンの下辺からはみ出す
 * 指で操作する端末の 44px は min-height が引き継ぐ（design/conventions.md #1）。
 * 英字だけの社名は空白で折れないので `anywhere` も要る（理由はこの CSS の #3 と同じ）。
 *
 * 名前を .is-wrap にしないのは、表の列の .is-wrap（#4）が min-width: 12em を付けるため——
 * 表のセルに置いたボタンが 12em の下限を持ってしまい、同じクラス名が 2 つの規則を指す */
.d-btn.is-multiline {
  height: auto; min-height: var(--ctl-h);
  padding-block: var(--sp-2);
  white-space: normal; line-height: var(--lh-tight); text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.d-field { display: block; margin-bottom: var(--sp-4); }
.d-label { display: block; margin-bottom: var(--sp-1); font-size: var(--t-sm); font-weight: 600; }
.d-input, .d-select, .d-textarea {
  display: block; width: 100%;
  height: var(--ctl-h); padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: var(--t-body);
}
.d-textarea { height: auto; min-height: calc(var(--ctl-h) * 3); padding: var(--sp-2) var(--sp-3); line-height: var(--lh); }
.d-input:focus, .d-select:focus, .d-textarea:focus { outline: 2px solid var(--pink); outline-offset: -1px; border-color: var(--pink); }
.d-hint { margin-top: var(--sp-1); color: var(--ink-48); font-size: var(--t-xs); }

/* 行の中に置く小さい選択肢（節の見出しの絞り込みなど）。既定の .d-select は
 * 幅いっぱい・高さ 32px の「入力欄」だが、見出しの行では隣のボタンと高さをそろえたい */
.d-select.is-sm {
  display: inline-block; width: auto; max-width: 14em;
  height: var(--ctl-h-sm); padding: 0 var(--sp-2);
  font-size: var(--t-sm);
}

/* 見出しの行に置く小さい入力欄（2026-09-03）。一覧を字で絞るときに使う——
 * 選ぶ対象が数十件あって <select> では選べない一覧では、絞り込みが入力欄になる。
 * 高さと字の大きさは .d-select.is-sm と同じにそろえる */
.d-input.is-sm {
  display: inline-block; width: auto; max-width: 16em;
  height: var(--ctl-h-sm); padding: 0 var(--sp-2);
  font-size: var(--t-sm);
}

/* 確認コードの入力欄（運営の 2 要素認証・K-1157）。
 * **6 桁を 1 つずつ拾って読む欄**なので、本文より大きくし、字間を空け、桁をそろえる
 * ——メールに届いた数字と目で突き合わせる操作なので、詰まっていると読み違える。
 * 名前は見本 design/screens/ops-account.html の「部品の追加」が提案したものをそのまま採った。
 * text-indent は letter-spacing と同じ値——字間は最後の字の後ろにも入るので、
 * これが無いと中身が左に寄って見える。 */
.d-input.is-code {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .4em; text-indent: .4em;
  font-variant-numeric: tabular-nums;
}

/* 選択肢のチェック（同意など。K-165 で追加）。
 * ラベル全体を押せる範囲にする——四角だけを狙わせない。
 * 中のリンク（規約など）は押しても選択が切り替わらないよう、別の要素として扱う。
 *
 * **チェックボックスとラジオの両方に効かせる**（2026-09-03 USER）——
 * 型を書いて絞ると、同じ形の選択肢がラジオになった画面（プランを選ぶ）で
 * 大きさと色だけが外れる。この規則が当たるのは .d-check の直下の input だけなので、
 * 型で絞らなくても関係の無い入力欄には掛からない */
.d-check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--t-sm); cursor: pointer; }
.d-check > input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--pink); }
.d-check > span { min-width: 0; }
@media (pointer: coarse) {
  .d-check > input { width: 20px; height: 20px; }
}

/* 選択肢 1 つを面にする（2026-09-03 USER）。
 * 選択肢が金額を伴うとき（プランを選ぶ画面）に使う。枠線と余白を持ち、押せる範囲が行全体になる。
 *
 * **見た目は .d-item と同じだが、別に置く。** .d-item は読むだけ・入力の 1 件ぶんで、
 * 押せないのでホバーで変わってはいけない（design/conventions.md #1）。こちらは押せる。
 * .d-item にホバーを足して兼ねると、押せない .d-item まで反応するようになる。
 *
 * 中の <span> を横に並べるのは、名前と金額を同じ行に置くため。
 * 390px では金額が次の行へ折り返る。 */
.d-check.is-boxed {
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
}
.d-check.is-boxed:hover { background: var(--soft); }
.d-check.is-boxed > span {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline;
}

/* ---- 入力の誤りは、その欄のすぐ下に赤字で出す ----
 * 使い方: 入力欄に .is-error と aria-invalid="true" を付け、
 * 直後に <span class="d-error"> を置いて aria-describedby で結ぶ。
 * 画面の上にまとめて出す形は採らない——どの欄のことか探させない。
 * 色だけで伝えないため、枠線も変え、文言は「何が違うか＋どう直すか」を書く */
.d-input.is-error, .d-select.is-error, .d-textarea.is-error { border-color: var(--alert); }
.d-input.is-error:focus, .d-select.is-error:focus, .d-textarea.is-error:focus {
  outline-color: var(--alert); border-color: var(--alert);
}
.d-error {
  display: block; margin-top: var(--sp-1);
  color: var(--alert); font-size: var(--t-xs); font-weight: 600; line-height: var(--lh-tight);
}
/* 誤りのある欄では、見出しの語も同じ赤にして目で追えるようにする */
.d-field.is-error .d-label { color: var(--alert); }

/* ============================================================
 * 6. 状態バッジ・説明の面
 * ============================================================ */

/* 状態バッジ。画面に出す語は必ず対訳表を通す（内部の値をそのまま出さない——
 * design/conventions.md の翻訳規約） */
.d-tag {
  display: inline-flex; align-items: center;
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--soft); color: var(--ink-64);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.d-tag.is-live { border-color: var(--pink); background: var(--pink-pale); color: var(--pink-dark); }
.d-tag.is-alert { border-color: var(--alert); background: var(--alert-pale); color: var(--alert); }

/* 「これは運営の画面だ」と名乗るバッジ（明るい地の上）。状態バッジ（.d-tag）とは別物——
 * 状態は変わるが、これは画面の素性で変わらない */
.d-mark {
  display: inline-flex; align-items: center;
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  background: var(--ink); color: var(--white);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}

/* ---- 診断の進み具合（2026-09-02 USER） ----
 * DOMAIN.md #2-4 の 4 つ（受付・調査・まとめ・完成）を横に並べ、済んだところまでを塗る。
 * 顧客の画面（顧客のホーム・診断対象 1 件）で、いまどこまで進んだかを 1 行で出す。
 *
 * **色だけで伝えない**（design/conventions.md #6）——いまの段階は太字にし、
 * 〔いまここ〕の字を下に添え、aria-current="step" を付ける。
 * 面の色は変えないので、明るさ 3 段（同 #2）はそのまま。
 * 使い方:
 *   <ol class="d-steps">
 *     <li class="is-done">受付</li>
 *     <li class="is-now" aria-current="step">調査<span class="d-steps-now">いまここ</span></li>
 *     <li>まとめ</li>
 *     <li>完成</li>
 *   </ol> */
.d-steps { display: flex; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.d-steps > li {
  flex: 1 1 0; min-width: 0;
  font-size: var(--t-xs); line-height: var(--lh-tight); color: var(--ink-30);
}
.d-steps > li::before {
  content: ""; display: block; height: 4px; margin-bottom: var(--sp-1);
  border-radius: 2px; background: var(--line);
}
.d-steps > li.is-done { color: var(--ink-64); }
.d-steps > li.is-done::before { background: var(--pink-dark); }
.d-steps > li.is-now { color: var(--pink-dark); font-weight: 700; }
.d-steps > li.is-now::before { background: var(--pink); }
.d-steps-now { display: block; margin-top: 1px; font-weight: 400; color: var(--ink-48); }

/* ---- 送信中の進み具合（2026-09-03） ----
 * 終わるまで運営を待たせる操作（レポートのアップロード）の途中経過を出す。
 * **バーだけにしない**——長さだけでは止まっているのか進んでいるのかが読めないので、
 * 割合と大きさを字でも書く（`.d-progress-text`）。色の意味は主操作と同じピンク 1 色で、
 * うまくいかなかったことは `.d-alert` が言う（design/conventions.md #6）。
 *
 * 値を動かすのは design/app.js。**JS が動かない環境では出さない**——
 * 進まないバーが残るくらいなら、はじめから無いほうがよい（既定は hidden で、
 * 送信を横取りできたときだけ JS が外す）。
 * 使い方:
 *   <div class="d-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"
 *        aria-valuenow="0" aria-label="アップロードの進み具合">
 *     <div class="d-progress-bar" style="width: 0%"></div>
 *   </div>
 *   <p class="d-progress-text">送信中 0%（0 MB / 12.4 MB）</p> */
.d-progress {
  height: 6px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.d-progress-bar { height: 100%; width: 0; background: var(--pink); transition: width .15s linear; }
.d-progress-text { margin: var(--sp-2) 0 0; color: var(--ink-48); font-size: var(--t-xs); }

/* 運営からの説明・前置き */
.d-note {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--blue-rule); background: var(--blue-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
}
.d-note > :first-child { margin-top: 0; }
.d-note > :last-child { margin-bottom: 0; }

/* うまくいかなかったときの知らせ（画面の単位）。原因と、次にできることを続けて書く。
 * 入力 1 つの誤りは、この形ではなくその欄の下の .d-error で出す */
.d-alert {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--alert); border-left-width: 3px; border-radius: var(--r-sm);
  background: var(--alert-pale); color: var(--ink);
  font-size: var(--t-sm);
}
.d-alert strong { color: var(--alert); }

/* ============================================================
 * 7. モーダル（画面に重ねる箱）
 *
 * 器は 1 つ。中身の入れ方で 2 通りに使う——
 *   (1) 確認だけ: 本文にメッセージ 1〜2 行、下に「キャンセル」と主操作のボタン
 *   (2) ウィジェット: 本文に表・入力・説明など何でも入れる（.is-lg で広くする）
 *
 * 開閉は design/app.js が行う（2026-09-03 USER・conventions.md #7）。開くボタンに
 * data-modal-open="<モーダルの id>"、閉じるものに data-modal-close を書き、hidden を付け外しする。
 * 台帳を動かす操作は、サーバが「次のモーダルを開いた状態の画面」を返す形のままでよい。
 *
 * 使い方:
 *   <div class="d-modal-overlay" id="add-org" hidden>
 *     <div class="d-modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
 *       <div class="d-modal-head"><h2 class="d-modal-title" id="m-title">題</h2>
 *         <button class="d-btn is-quiet d-modal-close" type="button" data-modal-close aria-label="閉じる">×</button></div>
 *       <div class="d-modal-body">…</div>
 *       <div class="d-modal-foot">…ボタン…</div>
 *     </div>
 *   </div>
 * ============================================================ */

.d-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--gutter);
  /* 後ろの画面を隠さず、手前の箱に目を寄せる濃さ。真っ黒にしない——
   * 何の上で操作しているかが分かるほうが、業務の画面では迷わない */
  background: rgba(21, 23, 26, .45);
}
.d-modal-overlay[hidden] { display: none; }

.d-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--w-modal);
  max-height: 100%;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-pop);
  overflow: hidden;
}
.d-modal.is-sm { max-width: var(--w-modal-sm); }
.d-modal.is-lg { max-width: var(--w-modal-lg); }

.d-modal-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.d-modal-title { margin: 0; font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-tight); }
.d-modal-close {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-h); height: var(--ctl-h); margin-right: calc(var(--sp-2) * -1);
  /* 枠線と地を消すのは、<button> でも同じ見た目にするため（.d-pop-item と同じ理由）——
     元の画面へのリンクで閉じる形と、JS で閉じる形の両方がある（design/app.js） */
  border: 0; background: none; border-radius: var(--r-sm);
  color: var(--ink-48); font-size: 18px; line-height: 1; text-decoration: none;
}
.d-modal-close:hover { background: var(--soft); color: var(--ink); }
/* 閉じるものが <button> のとき（JS で hidden を付け外しして閉じる形・design/app.js）。
   <a> で書いたときと同じ見た目にそろえる——ブラウザ既定の枠線と地を消す */
button.d-modal-close { border: 0; background: transparent; padding: 0; }

/* 中身。長くなったらここだけが縦に流れる（題とボタンは残る） */
.d-modal-body { padding: var(--sp-5); overflow-y: auto; }
.d-modal-body > :first-child { margin-top: 0; }
.d-modal-body > :last-child { margin-bottom: 0; }
/* 表を丸ごと入れるときは、左右の余白を殺して罫線を端まで届かせる */
.d-modal-body.is-flush { padding: 0; }

.d-modal-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--soft);
}
/* 主操作は右端。取り消しはその左（押し間違いを減らす並び） */
.d-modal-foot > .d-btn:first-child { margin-left: auto; }
/* 左端に置きたい補助（「詳しく見る」など）はこれで押し出す */
.d-modal-foot > .d-modal-foot-aside { margin-right: auto; color: var(--ink-48); font-size: var(--t-sm); }
.d-modal-foot > .d-modal-foot-aside ~ .d-btn:first-of-type { margin-left: 0; }

/* 確認だけのモーダルは題を省いてよい。そのときは本文の上を少し空ける */
.d-modal-body.is-lead { padding-top: var(--sp-6); font-size: var(--t-body); }

@media (max-width: 767px) {
  .d-modal-overlay { padding: var(--sp-3); align-items: flex-end; }
  .d-modal { max-height: 88vh; }
  .d-modal-head, .d-modal-foot { padding-inline: var(--sp-4); }
  .d-modal-body { padding-inline: var(--sp-4); }
  /* 狭い画面ではボタンを横幅いっぱいに並べる（指で押す面積を確保する） */
  .d-modal-foot { flex-wrap: wrap; }
  .d-modal-foot > .d-btn { flex: 1 1 auto; }
}

/* ============================================================
 * 8. 補助
 * ============================================================ */

.d-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* 狭い画面では出さない。本文を読むための高さを削ってまで置く価値のない補足に使う。
 * 情報そのものを隠すのには使わない——出す価値があるなら狭い画面でも出す */
@media (max-width: 767px) { .d-hide-sm { display: none; } }
.d-stack > * + * { margin-top: var(--sp-4); }
.d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
 * 9. 一覧の絞り込み（2026-09-03 USER）
 * ============================================================
 * 一覧を JS でその場で絞る形（design/app.js の「一覧をその場で絞る」）で使う。
 * 行の並べ方と 0 件のときの案内は #4 の .d-table と .d-empty が持っているので、
 * ここに足すのは「絞り込みの行に横並びにする選択欄」だけ。
 * 並べる行そのものは .d-row（#8）でよい。 */

/* 既定の .d-select は幅いっぱいに広がるので、4 つ並べると 1 つずつが 1 行を占める。
 * **高さは既定のまま（--ctl-h）**——.d-select.is-sm（#5）は節の見出しの行に置く
 * 小さい形で、こちらは 1 枚のパネルを絞り込みに使うときの形。
 * 幅は中身にそろえ、最小 8em を確保する（「顧客：すべて」が畳まれない幅）。
 * 入りきらないときは折り返して縦に積む（.d-row が flex-wrap を持つ）。 */
.d-select.is-auto { width: auto; min-width: 8em; max-width: 100%; }

/* ============================================================
 * 10. 課題のやり取り（K-1275・添付と承認の行は K-1277・K-1287）
 * ============================================================
 * 1 件の課題に付いた投稿を古い順に積む（design/screens/issues.html の画面 2）。
 * **顧客の画面と運営の画面が同じ部品を使う**——同じやり取りを両側から見る画面なので、
 * 片方だけに置くと、片方を直した日にもう片方の見え方が変わる。
 * 見本ではページの <style> に pg- を頭に付けた暫定として置いていたもの。
 * **本番の画面はインラインの <style> を書けない**（CSP・adr/0001）ので、ここに入れた。 */

/* 絞り込みの欄を横に並べる。#9 の .d-row + .d-select.is-auto は選択欄だけを並べる形で、
 * こちらは**欄の名前（.d-label）を付けたまま**並べるときの形。
 * 名前を付けるのは、選択欄が 2 つ以上あって「何で絞っているか」が値だけでは読めないため。 */
.d-filter { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.d-filter .d-field { margin: 0; flex: 1 1 11em; min-width: 0; }

/* 中身が自分で余白を持つときのパネルの本体（投稿の並びがこれ）。
 * 外側で余白を取ると、1 通ごとの区切りの罫線がパネルの端まで届かない */
.d-panel-body.is-flush { padding: 0; }

.d-thread { display: flex; flex-direction: column; }
.d-post { padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.d-post:last-child { border-bottom: 0; }
/* 運営の投稿。**左の線と面の色の 2 つで示す**——色だけで伝えない */
.d-post.is-ops { border-left: 3px solid var(--blue-rule); background: var(--blue-soft); }
.d-post-head {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
/* 名乗りは人が登録した字（メールアドレスのこともある）なので、どこでも折る */
.d-post-who { font-size: var(--t-sm); font-weight: 700; overflow-wrap: anywhere; }
.d-post-when { color: var(--ink-48); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
/* 本文は人が書いた文。**改行をそのまま出す**——段落を勝手に詰めない */
.d-post-body { margin: 0; font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 1 通の中に置く操作の行（承認のボタン）。**その投稿の中に置く**——離すと、
 * どの発言に対する承認かが分からなくなる（design/screens/issues.html の画面 2 の注記） */
.d-post-foot {
  margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
/* 添付ファイルの 1 行（見本の pg-file / pg-post-file）。**名前は人が付けた字**なので
 * どこでも折る。顧客の画面と運営の画面が同じものを使う */
.d-file {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  max-width: 100%; margin-top: var(--sp-2);
  font-size: var(--t-xs); color: var(--pink-dark); text-decoration: none;
  overflow-wrap: anywhere;
}
.d-file:hover { text-decoration: underline; }

/* ============================================================
 * 11. 表の中のチェックボックス（K-1280）
 * ============================================================
 * 複数の指摘を選んでまとめて依頼するために要る
 * （design/screens/issues.html の画面 4・「要る部品」4）。
 * 見本ではページの <style> に pg- を頭に付けた暫定として置いていたもの。
 * **本番の画面はインラインの <style> を書けない**（CSP・adr/0001）ので、ここに入れた。 */

/* 列は中身ぶんの幅だけ取る。**右の余白を落とす**——次の列（指摘の表題）との間が
 * 二重に空くと、選択欄が行の左端から離れて見える */
.d-table .d-tickcell { width: 1%; padding-right: 0; }
/* 指で操作する端末では 20px に広がる（design/conventions.md #1） */
.d-tick { width: 16px; height: 16px; margin: 0; accent-color: var(--pink); }
@media (pointer: coarse) { .d-tick { width: 20px; height: 20px; } }


@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/lciqqg-r64/material-symbols.woff2") format("woff2");
}