/* a11y.css — アクセシビリティ3機能 (配色3状態 / 文字サイズ3段 / ふりがなON-OFF) の状態別スタイル
   DESIGN.md §4。JS はクラス操作をせず <html> の data-theme / data-fontsize / data-ruby だけを見る。 */

/* ===== 文字サイズ (§4.2) ===== */
html[data-fontsize="s"] { font-size: 87.5%; }   /* 14px 基準 */
html[data-fontsize="m"] { font-size: 100%; }    /* 16px 基準 = PDF の状態 */
html[data-fontsize="l"] { font-size: 118.75%; } /* 19px 基準 */

/* ===== ふりがな (§4.3): OFF 時は <rt> を隠す (既定 = OFF) ===== */
html[data-ruby="off"] rt { display: none; }
ruby { ruby-position: over; }
rt { font-size: 0.6em; }

/* ===== 配色変更 (§4.1): タイル9枚 + ユーティリティのアクティブチップ ===== */
.nav-tile {
  background: var(--t-main);
  color: #fff;
  border-color: transparent;
}
html[data-theme="contrast"] .nav-tile {
  background: var(--t-dark);
}
html[data-theme="invert"] .nav-tile {
  background: var(--t-pale);
  color: var(--t-dark);
  border-color: var(--t-dark);
}

/* 反転時の特例: 「法人について」アイコンだけブランド4色 */
html[data-theme="invert"] .nav-tile--houjin .petal--top    { fill: var(--c-petal-pink); }
html[data-theme="invert"] .nav-tile--houjin .petal--left   { fill: var(--c-petal-blue); }
html[data-theme="invert"] .nav-tile--houjin .petal--right  { fill: var(--c-petal-yellow); }
html[data-theme="invert"] .nav-tile--houjin .petal--bottom { fill: var(--c-petal-green); }

/* L10: ユーティリティ/ドロワーの選択中チップ。「配色変更」に限らず3機能とも同じ色にする
   (選択中=そのテーマの緑、という1語彙に統一。[data-value] ガードは fontsize/ruby では邪魔になるため外した)。 */
.seg button[aria-pressed="true"] {
  background: #558D60;
}
html[data-theme="contrast"] .seg button[aria-pressed="true"] {
  background: #004825;
}
html[data-theme="invert"] .seg button[aria-pressed="true"] {
  background: #736357;
}

/* ===== L2 ===== */
/* L2タブ: DESIGN-WP §6-1 の導出規則 (タイルと同じ変換)。
   🔴 S5反転バグ再発防止: タブ内 icon/arrow/text に color を書かない (currentColor 継承をここ1箇所で制御) */
.l2-tab {
  background: var(--t-main);
  color: #fff;
  border: 1px solid transparent;
  border-bottom: 0;
}
.l2-tab.is-current {
  background: #fff;
  color: var(--t-main);
}
html[data-theme="contrast"] .l2-tab {
  background: var(--t-dark);
}
html[data-theme="contrast"] .l2-tab.is-current {
  background: #fff;
  color: var(--t-dark);
}
html[data-theme="invert"] .l2-tab {
  background: var(--t-pale);
  color: var(--t-dark);
  border-color: var(--t-dark);
}
html[data-theme="invert"] .l2-tab.is-current {
  background: #fff;
  color: var(--t-dark);
  border-bottom: 0;
}