/* ブランドの見た目のセレクトボックス（部品は select.js）。色は style.css の変数を使う
   ボタンの規則は .psel .psel-button.psel-button と書いて、置き場の `.f-search-row button` や motion.css の
   `:is(... .pagination button:not(:disabled))` より強くする（読み込みの順に頼らない）。押したときの縮みは motion.css のまま効かせる */
.psel{position:relative;display:block;min-width:0}
.psel .psel-button.psel-button{display:flex;align-items:center;gap:8px;width:100%;height:100%;min-height:40px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper,#fff);color:var(--ink);font-family:var(--font-sans,inherit);font-size:13px;font-weight:600;line-height:1.3;text-align:left;white-space:nowrap;box-shadow:none;cursor:pointer;transition:border-color 160ms ease-out,box-shadow 160ms ease-out,transform 100ms ease-out}
.psel .psel-button.psel-button:hover{background:var(--paper,#fff);border-color:color-mix(in srgb,var(--teal) 38%,var(--line))}
.psel .psel-button.psel-button:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 28%,transparent)}
.psel .psel-button.psel-button.is-open{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 28%,transparent)}
.psel .psel-button.psel-button.is-placeholder .psel-label{color:var(--muted)}
.psel .psel-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel .psel-icon{flex:none;display:block}
.psel .psel-chevron{color:var(--muted);transition:transform 160ms ease-out}
.psel .psel-button.psel-button.is-open .psel-chevron{transform:rotate(180deg);color:var(--teal)}
.psel .psel-button.psel-button:disabled{cursor:not-allowed;background:var(--cream,#fafafa);color:var(--muted);opacity:.7}
.psel .psel-button.psel-button:disabled:hover{background:var(--cream,#fafafa);border-color:var(--line)}

/* パネルは body の直下に置く（親の overflow や backdrop-filter で切られないように） */
.psel-panel{position:fixed;z-index:1000;display:flex;flex-direction:column;max-height:320px;background:var(--paper,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 14%,transparent);font-family:var(--font-sans,inherit);font-size:13px;color:var(--ink);overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity 160ms ease-out,transform 160ms ease-out}
.psel-panel.is-up{transform:translateY(4px)}
.psel-panel.is-open{opacity:1;transform:none}
.psel-filter{flex:none;padding:8px 8px 6px;border-bottom:1px solid var(--line)}
.psel-filter-input{display:block;width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--mint-faint,#fff);color:var(--ink);font:inherit;outline:none}
.psel-filter-input:focus,.psel-filter-input:focus-visible{outline:none;border-color:var(--teal);background:var(--paper,#fff)}
.psel-filter-input::placeholder{color:var(--muted)}
.psel-list{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.psel-item{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.psel-item[hidden]{display:none}
.psel-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.psel-check{color:var(--teal);visibility:hidden}
.psel-item.is-active{background:var(--mint-faint)}
.psel-item.is-selected{background:var(--mint);color:var(--deep);font-weight:700}
.psel-item.is-selected.is-active{background:color-mix(in srgb,var(--teal) 12%,var(--mint))}
.psel-item.is-selected .psel-check{visibility:visible}
.psel-item.is-disabled{color:var(--muted);opacity:.55;cursor:default}
.psel-empty{padding:14px 12px;color:var(--muted);font-size:12px}
.psel-empty[hidden]{display:none}

/* 元の select は値の正本として残し、目には見せない */
@media (min-width:781px) and (pointer:fine){
  .psel>select.psel-native{position:absolute!important;inset:0!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden;clip-path:inset(50%)}
}
/* 包んだあとで画面が狭くなったら、元の select に戻す */
@media (max-width:780px),(pointer:coarse){
  .psel .psel-button.psel-button{display:none}
}

@media (prefers-reduced-motion:reduce){
  .psel .psel-button.psel-button,.psel .psel-chevron,.psel-panel{transition:none}
  .psel-panel,.psel-panel.is-up{transform:none}
}

/* optgroup の見出しの行（選べない） */
.psel-group{padding:10px 12px 4px;font-size:var(--t-12,12px);font-weight:500;color:var(--muted);cursor:default}
.psel-group[hidden]{display:none}