/* chip-toggle-fix.css
   作用範囲: .book-search__form 内のみ
   対象:
     - label.chip > input[type="checkbox"] + span   … チェックボックス版
     - button.chip-btn[aria-pressed="true|false"]   … ボタン版（トグル）
   仕様:
     - ON = #0072ba / OFF = #999 を「文字色・枠色・背景」で全状態固定
     - 角丸・余白・高さも両者で完全一致
*/

/* ---- トークン（フォーム内に限定して定義） ---- */
.book-search__form{
  --chip-off:    #999;
  --chip-off-bg: #fff;
  --chip-on:     #0072ba;
  --chip-on-bg:  #fff;

  --chip-py: .45em;
  --chip-px: .9em;
  --chip-radius: 9999px;
  --chip-lh: 1.1;
}

/* ---- ベース構造 ---- */
.book-search__form label.chip{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.book-search__form label.chip > input[type="checkbox"]{
  position:absolute;
  opacity:0;
  inset:auto;
}

/* 見た目要素を一本化（span と button を同等扱い） */
.book-search__form :is(label.chip > span, .chip-btn){
  display:inline-block;
  padding:var(--chip-py) var(--chip-px);
  border:1px solid var(--chip-off);
  border-radius:var(--chip-radius);
  line-height:var(--chip-lh);
  text-decoration:none;
  background:var(--chip-off-bg);
  color:var(--chip-off);
  -webkit-text-fill-color: var(--chip-off);
  user-select:none;
  vertical-align:middle;
  box-sizing:border-box;
}

/* ---- ON / OFF（:has 対応ブラウザ） ---- */
.book-search__form :is(label.chip:has(input:checked) > span, .chip-btn[aria-pressed="true"]){
  color:var(--chip-on);
  -webkit-text-fill-color:var(--chip-on);
  border-color:var(--chip-on);
  background:var(--chip-on-bg);
}
.book-search__form :is(label.chip:not(:has(input:checked)) > span, .chip-btn[aria-pressed="false"]){
  color:var(--chip-off);
  -webkit-text-fill-color:var(--chip-off);
  border-color:var(--chip-off);
  background:var(--chip-off-bg);
}

/* 疑似状態でも同値維持（文字色・枠色・背景を固定） */
.book-search__form :is(
  label.chip:has(input:checked) > span,
  .chip-btn[aria-pressed="true"]
):is(:hover,:active,:focus,:focus-within,:focus-visible){
  color:var(--chip-on); -webkit-text-fill-color:var(--chip-on);
  border-color:var(--chip-on); background:var(--chip-on-bg);
}
.book-search__form :is(
  label.chip:not(:has(input:checked)) > span,
  .chip-btn[aria-pressed="false"]
):is(:hover,:active,:focus,:focus-within,:focus-visible){
  color:var(--chip-off); -webkit-text-fill-color:var(--chip-off);
  border-color:var(--chip-off); background:var(--chip-off-bg);
}

/* ---- タッチ環境：擬似 hover 貼り付きを無効化（フォーム内限定） ---- */
@media (hover: none), (pointer: coarse){
  .book-search__form :is(label.chip > span, .chip-btn):is(:hover,:active,:focus,:focus-within){
    color:inherit; -webkit-text-fill-color:inherit;
    border-color:inherit; background:inherit;
    box-shadow:none; transform:none; opacity:1; filter:none;
  }
}

/* ---- :has 非対応フォールバック（旧iOS 等） ---- */
@supports not (selector(:has(*))){
  /* 基本 ON / OFF */
  .book-search__form label.chip > input:not(:checked) + span{
    color:var(--chip-off); -webkit-text-fill-color:var(--chip-off);
    border-color:var(--chip-off); background:var(--chip-off-bg);
  }
  .book-search__form label.chip > input:checked + span{
    color:var(--chip-on); -webkit-text-fill-color:var(--chip-on);
    border-color:var(--chip-on); background:var(--chip-on-bg);
  }

  /* 疑似状態でも同値維持 */
  .book-search__form label.chip > input:not(:checked):is(:hover,:active,:focus) + span,
  .book-search__form label.chip:is(:hover,:active,:focus,:focus-within) > input:not(:checked) + span{
    color:var(--chip-off); -webkit-text-fill-color:var(--chip-off);
    border-color:var(--chip-off); background:var(--chip-off-bg);
  }
  .book-search__form label.chip > input:checked:is(:hover,:active,:focus) + span,
  .book-search__form label.chip:is(:hover,:active,:focus,:focus-within) > input:checked + span{
    color:var(--chip-on); -webkit-text-fill-color:var(--chip-on);
    border-color:var(--chip-on); background:var(--chip-on-bg);
  }

  /* JS同期 (.is-checked) 最終保険 */
  .book-search__form label.chip.is-checked > span{
    color:var(--chip-on); -webkit-text-fill-color:var(--chip-on);
    border-color:var(--chip-on); background:var(--chip-on-bg);
  }
  .book-search__form label.chip:not(.is-checked) > span{
    color:var(--chip-off); -webkit-text-fill-color:var(--chip-off);
    border-color:var(--chip-off); background:var(--chip-off-bg);
  }
}

/* ---- フォーカスリング（フォーム内限定） ---- */
.book-search__form :is(label.chip:focus-visible > span, .chip-btn:focus-visible){
  outline:2px solid color-mix(in srgb, var(--chip-on) 35%, transparent);
  outline-offset:2px;
}