/* ── Help modal ── */
.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-modal {
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 28px;
  max-width: 520px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.help-modal h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.help-modal h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--text);
}
.help-modal p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.help-modal .help-close-btn {
  display: block;
  margin: 20px auto 0;
  padding: 8px 24px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--chip-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.help-modal .help-close-btn:hover {
  background: var(--chip-bg-hover);
}

/* Eye Document Viewer Modal */

/* **他のモーダルより上に出す。** HTML 側は Tailwind の `z-50`（= z-index:50）で、
   局ナレッジ管理モーダルは z-index:1000（`station_knowledge.js` のインライン style）。
   資料ビューアはそれらの中から開かれる（局ナレッジ管理のファイル名クリック）ので、
   50 のままだと**開いたのに親モーダルの裏に描かれて何も起きないように見える**。
   ビューアは常に最前面でよい（他のモーダルから開くことはあっても逆は無い）。

   （ここには以前「`.source-overlay`（原文モーダル）も z-index:1000」と書いてあったが
   **誤り**だった。`.source-overlay` は 100（`css/source_modal.css` の `.source-overlay` を参照）。
   1000 なのは局ナレッジ管理モーダルだけ。結果的に 1200 が最大なので動いてはいたが、
   この数字を根拠に他のモーダルの z-index を決めると間違える。） */
#eyeDocModal { z-index: 1200; }

.eye-doc-frame {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.eye-doc-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  pointer-events: none;
}
.eye-doc-topbar > * { pointer-events: auto; }
.eye-doc-zoom {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.eye-doc-zoom button, .eye-doc-zoom span {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.eye-doc-zoom button:hover { background: var(--chip-bg-hover); }
.eye-doc-zoom span { cursor: default; min-width: 48px; text-align: center; border-left: 1px solid var(--stroke); border-right: 1px solid var(--stroke); }
.eye-doc-title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  margin-right: 48px;
}
.eye-doc-badge {
  background: var(--pri-fill);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.eye-doc-title-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.eye-doc-title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 資料の中の見出し + ページ範囲。資料名より弱く見せる。
   `.hidden`（Tailwind）は CDN が実行時に注入するので、ここの規則との
   前後関係が保証されない。2クラスで書いて順序に依存しないようにする。 */
.eye-doc-subtitle-text.hidden { display: none; }
.eye-doc-subtitle-text {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .eye-doc-zoom { display: none; }
  .eye-doc-title-bar { margin-right: 56px; max-width: calc(100% - 72px); }
  .eye-doc-title-text, .eye-doc-subtitle-text { max-width: 100%; }
}
.eye-doc-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  line-height: 1;
}
/* **ここだけ `--chip-bg-hover` を直接置けない。** 他の3つ（zoom / view-toggle / nav）は
   `--panel-solid` の枠の中にある透明なボタンなので、半透明を重ねれば枠の色が下に残る。
   この閉じるボタンは自分が `--panel-solid` の面で、しかも `.eye-doc-pdf-wrap` の
   ページに重なって浮いている（`position:absolute` + `z-index:11`）。`background` を
   半透明の色で置き換えると**面ごと消えて PDF が透ける**ので、面は `--panel-solid` の
   まま残し、その上に半透明の層を1枚だけ重ねる。 */
.eye-doc-close:hover {
  background: linear-gradient(var(--chip-bg-hover), var(--chip-bg-hover)) var(--panel-solid);
}
.eye-doc-pdf-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  /* **`safe` を付ける。** 素の `center` は、中身がペインより広いときに
     **左右へ等分にはみ出させる**。左側にはみ出した分は `scrollLeft` が
     0 より小さくならないので**永久に掴めない**（実測: 720px のペインに
     900px の docx プレビューで左 90px、PDF の 200% 拡大で左 312px が
     見切れ、どちらもスクロールで出てこなかった）。
     `safe` を付けると、はみ出すときだけ start 揃えに倒れて全部掴める。
     **2行書くのは意図的** —— `safe` を解さないブラウザは2行目を捨てて
     従来どおり中央揃えになる（centering が壊れるよりはよい）。 */
  justify-content: center;
  justify-content: safe center;
  padding-top: 56px;
  /* **`padding-top` だけでは足りない。** あれが効くのは `scrollTop: 0` のときだけで、
     ページ送りは `scrollIntoView({block:'start'})` で対象ページの上端を
     スクロールポートの上端に合わせる —— つまり上に浮いているタイトルの**裏**に
     入る。飛んだ先のページの上部が隠れ、しかもそこは一致した見出しがある場所。

     値は実測に合わせる: `.eye-doc-title-bar` は上オフセット 12px + 高さ 53px
     （資料名と見出しの2行）で下端 65px。64px では 1px 足りなかった。
     余裕を持たせて 76px にする。 */
  scroll-padding-top: 76px;
  /* `.eye-doc-overlay` の基準（#748）。**`.eye-doc-left` に寄せないこと** ——
     あちらは既に `position: relative` だが、間に `overflow: auto` のこの要素が
     挟まるので、重ねた要素がクリップされるかどうかがブラウザの解釈に依存する。
     ここに持たせれば基準と切り抜きが同じ箱になる。
     **ここより内側に `position: absolute` の子は居ない**（`.eye-doc-page` は
     自分が `relative` で、ページ送り `.eye-doc-nav` と閉じるボタンは外側）ので、
     基準が横取りされる相手も無い。 */
  position: relative;
}
/* 読み込み中・エラーは**ページと同じ面に重ねる**（#748）。
   `.eye-doc-pdf-wrap` の flex の行に並べると、`.eye-doc-pages-wrap` の
   `width: 100%`（#714）に押されて左右の端へ飛ぶ。
   中身の中央寄せは Tailwind の `flex items-center justify-center`（HTML 側）が
   持つ。ここで `display` を書かないのは、`.hidden` と綱引きしないため。 */
.eye-doc-overlay {
  position: absolute;
  inset: 0;
  /* エラー文は長くなりうる。折り返した2行目以降も中央に揃える。 */
  text-align: center;
}
.eye-doc-pdf-wrap iframe {
  transform-origin: top center;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
}
.eye-doc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--stroke);
  border-top-color: var(--pri);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.eye-doc-pages-wrap {
  display: flex;
  flex-direction: column;
  /* 上の `justify-content` と同じ理由。こちらは縦並びなので、横方向の
     中央揃えは `align-items`。 */
  align-items: center;
  align-items: safe center;
  /* **ペインの幅をそのまま持つ。** 中身の幅（`%`）の基準になる。
     持たせないと shrink-to-fit になり、`width: 100%` が中身自身に依存して
     決まらない。 */
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  /* ページ送りは下端中央に浮いているので、最終ページの下にその分の余白を置く。
     無いと最後のページの下部がバーに隠れたまま、スクロールしても出てこない。 */
  padding-bottom: 88px;
  gap: 0;
  min-height: 100%;
}
/* 1ページ分の枠。**寸法はここが持つ**（canvas ではなく）。
   遅延描画なので canvas がまだ無いページがあり、枠側でサイズを確定させないと
   描画が入るたびに総高さが変わってスクロール位置が飛ぶ。 */
.eye-doc-page {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  overflow: hidden;
}
/* 未描画の枠。空白との区別がつくよう、うっすら縞を出す。 */
.eye-doc-page:not(.is-rendered)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, rgba(0,0,0,.02) 0 10px, rgba(0,0,0,.05) 10px 20px
  );
}
.eye-doc-page.is-failed::after {
  background: rgba(220,38,38,.06);
}
/* 該当ページ（ヒットしたチャンクのページ）。どこが根拠か分かるようにする。 */
.eye-doc-page.is-hit {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
}
.eye-doc-pages-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}
.eye-doc-page-num {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0 20px;
}
.eye-doc-page-num.is-hit {
  color: var(--pri);
  font-weight: 700;
}

/* 画像の原本。PDF のページ枠と同じ見た目に寄せる。
   枠に固定サイズを持たせないので `.eye-doc-page` の縞（未描画表示）が出ない
   よう `is-rendered` を付けて使う。 */
.eye-doc-image-frame {
  width: auto;
  height: auto;
  /* `width: auto` + `max-width` なので実測では縮んで収まっていたが、
     基準が画面なのは office と同じ誤り。ペインに揃える。 */
  max-width: min(100%, 1100px);
}
.eye-doc-image-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* docx / xlsx のプレビュー。**紙面ではなく「読める形」**に寄せる
   （体裁の再現ではないので、原本の余白やフォントは真似しない）。 */
/* **`vw` を使わない。** 並べて表示（#683）でペインは画面の約半分になったので、
   `92vw` は**ペインより広い**。`width` が効いて縮まないため、720px のペインに
   900px の枠が入り左側が見切れていた（実測）。基準をペインの幅にする。
   中央揃えは親の `align-items: safe center` に任せる（`margin: 0 auto` を
   残すと、はみ出したときに `safe` が効かず左が掴めなくなる）。 */
.eye-doc-office {
  width: min(100%, 900px);
}
.eye-doc-office-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 10px;
}
.eye-doc-office-label {
  font-size: 12px;
  color: var(--text-muted);
}
.eye-doc-office-bar .eye-doc-download-btn { margin-top: 0; }
.eye-doc-office-warn {
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 8px;
}
.eye-doc-office-body {
  padding: 28px 32px;
  background: #fff;
  color: #111;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  font-size: 14px;
  line-height: 1.9;
  overflow-x: auto;
}
.eye-doc-office-body .op-p { margin: 0 0 0.9em; word-break: break-word; }
.eye-doc-office-body .op-h { margin: 1.4em 0 0.6em; font-weight: 700; line-height: 1.5; }
.eye-doc-office-body .op-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
}
.eye-doc-office-body .op-table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
}
.eye-doc-office-body .op-td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  vertical-align: top;
  font-size: 13px;
}
.eye-doc-office-body .op-td .op-p { margin: 0; }
.eye-doc-office-body .op-empty { color: #888; }

/* NOTE: `.eye-doc-frames-note`（「全N ページのうち1ページ目のみ」の注記）は削除した。
   複数ページ TIFF は `as=pdf` で全ページを出すようになり、切り捨てが無くなったため。
   サーバは `X-Source-Frames` を返し続けるが、これは `as=png` 経路の情報。 */

/* ブラウザで描画できない原本（想定外の拡張子）。 */
.eye-doc-download-card {
  /* 横の中央揃えは親に任せる（`auto` だと `safe` が効かない。office と同じ）。 */
  margin: 8vh 0 0;
  max-width: min(100%, 520px);
  padding: 28px 24px;
  text-align: center;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 12px;
}
.eye-doc-download-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}
.eye-doc-download-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.eye-doc-download-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--pri-fill);
  border-radius: 8px;
  text-decoration: none;
}
.eye-doc-download-btn:hover { filter: brightness(1.08); }

/* 原本 / 抽出テキストの切り替え。 */
.eye-doc-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: 4px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.eye-doc-view-toggle.hidden { display: none; }
.eye-doc-view-toggle button {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.eye-doc-view-toggle button + button { border-left: 1px solid var(--stroke); }
.eye-doc-view-toggle button:hover { background: var(--chip-bg-hover); }
.eye-doc-view-toggle button.is-active {
  color: #fff;
  background: var(--pri-fill);
}

/* ===== 左＝原本 / 右＝読み取ったテキスト（#683） ===== */

.eye-doc-body {
  flex: 1;
  display: flex;
  /* **`min-height: 0` が要る。** flex の子は既定で内容より縮まないので、
     これが無いと左右のペインが画面を突き抜け、中のスクロールが効かない。 */
  min-height: 0;
}
.eye-doc-left {
  /* ページ送り（`.eye-doc-nav`）の基準。フレーム直下に置くと、並べたときに
     バーが画面中央＝右ペインの上に出る。 */
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.eye-doc-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--stroke);
  background: var(--bg);
  /* 上端のタイトルバーは浮いている（`position: absolute`）ので、その分だけ空ける。
     値は `.eye-doc-pdf-wrap` の `padding-top` と揃える（実測 56px）。 */
  padding-top: 56px;
}
/* 片側だけ表示。**`display: none` で消す**（幅 0 にすると textarea の
   字送りが変わり、測り直すまでページ区切りの位置がずれる）。 */
.eye-doc-body.is-original-only .eye-doc-right { display: none; }
.eye-doc-body.is-text-only .eye-doc-left { display: none; }
.eye-doc-body.is-text-only .eye-doc-right { border-left: none; }

.eye-doc-text-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--stroke);
}
.eye-doc-text-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.eye-doc-text-facts {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「読み取り専用」。**本文が薄くなくなった以上、ここが唯一の合図になる**
   （`.eye-doc-text-area[readonly]` のコメント）。読めない濃さにしない。 */
.eye-doc-text-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--chip-bg);
  border-radius: 6px;
  white-space: nowrap;
}
.eye-doc-text-badge.hidden { display: none; }
.eye-doc-text-pages {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.eye-doc-text-pages.hidden { display: none; }
.eye-doc-text-pages button {
  padding: 3px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
}
.eye-doc-text-pages button:hover:not(:disabled) { background: var(--chip-bg-hover); }
.eye-doc-text-pages button:disabled { opacity: .35; cursor: default; }
.eye-doc-text-pages > span {
  padding: 0 8px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  border-left: 1px solid var(--stroke);
  border-right: 1px solid var(--stroke);
}
.eye-doc-text-sync {
  font-size: 11.5px !important;
  color: var(--pri) !important;
  white-space: nowrap;
  border-left: 1px solid var(--stroke) !important;
}
.eye-doc-text-sync.hidden { display: none; }

.eye-doc-text-scroll {
  /* 影武者の基準。 */
  position: relative;
  flex: 1;
  min-height: 0;
  /* **スクロールするのはここ**（`.eye-doc-text-area` ではない）。
     区切り線を本文と同じスクロール内容に入れるため（index.html のコメント）。 */
  overflow: auto;
}
/* スクロールする中身。ページ区切り（`.eye-doc-text-marks`）の基準でもある。 */
.eye-doc-text-content {
  position: relative;
}
/* 本文。**ここだけが実体**で、下の2つは見た目と採寸のための付け足し。 */
.eye-doc-text-area {
  display: block;
  width: 100%;
  /* **高さは JS が本文の全高に合わせる**（`eyeDocFitTextAreaHeight`）。
     中でスクロールさせない —— させると区切り線と本文が別々に動く。 */
  overflow: hidden;
  padding: 16px 18px;
  /* 区切りの帯を本文の左に出すので、その分だけ内側に寄せる。 */
  padding-left: 56px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
/* **読み取り専用でも本文の濃さは変えない。**
 *
 * 以前はここで `--text-secondary` に落としていた。履歴・局ナレッジから開いた
 * 資料は**必ず**この経路なので、「読むためだけに開いた資料ほど薄い」という
 * ちょうど逆の見え方になっていた（利用者の指摘）。
 *
 * 編集できるかどうかは**見出しのバッジ**（`.eye-doc-text-badge`）が言えばよく、
 * 本文を薄くして伝える必要は無い。薄さは「情報の重要度が低い」の意味なので、
 * 編集可否の合図に流用すると、読む対象そのものが沈む。 */
.eye-doc-text-area[readonly] { color: var(--text); }
/* ページ区切りの位置を測るための影武者。
   **`display: none` にしないこと**（寸法が測れなくなる）。字送りを本文と
   同じにする指定は JS が `getComputedStyle` で写すので、ここには書かない。 */
.eye-doc-text-mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  box-sizing: border-box;
  /* **自分の高さでスクロール範囲を広げない。** 採寸中だけ 10 万字ぶんの中身が
     入るが、ここは `.eye-doc-text-scroll`（`overflow: auto`）の中の絶対配置なので、
     高さを持つとその間だけスクロール範囲が跳ね上がる。子の `offsetTop` は
     自分の高さに影響されないので、0 に畳んでも採寸はできる。 */
  height: 0;
  overflow: hidden;
}
.eye-doc-text-marks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* **高さを持たせない。** 持たせると `align-items: center` が線をラベルの行高の
   半分（実測 7.4px）だけ下へ動かし、ページ境界ではなく**次ページ1行目の文字**の
   上に線が乗る（本文は line-height 1.9 = 24.7px で、境界の前後の空きは 4.9px
   しかない）。0 にすれば線は境界そのもの ——
   行と行の空白の真ん中 —— に来る。 */
.eye-doc-text-mark {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eye-doc-text-mark-label {
  flex-shrink: 0;
  width: 44px;
  padding-right: 6px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
}
.eye-doc-text-mark-line {
  flex: 1;
  height: 1px;
  background: var(--stroke);
}
.eye-doc-text-note {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--stroke);
}
.eye-doc-text-note.hidden { display: none; }

/* 読み取りの照合で出た注記（`#eyeDocTextNotices`）。
 *
 * **`.src-warn-box` の警告色は使わない。** これは「本文は取れている。原本と
 * 見比べるときの手がかり」であって、欠落の報告ではない（`ExtractWarning.advisory`）。
 * 同じ色にすると、入力画面から追い出した意味が無くなる。
 * 高さは本文を圧迫しないよう上限を付け、溢れたら中でスクロールさせる。 */
.eye-doc-text-notices {
  flex-shrink: 0;
  max-height: 27%;
  overflow-y: auto;
  padding: 8px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  /* 面はテーマのチップ背景を借りる（`--bg-subtle` のような変数は無い）。 */
  background: var(--chip-bg);
  border-bottom: 1px solid var(--stroke);
}
.eye-doc-text-notices.hidden { display: none; }
/* 見出しは箱の上端に貼り付ける。箱は溢れると中でスクロールするので、
 * 貼り付けないと注記を読み進めた時点で畳むための見出しが流れて消える。
 * 上の余白（箱の padding 8px）ぶん上にずらし、背景で下の行を隠す。
 * `--chip-bg` は半透明なので単独では透ける。箱と同じ見え方になるよう、
 * ペインの地色（`.eye-doc-right` の `--bg`）に重ねて不透明にする。 */
.eye-doc-text-notice-head {
  position: sticky;
  top: -8px;
  padding-block: 8px 2px;
  margin-top: -8px;
  background: linear-gradient(var(--chip-bg), var(--chip-bg)), var(--bg);
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.eye-doc-text-notice-head:hover { color: var(--text); }