/* ============================================================================
base.css — element resets + the primitives shared across the profile page.
Depends on tokens.css. Nothing here is page-specific; profile.css owns
layout. Primitives map 1:1 to the atoms in profile-parts.jsx:
Card → .card / .rcard Chip → .chip[--variant]
SectionTitle → .sec-head PrimaryButton → .btn / SecondaryButton → .btn--ghost
AvailabilityStrip → .strip DataRow → .facts > div > dt/dd
.eyebrow ← .label-eyebrow, .mono / .serif ← helpers in index.html
========================================================================== */
/* -- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.15;
color: var(--ink);
text-wrap: balance;
}
a { color: var(--sage-deep); text-decoration: none; }
a:hover { color: var(--sage); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* -- Helpers -------------------------------------------------------------- */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
line-height: 1.3;
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 12px; top: -60px;
z-index: 20;
padding: 10px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
box-shadow: var(--shadow-md);
transition: top .12s ease-out;
}
.skip-link:focus { top: 12px; }
/* Inline stroke icon. Sized in em so an icon always matches the text it sits
next to; the width/height attributes on the SVG are the no-CSS fallback. */
.ico { width: 1em; height: 1em; flex-shrink: 0; }
.ico--star { color: var(--clay); }
/* Small round separator between inline meta items. */
.dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--ink-4);
flex-shrink: 0;
}
/* Live/verified indicator. */
.led {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}
/* -- Card / panel --------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 32px;
}
/* Sidebar card — same surface, tighter padding (QuickFactsRail et al). */
.rcard {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 24px;
}
/* Eyebrow + title (+ optional right-hand action) — SectionTitle. */
.sec-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 18px;
}
.sec-head .eyebrow { margin-bottom: 6px; }
.sec-head h2 { font-size: 26px; }
/* The observed-period line, directly under the availability heading. It exists
so the window figure ("open on 5 of the last 30 days") and the observed
figure ("we have a check for 8 of those 30 days") are read together — they
are adjacent on purpose and must never be separated. */
.sec-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.lede {
margin: -6px 0 26px;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-3);
max-width: var(--measure);
text-wrap: pretty;
}
/* Inset well — used for the platform rows and the disclosure box. */
.well {
background: var(--bg-2);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
}
/* Empty state — the prototype's "Not specified yet" dashed pill. Every list
that can be empty uses this rather than inventing a value. */
.empty {
display: inline-block;
padding: 10px 14px;
font-size: 14px;
font-style: italic;
color: var(--ink-3);
background: var(--bg-2);
border: 1px dashed var(--line);
border-radius: var(--radius);
}
/* Tinted callout — the availability forecast block. */
.callout {
margin-top: 22px;
padding: 16px 18px;
background: var(--sage-tint);
border: 1px solid var(--sage-line-soft);
border-radius: 14px;
}
.callout .eyebrow { color: var(--sage-deep); margin-bottom: 8px; }
.callout p { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.callout b { color: var(--ink); font-weight: 500; }
/* -- Chip / tag ----------------------------------------------------------- */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
border-radius: 999px;
background: var(--surface-2);
color: var(--ink-2);
border: 1px solid var(--line);
white-space: nowrap;
}
.chip--sm { padding: 5px 9px; font-size: 12px; }
.chip--lg { padding: 9px 14px; font-size: 14px; gap: 8px; }
.chip--soft { background: var(--chip-soft-bg); border-color: var(--line-soft); }
.chip--outline { background: transparent; }
.chip--muted { background: transparent; color: var(--ink-3); border-style: dashed; }
.chip--feat { background: var(--sage-tint); color: var(--sage-deep); border-color: var(--sage-line); }
.chip--clay { background: var(--clay-tint); color: var(--clay-deep); border-color: oklch(0.86 0.05 50); }
.chip--ok { background: var(--success-tint); color: var(--success-ink); border-color: var(--success-line); }
/* Chips wrap freely wherever they appear in a list. */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.taglist--tight { gap: 6px; }
.note {
margin-top: 14px;
font-size: 12px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* -- Buttons -------------------------------------------------------------- */
.btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
background: var(--sage);
color: var(--on-sage);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 16px 22px;
border-radius: 14px;
box-shadow: var(--shadow-btn);
text-decoration: none;
}
.btn:hover { background: var(--sage-deep); color: var(--on-sage); text-decoration: none; }
.btn--sm { font-size: 15px; padding: 13px 18px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn--ghost {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
box-shadow: none;
font-size: 14px;
padding: 11px 16px;
border-radius: 11px;
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
/* Text-only affordance (the bio "Read more" toggle). */
.linkbtn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: var(--sage-deep);
background: none;
border: none;
padding: 0;
}
/* -- Header ---------------------------------------------------------------
DOM order is logo → status → toggle → nav; `order` is what puts the nav back
in second place here, and the reason for the DOM order is in siteHeader()'s
comment (the sibling combinator that opens the mobile menu only looks
forwards). `position: relative` is the containing block for that panel.
-------------------------------------------------------------------------- */
.site-header {
position: relative;
height: 72px;
display: flex;
align-items: center;
gap: 32px;
padding: 0 var(--pad);
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.logo {
order: 0;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px; /* the one link in the header on every screen */
flex-shrink: 0; /* …and the mark is never squeezed to a sliver */
color: var(--ink);
}
.logo svg { flex-shrink: 0; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo-word {
font-family: var(--font-serif);
font-size: 21px;
line-height: 1;
letter-spacing: -0.012em;
white-space: nowrap;
}
.logo-word b { font-weight: 600; }
.site-nav { order: 1; display: flex; gap: 24px; font-size: 14px; margin-left: 20px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
/* `.site-status` — the "● Checked 17 Aug 2026" line that sat between the logo
and the nav — was removed from siteHeader() on 17 Aug 2026, and its rules go
with it rather than being left behind. Dead CSS in a sheet every page loads
is not free: it is bytes on 22,000 URLs and, worse, the next person to read
this file has to work out whether the header still has a status line. See
the note on siteHeader() in render/profile.js for why it went. */
/* The mobile menu button. Empty above 640px and removed from the flow there —
see siteHeader(): the disclosure holds the button and NOTHING else, so the
desktop state never depends on ::details-content being understood. */
.navt { order: 3; display: none; }
/* The word "Menu" beside the icon. It had NO RULE in this sheet — glass.css
styles it and base.css never did, so it inherited the button's font at
whatever size that happened to be. Found by the "every emitted class has a
rule in a loaded sheet" check. */
.navt-t { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.navt-b {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 44px;
min-width: 44px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
font-size: 14px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.navt-b::-webkit-details-marker { display: none; }
.navt-b::marker { content: ""; }
.navt-b .ico { width: 18px; height: 18px; }
.navt[open] > .navt-b { background: var(--surface-2); border-color: var(--ink-4); }
/* -- Breadcrumb ----------------------------------------------------------- */
.crumbs { padding: 20px var(--pad) 0; font-size: 13px; color: var(--ink-3); }
.crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--sage-deep); }
.crumbs [aria-current="page"] { color: var(--ink); }
/* -- Availability strip --------------------------------------------------- */
/* The cells are decorative (aria-hidden); the accessible summary is the
visually-hidden paragraph rendered immediately before them. */
.strip { display: flex; gap: var(--cell-gap); align-items: flex-end; justify-content: flex-start; }
/* WIDTH IS CAPPED, NOT SET. `flex: 1 1 0` alone divides the panel between
however many cells there are — which is right at 30 and absurd below it: a
therapist with one day of history got ONE CELL THE WIDTH OF THE PANEL, a
700px bar reading as a huge claim about a single observation, and two days
read as two half-panel slabs. `max-width` bounds the growth at the cell's own
size, so a short window is a short row of normal cells, left-aligned, with
the rest of the line empty — which is what "we have one day of data" should
look like. At 30 cells the cap is never reached (the panel divides to ~23px
on the desktop artboard, ~8px at 390) so the full strip is unchanged. */
/* THE FALLBACK IN THE var() IS LOAD-BEARING. An undefined custom property makes
the whole declaration invalid at computed-value time, so `max-width` silently
becomes `none` and the cells go full width again — which is exactly what
happened live when a cached pre-deploy tokens.css (no `--cell-w`) met this
file: a one-cell strip measured 654px. `--cell-h` is defined in every version
of tokens.css there has ever been, and "a cell is never wider than it is
tall" is the rule anyway, so the cap survives a stylesheet mismatch. */
.cell {
flex: 1 1 0;
min-width: 0;
max-width: var(--cell-w, var(--cell-h, 26px));
height: var(--cell-h);
border-radius: 5px;
border: 1px solid var(--line);
background: transparent; /* no data / waitlist / full */
}
.cell.is-on { background: var(--sage); border-color: var(--sage); }
/* Not observed — no check was run against that day. It must not look like a
checked-and-closed day, which is what an empty solid-bordered cell means; 30
of those would claim 30 days of closed books nobody watched. Dashed, lighter
and faded reads as "nothing here" rather than "nothing available". */
.cell.is-none {
border-style: dashed;
border-color: var(--line-soft);
background: transparent;
opacity: 0.7;
}
/* The last day in the window. `.is-today` is the same emphasis, applied only
when that day really is today (the renderer tests `lastRunAt`, not the array
index — the newest cell is the newest RUN, which after an outage can be
weeks old). */
.cell.is-last, .cell.is-today { outline: 2px solid var(--ink); outline-offset: 2px; }
/* `.is-mid` (amber, "changed mid-day") is intentionally NOT styled: one daily
accepting-status pass cannot observe a same-day flip, so the state was
removed from the renderer. Restore both rules together with a second daily
pass in the sync — see the "CELL STATES" comment in profile.js. */
.axis {
margin-top: 10px;
display: flex;
justify-content: space-between;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
/* AS WIDE AS THE STRIP, NOT AS WIDE AS THE PANEL. The renderer sets
`--cells` on .strip-box; below 30 cells the strip is narrower than the
panel and the axis has to end where the cells end, or "Today" floats off
to the right of a strip that stopped 600px earlier. At 30 the calc exceeds
the panel, `min()` picks 100%, and the full-width axis is unchanged. */
width: min(
100%,
calc(var(--cells, 30) * var(--cell-w, var(--cell-h, 26px)) + (var(--cells, 30) - 1) * var(--cell-gap, 4px))
);
}
/* A window too short to carry two labels without them colliding: one span
reading as a range, sized by its own text rather than by the strip. */
.axis--range { width: auto; justify-content: flex-start; }
.legend {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 16px;
font-size: 12.5px;
color: var(--ink-3);
}
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); }
.sw.is-on { background: var(--sage); border-color: var(--sage); }
.sw.is-none { border-style: dashed; border-color: var(--line-soft); opacity: 0.7; }
/* -- Sidebar cards -------------------------------------------------------- */
/* DataRow — label/value pairs, marked up as a description list. */
.facts > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--line-soft);
}
.facts dt { font-size: 13px; color: var(--ink-3); }
.facts dd { font-size: 14px; font-weight: 500; color: var(--ink); text-align: right; }
/* Intro line inside a rail card (cross-platform blurb) */
.rcard-lede { margin: 6px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* License card */
.licbox { display: flex; align-items: center; gap: 12px; }
.licbox-link { margin-top: 16px; }
.licbox .ico-tile {
width: 40px; height: 40px;
border-radius: 11px;
background: var(--sage-tint);
color: var(--sage-deep);
display: grid;
place-items: center;
flex-shrink: 0;
font-size: 18px;
}
.licbox .t {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
}
.licbox .s { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 3px; }
/* Cross-platform rows */
.plats { display: flex; flex-direction: column; gap: 10px; }
.plat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
}
.plat .nm { font-size: 14px; font-weight: 500; color: var(--ink); }
.plat .sb { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
/* Trust card */
.trust-copy { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.trust-copy b { color: var(--ink); font-weight: 500; }
/* -- Disclosure -----------------------------------------------------------
The affiliate disclosure, on every page type, defined once. It was previously
the same eight lines in profile.css and in archive.css. It is a statement
about money that we are obliged to make and that somebody may want to read,
so it does not get smaller on a phone — see the 640 block below.
-------------------------------------------------------------------------- */
.disc { padding: 0 var(--pad); margin-top: 24px; }
.disc .box {
padding: 16px 18px;
font-size: 12.5px;
line-height: 1.6;
color: var(--ink-3);
max-width: 920px;
}
/* -- Footer ---------------------------------------------------------------
Grouped columns, driven by `site.footerGroups` (see footer() in profile.js).
It was one flex row of four links, which on a phone was a 13px line of
18px-tall targets — legible only if you already knew what you were aiming at.
Desktop: brand block, then the groups in an auto-fit grid.
Mobile (in the 640 block of every page sheet): one column, 48px rows.
-------------------------------------------------------------------------- */
.site-footer {
margin-top: 32px;
padding: 32px var(--pad) 24px;
border-top: 1px solid var(--line);
font-size: 13px;
color: var(--ink-3);
}
.foot-main {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
gap: 28px var(--gap);
align-items: start;
}
.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); }
.foot-mark:hover { color: var(--ink); text-decoration: none; }
.foot-name { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.foot-note { max-width: 34ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.foot-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px 20px;
}
.foot-h { margin-bottom: 4px; }
.foot-l { display: flex; flex-direction: column; }
.foot-l a {
display: inline-flex;
align-items: center;
min-height: 34px;
font-size: 13.5px;
color: var(--ink-2);
}
.foot-l a:hover { color: var(--sage-deep); }
.foot-bot {
margin-top: 26px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
}
.foot-c { font-size: 12.5px; color: var(--ink-3); }
.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--sage-deep); }
/* ==========================================================================
640 → the chrome on the 390px artboard
==========================================================================
THE HEADER, THE BREADCRUMB AND THE FOOTER ARE DEFINED ONCE, HERE. They used
to be redefined in profile.css AND archive.css, in two blocks that had to be
kept identical by hand — which is how the mobile header ended up with
`.site-nav { display: none }` in both and a replacement in neither. base.css
is loaded by every page there is, so the chrome cannot differ by page type
any more.
========================================================================== */
@media (max-width: 640px) {
.site-header { height: 56px; gap: 10px; border-bottom-color: var(--line-soft); }
.logo-word { font-size: 17px; }
/* The menu button appears and the nav becomes the panel it opens. */
.navt { display: block; }
.site-nav { display: none; }
.navt[open] ~ .site-nav {
display: flex;
flex-direction: column;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 40;
margin: 0;
padding: 4px var(--pad) 12px;
background: var(--surface);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
}
.navt[open] ~ .site-nav a {
display: flex;
align-items: center;
min-height: 52px;
font-size: 16px;
color: var(--ink);
border-top: 1px solid var(--line-soft);
}
.navt[open] ~ .site-nav a:first-child { border-top: none; }
.crumbs { padding-top: 6px; font-size: 12.5px; }
.crumbs ol { gap: 4px; }
.crumbs a, .crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
/* 12.5px was the smallest text on the page and it is the one sentence on it
with a legal reason to exist. */
.disc { margin-top: 20px; }
.disc .box { padding: 14px 16px; font-size: 13.5px; }
/* One column, and rows you can actually hit. */
.site-footer { margin-top: 24px; padding: 24px var(--pad) 20px; border-top-color: var(--line-soft); }
.foot-main { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.foot-note { max-width: none; font-size: 13px; }
.foot-nav { grid-template-columns: minmax(0, 1fr); gap: 0; }
.foot-col { border-top: 1px solid var(--line-soft); padding: 12px 0 8px; }
.foot-col:first-child { border-top: none; padding-top: 4px; }
.foot-h { margin-bottom: 2px; }
.foot-l a { min-height: 46px; font-size: 15px; }
.foot-bot { margin-top: 18px; padding-top: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
TOUCH — the 44px floor, asked as a pointer question rather than a width one
---------------------------------------------------------------------------
⚠ EVERY 44px RULE ON THIS SITE LIVES INSIDE `@media (max-width: 640px)`,
ACROSS SIX SHEETS, AND 640px IS NOT THE EDGE OF "TOUCH". A sweep of every
page type at 320/360/390/430/768 found the phone widths clean and 768 —
an iPad in portrait, unambiguously a finger — carrying 65 distinct controls
under the floor: every card title, every "Full profile" link, the pager, the
footer columns. Every 810px and 834px tablet is in the same position, as is
any phone held in landscape.
This block does not repeat the phone layout, only the hit areas, and it asks
`pointer: coarse` — is the primary input a finger? That catches the tablets
and correctly leaves a narrow DESKTOP window alone, where a 44px minimum
buys nothing and costs vertical space.
⚠ `html` PREFIXES ARE LOAD-BEARING, not noise. base.css is the second sheet;
archive.css, home.css, post.css and page.css all load after it, so a bare
`.tcard-more { min-height: 44px }` here would lose on source order to any
equal-specificity rule in those. `html .tcard-more` is (0,1,1) and wins from
where it sits. It is stated once, here, rather than being scattered back
across the six sheets it would otherwise have to be repeated in.
Everything below is `min-height`, which can only ever GROW a box — so
whichever of this block and the 640px blocks applies, the answer is ≥44px
and they cannot disagree. Links inside running prose are excluded, as they
are everywhere else: WCAG 2.5.8 exempts them, and a 44px box mid-paragraph
overlaps the line above it.
═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
html .tname a,
html .tcard-more,
html .tmore,
html .foot-l a,
html .foot-mark,
html .hsec-more,
html .linkbtn,
html .pg-card-t a,
html .activebar-clear,
html .activebar .chip,
html .fsel-clear,
html .filters-skip,
html .pager-p,
html .pager-step,
html .index a,
html .lookup a,
html .report a,
html .site-nav a,
/* The homepage search form's one checkbox. Its ACTIVATION AREA is the
label, not the 26px box the browser draws, so the label is what has to
clear the floor — and at 768 it was 27px tall because the padding that
fixes it lives in the 640px block. */
html .hfind-c,
html .logo {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* A card title is a heading whose text is the link: the box grows, the
heading keeps its line-height, and wrapping stops a long name forcing a
horizontal scrollbar out of the new inline-flex box.
⚠ `column-gap` IS NOT COSMETIC — WITHOUT IT THE NAME LOSES ITS SPACE. The
title is `Anna Phillips, LICSW`; making it
inline-flex turns the text node and the span into FLEX ITEMS, and flex
discards the whitespace between items. The most-read line on the listing
rendered "Anna Phillips,LICSW" on every phone while reading correctly on a
desktop. `column-gap` rather than `gap`, so a name long enough to wrap does
not also gain a gap between its two lines. */
html .tname a { flex-wrap: wrap; column-gap: 0.25em; }
html .opt { min-height: 44px; }
html .fgroup-sum, html .fmore-sum { min-height: 44px; }
/* ── ADDED 17 Aug 2026, FROM THE LAUNCH SWEEP ─────────────────────────────
The sweep had been running with `isMobile: false`, which means Chromium
never reported `pointer: coarse` and this whole block never applied to the
pages being measured. Re-run as a real touch device it found ZERO
under-sized targets at 390px — the phone work holds — and 71 at 768px, all
of them on Quick Counseling's blog, article and licence-lookup surfaces,
which the earlier mobile passes did not cover because they are the three
page types Maker does not have.
`.facts dt a` is the worst of them: on /license-lookup/{state}/ the whole
page is a list of therapist names, each a 15px-tall link, twenty-four of
them stacked. It is not exempt as running prose — the
contains the
link and nothing else, so it is a standalone target that happens to be set
in body type. Adding padding here rather than min-height keeps the two
columns of the
aligned; `align-items: center` on a block link would
do nothing. */
html .facts dt a,
html .lookup-list a { display: inline-block; padding-block: 12px; }
/* Category chips on the blog index and the article footer: 32px tall, which
clears WCAG 2.5.8's 24px floor but not a thumb. */
html .chip,
html .post-cats a,
html .toc-sum { min-height: 44px; }
html .chip { display: inline-flex; align-items: center; }
/* The rest of the blog and article surfaces, each a STANDALONE target that
happens to be set in body type — the "Read" link on a post card, the topic
links under it, the category in an article header, and every entry in an
article's table of contents. None is a link inside a sentence, so none gets
WCAG 2.5.8's inline exemption; they only looked exempt because they are
small. Padding rather than min-height so the list rhythm survives. */
html .pcard-more a,
html .tsub a,
html .toc-l a { display: inline-block; padding-block: 12px; }
/* 13px, not 12: the category link is 15px of line-height, and 15 + 24 is 39.
One pixel under the floor is still under the floor. */
html .pmeta-c a { display: inline-block; padding-block: 13px; }
/* ── 11px is the floor for text on a touch device ─────────────────────────
The sweep's remaining sub-11px findings are all the same device: a MONO,
uppercase, tracked micro-label sitting beside the full-size value it names
— the key in a filter chip ("STATE Texas"), the count on a collapsed
filter group, the pager number, the PREVIOUS/NEXT kicker on an article.
They earn their size on a desktop, where the pointer is precise and the
viewing distance is fixed. On a phone held at arm's length, 10px mono is
the point at which tracking stops rescuing legibility.
Raised on `pointer: coarse` only, so the desktop typography is untouched.
Everything else the sweep flags as small is 11px uppercase with tracking,
which is the design's small-caps device and stays. */
html .opt-x-k,
html .fgroup-on,
html .pnav-n,
html .pnx-k { font-size: 11px; }
/* Contents entries on a long-form document. On a phone the whole table of
contents is inside a , which makes every row a standalone jump
target — thirteen of them stacked, at 32px each, on the privacy policy. */
html .lg-toc-l a { min-height: 44px; align-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════════════
"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.
⚠ IN base.css, NOT page.css, AND THAT IS THE SECOND TIME THIS BIT. It lived
in page.css first — which a Quick Counseling PROFILE never loads (profiles
take tokens + base + profile; page.css is the 404 and /contact/). The form
therefore rendered with no styling at all on the only page it appears on, and
the honeypot — which is hidden by CSS and nothing else — was VISIBLE. A real
therapist would have filled in a field labelled "Website" and been refused as
a bot. base.css is on every page type, so the rules cannot miss again.
⚠ 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