/* A single, quiet control panel. Catalogue values and matching rules stay in app.js. */
.filter-panel{--filter-border:#a88a5059;border:1px solid var(--filter-border);border-radius:14px;background:#301940;padding:22px;position:relative;margin:0 0 20px}
.filter-panel .search{border:1px solid #b89a6070;border-radius:9px;min-height:54px;padding:4px 16px;gap:12px;background:#24122f;margin:0 0 20px}
.filter-panel .search svg{flex:0 0 20px;color:var(--gold)}
.filter-panel .search input{font-size:1rem;line-height:1.5;padding:10px 0;min-height:44px}
.filter-panel .header-categories{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;width:100%;padding:0}
.filter-panel .header-categories .format-nav,.filter-panel .header-categories .gender-nav{display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:0;border:0;justify-content:flex-start}
.filter-panel .format-nav{flex:1}
.filter-panel .gender-nav{flex-shrink:0}
.filter-panel .format-nav button,.filter-panel .gender-nav button,.filter-panel .gender-nav button:first-child{border:1px solid transparent;border-image:none;border-radius:7px;background:transparent;color:var(--muted);box-shadow:none;min-height:44px;min-width:0;padding:8px 10px;font-size:.9375rem;display:flex;flex-direction:row;gap:6px;justify-content:center;align-items:center;line-height:1.35;white-space:nowrap}
.filter-panel .format-nav button.selected{background:var(--gold);color:#291437;border-color:var(--gold);font-weight:700}
.filter-panel .gender-nav button.selected{background:#513261;color:#f0dba9;border-color:#ab8b596b}
.filter-panel .format-nav button:hover:not(.selected),.filter-panel .gender-nav button:hover:not(.selected){background:#42244f;color:#eddbb5}
.filter-panel .format-nav button span,.filter-panel .gender-nav button span{font-size:.75rem;line-height:1.3;margin:0;padding:0;background:none;color:inherit;opacity:.8;border-radius:0}
.filter-panel .controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:12px}
.filter-panel .controls .selectlabel{grid-column:auto;grid-row:auto;min-width:0;padding:9px 12px 5px;border:1px solid var(--filter-border);border-radius:8px;background:#291437;font-size:.875rem;line-height:1.4;color:var(--muted)}
.filter-panel .selectlabel select,.filter-panel #brandsSummary,.filter-panel #notesSummary,.filter-panel #housesSummary{display:block;width:100%;max-width:100%;font-size:1rem;font-weight:500;min-height:40px;line-height:1.4;padding:7px 22px 7px 0;margin:0;color:#eddbb5;background:transparent;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.filter-panel .selectlabel select{padding-right:0}
.filter-panel details{position:relative}
.filter-panel input[type="hidden"]{display:none}
.filter-panel #brandsSummary,.filter-panel #notesSummary,.filter-panel #housesSummary{list-style:none;position:relative}
.filter-panel #brandsSummary::-webkit-details-marker,.filter-panel #notesSummary::-webkit-details-marker,.filter-panel #housesSummary::-webkit-details-marker,.alphabet-dropdown>summary::-webkit-details-marker{display:none}
.filter-panel #brandsSummary::after,.filter-panel #notesSummary::after,.filter-panel #housesSummary::after{content:'';position:absolute;right:2px;top:14px;width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}
.filter-panel details[open]>#brandsSummary::after,.filter-panel details[open]>#notesSummary::after,.filter-panel details[open]>#housesSummary::after{top:18px;transform:rotate(225deg)}
.filter-panel .selectlabel:focus-within{border-color:var(--gold)}
.filter-panel .notes-panel{top:calc(100% + 12px);left:-13px;width:320px;max-width:calc(90vw - 44px);padding:16px;background:#24122f;border:1px solid #b49459;border-radius:10px;box-shadow:0 12px 32px #10071999;z-index:40}
.filter-panel .notes-panel p{font-size:.875rem;color:var(--muted);line-height:1.5;margin:0 0 12px}
.filter-panel #brandChoices,.filter-panel #houseChoices,.filter-panel #noteChoices{max-height:min(260px,40svh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.filter-panel #noteChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5px}
.filter-panel .notes-panel .note-choice{display:flex;min-height:44px;padding:6px 4px;gap:8px;font-size:1rem;line-height:1.3;border-radius:5px;color:#eddbb5}
.filter-panel .notes-panel .note-choice:hover,.filter-panel .notes-panel .note-choice:has(input:checked){background:#3c234b}
.filter-panel .note-choice input{width:18px;height:18px;flex-basis:18px;margin:0;accent-color:var(--gold)}
.filter-panel .filter-menu-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--filter-border);margin-top:12px;padding-top:12px}
.filter-panel .filter-menu-actions button{margin:0;min-height:40px;padding:6px 12px;font-size:.875rem;border-color:var(--filter-border);border-radius:6px}
.filter-panel .filter-menu-actions button[data-close-filter]{background:var(--gold);border-color:var(--gold);color:#291437}
.filter-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--filter-border)}
.filter-footer .alphabet-dropdown{flex:1;min-width:0}
.filter-footer .alphabet-dropdown>summary{display:flex;align-items:center;gap:10px;width:fit-content;min-height:44px;list-style:none;padding:6px 0;margin:0;font-size:.9375rem;color:var(--gold)}
.alphabet-dropdown>summary::before{content:'+';font-size:1.2rem;width:12px;text-align:center}
.alphabet-dropdown[open]>summary::before{content:'−'}
.alphabet-dropdown>summary span{font-size:.8125rem;color:var(--muted);border-left:1px solid var(--filter-border);padding-left:10px}
.filter-panel .alphabet{display:flex;flex-wrap:wrap;gap:4px;overflow:visible;padding:8px 0 0;border:0}
.filter-panel .alphabet button{flex:0 0 38px;border:1px solid var(--filter-border);border-image:none;border-radius:5px;min-width:38px;min-height:38px;padding:4px;background:transparent;box-shadow:none;font-size:.875rem;color:var(--gold)}
.filter-panel .alphabet button.active{background:var(--gold);border-color:var(--gold);color:#291437}
.filter-panel .alphabet button:disabled{border-color:transparent;opacity:.35}
.filter-panel .clear-filters{border:0;background:transparent;padding:6px 0 6px 12px;min-height:44px;font-size:.9375rem;color:var(--gold);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.filter-panel .clear-filters:disabled{color:var(--muted);opacity:.45;text-decoration:none;cursor:default}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.filter-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:38px;padding:5px 10px;border:1px solid #b4945970;border-radius:6px;background:#452752;color:#eddbb5;font-size:.875rem;line-height:1.4;text-align:left}
.filter-chip span:first-child{overflow-wrap:anywhere;min-width:0}
.filter-chip span:last-child{font:1.2rem/1 sans-serif;opacity:.8}
.filter-panel~.form-note{font-size:.9375rem;margin-bottom:16px;max-width:75ch}
.directory .resultsline{align-items:center;padding-top:0;padding-bottom:20px}
@media(max-width:1120px){
 .filter-panel .header-categories{align-items:flex-start;flex-direction:column;gap:12px}
 .filter-panel .header-categories .format-nav,.filter-panel .header-categories .gender-nav{width:100%}
 .filter-panel .controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filter-panel .house-filter .notes-panel{left:auto;right:-13px}
}
@media(max-width:620px){
 .filter-panel{padding:14px;border-radius:12px;margin-bottom:16px}
 .filter-panel .search{margin-bottom:16px;padding:3px 12px;gap:8px}
 .filter-panel .header-categories{margin-bottom:16px;gap:12px}
 .filter-panel .header-categories .format-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .filter-panel .header-categories .gender-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding-top:10px;border-top:1px solid var(--filter-border)}
 .filter-panel .format-nav button{padding:9px 5px;font-size:.9375rem}
 .filter-panel .gender-nav button,.filter-panel .gender-nav button:first-child{flex-direction:column;padding:5px 2px;gap:2px;font-size:.875rem;min-height:48px}
 .filter-panel .controls{gap:8px}
 .filter-panel .controls .selectlabel{padding:8px 9px 3px;font-size:.875rem}
 .filter-panel .selectlabel select,.filter-panel #brandsSummary,.filter-panel #notesSummary,.filter-panel #housesSummary{font-size:1rem}
 .filter-panel .notes-panel{left:-10px;max-width:calc(90vw - 28px);padding:12px}
 .filter-panel .house-filter .notes-panel{right:-10px;left:auto}
 .filter-footer{gap:8px;margin-top:12px;padding-top:8px}
 .filter-panel .alphabet{gap:5px}
 .filter-panel .alphabet button{flex-basis:40px;min-width:40px;min-height:44px}
 .filter-panel .filter-chip{min-height:44px}
 .alphabet-dropdown>summary span{font-size:.8125rem;padding-left:8px}
 .filter-panel .clear-filters{padding-left:4px;font-size:.875rem}
}
@media(max-width:359px){
 .filter-panel .header-categories .format-nav{grid-template-columns:minmax(0,1fr)}
 .filter-panel .header-categories .gender-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filter-panel .controls{grid-template-columns:minmax(0,1fr)}
 .filter-panel .house-filter .notes-panel{left:-10px;right:auto}
 .filter-panel .notes-panel{width:calc(90vw - 28px)}
 .alphabet-dropdown>summary span{display:none}
}
/* Numbered catalogue pages share the APG purple and gold palette. */
.catalogue-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:0 0 24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.catalogue-pagination-bottom{margin:28px 0 0}
.catalogue-pagination .page-summary{margin:0;color:var(--muted);font-size:.9375rem;white-space:nowrap}
.page-controls,.page-numbers{display:flex;align-items:center;justify-content:center;gap:6px}
.catalogue-pagination a,.page-direction>span{display:flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #a88a5070;border-radius:7px;background:#291437;color:#eddbb5;font-size:.9375rem;line-height:1.3;text-decoration:none;white-space:nowrap}
.catalogue-pagination a:hover{background:#513261;border-color:var(--gold);color:#fff2cd;text-decoration:none}
.catalogue-pagination a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:#291437;font-weight:700}
.page-direction>span{opacity:.45}
.page-gap{padding:0 3px;color:var(--muted)}
#catalogueResults{scroll-margin-top:20px}
@media(max-width:760px){
 .catalogue-pagination{justify-content:center;gap:10px}
 .catalogue-pagination .page-summary{width:100%;text-align:center}
 .page-controls{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
 .page-numbers{grid-column:1/-1;grid-row:1;gap:4px;flex-wrap:wrap}
 .page-direction{grid-row:2}
 .page-direction:first-child{justify-self:start}
 .page-direction:last-child{justify-self:end}
 .catalogue-pagination a,.page-direction>span{padding:8px 10px}
}