/* ============================================================
   admin/a11y.css — 管理画面アクセシビリティ底上げ層
   既存 style.css / preview.css の「後」に読み込む追加レイヤー。
   既存の ID/クラス契約は一切変更せず、ARIA 化した新挙動の見た目と
   フォーカス可視・コントラスト・モーション配慮のみを担う。

   方針:
   - 色/フォントは既存デザイントークン（--accent / --text 等）を参照（ハードコード回避）。
   - prefers-color-scheme は style.css 側 :root で定義済みのため継承する。
   - WCAG 2.1 AA を基準（フォーカス可視 2.4.7 / コントラスト 1.4.3 /
     動きの抑制 2.3.3・prefers-reduced-motion / 名前・役割・値 4.1.2）。
   ============================================================ */

/* ------------------------------------------------------------
   1. スクリーンリーダー専用テキスト（視覚的に非表示・SR には読ませる）
      WCAG 1.3.1 / 4.1.3。ライブ領域やラベル補完に使用。
   ------------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   2. スキップリンク（キーボードで本文へ一足飛び・WCAG 2.4.1）
      通常は画面外、フォーカス時のみ左上に出現。
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px; /* 画面外に退避 */
  z-index: 1000;
  padding: 8px 16px;
  background: var(--accent, #7c5c3e);
  color: #fff;
  border-radius: var(--radius-sm, 4px);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg, 0 4px 24px rgba(0,0,0,.12));
  transition: top var(--transition, .18s ease);
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--accent-hover, #5e4430);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. フォーカス可視の底上げ（WCAG 2.4.7）
      既存 :focus-visible 規約（style.css L962 / preview.css L553）に揃え、
      タブ・タブパネル・編集見出し・トースト等、未カバー箇所を補完。
      マウス操作時は出さず（:focus-visible）、キーボード時のみ可視。
   ------------------------------------------------------------ */
.tab-btn:focus-visible,
.preview-tabs__btn:focus-visible,
.viewport-toggle button:focus-visible,
.preview-tabpanel:focus-visible,
.cols-edit-title:focus-visible,
.cols-admin-search:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible,
[contenteditable="true"]:focus-visible,
a.skip-link:focus-visible {
  outline: 2px solid var(--accent, #7c5c3e);
  outline-offset: 2px;
  /* outline が背景と紛れないよう薄いハロを併用（高コントラスト確保） */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #7c5c3e) 22%, transparent);
}

/* role=tabpanel はクリックでフォーカスが当たっても枠線を出さない
   （プログラム的フォーカス時の視覚ノイズ防止・キーボード時のみ可視で十分） */
.preview-tabpanel:focus:not(:focus-visible),
#editor-panel:focus:not(:focus-visible),
.cols-edit-title:focus:not(:focus-visible) {
  outline: none;
}

/* contenteditable はキーボード/マウス問わず編集状態が分かるよう枠を維持（既存 :focus-within と非競合） */
.rich-editor-content:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #7c5c3e) 55%, transparent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------
   4. アクティブタブの「選択」可視性を色だけに依存させない（WCAG 1.4.1）
      色覚特性に配慮し、選択中タブに太字 + 下線インジケータを付与。
      （既存の .active 配色はそのまま、補助的な非色シグナルを足すのみ）
   ------------------------------------------------------------ */
.tab-btn[aria-selected="true"],
.preview-tabs__btn[aria-selected="true"] {
  font-weight: 700;
}

/* ------------------------------------------------------------
   5. ビューポートトグル: aria-pressed 状態の非色シグナル（WCAG 1.4.1 / 4.1.2）
      押下中（active = aria-pressed=true）は太字で「色のみ」依存を回避。
   ------------------------------------------------------------ */
.viewport-toggle button[aria-pressed="true"] {
  font-weight: 700;
}

/* ------------------------------------------------------------
   6. 公開状態バッジ: ダークモードでのコントラスト整合（WCAG 1.4.3）
      preview.css の固定明色バッジ（light bg + dark text）は明背景で AA を満たすが、
      ダーク UI 上では浮くため、ダーク時のみトークン由来の配色へ寄せて
      地と十分なコントラスト（≥4.5:1 目安）を確保する。
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  .publish-badge[data-state="live"] {
    background: var(--success-bg, #1b3e1d);
    color: var(--success, #81c784);
    border-color: color-mix(in srgb, var(--success, #81c784) 45%, transparent);
  }
  .publish-badge[data-state="draft"] {
    background: var(--warn-bg, #3a2f12);
    color: var(--warn-border, #f9c84a);
    border-color: color-mix(in srgb, var(--warn-border, #f9c84a) 45%, transparent);
  }
  .publish-badge[data-state="dirty"] {
    background: color-mix(in srgb, var(--danger, #e57373) 18%, transparent);
    color: var(--danger, #e57373);
    border-color: color-mix(in srgb, var(--danger, #e57373) 50%, transparent);
  }
}

/* ------------------------------------------------------------
   7. 編集見出し（h2.cols-edit-title）: 既存スパン見た目を維持
      span → h2 に変更したため、ブラウザ既定の見出しマージン/サイズをリセットし
      従来の行内ラベル外観を保つ（レイアウト回帰防止）。
   ------------------------------------------------------------ */
h2.cols-edit-title {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ------------------------------------------------------------
   8. モーション抑制（WCAG 2.3.3 / 前庭障害配慮）
      prefers-reduced-motion: reduce 時、装飾アニメ（スピナー回転・トースト・
      タブ/ボタンのトランジション）を停止 or 即時化する。
      機能（表示/非表示の切替自体）は維持し、動きだけ落とす。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* スピナーは回転を止め、代わりに静的なローディング表現にフォールバック */
  .spinner {
    animation: none !important;
    border-top-color: var(--accent, #7c5c3e);
    opacity: .85;
  }
}

/* ── ログイン: Google ボタン / 区切り ── */
.btn-google { background:#fff; color:#3c4043; border:1px solid #dadce0; font-weight:500; display:inline-flex; align-items:center; justify-content:center; }
.btn-google:hover { background:#f7f8f8; }
.btn-google:disabled { opacity:.6; cursor:not-allowed; }
.login-divider { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--text-muted,#888); font-size:.85em; }
.login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:var(--border,#e0e0e0); }