/* CSV取込・仕訳変換 Stage 1 のスコープ化スタイル（外部フォント・外部CSSは使わない） */

:root {
  --color-text: #1f2933;
  --color-muted: #52606d;
  --color-border: #cbd2d9;
  --color-surface: #ffffff;
  --color-background: #f5f7fa;
  --color-accent: #1c64f2;
  --color-accent-text: #ffffff;
  --color-danger: #b91c1c;
  --color-danger-surface: #fef2f2;
  --color-warning-surface: #fffbeb;
  --color-success: #047857;
}

* {
  box-sizing: border-box;
}

/* display 宣言を持つコンテナ（.app-user / .progress 等の flex）でも hidden 属性を確実に効かせる */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
}

/* ★★★375px でヘッダが**1文字ずつ縦に折り返していた**（★2026-09-30・実測）。
   ★実測（★main 3939cd0）: ★ヘッダの高さ 226px（★約 8.8 行）。
   ★★`client-switcher` は幅 54px / 高さ 201px（★約 7.8 行）で、
   ★★「顧問先が未選択です」が★★**縦１列**になっていました。
   ★★768px では正常（★ヘッダ 58px・★各要素 1～1.4 行）。

   ★★原因: ★`display: flex` で★**折り返さない**ため、★幅が足りないと
   ★★各子が**最小幅まで潰され**、★文字が1つずつ折り返します。
   ★★→ ★**折り返しを許す**。★768px 以上では全部が1行に収まるので、★見た目は変わりません
   ★（★実測で確かめています）。★media query は追加しません——★幅の境目を手で決めない。 */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-title {
  margin: 0;
  font-size: 1.125rem;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
}

.icon-button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.app-main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

/* ★★★やることの道筋（★左ナビ・★2026-10-05・★B 案の段1）。
   ★★★幅が足りないときは**上に積みます**（★横に並べると文字が1つずつ折り返す——
     ★`.app-header` で実際に起きた形です）。★media query の境目は既存の 768px に合わせます。
   ★★DOM に包みを足していません。★`.app-main` を grid にし、
     ★ナビ以外の直下の子を**右の列**へ送ります（★既存の並びを変えない）。 */
/* ★★★★狭い画面では**下へ**回します（★2026-10-05・★実測）。
   ★★上に置くと、★★進捗バーが ★**217px 下がりました**（★390px 幅で実測）。
   ★★★#423 の決定「★スマホ幅で Step 1 が先に見える」を壊します——
     ★★あのときは設定のボタン10個を越える必要があったのを無くしたので、
     ★★★ここで道筋を積んだら**同じことをやり直す**ことになります。
   ★★道筋は「★いまどこか」を見るものなので、★下に在っても役目は果たします。 */
.app-main {
  display: flex;
  flex-direction: column;
}

.work-nav { order: 2; }
#work-content { order: 1; }

.work-nav {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.work-nav-heading {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.work-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.work-nav-item {
  display: flex;
  /* ★★★理由の `<p>` を**次の行へ**送ります（★2026-10-05・★レビュー役の C）。
     ★★★折り返さないと、★理由が同じ行で幅を奪い、★段の名前が ★**23px で1文字ずつ**折り返します
       ★★（★実測: ★1440 / 1024 / 768 で ★名前の幅 23px・高さ 128px）。 */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* ★★状態ごとの見え方。★★**色だけに頼りません**——★印と文字でも分かるようにします
   （★`aria-current` と `.work-nav-badge`）。 */
.work-nav-item.is-current {
  border-color: var(--color-border);
  background: var(--color-surface-alt, var(--color-surface));
  font-weight: 600;
}

.work-nav-item.is-done { color: var(--color-muted); }

/* ★★`unavailable` と `unknown` は**薄くするだけ**にします。★消すと、
   ★★「★その段が在ること」ごと伝わりません（★理由は `.work-nav-note` に出します）。 */
.work-nav-item.is-unavailable,
.work-nav-item.is-unknown { color: var(--color-muted); }

/* ★押せる段（★段2）。★見た目はリンク寄りにするが、★実体は button（★押せるものだけ）。 */
.work-nav-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

.work-nav-badge {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.work-nav-note {
  /* ★★★自分の行を**丸ごと**使う（★上の `flex-wrap` と対）。 */
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

@media (min-width: 768px) {
  /* ★★★★`.app-main` は ★**2つの子**（★ナビと `#work-content`）だけにします（★2026-10-05）。
     ★★★以前は包みを足さずに `.app-main > * { grid-column: 2 }` としていましたが、
       ★★`grid-row: 1 / -1` は ★**明示行が無いと1行分**にしかならず、
       ★★1行目がナビの高さ（★実測 341px）まで伸びて
       ★★★進捗バーと Step 2 のあいだに ★**約 285px の空白**ができました（★実測で見つけました）。
     ★★→ ★包みを1つ足して、★**行の取り合いを無くします**。 */
  /* ★★★★道筋が**出ているときだけ** 2列にします（★2026-10-05・★レビュー役の B）。
     ★★★以前は常に 2列だったので、★サインアウト中（★ナビは `hidden`）も
       ★★1列目の 12rem が**空のまま場所を取り**、★`#work-content` が ★**192px** に潰れました
       ★★（★実測: ★1440 / 1024 / 768 で ★サインイン画面の幅 192px・★文が4行）。
     ★★★`:has()` に頼らず、★`renderWorkNav()` が付ける class で切り替えます
       ★★（★JS は「出すか」を既に知っています。★CSS に同じ判定を2つ目で書かない・§2）。 */
  .app-main { display: block; }

  .app-main.has-work-nav {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }

  /* ★広い画面では**左へ**戻します（★順序も元どおり）。 */
  .work-nav {
    order: 0;
    position: sticky;
    top: 1rem;
    margin-bottom: 0;
  }

  #work-content { order: 0; }

  /* ★右の列は**縦に詰まる**（★幅は親に合わせる）。 */
  #work-content { min-width: 0; }

  .work-nav-list { flex-direction: column; }
}

.progress {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.progress-step {
  flex: 1 1 0;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: center;
}

.progress-step.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
}

.field {
  margin-bottom: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 28rem;
}

.field label {
  font-weight: 600;
  font-size: 0.875rem;
}

/* ★★★★入力欄を**選択欄と揃えます**（★2026-10-06・★浜崎さんの声）。
   ★★浜崎さん: ★「会社を検索の入力欄が、★下の「会社」の選択欄と比べて
   ★★高さ・余白・枠が無く、★飾りの無い見た目」。
   ★★★原因はこの規則が `select, input[type="file"]` だけだったことです——
   ★★**テキスト系の input がどれも入っていません**でした（★`text` / `search` /
   ★`email` / `date` / `datetime-local` / `number`）。★新しい色は作らず、★既存の変数だけです。

   ★★★`textarea` も**意図して入れています**（★レビュー役 3907 の 2）。
     ★★余白と文字の大きさが変わりますが、★**揃える側へ寄せます**——
     ★★同じフォームの中で input だけ枠が付く方がチグハグに見えます。 */
select,
textarea,
input[type="file"],
input[type="text"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="number"] {
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9375rem;
  background: var(--color-surface);
}

/* ★★★★**書けない欄**を、★書ける欄と**見た目で分けます**
   （★2026-10-06・★レビュー役 3907 の 2）。

   ★★★上の規則を広げた**副作用**です——★ブラウザ既定の
     ★★`disabled` の背景（rgba(239,239,239,0.3)）と枠（2px）を
     ★★**こちらが上書きしてしまい**、★有効な欄と同じ白・1px になります。
   ★★★違いが**文字色だけ**になると、★閲覧のみの人が
     ★★**書けると思って打ち、★何も起きない**ことになります。
   ★★対象: ★顧問先／口座のフォーム・設定・ルール詳細（★編集できない人）。 */
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--color-background);
  color: var(--color-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* ★★★検索の行: ★入力欄の**右**にボタンを並べます。
   ★★横に押し込めば入力欄が潰れ、★何を打っているか見えなくなるので
   ★★狭くなったら**折り返します**。

   ★★★★折り返すのは **320px 以下**です（★2026-10-06 の実測）。
     ★★以前ここに「390px では折り返します」と書いていましたが、★**誤り**でした——
     ★★測らずに書いていました（★レビュー役 3907 の 3）。
     ★★実測: ★390px → 行 308px・折り返さない（入力 239px）
     ★★　　　360px → 行 278px・折り返さない（入力 209px）
     ★★　　　**320px → 行 238px・折り返す**（入力 238px）以下同じ
     ★★境目は `flex-basis` の 12rem(192px) ➕ gap 8px ➕ ボタン 61px ≒ 261px です。 */
.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.field-row input {
  /* ★★入力欄を**伸ばします**（★ボタンは中身の幅だけ）。 */
  flex: 1 1 12rem;
  min-width: 0;
}

/* ★★検索・解除のボタンを、★入力欄と**同じ高さ**にします。
   ★★主な動作（★アップロード）と区別するため、★**枠だけ**にします。 */
#client-search-apply,
#client-search-clear {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9375rem;
  cursor: pointer;
  /* ★★横幅いっぱいにしない（★浜崎さんの指摘）。 */
  flex: 0 0 auto;
}

.field-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  min-height: 1.25rem;
  /* 理由コード（DEDUCTION_DICTIONARY_ORGANIZATION_MISMATCH 等）はアンダースコアだけで
     区切り文字が無く、日本語の文中に混ざると mobile 390px 幅では折り返せず横スクロールを作る
     （2026-09-13・#359 で journal-deduction-dictionary-note が実際に document 全体を 6px 超えさせた）。
     警告を「見える」ようにするのが目的なので、緩めるのではなく折り返せるようにする。 */
  overflow-wrap: anywhere;
}

button[type="submit"],
#retry-button,
#back-to-select,
#back-to-select-top {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* ★★設定ナビの小見出し（★2026-09-28・並べ替え）。
   ★★「操作できる」は既定なので出さない。★出すのは「閲覧のみ」と「取得できていない」。
   ★★★項目を**消さない**のが要点なので、★見出しも**目立たせない**（★雑音にしない）。 */
.settings-nav-access {
  margin: 0.5rem 0 0.125rem;
  font-size: 0.8125rem;
  color: #666;
}

/* ★★戻る導線の上側（★2026-09-28）。★見出しの直下に置くので、★注記と縦に並べる。
   ★★同じ動きのボタンなので、★★**見た目も同じ**にする（★上だけ素のボタンに見えていた）。 */
.results-exit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.75rem 0 1rem;
}

.results-exit .field-note {
  margin: 0;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.recent-batches {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.recent-batches-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.recent-batches-toolbar h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.recent-batches-message {
  min-height: 1.25rem;
  margin: 0.4rem 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.recent-batches-table {
  table-layout: fixed;
}

.recent-batches-table th:last-child,
.recent-batches-table td:last-child {
  width: 5.5rem;
  text-align: center;
}

.recent-batches-open {
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* ★★★★「まだ選んでいない」と「失敗した」を**同じ見た目にしない**（★2026-10-06・§1）。
   ★★浜崎さんの声: ★「まだ何もしていないのに赤い枠が出ていて、★いきなりエラーっぽくて怖い」。
   ★★★★**赤くする経路はありません**（★2026-10-06・★浜崎さんの決定 = 案 b）。
   ★★ボタンを**押せないまま**にするので、★「弾かれた」状態が起きません。
   ★★上の `.notice` と同じ規律です——★**普通の状態を赤くすると、★本当の警告が埋もれます**。 */
.issue-hints {
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.75rem 0.5rem 1.75rem;
  font-size: 0.875rem;
}

.issue-hints-heading {
  margin: 0 0 0.25rem -1rem;
  font-weight: 600;
  list-style: none;
}

/* ★★危険ではないが、★見てほしい知らせ（★2026-09-30）。
   ★★`.alert` は **danger** です。★普通の状態を赤くすると、
   ★★**本当の警告が埋もれます**（★client/app.js:1606 に同じ規律が書いてあります）。
   ★★新しい色は作らず、★既存の変数だけを使います。 */
.notice {
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.alert {
  color: var(--color-danger);
  background: var(--color-danger-surface);
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.failure-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
}

.counters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.counter {
  min-width: 6.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  text-align: center;
}

.counter dt {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.counter dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.filter-tabs button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.filter-tabs button[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.records-table th,
.records-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}

.records-table td.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.records-table tr.status-export_blocked {
  background: var(--color-danger-surface);
}

.records-table tr.status-review {
  background: var(--color-warning-surface);
}

.status-label {
  display: inline-block;
  border-radius: 999px;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.status-label.status-normalized {
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-label.status-export_blocked {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.issue-panel {
  margin-top: 1rem;
  border: 1px solid var(--color-border);
}

.issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.issue-list li {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-danger);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
}

.issue-message {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.issue-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* ---- Step 2.5: 組織設定（段階5.6 Phase 1.5・AI仕訳トグル） ---- */

.org-settings-panel {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  margin-bottom: 0.9rem;
}

.org-settings-panel h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9375rem;
}

.org-settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.org-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.org-settings-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

.org-settings-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

#org-settings-status {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* ---- Step 2.5: 仕訳候補（段階3〜4） ---- */

.journal-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

#generate-journal {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  cursor: pointer;
}

#journal-status {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  margin-left: 0.35rem;
  white-space: nowrap;
}

.badge-ai {
  color: #92400e;
  border-color: #d97706;
  background: var(--color-warning-surface);
  margin-left: 0;
}

.badge-frozen {
  color: var(--color-success);
  border-color: var(--color-success);
}

.journal-table tr.journal-status-review_required {
  background: var(--color-warning-surface);
}

.journal-table tr.journal-status-export_blocked {
  background: var(--color-danger-surface);
}

.journal-table tr.journal-frozen {
  background: #f0fdf4;
}

.status-label.journal-status-confirmed {
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-label.journal-status-export_blocked {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.bulk-actions-label {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.bulk-actions button,
.journal-row-actions button,
.journal-editor-actions button,
.journal-editor-remove {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.journal-row-actions {
  white-space: nowrap;
}

.journal-row-actions button + button {
  margin-left: 0.35rem;
}

.journal-row-actions .journal-confirm,
#journal-editor-save {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

/* ★★★★覆い（`.modal-backdrop` / `.modal-dialog` / `body.modal-open`）は
   ★★**消しました**（★2026-10-07・★段 W2-b-2）。
   ★★★最後に使っていたのは `evidence-viewer` で、★そこも常設にしたので
     ★★**誰も使っていません**。★残すと「★まだモーダルが在る」と読まれます（§3）。
   ★★★使っている所が無いことは `tests/unit/client/no-modal-left.test.js` が固定します。
     ★★★ただし ★**語の一覧は手書き**です（★「消えたもの」は実体に残らないため）。
       ★★導出しているのは ★**探す先のファイル**（★index.html・app.js・app.css）だけです。 */

/* ★★★★仕訳の編集は**常設**（★2026-10-07・★段 W2-b-1）。
   ★★覆いの中の箱ではなく、★一覧の**すぐ下**に置きます。 */
.journal-editor {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 1rem 1rem 0.75rem;
  margin: 0 0 1rem;
}
.journal-editor[hidden] { display: none; }

.journal-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.journal-editor-header h3 { margin: 0; }

.journal-editor-collapse {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0.25rem 0.5rem;
}
.journal-editor-collapse:hover { color: var(--color-text); }

.journal-editor-table input,
.journal-editor-table select {
  width: 100%;
  min-width: 5.5rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.journal-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

/* ---- Step 3: 弥生出力（段階5） ---- */

#create-export {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  cursor: pointer;
}

#export-status {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.download-actions button {
  border: 1px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.export-note {
  margin: 0.75rem 0 0;
  color: #92400e;
  background: var(--color-warning-surface);
  border: 1px solid #d97706;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* 取込の前に弥生で登録する科目（★2026-10-04）。既存トークンだけを使う。 */
.export-accounts {
  margin-top: 1.25rem;
}

/* 科目名は弥生へそのまま写すので、1回のクリックで全体を選べるようにする。 */
.export-accounts .account-name {
  user-select: all;
  font-family: inherit;
  font-weight: 600;
}

.export-accounts .undecided {
  color: var(--color-danger);
}

.export-accounts-steps {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 顧問先レジストリ（登録・一覧・無効化・再有効化） ----
   既存トークン（--color-*）のみを使う。新しい色は増やさない。 */

#section-clients {
  margin: 1rem 0;
}

#clients-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#clients-details > summary {
  cursor: pointer;
  font-weight: 700;
  /* 折りたたみの見出しなので h2 より小さく、field label より大きい。 */
  font-size: 1rem;
}

#clients-details[open] > summary {
  margin-bottom: 0.75rem;
}

#clients-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

#clients-table th,
#clients-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

#clients-table th {
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* 状態列の注記（「復活期間が終了…」等）はセル内で改行して読ませる。 */
#clients-table td .field-note {
  margin: 0.25rem 0 0;
}

.clients-action + .clients-action {
  margin-left: 0.5rem;
}

#clients-form {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

#clients-form h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

/* ---- 環境名の表示（本番 / 開発 / 不明） ----
   本番は目立たせない（毎日見るので邪魔になる）。
   本番でない環境と「不明」は強く目立たせる（本番と間違えないことが目的）。
   ★不明を quiet 側で出さない。開発環境が本番と同じ静かさで出てしまう。 */

.environment-badge {
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  /* ヘッダが縮んでも環境名から先に消えないよう、縮小させない。 */
  flex: none;
}

/* 本番: 枠も背景も持たず、色だけ落として添える。 */
.environment-badge--quiet {
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
}

/* 本番以外・不明: 面で塗って気づかせる。 */
.environment-badge--loud {
  color: #7c2d12;
  background: var(--color-warning-surface);
  border: 1px solid #d97706;
}

/* ---- 学習した科目の別名（一覧・無効化） ----
   顧問先レジストリと同じ作法。既存トークンのみを使う。 */

#section-aliases {
  margin: 1rem 0;
}

#aliases-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#aliases-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
}

#aliases-details[open] > summary {
  margin-bottom: 0.75rem;
}

#aliases-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

#aliases-table th,
#aliases-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

#aliases-table th {
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

#aliases-table td .field-note {
  margin: 0.25rem 0 0;
}

/* この画面が提供しないことの説明。操作の下に添える。 */
#aliases-capability-notes {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- 学習した仕訳ルール（一覧・停止・再開・行の修正・抑止）----
   別名のパネルと同じ折りたたみの作法に揃える。 */
#section-rules {
  margin: 1rem 0;
}

#rules-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#rules-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
}

#rules-details[open] > summary {
  margin-bottom: 0.75rem;
}

.rules-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

#rules-filter {
  min-width: 14rem;
}

#rules-table,
#rules-detail-lines {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

#rules-table th,
#rules-table td,
#rules-detail-lines th,
#rules-detail-lines td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

#rules-table th,
#rules-detail-lines th {
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

#rules-table td .field-note {
  margin: 0.25rem 0 0;
}

#rules-table td button + button {
  margin-left: 0.35rem;
}

#rules-detail {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

#rules-detail h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

#rules-detail-lines input,
#rules-detail-lines select {
  width: 100%;
  box-sizing: border-box;
}

#rules-detail-note {
  width: 100%;
  box-sizing: border-box;
  margin: 0.25rem 0 0.75rem;
}

.rules-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* この画面が提供しないことの説明。操作の下に添える。 */
#rules-capability-notes {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- 初期設定・マスタ管理（CSV 投入前に触れる位置へ移した） ----
   顧問先の管理・別名と同じ折りたたみの作法に揃える。 */

#section-settings {
  margin: 1rem 0;
}

#settings-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#settings-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
}

#settings-details[open] > summary {
  margin-bottom: 0.75rem;
}

/* 移設した2パネルは section-journal の中で余白を持っていたので、ここでは外側に任せる。 */
#settings-details > .org-settings-panel,
#settings-details > #masters-panel {
  margin-top: 0.75rem;
}

/* ---- 設定項目の「現在値が取れていない」注記 ----
   checkbox は3値を表現できない。オフの見た目が「明示的にオフ」と読まれると
   危険な項目があるので、行ごとに注記を出す。 */

.setting-unobserved {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}

/* ---- 銀行口座（顧問先の行から開く） ----
   取込の認可ゲートなので、顧問先の下にぶら下がる位置に置く。 */

#bank-accounts-panel {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
}

#bank-accounts-panel > h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

#bank-accounts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  background: var(--color-surface);
}

#bank-accounts-table th,
#bank-accounts-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

#bank-accounts-table th {
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

#bank-accounts-table td .field-note {
  margin: 0.25rem 0 0;
}

#bank-accounts-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

#bank-accounts-form h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

#bank-accounts-close {
  margin-left: 0.5rem;
}

/* ---- 操作監査ログの開示 ----
   開示物なので、代理による操作の行が見分けられるようにする。 */

#section-audit-log {
  margin: 1rem 0;
}

#audit-log-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#audit-log-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
}

#audit-log-details[open] > summary {
  margin-bottom: 0.75rem;
}

#audit-log-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.8125rem;
}

#audit-log-table th,
#audit-log-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  white-space: nowrap;
}

#audit-log-table th {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* 代理による操作の行。開示物では「運営がやった」ことが見えている必要がある。
   色だけに頼らず、代理セッションID の列そのものが値を持っている。 */
#audit-log-table tr.audit-log-impersonated td {
  background: var(--color-warning-surface);
}

#audit-log-table-wrap {
  overflow-x: auto;
}

/* 運営による代理アクセスの履歴（設計 §6「隠さない」）。監査ログの表と同じ見た目にする。 */
#impersonation-history-details[open] > summary {
  margin-bottom: 0.75rem;
}

#impersonation-history-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.8125rem;
}

#impersonation-history-table th,
#impersonation-history-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  white-space: nowrap;
}

#impersonation-history-table th {
  font-size: 0.75rem;
  color: var(--color-muted);
}

#impersonation-history-table-wrap {
  overflow-x: auto;
}

#impersonation-history-notes {
  margin-top: 0.75rem;
}

#audit-log-disclosure-notes {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- 全件再処理（ルール修正の反映） ----
   押す前に「何が変わらないか」が読める位置に説明を置く。 */

#reprocess-panel {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
}

#reprocess-panel > h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

#reprocess-detail {
  margin-top: 0.5rem;
}

/* ★★★元画像のビューア（★③-c・2026-09-04）。
   ★★★★**常設の枠**です（★2026-10-07・★段 W2-b-2）。★`journal-editor` と同じ形に揃えます
     （★同じ役割のものを2つの見た目にしない）。 */
.evidence-viewer {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 1rem 1rem 0.75rem;
  margin: 0 0 1rem;
}
.evidence-viewer[hidden] { display: none; }

.evidence-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.evidence-viewer-header h3 { margin: 0; }

.evidence-viewer-collapse {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0.25rem 0.5rem;
}
.evidence-viewer-collapse:hover { color: var(--color-text); }

.evidence-viewer-frame {
  /* ★★大きい画像でも画面に収める。★★★はみ出すと閉じるボタンに届かなくなる。 */
  max-height: 70vh;
  overflow: auto;
  background: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

#evidence-viewer-image {
  max-width: 100%;
  /* ★★縦長のレシートが多いので、★高さでも抑える。 */
  max-height: 66vh;
  object-fit: contain;
}

/* ★★★辿る鍵が無い行の印（★「画像が無い」ではない——★title で理由を言う）。 */
.journal-evidence-absent {
  color: #71717a;
  cursor: help;
}

/* ---- 控除名の辞書（#section-deduction-dictionary・2026-09-13） ----
   別名（#section-aliases）と同じ折りたたみ・表の作法に揃える。★別名側の規則を編集せず末尾に足す
   （★他 PR が app.css の中ほどを触っているので、衝突面を増やさない）。 */
#section-deduction-dictionary {
  margin: 1rem 0;
}

#deduction-dictionary-details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

#deduction-dictionary-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
}

#deduction-dictionary-details[open] > summary {
  margin-bottom: 0.75rem;
}

#deduction-dictionary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

#deduction-dictionary-table th,
#deduction-dictionary-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

#deduction-dictionary-table th {
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

#deduction-dictionary-table td .field-note {
  margin: 0.25rem 0 0;
}

#deduction-dictionary-table td button + button {
  margin-left: 0.4rem;
}

#deduction-dictionary-form {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

#deduction-dictionary-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* この画面が提供しないことの説明。操作の下に添える。 */
#deduction-dictionary-capability-notes {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- ★ヘッダの顧問先切替（★案B・2026-09-13）--------------------------------
   ★既存の規則を編集せず末尾に足す（★他 PR が中ほどを触っているので衝突面を増やさない）。
   ★★色は :root のトークンだけを使う（★新しい色を増やさない・★画面の設計規則 6）。

   ★★★長い顧問先名で横スクロールを出さない（★#359 が 390px で踏んだ形）。
   　★`overflow-wrap: anywhere` と `min-width: 0` を入れて、★★折り返して収まるようにする。 */
.client-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#client-switcher-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
  text-align: left;
}

#client-switcher-button:disabled {
  /* ★★押せないときは「ただの表示」に見せる（★押せるのに何も起きないを作らない）。 */
  opacity: 1;
  cursor: default;
  background: transparent;
  border-style: dashed;
}

.client-switcher-id {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.switcher-panel {
  margin: 0.75rem 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
}

.switcher-list {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  max-height: 20rem;
  overflow-y: auto;
}

.switcher-list li {
  border-bottom: 1px solid var(--color-border);
}

.switcher-list li:last-child {
  border-bottom: none;
}

.switcher-list button {
  width: 100%;
  padding: 0.5rem 0.25rem;
  border: none;
  background: none;
  color: var(--color-text);
  font-size: 0.9375rem;
  text-align: left;
  overflow-wrap: anywhere;
}

.switcher-list button:hover {
  background: var(--color-background);
}

/* ★★★★検索結果の行の下に出す原本（★段 W2・★2026-10-06・★案B）。
   ★★★器は**行ごと**です（★設計書の制約）。★1つの器を使い回すと、
     ★★`await` の後に**別の行へ書く**余地が残ります（★#518 の型）。 */
.evidence-inline-row > td {
  padding: 0.75rem 0.625rem 1rem;
  background: var(--color-background);
}

.evidence-inline-head {
  display: flex;
  /* ★★★「閉じる」を**行の中**に置きます（★狭い画面で、★一覧の端だと
     ★★開いた行が画面の高さを超えて ★**閉じるのにスクロールが要ります**）。 */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* ★★名前が長くても「閉じる」を押し出さない（★折り返す）。 */
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.evidence-inline-target {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.evidence-inline-image {
  /* ★★★器の幅を超えない（★横スクロールを作らない）。 */
  max-width: 100%;
  /* ★★★★高さに**蓋**をします。★狭い画面では原本が縦に長く、
     ★★蓋が無いと ★**一覧に戻るのにスクロールが要ります**（★設計書の欠点）。 */
  max-height: 60vh;
  object-fit: contain;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.evidence-inline-status {
  margin: 0.5rem 0 0;
}

/* ★★★★①の一覧の絞り（★段 W2-b-3・★設計 §7-6 ⑤）。 */
.journal-list-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.journal-list-filter[hidden] { display: none; }