/* ============================================================
 * sdp-focus-dock.css — サブバッチ2（テーマ）
 *  1) D-1h: 低ビューポート時の追従バナー圧迫緩和（高さ基準）
 *  2) フォーカスリングの明暗2色化（背景非依存・WCAG 2.2 SC 1.4.11）
 * 仕様: deliverables/top-zengou-dousen-seiri-shiyou-20260802.md v7.2 §5-3 / §5-4
 * 追従バナーの文言・順序・遷移先・項目数は変更しない（v7）。
 * 読込順: sdp-estimate-modern の後（最終）。後続の sdp-est-style /
 *         sdp-a11y-tapsize は focus 規則を持たないことを実測で確認済み。
 * ============================================================ */

/* ── 1) D-1h: 高さ600px以下で副ラベルを隠し、主ラベル3件は維持 ── */
@media (max-height: 600px) {
  nav.estimate-dock {
    padding-top: 6px;
    padding-bottom: 6px;
    row-gap: 0;
  }
  /* 隠すのは副ラベル <small> のみ。<strong>（修理料金/郵送修理/電話で相談）は残す */
  nav.estimate-dock .estimate-dock-item small {
    display: none;
  }
  nav.estimate-dock .estimate-dock-item {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.2;
  }
}

/* ── 2) 明暗2色フォーカス（ライト既定）───────────────────
 * 内側=明色 / 外側=暗色 の二重リング。どちらか一方が必ず3:1以上になる。
 * 実測により、フォーム系ページ等に高特異度の既存ルールがあり後勝ちだけでは不足と判明。
 * フォーカス指標はWCAG必須要件のため !important を付与する（仕様§5-3の但し書きに該当）。
 *         .estimate-dock .estimate-dock-item:focus-visible = (0,3,0)
 *         → estimate-modern-redesign.css の (0,2,0) に勝つ
 */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.estimate-dock .estimate-dock-item:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 6px #1a1a1a !important;
}

/* ── ダーク: 手動切替（data-theme）──────────────────── */
html[data-theme="dark"] :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
html[data-theme="dark"] .estimate-dock .estimate-dock-item:focus-visible {
  outline-color: #1a1a1a !important;
  box-shadow: 0 0 0 6px #ffffff !important;
}

/* ── ダーク: OS追従（手動でlightが明示されている場合は適用しない）── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
  html:not([data-theme="light"]) .estimate-dock .estimate-dock-item:focus-visible {
    outline-color: #1a1a1a !important;
    box-shadow: 0 0 0 6px #ffffff !important;
  }
}

/* スキップリンクは既存の見た目を維持する（a11y.css の専用指定を尊重）*/
.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #1a1a1a !important;
}

/* ── 特異度の追い上げ ────────────────────────────────
 * 実測: 一部ページに `box-shadow: none !important` を持つ高特異度の
 * 通常状態ルール（service.css / repair-offer-forms-redesign.css 等）があり、
 * !important 同士の比較で box-shadow だけ打ち消されていた。
 * :focus-visible を重ねて特異度を (0,3,1) 相当まで上げ、確実に勝たせる。
 */
html body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible:focus-visible:focus-visible,
html body .estimate-dock .estimate-dock-item:focus-visible:focus-visible:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 6px #1a1a1a !important;
}
html[data-theme="dark"] body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible:focus-visible:focus-visible,
html[data-theme="dark"] body .estimate-dock .estimate-dock-item:focus-visible:focus-visible:focus-visible {
  outline-color: #1a1a1a !important;
  box-shadow: 0 0 0 6px #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible:focus-visible:focus-visible,
  html:not([data-theme="light"]) body .estimate-dock .estimate-dock-item:focus-visible:focus-visible:focus-visible {
    outline-color: #1a1a1a !important;
    box-shadow: 0 0 0 6px #ffffff !important;
  }
}