/* Shared cinema controls. Actual checked/selected states remain visible. */
:root{--control-line:rgba(var(--accent-rgb),.22);--control-wash:rgba(var(--accent-rgb),.055)}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--gold)}
:where(.field,.form-grid,.admin-form) select{
  color-scheme:dark;cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
:where(select) option{background:var(--surface);color:var(--ivory)}
/* Mouse/touch focus is not a persistent selection. Text inputs keep their
   editing indicator; checked cards and active navigation keep their meaning. */
html[data-input-mode=pointer] :is(a,button,summary,select,[role=button],[role=tab]):focus{
  outline:none!important;
}
html[data-input-mode=pointer] select:focus{
  box-shadow:none!important;
}
html[data-input-mode=pointer] select:not(.is-selected):focus{
  border-color:var(--field-border,var(--control-line));
}
html[data-input-mode=keyboard] :is(a,button,summary,select,[role=button],[role=tab]):focus{
  outline:2px solid var(--gold);outline-offset:4px;
}
/* Genre labels read like a small cinema index, with perforation and a spine. */
.genre-pills{gap:9px;padding-block:3px 10px}
.genre-pills>a{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--control-line);border-radius:5px 13px 13px 5px;
  padding:10px 17px 10px 12px;background:linear-gradient(115deg,var(--control-wash),transparent 70%);
  color:var(--ivory);font-size:12px;letter-spacing:.015em;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.genre-pills>a::before{
  content:'';flex:0 0 3px;width:3px;height:16px;
  background:repeating-linear-gradient(to bottom,rgba(var(--accent-rgb),.5) 0 2px,transparent 2px 5px);
}
.genre-pills>a.selected{background:rgba(var(--accent-rgb),.13);border-color:var(--gold)}
@media(hover:hover) and (pointer:fine){
  .genre-pills>a:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.09);transform:translateY(-2px)}
}
/* Catalogue resolution controls are owned by filters.css so one component is
   not restyled by a later global file. */
@media(max-width:540px){
  .genre-pills>a{padding:9px 12px 9px 9px;font-size:11px}
}
@media(hover:none){
  :is(.button,.genre-pills>a):hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .genre-pills>a,:where(.field,.form-grid,.admin-form) select{transition:none}
  .genre-pills>a:hover{transform:none}
}
@media(forced-colors:active){
  .genre-pills>a{border-color:ButtonText}
  html[data-input-mode=keyboard] :is(a,button,summary,select,[role=button],[role=tab]):focus{outline-color:Highlight}
}