/* ── Highlight styles and tooltip positioning ── */
.highlight {
  background-color: #fff799;
  border-radius: 3px;
  padding: 0 2px;
  cursor: help;
  position: relative;
  font-weight: 500;
  border-bottom: 2px solid #fcd34d;
}
/* 文字が続いている隣の印との境目（#671）。**余白と角丸をそこだけ落とす。**

   上の `padding: 0 2px` は「印の左右に少し余白を置く」ためのものだが、1件の指摘が
   別の指摘の span で 2〜3個に割れると**文の中に 4〜8px の空白が入る**。日本語は
   分かち書きしないので、そこで語が切れて見え、1件の指摘が別々の印に読める
   （`renderHighlightedText` が文字単位で占有を解くようになって分割が普通に起きる）。

   隣接の判定は JS 側（`renderSpan`）。**`.highlight + .highlight` では書けない** ——
   隣接兄弟セレクタは間のテキストノードを無視するので、文字を挟んで離れている
   2つの印にも当たってしまう。 */
.highlight.hl-join-prev {
  padding-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.highlight.hl-join-next {
  padding-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* 校正テキストの本文に既に反映されている指摘（校正 = proofread）だけ緑にする。
   黄＝まだ直っていない箇所 / 緑＝もう直っている箇所。校正以外の指摘（要注意ワード・校閲・
   新聞用語集・カタカナ・原文照合）は本文に反映されないため黄のままになる。
   未反映の方が多数派なので、少数派である反映済みだけを色分けして視覚ノイズを抑える。 */
.highlight.highlight-applied {
  background-color: rgba(31, 170, 134, .14);
  border-bottom-color: var(--ok);
}
/* ファクトチェックで裏付けが取れた記述（verdict="correct"）。
   claim 単位になって項目数が1桁増えたので、要確認と同じ黄色にすると原稿が
   黄色で埋まり、直すべき箇所が埋もれる。「検証した」という情報は残しつつ、
   目を引かない薄い破線だけにする。 */
.highlight.highlight-verified {
  background-color: transparent;
  border-bottom: 1px dashed rgba(31, 170, 134, .55);
  font-weight: 400;
}
.highlight.highlight-verified:hover {
  background-color: rgba(31, 170, 134, .10);
}
/* 確認ケース（#609 の 4）。**指摘ではない** ——「原稿にこの表現があるので、
   こういうケースとして確認してほしい」という示唆。偽陽性に寛容な設計なので
   件数が多く（実原稿の実測で1本あたり中央値 3.5 ケース）、黄色にすると
   断定した指摘が埋もれる。`highlight-verified` と同じ考え方で、
   目を引かない点線だけにする（色は青系にして「検証済み」の緑と区別する）。 */
.highlight.highlight-hint {
  background-color: transparent;
  border-bottom: 1px dotted rgba(59, 122, 237, .65);
  font-weight: 400;
}
.highlight.highlight-hint:hover {
  background-color: rgba(59, 122, 237, .10);
}
/* **ダークでも背景を消す（レビュー指摘）。**
   `body[data-theme="dark"] .highlight`（`css/dark_overrides.css`）は詳細度 (0,2,1) で、
   `.highlight.highlight-hint` の (0,2,0) に勝つ。**色を消したはずの2つが
   ダークでは指摘と同じ黄色になっていた**（実測: どちらも
   `rgba(250,204,21,.25)`）。border だけ上書きしても背景は残る。
   `highlight-verified` も同じ形で、こちらは #609 より前からある。 */
body[data-theme="dark"] .highlight.highlight-hint {
  background-color: transparent;
  border-bottom-color: rgba(147, 187, 255, .7);
}
body[data-theme="dark"] .highlight.highlight-hint:hover {
  background-color: rgba(147, 187, 255, .14);
}
/* 未確認（#760）。**指摘ではなく「調べていない範囲」。**
   確認ケース（青の点線）と同じ見え方にしない —— あちらは「こう問題になり得る」
   という示唆で、こちらは「この記述については何も言っていない」。意味が違う印を
   同じ色にすると凡例が1つしか説明できなくなる。灰色の点線にして、
   指摘（黄）・裏付けあり（緑）・示唆（青）のどれとも別に見えるようにする。
   **ダークでの背景の打ち消しは `highlight-hint` と同じ理由**（上のコメント）。 */
.highlight.highlight-unverified {
  background-color: transparent;
  border-bottom: 1px dotted rgba(107, 114, 128, .7);
  font-weight: 400;
}
.highlight.highlight-unverified:hover {
  background-color: rgba(107, 114, 128, .10);
}
body[data-theme="dark"] .highlight.highlight-unverified {
  background-color: transparent;
  border-bottom-color: rgba(156, 163, 175, .7);
}
body[data-theme="dark"] .highlight.highlight-unverified:hover {
  background-color: rgba(156, 163, 175, .14);
}
body[data-theme="dark"] .highlight.highlight-verified {
  background-color: transparent;
  border-bottom-color: rgba(94, 232, 192, .55);
}
body[data-theme="dark"] .highlight.highlight-verified:hover {
  background-color: rgba(94, 232, 192, .12);
}
/* ツールチップは ::after ではなく body 直下の単一要素 (.hl-tooltip) で出す。
   ::after は「校正テキスト」のように overflow:auto なコンテナの中にあると
   はみ出した分が切り取られるため、パネル端の指摘でツールチップが読めなかった。
   position:fixed の要素なら祖先の overflow に切られず、画面内にも収められる。
   実装は js/features/highlight_tooltip.js。*/
.highlight.is-tooltip-open {
  outline: 2px solid rgba(59, 122, 237, .55);
  outline-offset: 1px;
}
.hl-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  max-width: 360px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #1f2937;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .18), 0 2px 4px -1px rgba(0, 0, 0, .10);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease-in-out;
  pointer-events: none;
}
.hl-tooltip.is-visible { opacity: 1; visibility: visible; }
/* ピン留め中だけ本文を選択・コピーできるようにする（ホバー中に pointer-events を
   有効にすると、ツールチップ自身がカーソルを奪って点滅する）。 */
.hl-tooltip.is-pinned { pointer-events: auto; user-select: text; }
.hl-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.hl-tooltip[data-placement="top"] .hl-tooltip__arrow {
  top: 100%;
  border-top-color: #1f2937;
}
.hl-tooltip[data-placement="bottom"] .hl-tooltip__arrow {
  bottom: 100%;
  border-bottom-color: #1f2937;
}

/* ── NTV Eye compliance highlight (red/orange) ── */
.highlight.highlight-ntv-eye {
  background-color: #fed7aa;
  border-bottom: 2px solid #f97316;
  cursor: pointer;
}
.highlight.highlight-ntv-eye:hover {
  background-color: #fdba74;
}

/* ── Flash animation for jump target ── */
@keyframes flashPulse {
  0%   { background-color: rgba(251, 146, 60, 0.55) !important; box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.6); }
  40%  { background-color: rgba(251, 146, 60, 0.3) !important; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.3); }
  100% { background-color: transparent !important; box-shadow: none; }
}
.line-row.flash-highlight {
  animation: flashPulse 2s ease-out !important;
  border-radius: 4px;
}
.highlight-ntv-eye.flash-highlight {
  animation: flashPulseNtvEye 2s ease-out !important;
}
@keyframes flashPulseNtvEye {
  0%   { background-color: #fb923c !important; }
  40%  { background-color: #fed7aa !important; }
  100% { background-color: #fed7aa !important; }
}

/* Jump hint on risk cards */
.ntv-eye-jump-hint {
  cursor: pointer;
  color: #2563eb;
  transition: color 0.15s;
}
.ntv-eye-jump-hint:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ── Proof inline diff (used in #finalText) ── */
.proof-diff {
  position: relative;
  cursor: help;
  border-radius: 3px;
  padding: 0 1px;
}
.proof-diff-del {
  background-color: #fecaca;
  color: #991b1b;
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 2px;
}
.proof-diff-ins {
  background-color: #bbf7d0;
  color: #166534;
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}
.proof-diff-warn {
  background-color: #fef08a;
  border-bottom: 2px solid #facc15;
  font-weight: 500;
}
/* Tooltip は .highlight と共通の .hl-tooltip が出す（highlight_tooltip.js）。 */
/* ── Dark mode: proof-diff ── */
body[data-theme="dark"] .proof-diff-del {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
body[data-theme="dark"] .proof-diff-ins {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
body[data-theme="dark"] .proof-diff-warn {
  background-color: rgba(250, 204, 21, 0.2);
  border-bottom-color: rgba(250, 204, 21, 0.6);
}

/* ── #finalText (monospace editor) ── */
#finalText {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  appearance: none;
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  width: 100%;
  min-height: 200px;
  word-wrap: break-word;
  overflow: visible;
}
.line-row { display: flex; line-height: 1.8; }
.line-row:hover { background-color: #f3f4f6; }
.line-number {
  flex: none;
  width: 3.5rem;
  text-align: right;
  padding-right: 0.75rem;
  padding-left: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  color: var(--text-muted);
  background-color: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  user-select: none;
  font-size: 0.85rem;
}
.line-content {
  flex-grow: 1;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── ガター: 行ごとの「確認できたか」（#609） ──
   **本文の文字には触らない独立した列。** 確認済みの範囲を文字の背景や下線で示すと
   指摘のハイライトと同じ座標を奪い合う（`renderHighlightedText` の占有は文字単位の
   先勝ちなので、行全体を覆う印を入れると指摘の印が飲まれる）。列を分ければ被りは
   原理的に起こらない。

   **既定は目立たせない。** 全行が確認済みなのが普通なので、確認済みを目立たせると
   毎回全面に色が乗って読まれなくなる（#407 v1 の轍）。目を引かせるのは欠けた側だけ。 */
.line-gutter {
  flex: none;
  display: flex;
  gap: 1px;
  align-items: stretch;
  width: 7px;
  margin-right: 2px;
  cursor: help;
}
.cov-bar { flex: 1 1 0; border-radius: 1px; }
/* 確認できた行: ほとんど見えない薄さ。「全体に薄い帯が通っている」だけが読み取れればよい */
.cov-checked { background-color: rgba(31,170,134,.22); }
/* 未検査: 警告色でしっかり出す。**ここが見えないと「問題なし」と同じ画面になる** */
.cov-unchecked { background-color: var(--warn, #f59e0b); }
/* 途中まで（行が長すぎて切った） */
.cov-partial {
  background-image: repeating-linear-gradient(
    180deg, var(--warn, #f59e0b) 0 3px, transparent 3px 6px);
}
/* このチェックの記録が無い行: 何も塗らない（推測で塗らない） */
.cov-unknown { background-color: transparent; }
/* ツールチップを開いている行のガター。`.highlight` と同じ合図を出す
   （`is-tooltip-open` は共有のツールチップが付ける）。 */
.line-gutter.is-tooltip-open { outline: 2px solid rgba(59,122,237,.55); outline-offset: 1px; }
.line-gutter-cell { width: 9px; padding: 0; }
/* **行番号列と一緒に固定する（レビュー指摘）。**
   表モードは横スクロールするので（`.table-scroll`）、固定しないとガターだけが
   流れていく。しかも行番号列は `left: 0` の sticky で不透明な背景を持つので、
   ガターはその**下に潜って消える** —— 横に長い構成表、つまりこの印が一番要る
   入力で、スクロールした瞬間に「どこを確認済みか」が見えなくなる。
   `left` は行番号列の幅（`.line-number` の `width: 3.5rem`）に合わせる。
   背景を不透明にするのは行番号列と同じ理由（下をセルが流れる）。 */
.line-row.table-row > .line-gutter-cell {
  display: table-cell;
  vertical-align: top;
  position: sticky;
  left: 3.5rem;
  z-index: 1;
  background-color: #f3f4f6;
}
body[data-theme="dark"] .line-row.table-row > .line-gutter-cell { background-color: #20202f; }
.line-row.table-row > .line-gutter-cell > .line-gutter { height: 100%; min-height: 1.4em; }

/* ── 出どころのフィルタ（#609） ──
   選んだ種類以外を**薄くする（消さない）**。消すと「その箇所には何も無い」に見えて、
   フィルタを外すまで気づけない。 */
.highlight.hl-dimmed {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  font-weight: 400;
  opacity: .55;
}
/* 絞り込みで対象外になった右ペインのセクション（#609）。
   **見出しは残して中身だけ畳む。** 消すと「そのチェックは走っていない」に見え、
   カードを1枚ずつ薄くするだけだと見出しと件数の列が残って縦に長くなる
   （絞り込んだのに探しにくい）。 */
.res-section.is-filtered-out { opacity: .45; }
.res-section.is-filtered-out > .res-section-body { display: none; }
.res-section.is-filtered-out > .res-section-header { cursor: default; }
.hl-filter-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  align-self: center;
  margin-left: 4px;
}
.stat-chip.hl-filter-chip {
  cursor: pointer;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
}
.stat-chip.hl-filter-chip:hover { border-color: rgba(59,122,237,.45); color: var(--text); }
.stat-chip.hl-filter-chip.is-active {
  border-color: var(--pri);
  background: rgba(59,122,237,.12);
  color: var(--pri);
}

/* ── 表形式（`.csv` / `.xlsx`）の原稿（#408） ──
   セルの概念を保ったまま結果を出す。**本物の `<table>` を使うのは、列を
   行またぎで揃えるにはブラウザの表レイアウトが要るため**（flex や grid は
   行ごとに独立するので、同じ列が行によって違う幅になる）。
   そのぶん `.line-row` / `.line-content` の flex 指定を打ち消す必要がある。 */
.table-scroll { overflow-x: auto; }
.table-view {
  display: table;
  /* **`max-content` + `min-width: 100%`。** ペインは狭く列は多い（構成表で7列）
     ので、`width: 100%` にすると全列が min-content まで潰れて本文が読めない。
     内容なりの幅を取らせて、入りきらない分は `.table-scroll` で横に送る。
     本文列が青天井にならないよう、幅の上限は `.table-cell-body` で押さえる。 */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.line-row.table-row { display: table-row; }
.line-row.table-row > .line-number,
.line-row.table-row > .line-content {
  display: table-cell;
  vertical-align: top;
}
/* **行番号は横スクロールしても残す。** 本文の列は右にあるので、そこまで
   スクロールすると行番号が画面外に出る。指摘のカードは行番号で場所を示すので、
   見えなくなると照合できない。

   **背景を不透明にしておくこと。** 固定した列の下をセルが流れるので、
   透けると文字が重なって読めなくなる。既定の `.line-number` の背景は
   ライトが `#f3f4f6`（不透明）なのに対し、ダークは `rgba(255,255,255,.03)`
   （ほぼ透明）なので、ダーク側だけ別に指定する。 */
.line-row.table-row > .line-number {
  position: sticky;
  left: 0;
  z-index: 1;
}
.line-content.table-cell {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-left: 1px solid #e5e7eb;
  /* **`min-width` が要る。** 表レイアウトは各列に min-content 以上の幅しか
     保証せず、本文の列だけが極端に長いと残りは min-content まで潰される。
     日本語はどこでも改行できるので min-content は1文字分になり、
     短い列が縦1列に化ける（実測。構成表の「放送日」が3行に割れた）。
     合計が入りきらないときは `.table-scroll` が横スクロールを出す。 */
  min-width: 4.5em;
  /* `.line-content` の `break-all` を打ち消す（英単語まで途中で割れる）。 */
  word-break: normal;
  overflow-wrap: anywhere;
}
/* 空のセルは最小幅を主張しない。列の幅はその列の最大値で決まるので、
   **全行で空の列**（構成表の V / Na / BG）だけが詰まり、本文列が手前に来る。
   列そのものは残す（消すと「あった列が無い」になる）。 */
.line-content.table-cell.is-empty { min-width: 0; }
/* 本文列の幅の上限。**`td` に直接 `max-width` を書いても効かない**
   （`table-layout: auto` は無視する）ので、中に1枚挟んでそちらに掛ける。 */
.table-cell-body { max-width: 42ch; }
/* 列を持たない行（タブを含まない行）。`colspan` で幅いっぱいに出す。
   xlsx のシート見出しに加えて、docx では表の外の段落（タイトル・尺表）と
   行全体が1個の結合セルになっている見出し行がここに来る。

   **見出しの装飾はここに書かない。** docx の1列だけの表は全行がここを通るので、
   灰色の太字にすると本文が全部そう見える。装飾は
   `.table-sheet-heading`（`=== シート: <名> ===` にだけ付く）側に置く。 */
.line-content.table-full-row {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  word-break: normal;
  overflow-wrap: anywhere;
}
.line-content.table-sheet-heading {
  color: #6b7280;
  font-weight: 600;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
}
/* 固定した行番号列が透けないようにする（上の `position: sticky` の注記）。
   `#20202f` は既定の見た目（`#1a1a2e` のペインに白 3%）をそのまま不透明にした値。
   見た目を変えずに透過だけを消すのが狙い。 */
body[data-theme="dark"] .line-row.table-row > .line-number { background-color: #20202f; }
body[data-theme="dark"] .line-content.table-cell { border-left-color: #374151; }
body[data-theme="dark"] .line-content.table-sheet-heading {
  color: #9ca3af;
  background-color: rgba(255,255,255,.03);
  border-top-color: #374151;
}