/**
 * TOT guide directory.
 *
 * Every token was measured off theothertour.com — nothing here was invented.
 *
 *   Hero ink #1B252F and yellow #F8F812 ....... homepage hero
 *   Card: radius 14px, 1px #E2E8F0, soft shadow  the Curetes Street content cards
 *   4px left accent bar ....................... .didyouknow and .pullquote
 *   Sky #0EA5E9, deep #0C4A6E, tint #F0F9FF ... .didyouknow
 *   Display Helvetica Neue 700 at -0.03em ..... the H1
 *   Labels Oswald uppercase 600 ............... the nav
 *
 * Two registers, both already in use on the site: a dark full-bleed band for the header
 * (homepage + article heroes) and light cards for the content beneath it.
 *
 * ⚠️ Yellow measures 1.14:1 on white — it can only ever be text on the dark band. The site
 * already solved this: on light grounds it uses sky #0EA5E9 as a non-text accent and deep
 * blue #0C4A6E where an accent must carry text.
 */

.tot-dir {
	/* dark register */
	--tot-ink: #1b252f;
	--tot-ink-deep: #131b23;
	--tot-yellow: #f8f812;

	/* light register */
	--tot-paper: #ffffff;
	--tot-tint: #f0f9ff;
	--tot-head: #000000;
	--tot-body: #1f2937;
	--tot-muted: #666666;      /* darkened from the site's #7B7B7B, which is 4.2:1 — under AA */
	--tot-rule: #e2e8f0;
	--tot-sky: #0ea5e9;        /* accent bars and markers — never text */
	--tot-deep: #0c4a6e;       /* accent that DOES carry text: 9.3:1 on white */
	--tot-border-strong: #cbd9e6;   /* card hover/open border — was three repeated hardcoded
	                                    hexes; hoisted so dark mode has one place to override */
	--tot-chip-border: #bae3fb;     /* theme pill + fact chip border */
	--tot-chip-bg: #e3f4fd;         /* theme pill fill */
	--tot-chip-bg-alt: #f5fafe;     /* fact chip fill, on white rather than the tinted card face */
	--tot-panel-bg: rgba(255, 255, 255, 0.7); /* the open card's floating panel, ~70% of --tot-paper */

	--tot-radius: 14px;
	--tot-shadow: 0 4px 6px rgba(12, 74, 110, 0.08);
	--tot-shadow-lift: 0 10px 20px rgba(12, 74, 110, 0.12);

	--tot-display: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	--tot-text: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tot-label: Oswald, "Helvetica Neue", Helvetica, Arial, sans-serif;

	--tot-gap: clamp(1.75rem, 3.5vw, 2.75rem);

	color: var(--tot-body);
	font-family: var(--tot-text);
}

/* ── dark band ───────────────────────────────────────────────────────────── */
.tot-dir__band {
	background: var(--tot-ink);
	color: #fff;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 2.75rem);
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.25rem, calc(50vw - 600px));
}

.tot-dir__eyebrow {
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: var(--tot-yellow);
	margin: 0 0 1.1rem;
}

.tot-dir__title {
	font-family: var(--tot-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}

.tot-dir__standfirst {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
	max-width: 46ch;
	margin: 1rem 0 0;
}

/* ── filter, inside the band ─────────────────────────────────────────────── */
.tot-dir__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.25rem;
	align-items: flex-end;
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tot-dir__control {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1 1 12.5rem;
	min-width: 0;
}

/* The question itself — was the smallest, dimmest text in the whole control (11px, 62% white),
   dimmer than its own answer. Sized and weighted up so it reads as the actual question a guest is
   answering, not a caption underneath one. */
.tot-dir__label {
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.86);
}

/* Native select, restyled not replaced — a custom dropdown loses the mobile picker and
   keyboard behaviour, and this is a phone-first audience.
 *
 * Boxed rather than a bare underline, so a field reads as a discrete tappable object at rest,
 * before a guest has hovered or opened it. No new colour enters the palette to do this — same
 * call the ribbon redesign already made this session, one reserved accent spent in exactly one
 * place rather than a second hue recruited to fix legibility. */
.tot-dir__control select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	color: #fff;
	font-family: var(--tot-text);
	font-size: 1.25rem;
	font-weight: 600;
	/* Native <select> text-vertical-centering doesn't reliably follow an author line-height —
	   confirmed by rendering these exact values at 3x zoom in a real browser: the descender on
	   "Any" sits right at the bottom border. line-height: normal plus asymmetric padding (more
	   below than above, since descenders extend down, not up) compensates without fighting the
	   browser's own centering. */
	line-height: normal;
	min-height: 48px;
	/* Review found this shipped inverted from its own comment (0.7rem top / 0.65rem bottom —
	   MORE above, not below). Swapped so the values actually match the stated reasoning. */
	padding: 0.65rem 2.1rem 0.7rem 0.9rem;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 8px) calc(50% + 2px);
	background-size: 8px 8px, 8px 8px;
	background-repeat: no-repeat;
}

.tot-dir__control select:hover {
	background-color: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.32);
}

/* An applied filter is the one thing allowed to be yellow — and now it fills the shape instead of
   only painting the letters, which reads far more clearly mid-scroll or with several answers
   applied at once. Still exactly one accent, still reserved for exactly this. */
.tot-dir__control select[data-empty="false"] {
	background-color: rgba(248, 248, 18, 0.16);
	border-color: var(--tot-yellow);
	color: var(--tot-yellow);
}

.tot-dir__control select option { color: var(--tot-body); background: #fff; }

/* ── theme chips, inside the dark band ───────────────────────────────────────
   Not a copy of questionnaire.css's chips. Those sit on --tot-paper; this band is --tot-ink with
   white text, so the same rules would ship light chips on a dark field. The shared thing is the
   markup, and the M10 part 1 lesson is that shared markup on a second page needs its own assets
   and only a browser can tell you it got them. */
.tot-dir__control--chips {
	border: 0;
	margin: 0;
	padding: 0;
	/* A fieldset defaults to min-width:min-content, which ignores flex-basis and pushes the band
	   sideways at 420px. This is the overflow class that bit M4 and is invisible in source. */
	min-width: 0;
	flex: 1 1 100%;
}

.tot-dir__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.15rem;
}

.tot-dir__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9375rem;
	line-height: 1.3;
	cursor: pointer;
	/* A tap target close to 44px on a phone-first audience, without the pill reading oversized
	   next to its label. drive-finder.mjs §5 is what actually proves every chip is hit-testable
	   at its own centre — this comment used to claim a mechanism that isn't here to check. */
	min-height: 36px;
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.tot-dir__chip:hover { border-color: rgba(255, 255, 255, 0.55); }

/* An applied filter is the one thing allowed to be yellow — the same rule the selects follow. */
.tot-dir__chip:has(input:checked) {
	color: var(--tot-ink);
	background: var(--tot-yellow);
	border-color: var(--tot-yellow);
}

/* :has() is wide but not universal, and a chip whose checked state is invisible is worse than an
   ugly one. The checkbox stays in the layout as the fallback signal rather than being hidden. */
/**
 * The checkbox is visually hidden, not removed.
 *
 * The chip's own fill already says whether it is on — `:has(input:checked)` paints it yellow —
 * so a second, smaller indicator inside it says the same thing twice, and eighteen of them turn
 * the band into visual noise. This is the chip pattern: the pill IS the control.
 *
 * Hidden by clipping rather than `display: none` or `visibility: hidden`, both of which take the
 * input out of the tab order. It stays focusable, `:focus-within` below paints the chip's focus
 * ring, and a screen reader still announces a labelled checkbox. `drive-finder.mjs` drives these
 * with a programmatic `.click()` on the input, which is unaffected by clipping.
 */
.tot-dir__chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.tot-dir__chip input:checked {
	background: currentColor;
}

.tot-dir__chip:focus-within {
	outline: 2px solid var(--tot-yellow);
	outline-offset: 2px;
}

.tot-dir__submit,
.tot-dir__clear {
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	background: transparent;
	color: #fff;
	border: 0;
	border-bottom: 2px solid var(--tot-yellow);
	border-radius: 0;
	padding: 0.5rem 0;
	min-height: 44px;
	cursor: pointer;
	transition: color 200ms ease;
}

.tot-dir__clear { border-bottom-color: rgba(255, 255, 255, 0.24); }
.tot-dir__submit:hover,
.tot-dir__clear:hover { color: var(--tot-yellow); }

/* ── count, inside the dark band ─────────────────────────────────────────────
   It used to be 14px grey text under the button — the only thing telling a guest
   whether an answer helped, sized as an afterthought. Now the largest thing in the
   band below the filter, so watching it move reads as the page responding rather
   than a stat nobody asked for. */
.tot-dir__count {
	font-family: var(--tot-text);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.75vw, 1.75rem);
	line-height: 1.3;
	color: #fff;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

/* The one number allowed to be yellow outside a select or chip's applied state. */
.tot-dir__count-num {
	color: var(--tot-yellow);
}

/* ── cards ───────────────────────────────────────────────────────────────── */
.tot-dir__results {
	display: grid;
	gap: var(--tot-gap);
	grid-template-columns: 1fr;
	/* stretch, which is grid's default, and the reason it was once `start` no longer holds.
	   `start` was added when opening a card grew it in flow and dragged its whole row taller.
	   A later fix in the same pass made the expanded panel `position: absolute`, so an open card
	   does not change its own in-flow height at all — the hazard `start` guarded against stopped
	   existing, and the guard stayed. It cost the row its shared height, which is what the fixed
	   390px floor below was invented to put back.

	   With stretch, every card in a row is the height of the tallest card IN THAT ROW, and
	   `margin-top: auto` on the toggle drops it to the bottom of each. Toggles line up across the
	   row, and a row of short guides is short. Self-adjusting, and no magic number. */
	align-items: stretch;
	/* Breathing room below the dark band. Before: the band's own bottom padding (2-2.75rem) was
	   the only space above the first card, and it read as tight against the band's edge. */
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 34em) { .tot-dir__results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .tot-dir__results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Review found: the floating panel (.tot-card[open] .tot-card__more, below) is absolutely
   positioned, so it doesn't push the following page content down — a card in the LAST row draws
   its panel straight over whatever comes next (measured: 452px of overlap against the review's
   test guide). Nothing is unreachable, but it looks broken. :has() lets this reserve room only
   while a card is actually open, rather than a permanent gap under the grid on every page load.
   First pass used 450px, which still left a 73px overlap against a live check of the actual
   last card on the roster — that guide's panel content runs longer than the sample the review
   measured. 560px cleared it with margin, re-verified against the real last card, not assumed
   from the first number. */
.tot-dir:has(.tot-card[open]) { padding-bottom: 560px; }

.tot-card {
	display: block;
	background: var(--tot-paper);
	border: 1px solid var(--tot-rule);
	border-radius: var(--tot-radius);
	box-shadow: var(--tot-shadow);
	overflow: hidden;
	min-width: 0;
	/* Shadow and border only — no transform. A card that lifts on hover shifts the
	   grid and makes a 48-item list feel unstable. */
	transition: box-shadow 220ms ease, border-color 220ms ease;
}

.tot-card:hover,
.tot-card:focus-within {
	box-shadow: var(--tot-shadow-lift);
	border-color: var(--tot-border-strong);
}

/* Review found: a card covered by another card's floating panel (see .tot-card[open] below)
   could be Tab-focused while hidden underneath it — the focus ring rendered but was invisible,
   painted behind the panel's z-index. Lifting the focused card above the default open-card
   z-index (5) while it holds focus fixes that without touching click behaviour, which is the
   approved design. Declared before .tot-card[open] so an actually-open, actually-focused card
   (equal specificity) still resolves to the LATER rule below and keeps z-index 5, not 6 — a
   card doesn't need to jump above its own panel. */
.tot-card:focus-within { position: relative; z-index: 6; }

/* An open card's .tot-card__more comes out of grid flow entirely (see the rule below), so the
   grid row's height is only ever driven by collapsed cards — opening one no longer stretches
   its row or leaves dead space under its neighbours, and the panel is free to float over
   whatever is in the row below. overflow: visible lets the floating panel render past the
   card's own box instead of being clipped by it; z-index lifts the whole open card (and its
   panel) above any static-positioned card in the row underneath. */
.tot-card[open] {
	position: relative;
	overflow: visible;
	z-index: 5;
	/* The seam. An open card kept all four rounded corners plus its own shadow while the panel
	   below it started square — a curved sliver of page background showed through at each
	   bottom corner, and the two independent shadows doubled up right at the join. Squaring the
	   card's bottom corners and dropping its own shadow (the panel's shadow-lift below now
	   carries the "lifted" edge for the whole assembly) makes the two pieces read as one folded
	   card instead of two stacked boxes. */
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
	border-color: var(--tot-border-strong);
}
.tot-card[open]:hover,
.tot-card[open]:focus-within { box-shadow: none; }

/* ~70% opaque with a blur, per Omer's request, so it visibly floats over the card below rather
   than fully hiding it. background and border-color are tokens — review found both had shipped
   as hardcoded light-mode values, invisible against a dark JNews card (~1.3:1 measured). */
.tot-card[open] .tot-card__more {
	position: absolute;
	/* Review found a 1px gap/colour-step at the seam: .tot-card[open] is `position: relative`,
	   so its PADDING box (inside the 1px border) is this panel's containing block, not its
	   border box. top: 100% / left: 0 / right: 0 therefore land 1px inside the card's true
	   outer edge on every side. Compensating by the border width lines the panel's outer edge
	   up with the card's exactly. */
	top: calc(100% + 1px);
	left: -1px;
	right: -1px;
	background: var(--tot-panel-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--tot-border-strong);
	border-top: none;
	border-radius: 0 0 var(--tot-radius) var(--tot-radius);
	box-shadow: var(--tot-shadow-lift);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style {
	.tot-card[open] .tot-card__more { opacity: 0; transform: translateY(-6px); }
}
/* No prefers-reduced-motion override needed here: `.tot-dir *, *::before, *::after { transition:
   none !important }` further down this file already applies to this element and wins on
   specificity + !important — review found an earlier version of this rule was dead code trying
   to re-fight a fight the file had already won. */

/* Everything visible when collapsed lives inside <summary>: content inside <details> but outside
   <summary> is hidden by the browser while closed. So the whole card face is the control, and
   clicking anywhere on it opens the card. */
.tot-card > summary { display: block; cursor: pointer; list-style: none; outline-offset: -3px; }
.tot-card > summary::-webkit-details-marker { display: none; }
.tot-card > summary:focus-visible { outline: 3px solid var(--tot-deep); }

/* 1:1, not the old 4:5. Reuses the SAME 400x500 tot-portrait rendition. Also covers the empty
   placeholder, which shares this reserved box so a photograph arriving later shifts nothing.
   border-radius is its own, not borrowed from .tot-card's overflow:hidden clip — review found
   that clip is what was rounding these top corners, and .tot-card[open] turns it off (needed so
   the floating panel isn't clipped too), which was silently squaring off an open card's photo. */
.tot-card__portrait,
.tot-card__portrait--empty {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--tot-tint);
	border-radius: var(--tot-radius) var(--tot-radius) 0 0;
}
/* placeholder() emits its own element with BOTH classes, so the ratio has to reach that shape too,
   or a guide with no portrait keeps the old 4:5 box and the grid rows go ragged. Same single-class
   specificity as .tot-card__portrait and declared after it, so display:flex wins over display:block. */
.tot-card__portrait--empty { display: flex; align-items: center; justify-content: center; color: #b6cadd; }

/* LOAD-BEARING. object-fit: cover defaults to `center`, and centring a portrait crops the top of
   the frame off, which is where the head is. Adjustable per guide if one photograph sits badly. */
.tot-card__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	transition: transform 400ms ease;
}

/* The image scales inside its own clipped box — nothing outside the card moves. */
.tot-card:hover .tot-card__portrait img { transform: scale(1.03); }

.tot-card__toggle {
	/* Was a fixed 0.85rem. Pinned to the bottom of .tot-card__body's reserved height instead
	   (see the min-height below), so "More about this guide" lands on the same line across a
	   row regardless of how much bio content each guide has above it. */
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 0.75rem;
	color: var(--tot-deep);
	min-height: 44px;
}
.tot-card__toggle svg { transition: transform 200ms ease; }
.tot-card[open] .tot-card__toggle svg { transform: rotate(180deg); }
.tot-card__toggle-open { display: none; }
.tot-card[open] .tot-card__toggle-shut { display: none; }
.tot-card[open] .tot-card__toggle-open { display: inline; }

.tot-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.15rem 1.25rem 1.35rem;
	min-width: 0;
	/* Fill the card, so `margin-top: auto` on the toggle has something to push against. Without
	   this the body is content-height inside a stretched card and the toggle sits under the text
	   again, which is the ragged look this whole section exists to prevent. */
	flex: 1 1 auto;
	/* box-sizing here computes to border-box — confirmed via getComputedStyle, but review found
	   the claim that it comes from "a global reset elsewhere in this file" was wrong: tot.css
	   declares no box-sizing rule at all: it's inherited from the JNews theme's own stylesheet,
	   outside this plugin's control. Correcting the claim, not the conclusion — min-height is
	   still a floor on the RENDERED height, padding included. min-height is a floor, not a
	   target: it only pulls up cards BELOW it, and cards
	   already taller are unaffected, so aligning the most guides means setting it to the second-
	   highest real cluster, not the middle of the distribution (a first pass at this landed on
	   350px and only pulled 14 of 48 guides up to a line the already-359px mode wasn't even on —
	   still 7 different toggle heights on the page). Measured across all 48 live guides on
	   tot-test-2 on 2026-08-12: rendered .tot-card__body heights cluster at 319/341/349 (14
	   guides) · 359 (17, the mode) · 372/382/390 (16) · 413 (1, the max). 390px pulls every one
	   of those up to the same line except the single 413px guide — 47 of 48 share one toggle
	   position. margin-top: auto on .tot-card__toggle fills the reserved space for every shorter
	   card. See docs/superpowers/plans/2026-08-12-card-visual-polish.md for the full
	   measurement, including the corrected reasoning.

	   🔴 REMOVED 14 Aug 2026. Omer saw it on live: a guide with less to say carried a visible
	   band of dead space between the why-box and "More about this guide", because 390px is a
	   floor for the whole PAGE, not for a row. It was the right answer while the grid used
	   `align-items: start` and cards could not share a height any other way; with stretch
	   restored above, the row does the same job by measuring itself. The measurement is kept
	   because it is the evidence for why a constant was ever needed, and the evidence for why one
	   is not needed now. */
}

.tot-card__name {
	font-family: var(--tot-display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--tot-head);
	margin: 0;
}

/* Licensed guide since 1988 · 38 years guiding — the strongest trust signal a profile carries,
   costing one line here. Absent entirely on the third of the roster with neither field filled
   in yet; see the PHP for why nothing prints rather than a half-empty line. */
.tot-card__credential { font-size: 0.8125rem; line-height: 1.4; color: var(--tot-muted); margin: 0; }

.tot-card__languages { font-size: 0.9375rem; line-height: 1.5; color: var(--tot-body); margin: 0; }
.tot-card__regions { font-size: 0.875rem; line-height: 1.5; color: var(--tot-muted); margin: 0; }

/* Three dot-separated words read as one grey string; three chips read as three facts, and the
   shape rhymes with the "what draws you here?" chips in the band above. Read-only — no input,
   no checked state — so the sizing is tighter than the interactive chip it echoes. */
.tot-card__themes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }

.tot-card__theme {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	/* Was var(--tot-rule) (#e2e8f0) on var(--tot-tint) — close to invisible. A sky-tinted border
	   and a slightly deeper fill make the pill read as a control rather than a smudge. Tokenized
	   (border/bg were hardcoded hexes at first, invisible on the dark-mode card — review found
	   it; see --tot-chip-border/-bg at the top of this file). */
	border: 1px solid var(--tot-chip-border);
	border-radius: 999px;
	background: var(--tot-chip-bg);
	color: var(--tot-deep);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.4;
}

/* The reason it matched.
 *
 * This was a 4px sky bar down the left edge on a tint. A thick accent rail on one side of a card
 * is the single most recognisable tell of a generated interface, and it was doing no work here
 * that the tint and the label were not already doing — the box is a box either way. Closed into a
 * full hairline instead, reusing --tot-rule so no colour enters the palette to do it.
 *
 * `.tot-dir__noresult` still carries the same rail. It is left alone deliberately: it is a
 * different screen, not part of this card redesign, and changing it is a decision to take on its
 * own rather than a side effect of this one. */
.tot-card__why {
	background: var(--tot-tint);
	border: 1px solid var(--tot-rule);
	border-radius: 6px;
	padding: 0.55rem 0.75rem;
	margin: 0.6rem 0 0;
}

.tot-card__why-label {
	font-family: var(--tot-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.625rem;
	/* Was var(--tot-sky) (#0ea5e9) on var(--tot-tint) (#f0f9ff): ~2.3:1, measured, below the
	   4.5:1 this file's own header comment requires for text. --tot-deep is the token the file
	   already documents for exactly this case (9.3:1 on white). */
	color: var(--tot-deep);
	margin: 0 0 0.2rem;
}

.tot-card__why-text {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tot-deep);
	margin: 0;
}

/* Everything below lives inside .tot-card__more, hidden by the browser while the <details>
   is closed — no [hidden] or display:none of our own needed. */
.tot-card__more {
	/* Was 0 — the only headroom above the first line was that line's own margin-top, against a
	   hairline border. Real padding here makes the gap read as designed. */
	padding: 1.5rem 1.25rem 1.35rem;
	border-top: 1px solid var(--tot-rule);
}
/* The panel's own padding-top now provides headroom, so whichever element renders first
   (.tot-card__lede when a guide has a standout paragraph, .tot-fact when it doesn't) must not
   ALSO add its historic margin-top, or the two stack into ~41px of dead air. Named explicitly
   rather than a bare :first-child — a guide with neither a standout nor any facts (none of the
   real 48 today, but not impossible) would make .tot-card__go the sole first-child, and a bare
   :first-child would wrongly eat that button's own intentional top margin too. .tot-fact is
   also the [tot_fact] shortcode's shared class and must keep its normal margin everywhere else
   it might render, hence the .tot-card__more scoping. */
.tot-card__more > .tot-card__lede:first-child,
.tot-card__more > .tot-fact:first-child { margin-top: 0; }

.tot-card__lede { font-size: 1rem; line-height: 1.6; margin: 1.05rem 0 0; }

.tot-fact { margin: 1.25rem 0 0; }
.tot-fact__k {
	display: block;
	font-family: var(--tot-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.6875rem;
	/* Was var(--tot-muted) (#666) — same "everything reads as one weight" problem as the lede.
	   Deep-blue + heavier weight + more tracking makes it read as structure, not more prose. */
	color: var(--tot-deep);
	margin-bottom: 0.2rem;
}
.tot-fact__v { font-size: 0.9375rem; line-height: 1.55; margin: 0; font-weight: 500; }

.tot-card__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.tot-card__chips li {
	display: inline-flex;
	padding: 0.22rem 0.65rem;
	/* Same contrast fix as .tot-card__theme above, tuned slightly lighter since these sit on
	   white rather than the tinted card face. Tokenized — see --tot-chip-border/-bg-alt. */
	border: 1px solid var(--tot-chip-border);
	border-radius: 999px;
	background: var(--tot-chip-bg-alt);
	color: var(--tot-body);
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.4;
}

.tot-card__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.1rem;
	margin-top: 1.15rem;
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 0.75rem;
	color: var(--tot-deep);
	text-decoration: none;
	border: 2px solid var(--tot-deep);
	border-radius: 8px;
	transition: background-color 200ms ease, color 200ms ease;
}
.tot-card__go:hover, .tot-card__go:focus-visible { background: var(--tot-deep); color: #fff; }

.tot-price {
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 0.75rem;
	color: var(--tot-deep);
	text-decoration: none;
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	border-bottom: 2px solid var(--tot-sky);
	transition: color 200ms ease, border-color 200ms ease;
}

.tot-price--cta:hover,
.tot-price--cta:focus-visible { color: var(--tot-head); border-bottom-color: var(--tot-deep); }

/* ── the empty state — the most valuable screen in the system ────────────── */
.tot-dir__noresult {
	grid-column: 1 / -1;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tot-tint);
	border-left: 4px solid var(--tot-sky);
	border-radius: 0 var(--tot-radius) var(--tot-radius) 0;
	max-width: 52ch;
}

.tot-dir__noresult p:first-child {
	font-family: var(--tot-display);
	font-weight: 700;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--tot-deep);
	margin: 0 0 1rem;
	text-wrap: balance;
}

.tot-dir__build {
	font-family: var(--tot-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: #fff;
	background: var(--tot-deep);
	text-decoration: none;
	display: inline-block;
	min-height: 44px;
	line-height: 1;
	padding: 0.95rem 1.4rem;
	border-radius: 8px;
	transition: background-color 200ms ease;
}

.tot-dir__build:hover { background: var(--tot-ink); color: #fff; }

/* ── loading ─────────────────────────────────────────────────────────────── */
.tot-dir[data-loading="true"] .tot-dir__results {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 180ms ease-out;
}

/* ── focus ───────────────────────────────────────────────────────────────── */
.tot-dir a:focus-visible,
.tot-dir button:focus-visible,
.tot-dir select:focus-visible {
	outline: 3px solid var(--tot-deep);
	outline-offset: 3px;
}

.tot-dir__band a:focus-visible,
.tot-dir__band button:focus-visible,
.tot-dir__band select:focus-visible,
.tot-dir__band input:focus-visible { outline-color: var(--tot-yellow); }

/* ── JNews dark mode ─────────────────────────────────────────────────────── */
.jnews-dark-mode .tot-dir {
	--tot-paper: #1b252f;
	--tot-tint: #16212b;
	--tot-head: #ffffff;
	--tot-body: #ccd6dd;
	--tot-muted: #93a3ad;
	--tot-rule: rgba(255, 255, 255, 0.14);
	--tot-deep: #7dd3fc;                       /* 8.6:1 on the dark card — the light-mode deep blue would vanish */
	--tot-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
	--tot-shadow-lift: 0 10px 20px rgba(0, 0, 0, 0.5);
	/* Found by review: the visual-polish pass introduced these as hardcoded light-mode hexes,
	   so on a dark card they rendered as a pale-blue box behind now-light (--tot-deep,
	   --tot-body) text — measured ~1.3-1.5:1. Same --tot-deep hue family as the rest of this
	   dark block, at low alpha so it reads as a tint on the dark card rather than a light patch. */
	--tot-border-strong: rgba(255, 255, 255, 0.28); /* matches the existing .tot-card:hover override below */
	--tot-chip-border: rgba(125, 211, 252, 0.35);
	--tot-chip-bg: rgba(125, 211, 252, 0.12);
	--tot-chip-bg-alt: rgba(125, 211, 252, 0.08);
	--tot-panel-bg: rgba(27, 37, 47, 0.7);     /* --tot-paper's dark-mode value, at the same 70% */
}

.jnews-dark-mode .tot-dir__band { background: var(--tot-ink-deep); }
.jnews-dark-mode .tot-card:hover { border-color: rgba(255, 255, 255, 0.28); }
.jnews-dark-mode .tot-dir__control select option { color: #fff; background: #1b252f; }
.jnews-dark-mode .tot-dir__build { background: var(--tot-sky); color: #06222f; }
.jnews-dark-mode .tot-dir__build:hover { background: #7dd3fc; color: #06222f; }

@media (prefers-reduced-motion: reduce) {
	.tot-dir *,
	.tot-dir *::before,
	.tot-dir *::after { transition: none !important; }
	.tot-card:hover .tot-card__portrait img { transform: none; }
}

/* The ribbon sits in the card's top-left corner, inside the card's own rounding. The card needs
   `position: relative` for that, and `overflow: hidden` so a long label cannot escape the corner at
   420px — the overflow class of bug that bit M4. */
.tot-card,
.tot-qcard {
	position: relative;
	overflow: hidden;
}

/* One frosted pill for every status — brown/purple/blue/green carried no meaning anyone could
   learn, and on a photograph read as stickers rather than facts. Yellow is reserved for Lead
   guide alone, so in a grid of near-identical cards the eye has exactly one thing to land on
   that means "our best" instead of five things pulling at once. */
.tot-ribbon {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 2;
	max-width: calc(100% - 20px);
	padding: 4px 12px 4px 10px;
	border-radius: 0 3px 3px 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--tot-ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tot-ribbon--lead {
	background: var(--tot-yellow);
	color: var(--tot-ink);
}

/* The near group. A rule and a quieter heading rather than a box: it is the same kind of thing
   as the results above it, one step further from what was asked for. */
.tot-dir__near {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.tot-dir__neartitle {
	font-size: 1.05rem;
	margin: 0 0 4px;
}

.tot-dir__nearhint {
	margin: 0 0 20px;
	opacity: .75;
}

.tot-dir__nearresults {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

/* The server folds a card by wrapping it, because card() is filterable and a theme that replaces
   it must still get the fold. `:not([hidden])` is load-bearing: display on a bare .tot-dir__folded
   would beat the UA stylesheet's display:none and unfold every card it was meant to hide. */
.tot-dir__folded:not([hidden]) {
	display: contents;
}

.tot-dir__showall {
	margin-top: 20px;
	padding: 10px 18px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font: inherit;
}

.tot-dir__showall:hover {
	border-color: rgba(0, 0, 0, .55);
}

/*
 * [hidden] is only a default in the UA stylesheet, at the lowest specificity there is, and plenty
 * of themes set `display` on divs specifically enough to beat it — .tot-card sets display:flex and
 * did exactly that, which is why cards folded by the attribute alone stayed on screen. The
 * questionnaire has carried the same rule since M4 for the same reason. This one covers the near
 * SECTION and the clear-filters button, both of which are still folded with a bare attribute:
 * without it an unfiltered directory shows "These guides might be a fit too" over an empty grid.
 *
 * Disjoint from .tot-dir__folded:not([hidden]) above, which never applies to a hidden element.
 */
.tot-dir [hidden] {
	display: none !important;
}

/* display:flex and the reserved 1:1 box itself now live with .tot-card__portrait above, since
   placeholder() shares that box. Only the icon's own sizing is left here. */
.tot-card__portrait--empty .tot-mark {
	width: 25%;
	height: auto;
}

/* D-26. What a guide can look after, on their own profile. Structural only, like everything else
   here — the visual design is Elementor's.

   The heading is not decoration: these term names describe a GUEST'S need, and on a page whose
   subject is the guide a bare list of them reads as a description OF the guide. The shortcode emits
   the heading and the list together for that reason, and the rules below keep them looking like one
   block rather than a stray heading with a list under it.

   No bullet, because each item is a sentence rather than a point in an argument, and eleven bullets
   next to a portrait reads as a specification sheet. */
.tot-access__title {
	margin: 0 0 8px;
}

.tot-access__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tot-access__item {
	margin: 0 0 4px;
}