/* ============================================================
   editor.css — エディター / 行番号 / プレビュー / Lint
   色は theme.css の変数のみを参照します。
   ============================================================ */

/* ---- エディター本体 ---- */
.editor-wrap{
  flex:1;min-height:0;display:grid;grid-template-columns:46px minmax(0,1fr);
  background:var(--surface);overflow:hidden;position:relative;
}

/* F7 フェーズ2: 行ベース格子（最大2行×横複数・合計最大4）。
   .editor-surfaces（縦flex）→ .editor-row（横flex）→ .editor-surface（タブバー＋.editor-wrap を縦積み）。
   列間に縦仕切り .editor-split.col-split、行間に横仕切り .editor-split.row-split。 */
.editor-surfaces{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.editor-row{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:row;align-items:stretch}
.editor-surface{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.editor-surface > .editor-wrap{flex:1;min-height:0}
.editor-split{background:var(--border);opacity:.35;transition:opacity .15s}
.editor-split.col-split{flex:0 0 6px;align-self:stretch;cursor:col-resize}
.editor-split.row-split{flex:0 0 6px;cursor:row-resize}
.editor-split:hover,.editor-split.dragging{opacity:1;background:var(--brand)}
/* ファイル/タブのドロップ受け入れ中の方向ゾーン予告（エディタ内容より前面）。
   枠線は box-shadow:inset で常時くっきり（端で切れない・点滅しない）、背景色だけをゆっくり点滅。 */
@keyframes sme-pane-pulse{0%,100%{background-color:color-mix(in srgb,var(--brand) 10%,transparent)}50%{background-color:color-mix(in srgb,var(--brand) 30%,transparent)}}
.editor-surface .split-drop-hint{position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--brand);border-radius:4px;pointer-events:none;display:none;z-index:45;animation:sme-pane-pulse 1.6s ease-in-out infinite}
.editor-surface.dz-center .split-drop-hint{display:block}
.editor-surface.dz-left .split-drop-hint{display:block;right:auto;width:42%}
.editor-surface.dz-right .split-drop-hint{display:block;left:auto;width:42%}
.editor-surface.dz-top .split-drop-hint{display:block;bottom:auto;height:42%}
.editor-surface.dz-bottom .split-drop-hint{display:block;top:auto;height:42%}
/* 「ペインNへ移動」メニューのホバーで対象ペイン全体を前面オーバーレイで強調（点滅）。
   CM の不透明背景に隠れないよう ::after を使う（枠は inset box-shadow で常時表示）。 */
.editor-surface.pane-hl::after{content:"";position:absolute;inset:0;z-index:44;pointer-events:none;box-shadow:inset 0 0 0 3px var(--brand);animation:sme-pane-pulse 1.6s ease-in-out infinite}

/* 検索・置換バー（エディター右上にオーバーレイ） */
.find-bar{
  position:absolute;top:8px;right:14px;z-index:50;width:360px;
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border-strong);
  border-radius:10px;box-shadow:var(--shadow-pop);overflow:hidden;
}
/* #22: 検索/置換ウインドウのタイトルバー（Grep の grep-titlebar とスタイル統一）。
   タイトルを左、検索件数（find-count）を右端、その横に閉じるボタン。 */
.find-titlebar{display:flex;align-items:center;gap:8px;padding:7px 6px 7px 12px;background:var(--surface);border-bottom:1px solid var(--border);user-select:none;flex:0 0 auto}
.find-title{font-size:12px;font-weight:700;color:var(--text)}
.find-body{display:flex;flex-direction:column;gap:6px;padding:8px}
/* hidden 属性が付いている時は確実に隠す（display:flex より優先） */
.find-bar[hidden]{display:none}
.find-row[hidden]{display:none}
.find-row{display:flex;align-items:center;gap:4px}
/* 検索ボックス・置換ボックス（履歴ラッパー sh-wrap）は残り幅いっぱいに伸ばす。
   ボタン群は find-row-btns で固定幅に揃えるので、両行で input 幅が一致し、
   かつボックスとウインドウ右端の隙間も詰まる。 */
.find-row .sh-wrap{flex:1 1 auto;min-width:0}
/* ボタン群コンテナ。検索行（ナビ3個）と置換行（置換ボタン2個）で必要幅が違うが、
   min-width を揃えて両行の入力ボックス幅を一致させ、ボタンは右寄せにする。 */
.find-row-btns{flex:0 0 auto;display:flex;align-items:center;gap:4px;justify-content:flex-end;min-width:132px}
.find-row input{
  box-sizing:border-box;width:100%;
  padding:5px 8px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text);font-size:13px;
}
/* 検索件数はタイトルバーの右端（grep-msg 相当）。閉じるボタンの左に置く。 */
.find-count{font-size:12px;color:var(--muted);min-width:42px;text-align:right;margin-left:auto;white-space:nowrap}
.find-count.find-error{color:var(--danger);font-weight:700}
/* ナビ系アイコンボタン（前/次/置換/閉じる）はサイズを統一 */
.find-nav{width:30px;height:30px;padding:0;display:inline-grid;place-items:center;flex:none}
.find-nav .hdr-ic{width:18px;height:18px}
.find-rep-btn{padding:5px 10px;font-size:12px;flex:none}
/* オプション行（最下部）：正規表現・循環をラベル付きで小さくまとめる */
.find-opts{gap:6px;padding-top:2px;border-top:1px solid var(--border);margin-top:1px}
.find-opt{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  font-size:12px;font-weight:700;color:var(--muted);
  border:1px solid var(--border);border-radius:7px;background:transparent;
}
.find-opt .find-opt-ic{font-weight:800;font-family:Consolas,monospace;font-size:12px}
.find-opt .find-opt-ic-svg{width:14px;height:14px}
.find-opt.toggle-on{background:var(--brand-tint-3);color:var(--brand-ink-strong);border-color:var(--brand-soft)}

/* ---- 行番号ガター ---- */
.line-gutter{
  min-height:0;overflow:hidden;position:relative;
  border-right:1px solid var(--border);background:var(--gutter-bg);
  color:var(--gutter-fg);font-family:var(--editor-font);
  font-size:var(--editor-size);line-height:var(--editor-line);
  padding:0;user-select:none;text-align:right;
}
.line-gutter-inner{position:absolute;top:0;left:0;right:0;padding:0;will-change:transform}
.line-gutter div{
  height:calc(var(--editor-size) * var(--editor-line));
  line-height:calc(var(--editor-size) * var(--editor-line));
  padding:0 8px 0 4px;border-left:3px solid transparent;white-space:nowrap;position:relative;
}
.line-gutter div.warn{background:var(--warn-tint);border-left-color:var(--warn-border);color:var(--warn-ink);font-weight:800}
.line-gutter div.gutter-ln{cursor:pointer}
.line-gutter div.gutter-ln:hover{color:var(--brand);background:var(--brand-tint-2)}
.line-gutter div.error{background:var(--danger-tint-2);border-left-color:var(--danger);color:var(--danger);font-weight:800}
/* 編集行の差分（右端＝Lintの左ボーダーと競合しない）：追加/変更=緑バー、削除=赤い三角 */
.line-gutter div.diff-add{box-shadow:inset -3px 0 0 0 var(--diff-add)}
.line-gutter div.diff-del::after{content:"";position:absolute;right:0;top:0;border:4px solid transparent;border-right-color:var(--diff-del);border-top-color:var(--diff-del)}
.line-gutter div.diff-del-end::after{content:"";position:absolute;right:0;bottom:0;border:4px solid transparent;border-right-color:var(--diff-del);border-bottom-color:var(--diff-del)}

.editor-wrap textarea{
  grid-column:2;grid-row:1;
  min-height:0;width:100%;height:100%;resize:none;border:0;outline:none;padding:14px;
  background:transparent;color:var(--text);font-family:var(--editor-font);
  font-size:var(--editor-size);line-height:calc(var(--editor-size) * var(--editor-line));
  tab-size:var(--editor-tab);overflow:auto;position:relative;z-index:2;
}
/* 構文ハイライトON時：textareaの文字を透明にして裏の色付き層を見せる（キャレットは表示） */
.editor-wrap.syn-on textarea{color:transparent;caret-color:var(--text)}

/* MD013（行長）の目安となる縦ガイド線。設定「行長の縦ガイド線を表示する」が ON のときだけ
   表示する（.editor-wrap.guide-on）。全角2・半角1換算の maxLineLength（--guide-col）位置に
   薄い線を引き、background-attachment:local で横スクロールにも追従する。
   v356: CodeMirror 6 移行後の .cm-content にも同じ位置で線が出るようにセレクタを拡張。
   .cm-line の左 padding 14px と textarea の padding 14px が一致するので、計算式は共通。 */
.editor-wrap.guide-on textarea,
.editor-wrap.guide-on .cm-content{
  background-image:linear-gradient(to right,
    transparent calc(14px + var(--guide-col) * 1ch),
    var(--guide-line) calc(14px + var(--guide-col) * 1ch),
    var(--guide-line) calc(14px + var(--guide-col) * 1ch + 1px),
    transparent calc(14px + var(--guide-col) * 1ch + 1px));
  background-repeat:no-repeat;
  background-attachment:local;
}

/* ===== 空白文字の可視化 =====
   透明にした textarea の裏に、同じフォント/サイズ/行間/タブ幅/パディングの
   オーバーレイを重ね、空白文字だけを薄い記号・線で描く。スクロールは JS で同期。 */
.ws-overlay{grid-column:2;grid-row:1;position:relative;overflow:hidden;pointer-events:none;min-width:0;min-height:0;z-index:1}
.ws-overlay[hidden]{display:none}
.ws-overlay-inner{
  position:absolute;top:0;left:0;margin:0;padding:14px;
  font-family:var(--editor-font);font-size:var(--editor-size);
  line-height:calc(var(--editor-size) * var(--editor-line));
  tab-size:var(--editor-tab);white-space:pre;color:transparent;will-change:transform;
}
/* 半角スペース：各マスの中央に薄い点 */
.ws-overlay-inner .ws-sp{
  background-image:radial-gradient(circle at center, var(--ws-mark) 0, var(--ws-mark) .9px, transparent 1.1px);
  background-size:1ch calc(var(--editor-size) * var(--editor-line));background-repeat:repeat;background-position:0 0;
}
/* タブ：先頭に薄い矢印 */
.ws-overlay-inner .ws-tab{position:relative}
.ws-overlay-inner .ws-tab::before{content:"\2192";position:absolute;left:1px;top:0;color:var(--ws-mark)}
/* 全角スペース：中央に薄い四角 */
.ws-overlay-inner .ws-fw{position:relative}
.ws-overlay-inner .ws-fw::before{content:"\25A1";position:absolute;left:0;right:0;text-align:center;color:var(--ws-mark)}
/* 改行：行末に薄い記号（幅0でレイアウトに影響させない） */
.ws-overlay-inner .ws-eol{display:inline-block;width:0;overflow:visible;color:var(--ws-mark)}
/* インデントガイド：先頭空白に1段ごとの薄い縦線 */
.ws-overlay-inner .ws-lead{
  background-image:repeating-linear-gradient(to right,
    transparent 0, transparent calc(var(--ws-step,4ch) - 1px),
    var(--ws-guide) calc(var(--ws-step,4ch) - 1px), var(--ws-guide) var(--ws-step,4ch));
}
/* 項目ごとの表示ON/OFF（設定に応じてオーバーレイにクラスを付与して切り替え） */
.ws-overlay-inner.ws-no-sp .ws-sp{background-image:none}
.ws-overlay-inner.ws-no-tab .ws-tab::before{content:none}
.ws-overlay-inner.ws-no-fw .ws-fw::before{content:none}
.ws-overlay-inner.ws-no-eol .ws-eol{display:none}
.ws-overlay-inner.ws-no-guide .ws-lead{background-image:none}

/* ===== CodeMirror 6 ネイティブの空白可視化（v356）=====
   旧 textarea オーバーレイ実装を置き換える。cm-init.js の MatchDecorator+wsPlugin が
   半角スペース／タブ／全角スペースに class を付与し、ここで ::before で記号を重ねる。
   文字幅は変えず、絶対配置で記号だけ重ねるので CM6 のレイアウトを壊さない。 */
.cm-content .cm-ws-space,
.cm-content .cm-ws-tab,
.cm-content .cm-ws-full{position:relative}
.cm-content .cm-ws-space::before,
.cm-content .cm-ws-tab::before,
.cm-content .cm-ws-full::before{
  position:absolute;color:var(--ws-mark);pointer-events:none;
  font-family:var(--editor-font);font-size:inherit;line-height:inherit;
}
.cm-content .cm-ws-space::before{content:"\00b7";left:0;right:0;text-align:center}
.cm-content .cm-ws-tab::before{content:"\2192";left:1px;top:0}
.cm-content .cm-ws-full::before{content:"\25A1";left:0;right:0;text-align:center;top:0}
/* 改行記号（行末widget）：幅0で文字幅に影響しない、薄い色で表示 */
.cm-content .cm-ws-eol{display:inline-block;width:0;overflow:visible;color:var(--ws-mark);pointer-events:none;font-family:var(--editor-font);font-size:0.95em;line-height:1;vertical-align:baseline;font-variant-emoji:text}
/* EOF（ファイル末尾）記号 [EOF]。色は薄く、ws-no-eofで非表示 */
.cm-content .cm-ws-eof{display:inline-block;color:var(--ws-mark);pointer-events:none;font-family:var(--editor-font);font-size:0.85em;line-height:1;vertical-align:baseline;opacity:0.7;margin-left:2px}
.editor-wrap.ws-no-eof .cm-content .cm-ws-eof{display:none}
/* インデントガイド線：行頭空白の連続部分に repeating-linear-gradient で 4ch ごとの縦線。
   旧 .ws-overlay-inner .ws-lead と同じ計算式を流用するため見た目はほぼ同一。 */
.cm-content .cm-ws-lead{
  background-image:repeating-linear-gradient(to right,
    transparent 0, transparent calc(var(--ws-step,4ch) - 1px),
    var(--ws-guide) calc(var(--ws-step,4ch) - 1px), var(--ws-guide) var(--ws-step,4ch));
}
/* サブ設定で項目別ON/OFF：.editor-wrap.ws-no-* で対応する記号を消す（既存ws-overlayと同じ命名） */
.editor-wrap.ws-no-sp .cm-content .cm-ws-space::before{content:none}
.editor-wrap.ws-no-tab .cm-content .cm-ws-tab::before{content:none}
.editor-wrap.ws-no-fw .cm-content .cm-ws-full::before{content:none}
.editor-wrap.ws-no-eol .cm-content .cm-ws-eol{display:none}
.editor-wrap.ws-no-guide .cm-content .cm-ws-lead{background-image:none}

/* ===== Markdown構文ハイライト（最下層・色のみ・幅を変えない） ===== */
.syn-overlay{grid-column:2;grid-row:1;position:relative;overflow:hidden;pointer-events:none;min-width:0;min-height:0;z-index:0}
.syn-overlay[hidden]{display:none}
.syn-overlay-inner{
  position:absolute;top:0;left:0;margin:0;padding:14px;
  font-family:var(--editor-font);font-size:var(--editor-size);
  line-height:calc(var(--editor-size) * var(--editor-line));
  tab-size:var(--editor-tab);white-space:pre;color:var(--text);will-change:transform;
}
/* トークン色（font-weight/style は変えない＝裏のtextareaと文字幅を一致させるため） */
.syn-heading{color:var(--syn-heading)}
.syn-strong{color:var(--syn-strong)}
.syn-em{color:var(--syn-em)}
.syn-code{color:var(--syn-code)}
.syn-link{color:var(--syn-link)}
.syn-url{color:var(--syn-url)}
.syn-marker{color:var(--syn-marker)}
/* リストマーカー（深いネストでCM6が認識しないものも含む）の配色 */
.cm-content .cm-list-marker{color:var(--syn-marker)}
.syn-comment{color:var(--syn-comment)}
.syn-fence{color:var(--syn-fence)}
.syn-strike{color:var(--syn-url)}
.syn-escape{color:var(--syn-escape)}

/* ---- プレビューのリンク履歴パンくず ---- */
.peek-crumbs[hidden]{display:none}
.peek-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:6px 12px;border-bottom:1px solid var(--border);
  background:var(--soft);font-size:12px;line-height:1.4;flex:none;
}
.peek-crumb{
  border:0;background:transparent;color:var(--link);cursor:pointer;
  padding:2px 6px;border-radius:6px;font-size:12px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.peek-crumb:hover{background:var(--brand-tint-2);text-decoration:underline}
.peek-crumb.current{color:var(--text);font-weight:700;cursor:default;text-decoration:none}
.peek-crumb.current:hover{background:transparent}
.peek-crumb-sep{color:var(--muted);font-size:12px;padding:0 1px;user-select:none}

/* ---- プレビュー ---- */
.preview{
  flex:1;min-height:0;overflow:auto;padding:14px 20px 32px;
  background:var(--surface);font-family:var(--preview-font);
  font-size:var(--preview-size,16px);
  line-height:var(--preview-line,1.65);word-break:break-word;
}
/* 折り返さず横スクロール（改行は \ で指定）: 本文系のみ nowrap。表・コードは各自のスクロールに任せる */
.preview.no-wrap{word-break:normal}
.preview.no-wrap p,.preview.no-wrap li,.preview.no-wrap h1,.preview.no-wrap h2,.preview.no-wrap h3,.preview.no-wrap h4,.preview.no-wrap h5,.preview.no-wrap h6,.preview.no-wrap blockquote{white-space:nowrap}
.preview p{margin:.6em 0}
.preview p:first-child{margin-top:0}
.preview ul,.preview ol{margin:.5em 0;padding-left:1.5em}
.preview li{margin:.2em 0}
/* ネストした箇条書きは ○→●→■、番号は数字→英字→ローマ数字に切り替える */
.preview ul{list-style-type:disc}
.preview ul ul{list-style-type:circle}
.preview ul ul ul{list-style-type:square}
.preview ol{list-style-type:decimal}
.preview ol ol{list-style-type:lower-alpha}
.preview ol ol ol{list-style-type:lower-roman}
.preview li>ul,.preview li>ol{margin:.2em 0}
.preview h1,.preview h2,.preview h3{margin:1em 0 .5em}
.preview h1:first-child,.preview h2:first-child{margin-top:0}
.preview h1,.preview h2{border-bottom:1px solid var(--border);padding-bottom:.25em}
/* エディターの選択行に対応するプレビュー要素を薄くハイライト */
.preview .active-line{
  background:var(--brand-tint-2);
  border-radius:6px;
  box-shadow:0 0 0 4px var(--brand-tint-2);
}
/* コードブロックがアクティブな時は、黒背景(--code-bg)は保ったまま枠だけ発光させる。
   .active-line の薄い背景色を打ち消すのが重要（これが効いてコードが薄くなっていた） */
.preview .codeblock.active-line{
  background:var(--code-bg) !important;
  box-shadow:0 0 0 2px var(--brand-soft),0 0 10px 1px var(--brand-tint-4);
  outline:none;
}
/* インラインコード（文中の `code`）の白系背景 */
.preview code{padding:.16em .38em;border-radius:6px;background:var(--inline-code-bg);font-family:Consolas,monospace}
/* コードブロック内の code は上の指定より優先して地色なしにする（.codeblock の --code-bg を活かす）。
   詳細度を上げるため .preview .codeblock を前置 */
.preview .codeblock .cb-body code,
.preview .codeblock .cb-body pre,
.preview .codeblock .cb-line,
.preview .codeblock .cb-line code{
  background:transparent;padding:0;border-radius:0;
}
.preview table{width:100%;border-collapse:collapse;margin:1em 0}
.preview th,.preview td{border:1px solid var(--border);padding:8px 10px}
.preview th{background:var(--soft)}
.preview .task-list-item{list-style:none}
.preview .task-list-item input{margin-right:.45em;vertical-align:-.1em}

/* 引用（blockquote）— 上品なデザイン */
.preview blockquote{
  margin:1em 0;padding:.7em 1em .7em 1.1em;
  border-left:4px solid var(--brand-soft);
  background:var(--brand-tint-1);
  border-radius:0 8px 8px 0;
  color:var(--brand-ink);
}
.preview blockquote p{margin:.35em 0}
.preview blockquote p:first-child{margin-top:0}
.preview blockquote p:last-child{margin-bottom:0}
/* ネストした引用 */
.preview blockquote blockquote{margin:.5em 0;background:var(--brand-tint-2)}

/* Mermaid図ブロック */
.preview .mermaid-block{margin:1em 0;text-align:center;overflow:auto}
.preview .mermaid-block svg{max-width:100%;height:auto}
.preview .mermaid-src{
  display:block;text-align:left;white-space:pre-wrap;
  background:var(--code-bg);color:var(--code-fg);
  padding:10px 12px;border-radius:8px;font-family:Consolas,monospace;font-size:13px;
}
.preview .mermaid-block[data-done="ok"] .mermaid-src{display:none}
.mermaid-error{color:var(--danger);font-size:13px;margin-bottom:6px;text-align:left}
.preview img{max-width:100%;border-radius:8px}
.preview a{color:var(--link)}
.preview hr{border:0;border-top:2px solid var(--border);margin:1.4em 0}

/* ===== コードブロック（言語バッジ・行番号・折りたたみ・コピー） ===== */
.codeblock{
  margin:1em 0;border-radius:12px;overflow:hidden;
  background:var(--code-bg);border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 14px rgba(15,23,42,.12);
}
.cb-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px 6px 6px;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cb-head-left{display:flex;align-items:center;gap:8px;min-width:0}
/* ファイル名表示 */
.cb-file{
  font-size:12px;color:#9aa5b1;font-family:Consolas,Monaco,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 言語バッジ。data-lang ごとに左のドット色を変える */
.cb-lang{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.02em;color:#e6edf3;
  font-family:var(--ui-font);
}
.cb-lang::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--cb-dot,#8b949e);box-shadow:0 0 6px var(--cb-dot,#8b949e);
}
.cb-lang-none{color:#8b949e}
.cb-lang-none::before{background:#8b949e;box-shadow:none}
/* 言語別カラー */
.cb-lang[data-lang="javascript"],.cb-lang[data-lang="js"],.cb-lang[data-lang="jsx"]{--cb-dot:#f1e05a}
.cb-lang[data-lang="typescript"],.cb-lang[data-lang="ts"],.cb-lang[data-lang="tsx"]{--cb-dot:#3178c6}
.cb-lang[data-lang="python"],.cb-lang[data-lang="py"]{--cb-dot:#3572a5}
.cb-lang[data-lang="java"]{--cb-dot:#b07219}
.cb-lang[data-lang="kotlin"],.cb-lang[data-lang="kt"]{--cb-dot:#a97bff}
.cb-lang[data-lang="swift"]{--cb-dot:#f05138}
.cb-lang[data-lang="c"]{--cb-dot:#555555}
.cb-lang[data-lang="cpp"],.cb-lang[data-lang="c++"]{--cb-dot:#f34b7d}
.cb-lang[data-lang="csharp"],.cb-lang[data-lang="cs"]{--cb-dot:#178600}
.cb-lang[data-lang="go"]{--cb-dot:#00add8}
.cb-lang[data-lang="rust"],.cb-lang[data-lang="rs"]{--cb-dot:#dea584}
.cb-lang[data-lang="php"]{--cb-dot:#4f5d95}
.cb-lang[data-lang="html"]{--cb-dot:#e34c26}
.cb-lang[data-lang="css"]{--cb-dot:#563d7c}
.cb-lang[data-lang="scss"],.cb-lang[data-lang="sass"]{--cb-dot:#c6538c}
.cb-lang[data-lang="json"]{--cb-dot:#cbcb41}
.cb-lang[data-lang="yaml"],.cb-lang[data-lang="yml"]{--cb-dot:#cb171e}
.cb-lang[data-lang="bash"],.cb-lang[data-lang="shell"],.cb-lang[data-lang="sh"]{--cb-dot:#89e051}
.cb-lang[data-lang="sql"]{--cb-dot:#e38c00}
.cb-lang[data-lang="ruby"],.cb-lang[data-lang="rb"]{--cb-dot:#701516}
.cb-lang[data-lang="markdown"],.cb-lang[data-lang="md"]{--cb-dot:#083fa1}

.cb-tools{display:flex;align-items:center;gap:2px}
.cb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:26px;padding:0;border:0;border-radius:7px;
  background:transparent;color:#9aa5b1;cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .1s ease;
}
.cb-btn:hover{background:rgba(255,255,255,.1);color:#e6edf3}
.cb-btn:active{transform:translateY(1px)}
.cb-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.cb-copy.cb-copied{color:#4ade80}
.cb-toggle-ln.off{color:#5b6470;opacity:.6}
/* 折りたたみボタンの矢印（folded時に回転） */
.cb-fold .cb-ic{transition:transform .22s ease}
.codeblock.folded .cb-fold .cb-ic{transform:rotate(-90deg)}

/* 本体（折りたたみアニメーション） */
.cb-body{
  overflow:hidden;max-height:2000px;
  transition:max-height .3s ease,opacity .22s ease;
}
.codeblock.folded .cb-body{max-height:0;opacity:0}
.cb-body pre{margin:0;overflow:auto;padding:10px 0;background:transparent;color:var(--code-fg)}
.cb-body code{padding:0;background:transparent;color:inherit;font-family:Consolas,Monaco,"Courier New",monospace;font-size:13px;line-height:1.5}
/* シンタックスハイライト: github-dark の「文字色だけ」を .cb-line スコープで適用。
   背景色は一切含めないので、コードブロックの地色(--code-bg)は常に保たれる。 */
.cb-line .hljs-comment,.cb-line .hljs-quote{font-style:italic}

/* 行番号：各行を counter で採番。show-ln クラスの時だけ番号表示 */
.cb-body code{counter-reset:cbln;display:block}
.cb-line{display:block;position:relative;padding:0 14px;min-height:1.5em;transition:padding-left .25s ease}
/* 行番号表示時：左に番号列＋区切り線を設ける */
.codeblock.show-ln .cb-line{padding-left:3.6em}
/* 行番号は常に存在させ、opacity と幅でフェード切替（滑らかに） */
.cb-line::before{
  counter-increment:cbln;content:counter(cbln);
  position:absolute;left:0;top:0;width:2.6em;height:100%;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:.7em;box-sizing:border-box;
  color:#7d8896;font-size:12px;user-select:none;
  border-right:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateX(-4px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.codeblock.show-ln .cb-line::before{opacity:1;transform:translateX(0)}
.cb-line:hover{background:rgba(255,255,255,.03)}

@media (prefers-reduced-motion: reduce){
  .cb-body,.cb-fold .cb-ic{transition:none}
}

.main.preview-hidden .preview-pane{
  display:flex;padding:0;align-items:center;justify-content:center;
  background:var(--panel-translucent);border:1px solid var(--border-strong);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  position:relative;
}
/* 通常時：プレビュー中身は表示。畳み/開き時に opacity でフェード */
.preview-pane .pane-head,
.preview-pane .preview{
  opacity:1;
  transition:opacity .16s ease;
}
/* 畳み中は中身を絶対配置＋元幅で固定し、親の幅縮小で文字が折り返されるのを防ぐ。
   先に素早くフェードアウトしてから、幅アニメが進む。 */
.main.preview-hidden .preview-pane .pane-head,
.main.preview-hidden .preview-pane .preview{
  opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
  position:absolute;top:0;left:0;height:100%;
  width:var(--preview-w);min-width:var(--preview-w);
  transition:opacity .12s ease,visibility 0s linear .12s;
}
@media (prefers-reduced-motion: reduce){
  .preview-pane .pane-head,.preview-pane .preview{transition:none}
}

/* ---- Lint ---- */
/* ===== エディター下部ステータスバー（lint状態 + 改行/文字コード） ===== */
.editor-status-bar{
  display:flex;align-items:center;gap:10px;
  padding:4px 10px;border-top:1px solid var(--border);background:var(--panel);
  flex:none;min-height:30px;position:relative;
}
.lint-status-text{font-weight:700;font-size:12px}
.lint-status-text.ok{color:var(--ok,#16a34a)}
.lint-status-text.warn{color:#d97706}
.lint-status-text.error{color:var(--danger)}
.lint-status-text.off{color:var(--muted)}
.editor-status-right{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Lint詳細リスト（常時表示・元の形式） */
.lint{height:164px;min-height:64px;max-height:70vh;overflow:hidden;border-top:1px solid var(--border);background:var(--panel);flex:none;display:flex;flex-direction:column}
.lint[hidden]{display:none}
.lint-resize-handle{flex:none;height:4px;margin-top:-1px;cursor:ns-resize;background:transparent;transition:background .12s}
.lint-resize-handle:hover,.lint-resize-handle.dragging{background:var(--brand-tint-2)}
.lint ul{display:grid;gap:4px;margin:0;padding:8px 10px;list-style:none;flex:1 1 auto;overflow:auto;align-content:start}
.lint ul[hidden]{display:none}
.lint li{display:grid;grid-template-columns:auto 1fr;gap:6px;font-size:12px}
.lint button{border:0;background:transparent;box-shadow:none;color:var(--link);text-align:left;padding:0;cursor:pointer}

.level-error{color:var(--danger);font-weight:800}
.level-warning{color:var(--warn);font-weight:800}

.summary{font-size:12px}
.summary.ok{color:var(--ok)}
.summary.warn{color:var(--warn)}
.summary.error{color:var(--danger)}
.summary.off{color:var(--muted)}

/* ---- ドロップオーバーレイ ---- */
.drop{
  position:fixed;inset:0;display:none;place-items:center;z-index:20;
  background:rgba(124,58,237,.16);backdrop-filter:blur(3px);pointer-events:none;
}
.drop.show{display:grid}
.drop div{
  padding:22px 28px;border:2px dashed var(--brand);border-radius:18px;
  background:var(--panel);color:var(--brand-ink);font-weight:800;box-shadow:var(--shadow);
}

/* === highlight.js github-dark 文字色（自前埋め込み・背景なし） === */
.cb-line .hljs-doctag,.cb-line .hljs-keyword,.cb-line .hljs-meta .hljs-keyword,.cb-line .hljs-template-tag,.cb-line .hljs-template-variable,.cb-line .hljs-type,.cb-line .hljs-variable.language_{color:#ff7b72}
.cb-line .hljs-title,.cb-line .hljs-title.class_,.cb-line .hljs-title.class_.inherited__,.cb-line .hljs-title.function_{color:#d2a8ff}
.cb-line .hljs-attr,.cb-line .hljs-attribute,.cb-line .hljs-literal,.cb-line .hljs-meta,.cb-line .hljs-number,.cb-line .hljs-operator,.cb-line .hljs-selector-attr,.cb-line .hljs-selector-class,.cb-line .hljs-selector-id,.cb-line .hljs-variable{color:#79c0ff}
.cb-line .hljs-meta .hljs-string,.cb-line .hljs-regexp,.cb-line .hljs-string{color:#a5d6ff}
.cb-line .hljs-built_in,.cb-line .hljs-symbol{color:#ffa657}
.cb-line .hljs-code,.cb-line .hljs-comment,.cb-line .hljs-formula{color:#8b949e}
.cb-line .hljs-name,.cb-line .hljs-quote,.cb-line .hljs-selector-pseudo,.cb-line .hljs-selector-tag{color:#7ee787}
.cb-line .hljs-subst,.cb-line .hljs-emphasis,.cb-line .hljs-strong{color:#c9d1d9}
.cb-line .hljs-section{color:#1f6feb}
.cb-line .hljs-bullet{color:#f2cc60}
.cb-line .hljs-addition{color:#aff5b4}
.cb-line .hljs-deletion{color:#ffdcd7}

/* ===== 下のバー：改行コード/文字コード ===== */
.bottom-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.enc-ctrl{position:relative}
.enc-chip{
  padding:2px 9px;border-radius:6px;
  background:transparent;border:1px solid var(--border);
  color:var(--muted);font-size:11px;font-weight:700;font-family:Consolas,monospace;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.enc-chip:hover{background:var(--brand-tint-3);color:var(--brand-ink-strong);border-color:var(--brand-soft)}
.enc-menu{
  position:absolute;bottom:calc(100% + 6px);right:0;z-index:60;
  display:flex;flex-direction:column;gap:2px;padding:4px;min-width:120px;
  background:var(--panel);border:1px solid var(--border-strong);
  border-radius:8px;box-shadow:var(--shadow-pop);
}
.enc-menu[hidden]{display:none}
.enc-menu button{
  text-align:left;padding:6px 10px;border-radius:6px;background:transparent;border:none;
  color:var(--text);font-size:12px;cursor:pointer;font-family:Consolas,monospace;
}
.enc-menu button:hover{background:var(--brand-tint-3);color:var(--brand-ink-strong)}
/* インデントメニュー：「インデント設定を開く…」が折り返さないよう横幅を確保＋nowrap */
#indentMenu{min-width:184px}
#indentMenu button{white-space:nowrap}
/* 幅ボタンはタブ選択時に非活性（適用対象外）。薄く・操作不可に */
.enc-menu button:disabled{opacity:var(--btn-disabled-op);cursor:default;color:var(--muted)}
.enc-menu button:disabled:hover{background:transparent;color:var(--muted)}
/* 文字コードメニュー：項目が多いのでスクロール＋グループ見出し */
.enc-menu-scroll{max-height:340px;overflow-y:auto;min-width:200px;padding:0}
.enc-menu-scroll button{margin:0 4px}
.enc-group-title{
  padding:8px 10px 4px;font-size:10.5px;font-weight:700;color:var(--muted);
  letter-spacing:.02em;position:sticky;top:0;z-index:1;
  background:var(--panel);
  /* メニュー上端の隙間からスクロール文字が覗かないよう、影で上を覆う */
  box-shadow:0 -6px 0 0 var(--panel);
}
.enc-group-title:not(:first-child){border-top:1px solid var(--border)}
.enc-menu-scroll button:last-child{margin-bottom:4px}

/* 「別の文字コードで開き直す」ボタン（誤判別の修正用） */
.enc-reopen-btn{
  text-align:left;padding:6px 10px;border-radius:6px;background:transparent;border:none;
  color:var(--link);font-size:11.5px;cursor:pointer;width:100%;
}
.enc-reopen-btn:hover{background:var(--brand-tint-3);color:var(--brand-ink-strong)}

/* ===== ファイルタブ（VSCode 風） ===== */
.tab-bar{display:flex;align-items:stretch;gap:0;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--border);flex:none;scrollbar-width:thin}
.tab-bar[hidden]{display:none}
.tab{display:flex;align-items:center;gap:6px;padding:6px 10px;border-right:1px solid var(--border);cursor:pointer;font-size:12px;color:var(--muted);white-space:nowrap;max-width:220px;background:transparent;transition:background .12s ease,color .12s ease;position:relative}
.tab.dragging{opacity:.45}
.tab.drop-before::before,.tab.drop-after::after{content:"";position:absolute;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--brand)}
.tab.drop-before::before{left:-1px}
.tab.drop-after::after{right:-1px}
.tab:hover{background:var(--brand-tint-3)}
.tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand)}
/* ピン留めタブ：普通のタブより少し目立たせる（左に細いアクセント＋淡い背景） */
.tab.pinned{background:var(--brand-tint-4);box-shadow:inset 2px 0 0 var(--brand-soft)}
.tab.pinned:hover{background:var(--brand-tint-3)}
.tab.pinned.active{background:var(--surface);box-shadow:inset 2px 0 0 var(--brand),inset 0 -2px 0 var(--brand)}
/* 複数選択中のタブ（Ctrl/Shift+クリック） */
.tab.multi-sel{background:var(--brand-tint-3);box-shadow:inset 0 0 0 2px var(--brand-soft)}
.tab.multi-sel.active{box-shadow:inset 0 0 0 2px var(--brand),inset 0 -2px 0 var(--brand)}
.tab-pin{font-size:10px;line-height:1;opacity:.85;color:var(--brand)}
.tab-name{overflow:hidden;text-overflow:ellipsis}
.tab-close-wrap{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;position:relative}
/* 編集中（dirty）の光るドット。× にホバーすると × が出てドットが隠れる */
.tab-dirty-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);position:absolute;animation:tabPulse 1.6s ease-in-out infinite}
@keyframes tabPulse{0%,100%{opacity:.45;box-shadow:0 0 0 0 var(--brand-tint-2)}50%{opacity:1;box-shadow:0 0 6px 1px var(--brand)}}
.tab-close{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0;border-radius:4px;width:16px;height:16px;opacity:0;transition:opacity .12s ease;position:absolute}
.tab:hover .tab-close{opacity:1}
.tab:hover .tab-dirty-dot{opacity:0}
.tab-close:hover{background:var(--border-strong);color:var(--text)}
/* タブ右クリックメニュー */
.tab-ctx-menu{z-index:200}
.context-menu .ctx-ic{flex:0 0 auto;width:1.25em;text-align:center;font-size:13px}
.context-menu .ctx-ic-svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
/* 保存/破棄/キャンセル確認ダイアログ */
.tab-confirm-overlay{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center}
.tab-confirm-box{background:var(--panel);border-radius:14px;padding:22px;max-width:380px;box-shadow:var(--shadow-pop);border:1px solid var(--border)}
.tab-confirm-box p{margin:0 0 18px;font-size:14px;color:var(--text);line-height:1.6}
.tab-confirm-btns{display:flex;gap:8px;justify-content:flex-end}
.tab-confirm-btns button{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:13px}
.tab-confirm-btns button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.tab-confirm-btns button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.tab-confirm-btns button:hover{filter:brightness(1.05)}

/* ファイル未オープン時の非活性チップ */
.enc-chip.chip-disabled,.enc-chip:disabled{opacity:var(--btn-disabled-op);cursor:default;pointer-events:none}

/* Lint一覧（F9: ステータスバーの上／F10: フィルター／F17: フォント） */
#lintList,#lintList li,#lintList button,#progressList,#progressList li,#progressList button{font-family:var(--lint-font,inherit);font-size:var(--lint-size,13px)}
.lint-status-text{display:none}
.lf-count{font-weight:700;min-width:1.2em;text-align:center}
#lintFilterWarn .lf-count{color:#a16207}
#lintFilterError .lf-count{color:var(--danger)}
.lint-empty{color:var(--muted);padding:2px 0;font-style:italic}
.lint li.lint-empty{display:block;padding:6px 0}
.lint-empty.ok{color:var(--ok,#16a34a);font-style:normal}
.lint-filter-btn .lf-ic{font-size:1em;line-height:1}
#lintFilterWarn .lf-ic{color:#eab308}
#lintFilterError .lf-ic{color:var(--danger)}
#lintFilterWarn.toggle-on{opacity:1;color:#a16207;border-color:#eab308;background:rgba(234,179,8,.14)}
#lintFilterError.toggle-on{opacity:1;color:var(--danger);border-color:var(--danger);background:var(--danger-tint-2)}
.lint-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;border-bottom:1px solid var(--border);flex:none}
.lint-head-title{font-size:12px;color:var(--muted);font-weight:600}
.lint-filters{display:flex;gap:6px}
.lint-filters[hidden]{display:none}
.lint-filter-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;opacity:.55}
.lint-filter-btn.toggle-on{opacity:1;color:var(--text);border-color:var(--brand);background:var(--brand-tint-2)}
.lint-filter-btn:disabled{opacity:var(--btn-disabled-op);cursor:not-allowed}
#lintCopyAll{opacity:1;color:var(--text)}
#lintCopyAll:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint-2);color:var(--text)}
#lintCopyAll:disabled{opacity:var(--btn-disabled-op);cursor:not-allowed}

/* ===== 検索オプションの共通トグルピル（ファイル内検索・グレップで統一） ===== */
.opt-tg{padding:3px 9px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:700;flex:0 0 auto;line-height:1.4;font-family:ui-monospace,Menlo,Consolas,monospace}
.opt-tg:hover{border-color:var(--border-strong);color:var(--text)}
.opt-tg.on{color:var(--text);border-color:var(--brand);background:var(--brand-tint-2)}

/* ===== グレップ検索/置換ウインドウ（F12・画面内どこでもドラッグ可・リサイズ可） ===== */
.editor-pane{position:relative}
.grep-panel{position:fixed;top:84px;right:24px;z-index:120;width:min(640px,calc(100vw - 64px));min-width:320px;display:flex;flex-direction:column;max-height:84vh;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-pop);overflow:hidden}
.grep-panel[hidden]{display:none}
.grep-titlebar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;background:var(--surface);border-bottom:1px solid var(--border);cursor:move;user-select:none;flex:0 0 auto}
.grep-title{font-size:12px;font-weight:700;color:var(--text)}
.grep-msg{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.grep-msg.error{color:var(--danger)}
.grep-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto;border-bottom:1px solid var(--border)}
.grep-row{display:flex;align-items:center;gap:6px}
.grep-row[hidden]{display:none}
.grep-sep{border:none;border-top:1px solid var(--border);margin:3px 0 1px;width:100%}
.grep-scope-row #grepScope{flex:0 0 auto}
.grep-scope-row #grepPattern{flex:1 1 auto}
.grep-panel input[type=text]{flex:1 1 auto;min-width:0;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)}
.grep-tg-spacer{flex:0 0 auto;width:30px}
.grep-panel select{flex:1 1 auto;min-height:32px;padding-top:4px;padding-bottom:4px}
.grep-results{flex:1 1 auto;overflow:auto;padding:0 0 4px;font-size:13px;min-height:0}
.grep-file-head{display:flex;align-items:center;gap:6px;padding:5px 10px;font-weight:700;color:var(--text);position:sticky;top:0;z-index:2;background:var(--brand-tint-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;user-select:none}
.grep-file-head:hover{background:var(--brand-tint)}
.grep-file-caret{flex:0 0 auto;color:var(--muted);font-size:10px;width:1em;text-align:center}
.grep-file-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grep-file-count{flex:0 0 auto;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:0 7px;font-size:11px;font-weight:600}
.grep-file.collapsed .grep-file-body{display:none}
.grep-match{display:flex;align-items:center;gap:6px;padding:2px 10px}
.grep-match:hover{background:var(--brand-tint-2)}
.grep-match-text{flex:1 1 auto;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Menlo,Consolas,monospace}
.grep-match-text mark{background:rgba(234,179,8,.4);color:inherit;border-radius:2px;padding:0 1px}
.grep-replace-one{flex:0 0 auto;font-size:11px;padding:1px 7px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--muted);cursor:pointer}
.grep-replace-one:hover{border-color:var(--brand);color:var(--text)}
/* 右下のリサイズハンドル */
.grep-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:2;
  background:linear-gradient(135deg,transparent 50%,var(--border-strong) 50%,var(--border-strong) 60%,transparent 60%,transparent 72%,var(--border-strong) 72%,var(--border-strong) 82%,transparent 82%)}

/* ===== ファイル名検索（F13・クイックオープン） ===== */
.file-finder{position:fixed;inset:0;z-index:200}
.file-finder[hidden]{display:none}
.ff-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.ff-panel{position:absolute;top:72px;left:50%;transform:translateX(-50%);width:min(560px,92vw);
  background:var(--panel);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;max-height:70vh;overflow:hidden}
.ff-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)}
.ff-row input[type=text]{flex:1 1 auto;min-width:0;padding:6px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:14px}
.ff-list{list-style:none;margin:0;padding:4px;overflow:auto;flex:1 1 auto}
.ff-item{display:flex;align-items:baseline;gap:8px;padding:5px 9px;border-radius:6px;cursor:pointer}
.ff-item.selected,.ff-item:hover{background:var(--brand-tint-2)}
.ff-name{font-weight:600;color:var(--text)}
.ff-dir{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-empty{padding:10px;color:var(--muted);text-align:center;font-size:13px}


/* 行番号ガターのホバーで出すLint内容ツールチップ */
.lint-tip{position:fixed;z-index:9999;max-width:360px;background:var(--panel,#fff);color:var(--text,#222);border:1px solid var(--border,#d0d7de);border-radius:8px;padding:6px 9px;box-shadow:0 10px 30px rgba(0,0,0,.22);font-size:12px;line-height:1.5;pointer-events:none;white-space:normal;word-break:break-word}
.lint-tip[hidden]{display:none}
.lint-tip-row{display:flex;align-items:flex-start;gap:7px}
.lint-tip-row+.lint-tip-row{margin-top:4px}
.lint-tip-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:5px}
.lint-tip-row.error .lint-tip-dot{background:var(--danger,#cf222e)}
.lint-tip-row.warn .lint-tip-dot{background:var(--warn,#f59e0b)}
.lint-tip-txt{flex:1 1 auto}

/* 検索系の進捗UI（Grep / File Finder 共通） */
.search-progress{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border);flex:0 0 auto}
.search-progress[hidden]{display:none}
.search-spinner{width:15px;height:15px;border-radius:50%;border:2px solid transparent;border-top-color:var(--brand);border-right-color:var(--brand-soft);animation:sp-rot 0.8s linear infinite;flex:0 0 auto}
.search-progress-text{font-size:12px;color:var(--muted);flex:0 0 auto;min-width:64px}
.search-progress-bar{flex:1 1 auto;height:5px;background:var(--brand-tint-2);border-radius:99px;overflow:hidden;min-width:60px}
.search-progress-bar-fill{height:100%;background:linear-gradient(90deg, var(--brand), var(--brand-soft));width:0%;transition:width 0.15s ease-out;border-radius:99px;position:relative;overflow:hidden}
.search-progress-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);transform:translateX(-100%);animation:boot-shimmer 1.1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.search-progress-bar-fill::after{animation:none}}
@keyframes sp-rot{to{transform:rotate(360deg)}}
.ff-progress{border-top:1px solid var(--border)}

/* ===== カーソル行ハイライト（現在行を薄く強調） =====
   textarea/オーバーレイ群と同じセルに最背面で重ね、現在行の高さ分だけ薄い帯を表示する。 */
.caret-line-layer{grid-column:2;grid-row:1;position:relative;overflow:hidden;pointer-events:none;min-width:0;min-height:0;z-index:0}
.caret-line{position:absolute;left:0;right:0;height:0;display:none;background:color-mix(in srgb, var(--brand) 13%, transparent);will-change:transform}

/* 別ウィンドウ／PiP プレビューの上部バー（元のプレビューヘッダー pane-head と同じ見た目） */
.preview-win-bar{position:sticky;top:0;z-index:10}
.preview-win-bar .pwb-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.preview-win-bar .pwb-path{color:var(--muted);font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.preview-win-bar .pwb-lint{margin-right:2px}
/* #13: プレビュー上部の Lint OK/Warn 表示は不要なので隠す（本体・別ウィンドウ両方） */
#lintSummary,.preview-win-bar .pwb-lint{display:none!important}
/* 別ウィンドウのパンくずはバー（高さ36px）の真下に固定する */
.pwb-crumbs{position:sticky;top:36px;z-index:9}
/* 別ウィンドウは横幅に余裕があるので、ファイル名を省略せず全部表示する（長ければ折り返す） */
.pwb-crumbs .peek-crumb{max-width:none}

/* グレップ検索中の「中止」ボタン（赤系で目立たせる） */
.grep-row .find-rep-btn.grep-cancel{background:var(--danger);color:#fff;border-color:var(--danger)}
.grep-row .find-rep-btn.grep-cancel:hover{filter:brightness(1.08)}


/* グレップのフォルダ指定行（入力欄＋フォルダ選択ボタン） */
.grep-dir-row{position:relative;display:flex;align-items:center;gap:6px}
.grep-dir-row #grepDir{flex:1 1 auto;min-width:0}
.grep-dir-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;font-size:15px;line-height:1;padding:0}
.grep-dir-btn:hover{border-color:var(--brand);background:var(--brand-tint-2)}
.grep-dir-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1300;max-height:240px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-pop);padding:4px}
.grep-dir-item{padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grep-dir-item:hover{background:var(--brand-tint-2)}
.grep-dir-item.current{background:var(--brand-tint-3);font-weight:700}
.grep-recursive-row{padding:2px 0}
.grep-recursive{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}

/* グレップの置換方法リストは内容ぶんの幅に（横いっぱいに広げない） */
#grepReplaceOpts{justify-content:flex-start}
#grepReplaceOpts .ss-wrap{flex:0 0 auto;width:auto;min-width:170px;max-width:220px}

/* グレップ：検索・置換の実行中は条件をロック（操作不可を見た目でも示す） */
.grep-panel input:disabled,.grep-panel button:disabled{opacity:.5;cursor:default}
.grep-panel .grep-dir-btn:disabled{opacity:.5;cursor:default}
.grep-panel .sh-toggle:disabled,.grep-panel .check input:disabled{opacity:.5;cursor:default}

/* グレップ結果のページ切り替えバー（結果一覧の外＝上に固定配置） */
.grep-pager-wrap:empty{display:none}
.grep-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--border)}
.grep-pager-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-size:20px;line-height:1}
.grep-pager-btn:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint-2)}
.grep-pager-btn:disabled{opacity:.4;cursor:default}
.grep-pager-info{font-size:13px;font-weight:600;color:var(--text);min-width:96px;text-align:center}

/* クイックオープンの仮タブ（プレビュー）はタブ名をイタリックで示す。イタリックは右側がはみ出しやすいので少し余白を足す */
.tab.tab-preview .tab-name{font-style:italic;padding-right:2px}

/* 外部ファイル（D&Dで開いた作業フォルダ外）のタブには「外部」バッジを付ける */
.tab-ext-badge{
  flex:0 0 auto;
  font-size:9px;
  line-height:1;
  padding:2px 4px;
  margin-left:2px;
  border-radius:4px;
  color:var(--brand);
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  white-space:nowrap;
  letter-spacing:.02em;
}
.tab.tab-external .tab-name{font-style:italic}


/* ===== Ctrl+1〜5 の文字テンプレ5スロット（Ctrl押下中に画面下部中央に表示） ===== */
.snip-slots{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(8px);
  display:flex;gap:8px;padding:8px 10px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:9000;
  opacity:0;pointer-events:none;transition:opacity .14s ease, transform .14s ease;
}
.snip-slots.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.snip-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:0 0 120px;width:120px;min-height:50px;box-sizing:border-box;padding:6px 8px;border-radius:8px;
  background:var(--brand-tint-2);border:1px solid var(--brand);
}
.snip-slot.empty{background:transparent;border-color:var(--border);opacity:.5}
.snip-slot.clickable{cursor:pointer;transition:transform .1s ease, box-shadow .1s ease}
.snip-slot.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.snip-slot-key{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  color:var(--brand);background:transparent;padding:0;
}
.snip-slot-name{
  font-size:12px;color:var(--text);max-width:104px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 押下中スロットのカスタムツールチップ（title は修飾キー押下中に出ないため独自実装） */
.snip-slot-tip{
  position:fixed;transform:translate(-50%,-100%);
  max-width:360px;padding:7px 11px;border-radius:8px;
  background:var(--panel);border:1px solid var(--border);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  font-size:12px;color:var(--text);white-space:pre-wrap;word-break:break-word;
  z-index:9100;opacity:0;pointer-events:none;transition:opacity .1s ease;
}
.snip-slot-tip.show{opacity:1}
/* テンプレ管理ダイアログ上部の Ctrl+1〜5 割当ゾーン（D&Dで登録） */
.snip-slot-zone{margin:4px 0 8px}
.snip-slot-zone-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.snip-slot-zone-row{display:flex;gap:6px;flex-wrap:wrap}
.snip-zone-slot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:1 1 0;min-width:70px;padding:6px 6px;border-radius:8px;
  border:1px dashed var(--border);background:transparent;transition:border-color .1s ease, background .1s ease;
}
.snip-zone-slot.filled{border-style:solid;border-color:var(--brand);background:var(--brand-tint-2)}
.snip-zone-slot.drop-hot{border-color:var(--brand);background:var(--brand-tint-2);border-style:solid}
.snip-zone-key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:700;color:var(--brand)}
.snip-zone-name{font-size:11px;color:var(--text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snip-zone-x{
  position:absolute;top:2px;right:3px;width:16px;height:16px;line-height:14px;
  border:0;border-radius:50%;background:transparent;color:var(--muted);
  cursor:pointer;font-size:13px;padding:0;
}
.snip-zone-x:hover{color:var(--danger);background:var(--danger-tint-2)}

/* ============================================================
   CodeMirror 6（v332〜）: CM 使用時は本体領域を 1 カラムにし、
   CM6（内蔵の行番号ガター付き）を収める。
   ============================================================ */
.editor-wrap.cm-on{grid-template-columns:1fr}
.cm-host{grid-column:1 / -1;grid-row:1;min-height:0;height:100%;overflow:hidden;position:relative;z-index:2}
.cm-host .cm-editor{height:100%}
.cm-host .cm-editor.cm-focused{outline:none}

/* Lint の警告/エラー（CM6 行番号ガターに色＋ホバーでメッセージ） */
/* CM6 のガター行ハイライト。テーマシステム（themes.json）の --warn-tint / --warn-border /
   --warn-ink / --danger-tint-2 / --danger をそのまま使うことで、テーマごとに色が切り替わる。
   かつての color-mix(--warn 16%, transparent) 実装は --warn-tint を参照していなかったため、
   themes.json で --warn-tint を変えても警告行の見た目に反映されなかった（v354 で修正）。 */
.cm-gutterElement.cm-lint-warn-gutter{background:var(--warn-tint);color:var(--warn-ink);font-weight:800;box-shadow:inset 4px 0 0 0 var(--warn-border)}
.cm-gutterElement.cm-lint-error-gutter{background:var(--danger-tint-2);color:var(--danger);font-weight:800;box-shadow:inset 4px 0 0 0 var(--danger)}
.cm-lint-tip{position:fixed;z-index:9999;max-width:360px;padding:6px 8px;border-radius:8px;background:var(--panel);border:1px solid var(--border-strong);box-shadow:var(--shadow-pop);font-size:12px;line-height:1.5;color:var(--text);pointer-events:none;display:none}
.cm-lint-tip-row{padding:1px 0;display:flex;align-items:center;gap:6px}
.cm-lint-tip-row.err{color:var(--danger)}
.cm-lint-tip-row.warn{color:var(--warn-ink)}
/* Lint ホバーツールチップの先頭に出す ● 点滅マーク。エラーは赤、警告は黄系で点滅する。 */
.cm-lint-tip-row .lint-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;animation:lint-dot-pulse 1.2s ease-in-out infinite}
.cm-lint-tip-row.err .lint-dot{background:var(--danger)}
.cm-lint-tip-row.warn .lint-dot{background:var(--warn-border)}
@keyframes lint-dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 検索バー（#findBar.find-bar）の表示／非表示アニメーション。
   HTML 標準の [hidden] 属性のままアニメさせるため、display:none を上書きして
   max-height / opacity / padding / visibility を transition する。 */
.find-bar{overflow:hidden;transition:max-height .18s ease,opacity .18s ease,padding-top .18s ease,padding-bottom .18s ease}
.find-bar[hidden]{display:block!important;max-height:0!important;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none;visibility:hidden;transition:max-height .18s ease,opacity .18s ease,padding-top .18s ease,padding-bottom .18s ease,visibility 0s linear .18s}
.find-bar:not([hidden]){max-height:200px;opacity:1;visibility:visible}