/* Tool browser: archive + every category hub. Tokens come from .airr-pdp. */

.airr-browse-app{display:flex;flex-direction:column;gap:16px}

/* Category selector: one horizontal scrolling row of chips.
   JetSmartFilters nests input + .__button inside a <label class="__item"> inside a
   <fieldset class="__wrapper">, so the flex container is the fieldset, not the list. */
.airr-catbar{display:flex;align-items:center;gap:12px;min-width:0}
.airr-catbar-label{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a-muted);white-space:nowrap;
}
.airr-catbar-scroll{overflow-x:auto;min-width:0;flex:1;padding:2px 0;scrollbar-width:thin}
.airr-catbar .jet-filter{min-width:0}
.airr-catbar .jet-checkboxes-list-wrapper{
  display:flex;flex-wrap:nowrap;gap:7px;border:0;margin:0;padding:0;min-width:min-content;
}
.airr-catbar legend{display:none}
.airr-catbar .jet-checkboxes-list__row{margin:0;flex:0 0 auto}
.airr-catbar .jet-checkboxes-list__item{display:block;margin:0;cursor:pointer}
.airr-catbar .jet-checkboxes-list__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.airr-catbar .jet-checkboxes-list__decorator{display:none}
.airr-catbar .jet-checkboxes-list__button{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--a-card);border:1px solid var(--a-rule);border-radius:999px;
  padding:7px 15px;font-size:.86rem;color:var(--a-ink2);transition:all .12s;
}
.airr-catbar .jet-checkboxes-list__item:hover .jet-checkboxes-list__button{
  border-color:var(--a-accent);color:var(--a-accent);
}
.airr-catbar .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff;font-weight:600;
}
.airr-catbar .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button{
  outline:2px solid var(--a-accent);outline-offset:2px;
}

/* toolbar */
.airr-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--a-card);border:1px solid var(--a-rule);border-radius:10px;padding:10px 14px;
}
.airr-toolbar-search{flex:1;min-width:220px}
.airr-toolbar-search input[type=text],.airr-toolbar-search input[type=search]{
  width:100%;padding:8px 12px;font-size:.9rem;border:1px solid var(--a-rule2);
  border-radius:8px;background:var(--a-ground);color:var(--a-ink);
}
.airr-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.airr-toolbar .jet-sorting-select,.airr-toolbar select{
  padding:8px 11px;font-size:.87rem;border:1px solid var(--a-rule2);border-radius:8px;
  background:var(--a-card);color:var(--a-ink);cursor:pointer;
}

/* view switch */
.airr-view{display:inline-flex;border:1px solid var(--a-rule2);border-radius:8px;overflow:hidden}
.airr-view button{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:0;
  background:var(--a-card);color:var(--a-muted);
  padding:8px 12px;font-size:.83rem;font-weight:600;transition:all .12s;
}
.airr-view button + button{border-left:1px solid var(--a-rule2)}
.airr-view button svg{fill:currentColor}
.airr-view button:hover{color:var(--a-accent)}
.airr-view button[aria-pressed="true"]{background:var(--a-accent);color:#fff}

/* layout */
.airr-browse-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start}
.airr-facets{
  position:sticky;top:18px;display:flex;flex-direction:column;gap:4px;
  background:var(--a-card);border:1px solid var(--a-rule);border-radius:10px;padding:6px 14px 14px;
}
.airr-facets details{border-bottom:1px solid var(--a-rule);padding:10px 0}
.airr-facets details:last-of-type{border-bottom:0}
.airr-facets summary{
  cursor:pointer;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--a-muted);list-style:none;padding:2px 0;
}
.airr-facets summary::-webkit-details-marker{display:none}
.airr-facets summary::after{content:"−";float:right;font-weight:400}
.airr-facets details:not([open]) summary::after{content:"+"}
.airr-facets .jet-checkboxes-list-wrapper{
  display:flex;flex-direction:column;gap:6px;border:0;margin:8px 0 0;padding:0;
}
.airr-facets legend{display:none}
.airr-facets .jet-checkboxes-list__row{margin:0}
.airr-facets .jet-checkboxes-list__item{
  display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--a-ink2);cursor:pointer;margin:0;
}
.airr-facets .jet-checkboxes-list__button{display:flex;align-items:center;gap:8px;width:100%}
.airr-facets .jet-checkboxes-list__decorator{
  flex:0 0 16px;width:16px;height:16px;border:1px solid var(--a-rule2);border-radius:4px;
  background:var(--a-card);display:inline-flex;align-items:center;justify-content:center;
}
.airr-facets .jet-checkboxes-list__checked-icon{display:none}
.airr-facets .jet-checkboxes-list__checked-icon svg{width:11px;height:11px;fill:#fff}
.airr-facets .jet-checkboxes-list__input{position:absolute;opacity:0;width:0;height:0}
.airr-facets .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator{
  background:var(--a-accent);border-color:var(--a-accent);
}
.airr-facets .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__checked-icon{display:inline-flex}
.airr-facets .jet-filter-items-count{margin-left:auto;font-size:.78rem;color:var(--a-muted);font-variant-numeric:tabular-nums}
.airr-facets-clear{padding-top:12px}
.airr-facets-clear button,.airr-facets-clear .jet-remove-all-filters{
  width:100%;padding:8px;font-size:.84rem;font-weight:600;cursor:pointer;
  background:transparent;color:var(--a-accent);border:1px solid var(--a-rule2);border-radius:8px;
}
.airr-facets-clear button:hover{background:var(--a-accent-soft)}

/* results */
.airr-browse-results{display:flex;flex-direction:column;gap:14px;min-width:0}
.airr-activebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.airr-count{font-size:.85rem;color:var(--a-muted);white-space:nowrap}
.airr-count b{color:var(--a-ink);font-variant-numeric:tabular-nums}
.airr-activebar .jet-active-tag{
  display:inline-flex;align-items:center;gap:6px;background:var(--a-accent-soft);
  color:var(--a-accent);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600;
}

/* GRID view: the listing's own columns apply */
.airr-browse-results[data-view="grid"] .jet-listing-grid__items{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;gap:14px!important;
}
.airr-browse-results[data-view="grid"] .jet-listing-grid__item{width:auto!important;max-width:none!important;padding:0!important}

/* LIST view: one row per tool, image left, meta inline */
.airr-browse-results[data-view="list"] .jet-listing-grid__items{
  display:flex!important;flex-direction:column!important;gap:9px!important;
}
.airr-browse-results[data-view="list"] .jet-listing-grid__item{width:100%!important;max-width:none!important;padding:0!important}
.airr-browse-results[data-view="list"] .airr-tcard-link{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 15px;
}
.airr-browse-results[data-view="list"] .airr-tcard-head{display:contents}
.airr-browse-results[data-view="list"] .airr-tcard-id{min-width:0}
.airr-browse-results[data-view="list"] .airr-tcard-tag{
  grid-column:2;margin:2px 0 0;font-size:.85rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.airr-browse-results[data-view="list"] .airr-tcard-foot{grid-column:2;margin-top:4px}
.airr-browse-results[data-view="list"] .airr-tcard-score{grid-column:3;grid-row:1/3;font-size:1.2rem}

/* pagination */
.airr-pager{display:flex;justify-content:center;padding-top:6px}
.airr-pager .jet-filters-pagination{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.airr-pager .jet-filters-pagination__item{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--a-rule);border-radius:8px;background:var(--a-card);
  font-size:.87rem;cursor:pointer;color:var(--a-ink2);
}
.airr-pager .jet-filters-pagination__item.jet-filters-pagination__current{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff;font-weight:700;
}

@media (max-width:900px){
  .airr-browse-layout{grid-template-columns:1fr}
  .airr-facets{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}
  .airr-facets details{border-bottom:0;flex:1 1 160px;min-width:150px}
  .airr-facets-clear{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.airr-browse-app *{transition:none!important}}

/* ---------------------------------------------------------- favourites --- */
/* The data-store button is a sibling of the card inside the listing item, so the
   item is the positioning context. */
.jet-listing-grid__item{position:relative}
.airr-fav,.jet-data-store-link-wrapper{position:absolute;top:9px;right:9px;z-index:3}
/* The score badge is also the rightmost thing in the card head, so reserve room
   for the heart rather than letting the two overlap. */
.airr-browse-results[data-view="grid"] .airr-tcard-head{padding-right:36px}
.airr-browse-results[data-view="list"] .jet-data-store-link-wrapper{top:50%;transform:translateY(-50%);right:12px}
.airr-browse-results[data-view="list"] .airr-tcard-link{padding-right:52px}
/* Icon-only: JetEngine empties the anchor when it swaps to the added state, so a
   text label would only ever be visible in one of the two states. */
.jet-data-store-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;font-size:0;
  background:rgba(255,255,255,.94);border:1px solid var(--a-rule);
  border-radius:999px;padding:0;
  color:var(--a-muted);text-decoration:none;line-height:1;
  backdrop-filter:saturate(1.2) blur(2px);transition:all .12s;
}
.jet-data-store-link::before{content:"♡";font-size:1.05rem;line-height:1}
.jet-data-store-link:hover{border-color:var(--a-accent);color:var(--a-accent)}
.jet-data-store-link.jet-remove-from-store,
.jet-data-store-link.in-store{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff;
}
.jet-data-store-link.jet-remove-from-store::before,
.jet-data-store-link.in-store::before{content:"♥"}

/* --------------------------------------------------------- table view --- */
.airr-thead{display:none}
.airr-browse-results[data-view="table"] .airr-thead{
  display:grid;grid-template-columns:52px minmax(0,1fr) 150px 168px 74px;
  gap:14px;align-items:center;position:sticky;top:0;z-index:2;
  background:var(--a-card2);border:1px solid var(--a-rule);border-radius:8px;
  padding:9px 15px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--a-muted);
}
.airr-browse-results[data-view="table"] .airr-thead span:last-child{text-align:right}

.airr-browse-results[data-view="table"] .jet-listing-grid__items{
  display:flex!important;flex-direction:column!important;gap:0!important;
  counter-reset:airr-rank var(--airr-rank-start,0);
  border:1px solid var(--a-rule);border-top:0;border-radius:0 0 8px 8px;overflow:hidden;
}
.airr-browse-results[data-view="table"] .jet-listing-grid__item{
  width:100%!important;max-width:none!important;padding:0!important;
  counter-increment:airr-rank;
}
.airr-browse-results[data-view="table"] .airr-tcard{border:0;border-radius:0;border-bottom:1px solid var(--a-rule)}
.airr-browse-results[data-view="table"] .jet-listing-grid__item:last-child .airr-tcard{border-bottom:0}
.airr-browse-results[data-view="table"] .airr-tcard:hover{background:var(--a-accent-soft)}
.airr-browse-results[data-view="table"] .airr-tcard-link{
  display:grid;grid-template-columns:52px minmax(0,1fr) 150px 168px 74px;
  gap:14px;align-items:center;padding:9px 15px;grid-auto-rows:minmax(0,auto);
}
.airr-browse-results[data-view="table"] .airr-tcard-link::before{
  content:counter(airr-rank);grid-column:1;grid-row:1;align-self:center;
  font-size:.9rem;font-weight:700;color:var(--a-muted);
  font-variant-numeric:tabular-nums;text-align:center;
}
.airr-browse-results[data-view="table"] .airr-tcard-head{display:contents}
.airr-browse-results[data-view="table"] .airr-tcard-head img,
.airr-browse-results[data-view="table"] .airr-tcard-head .airr-mini{display:none}
/* .airr-tcard-id is a real element, so its children cannot reach the row grid and
   the Category column rendered empty. display:contents promotes them. */
.airr-browse-results[data-view="table"] .airr-tcard-id{display:contents}
.airr-browse-results[data-view="table"] .airr-tcard-id h3{
  grid-column:2;grid-row:1;align-self:center;
  font-size:.94rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.airr-browse-results[data-view="table"] .airr-tcard-cat{
  grid-column:3;grid-row:1;align-self:center;font-size:.82rem;color:var(--a-ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.airr-browse-results[data-view="table"] .airr-tcard-tag{display:none}
.airr-browse-results[data-view="table"] .airr-tcard-foot{
  grid-column:4;grid-row:1;align-self:center;margin:0;
  display:flex;flex-wrap:wrap;gap:5px;
}
.airr-browse-results[data-view="table"] .airr-tcard-score{
  grid-column:5;grid-row:1;align-self:center;text-align:right;
  font-size:1.05rem;font-weight:750;
}
/* The favourite button would collide with the score column in a dense table. */
.airr-browse-results[data-view="table"] .jet-data-store-link-wrapper{display:none}

@media (max-width:820px){
  .airr-browse-results[data-view="table"] .airr-thead,
  .airr-browse-results[data-view="table"] .airr-tcard-link{
    grid-template-columns:38px minmax(0,1fr) 62px;
  }
  .airr-browse-results[data-view="table"] .airr-thead span:nth-child(3),
  .airr-browse-results[data-view="table"] .airr-thead span:nth-child(4),
  .airr-browse-results[data-view="table"] .airr-tcard-cat,
  .airr-browse-results[data-view="table"] .airr-tcard-foot{display:none}
}