`), so
a sibling combinator had nothing to select and the rule was dead CSS.
Nothing looked broken: the toggle rendered, it opened and closed, and its
chevron turned. It just never hid anything. Measured on a 390x844 phone,
the panel stayed 839px tall with the toggle CLOSED and the first therapist
card began at y=1258 — a screen and a half of filter rail before a single
result, on the page whose entire job is showing results. Quick Counseling,
whose sheet targets `.filters-body` correctly, put its first card at
y=462.
Same structure, same intent, one wrong selector — which is why the harness
now asserts the collapsed height rather than the presence of the rule. */
.filters-body { display: none; }
.ftoggle[open] ~ .filters-body { display: grid; }
/* Open, the panel is a card in its own right, hinged off the summary above
it — the two rounded shapes have to read as one control, not as a button
that happens to sit on a box. */
.ftoggle[open] > .ftoggle-b {
border-radius: var(--r-lg) var(--r-lg) 0 0;
border-bottom-color: transparent;
box-shadow: none;
}
.ftoggle[open] > .ftoggle-b .fgroup-chev { transform: rotate(180deg); }
.ftoggle[open] ~ .filters-body {
margin-top: 0;
padding: var(--sp-2) var(--sp-5) var(--sp-5);
background: var(--bg-raised);
border: 1px solid var(--border);
border-top: 0;
border-radius: 0 0 var(--r-lg) var(--r-lg);
box-shadow: var(--shadow-card);
}
/* ── the header row, and the way back to the results ────────────────────
`.filters-skip` is a skip LINK, and the first version of this made it a
full-width indigo button — which put the loudest element on the page at the
TOP of the panel, next to the "Refine" caption, competing with the filters
it was meant to skip. It reads as "the thing to press", and pressing it
does nothing but scroll past the control you just opened.
It is a quiet link on the right of the caption row, which is what it is.
The real way back to the results on a phone is the flow the markup already
has: every filter is a LINK, so tapping one navigates, the new page arrives
with the toggle closed and the count updated, and the results are directly
underneath. Nothing to submit and nothing to dismiss. */
.filters-head { display: flex; align-items: center; gap: var(--sp-3); }
.filters-skip {
margin-left: auto;
font: 600 13px/20px var(--font-sans);
color: var(--indigo);
}
/* ⚠ THE ASIDE GIVES UP ITS CARD CHROME TO THE TOGGLE. On desktop `.filters`
IS the card — a white rail beside the results. On a phone the toggle is its
own pill and the open body is its own card, so leaving the aside's
background and border in place drew a white card inside a white card with a
pill floating in it. Same move archive.css already makes, and for the same
reason. */
.filters {
background: none;
border: 0;
box-shadow: none;
padding: 0;
}
.hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.hero { padding: var(--sp-10) 0 var(--sp-8); }
.hfind { max-width: 520px; }
.hsec--tint { padding: var(--sp-10) var(--sp-6); }
/* The contents rail collapses into the `
` above the prose. Both
lists render from the same array (legal.js `contents()`), so what is
hidden here and what is shown cannot disagree. */
.lg-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); margin-top: var(--sp-8); }
.lg-toc { display: none; }
.lg-toc-m { display: block; }
.lg-head h1, .lg-lede, .lg-summary { max-width: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
900 → the profile identity card unpins and becomes a banner
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.record { grid-template-columns: minmax(0, 1fr); }
.ident {
position: static;
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
grid-template-areas: "portrait id" "ref ref";
column-gap: var(--sp-4);
align-items: start;
}
.ident .portrait { grid-area: portrait; }
.ident .idbox { grid-area: id; }
.ident h1 { margin-top: 0; }
.ident .ref { grid-area: ref; }
.ident .btn, .ident .fine { display: none; } /* the dock carries the action */
.ident .ref > div:first-child { border-top: 1px solid var(--border); }
.gloss > div, .facts > div { grid-template-columns: 170px minmax(0, 1fr); gap: var(--sp-4); }
body { padding-bottom: 92px; }
.dock {
position: fixed; inset: auto 0 0 0; z-index: 60;
display: block;
padding: 0 var(--gutter) max(12px, env(safe-area-inset-bottom));
}
.dock-inner {
max-width: var(--page-max);
margin: 0 auto;
display: flex; align-items: center; gap: var(--sp-4);
padding: 10px 10px 10px 18px;
border-radius: var(--r-pill);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-edge);
box-shadow: inset 0 1px 0 var(--glass-specular), var(--shadow-glass);
}
.dock .l { flex: 1; min-width: 0; }
.dock .who { font: 600 14px/19px var(--font-sans); letter-spacing: -0.2px; color: var(--ink); }
.dock .st { font: 400 12px/16px var(--font-sans); color: var(--muted); }
.dock .btn { height: 44px; padding: 0 20px; font-size: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
680 → the phone artboard
---------------------------------------------------------------------------
The header's links fold behind the disclosure button. The nav is the
button's SIBLING, not its child — `.navt[open] ~ .site-nav` — so a browser
that has never heard of `::details-content` still shows the whole navigation
on desktop, and with no CSS at all the links are simply visible. That is the
shared header's device and the reason RENDER-NOTES §9 exists: both sites
once shipped a phone nav that was `display: none` with nothing in its place.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
.site-header { height: 56px; gap: var(--sp-2); padding: 0 8px 0 14px; }
.logo-word { font-size: 16px; }
.navt { display: block; margin-left: auto; }
.site-nav {
display: none;
position: absolute; top: calc(100% + 8px); right: 0; left: 0;
flex-direction: column;
padding: var(--sp-2);
border-radius: var(--r-xl);
/* SOLID, not frosted. Nesting one backdrop-filter inside another (the
header already has one) resolves inconsistently, and the first render of
it put the nav links straight over the therapist's name. The system's own
rule decides it: text sits on solid or strong-frosted layers only. The
glass EDGE and SHADOW stay, so it still reads as the navigation layer. */
background: var(--bg-raised);
border: 1px solid var(--glass-edge);
box-shadow: inset 0 1px 0 var(--glass-specular), var(--shadow-glass);
}
.navt[open] ~ .site-nav { display: flex; }
.site-nav a { min-height: 44px; padding: 12px 14px; border-radius: var(--r-md); font-size: 15px; color: var(--ink); }
.site-header { position: sticky; }
.page { position: relative; }
.card { padding: var(--sp-5); border-radius: var(--r-lg); }
.lede { font: 400 18px/26px var(--font-sans); }
.sec > h2 { font: 700 21px/27px var(--font-sans); }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.split > div + div { padding-left: 0; padding-top: var(--sp-5); border-left: 0; border-top: 1px solid var(--border); }
.gloss > div, .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.asks { grid-template-columns: minmax(0, 1fr); }
.modes { margin-left: 0; width: 100%; }
.ident { grid-template-columns: 64px minmax(0, 1fr); }
.portrait { --size: 64px; }
.portrait .ini { font-size: 22px; }
.ident h1 { font: 700 22px/28px var(--font-sans); }
.hero { padding: var(--sp-8) 0 var(--sp-6); }
.hero h1 { font: 700 34px/40px var(--font-sans); letter-spacing: -0.9px; }
.hero-lede { font: 400 16px/25px var(--font-sans); }
.hfind { padding: var(--sp-5); }
.hsec { padding: var(--sp-10) 0; }
.hsec--tint { padding: var(--sp-8) var(--sp-5); margin: var(--sp-8) 0; }
.hsec-head h2 { font: 700 26px/32px var(--font-sans); letter-spacing: -0.6px; }
.archive-head h1 { font: 700 28px/34px var(--font-sans); letter-spacing: -0.7px; }
.pg-head h1 { font: 700 28px/34px var(--font-sans); letter-spacing: -0.7px; }
.pg-h { font: 700 20px/26px var(--font-sans); }
.rgrid { grid-template-columns: minmax(0, 1fr); }
.foot-main { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-8) 0; }
.foot-bot { padding-bottom: var(--sp-8); }
.foot-bot .right { margin-left: 0; }
.activebar { flex-direction: column; align-items: flex-start; }
.activebar-clear { margin-left: 0; }
.results-page { margin-left: 0; width: 100%; }
/* ── the long-form documents on a phone ──────────────────────────────────
Type comes down a step, the section rule stays (it is the only thing
separating eleven screens of prose), and the two grid shapes — the defs
and the tables — stop being grids. */
.lg { padding: var(--sp-8) 0 var(--sp-12); }
.lg-head h1 { font: 700 31px/37px var(--font-sans); letter-spacing: -0.9px; }
.lg-lede { font: 400 17px/26px var(--font-sans); }
.lg-summary { padding: var(--sp-5); }
.lg-sec > h2 { grid-template-columns: 28px minmax(0, 1fr); font: 700 20px/27px var(--font-sans); }
.lg-sec > h2 .lg-n { line-height: 27px; }
.lg-sec p, .lg-tail p { font: 400 16px/26px var(--font-sans); }
.lg-defs > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.lg-tail { padding: var(--sp-5); }
.lg-toc-l a { min-height: 44px; align-items: center; }
/* ⚠ THE TABLE STOPS BEING A TABLE. A four-column "what is collected" grid at
360px is either a horizontal scroll nobody discovers or four words per
line. Each row becomes a card, the row header becomes its title, and every
cell carries its column name from `data-label` — which is why block() in
legal.js writes that attribute even though nothing above this width reads
it. `role="presentation"` is NOT set: the caption-less flattening keeps the
semantic row/cell relationship for a screen reader, which is still the
correct model; only the visual grid is dropped. */
.lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lg-table, .lg-table tbody, .lg-table tr, .lg-table td, .lg-table th { display: block; }
.lg-table tbody tr { padding: var(--sp-4); border-top: 1px solid var(--border); }
.lg-table tbody tr:first-child { border-top: 0; }
.lg-table tbody th {
padding: 0 0 var(--sp-2);
border-top: 0;
font: 600 15.5px/23px var(--font-sans);
}
.lg-table td {
padding: var(--sp-2) 0 0;
border-top: 0;
font: 400 14.5px/22px var(--font-sans);
}
.lg-table td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
font: 600 10.5px/15px var(--font-sans);
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--muted);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
44px minimum on every DISCRETE control — ON TOUCH, NOT ON NARROW
---------------------------------------------------------------------------
⚠ THIS USED TO LIVE INSIDE `@media (max-width: 680px)`, AND WIDTH WAS THE
WRONG QUESTION. A sweep of every page type at 320/360/390/430/768 found the
phone widths clean and 768 carrying 430 undersized controls — because an
iPad in portrait is 768px, is unambiguously a finger, and sat one pixel the
wrong side of a breakpoint. Every 810px and 834px tablet was in the same
position, as was any phone held in landscape.
`pointer: coarse` asks the question that actually matters: is the primary
input a finger or a cursor? It catches the tablets and the landscape phones,
and it correctly LEAVES ALONE a 400px-wide desktop browser window, where a
44px minimum buys nothing and costs vertical space.
`max-width: 680px` is kept as the second half of the query, not because it
adds a device — it does not — but because it is the fallback for a touch
device whose browser reports `pointer: fine` or does not report at all, and
because it keeps the rules applying in a narrow desktop window during
development, which is where they get looked at.
WCAG 2.5.8 (AA) asks for 24x24 and exempts links inline in a sentence;
RENDER-NOTES §9 set the bar at 44 for this site's mobile pass. `min-height`
plus `inline-flex` rather than padding, so the hit area grows without moving
the text off its baseline.
NOT INCLUDED, deliberately: links inside running prose (`.prov a`,
`.pg-tail a`, `.lg-sec a`, `.mpanel-p a`), and the `988lifeline.org` link in
the crisis paragraph. Those are the inline case the exemption is written for;
giving each one a 44px box either opens gaps mid-paragraph or makes its hit
area overlap the line above. The rules below are for links that are the whole
of the thing they label.
═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 680px) {
.opt { min-height: 44px; }
.fgroup-sum, .fmore-sum, .fsel-clear, .activebar-clear, .filters-skip,
.tcard-more, .hsec-more, .msec-more, .linkbtn, .lookup a, .report a,
.index a, .logo, .foot-mark, .foot-l a, .mlang a, .hchip,
.tname a, .hpost-t a, .mfaq-q a, .mstats a, .pg-card-t a,
.lg-toc-l a, .foot-h + ul a, .site-nav a, .pager a, .pager span {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.lg-toc-l a { display: grid; align-items: center; }
/* ⚠ `column-gap` IS NOT COSMETIC — WITHOUT IT THE NAME LOSES ITS SPACE.
The card title is `Anna Phillips, LICSW`.
Making that link an inline-flex box to give it a 44px hit area turns its
text node and its span into FLEX ITEMS, and flex layout discards the
whitespace between items — so the most-read line on the listing rendered
"Anna Phillips,LICSW" on every phone and tablet while reading correctly on
a desktop, which is exactly the kind of defect that survives review.
`column-gap`, not `gap`: with `flex-wrap: wrap` a row-gap would open a
space between the two lines of a name long enough to wrap. 0.25em is the
width of a space in this stack. */
.tname a { flex-wrap: wrap; column-gap: 0.25em; }
/* The removable filter chip. It is a LINK that removes a filter — the only
way back out of `?specialty=anxiety&accepting=1` without the browser's
back button — and it was 36px. `.opt-x` is its ✕ glyph, which grows with
it rather than staying pinned to the old height. */
.activebar .chip, a.chip { min-height: 44px; }
.opt-x { height: 36px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
capability + preference fallbacks — non-negotiable per the design system
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
.site-header, .dock-inner, .btn--ghost { background: var(--bg-raised); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header, .dock-inner, .btn--ghost { background: var(--bg-raised); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media print {
.site-header, .dock, .skip-link, .index, .filters, .ftoggle, .pager, .hfind { display: none; }
body { background: #fff; }
.card, .tcard, .rcard, .sec { box-shadow: none; break-inside: avoid; }
/* A privacy policy and a set of terms are the two pages on this site somebody
has an actual reason to print or save as a PDF — for a file, or to send to
somebody else. The navigation rail goes (a sticky contents list prints as a
column of dead links on page one), the reading measure goes, and nothing is
allowed to break across a page in the middle of a clause. */
.lg-toc, .lg-toc-m { display: none; }
.lg-body { display: block; margin-top: var(--sp-6); }
.lg-head h1, .lg-lede, .lg-summary { max-width: none; }
.lg-summary, .lg-tail, .lg-warn, .lg-note, .lg-tablewrap { box-shadow: none; break-inside: avoid; }
.lg-sec { break-inside: auto; }
.lg-sec > h2 { break-after: avoid; }
.lg-sec h3 { break-after: avoid; }
.lg-sec p, .lg-list li, .lg-ol li, .lg-defs > div { break-inside: avoid; }
/* The URL behind a link, once, next to it — a printed policy that says
"tell us here" with no address is a dead end on paper. */
.lg-sec a[href^="http"]::after, .lg-tail a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
"Report this listing" — the removal disclosure
---------------------------------------------------------------------------
A , not a modal, because both sites ship zero client JavaScript and
is a real button in every browser for free.
⚠ COMPACT ON PURPOSE, AND IT WAS NOT AT FIRST. The panel opened with a
heading, two paragraphs, three stacked radio rows, two text fields, a
textarea and a checkbox — taller than a phone screen, on a page whose job is
showing a therapist. It is now four controls: reason, name, email, submit.
The radios became one