/* Highlighter's stylesheet. One file, no build step, vendored fonts.
*
* WHAT THIS FILE IS. It used to say it owned exactly four things and was "not
* a design pass and not the beginning of one". That was 005's answer to 001's
* open question and it was right for a year of screens nobody had looked at.
* It is no longer true: this file carries the product's look, because
* information density cannot be evaluated against an unstyled table -- how
* many practices fit on a screen, and how much of a sentence you can read
* without opening a row, are the questions the collecting pass turns on, and
* default Bootstrap answers them wrongly in a way that reads as neutral.
*
* HOW IT IS ORDERED, AND WHY THAT CHANGED (HL-015-07). 009 named two triggers
* for restructuring this file: past about 600 lines, or a second screen
* wanting rules that fight the table's. Both fired -- it passed 900 during 012
* and 015 added a front door that shares almost nothing with anything here.
*
* What it was ordered by until now was *when each rule was written*: 008's
* block, then 012's, then 015's, each appended to the end. That is a
* changelog, and a changelog is the one ordering that gets less useful the
* longer the file gets, because the question anybody actually arrives with is
* "what does this screen look like" and the answer was in four places.
*
* So it is ordered by what a rule is *for*, in three layers and then by
* screen:
*
* 1. FONTS vendored faces
* 2. TOKENS the brand, and Bootstrap re-pointed at it
* 3. FOUNDATIONS type voices, the chrome, buttons, links, focus
* 4. MEANINGS the things this file exists to carry: verified against
* reported, the eleven statuses, the staleness bands, muting
* 5. SHARED SHAPES what more than one screen uses: the panel, the way
* back, the foot of a page, a quiet verb
* 6. THE SCREENS, in the order she meets them:
* the front door, Review, the queue, Contacted, one practice
*
* *Restructure, not rebuild.* A build step is the other thing 009 put back on
* the table and it would reverse 001, which wants its own argument rather than
* arriving as a `package.json` diff in the middle of an information-architecture
* change. Nothing below is new and nothing is restyled; what changed is where
* a rule sits and what the rules 015 orphaned were deleted for.
*
* THE BRAND IS MEASURED, NOT INVENTED. The tokens are lifted from
* highlighterhealth.com and from the provider-search mock-up (AsstDemo 012),
* which took the landing page as its source. Paper and ink, one accent -- the
* marker -- and a type pairing that is the inverse of the usual: grotesk for
* data and chrome, serif for prose. That last line is a decision, not a
* preference: *prose is serif, data is sans*, and the serif is what stops a
* page about a child reading like a spreadsheet.
*
* THE ARCHITECTURE, SUCH AS IT IS. The markup carries semantic `hl-*` classes
* -- `hl-status-to_contact`, `hl-fact`, `hl-verdict` -- and this file says what
* they look like. That separation arrived by accident, because 005 refused to
* style anything, and it is the one worth keeping: a class says what a thing
* *is*, a token says what that currently looks like, and the two move
* independently.
*
* Bootstrap stays, and stops deciding appearance. It keeps layout, the grid,
* form controls and `table-responsive`; the block of `--bs-*` assignments
* below re-points its own variables at our tokens, which is how 5.3 is meant
* to be themed and is why the buttons, alerts and badges on pages this file
* never mentions still come out in the brand.
*
* The guardrails in `test_meaning_css.py` still hold and are not incidental:
* nothing here may hide a row, because a rule that can hide one is the rule
* that hides a ruled-out one; nothing is pulled in from another sheet, and
* nothing is fetched from a host that is not ours, because this is a page
* rendering a child's record. (That test is a substring check, so this
* paragraph may not spell either at-rule out.) They are also what makes this
* reordering safe to do: a status or a band that lost its rule in the move
* fails the suite rather than rendering bare. */
/* Vendored, like Bootstrap and htmx before them (001): one version
* everywhere, no request to a font host while a household's record is on
* screen, and a CSP we can actually write. Variable faces, latin subset only,
* one file each.
*
* `swap` rather than `block`: the mock-up blocks because it is recorded, and
* a flash of Georgia on camera is worse than a pause. Here a parent waiting
* on a webfont before she can read her own list is the worse trade. */
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("vendor/fonts/bricolage-grotesque-v9-latin.c47ac31e5437.woff2") format("woff2");
}
@font-face {
font-family: "Newsreader";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("vendor/fonts/newsreader-v26-latin.0a301b6df4c7.woff2") format("woff2");
}
/* Everything below this line refers to these and nothing else. A colour
* written into a rule is a bug in waiting: it is the one that gets missed
* when the palette moves. */
:root {
--hl-paper: #fcfbf6;
--hl-paper-deep: #f0ede2;
--hl-card: #fffdf7;
--hl-desk: #efece1; /* what the page sits on, behind the sheet */
--hl-ink: #191813;
--hl-ink-soft: #5f5a4e;
--hl-ink-faint: #a39d8c;
--hl-line: #dedacd;
--hl-line-soft: #eae6da;
/* The marker. THE brand device, and the reason the product is called this.
* It is for emphasis a person chose -- never for decoration, and never for
* a state a machine computed. */
--hl-marker: #eeff40;
--hl-marker-wash: rgba(238, 255, 64, 0.62);
/* The ring a control wears while the cursor is in it, and it is deliberately
* *not* the marker -- review round five. Dan: "using the highligher green for
* the 'selected text area' outline feels weird. It kind of clashes with the
* rest of the design. Let's shift that (everywhere) to something a bit more
* muted, don't worry about echoing the green/highlighter design. Just aim for
* middle of the road, totally unsurprising web UI."
*
* Which is the marker's own rule, one step further out than this file had
* taken it: the marker is for emphasis a person chose, and a field the cursor
* happens to be in is a state a machine computed. Soft ink at low alpha, so
* it is the page's own grey rather than a fifth colour. */
--hl-focus-ring: rgba(95, 90, 78, 0.3);
/* The only two additions to the brand, both derived, and neither of them a
* traffic light: olive for something in hand, clay for something waiting on
* somebody else. */
--hl-sage: #6f7d35;
--hl-sage-soft: #e9f2b8;
--hl-clay: #b8532c;
--hl-clay-soft: #f6e2ce;
--hl-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
--hl-serif: "Newsreader", ui-serif, Georgia, serif;
--hl-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* One radius family, one shadow. More than this and the page starts to look
* assembled from parts. */
--hl-radius: 0.75rem;
--hl-radius-pill: 999px;
--hl-lift: 0 1px 2px rgba(25, 24, 19, 0.04);
/* 023: what floats above the page -- the FPT's search bar and its panels. */
--hl-float: 0 6px 24px rgba(25, 24, 19, 0.12), 0 1px 3px rgba(25, 24, 19, 0.08);
/* 023: the FPT's "out of network, superbill" chip -- a maybe, between sage
* and clay. */
--hl-amber-soft: #fbeec4;
--hl-amber-ink: #6d5716;
/* Bootstrap, re-pointed. This block is the whole of "Bootstrap stops
* deciding appearance": every component we never mention by name still
* comes out in the brand, because it reads these. */
--bs-body-bg: var(--hl-desk);
--bs-body-color: var(--hl-ink);
--bs-body-font-family: var(--hl-sans);
--bs-body-font-size: 0.9375rem;
--bs-secondary-color: var(--hl-ink-soft);
--bs-secondary-bg: var(--hl-paper-deep);
--bs-tertiary-color: var(--hl-ink-faint);
--bs-tertiary-bg: var(--hl-paper-deep);
--bs-border-color: var(--hl-line);
--bs-border-radius: var(--hl-radius);
--bs-link-color: var(--hl-ink);
--bs-link-hover-color: var(--hl-ink);
/* Bootstrap composes link colour as `rgba(var(--bs-link-color-rgb), ...)`,
* so the hex above is not what an `` reads. Both, or every link on a
* page this file does not name stays Bootstrap blue -- which is how this
* was found. */
--bs-link-color-rgb: 25, 24, 19;
--bs-link-hover-color-rgb: 25, 24, 19;
--bs-emphasis-color: var(--hl-ink);
--bs-heading-color: var(--hl-ink);
}
/* ------------ foundations -- the voices, the chrome, and the two buttons -- */
body {
-webkit-font-smoothing: antialiased;
background: var(--hl-desk);
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--hl-sans);
font-weight: 700;
letter-spacing: -0.012em;
}
/* Prose is serif. The coverage sentence, the notes a parent typed, the
* paragraphs that explain why a column is missing -- everything that is
* somebody talking rather than a field being displayed. */
.hl-prose {
font-family: var(--hl-serif);
font-size: 1rem;
line-height: 1.5;
}
/* The marker stroke, lifted verbatim from the landing page. Drawn *across the
* line box* rather than filled, which is what makes it read as a pen and not
* a background colour. */
.hl-mark {
background-image: linear-gradient(
transparent 52%,
var(--hl-marker-wash) 52%,
var(--hl-marker-wash) 94%,
transparent 94%
);
background-repeat: no-repeat;
padding: 0 0.06em;
}
/* The eyebrow: mono, uppercase, tracked out. It is the label voice, used for
* anything that names a thing rather than saying it -- column headers, the
* section labels on the candidate page. */
.hl-eyebrow {
color: var(--hl-ink-faint);
font-family: var(--hl-mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* The chrome. A page is a sheet of paper on a desk. */
.hl-sheet {
background: var(--hl-paper);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
box-shadow: var(--hl-lift);
padding: 1.25rem 1.35rem;
}
.hl-navbar {
background: var(--hl-paper);
border-bottom: 1px solid var(--hl-line);
}
.hl-brand {
color: var(--hl-ink);
font-family: var(--hl-sans);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
text-decoration: none;
}
/* The wordmark's own, heavier stroke. */
.hl-brand > span {
background-image: linear-gradient(
transparent 60%,
rgba(238, 255, 64, 0.85) 60%,
rgba(238, 255, 64, 0.85) 96%,
transparent 96%
);
background-repeat: no-repeat;
}
/* Buttons. Two of them: the one that does the thing, and the quiet one beside
* it. Pills, because the landing page's call to action is a pill and this is
* the same product. */
.hl-btn,
.hl-btn-quiet {
border-radius: var(--hl-radius-pill);
font-family: var(--hl-sans);
font-size: 0.78rem;
font-weight: 600;
padding: 0.3rem 0.95rem;
text-decoration: none;
white-space: nowrap;
}
.hl-btn {
background: var(--hl-ink);
border: 1px solid var(--hl-ink);
color: var(--hl-paper);
}
.hl-btn:hover {
background: #000;
color: var(--hl-paper);
}
/* Not yet: a Save with nothing to save, a Mark Sent before the email is
* copied. There, and plainly not ready, rather than absent. */
.hl-btn:disabled,
.hl-btn:disabled:hover {
background: var(--hl-paper-deep);
border-color: var(--hl-line);
color: var(--hl-ink-faint);
cursor: default;
}
/* Done: Copied, once she has pressed it. A dark grey rather than the ink, so
* the black button left on the screen is the one she has still to press. */
.hl-btn-done,
.hl-btn-done:hover {
background: var(--hl-ink-soft);
border-color: var(--hl-ink-soft);
color: var(--hl-paper);
}
.hl-btn-quiet {
background: var(--hl-paper);
border: 1px solid var(--hl-line);
color: var(--hl-ink-soft);
}
.hl-btn-quiet:hover {
border-color: var(--hl-ink-faint);
color: var(--hl-ink);
}
/* The components we did not write. Bootstrap's buttons and focus rings carry
* compiled-in hex -- `#0d6efd` is written into `.btn-primary` itself, not read
* from a variable -- so re-pointing the theme is not enough for these three
* and they need naming. Everything else Bootstrap draws follows the `--bs-*`
* block above without being mentioned here, which is the point of that block. */
.btn-primary {
--bs-btn-bg: var(--hl-ink);
--bs-btn-border-color: var(--hl-ink);
--bs-btn-color: var(--hl-paper);
--bs-btn-hover-bg: #000;
--bs-btn-hover-border-color: #000;
--bs-btn-hover-color: var(--hl-paper);
--bs-btn-active-bg: #000;
--bs-btn-active-border-color: #000;
}
.btn-outline-primary,
.btn-outline-secondary {
--bs-btn-color: var(--hl-ink);
--bs-btn-border-color: var(--hl-line);
--bs-btn-hover-bg: var(--hl-ink);
--bs-btn-hover-border-color: var(--hl-ink);
--bs-btn-hover-color: var(--hl-paper);
--bs-btn-active-bg: var(--hl-ink);
--bs-btn-active-border-color: var(--hl-ink);
}
.btn-link {
--bs-btn-color: var(--hl-ink-soft);
--bs-btn-hover-color: var(--hl-ink);
}
/* The focus ring. It is the one piece of chrome a keyboard user sees on every
* field, and it used to be the brand's own colour -- see `--hl-focus-ring` for
* why it is a muted grey instead. */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
border-color: var(--hl-ink-faint);
box-shadow: 0 0 0 0.2rem var(--hl-focus-ring);
}
/* ------------------- the four meanings -- what this file exists to carry -- */
/*
* 1. Verified versus reported. 014 US-E2, and the beat the whole product
* argument lands on: a March directory claim and an August phone call must
* not look the same.
*
* *This no longer applies to the comparison table, and that is 009.* The
* dotted underline was right while it was a distinction; on the only real
* search every fact came from a run, so all 76 cells carried it, and the
* comment that used to live here had already predicted the failure -- "a
* table where every cell is decorated has decorated nothing". It was noise
* with the shape of a signal, which is worse than no signal.
*
* So the collecting pass says the plain thing instead: everything on it was
* learned from somewhere, the Refs column is where you look, and confirming
* or overriding a value is a later screen's job. These rules stay, and stay
* tested, because `_believed.html` still uses them -- there the two sit side
* by side over one key and the difference is the entire point of the region.
*
* Clay rather than a grey dot: an unconfirmed thing is the one thing on
* that region a parent should feel a small pull toward. Never conveyed by
* the border alone -- the provenance sentence is in the DOM as text, in a
* `title` and in a visually-hidden span. */
.hl-fact {
text-decoration: none;
}
.hl-reported {
color: var(--hl-ink-soft);
cursor: help;
text-decoration: underline dotted;
text-decoration-color: rgba(184, 83, 44, 0.6);
text-underline-offset: 0.2em;
}
.hl-verified {
color: var(--hl-ink);
cursor: help;
}
.hl-not-known {
color: var(--hl-ink-faint);
font-style: italic;
}
/* 2. Where it stands. Eleven statuses that are *not a funnel* (014 US-G1): a
* practice with no room is not further along than one not yet contacted, it
* is somewhere else. So no green-to-red ramp and no ordered colour scale --
* eleven tones at the same weight, which read as different rather than as
* further along, and a test asserts no two share a background.
*
* *`to_contact` wears the marker, and it is the only state that does.* It is
* the one a parent put there herself, by hand, one click at a time -- which
* is exactly what the brand device is for and what everything else on the
* page is not.
*
* 014 grouped the eleven into three questions, and the hues follow: the four
* contact verdicts are creams and a taupe, the five contacting states run
* terracotta / green / blue / periwinkle because they are the ones a parent
* tells apart at a glance, and the two endings are quiet greys.
*
* *Four of the eleven are neutrals and they are the weak point.* `candidate`,
* `do_not_contact`, `paused` and `ruled_out` differ mechanically -- the test
* passes -- and whether they differ to an eye is what the review is for. The
* stylesheet is deliberately *not* restructured here; it was overdue at 963
* lines before 014 and this adds five rules to it. */
.hl-status {
border-radius: var(--hl-radius-pill);
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.01em;
padding: 0.15rem 0.55rem;
white-space: nowrap;
}
.hl-status-candidate { background: #f0ede2; color: #5f5a4e; }
.hl-status-to_contact { background: #f2fbb0; color: #4a4f14; }
.hl-status-maybe_contact { background: #fbeec4; color: #6d5716; }
.hl-status-do_not_contact { background: #e5e0e6; color: #63596a; }
.hl-status-contacting { background: #fffdf7; color: #6c6656; border: 1px solid #dedacd; }
.hl-status-waiting { background: #f6e2ce; color: #8f3d1d; }
.hl-status-has_opening { background: #d9edd8; color: #2f5d34; }
.hl-status-scheduling { background: #d9e6f2; color: #2b4d6b; }
.hl-status-in_care { background: #e0dcf0; color: #45407a; }
.hl-status-paused { background: #e7e3d5; color: #6c6656; }
.hl-status-ruled_out { background: #eee7e4; color: #8a7f79; text-decoration: line-through; }
/* 3. How stale. 014 US-G4 decided plain words for now, so this is typographic
* weight rather than a bar -- and a band rather than a number, because
* there is no honest visual difference between four weeks and five.
*
* Since 009 the only surface that shows it is the candidate page: the
* comparison table is the collecting pass, and "last heard" is a question
* the contacting pass asks. */
.hl-staleness-fresh { color: var(--hl-ink-soft); }
.hl-staleness-aging { color: var(--hl-ink); }
.hl-staleness-stale { color: var(--hl-clay); font-weight: 600; }
/* 4. Ruled out and paused. Present, and clearly not in play. They stay in the
* table because 014's honesty argument needs "we looked at this one, and
* here is why not" to be answerable months later -- so they are faded, and
* they come back to full strength under the cursor. */
.hl-closed {
opacity: 0.55;
}
.hl-closed:hover {
opacity: 1;
}
/* ----------------- shared shapes -- what more than one screen is made of -- */
/* A quiet verb, on a panel and beside a control. Small and low-contrast at
* rest, with the marker coming back only on hover -- it is a way out of
* something rather than the thing the screen is for. */
a.hl-gesture {
display: inline-block;
}
.hl-gesture {
color: var(--hl-ink-soft);
font-size: 0.7rem;
text-decoration: none;
white-space: nowrap;
}
.hl-gesture:hover {
color: var(--hl-ink);
text-decoration: underline;
text-decoration-color: var(--hl-marker);
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
/* The candidate page's two extra shapes. Same rules as above, said where the
* page needs them: a provenance sentence is quieter than the value it is
* about, and a superseded observation is quieter still -- it is still true
* about what we were told, and it is no longer what we believe. */
.hl-provenance {
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
font-size: 0.875rem;
}
.hl-superseded {
color: var(--hl-ink-soft);
text-decoration: line-through solid;
text-decoration-color: var(--hl-ink-faint);
}
/* The foot of the queue, and of the status page. Quiet: the way on from here
* is not something she should be pulled towards mid-pass. */
.hl-queue-foot {
display: flex;
align-items: baseline;
gap: 1rem;
justify-content: space-between;
padding-top: 1.3rem;
}
.hl-queue-foot a {
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
font-size: 0.95rem;
text-decoration: underline;
text-decoration-color: var(--hl-line);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
/* The way back, and it is the front door on every spoke. HL-015-03. Quiet: it
* is the thing she reaches for when she is done, not the thing the screen is
* for.
*
* *Review does not use it since HL-015-11*: its title is the link, which is the
* same rule in a shape that costs no line. The queue, Contacted and the
* candidate page still carry the arrow, and whether they should follow Review
* is the next thing to look at rather than something to guess at here. */
.hl-way-back {
margin: 0 0 0.75rem;
}
/* A page's title and the one line under it saying what to do here. HL-015-11.
*
* Dan: "I'm missing having titles for the pages. The overall IA/UI at the top
* of the pages feels cluttered." Six things had accumulated above Review's
* first row; what is left is these two.
*
* *The title is a link and must not look like one.* It goes to the front door
* -- Dan: "make that title a link back to the search home page (but don't give
* it an underline or an arrow)" -- and an underline or an arrow would make it a
* control. Without either it is the name of where you are, which happens to
* take you to where that is. The only affordance is on hover, and it is the
* marker underline the sorted column header already uses. */
.hl-page-title {
font-family: var(--hl-sans);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.012em;
margin: 0 0 0.15rem;
}
.hl-page-title a {
color: inherit;
text-decoration: none;
}
.hl-page-title a:hover {
text-decoration: underline;
text-decoration-color: var(--hl-marker);
text-decoration-thickness: 3px;
text-underline-offset: 0.2em;
}
/* What this screen is for, and since review 3 of 015 it is *not prose*.
*
* It was serif, on the argument that it is a sentence to her rather than a
* label on something. Dan: it "feels a bit too quiet and feels more attached to
* the overall headline than to the body of the page", and "let's have it match
* the font of the overall headline (right now it's weirdly in some serif font,
* which I don't see anywhere else on the page)."
*
* Both halves of that are one mistake. *Prose is serif, data is sans* is this
* file's rule and it is a good one; what was wrong was filing this line as
* prose. "Choose practices to contact" is an instruction naming the screen's
* one job -- the same kind of thing as the title above it and the column
* headers below it -- so it was the only serif on a page made entirely of sans,
* which is why it read as belonging to something else.
*
* So: the title's face, a step up in size and weight from where it was, and
* near-ink rather than soft ink. And *pushed down*, which is the other half of
* what Dan asked for -- the gap above it is now larger than the gap below it,
* so it groups with the table it introduces rather than with the title it used
* to sit under. */
.hl-page-subhead {
color: var(--hl-ink);
font-family: var(--hl-sans);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.006em;
margin: 1.5rem 0 0.8rem;
}
/* The panel behind a door. HL-012-03. It replaces the row it belongs to, so it
* keeps the row's rhythm and gains a deeper ground: she is in one practice
* now, and the rest of the queue is still there underneath. */
.hl-panel {
background: var(--hl-paper-deep);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0.6rem 0;
padding: 1.1rem 1.2rem;
}
/* The largest thing in the panel, because it is what she came for. A number at
* display size is also a number she can read out to somebody. */
.hl-panel-door {
color: var(--hl-ink);
font-size: 1.5rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.015em;
text-decoration: none;
word-break: break-word;
}
.hl-panel-door:hover {
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* Radios underneath, because it is one question with three answers. The input
* is taken out of the flow rather than hidden by the one rule this stylesheet
* refuses to contain -- see `test_meaning_css.py` -- and it stays focusable,
* because a radio a keyboard cannot reach is a radio some parents cannot
* answer at all. */
.hl-outcomes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.hl-outcome {
cursor: pointer;
}
.hl-outcome input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.hl-outcome span {
background: var(--hl-paper);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius-pill);
color: var(--hl-ink-soft);
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
padding: 0.4rem 1rem;
}
/* *The marker goes on the button, not around it.* It was a ring of
* `--hl-marker-wash` outside a pill that stayed paper-coloured, and Dan: "The
* button coloring... is weird -- it's a light green outside the clicked button,
* I think it should likely color that button." A halo reads as focus, which is
* a different fact and already has its own rule below. The marker means a
* person chose this, and the thing she chose is the pill. */
.hl-outcome input:checked + span {
background: var(--hl-marker-wash);
border-color: var(--hl-ink);
color: var(--hl-ink);
}
.hl-outcome input:focus-visible + span {
outline: 2px solid var(--hl-ink);
outline-offset: 2px;
}
.hl-panel-note {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
/* Paper inside the panel's deeper ground, so the box she types into reads as
* the thing to type into. */
.hl-panel-note textarea {
background: var(--hl-card);
font-family: var(--hl-serif);
font-size: 0.95rem;
}
.hl-panel-actions {
align-items: center;
display: flex;
gap: 0.9rem;
}
.hl-panel-error {
color: var(--hl-clay);
font-family: var(--hl-serif);
margin: 0;
}
/* "(optional)" beside a label that is otherwise an eyebrow: the eyebrow is
* uppercase and tracked, and this is a word she reads rather than a heading
* she scans. */
.hl-optional {
color: var(--hl-ink-faint);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* ------------------------------------------- the front door -- HL-015-02 -- */
/* Four doors and nothing else. HL-015-02, and the screen 009's second
* restructure trigger was about: it shares almost nothing with the table.
*
* *Nothing here is marked.* The marker means a person chose this practice --
* it is why the active chip is ink and the external-link arrow is
* `--hl-ink-faint` -- and on four doors it would mean the system chose. So
* the doors are equal, and emphasis, if it is ever wanted, has to follow
* something she did. */
.hl-front-door {
margin: 0 auto;
max-width: 34rem;
}
.hl-front-door-title {
font-size: 1.35rem;
margin-bottom: 1.35rem;
}
/* The one permitted noticing, and it is one. Clay rather than the marker:
* this is the system saying it has observed something, which is exactly the
* thing the marker may not be spent on. */
.hl-notice {
background: var(--hl-clay-soft);
border-radius: var(--hl-radius);
color: var(--hl-ink);
font-family: var(--hl-serif);
font-size: 1rem;
line-height: 1.4;
margin-bottom: 1.35rem;
padding: 0.8rem 1rem;
}
.hl-doors-stack {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
/* A door is a sentence and a way in. Serif, because it is prose she reads
* rather than data she scans -- which is this file's oldest rule and is the
* whole difference between this screen and the table. */
.hl-door-big {
align-items: center;
background: var(--hl-card);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
box-shadow: var(--hl-lift);
color: var(--hl-ink);
display: flex;
gap: 1.2rem;
justify-content: space-between;
padding: 1.15rem 1.3rem;
text-decoration: none;
}
.hl-door-big:hover {
border-color: var(--hl-ink);
}
.hl-door-words {
font-family: var(--hl-serif);
font-size: 1.3rem;
line-height: 1.25;
}
.hl-door-arrow {
color: var(--hl-ink-faint);
flex-shrink: 0;
font-size: 1.1rem;
}
/* ---------------------------------------- Review -- the comparison table -- */
/* The densest thing in the product and the screen a parent lives in. Small
* type, tight rows, a hairline between them and nothing else: no zebra, no
* vertical rules, no outer border. What separates one practice from the next
* is the line; everything else on the row should be content.
*
* Cells align to the top because they hold very different amounts of prose,
* and centring makes a two-word answer float in the middle of a paragraph. */
.hl-table {
border-collapse: collapse;
font-size: 0.78rem;
width: 100%;
}
.hl-table > thead > tr > th {
border-bottom: 1px solid var(--hl-line);
color: var(--hl-ink-faint);
font-family: var(--hl-mono);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.11em;
padding: 0 0.5rem 0.5rem;
text-align: left;
text-transform: uppercase;
vertical-align: bottom;
}
.hl-table > tbody > tr > td {
border-bottom: 1px solid var(--hl-line-soft);
line-height: 1.35;
padding: 0.45rem 0.5rem;
vertical-align: top;
}
/* The practice's name: the one thing on the row set in something other than
* the data voice, because it is what she is looking for when she scans. */
.hl-table [data-testid="practice-name"] {
color: var(--hl-ink);
display: inline-block;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
}
/* A quiet arrow at rest, so a name reads as clickable without her having to
* hover to find out -- an underline under a name already bold enough to read
* as a heading turned out to be more weight than the row could carry.
* `--hl-ink-faint` rather than `--hl-marker`: the marker means "a person
* chose this practice" everywhere else on the row, and this is only the
* affordance. A practice with no website is plain text (no ``), so it
* never gets one. */
.hl-table a[data-testid="practice-name"] .hl-external-arrow {
color: var(--hl-ink-faint);
display: inline-block;
font-size: 0.7rem;
font-weight: 400;
margin-left: 0.2em;
}
.hl-table a[data-testid="practice-name"]:hover .hl-external-arrow {
color: var(--hl-marker);
}
/* Column widths. Not a look, arithmetic: without it the browser gives every
* column whatever its widest cell asks for. What it buys is the thing that
* cannot be evaluated any other way -- how many practices fit on a screen, and
* how much of a focus sentence you can read without opening the row.
*
* *The fact columns are addressed by key, and that is a hint rather than a
* rule.* Which keys have columns is a property of the search (008), so a key
* with no rule here is not a bug -- it takes its share the way it did before.
* `focus` gets the most because it is the column a parent actually reads, and
* `in_network` next because insurance answers are phrases rather than words. */
/* The practice's name, and the widest thing on it -- "In-Tune Integrative
* Developmental Therapies for Children and Families" is a real one. Left to
* the browser this column was given the width of its *shortest* plausible
* name and the long ones wrapped to five lines, which set the height of every
* row beside them. Two lines is the budget. */
.hl-col-practice {
width: 15rem;
}
/* Practice Notes, review 4 of 015 and the third try at it.
*
* The first drew them inside the name's cell on a line underneath. Dan: "I want
* them to be visible as almost a pseudo column. So the reader can vertically
* scan through all the practice names *and* through all the notes, separately.
* I just don't want a header you can't sort on."
*
* The second gave them this cell under a `colspan="2"` header saying Practice
* over both, which Keya read as confusing. The cell was right and the header
* was not, so nothing here changed: a column beside the name, read down rather
* than across, and now with its own name over it.
*
* The class is on the `| ` as well as the ` | `, the way `hl-col-practice`
* and `hl-col-source` are: the width is the column's, and the head's own rules
* are more specific, so a header still reads as a header.
*
* Quieter than the name and *the same size as it*, which is 0.82rem -- the
* name's own, set a few rules down. As a caption under the name it was smaller
* than the name and read as a footnote to it; the whole point of moving it out
* is that it is the column she actually compares on. Soft ink is enough to say
* which of the two leads. */
.hl-practice-notes {
color: var(--hl-ink-soft);
font-size: 0.82rem;
width: 16rem;
}
/* A phrase, and since review 3 of 015 it is a person's name as often as not --
* so it gets the width to put one on a line. */
.hl-col-source {
width: 8rem;
}
th[data-fact-column="focus"] {
width: 30%;
}
th[data-fact-column="in_network"] {
width: 17%;
}
/* Narrow, and the header is allowed to wrap onto two lines to stay that way.
* It is a number of minutes under a header that says what kind of number. */
.hl-col-drive {
white-space: normal;
width: 7rem;
}
/* The chips. A row of filters, one of them on. The active one is ink rather
* than the marker: the marker means "a person chose this practice", and a
* filter is a view, not a verdict. */
.hl-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.hl-chip {
background: var(--hl-paper);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius-pill);
color: var(--hl-ink-soft);
font-size: 0.72rem;
padding: 0.2rem 0.7rem;
text-decoration: none;
white-space: nowrap;
}
.hl-chip:hover {
border-color: var(--hl-ink-faint);
color: var(--hl-ink);
}
.hl-chip-on {
background: var(--hl-ink);
border-color: var(--hl-ink);
color: var(--hl-paper);
}
.hl-chip-count {
font-family: var(--hl-mono);
font-size: 0.66rem;
opacity: 0.7;
}
/* Not meaning, just the affordances the four above need somewhere to sit. */
.hl-sort {
color: inherit;
text-decoration: none;
}
.hl-sort:hover {
color: var(--hl-ink);
}
.hl-sorted {
color: var(--hl-ink);
text-decoration: underline;
text-decoration-color: var(--hl-marker);
text-decoration-thickness: 2px;
text-underline-offset: 0.25em;
}
/* `.hl-referred-by` came off with HL-015-09: the Source cell is one phrase now
* -- the person's name for a referral, the category for everything else -- so
* there is no second, quieter half of it to style. */
.hl-status-note {
color: var(--hl-ink-soft);
font-size: 0.72rem;
}
/* Its own line: run inline it reads as part of the practice's name. */
.hl-front-door {
color: var(--hl-ink-soft);
display: block;
font-size: 0.72rem;
}
/* The row's disclosure, and the region it opens. HL-008-02. The control is not
* the point, the row is, so it is as quiet as the links beside it -- and it is
* in the label voice, because "Refs" is scaffolding for us rather than a thing
* a parent is being offered. The region is tinted so that an opened row reads
* as belonging to the row above it rather than as another practice; it is
* hidden and shown by Alpine rather than by a rule here, because a rule that
* can hide a row is the rule that hides a ruled-out one. */
.hl-disclose {
color: var(--hl-ink-faint);
display: block;
font-family: var(--hl-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}
.hl-disclose:hover {
color: var(--hl-ink);
}
.hl-row-detail > td {
background: var(--hl-paper-deep);
}
/* Review's three words, hers marked. HL-015-05, and it was a pill beside two
* buttons -- the pill saying what she had answered, the buttons what she
* could. One question asked twice.
*
* *The marker here is the only one on that screen*, and the only one on 015's
* canvas that is unambiguously hers: the marked word is literally the word she
* said. */
.hl-verdicts {
align-items: stretch;
display: flex;
/* Stacked since HL-015-10. Three words side by side read as a row of
* filters -- the same shape as the chips that used to sit above the table --
* and a column of three reads as one question with three answers. It costs
* row height, which is what 009 spent its density argument on; the trade is
* that the pass is nineteen *choices* rather than fifty-seven words. */
flex-direction: column;
gap: 0.15rem;
white-space: nowrap;
}
.hl-verdict {
background: none;
border: 0;
border-radius: var(--hl-radius-pill);
color: var(--hl-ink-faint);
font-family: var(--hl-sans);
font-size: 0.72rem;
font-weight: 600;
padding: 0.18rem 0.5rem;
/* Stacked, so the three words start on one edge rather than centring
* against each other -- and the marked one no longer changes its padding,
* which in a column would move the word sideways as she clicks it. */
text-align: left;
}
.hl-verdict:hover {
color: var(--hl-ink);
}
.hl-verdict-on {
border-radius: var(--hl-radius-pill);
color: var(--hl-ink);
font-weight: 700;
}
/* *Coloured by which word she said*, HL-015-10, and this is the one place in
* the product where a colour means a person's *answer* rather than a state a
* machine computed. Dan: "when clicked on, let's color them differently for
* yes/no/maybe -- likely light / desaturated versions of green/yellow/grey but
* I'm not certain."
*
* *It is a traffic light, and the tokens are the argument against it becoming
* one.* The block at the top of this file says the two derived hues are
* "neither of them a traffic light", and that rule is about the *statuses* --
* eleven situations that are not ordered and must not read as a funnel. These
* three are ordered, by her, on purpose: yes, maybe, no is a judgment with a
* direction in it, and it is the only place in the product that has one. So it
* gets the brand's own three rather than a green, an amber and a grey: sage for
* something she is taking forward, the marker wash for something held, and the
* paper the table is already made of for something set down.
*
* Each carries its border so the three are told apart by more than fill -- at
* this size and this saturation, fill alone is about a third of a contrast
* step. */
.hl-verdict-on.hl-verdict-yes {
background: var(--hl-sage-soft);
box-shadow: inset 0 0 0 1px var(--hl-sage);
}
/* *Maybe is clay, not the marker wash*, review 3 of 015. Dan: "let's keep the
* color for the 'Yes' buttons and the 'No' buttons, make the 'Maybe' button
* something else. It feels *more* prominent than Yes now, and also too closely
* matches the Contact Selected Practices button. I think I want to try a very
* desaturated orange (which matches traffic lights a bit, though I *don't* want
* to use red for the No)."
*
* Both complaints are the same fact: the marker wash is the brightest thing
* this file can draw, so the *middle* answer was shouting louder than the
* decisive one beside it, and it matched a button two inches above it that
* meant something else entirely.
*
* Clay is the desaturated orange, and it is already in the palette rather than
* being a fourth hue invented for one cell -- it means "waiting on somebody
* else" among the statuses, which is close enough to "held" that the two do not
* read as unrelated. It sits between sage and paper in weight, which is the
* order these three want: yes, then maybe, then no. Red stays out of it, as
* asked: No is the paper the table is already made of. */
.hl-verdict-on.hl-verdict-maybe {
background: var(--hl-clay-soft);
box-shadow: inset 0 0 0 1px var(--hl-clay);
}
.hl-verdict-on.hl-verdict-no {
background: var(--hl-paper-deep);
box-shadow: inset 0 0 0 1px var(--hl-line);
color: var(--hl-ink-soft);
}
/* Column widths for the cells that are not prose. Not a look, arithmetic:
* `white-space: nowrap` plus `width: 1%` is how a table is told to give a
* column exactly what it needs and no more. */
.hl-actions,
.hl-actions-column,
.hl-refs {
white-space: nowrap;
width: 1%;
}
/* The drive. HL-008-08: it *must not read as a promise*. These are free-flow
* times with no traffic model, and the understatement is systematic -- worst
* on exactly the long suburban runs a parent is least sure about. Since 009
* the caveat is in the column header rather than in every cell, so the styling
* has one job: keep the number from looking authoritative. Same weight as the
* text beside it, and the rows with no drive are as quiet as a "not known"
* cell, because that is what they are. */
.hl-drive {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hl-no-drive {
color: var(--hl-ink-faint);
font-size: 0.68rem;
font-style: italic;
/* The reasons are sentences -- "teletherapy — no clinic to drive to" -- and
* nine of nineteen rows carry one. Held on one line they set the width of
* the whole column, which is how a column of two-word answers came to be
* one of the widest things on the table. */
white-space: normal;
}
/* The two things she can do that are not about one row, at the two ends of one
* line: "+ Add a practice" at the left, the way out of the pass at the right,
* right-aligned over the table it is about. HL-015-12.
*
* `align-items: flex-start` so that the way out stays on the line when the add
* panel opens into a card underneath it, and wraps rather than squeezing on a
* narrow screen. */
.hl-review-actions {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
margin-bottom: 0.75rem;
}
/* `min-width: 0` is the whole of why the way out stops moving. A flex item's
* default floor is its *min-content* width, so when the panel's third field --
* "who suggested them", which appears only for a referral lead -- came in, the
* card demanded more room than the line had and the way out wrapped to the next
* line. Dan: "the rewrite of the page moved around the Contact Select
* Practices button in a very confusing fashion." The card is free to be
* narrower than its contents would like; the line is not free to reflow around
* a field appearing. */
.hl-review-actions > #add-panel {
flex: 1 1 auto;
margin: 0;
min-width: 0;
}
/* *A card, not a banner.* Dan: "it's still really wide." The panel is a flex
* item that grows to fill the line, which is right for the *line* -- the way
* out stays pinned to the right-hand end whether the panel is a small button or
* an open card -- and wrong for the card, which then spanned a laptop and put
* four short fields in a row with a quarter of the page each.
*
* So the item keeps growing and the card inside it stops. Four fields at half
* the card is a form; four fields at a quarter of a screen is a banner, and the
* width was doing most of the work of making it feel like one.
*
* 40rem and it was 34: Dan, "it could be a bit wider than you made it. Just a
* bit." A practice name is the longest thing anybody types on this panel -- "In
* -Tune Integrative Developmental Therapies for Children and Families" is a
* real one -- and at 34 it was typing into a field it did not fit in. */
#add-panel .card {
max-width: 40rem;
}
/* The way out of the collecting pass. HL-012-02, moved at HL-015-12.
*
* *It is no longer a bar.* It was a near-black bar at the foot with a paper
* pill on it; then a pale sheet with a marker pill on it, because a black bar
* is the heaviest thing this stylesheet knows how to draw and it sat
* permanently under a table whose whole job is that a parent can read nineteen
* rows of it. Both were stuck at the bottom, and Dan: "The bar at the bottom to
* start contacting practices totally fails. When it's below the fold, it
* completely disappears."
*
* `position: sticky` was meant to answer exactly that, and the mistake is worth
* writing down: sticky sticks a thing inside *its own scrolling box*, and this
* one's box is the page. On a table of nineteen it is nineteen rows down, which
* is the length of list it exists for. What actually holds is putting it where
* she already is -- above the table, at the top.
*
* So what is left of the bar is the pill. *It wore the marker and no longer
* does*, review 3 of 015. Dan: "The green of Contact selected practices feels
* too prominent. I know it's our brand color, but I don't think we can use it
* for buttons. Pick something else."
*
* Which the tokens at the top of this file had already said and this rule had
* already broken: the marker is "for emphasis a person chose -- never for
* decoration, and never for a state a machine computed". A call to action is
* neither of those things, and painting one in the marker put it in
* competition with the only place on the screen where the marker means
* something -- the verdict *she* marked in a row.
*
* So it is ink, which is the product's primary button everywhere else, and the
* size and weight are what make it the loudest thing on the line rather than
* the colour. Two ink pills at the two ends of one line would have been two
* equals, so "+ Add a practice" goes quiet in the same change: adding a name is
* the errand on the side, and this is the way onward. */
.hl-handoff {
display: flex;
flex: 0 0 auto;
}
.hl-handoff-go {
background: var(--hl-ink);
border: 1px solid var(--hl-ink);
border-radius: var(--hl-radius-pill);
color: var(--hl-paper);
font-size: 0.92rem;
font-weight: 700;
padding: 0.55rem 1.3rem;
text-decoration: none;
white-space: nowrap;
}
/* The press. It wore a marker ring, on the argument that a ring is not a fill
* and that the focus ring did the same thing on every field anyway -- so when
* the focus ring stopped being green at review round five, this was the one
* green ring left on the product, which is the definition of an orphan. It
* follows the ring. */
.hl-handoff-go:hover {
background: #000;
box-shadow: 0 0 0 0.2rem var(--hl-focus-ring);
color: var(--hl-paper);
}
/* Nothing chosen yet. It holds its place rather than going, because a control
* that appears is a control she has to notice -- and this one used to appear at
* the moment she was looking at a row.
*
* Paper and faint ink: the same shape with the accent taken out, so what the
* marker coming back means is "there is now a list to take somewhere". No
* hover, because there is nothing to press. */
.hl-handoff-off,
.hl-handoff-off:hover {
background: var(--hl-paper-deep);
color: var(--hl-ink-faint);
cursor: default;
}
/* --------------------------- the queue -- the contacting pass, HL-012-01 -- */
/* A queue row is not a table row. It carries two things, one of which is a
* fixed-width column at the right-hand end, and a table would be three
* ` | `s pretending that a name and a set of buttons are the same kind of
* thing. */
/* *Narrow, and narrower than the table it came from.* Dan: "let's just shrink
* the whole thing to be a good bit narrower. I think that can/will help make it
* feel even less overwhelming." Review is nineteen strangers side by side and
* wants the width; this is five names and two buttons, and a list that runs the
* width of a laptop reads as more work than it is.
*
* The measure is set here rather than on `.hl-sheet`, because the sheet is the
* chrome every screen wears and this is one screen's shape. */
/* *And in the middle*, review round five. Dan: "Maybe let's center the list to
* contact, and make it a tiny bit wider." The measure was on the sheet, which
* left the title and the subhead running the full container over a list that
* stopped two thirds of the way across, and the whole page against the
* left-hand edge. It is on the wrapper now, with the header inside it, so one
* rule sets the width and the centring for all three.
*
* *The measure is centred and the header is not.* Dan [2026-09-23]: "let's
* left align Finding an occupational therapist for Quilla, so it matches
* everything else we've been doing ... Just left align the text with the left
* edge of the box." */
.hl-queue-page {
margin: 0 auto;
max-width: 42rem;
}
.hl-queue-row {
align-items: center;
border-bottom: 1px solid var(--hl-line-soft);
display: flex;
gap: 1.2rem;
justify-content: space-between;
padding: 1.5rem 0;
}
.hl-queue-row:last-child {
border-bottom: 0;
}
/* Bigger than a table row's name, because there are five of these rather than
* nineteen and the name is most of what the row is. */
.hl-queue-name {
color: var(--hl-ink);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
}
/* A name that opens a panel rather than going anywhere. It reads as the link
* it replaced; what it is underneath is a button, because an href that swaps a
* region is a thing a middle click opens as a blank page. */
.hl-queue-name-button {
background: none;
border: 0;
padding: 0;
text-align: left;
}
.hl-queue-name:hover {
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* *One column per door, not one row of doors.* The fixed width was always the
* point -- the doors land in the same place on every row, so she can go down
* the list with her thumb in one position whatever the practice is called --
* and a flex row only delivered that for the rows that publish all three. Four
* of the real nineteen have no web form and one no phone, so "Email" sat under
* "Call" and the eye had to find it again on every row.
*
* A grid with a named column per kind fixes each door's x for the whole list.
* The empty cell is not a dead button: 012's rule is that a door the practice
* never published is absent, and absent is what an empty cell is.
*
* Narrower than the 19.5rem it replaces, because the buttons were a long way
* from the name they act on. Dan: "The action buttons (call/email) feel too far
* away from the practice names." */
.hl-doors {
align-items: center;
display: grid;
flex-shrink: 0;
gap: 0.45rem;
grid-template-columns: repeat(var(--hl-door-slots, 3), 5rem);
justify-items: stretch;
}
/* How many columns this queue's rows want, set on the region and inherited by
* every row in it. A queue where nobody publishes a web form is two columns
* wide, not three with an empty one at the end. `views.door_columns` decides,
* because it is a fact about these rows rather than about the screen. */
.hl-queue-slots-1 {
--hl-door-slots: 1;
}
.hl-queue-slots-2 {
--hl-door-slots: 2;
}
.hl-queue-slots-3 {
--hl-door-slots: 3;
}
.hl-door-slot-1 {
grid-column: 1;
}
.hl-door-slot-2 {
grid-column: 2;
}
.hl-door-slot-3 {
grid-column: 3;
}
.hl-door {
background: var(--hl-paper);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius-pill);
color: var(--hl-ink-soft);
font-family: var(--hl-sans);
font-size: 0.76rem;
font-weight: 600;
padding: 0.35rem 0.5rem;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.hl-door:hover {
border-color: var(--hl-ink);
color: var(--hl-ink);
}
/* HL-015-06. A queue row's name opens the row rather than navigating, and the
* panel carries the two ways out that 012 spent a navigation on -- their own
* site and everything we hold about them, each in a new tab, so neither costs
* her her place in the queue.
*
* *And the reply panel carries neither*, which draws a line worth keeping:
* "how do I approach these people" is a question she has before she rings
* somebody. */
.hl-ways-out {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
}
.hl-way-out {
color: var(--hl-ink-soft);
font-size: 0.82rem;
text-decoration: underline;
text-decoration-color: var(--hl-line);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hl-way-out:hover {
color: var(--hl-ink);
}
/* The add-a-practice panel on Review, and the card it sits in. Bootstrap's
* `.card` for the box; what is ours is that it is *not tinted* -- it wore
* `border-primary-subtle` and a `bg-primary-subtle` header strip, and
* `--bs-primary` is remapped to our ink, so Bootstrap mixed the strip to a
* grey-green that belonged to nothing on the page. Review round five, and the
* same note as the focus ring: middle of the road, and no accent where no
* accent is meant. */
.hl-add-card {
background: var(--hl-card);
border-color: var(--hl-line);
}
.hl-add-card .card-header {
background: var(--hl-paper-deep);
border-bottom: 1px solid var(--hl-line);
}
/* The quick add, at the foot of the queue. Quiet until she wants it: a form
* sitting open under five practices reads as the next thing to do, and it is
* not -- the next thing to do is ring somebody. */
.hl-quick-add {
padding-top: 1.15rem;
}
.hl-quick-add-toggle {
background: none;
border: 0;
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
font-size: 0.95rem;
padding: 0;
text-decoration: underline;
text-decoration-color: var(--hl-line);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hl-quick-add-toggle:hover {
color: var(--hl-ink);
}
.hl-queue-empty {
color: var(--hl-ink-soft);
margin: 0;
padding: 1.15rem 0;
}
/* HL-015-04. "Just done" is what she got through in this sitting -- a receipt,
* not a record -- and it is on the page only while there is still a list.
* Where each one stands is Contacted's question. */
.hl-just-done {
border-top: 1px solid var(--hl-line);
margin-top: 1.3rem;
padding-top: 1rem;
}
.hl-just-done-row {
align-items: baseline;
display: flex;
gap: 1rem;
justify-content: space-between;
padding: 0.45rem 0;
}
/* The emptied page: the one sentence that makes finishing read as finished,
* and then the next step. The list has done its job by here. */
.hl-queue-done {
font-family: var(--hl-serif);
font-size: 1.3rem;
margin: 0 0 0.15rem;
}
.hl-queue-receipt {
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
margin: 0 0 1.4rem;
}
.hl-queue-doors {
margin-bottom: 0.4rem;
}
/* ------------ one practice, one door -- the contact screen, HL-012-03 ------ */
/* It was a panel inside a queue row, and everything she was not doing was still
* on screen while she was on the phone. Dan: "instead of just opening up a row,
* I kind of want everything else to go away. So it's really really cleaned up
* and simple... I'd prefer just a dramatically stripped down actual page."
*
* So: a page, and a narrow one. The measure is what makes the buttons at its
* foot land near the thing they act on. It was 30rem, about a standard web
* form, until 019 put the email and the script on it; Dan [2026-09-23]: "I
* still like it being centered and nowhere near full width. But it feels a bit
* crowded now." 38rem, still short of the queue's 42. */
.hl-contact {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin: 0 auto;
max-width: 38rem;
}
/* The form's own rhythm. Without it the three things inside it -- the pills,
* the note box and the buttons -- are one flex child of the block above and
* sit on top of each other. */
.hl-contact form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
/* The three facts at the top, as one block. The screen's own gap is 1.1rem,
* which is the distance between the *parts* of the page -- put between these
* three it spaced the errand, the practice and the number equally, and three
* things equally spaced is a list rather than a heading. */
.hl-contact-head {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
/* *What she is doing*, and it is the title. Dan: "At the top: Call a Practice,
* fairly prominent." The practice's name was here, which made the page one
* about Alder Speech that happened to offer a phone; she arrived by pressing
* Call on a queue of practices, so the errand is what the page is. */
.hl-contact-errand {
font-family: var(--hl-sans);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0;
}
/* *Which practice*, under it: "also pretty prominent, lightly slightly less".
* Still the sans face and still bold -- a step down in size is the whole of
* the difference from the errand.
*
* *Nearer the number than the errand.* It sat tight under the errand with the
* number set off below, which made it the second line of the heading. Dan
* [2026-09-23]: "move the practice name a bit lower, and also make it a bit
* bigger. I want it closer to the phone number/email address, and more clearly
* associated with the contact info." So the space is above it, and the name
* and the door read as one block: who, and how to reach them. */
.hl-contact-name {
font-family: var(--hl-sans);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0.9rem 0 0;
}
/* The door, directly under the name it belongs to, and the same size and
* weight as it. Dan [2026-09-23]: "Let's try making the practice name and the
* contact info the same weight." */
.hl-contact-head .hl-panel-door {
font-size: 1.4rem;
margin-top: 0;
}
/* The two together, at the right-hand end. They were under the outcome pills at
* the left, and Dan: "'Save' is vertically bumping against 'I spoke to them'."
* Right-justified with the page's own width between the two, which is where a
* web form's buttons are and is the other half of why this screen is narrow.
*
* Cancel first in the markup and to the left of Save, because Save is the
* thing she came to do. */
.hl-contact-actions {
align-items: center;
display: flex;
gap: 1.1rem;
justify-content: flex-end;
padding-top: 0.6rem;
}
/* What she says through the door, HL-019-05 and 06. A sheet inside the sheet:
* the card colour and its own rule, so the words read as a thing she is about
* to pick up rather than as more of the page's instructions. */
.hl-draft {
background: var(--hl-card);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 0.9rem 1rem;
}
/* The subject, with its own small Copy at the end of it. The label sits above
* rather than beside, because beside it took a third of a 30rem measure and
* wrapped a subject of eight words onto two lines. */
.hl-draft-subject {
border-bottom: 1px solid var(--hl-line-soft);
display: flex;
flex-direction: column;
gap: 0.2rem;
padding-bottom: 0.6rem;
}
.hl-draft-subject-line {
align-items: baseline;
display: flex;
gap: 0.6rem;
}
.hl-draft-subject-text {
flex: 1;
font-family: var(--hl-sans);
font-weight: 600;
}
.hl-draft-from {
margin: 0;
}
/* The call's title, above its box and as prominent as a heading, with room
* between it and the number. Dan [2026-09-23]: "put 'Key Information and
* Question' *above* the box, and make it visually more prominent. Put some
* vertical space between it and the phone number." */
.hl-draft-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* *The switch is the title* [2026-09-25]: "Notes for you" and "Call script"
* side by side, at the size the title was. The one showing is ink with the
* marker stroke under it; the other is soft ink and a link, so the title still
* reads as the name of what is in the box. */
.hl-draft-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
margin: 0.9rem 0 0;
}
.hl-draft-tab {
font-family: var(--hl-sans);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--hl-ink-soft);
text-decoration: none;
}
.hl-draft-tab:hover {
color: var(--hl-ink);
text-decoration: underline;
text-decoration-color: var(--hl-marker);
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
.hl-draft-tab[aria-current="true"] {
color: var(--hl-ink);
font-weight: 700;
background-image: linear-gradient(
transparent 52%,
var(--hl-marker-wash) 52%,
var(--hl-marker-wash) 94%,
transparent 94%
);
background-repeat: no-repeat;
padding: 0 0.06em;
}
.hl-draft-tab[aria-current="true"]:hover {
text-decoration: none;
}
/* The words themselves are prose, so they are the serif -- and that is only
* how they look *here*. What goes on her clipboard is the stored HTML with no
* style at all, so it pastes in her mail client's own font. */
.hl-draft-body {
font-family: var(--hl-serif);
font-size: 1rem;
line-height: 1.45;
}
/* A call's words are plain text, and `|linebreaks` makes each blank-line
* paragraph a ` ` [2026-09-25]: a beat of the script, or a block of the
* notes. A little less room between them than Bootstrap's, and none under the
* last, so the box ends where the words do. */
.hl-draft-body p {
margin: 0 0 0.75rem;
}
.hl-draft-body p:last-child {
margin-bottom: 0;
}
.hl-draft-body ul,
.hl-draft-body ol {
margin: 0.5rem 0;
padding-left: 1.3rem;
}
.hl-draft-foot {
align-items: center;
display: flex;
gap: 1.1rem;
justify-content: flex-end;
}
.hl-draft-none {
margin: 0;
}
/* Whose words these are, at the far left of the foot, in the voice every
* other "who and when" line on these screens uses. */
.hl-draft-said {
color: var(--hl-ink-faint);
font-family: var(--hl-sans);
font-size: 0.72rem;
margin-right: auto;
}
/* The editing page, HL-019-07. It is the contact screen's measure and chrome,
* with a box to write in. */
.hl-draft-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.hl-draft-editor {
background: var(--hl-card);
font-family: var(--hl-serif);
font-size: 1rem;
line-height: 1.45;
min-height: 14rem;
}
/* What the draft is for, under the heading: normal-sized italics, because it
* is a sentence to her rather than a third line of the heading. */
.hl-draft-purpose {
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
font-size: 1rem;
font-style: italic;
line-height: 1.4;
margin: 0.4rem 0 0;
}
.hl-draft-page trix-toolbar .trix-button-row {
margin-bottom: 0.35rem;
}
/* ---------------------- Search overview -- where it all stands, HL-016-03 -- */
/* The search overview. HL-015-08 grouped it by whose turn it is, and HL-016-03
* dealt those groups onto sheets, because the grouping was right and the
* *reading* was not. Dan: "It feels confusing... right now it reads as a giant,
* confusing list. I want the viewer's eye to steadily move from one section to
* another, knowing what they're seeing as they go."
*
* Six headings on one sheet are six stops for the eye on equal terms, and a
* heading is a small signal to carry the difference between a reply that came
* in yesterday and a practice she ruled out a month ago. The only currency this
* screen has is weight, and every rule below spends it: card stock for the pile
* that needs an answer today, note size for the piles that do not, and a
* counted line at the foot for the piles she has closed. */
/* *A measure, and in the middle.* The queue's argument (review round five)
* arriving here: a sheet that runs the width of a laptop reads as more work
* than it is. The width is the one 016 drew the screen at. */
.hl-overview-page {
margin: 0 auto;
max-width: 52rem;
}
/* A sheet. They stack with air between them, and the air is the device: three
* stops for the eye instead of six, and each one legible before a word of it
* is read. */
.hl-band {
margin-bottom: 0.9rem;
}
/* The band's name, a step above the group heading it replaced -- it has to
* out-rank the labels inside it. Serif, which is 015's rule and is more than
* typography: this is what the screen is sorted by, so it is what she reads
* first. And it carries no count: Dan, "Kill the counts for each section." */
.hl-band-heading {
color: var(--hl-ink);
font-family: var(--hl-serif);
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 0.7rem;
}
/* A label on a list *inside* a band -- the one place 015's "a group name is a
* heading" is inverted, on purpose. The air above it is the whole device: the
* list it follows ends on a row with no rule, so without the gap the label
* reads as a caption on that row. */
.hl-band-label {
margin: 1.2rem 0 0.4rem;
}
.hl-band-heading + .hl-band-label {
margin-top: 0.2rem;
}
/* The pile that needs an answer today: card stock, two sentences deep, with
* the control on the card. It is the only ground change on the page, and it is
* what "the weight graded down the page" means in practice. */
.hl-standing-card {
background: var(--hl-card);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
margin-bottom: 0.6rem;
padding: 0.85rem 1rem;
}
.hl-standing-card:last-child {
margin-bottom: 0;
}
/* The control, under the sentence and to the left. Dan: "what about then moving
* the follow up button to the left, below the note on what we heard from them".
* It reads in the order she does it -- who, what they said, what to do about
* it -- where a control at the right-hand end of the name's line was a button
* beside a name it was not about. */
.hl-standing-do {
margin-top: 0.65rem;
}
/* The ways to reach them, HL-016-06: the practice's own number and address as
* links that dial and compose. `hl-door` is the pill the candidate page's doors
* already wear, so the two screens say the same thing the same way; what is
* different here is that the pill's words are the *value* rather than the verb,
* because a number she can read out to somebody beats a button saying "Call".
*
* Wrapping, because an email address is not a word and a card is not a row. */
.hl-reach {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
/* And the way to write down what they said, on the piles that are waiting for
* them to say it. A gesture rather than a pill: six of these down a list of
* names would out-shout the two cards above them, and this is a way out of the
* row rather than the thing the sheet is for.
*
* On the sheets it sits at the right-hand end of the name's line, so a row
* stays two lines and the controls make one column for the eye to find. In a
* pipeline card there is no room beside the name, so it goes under the note --
* see `.hl-pipeline-card .hl-standing-record`. */
.hl-standing-record {
background: none;
border: 0;
flex-shrink: 0;
padding: 0;
}
.hl-pipeline-card .hl-standing-record {
margin-top: 0.35rem;
}
/* The name's line on a row nobody is waiting on her for: the practice at one
* end and, on the piles that are waiting to hear, the way to write down what
* they said at the other. */
.hl-standing-line {
align-items: baseline;
display: flex;
gap: 1.2rem;
justify-content: space-between;
}
/* A row nobody is waiting on her for: a line, not a card. */
.hl-standing-row {
border-bottom: 1px solid var(--hl-line-soft);
padding: 0.6rem 0;
}
.hl-standing-row:last-child {
border-bottom: 0;
}
/* What they said, on the card. Serif at prose size, because it is somebody's
* sentence rather than a field, and because it is the reason that row is on
* card stock at all. */
.hl-standing-said {
font-family: var(--hl-serif);
font-size: 1.02rem;
line-height: 1.4;
margin: 0.35rem 0 0;
}
/* And what happened on a row in motion, glued to when it happened: "Sent the
* web form, 6 weeks ago". Note size rather than prose size, which is the other
* half of the grading -- four of these at the weight of the two that need her
* is four sentences competing with the two she came for.
*
* The staleness band still colours the time inside it, which is the one thing
* the stylesheet is allowed to say about elapsed time. */
.hl-standing-note {
color: var(--hl-ink-soft);
font-size: 0.72rem;
margin: 0.15rem 0 0;
}
/* The foot, and it is a *foot* rather than one more quiet line under the last
* sheet. Dan: "I like the quiet links on the bottom, but think we should likely
* distinguish them more strongly." So it sits off the sheets entirely, with air
* above it, and the two things on it are drawn differently because they are
* different in kind: a count she can follow into what she has closed, and the
* button the rest of the product uses for finding more. */
.hl-overview-foot {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between;
margin-top: 0.4rem;
padding: 0.2rem 0.35rem;
}
/* The number *is* the sentence, which is the one shape a count is allowed on
* this screen. Quiet, because what she has put away is not what she came for. */
.hl-overview-aside {
color: var(--hl-ink-soft);
font-family: var(--hl-serif);
font-size: 0.95rem;
text-decoration: underline;
text-decoration-color: var(--hl-line);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hl-overview-aside:hover {
color: var(--hl-ink);
}
/* ------------------------------------ one practice -- the candidate page -- */
/* The practice's page, and it asks three questions. 017.
*
* It used to ask twelve, stacked in one column. Dan: "This page is kind of hot
* garbage!... I feel like it's trying to do seven things at once." What came
* off the stylesheet with them: `.hl-doors-top`, `.hl-door-site`,
* `.hl-next-steps`, `.hl-next-step` and `.hl-rule-out`, which dressed the four
* doors, the three next-step buttons and the rule-out disclosure. */
/* A measure, and in the middle. The queue's rule (review round five) and the
* overview's, arriving on the last screen without one -- wider than either,
* because this is the only page here with two columns to fit. */
.hl-practice-page {
margin: 0 auto;
max-width: 62rem;
}
/* *Two columns, and the left one is wider.* Dan: "let's try out a two column
* layout... in the left column (which is maybe a bit wider?)". The ratio is
* the difference between what the two hold: a timeline entry is a sentence and
* a contact detail is a value, so the left column is measured for prose and
* the right for a list of short strings. */
.hl-practice-columns {
align-items: start;
display: grid;
gap: 1.5rem;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
/* *And on a narrow screen the work comes first.* One column, in source order,
* which puts what has happened above who they are -- the opposite of the order
* on a laptop, where the eye reaches the right-hand column for free. On a
* phone nothing is free, so the column she came to use leads. */
@media (max-width: 48rem) {
.hl-practice-columns {
grid-template-columns: minmax(0, 1fr);
}
}
/* Contact info: a list of values, laid out as one. What was here was a
* two-column grid that read as a form with its inputs missing. */
.hl-contact-info dt {
color: var(--hl-ink-faint);
font-family: var(--hl-mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.hl-contact-info dd {
margin-bottom: 0.6rem;
}
/* ------------------------------- the pipeline -- 016's option B, /pipeline/ */
/* The same search drawn left to right, built beside the sheets rather than
* instead of them so that the two can be looked at with one search in them.
* Nothing in the product links here; it is reachable by typing its address.
*
* *The columns are in the practice's order and the emphasis is in hers.* Left
* to right is how far a practice has got, and the only column drawn differently
* is the one that wants something from her today. That is the argument this
* shape is making, so it is the only emphasis the stylesheet gives it. */
.hl-pipeline-page {
margin: 0 auto;
max-width: 76rem;
}
/* One sheet under the whole board, which is what makes it a board rather than
* four lists on a desk: the columns are one thing seen at once, and the paper
* is what says so. */
.hl-pipeline-board {
align-items: flex-start;
background: var(--hl-paper);
border: 1px solid var(--hl-line);
border-radius: var(--hl-radius);
box-shadow: var(--hl-lift);
display: flex;
gap: 1.1rem;
padding: 1.25rem 1.35rem;
}
/* A card on the board is paper on paper, so it takes the deeper ground rather
* than the same one. The one pile that needs an answer keeps the card stock the
* sheets give it. */
.hl-pipeline-board .hl-pipeline-card {
background: var(--hl-paper-deep);
border-color: var(--hl-line-soft);
}
.hl-pipeline-board .hl-pipeline-card-hers {
background: var(--hl-card);
border-color: var(--hl-line);
}
.hl-pipeline-column {
flex: 1;
min-width: 0;
}
/* A column head is a heading rather than an eyebrow, which is 015's rule and
* holds here: it is the answer to "where has this one got to". The rule under
* it is the column's floor, and the one column that wants something from her
* wears it in ink. */
.hl-pipeline-head {
border-bottom: 2px solid var(--hl-line-soft);
color: var(--hl-ink);
font-family: var(--hl-serif);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 0.7rem;
padding-bottom: 0.45rem;
}
.hl-pipeline-head-hers {
border-bottom-color: var(--hl-ink);
}
/* A card on the board. Paper by default and card stock for the pile that needs
* an answer, which is the same grading the sheets use -- said in the only
* currency a column this narrow has. */
.hl-pipeline-card {
background: var(--hl-paper);
border: 1px solid var(--hl-line-soft);
border-radius: var(--hl-radius);
margin-bottom: 0.5rem;
padding: 0.6rem 0.7rem;
}
.hl-pipeline-card-hers {
background: var(--hl-card);
border-color: var(--hl-line);
}
.hl-pipeline-name {
color: var(--hl-ink);
display: block;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
}
.hl-pipeline-name:hover {
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* What they said, at prose size, on the one column that gets prose. This is
* where the shape costs something: about six words fit, and "They have a
* Thursday afternoon slot free from 6 October" needs three lines to. */
.hl-pipeline-said {
font-family: var(--hl-serif);
font-size: 0.92rem;
line-height: 1.35;
margin: 0.3rem 0 0;
}
/* A stage nobody is at. Drawn rather than dropped, because the shape of the
* whole search is what this drawing is for. */
.hl-pipeline-none {
color: var(--hl-ink-faint);
margin: 0.2rem 0 0;
}
/* The way on from the first column, which is the one column with somewhere to
* go. Quiet, and inside the column rather than under the board. */
.hl-pipeline-on {
color: var(--hl-ink-soft);
display: inline-block;
font-family: var(--hl-serif);
font-size: 0.9rem;
margin-top: 0.4rem;
text-decoration: underline;
text-decoration-color: var(--hl-line);
text-underline-offset: 0.18em;
}
.hl-pipeline .hl-overview-foot {
margin-top: 1.2rem;
}
|