/* =========================================================================== find.css — page-scoped styles for /find/, the directory search surface. SCOPE: every selector below is namespaced under .find-page, which exists on exactly one in the site. Nothing here can reach a hub page, a tool page or the homepage. WHAT THIS FILE DOES NOT DO - It declares no colour literal. Every value resolves through var() to the ten canon tokens in /assets/v4.css. There is no hex below this block. - It does not restyle a single chassis or registry component. .tc-chip, .tc-field, .tc-select, .tc-btn, .tc-status, .reg-method__item and the focus ring all render exactly as they do everywhere else, because the moment this page's fields look different from a hub's fields the reader has to learn two systems to read one record. - It defines no badge, seal, star, meter, progress bar or score. The page publishes counts as words and digits; nothing is drawn as a proportion, because a bar invites reading "6 of 12" as a grade of a market. THE FOCUS RING comes from .reg-page in registry.css: a 3px Pacific 900 outline with an Aqua 400 halo. The old 3px Aqua-on-Foam ring measures 1.61:1 and fails. Nothing here overrides it. LOAD ORDER: after v4.css, tool-chassis.css and registry.css. =========================================================================== */ /* -------------------------------------------------------------------------- 1. THE PICKER BAND -------------------------------------------------------------------------- */ .find-page .find-picker { padding: clamp(30px, 4vw, 46px) 0 clamp(34px, 4vw, 52px); } /* The picker sits in a .tc-tool card so it inherits the chassis form primitives, the 44px targets and the corrected ring. Two selects sit side by side on a wide screen and stack on a phone; .tc-form already grids, this only sets the track. */ .find-page .find-picker .tc-form { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* stretch, not start: the two controls share a row and their hints wrap to different heights, which top-alignment turns into two selects sitting at two different vertical positions. Stretching the cells and letting the hint absorb the slack lands both selects on one line at every width. */ align-items: stretch; } .find-page .find-picker .tc-control { display: flex; flex-direction: column; gap: 6px; } .find-page .find-picker .tc-hint { flex: 1 0 auto; } /* -------------------------------------------------------------------------- 2. THE SELECTED-HUB PANEL (JS only — the 24 links below are the no-JS path) -------------------------------------------------------------------------- */ .find-page .find-result { display: grid; gap: 12px; } .find-page .find-result__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--pacific-900); } .find-page .find-result__open { margin: 4px 0 0; } /* -------------------------------------------------------------------------- 3. COVERAGE BAND -------------------------------------------------------------------------- */ .find-page .find-coverage { padding: clamp(34px, 4vw, 52px) 0; } /* A chip inside a

is a second line, not a trailing word: the number and its provenance read as one unit at every width. */ .find-page .find-coverage dd .tc-chip { margin-top: 8px; } .find-page .reg-limits strong { font-weight: 700; } /* -------------------------------------------------------------------------- 4. THE 24 HUBS — the no-JS surface, and the real content of this page -------------------------------------------------------------------------- */ .find-page .find-all { padding: clamp(34px, 4vw, 60px) 0 clamp(44px, 5vw, 72px); } .find-page .find-city { margin: 34px 0 12px; padding-bottom: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--pacific-900); border-bottom: 1px solid var(--sky-400); } .find-page .find-city:first-of-type { margin-top: 26px; } .find-page .find-hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } /* Every row is visually identical. There is no featured row, no highlight for the hub that reaches the record mark, and no dimming of the ones that do not: the difference between them is carried by the words in .find-hub__gate, which every row prints. */ .find-page .find-hub { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--white); border: 1px solid var(--ocean-600); border-radius: var(--radius-md); } /* Selection state comes from the accessible attribute, never from a class, so the visible state and the announced state cannot drift apart. */ .find-page .find-hub:has(a[aria-current="true"]) { border-width: 2px; border-color: var(--pacific-900); } .find-page .find-hub__link { display: inline-flex; align-items: center; min-height: var(--reg-tap); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pacific-900); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .find-page .find-hub__link:hover { color: var(--pacific-700); } .find-page .find-hub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; /* Pacific 900 on white = 11.68:1. The count is body copy, not fine print. */ color: var(--pacific-900); } /* The publication line. Pacific 700 on white measures 7.62:1 — it is quieter than the count but it is not dimmed, not italicised and not shrunk to footnote size, because "not published" is a result and not an apology. */ .find-page .find-hub__gate { margin: 0; padding-top: 8px; border-top: 1px solid var(--sky-400); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--pacific-700); } /* -------------------------------------------------------------------------- 5. NARROW SCREENS -------------------------------------------------------------------------- */ @media (max-width: 640px) { .find-page .find-hubs { grid-template-columns: 1fr; } .find-page .find-hub { padding: 16px 16px 14px; } } /* -------------------------------------------------------------------------- 6. REDUCED MOTION Nothing on this page animates and no state is carried by motion, so this block removes nothing a reader needs. It is here so a future edit that adds a transition inherits the contract instead of forgetting it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .find-page *, .find-page *::before, .find-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }