/* エディタページ（/editor）専用スタイル。 static/css/style.css の変数を土台にする。 */

.editor {
  /* 下のツールバーの実測高さ。パネルの高さもこれを基準に決める（＝ツールバー2つ分）。 */
  --toolbar-h: 72px;
  /* ツールパネルの左右余白。中身が画面端に張り付くと押しにくいので広めに取る。 */
  --panel-pad-x: 20px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 横スクロールする行（共通） ---- */
/* 幅が足りない行は折り返さず横スクロールさせるが、Firefox は overflow-x: auto の
   スクロールバーがレイアウトの場所を取るため、スワイプした瞬間に行の高さが増える。
   ツールバーでこれが起きると canvas-wrap が縮み、ResizeObserver 経由で
   fitToViewport() が走って絵まで小さくなる（タブレットのFirefoxで報告）。
   固定高のツールパネル側でも、増えた分だけ中身が押し出される。

   スクロールバーは隠し、行の端まで送ったスワイプが親へ伝播しないよう
   overscroll-behavior で閉じ込める（ページのスクロールやブラウザの横スワイプ
   ジェスチャに繋がるのを防ぐ）。

   横スクロールする行を足したら、必ずこの並びに加えること。 */
.editor__topbar-actions,
.editor__toolbar,
.bg-panel__ratios,
.text-panel__fonts,
.color-row__swatches,
.stamp-panel__cats,
.stamp-create__shapes,
.crop-panel__shapes {
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.editor__topbar-actions::-webkit-scrollbar,
.editor__toolbar::-webkit-scrollbar,
.bg-panel__ratios::-webkit-scrollbar,
.text-panel__fonts::-webkit-scrollbar,
.color-row__swatches::-webkit-scrollbar,
.stamp-panel__cats::-webkit-scrollbar,
.stamp-create__shapes::-webkit-scrollbar,
.crop-panel__shapes::-webkit-scrollbar {
  display: none;
}

/* ---- トップバー ---- */
/* 折り返さない。ボタンが増えて2行になるとヘッダーの高さが変わり、canvas-wrap の
   大きさも変わって ResizeObserver 経由で fitToViewport() が走ってしまう。
   幅が足りないときはアクション列だけを横スクロールさせる。
   position: relative は3点リーダーのメニューの位置決めの基準。 */
.editor__topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ロゴはマークだけ（名前は title・About・保存ファイル名に残す）。ボタンの見た目は
   持たせない——押せるのはマーク自身で、枠を付けると操作ボタンの一員に見えるため。 */
.editor__back {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* マーク自体の見た目は style.css（静的ページと共有するため） */
.editor__back:hover .logo-mark__plate {
  fill: var(--accent-hover);
}

/* 3点リーダーはアクション列の外（左端・ロゴの隣）。横スクロールで流れないよう
   固定幅のまま置く。 */
.editor__topbar-menu-btn {
  flex-shrink: 0;
}

.editor__topbar-actions {
  display: flex;
  gap: 8px;
  /* 左のロゴ・3点リーダーと分けて、編集操作は右端へ寄せる */
  margin-left: auto;
  /* 入り切らないときはここだけ横スクロールする（ヘッダーは1行のまま）。
     スクロールバーを隠す指定は「横スクロールする行（共通）」にまとめてある。 */
  min-width: 0;
  overflow-x: auto;
}

.editor__topbar-actions > .btn {
  flex-shrink: 0;
}

/* 保存はアクション列の外に出して、横スクロールしても常に見えるようにする */
.editor__topbar-save {
  flex-shrink: 0;
}

/* 文字のロゴは細い画面で畳んでいたが、マークにして幅が 28px に減ったので出しっぱなし
   にする。代わりに狭い画面では余白とアイコンを詰めて、7つの操作（ロゴ・3点・リセット・
   表示リセット・undo・redo・保存）を横スクロール無しで収める。
   アクション列はスクロールバーを隠しているので、はみ出すとボタンが黙って
   保存ボタンの裏へ流れ、押せなくなる（360px で redo が消えた）。収まっていることは
   test_topbar_actions_do_not_overflow が scrollWidth で見ている。 */
@media (max-width: 420px) {
  .editor__topbar {
    gap: 8px;
    padding: 10px 8px;
  }

  .editor__topbar .btn--icon {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }

  .editor__topbar-actions {
    gap: 6px;
  }

  .editor__topbar-save {
    padding: 8px 12px;
  }
}

/* ---- 3点リーダーのメニュー ---- */
/* アクション列（overflow-x: auto）の中に置くと切られるので、トップバー直下に
   置いて position: absolute で吊るす。 */
.topbar-menu {
  position: absolute;
  top: 100%;
  /* 3点リーダーは左端（ロゴの隣）にあるので、メニューも左から吊るす */
  left: 10px;
  z-index: 20;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.topbar-menu[hidden] {
  display: none;
}

/* 項目は button と a が混在する（別ページへ行くものはリンクにする）ので、
   下線と色を打ち消して見た目を揃える。 */
.topbar-menu__item {
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.topbar-menu__item:hover:not(:disabled) {
  background: var(--surface-2);
}

/* リンク先が未定の項目。押せないことが見て分かるようにしておく */
.topbar-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ボタン内のインラインSVGアイコン共通サイズ */
.icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* アイコンだけのボタン。文字が無くても押しやすい大きさを確保する */
.btn--icon {
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- キャンバス領域 ---- */
.editor__canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  /* minmax(0, 1fr) でトラックの自動拡大を防ぐ。無いとズームインでキャンバス要素が
     wrap より大きくなったとき、grid のトラック自体がその大きさへ広がってしまい、
     place-items: center が効かず左上に張り付いて右下だけが overflow:hidden で
     切れる見た目になる。 */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  touch-action: none;
  background-color: #101014;
  background-image: radial-gradient(circle, #2a2933 1px, transparent 1px);
  background-size: 20px 20px;
}

.editor__canvas-wrap .canvas-container {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

/* 画像を開くための空状態オーバーレイ（キャンバス領域に重ねる） */
.editor__empty {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(16, 16, 20, 0.85);
  color: #ddd;
  text-align: center;
  padding: 1rem;
}

.editor__empty[hidden] {
  display: none;
}

/* ドロップの受け口はキャンバス領域そのもの。下地を選んだ後（オーバーレイが
   display:none）でもドロップできるので、枠のハイライトは wrap 側に付ける。 */
.editor__canvas-wrap.is-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.editor__canvas-wrap.is-dragover .editor__empty {
  background: rgba(40, 60, 90, 0.85);
}

.editor__empty-text {
  margin: 0;
  font-size: 0.95rem;
  color: #aaa;
}

/* ---- ツールパネル（ボトムシート） ---- */
/* 高さを固定する。ツールごとに高さが変わると canvas-wrap の大きさが変わり、
   ResizeObserver 経由で fitToViewport() が走ってキャンバスのズームまで動いてしまう。
   高さはツールバー2つ分に抑え、収まらないパネルはこの中でスクロールさせる。 */
.editor__panels {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  height: calc(var(--toolbar-h) * 2);
  overflow-y: auto;
}

.tool-panel {
  padding: 12px var(--panel-pad-x);
}

.tool-panel[hidden] {
  display: none;
}

/* ---- ツールパネル共通の作り ----
   ツールごとに余白やボタンの高さがばらついていたので、次の4つに揃える。
   パネルを足すときもこれを使うこと。
     1. パネル内の縦の間隔は 12px（各 *-panel の gap）
     2. ラベルの要る行は .ctrl-row（ラベル + 内容の2カラム）
     3. 選択肢のボタンは .pill-btn（高さ36pxのピル型）
     4. 確定操作は .panel-actions（右寄せ）／説明文は .panel-hint    */

.panel-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.panel-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.pill-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.pill-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- ツールバー ---- */
.editor__toolbar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}

.editor__toolbar button[data-tool] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.editor__toolbar button[data-tool]:hover {
  background: var(--surface-2);
  color: var(--text);
}

.editor__toolbar button[data-tool].is-active {
  background: var(--accent);
  color: var(--accent-text);
}

/* 下地（画像/背景）が無いうちはお絵かき側を触れない。titleでツールチップを出す。 */
.editor__toolbar button[data-tool]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.editor__toolbar button[data-tool]:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

/* ベース層とお絵かきでツールバーを2グループに分ける */
.editor__toolbar-group {
  display: flex;
  gap: 6px;
}

.editor__toolbar-sep {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border);
}

/* 「いまの下地がどれか」の表示。押しているツール(is-active)とは別の状態なので
   塗りつぶしではなく下線で示す。 */
.editor__toolbar-group[data-group="base"] button[data-tool].is-current {
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.editor__toolbar-glyph {
  width: 22px;
  height: 22px;
  display: block;
}

/* ---- デスクトップ ---- */
@media (min-width: 900px) {
  .editor__toolbar {
    justify-content: center;
  }
}

/* ---- ベース画像ツール（フィルターも内蔵。画像にしか効かないため
   「画像を選ぶ」と同じ行に置き、下地が画像のときだけ操作できるようにする） ---- */
.base-image-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.base-image-panel__row1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 「画像を選ぶ」とフィルター（プリセット・スライダー）の境目をわかりやすくする */
.base-image-panel__sep {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--border);
}

/* ---- 背景ツール ---- */
.bg-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bg-panel__ratios {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* ---- テキストツール ---- */
.text-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-panel__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-panel__controls[hidden] {
  display: none;
}

/* 文字の中身の入力欄。キャンバス上の直接編集は無効なので、ここが唯一の入力経路。
   パネルの高さは固定なので、伸ばさずに2行ぶんで内部スクロールさせる。 */
.text-panel__input {
  width: 100%;
  min-height: 3.4em;
  max-height: 3.4em;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  resize: none;
}

.text-panel__input:focus {
  border-color: var(--accent);
}

.text-panel__fonts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.text-font-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.text-font-btn:hover {
  border-color: var(--accent);
}

.text-font-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.text-font-btn__sample {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.3rem;
  font-size: 1.1rem;
  line-height: 1;
}

/* 見本の字形（SVGパス）。viewBoxの高さは全書体で共通なので、高さを揃えれば
   書体ごとの大きさの比率も実際の文字と同じになる。 */
.text-font-btn__glyph {
  display: block;
  width: auto;
  height: 100%;
}

.text-font-btn__label {
  font-size: 0.65rem;
  white-space: nowrap;
}

.ctrl-row {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  align-items: center;
  gap: 10px;
}

.ctrl-row__label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ctrl-row input[type="range"] {
  width: 100%;
}

/* input[type=color] のブラウザ既定の太い枠を消し、暗色テーマに合わせる */
.ctrl-row input[type="color"] {
  width: 44px;
  height: 30px;
  padding: 0;
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
}

.ctrl-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.ctrl-row input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.ctrl-row input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

/* ---- 色選択の共通1行UI（文字色・縁取り・手書き・背景で共通） ---- */
.color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 選択リングは要素の外側2pxに出るので、スクロール領域で切れないよう余白を取る */
.color-row__swatches {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px;
  margin: -3px;
  -webkit-overflow-scrolling: touch;
}

.color-swatch {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  cursor: pointer;
}

.color-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-hover);
}

.color-row__custom {
  flex-shrink: 0;
  width: 40px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
}

.color-row__custom::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-row__custom::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.color-row__custom::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.ctrl-row--checkbox {
  grid-template-columns: 5.5em auto;
}

.ctrl-row--checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

/* ---- スタンプツール ---- */
.stamp-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stamp-panel__cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.stamp-panel__grid {
  display: grid;
  gap: 6px;
}

.stamp-panel__grid--emoji {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.stamp-emoji-btn {
  min-height: 44px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp-emoji-btn:hover {
  background: var(--accent);
}

/* ---- 画像スタンプのタブ ---- */
/* 「画像スタンプ」は絵文字カテゴリとは種類の違う入り口なので、区切りを1本入れる */
.stamp-panel__cats-sep {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  min-height: 24px;
  margin: 0 2px;
  background: var(--border);
}

.stamp-panel__images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* display を持つ要素は hidden 属性だけでは消えない（UAの display:none に勝ってしまう） */
.stamp-panel__images[hidden],
.stamp-panel__grid[hidden] {
  display: none;
}

.stamp-panel__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.stamp-panel__grid--saved {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

/* 追加ボタンは一覧の先頭マス。サムネと同じグリッドに載るので幅も揃う */
.stamp-create-btn {
  min-height: 52px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp-create-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.stamp-saved-btn {
  min-height: 52px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 透過スタンプの形が分かるよう市松模様を敷く（切り抜きモーダルと同じ狙い） */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.stamp-saved-btn:hover {
  border-color: var(--accent);
}

.stamp-saved-btn img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* ---- スタンプの切り抜きモーダル ---- */
/* 中身は本体の切り抜きに合わせる（形の選択行 → 画像 → 適用/キャンセル） */
.modal-box--stamp-create {
  width: min(94vw, 720px);
  max-width: none;
}

.stamp-create {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stamp-create__shapes {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 切り抜き後に透過する部分が分かるよう市松模様を敷く */
.stamp-create__canvas-wrap {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #111;
  background-image:
    linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.stamp-create__canvas-wrap canvas {
  touch-action: none;
  display: block;
}

/* ---- 切り抜きツール ---- */
.crop-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ctrl-row の右カラム（1fr）に載るので min-width: 0 が要る。無いと中身の
   合計幅までトラックが広がり、横スクロールにならずパネルからはみ出す。 */
.crop-panel__shapes {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crop-shape-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.crop-shape-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---- 手書きツール ---- */
.draw-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- フィルター（base-image-panel に内蔵） ---- */
.filter-panel__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-panel__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* プリセットの見た目は .pill-btn（下地が画像でないときの disabled も含む）。
   行自体は隠さず、押せないことだけを示す。 */

.filter-panel__controls .ctrl-row input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- 選択ツールのパネル ---- */
.select-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.select-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn--danger-text {
  color: var(--danger);
  border-color: var(--danger);
}

.btn--danger-text:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

/* ---- このアプリについて（about.js） ---- */
.about {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 46ch;
}

.about__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about__heading {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.about__body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.about__langs {
  display: flex;
  gap: 8px;
}

.about__lang-btn {
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.about__lang-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.about__links {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.85rem;
  line-height: 1.9;
}

/* トップバーのロゴはボタン化したので、見た目を元のテキストに戻す */
button.editor__back {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* キーボード操作の可視性（既定のアウトラインが見えにくいボタンがあるため） */
:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* 英語UIはラベルが長いので左カラムを広げる（"Outline width" 等が折り返さないように）。
   lang 属性は i18n.js の applyDom() が設定する。 */
html[lang="en"] .ctrl-row {
  grid-template-columns: 7.5em 1fr;
}

html[lang="en"] .ctrl-row--checkbox {
  grid-template-columns: 7.5em auto;
}