/* ============================================================
   base.css — リセット / 共通トークン / 全体レイアウト骨格
   ------------------------------------------------------------
   色は theme.css の変数を参照する（このファイルに色を直書きしない）。
   ============================================================ */

:root{
  /* ---- 形状トークン ---- */
  --radius:12px;

  /* ---- ボタン共通トークン（サイト全体で平仄をとる） ---- */
  --btn-radius:9px;        /* 通常ボタンの角丸 */
  --btn-radius-sm:8px;     /* 小ボタン・アイコンボタンの角丸 */
  --btn-font:13px;         /* 通常ボタンの文字サイズ */
  --btn-font-sm:12px;      /* 小ボタンの文字サイズ */
  --btn-weight:700;        /* ボタンの文字太さ */
  --btn-disabled-op:.45;   /* 無効時の透明度（全ボタン共通） */
  --btn-transition:background .14s ease,border-color .14s ease,color .14s ease,transform .1s ease;

  /* ---- レイアウト寸法（JSから動的に上書きされる） ---- */
  --sidebar:280px;
  --preview-w:360px;

  /* ---- エディター / プレビューのフォント・サイズ（設定で上書き） ---- */
  --editor-font:"Yu Gothic UI","Yu Gothic",Meiryo,Consolas,monospace;
  --preview-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI",Meiryo,sans-serif;
  --editor-size:15px;
  --editor-line:1.7;
  /* MD013（行長）の目安となる縦ガイド線。位置は maxLineLength（全角2・半角1換算）に連動 */
  --guide-col:120;
  --guide-line:rgba(128,128,128,.20);
  --editor-tab:2;

  /* ---- 空白可視化の記号・インデントガイド線の色（テーマ非依存・薄め） ---- */
  --ws-mark:rgba(128,128,128,.42);
  --ws-guide:rgba(128,128,128,.20);

  /* ---- エディター構文ハイライトの色（ライト/ダーク両対応の中間トーン・色のみ） ---- */
  --syn-heading:#8b5cf6;
  --syn-strong:#2563eb;
  --syn-em:#0891b2;
  --syn-code:#0d9488;
  --syn-link:#2563eb;
  --syn-url:#6b7280;
  --syn-marker:#db2777;
  --syn-comment:#94a3b8;
  --syn-fence:#6b7280;
  --syn-escape:#c79100;

  /* ---- 編集行の差分インジケータ（行番号ガター） ---- */
  --diff-add:#22c55e;
  --diff-del:#ef4444;

  /* ---- UIフォント ---- */
  --ui-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html,body{width:100%;height:100%;margin:0;overflow:hidden}

body{
  font-family:var(--ui-font);
  color:var(--text);
  background:var(--app-bg);
}

button,input,select,textarea{font:inherit}
input[type=file]{display:none}

/* マウス/タップ操作ではフォーカス枠を出さない（起動時などに出る□枠を防ぐ）。
   キーボード操作時（:focus-visible）のみアクセシビリティのため枠を表示する。 */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--brand-soft);outline-offset:1px}

/* ---- アプリ本体の骨格 ---- */
.app{
  margin-left:184px;
  margin-right:184px;
  position:relative;
  z-index:2;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  overflow:hidden;
}

header,.panel{
  background:var(--panel-translucent);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

/* ---- ワークスペース（Explorer | split | main） ---- */
.workspace{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:var(--sidebar) 6px minmax(0,1fr);
  gap:0;
  overflow:hidden;
  transition:grid-template-columns .26s ease;
}
.workspace.explorer-hidden{grid-template-columns:44px 0px minmax(0,1fr)}

/* ---- メイン（エディター | split | プレビュー） ---- */
.main{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 6px var(--preview-w);
  overflow:hidden;
  transition:grid-template-columns .26s ease;
}
.main.preview-hidden{grid-template-columns:minmax(0,1fr) 0px 44px}
/* ===== Markdown 以外のファイル（non-md）：プレビューは表示しない =====
   エディターを全幅にし、プレビュー列・スプリッター・再表示レールをすべて隠す。
   手動の preview-hidden 状態には影響しない（Markdown に戻れば元の表示に戻る）。
   body スコープ＋!important で preview-hidden（エディター列の固定幅指定）に確実に勝たせる。 */
body.non-md .main{grid-template-columns:minmax(0,1fr) 0px 0px!important}
body.non-md .main>.preview-pane{opacity:0;pointer-events:none;min-width:0!important;overflow:hidden;border-left:none!important}
body.non-md .main .preview-split{opacity:0;pointer-events:none;cursor:default}
body.non-md #showPreviewRail{display:none!important}
body.non-md #togglePreviewBtn{display:none!important}
/* #19: プレビューを別ウィンドウ／PiP で表示している間は、エディタ右のプレビュー欄・
   スプリッター・再表示レールを隠してエディタを全幅にする。閉じれば元に戻る。 */
body.preview-detached .main{grid-template-columns:minmax(0,1fr) 0px 0px!important}
body.preview-detached .main>.preview-pane{opacity:0;pointer-events:none;min-width:0!important;overflow:hidden;border-left:none!important}
body.preview-detached .main .preview-split{opacity:0;pointer-events:none;cursor:default}
body.preview-detached #showPreviewRail{display:none!important}
body.preview-detached #togglePreviewBtn{display:none!important}
/* プレビュー最大化: エディター側を隠してプレビューを全幅に（広告欄は別要素なので残る）
   .main.preview-hidden 等より確実に勝たせるため body スコープ＋詳細度を上げる */
/* ===== プレビュー全画面（preview-max） =====
   列幅は px↔fr 間が補間できずカクつくため、JS（main.js の previewMaxBtn）が
   切替前後の実 px を測り px→px で animate する（FLIP）。終了後に inline を外して
   下記のクラス指定（レスポンシブな fr）へ戻す。 */
body.preview-max .workspace{grid-template-columns:0 0 minmax(0,1fr)!important}
body.preview-max .main{grid-template-columns:0 0 minmax(0,1fr)!important}
/* 押し出されるパネルは中身をはみ出させず、フェードしながら消える */
body.preview-max .explorer,
body.preview-max .main>.pane:not(.preview-pane),
body.preview-max .workspace-split,
body.preview-max .preview-split{
  overflow:hidden;min-width:0!important;
  opacity:0;transition:opacity .22s ease;
  pointer-events:none;
}
body.preview-max #showPreviewRail{display:none!important}
body.preview-max .preview-pane>.preview{flex:1 1 auto;min-height:0;display:block}
@media (prefers-reduced-motion: reduce){
  body.preview-max .workspace,body.preview-max .main{transition:none}
}
body.preview-max .preview-pane>#showPreviewRail{display:none!important}
/* 全画面時はプレビューペイン左端の境界線を消す（スプリッター跡の青線対策） */
body.preview-max .main>.preview-pane{border-left:none!important}

/* スプリッターのドラッグ中は即時反映（アニメ無効）にしてカクつきを防ぐ */
.workspace.no-anim,.main.no-anim{transition:none}

@media (prefers-reduced-motion: reduce){
  .workspace,.main{transition:none}
}

.pane{min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* アクティブペインの目印：上端にブランド色のライン（左から伸びてパルス） */
.panel.pane,.panel.explorer{position:relative}
.panel.pane::before,.panel.explorer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;z-index:6;pointer-events:none}
.panel.pane.pane-active::before,.panel.explorer.pane-active::before{transform:scaleX(1);animation:pane-active-glow 2.2s ease-in-out infinite}
@keyframes pane-active-glow{0%,100%{opacity:.5}50%{opacity:1}}

/* ---- スプリッター ---- */
/* 普段は控えめ（ほぼ透明）、オンマウス時だけリッチに表示 */
.split{background:transparent;cursor:col-resize;position:relative}
.split::after{
  content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;
  background:var(--brand-tint-4);border-radius:99px;
  opacity:0;transition:opacity .15s ease,width .15s ease,background .15s ease;
}
.split:hover::after{
  opacity:1;width:4px;left:1px;background:var(--brand-soft);
  box-shadow:0 0 6px 0 var(--brand-tint-2);
}
.explorer-hidden .workspace-split{opacity:0;pointer-events:none;cursor:default}
.explorer-hidden .workspace-split::after{opacity:0}
.main.preview-hidden .preview-split{opacity:0;pointer-events:none;cursor:default}
.main.preview-hidden .preview-split::after{opacity:0}

/* ---- 下部バー / フッター ---- */
.bottom-bar{
  height:20px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;color:var(--muted);font-size:12px;padding:0 4px;flex:none;
}
.char-counter{flex:none;text-align:right;margin-left:auto}

/* バックグラウンド処理の進捗（スキャン/索引/Lint/ファイル読込）。下部バー中央に表示。 */
.bg-progress{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);min-width:0;flex:0 1 auto}
.bg-progress[hidden]{display:none}
.bg-spinner{width:11px;height:11px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--brand);border-right-color:var(--brand-soft);animation:sp-rot 0.8s linear infinite;flex:0 0 auto}
.bg-progress-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;flex:0 1 auto}
.bg-progress-bar{flex:0 0 80px;height:4px;background:var(--brand-tint-2);border-radius:99px;overflow:hidden}
.bg-progress-bar[hidden]{display:none}
.bg-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-soft));width:0%;transition:width .08s linear;border-radius:99px}
.bg-cancel-btn{flex:0 0 auto;width:18px;height:18px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer}
.bg-cancel-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.bg-cancel-btn:disabled{opacity:.5;cursor:default}
.bg-cancel-btn[hidden]{display:none}
.bg-cancel-ic{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* 瞬時の完了通知（SME.task.notify / done のメッセージ）。スピナーを隠し ✓ テキストのみ控えめに出す。 */
.bg-progress.bg-flash .bg-spinner{display:none}
.bg-progress.bg-flash .bg-progress-text{color:var(--ok);max-width:360px}
.bg-progress.bg-flash-error .bg-progress-text{color:var(--danger)}
/* 総数不明タスクの不確定（インデターミネート）バー：左右に往復する */
.progress-row-bar.indeterminate .progress-row-bar-fill{width:40%;animation:prog-indeterminate 1.1s ease-in-out infinite}
@keyframes prog-indeterminate{0%{margin-left:-40%}100%{margin-left:100%}}
.panel-tabs{display:flex;gap:4px;align-items:center}
.lint .panel-tab{font-size:12px;padding:2px 10px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:background .12s,color .12s}
.lint .panel-tab:hover{background:var(--brand-tint-2);color:var(--text)}
.lint .panel-tab.active{background:var(--brand);color:#fff}
.lint .panel-tab.active:hover{background:var(--brand)}
.panel-tab-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--brand);color:#fff;font-size:10px;line-height:1}
.lint .panel-tab.active .panel-tab-badge{background:#fff;color:var(--brand)}
.panel-tab-badge[hidden]{display:none}
#progressList{list-style:none;margin:0;overflow:auto}
#progressList[hidden]{display:none}
.lint .progress-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:var(--text);flex-wrap:nowrap;grid-template-columns:none}
.progress-label{flex:0 1 auto;order:1;min-width:0;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-row-bar{flex:1 1 auto;order:2;height:5px;background:var(--brand-tint-2);border-radius:99px;overflow:hidden}
.progress-row-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-soft));border-radius:99px;transition:width .08s linear}
.progress-row-cancel{flex:0 0 18px;order:3;width:18px;height:18px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer}
.progress-row-cancel:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
#cancelAllBtn{opacity:1;color:var(--text)}
#cancelAllBtn:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
#cancelAllBtn:disabled{opacity:.4;cursor:default}
.progress-row-cancel:disabled{opacity:.5;cursor:default}
.progress-row-cancel svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.app-footer{
  height:20px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;
}

.footer-links{
  height:24px;display:flex;align-items:center;justify-content:center;
  gap:14px;color:var(--muted);font-size:12px;
}
.footer-links button{
  border:0;background:transparent;box-shadow:none;padding:2px 4px;
  color:var(--brand-ink);font-weight:800;
}
.footer-links button:hover{text-decoration:underline;background:transparent}

/* ===== お問い合わせフォーム（mailto 方式・サーバー送信なし）=====
   3画面（エディター/Diff Viewer/ようこそ）共通。エディターは SME ダイアログ、
   Diff/ようこそは chrome.js のモーダル内に同じ .contact-form を入れて使う。 */
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form .contact-intro{margin:0;color:var(--text);line-height:1.7}
.contact-form .contact-field{display:flex;flex-direction:column;gap:5px}
.contact-form .contact-field>span{font-size:13px;font-weight:700;color:var(--brand-ink)}
.contact-form input[type=text],
.contact-form textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font:inherit;line-height:1.6;
}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input[type=text]:focus,
.contact-form textarea:focus{outline:none;border-color:var(--brand-border);box-shadow:0 0 0 3px var(--brand-tint-2)}
.contact-form .contact-note{
  margin:0;padding:10px 12px;border:1px solid var(--brand-tint-4);border-radius:12px;
  background:var(--brand-tint-1);color:var(--brand-ink);font-size:12.5px;line-height:1.7;
}
.contact-form .contact-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact-form .contact-direct{color:var(--link);font-weight:700;text-decoration:none;font-size:13px}
.contact-form .contact-direct:hover{text-decoration:underline}
.contact-form .contact-submit{
  margin-left:auto;border:0;cursor:pointer;padding:9px 18px;border-radius:10px;
  font-weight:800;background:var(--brand);color:#fff;transition:filter .15s ease;
}
.contact-form .contact-submit:hover{filter:brightness(1.08)}

/* ===== 共通ドキュメントモーダル（.doc-modal）=====
   使い方/更新履歴/プライバシー/利用規約/ライセンス/お問い合わせ を開くウインドウ。
   3画面（エディター/Diff Viewer/ようこそ）で同一の見た目・サイズに統一する。
   ・エディター: editor.html の <dialog class="doc-modal">（dialog.css の .doc-content で本文整形）
   ・Diff/ようこそ: chrome.js が動的生成（chrome.css の .doc-md で本文整形）
   head（タイトル＋✕）／body（スクロール本文）／foot（任意）を縦に積む flex 構成。 */
.doc-modal{
  width:min(860px,94vw);max-width:94vw;
  height:84vh;max-height:90vh;
  padding:0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--panel);box-shadow:var(--shadow-pop);overflow:hidden;
}
/* flex 化は開いている時だけ。.doc-modal に display:flex を常時付けると、閉じた <dialog> に
   既定で効く UA の dialog:not([open]){display:none} を上書きしてしまい、✕で閉じても
   裏に残り続ける。[open] に限定して閉じたら確実に display:none（UA既定）へ戻す。 */
.doc-modal[open]{display:flex;flex-direction:column}
.doc-modal::backdrop{background:rgba(15,23,42,.38)}
.doc-modal-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--border);
}
.doc-modal-title{font-weight:800;color:var(--brand-ink);font-size:15px}
.doc-modal-close{
  margin-left:auto;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--button-bg);color:var(--text);
  border-radius:var(--btn-radius-sm);font-size:15px;line-height:1;cursor:pointer;
}
.doc-modal-close:hover{background:var(--brand-tint-2);border-color:var(--brand-border)}
.doc-modal-body{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:18px 22px 28px;color:var(--text);font-size:14px;line-height:1.75;
}
.doc-modal-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;background:var(--soft);border-top:1px solid var(--border);
}
/* display:flex を常時付けると UA の [hidden]{display:none} を上書きしてしまい、
   JS で hidden を立てても消えない（使い方をフッターから開いたとき「以降表示しない」が残る）。
   [hidden] のときは確実に display:none に戻す。 */
.doc-modal-foot[hidden]{display:none}
/* お問い合わせはフォームが短いので、固定 84vh だと下が大きく余る。中身に合わせた高さにする。
   モーダル <dialog> は UA 既定で inset:0 + margin:auto に置かれるため、height:auto だと天地に
   引き伸ばされて max-height(90vh) まで膨らむ。fit-content なら中身ぴったりの高さで中央に出る。
   本文を多く書いて 90vh を超えたら max-height で収まり、body 側がスクロールする。
   :has 非対応の古い環境では従来どおり 84vh にフォールバック（動作に支障なし）。 */
.doc-modal:has(.contact-form){height:fit-content}

/* ===== ドキュメント本文のタイポグラフィ（.doc-md）=====
   使い方/更新履歴/プライバシー/利用規約/ライセンス の本文整形。3画面で同一フォント・
   見出しサイズに揃えるため共通化（エディターの閲覧ダイアログ＝.doc-content にも doc-md を併記）。
   コードブロック（.codeblock）など .doc-content 固有の整形は dialog.css 側が詳細度で上書きする。 */
.doc-md h1,.doc-md h2,.doc-md h3{color:var(--brand-ink);line-height:1.35;margin:1.2em 0 .5em}
.doc-md h1{font-size:20px;border-bottom:1px solid var(--border);padding-bottom:.3em}
.doc-md h2{font-size:17px}
.doc-md h3{font-size:15px}
.doc-md h1:first-child,.doc-md h2:first-child,.doc-md h3:first-child{margin-top:0}
.doc-md p{margin:.6em 0}
.doc-md ul,.doc-md ol{margin:.5em 0;padding-left:1.5em}
.doc-md li{margin:.25em 0}
.doc-md a{color:var(--link)}
.doc-md code{background:var(--inline-code-bg);border-radius:4px;padding:.1em .35em;font-family:var(--editor-font);font-size:.9em}
.doc-md pre{background:var(--code-bg);color:var(--code-fg);border-radius:8px;padding:12px 14px;overflow:auto}
.doc-md pre code{background:transparent;padding:0;color:inherit}
.doc-md blockquote{margin:.6em 0;padding:.2em 1em;border-left:3px solid var(--brand-border);color:var(--muted)}
.doc-md hr{border:0;border-top:1px solid var(--border);margin:1.2em 0}
.doc-md strong{font-weight:700}
.doc-md table{border-collapse:collapse;width:100%;margin:.7em 0;font-size:.95em}
.doc-md th,.doc-md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}
.doc-md th{background:var(--inline-code-bg);font-weight:600;white-space:nowrap}
.doc-md .doc-note{color:var(--muted)}

/* ===== 閲覧モード（エクスプローラー＋プレビューのみ） =====
   エクスプローラー（.workspace の列）はそのまま。.main 内のエディター列だけを
   JS が grid トランジション（px→0px）で縮め、プレビューが押しのけて広がる。
   戻すときは JS が逆再生する。 */
/* 押しのけられるエディター・スプリッターは中身をはみ出させず、フェードして消える */
body.reader-mode .main>.pane:not(.preview-pane),
body.reader-mode .main>.preview-split{
  overflow:hidden;min-width:0!important;
  opacity:0;transition:opacity .22s ease;
  pointer-events:none;
}
body.reader-mode .main>.preview-pane{border-left:none!important}
/* エクスプローラーとプレビューの間にはっきりした区切りを入れる（見分けやすく） */
body.reader-mode .explorer{border-right:1px solid var(--border);margin-right:10px}
/* 戻る/進むボタンは閲覧モード時だけ表示 */
.reader-only{display:none}
body.reader-mode .reader-only{display:inline-flex}
@media (prefers-reduced-motion: reduce){body.reader-mode .main{transition:none}}