/* The finder: the filter panels, the results table and everything around them. Loaded after site.css by catalog.html
   and by every generated page that carries the finder. */
#pagetitle{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.layout>*{min-width:0}
main{min-width:0;container-type:inline-size}   /* the results column sizes its own table: see the container query by .dims-inline */
.ftoggle{display:none;font:inherit;font-family:var(--display);font-size:17px;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer;text-align:left}
.ftoggle::after{content:" ▾";color:var(--muted)}
.filters.open .ftoggle::after{content:" ▴"}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;gap:12px}
  .filters{position:static;gap:10px}
  .ftoggle{display:block}
  .filters:not(.open)>.field,.filters:not(.open)>.chk{display:none}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.filters .done{display:none}
.filters>*{flex-shrink:0}   /* the phone sheet has a fixed height; fields must not be squashed to fit it */
.filters{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--navh,64px) + 12px);max-height:calc(100vh - var(--navh,64px) - 24px);overflow:auto;box-shadow:0 -13px 0 0 var(--bg)}
@media (max-width:820px){
  /* collapsed: a slim bar pinned under the menubar; open: a sheet below the menubar that scrolls on its own */
  .filters{position:sticky;top:var(--navh,64px);z-index:35;max-height:none;overflow:visible;box-shadow:0 -13px 0 0 var(--bg);padding:10px 12px}
  .filters.open{position:fixed;top:var(--navh,64px);left:0;right:0;bottom:0;z-index:45;overflow:auto;border-radius:0;border-left:0;border-right:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:none}
  .filters.open .done{display:block;position:sticky;bottom:0;margin-top:6px;font:inherit;font-family:var(--display);font-size:18px;font-weight:600;padding:12px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);cursor:pointer;width:100%}
  body.sheet-open{overflow:hidden}
}
.filters[hidden]{display:none}
.active{display:flex;flex-wrap:wrap;gap:6px}   /* the filters in force, one chip each, under the Filters bar; × clears that one */
.active[hidden]{display:none}
.chip{font:inherit;font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--accent-soft);border:1px solid transparent;border-radius:5px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip span{margin-left:5px;color:var(--muted)}
.chip:hover span{color:var(--accent)}
.field{display:flex;flex-direction:column;gap:4px}
#volnote{font-size:11.5px;color:var(--muted)} #volnote a{color:var(--accent)}
label{font-size:12.5px;font-weight:600;color:var(--muted)}
select,input[type=number],input[type=search]{font:inherit;font-size:14px;line-height:1.3;height:38px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--fg);width:100%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.near{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px}
.near select{grid-column:1/-1}
.near input{min-width:0}
.near button{font:inherit;font-size:17px;line-height:1;height:38px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--accent);cursor:pointer;padding:0}
.near button:disabled{opacity:.5;cursor:wait}
.filters select:disabled,.filters input:disabled{opacity:.55}   /* a control a scoped page fixes (catalog/pages.py) */
select.country:disabled{opacity:.45}
.nearnote{font-size:11.5px;color:var(--muted)} .nearnote a{color:var(--accent)}
.sub.loc{color:var(--muted);font-size:12px}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px}
.chk input{accent-color:var(--accent)}
.count{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0 0 10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.xsearch{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:-4px 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.xsearch a{color:var(--muted);text-decoration:none;padding:2px 8px;border-radius:5px;border:1px solid var(--line)}
.xsearch a:hover{color:var(--fg)}
.xsearch a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-soft)}
table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;cursor:pointer;user-select:none}
th[aria-sort]{color:var(--accent)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
th.num{font-family:inherit;font-size:11px}
td.brand{font-weight:600;white-space:nowrap}
td.model a{color:inherit;text-decoration:none}
@media (hover:none){td.model a:hover{text-decoration:underline}}
td .sub{display:block;color:var(--muted);font-size:11.5px}
.hit{color:var(--hit);font-weight:600}
.stores{font:inherit;font-size:12.5px;color:var(--accent);background:var(--accent-soft);border:0;border-radius:6px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.stores:hover{filter:brightness(1.05)}
tr.sub-row td{background:var(--surface);border-bottom:1px dashed var(--line);font-size:13px;padding-top:5px;padding-bottom:5px}
tr.sub-row td:first-child{padding-left:76px;color:var(--muted)}
@media (max-width:560px){tr.sub-row td:first-child{padding-left:58px}}
tr.sub-row td a{color:var(--fg);text-decoration:none;font-weight:600}
.spark{display:inline-block;margin-left:6px;vertical-align:middle;fill:none;stroke:var(--hit);stroke-width:1.4;stroke-linejoin:round}
.spark circle{fill:var(--hit);stroke:none}
.spark.up{stroke:var(--warn)}.spark.up circle{fill:var(--warn)}
.drop{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--hit);background:var(--accent-soft);border-radius:4px;padding:0 5px;vertical-align:middle}
.from{font-size:10.5px;color:var(--muted);margin-right:3px}
.ncol{color:var(--accent)}
.m .sub a.mp{color:var(--accent);text-decoration:none}.m .sub a.mp:hover{text-decoration:underline}
.colors{margin-top:4px;color:var(--muted)}
.colors a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);font-weight:500}
.colors a.out{color:var(--muted);text-decoration:line-through}
.colors .sep{margin:0 6px;color:var(--line)}
#lightbox .cap .colors a{color:#fff}
td.est{color:var(--muted);font-style:italic;cursor:help}
td.est.hit{color:var(--hit);opacity:.8}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent);margin-left:4px;vertical-align:middle}
.tag.used{background:var(--warn-soft);color:var(--warn)}
.featured{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.featured .flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.featured .fbody{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.featured .pic{flex:none}
.featured .fgo{font-size:13px;font-weight:600;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:6px 12px;white-space:nowrap;text-decoration:none}
.tbl{overflow-x:auto}
.more{margin:14px 0 0;text-align:center}
.nearshops{margin-top:18px;padding:16px 18px}
.nearshops h2{font-family:var(--display);font-size:20px;margin:0 0 4px;text-wrap:balance}
.nearshops p.sub{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.nearshops ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 18px;font-size:13.5px}
.nearshops li{display:flex;gap:6px;align-items:baseline;min-width:0;padding:3px 0;border-bottom:1px dashed var(--line)}
.nearshops li .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nearshops li a.nm{color:var(--fg);text-decoration:none} .nearshops li a.nm:hover{color:var(--accent)}
.nearshops li .wh{color:var(--muted);font-size:12px;white-space:nowrap;margin-left:auto}
.nearshops li .st{color:var(--accent);font-size:11px;white-space:nowrap}
.more button{font:inherit;padding:8px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);cursor:pointer}
.empty{padding:40px;text-align:center;color:var(--muted)}
@media (hover:hover){
  tbody tr{cursor:pointer}
  tbody tr:hover td{background:var(--accent-soft)}
}
tbody tr:focus-within td{background:var(--accent-soft)}
td.model .m{display:flex;gap:10px;align-items:flex-start;min-width:0}
td.model .m>div{min-width:0}
.dims-inline{display:none}
/* a results column too narrow for five columns (a tablet, or a desktop window under about 1140px with the filters beside
   it): the dimensions move under the board name, as on a phone. The store column stays until phone width. */
@container (max-width:819px){td.dims,th.hide-dims{display:none} .dims-inline{display:block;font-family:var(--mono);font-size:11.5px;color:var(--fg);margin-top:2px}}
@media (max-width:560px){.hide-sm,td.dims,th.hide-dims{display:none} .dims-inline{display:block;font-family:var(--mono);font-size:11.5px;color:var(--fg);margin-top:2px} th,td{padding:7px 5px} .count{font-size:11.5px} .pic{width:44px;height:44px}
  /* three columns on a phone: the price cell may wrap ("from" above the price, the drop tag below) and the sparkline goes, so the table never runs past the screen; long model names break rather than push */
  td.num:last-of-type,td.num:not(.hit){white-space:normal} .from{display:block;margin:0;line-height:1} .drop{display:block;width:max-content;margin:3px 0 0 auto} .spark{display:none} td.model{overflow-wrap:anywhere}
  .filters:not(.open){box-shadow:0 -13px 0 0 var(--bg),0 10px 0 0 var(--bg)}}
@media (max-width:820px){select,input[type=number],input[type=search]{font-size:16px}}
/* iOS Safari counts a <select>'s longest option toward the page width even when clipped; containing the field stops the sideways scroll */
.field{overflow:hidden;padding:3px;margin:-3px}