/* Catalog — /paddles/browse only.
The faceted grid (.pn-*): filter rail, results toolbar, card grid, card
metric bars, pagination, and the static brand index the generator writes
below the app. Was the first third of paddle-finder.css; split out because
all 514 detail pages were downloading 29 KB of it to render a page that has
no grid.
Needs, and does not define: .pn-tag (paddle-shared.css) and --pt-tray-h, which
paddle-tray.js sets on and .pn-rail parks its sheet above.
Geometry, type scale and interaction timing follow the handoff prototype;
every colour comes from style.css's :root. No new tokens are defined here.
Breakpoint is 940px, not the site's 900px nav breakpoint. They are unrelated
questions: 900px is where six nav links stop fitting on one line, 940px is
where a 264px rail plus a 236px card minimum stops leaving room for two
cards. Moving either to match the other breaks the one it was measured for. */
/* ==========================================================================
Catalog — /paddles/browse
========================================================================== */
.pn-app {
margin-top: var(--space-2);
}
/* Search + collection chips. Sits under the hero copy, above the split. */
.pn-tools {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: var(--space-3);
}
/* The pill owns the border and the focus ring, not the — same pattern
as .global-search in style.css. That is what lets an optional magnifier icon
and the clear button sit inside the box without the input needing to reserve
left padding for an icon that may not be rendered. */
/* Search + the rent callout, side by side. Both wrap to their own line below
~640px of available width, so the callout never squeezes the search field. */
.pn-tools-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
}
.pn-search {
display: flex;
align-items: center;
gap: 0.6rem;
/* 24rem, not the old 30rem. The clear button pins to the pill's right edge,
so every extra rem of pill is another rem between the text you typed and
the control that clears it — at 30rem that gap was 402px. Narrower also
leaves the row width for the rent callout beside it. */
flex: 1 1 18rem;
max-width: 24rem;
/* A flex item's default min-width is `auto` — its CONTENT's minimum, which it
refuses to shrink below no matter what flex-shrink says. That was fine while
the clear button was a 26px icon box, but it now sizes to the word "Clear"
(51.2px), and at a 320px viewport the pill's content minimum grew 16.4px
past the 264px column every other block on the page sits in. The giveaway
was that it only misaligned once you TYPED — the button is display:none
until then, so an empty field measured correctly. There is no page-level
scrollbar (28px of gutter absorbs it), so it reads as the search box being
crooked rather than as a break. `min-width: 0` lets flex-shrink do its job;
.pn-search-input already carries the same fix for the same reason. */
min-width: 0;
min-height: 46px;
padding: 0 0.75rem;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--radius-s);
transition: border-color 0.15s var(--ease);
}
.pn-search:focus-within {
border-color: var(--bay);
outline: 3px solid var(--bay);
outline-offset: 2px;
}
.pn-search svg {
flex: none;
width: 16px;
height: 16px;
color: var(--ink-faint);
}
.pn-search-input {
flex: 1;
min-width: 0;
border: 0;
padding: 0.6rem 0;
background: transparent;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--ink);
}
.pn-search-input::placeholder {
color: var(--ink-faint);
}
/* See .pn-search:focus-within — the pill draws the ring, so the input must not
draw a second one inside it. This beats the sitewide :focus-visible rule by
coming later in the cascade at equal specificity. */
.pn-search-input:focus,
.pn-search-input:focus-visible {
outline: none;
}
/* Sized to its own label. This was `width: 26px; font-size: 1rem` — an icon
button's box — while the markup has always said the word "Clear", which needs
39px. The text overflowed the box by 13px, so it sat outside its own hit area
and its hover pill clipped the word. Auto width + padding makes the button
the shape of what it contains. */
.pn-search-clear {
flex: none;
display: grid;
place-items: center;
height: 26px;
padding: 0 0.55rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-faint);
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.pn-search-clear:hover {
background: var(--fog-dim);
color: var(--ink);
}
.pn-collections {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Commission disclosure — the .affiliate-note skin for the catalog. Sentence
and class come from assets/paddle-cta.js; only the look is here.
The disclosure OPENS the results — it sits between the toolbar and the first
row of cards, so it needs air below it, separating it from the grid.
Small and muted, which is what this line was always described as ("one
compact muted line") but never actually got: the catalog is the one surface
that doesn't load a sheet defining the base, so it rendered at full body size
while every other surface's ran at 11–12px. At body size the shared sentence
is a three-line slab above the first card. */
.pn-results [data-role="disclosure"] .affiliate-note--grid {
margin: 0 0 var(--space-2);
max-width: 78ch;
font-family: var(--font-body);
font-size: 0.75rem;
line-height: 1.5;
color: var(--ink-faint);
}
.pn-results [data-role="disclosure"] .affiliate-note--grid a {
color: var(--ink-soft);
}
.pn-chip {
padding: 0.42em 0.85em;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--paper);
font-family: var(--font-display);
font-size: 0.78125rem;
font-weight: 700;
color: var(--ink);
cursor: pointer;
transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease),
box-shadow 0.15s var(--ease);
}
.pn-chip:hover {
border-color: var(--bay);
color: var(--bay-deep);
box-shadow: 0 2px 8px -4px rgba(var(--ink-rgb), 0.35);
}
/* A collection is a saved filter set, so the active one has to read as a
*state*, not a hover. Solid teal, and the border goes with it so the pill
doesn't gain a visible seam. */
.pn-chip.is-on {
background: var(--bay);
border-color: var(--bay);
color: var(--fog);
}
/* ---------- layout split ---------- */
.pn-layout {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
/* min-width:0 on the results column, without which a long paddle name inside
the grid sets a min-content floor and pushes the whole layout wider than the
container instead of wrapping. */
.pn-results {
min-width: 0;
}
/* ---------- filter rail ---------- */
/* --header-h is kept live by nav.js's ResizeObserver on .site-header, so the
rail stays clear of the sticky header even when it wraps to two lines at
900-983px. The 130px fallback covers the frame before that JS runs. */
.pn-rail {
position: sticky;
top: calc(var(--header-h, 130px) + 12px);
/* The tray is fixed to the viewport, so body's padding-bottom does not move
it off a sticky element — the rail has to reserve that height itself or
its last two facets sit behind the tray with no way to scroll to them. */
max-height: calc(100vh - var(--header-h, 130px) - var(--pt-tray-h, 0px) - 24px);
overflow-y: auto;
padding: 0.85rem 1rem 1rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-m);
}
.pn-rail-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.7rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--rule-08);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Clay, not teal: "Reset all" undoes work, and the site reserves teal for
links that take you somewhere. It only appears when something is active, so
it is never a permanently-shouting control. */
.pn-reset {
padding: 0;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--poppy-deep);
cursor: pointer;
}
.pn-reset:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Ten facets stack in here, so every rem of per-facet chrome is paid ten times:
at 0.75rem the padding alone was 240px of the rail's 2075px scroll height. */
.pn-facet {
padding: 0.55rem 0;
border-top: 1px solid var(--rule-08);
}
.pn-facet:first-of-type {
border-top: 0;
padding-top: 0;
}
/* Works as a plain heading or as a — if the facet is a ,
the default triangle would collide with the caps label. */
.pn-facet-head {
margin: 0 0 0.35rem;
font-family: var(--font-display);
font-size: 0.78125rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink);
cursor: default;
}
summary.pn-facet-head {
cursor: pointer;
list-style: none;
}
summary.pn-facet-head::-webkit-details-marker {
display: none;
}
/* No gap: .pn-opt's min-height already separates the rows, and a gap on top of
it was paying twice for the same air across ~45 visible rows. */
.pn-opts {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
/* The row is a