/* ===== ヘッダーツール（SPEC-v1.1 §5.1 / §9.2）
   誤操作防止のため、プリセットボタンより小さく・目立たないトーンにする。 ===== */
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-soft);
  font-size: var(--fs-xxs);
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition-base);
}
.tool-btn:hover {
  background: var(--c-base-warm);
  color: var(--c-ink);
}
.tool-btn:focus-visible {
  outline: 2px solid var(--c-accent-gold);
  outline-offset: 2px;
}
/* ON状態（背景=暗テーマ中／引き出し線=表示中）を控えめに示す */
.tool-btn[aria-pressed="true"] {
  border-color: var(--c-accent-gold);
  background: var(--c-base-warm);
  color: var(--c-ink);
}
/* SPEC-v3.10 §2：並べて見るモードのときだけ出すボタン。
   JS が viewMode==='split' のときだけ .is-visible を付与する。既定は非表示。 */
.tool-btn.is-split-only { display: none; }
.tool-btn.is-split-only.is-visible { display: inline-flex; }
.tool-ico {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 900px) {
  .tool-btn { padding: 5px 8px; }
}

/* ===== 拡大モード切替ボタン（SPEC-v5.1 §2.1）
   .tool-btn と見た目の系統は揃えつつ、他モードと混同しないよう独立クラスにする。 ===== */
.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-soft);
  font-size: var(--fs-xxs);
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition-base);
}
.mode-btn:hover {
  background: var(--c-base-warm);
  color: var(--c-ink);
}
.mode-btn:focus-visible {
  outline: 2px solid var(--c-accent-gold);
  outline-offset: 2px;
}
.mode-btn[aria-pressed="true"] {
  border-color: var(--c-accent-gold);
  background: var(--c-base-warm);
  color: var(--c-ink);
}
@media (max-width: 900px) {
  .mode-btn { padding: 5px 8px; }
}

/* ===== 拡大モード中の他モード操作の無効化（SPEC-v2.4-2）
   tab-cross / tab-long / btn-split / btn-link-view を JS 側で .disabled = true にする。
   ネイティブの disabled 属性ではなく見た目だけ抑制したい場合にも備え、
   :disabled と .is-disabled の両方に対応しておく。 ===== */
.mode-btn:disabled,
.tool-btn:disabled,
.view-tab:disabled,
.mode-btn.is-disabled,
.tool-btn.is-disabled,
.view-tab.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ===== 引き出し線 SVGレイヤー（SPEC-v1.1 §6.3）
   .label-layer（overlay.css）いっぱいに重ね、viewBoxは毎フレーム labels.js が更新する。 ===== */
.leader-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ===== 表示レイヤー ON/OFF（SPEC-v1.1 §8.1 / §9.2）
   サイドパネル最下部・プリセットより下の視線位置に置く。 ===== */
.layer-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.layer-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-ink);
  cursor: pointer;
  user-select: none;
}
.layer-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: var(--c-accent-gold);
  cursor: pointer;
}
/* 12×12pxの色見本。背景色は main.js が ViewCross.getPartColor() から流し込む
   （テーマ切替に追随させるため、ここでは色をハードコードしない）。 */
.layer-toggle .sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.layer-reset-btn {
  margin-top: var(--sp-1);
  width: 100%;
  border: 1px dashed var(--c-line);
  background: transparent;
  color: var(--c-ink-soft);
  font-size: var(--fs-xxs);
  padding: 6px var(--sp-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}
.layer-reset-btn:hover {
  background: var(--c-base-warm);
  color: var(--c-ink);
  border-style: solid;
}

/* ===== 暗背景時のUI反転（SPEC-v1.1 §9.3）
   .tool-btn / .layer-toggle 等は c-ink・c-line・c-base-warm を var() で参照しているため、
   tokens.css の body[data-theme="dark"] オーバーライドにより自動的に反転する。
   ここでは、ハードコードした値のうち自動追随しないものだけを個別に補正する。 ===== */
body[data-theme="dark"] .layer-toggle .sw {
  border-color: rgba(255, 255, 255, 0.25);
}