/* Under the Holo — Deal Radar restyle.
 *
 * The Pokémon Deal Radar plugin ships a complete dark theme driven by --pdr-*
 * custom properties on .pdr-root. Rather than restyle every element (or fork the
 * plugin's templates), this remaps those variables onto Under the Holo's palette
 * — gold accent instead of the plugin's blue, Space Grotesk for display type —
 * and overrides the handful of spots where the plugin hardcodes its blue. Loaded
 * after the plugin's radar.css and only on /radar/; the plugin's markup, filters
 * and sorting are untouched.
 */

/*
 * Session 9: the mapping now points at Porcelain TOKENS rather than at the old
 * dark literals, so /radar/ follows the theme like every other page — the plugin
 * still thinks it is painting its own dark theme, and the variables underneath it
 * simply resolve to whatever the current theme is.
 *
 * --pdr-accent deserves a note: the plugin uses it for text (8 rules), borders
 * (10) and fills (6). Brand gold measures 1.6:1 as text on porcelain, so it maps
 * to the accent INK — dark enough to read — and the fills that use it become deep
 * amber, which is exactly what the kit's own accent-ink chips look like.
 */
.pdr-root {
	/*
	 * FIRST, and the whole thing hinges on it: the plugin declares
	 * `color-scheme: dark` on .pdr-root. Since Session 9 every Porcelain token is
	 * a light-dark() pair resolved by the used color-scheme, so that one
	 * declaration made the entire radar resolve to the DARK half of every token —
	 * a charcoal island sitting on a porcelain page, internally consistent and
	 * completely ignoring the visitor's theme. Inheriting the root's scheme hands
	 * the page back to the theme.
	 */
	color-scheme: inherit;

	--pdr-bg: var(--pc-bg);
	--pdr-surface: var(--pc-surface);
	--pdr-surface-raised: var(--pc-surface-2);
	--pdr-surface-soft: var(--pc-bg-soft);
	--pdr-line: var(--pc-hairline);
	--pdr-line-strong: var(--pc-hairline-strong);
	--pdr-text: var(--pc-ink);
	/* Neutral greys, never the old cool blue-grey: against the radar's warm shell
	   a blue tint reads as an out-of-place blue-purple. Both tiers are AA. */
	--pdr-muted: var(--pc-ink-2);
	--pdr-muted-bright: var(--pc-ink);
	--pdr-accent: var(--pc-accent-ink);
	--pdr-accent-hover: var(--pc-accent);
	--pdr-radius: var(--pc-r);
	--pdr-radius-small: var(--pc-r-sm);
	font-family: var(--pc-font-ui);
}

/* The shell is a card on the page now: one flat surface, one hairline, no glow. */
.pdr-root .pdr-shell {
	border-color: var(--pc-hairline);
	background: var(--pc-surface);
}

/* ============================================================
   The hardcoded half
   The plugin's --pdr-* variables cover its surfaces, lines, text and
   accent — the bulk. Around 120 further rules hardcode dark-theme
   literals outside that system, and re-declaring all of them would
   be a fork by other means. So this block covers the ones that
   actually break on porcelain, chosen from the contrast audit rather
   than by reading the plugin's stylesheet top to bottom: dark fills
   that kept dark backgrounds under dark ink, and neon semantic text
   that landed on white.
   ============================================================ */

/* Dark chrome fills → theme surfaces. */
.pdr-root .pdr-view-toolbar,
.pdr-root .pdr-filters,
.pdr-root .pdr-feed-state,
.pdr-root .pdr-empty,
.pdr-root .pdr-member-block,
.pdr-root .pdr-member-empty,
.pdr-root .pdr-compare-tray { background: var(--pc-surface-2); }

.pdr-root .pdr-pulse__stat,
.pdr-root .pdr-filter-chip,
.pdr-root .pdr-saved-search,
.pdr-root .pdr-notification,
.pdr-root .pdr-account-stat,
.pdr-root .pdr-alert-option,
.pdr-root .pdr-compare-chip,
.pdr-root .pdr-secondary-button,
.pdr-root .pdr-modal__thumb,
.pdr-root .pdr-skeleton,
.pdr-root .pdr-auth__tabs,
.pdr-root .pdr-member-field input { background: var(--pc-surface-3); }

.pdr-root .pdr-view-tabs button span,
.pdr-root .pdr-member-shortcut > span,
.pdr-root .pdr-confidence__track,
.pdr-root .pdr-alert-filter-preview span { background: var(--pc-tint-2); color: var(--pc-ink-2); }

.pdr-root .pdr-share-view:hover,
.pdr-root .pdr-member-shortcut:hover,
.pdr-root .pdr-load-more:hover,
.pdr-root .pdr-filter-chip button:hover,
.pdr-root .pdr-compare-chip__remove:hover,
.pdr-root .pdr-auth__tabs button[aria-pressed="true"] { background: var(--pc-tint-2); color: var(--pc-ink); }

/* Neon semantics → the kit's measured pairs. *-fill for the badge grounds,
   the text token for anything read as words. */
.pdr-root .pdr-metric__value--positive,
.pdr-root .pdr-card__signal--good,
.pdr-root .pdr-card__signal--strong,
.pdr-root .pdr-member-panel__status.is-success,
.pdr-root .pdr-card__compare[aria-pressed="true"]:hover { color: var(--pc-up); }
.pdr-root .pdr-metric__value--negative,
.pdr-root .pdr-danger-link,
.pdr-root .pdr-alert span,
.pdr-root .pdr-market-detail__change.is-down,
.pdr-root .pdr-member-panel__status.is-error,
.pdr-root .pdr-market-detail__state--error p { color: var(--pc-down); }
.pdr-root .pdr-card__signal--watch,
.pdr-root .pdr-card__warning,
.pdr-root .pdr-modal__signal--warning,
.pdr-root .pdr-market-age.is-old,
.pdr-root .pdr-alert--stale span { color: var(--pc-warn); }
.pdr-root .pdr-card__signal--lead,
.pdr-root .pdr-market-detail__footer a:hover,
.pdr-root .pdr-modal__market-source,
.pdr-root .pdr-notification__icon { color: var(--pc-info); }
.pdr-root .pdr-card__title:hover { color: var(--pc-ink); }

.pdr-root .pdr-badge { background: var(--pc-surface-3); color: var(--pc-ink-2); }
.pdr-root .pdr-badge--good,
.pdr-root .pdr-badge--drop { background: var(--pc-up-soft); color: var(--pc-up); }
.pdr-root .pdr-badge--watch { background: var(--pc-warn-soft); color: var(--pc-warn); }
.pdr-root .pdr-badge--above { background: var(--pc-down-soft); color: var(--pc-down); }
.pdr-root .pdr-badge--new,
.pdr-root .pdr-badge--lead { background: var(--pc-info-soft); color: var(--pc-info); }
.pdr-root .pdr-save-search { background: var(--pc-up-soft); color: var(--pc-up); }
.pdr-root .pdr-view-tabs button[aria-pressed="true"] { background: var(--pc-accent-soft); color: var(--pc-accent-ink); }
.pdr-root .pdr-view-tabs button[aria-pressed="true"] span { background: var(--pc-accent-soft); color: var(--pc-accent-ink); }

/* Anything the plugin paints on a photo keeps a scrim, in both themes. */
.pdr-root .pdr-card__media::after,
.pdr-root .pdr-card__catalog-note,
.pdr-root .pdr-card__favorite,
.pdr-root .pdr-modal__image-label { background: var(--pc-scrim); color: var(--pc-on-scrim); }

/* Two figures the plugin hardcodes, both below the AA floor on porcelain: the
   9px "safe buy ≤ …" range line (#6f7b86, 4.01:1) and the market value. */
.pdr-root .pdr-price-block__range { color: var(--pc-ink-3); }

/* Display type in Space Grotesk, like every other heading on the site. */
.pdr-root .pdr-title,
.pdr-root .pdr-results-bar__title,
.pdr-root .pdr-modal__title {
	font-family: var(--pc-font-display);
}

/* Eyebrows in gold rather than the plugin's muted blue-grey. */
.pdr-root .pdr-eyebrow,
.pdr-root .pdr-results-bar__eyebrow {
	color: var(--pc-accent-ink);
}

/* The eBay call-to-action becomes an Under the Holo holo button. */
.pdr-root .pdr-ebay-button {
	background: var(--pc-accent-grad);
	color: var(--pc-on-accent);
	border: 0;
	font-weight: 600;
}
.pdr-root .pdr-ebay-button:hover {
	filter: brightness(1.06);
	color: var(--pc-on-accent);
}

/* The conservative market-value figure keeps a hardcoded light-blue in the plugin
   (it predates the --pdr-accent variable); bring it onto the gold accent so it
   reads as the reference number the whole tool is built around. */
.pdr-root .pdr-price-block__value--market { color: var(--pc-accent-ink); }

/* The feed-state dot and the "New"-style accents inherit --pdr-accent (now gold)
   automatically; nothing more to override there. */

/* Filter row: the plugin sizes it as fixed-px grid columns whose sum overruns a
   narrower container, clipping the right end ("Sort by", "More filters"). Make the
   columns flexible so they fill the available width and wrap onto a second row
   instead of overflowing. Search keeps a double share, since it is the main field. */
.pdr-root .pdr-filters__primary {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: end;
}
.pdr-root .pdr-field--search { grid-column: span 2; }
.pdr-root .pdr-more-button { align-self: end; }

/* ---------- Getting to the listings faster ----------
   Measured before this block: the first card sat 918px down on desktop and
   1360px down on mobile — nearly two screens of furniture on a phone. Nothing
   here removes a control; it stops showing all of them at once. */

/* The view toolbar was `nowrap` with two rigid children, so at common widths the
   tab strip was squeezed below its content width and "Ending soon" rendered
   underneath the "Create alert" button. Let the actions wrap to their own line
   and let the tabs scroll cleanly instead of being crushed. */
.pdr-root .pdr-view-toolbar {
	flex-wrap: wrap;
	row-gap: 10px;
}
.pdr-root .pdr-view-tabs {
	min-width: 0;
	flex: 1 1 auto;
	scrollbar-width: thin;
}
.pdr-root .pdr-view-actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Secondary filters fold into the panel the "More filters" button already owns.
   Search, deal quality and sort stay out — they are the three people actually
   reach for. Everything else is one tap away, and any filter left active still
   shows as a chip below, so nothing can be applied invisibly.
   :has() is the whole mechanism: where it is unsupported every filter simply
   stays visible, which is exactly today's behaviour. */
.pdr-root .pdr-filters__primary:has([data-pdr-advanced-toggle][aria-expanded="false"]) .pdr-field:has([data-pdr-filter="era"]),
.pdr-root .pdr-filters__primary:has([data-pdr-advanced-toggle][aria-expanded="false"]) .pdr-field:has([data-pdr-filter="set"]),
.pdr-root .pdr-filters__primary:has([data-pdr-advanced-toggle][aria-expanded="false"]) .pdr-field:has([data-pdr-filter="pokemon"]),
.pdr-root .pdr-filters__primary:has([data-pdr-advanced-toggle][aria-expanded="false"]) .pdr-field:has([data-pdr-filter="maxPrice"]),
.pdr-root .pdr-filters__primary:has([data-pdr-advanced-toggle][aria-expanded="false"]) .pdr-field:has([data-pdr-filter="activity"]) {
	display: none;
}

/* Mobile: the header furniture, trimmed. The market pulse keeps its numbers but
   stops being a 243px block, and the hero stops repeating what the page title
   already says. */
@media (max-width: 720px) {
	.pdr-root .pdr-hero { gap: 10px; }
	.pdr-root .pdr-subtitle { font-size: .88rem; line-height: 1.45; }
	.pdr-root .pdr-shell { padding: 14px; }

	.pdr-root .pdr-market-pulse,
	.pdr-root [class*="pulse"] { gap: 10px; }

}

/*
 * The plugin ships its own bottom navigation bar. Since Session 9 the theme has
 * one — the same destinations, safe-area aware, on every page — so two bars would
 * stack on top of each other here. The plugin's is hidden rather than fixed up,
 * and the rules below it are kept because the plugin uses that bar on its own
 * pages too, where our tab bar does not exist.
 */
@media (max-width: 1020px) {
	.pdr-root .pdr-mobile-nav { display: none; }
}

/* The mobile bar appears at 760px in the plugin, so its corrections must start at
   the same width — pinning them to 720px left the bar broken between the two. */
@media (max-width: 760px) {
	/* The bar is a GRID pinned to four columns, so adding Portfolio pushed Account
	   onto a second row. Let the columns follow the number of items instead, and
	   it cannot break again the next time one is added. */
	.pdr-root .pdr-mobile-nav {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		padding-inline: 4px;
	}

	/* The plugin styles `button` only; Portfolio is a link, so it was rendering
	   unstyled next to the others. Give anchors the same treatment. */
	.pdr-root .pdr-mobile-nav > a {
		position: relative;
		display: grid;
		place-items: center;
		gap: 2px;
		min-width: 0;
		min-height: 48px;
		padding: 5px 3px;
		border: 0;
		border-radius: 11px;
		background: transparent;
		color: var(--pdr-muted);
		font: inherit;
		font-size: .62rem;
		font-weight: 750;
		text-decoration: none;
	}
	.pdr-root .pdr-mobile-nav > a:hover,
	.pdr-root .pdr-mobile-nav > a:focus-visible { color: var(--pdr-text); }
	.pdr-root .pdr-mobile-nav > a svg { width: 20px; height: 20px; }
	.pdr-root .pdr-mobile-nav > a svg path {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
	}

	/* Five labels in a phone's width: keep them on one line rather than letting a
	   long one wrap and push the bar taller. */
	.pdr-root .pdr-mobile-nav span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ============================================================
   PRESET VIEWS (Session 11)
   The radar's own filters, expressed as shareable URLs. Rendered
   by the theme above the plugin's feed; the plugin is untouched.
   ============================================================ */
.uth-radar-presets { margin: 0 0 var(--pc-sp-5); display: flex; flex-direction: column; gap: var(--pc-sp-2); }
.uth-radar-presets .pc-seg { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.uth-radar-presets .pc-seg__btn { text-decoration: none; display: inline-flex; align-items: center; }
.uth-radar-presets .pc-seg__btn[aria-current="page"] {
	background: var(--pc-surface); color: var(--pc-ink); box-shadow: var(--pc-shadow-1);
}
.uth-radar-presets__note { margin: 0; font-size: var(--pc-t-sm); color: var(--pc-ink-2); max-width: 68ch; }

/* ============================================================
   SESSION 12 — the marketplace layout

   The radar was spending a whole viewport on chrome: breadcrumb,
   presets, a hero, a Market Pulse band, a full-width filter bar
   and a row of view tabs, before a single listing appeared. This
   turns it into a results page.

   Everything below is CSS over the plugin's OWN markup. .pdr-shell
   becomes a two-column grid and its existing children are PLACED
   into it — nothing is moved, wrapped or rewritten, so the
   plugin's JS hooks, its pdr- query parameters and its eBay
   compliance surface (the visible listing link and the "item data
   provided by eBay" attribution on every card) are untouched.

   Row numbers are explicit rather than auto-flowed. The shell's
   children are a fixed list but several are conditionally empty,
   and explicit rows mean an absent element leaves a zero-height
   row instead of pushing everything below it into a new one.
   ============================================================ */

/* ---------- the head row: where you are, and which view ---------- */
.uth-radar-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-sp-3);
	margin-bottom: var(--pc-sp-4);
}
.uth-crumbs--tight { margin: 0; flex: 0 0 auto; }
.uth-radar-presets { flex: 1 1 auto; min-width: 0; }
.uth-radar-presets .pc-seg { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.uth-radar-presets .pc-seg__btn { text-decoration: none; display: inline-flex; align-items: center; }
.uth-radar-presets .pc-seg__btn[aria-current="page"] {
	background: var(--pc-surface); color: var(--pc-ink); box-shadow: var(--pc-shadow-1);
}
.uth-radar-note { margin: var(--pc-sp-5) 0 0; font-size: var(--pc-t-sm); color: var(--pc-ink-3); max-width: 68ch; }

/* The mobile way in. Above 1020px the sidebar is on screen, so the button is not. */
.uth-radar-filterbtn { flex: 0 0 auto; }
.uth-radar-filterbtn__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
	border-radius: var(--pc-r-pill); background: var(--pc-accent-grad); color: var(--pc-on-accent);
	font-size: var(--pc-t-micro); font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 1020px) { .uth-radar-filterbtn { display: none; } }

/* ---------- the top band: one line of identity, one of numbers ----------
   The eyebrow and the intro paragraph stay in the DOM for search engines and
   for anything reading rather than looking, and leave the screen: they are copy
   ABOUT the tool, and the visitor came for the tool. Clipped, not display:none
   — that difference is the whole point. */
.pdr-root .pdr-hero {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pc-sp-3);
	padding: 0; margin: 0 0 var(--pc-sp-3); border: 0; background: none; box-shadow: none;
}
.pdr-root .pdr-eyebrow,
.pdr-root .pdr-subtitle,
.pdr-root .pdr-pulse__intro {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pdr-root .pdr-title {
	margin: 0; font-size: 1.375rem; line-height: 1.2; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pdr-root .pdr-feed-state { margin: 0; }

/* Market Pulse, reduced to four inline chips. */
.pdr-root .pdr-pulse {
	padding: 0; margin: 0 0 var(--pc-sp-4); border: 0; background: none; box-shadow: none;
}
.pdr-root .pdr-pulse__stats {
	display: flex; flex-wrap: wrap; gap: var(--pc-sp-2);
	margin: 0; padding: 0; border: 0; background: none;
}
.pdr-root .pdr-pulse__stat {
	display: inline-flex; align-items: baseline; gap: 6px; margin: 0;
	padding: 5px 11px; border-radius: var(--pc-r-pill);
	background: var(--pc-surface-2); border: 1px solid var(--pc-hairline);
}
.pdr-root .pdr-pulse__stat span {
	font-size: var(--pc-t-micro); font-weight: 600; letter-spacing: var(--pc-track-micro);
	text-transform: uppercase; color: var(--pc-ink-3);
}
.pdr-root .pdr-pulse__stat strong {
	font-family: var(--pc-font-display); font-size: .9375rem; font-weight: 600;
	color: var(--pc-ink); font-variant-numeric: tabular-nums;
}

/* The plugin's own view tabs duplicate the preset row in the page head, and a
   results page cannot afford the same control twice. Its ACTIONS stay. */
.pdr-root .pdr-view-tabs { display: none; }
.pdr-root .pdr-view-toolbar {
	padding: 0; margin: 0 0 var(--pc-sp-3); border: 0; background: none; box-shadow: none;
}

/* ---------- two columns ---------- */
@media (min-width: 1020px) {
	/* The shell's own 36px inset is a landing-page inset. On a results page it
	   is 36px of nothing above the first thing worth reading. */
	.pdr-root .pdr-shell {
		padding: 0;
		display: grid;
		grid-template-columns: 272px minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: var(--pc-sp-6);
		align-items: start;
	}
	.pdr-root .pdr-hero  { grid-column: 1 / -1; grid-row: 1; }
	.pdr-root .pdr-pulse { grid-column: 1 / -1; grid-row: 2; }

	/* The sidebar. Sticky under the fixed header, with its own scroll when the
	   filter list is taller than the viewport — a sticky element that cannot
	   scroll is a sticky element hiding its own bottom half. */
	.pdr-root .pdr-filters {
		grid-column: 1; grid-row: 3 / span 9;
		position: sticky; top: calc(var(--uth-header-h) + var(--pc-sp-4));
		max-height: calc(100vh - var(--uth-header-h) - var(--pc-sp-6));
		overflow-y: auto; overscroll-behavior: contain;
		display: flex; flex-direction: column; gap: var(--pc-sp-4);
		padding: var(--pc-sp-4);
		background: var(--pc-surface); border: 1px solid var(--pc-hairline);
		border-radius: var(--pc-r); box-shadow: var(--pc-shadow-1);
	}
	/* EVERY child gets a row. An unplaced grid child is auto-placed into the
	   next free cell, which is how the methodology block ended up wedged
	   between the results bar and the first listing — 131px of explanation
	   above the thing it explains. The feed's own stale/error alerts are
	   placed too: they are display:none until the worker falls behind, and
	   when they appear they belong above the results, not wherever the
	   auto-placer had room. */
	.pdr-root .pdr-view-toolbar   { grid-column: 2; grid-row: 3; }
	.pdr-root .pdr-alert--stale   { grid-column: 2; grid-row: 4; }
	.pdr-root .pdr-alert--error   { grid-column: 2; grid-row: 5; }
	.pdr-root .pdr-results-bar    { grid-column: 2; grid-row: 6; }
	.pdr-root .pdr-skeleton-grid  { grid-column: 2; grid-row: 7; }
	.pdr-root .pdr-empty          { grid-column: 2; grid-row: 8; }
	.pdr-root .pdr-card-grid      { grid-column: 2; grid-row: 9; }
	.pdr-root .pdr-load-more-wrap { grid-column: 2; grid-row: 10; }
	/* Below the results, where an explanation belongs. */
	.pdr-root .pdr-methodology    { grid-column: 2; grid-row: 11; margin-top: var(--pc-sp-6); }

	/* Every filter, open. The plugin hides its advanced block behind a "More
	   filters" toggle, which is right for a full-width bar and wrong for a
	   sidebar with room to spare. The toggle goes with it: a button claiming to
	   open something already open is worse than either state. */
	/* The toggle stays: radar-filters.js opens the block through it on load, and
	   folding the advanced filters away again is a reasonable thing to want. */
	.pdr-root .pdr-filters .pdr-more-button { width: 100%; justify-content: space-between; }
	.pdr-root .pdr-filters__primary,
	.pdr-root .pdr-filters__advanced {
		display: flex; flex-direction: column; gap: var(--pc-sp-3);
		grid-template-columns: none; margin: 0; padding: 0; border: 0;
	}
	.pdr-root .pdr-filters .pdr-field { width: 100%; }
	.pdr-root .pdr-filter-footer { flex-direction: column; align-items: stretch; gap: var(--pc-sp-3); }
}

/* ---------- the listing, eBay-style ----------
   One horizontal row per listing: art, then identity, then a right rail with
   the delivered price, the verdict and the way out to eBay. The card's children
   are placed by class; .pdr-card__body is display:contents so its children
   become grid items of the card itself, which is how the price block reaches
   the rail without anything moving in the DOM. Both containers are plain
   <div>s, so display:contents costs no semantics. */
.pdr-root .pdr-card-grid { display: flex; flex-direction: column; gap: var(--pc-sp-3); }

@media (min-width: 760px) {
	.pdr-root .pdr-card {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr) clamp(168px, 20%, 208px);
		grid-auto-rows: min-content;
		column-gap: var(--pc-sp-4);
		row-gap: 2px;
		align-items: start;
		padding: var(--pc-sp-4);
	}
	.pdr-root .pdr-card__media {
		grid-column: 1; grid-row: 1 / span 8;
		width: 116px; height: 156px; margin: 0;
	}
	.pdr-root .pdr-card__media img { width: 100%; height: 100%; object-fit: contain; }

	/* The badges live INSIDE the media button — a child, not a sibling — so no
	   grid placement can reach them and the thumbnail was clipping "Strong deal"
	   to "Strong d". The media column becomes a small stack instead: artwork,
	   then the badges underneath it, where there is width to read them. */
	.pdr-root .pdr-card__kicker   { grid-column: 2; grid-row: 1; margin: 0; }
	.pdr-root .pdr-card__title    { grid-column: 2; grid-row: 2; text-align: left; font-size: 1rem; line-height: 1.35; }
	.pdr-root .pdr-card__identity { grid-column: 2; grid-row: 3; margin: 0; }
	.pdr-root .pdr-card__signal   { grid-column: 2; grid-row: 4; margin: 2px 0 0; }
	.pdr-root .pdr-metrics        { grid-column: 2; grid-row: 5; margin: var(--pc-sp-2) 0 0; }
	.pdr-root .pdr-card__warning  { grid-column: 2; grid-row: 6; margin: var(--pc-sp-2) 0 0; }

	/* The rail. */
	.pdr-root .pdr-card__body { display: contents; }
	.pdr-root .pdr-price-row {
		grid-column: 3; grid-row: 1 / span 5;
		display: flex; flex-direction: column; gap: var(--pc-sp-3);
		align-items: flex-end; text-align: right; margin: 0;
	}
	.pdr-root .pdr-card__footer {
		grid-column: 3; grid-row: 6;
		display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
		text-align: right; margin: var(--pc-sp-2) 0 0; padding: 0; border: 0;
	}
	.pdr-root .pdr-card__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

	/* The delivered price is the number the row is about. */
	.pdr-root .pdr-price-row > :first-child .pdr-price-block__value,
	.pdr-root .pdr-price-row > :first-child strong {
		font-size: 1.5rem; line-height: 1.1; white-space: nowrap;
	}
	.pdr-root .pdr-card__title,
	.pdr-root .pdr-card__identity { overflow-wrap: anywhere; }
}

/* Denser rows, so more than one listing fits a screen. */
.pdr-root .pdr-metrics { display: flex; flex-wrap: wrap; gap: var(--pc-sp-4); }
.pdr-root .pdr-confidence { font-size: var(--pc-t-sm); }

/* ---------- below the breakpoint ----------
   The form lives in the sheet down here (assets/js/radar-filters.js moves the
   node itself). These rules dress it wherever it is, so the layout is already
   right in the frame before the move lands. */
@media (max-width: 1019.98px) {
	.pc-sheet [data-pdr-filters] { display: flex; flex-direction: column; gap: var(--pc-sp-4); }
	.pc-sheet [data-pdr-filters] .pdr-more-button { width: 100%; justify-content: space-between; }
	.pc-sheet [data-pdr-filters] .pdr-filters__primary,
	.pc-sheet [data-pdr-filters] .pdr-filters__advanced {
		display: flex; flex-direction: column; gap: var(--pc-sp-3);
		grid-template-columns: none;
	}
	.pdr-root .pdr-title { font-size: 1.125rem; }
}

/* The shared first-section rule clears the fixed header with room to spare for a
   marketing page. This is not one: keep the clearance, spend nothing extra. */
.uth-radar-app { padding-top: calc(var(--uth-header-h) + var(--pc-sp-4)); padding-bottom: var(--pc-sp-9); }
@media (max-width: 1019.98px) { .pdr-root .pdr-shell { padding: 0; } }

/* ---------- the narrow view, tightened ----------
   Measured at 390px: the head alone was 148px because the breadcrumb, the preset
   pills and the Filters button each claimed a line, and the pulse chips wrapped
   onto two rows. Both are horizontal scrollers now — a phone can swipe a row of
   pills far more comfortably than it can spare 90px of height for them. */
@media (max-width: 1019.98px) {
	.uth-radar-head { gap: var(--pc-sp-2); row-gap: var(--pc-sp-2); }
	.uth-radar-presets { flex: 1 1 140px; }
	.uth-radar-presets .pc-seg { min-width: 0; }
	.uth-radar-filterbtn { flex: 0 0 auto; }

	.pdr-root .pdr-pulse__stats {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
		padding-bottom: 2px; -webkit-overflow-scrolling: touch;
	}
	.pdr-root .pdr-pulse__stat { flex: 0 0 auto; }

	.pdr-root .pdr-results-bar { gap: var(--pc-sp-2); }
	.pdr-root .pdr-results-bar h2 { font-size: 1rem; margin: 0; }
}

/* The breadcrumb is orientation, and orientation is worth 19px until the screen
   is genuinely small. Below 560px the header and the tab bar already say where
   you are. */
@media (max-width: 559.98px) {
	.uth-radar-head .uth-crumbs { display: none; }
}

/* Nothing in the sidebar may be wider than the sidebar. The plugin sizes its
   controls for a full-width bar, and a 272px column is not one. */
@media (min-width: 1020px) {
	.pdr-root .pdr-filters .pdr-field,
	.pdr-root .pdr-filters .pdr-input,
	.pdr-root .pdr-filters .pdr-select,
	.pdr-root .pdr-filters input,
	.pdr-root .pdr-filters select { max-width: 100%; min-width: 0; box-sizing: border-box; }
	.pdr-root .pdr-filters .pdr-field--search { grid-column: auto; }
}

/* The favourite star is absolutely positioned at the card's top-right, which in
   a one-column card is empty space and in this layout is exactly where the
   delivered-price label lives — it was clipping "Delivered price" to "Delivered
   p". Moved onto the artwork, which is both out of the way and where a
   marketplace puts a save control. */
@media (min-width: 760px) {
	.pdr-root .pdr-card__favorite { right: auto; left: 9px; }
}

/* ---------- density ----------
   A results page is judged on how many results fit. At 258px a card put barely
   one and a half on a 900px screen. The art comes down to a thumbnail, the
   confidence BAR goes (the same figure is already one of the three metrics
   beside it — the bar was a second telling of the same number), and the
   paddings tighten. Nothing is removed that is not said elsewhere on the card. */
@media (min-width: 760px) {
	.pdr-root .pdr-card { padding: var(--pc-sp-3) var(--pc-sp-4); row-gap: 0; }
	.pdr-root .pdr-card__media { width: 96px; height: 130px; }
	.pdr-root .pdr-card { grid-template-columns: 96px minmax(0, 1fr) clamp(168px, 20%, 208px); }
	.pdr-root .pdr-confidence { display: none; }
	.pdr-root .pdr-card__kicker { font-size: var(--pc-t-micro); }
	.pdr-root .pdr-card__signal { font-size: var(--pc-t-sm); }
	.pdr-root .pdr-metrics { gap: var(--pc-sp-3); margin-top: 4px; }
	.pdr-root .pdr-price-row { gap: var(--pc-sp-2); }
	.pdr-root .pdr-card__footer { margin-top: 4px; }
}

/* The media column: artwork, then the badges under it. `height: auto` because a
   fixed height on a flex column would crush whichever of the two lost. */
@media (min-width: 760px) {
	.pdr-root .pdr-card__media {
		width: 116px; height: auto; min-height: 0;
		display: flex; flex-direction: column; gap: 6px; align-items: stretch; overflow: visible;
	}
	.pdr-root .pdr-card { grid-template-columns: 116px minmax(0, 1fr) clamp(168px, 20%, 208px); }
	.pdr-root .pdr-card__media img,
	.pdr-root .pdr-card__image,
	.pdr-root .pdr-card__image-placeholder { width: 116px; height: 150px; object-fit: contain; flex: none; }
	.pdr-root .pdr-card__top-badges {
		position: static; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; width: 116px;
	}
	/* Two lines of title, then an ellipsis: the rest is on eBay. */
	.pdr-root .pdr-card__title {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* The badge strip is sized by the plugin for an overlay on a big cover image, so
   it inherited a 34px box and clipped its own label. In the media column it is
   the width of the column, and the artwork shrinks to match a results row. */
@media (min-width: 760px) {
	.pdr-root .pdr-card .pdr-card__media .pdr-card__top-badges {
		width: 116px; min-width: 116px; max-width: 116px;
		position: static; inset: auto; transform: none;
	}
	.pdr-root .pdr-card .pdr-card__media img,
	.pdr-root .pdr-card .pdr-card__media .pdr-card__image,
	.pdr-root .pdr-card .pdr-card__media .pdr-card__image-placeholder { height: 120px; }
}

/* ============================================================
   SESSION 12 — the four things that were wrong
   ============================================================ */

/* 1. The h1 was losing its first letter.
   `overflow: hidden` with no inset clips the left side-bearing of the opening
   glyph, and Space Grotesk's "P" has one — so "Pokémon" rendered as "okémon".
   The ellipsis is still wanted for a long feed title, so the box keeps its
   overflow and gains the padding the glyph needs to sit inside it. */
/* The h1 does not get truncated at all, and the 2px padding I tried first was
   treating the symptom.
 *
 * Measured: scrollWidth === clientWidth (202 = 202) and the first character's
 * layout box sat a full 2px inside the element — by every number the DOM
 * exposes, nothing was being cut. It was still visibly cut, because a Range
 * rect reports the glyph's ADVANCE box, not its painted outline. Space Grotesk
 * at weight 800 with -0.99px tracking paints the "P" stem outside its own
 * advance origin, and `overflow: hidden` clips painted pixels. No amount of
 * padding is provably enough, because the overhang is a property of the
 * typeface at a given size and weight, not a constant.
 *
 * So the clip goes. This is the page's single h1 holding a short, known string;
 * `text-overflow: ellipsis` on it could only ever damage it, and a heading that
 * wraps onto a second line on a narrow screen is the correct behaviour anyway. */
.pdr-root .pdr-title {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	padding-left: 0; padding-right: 0;
	overflow-wrap: break-word;
}

/* …and the clip that was ACTUALLY cutting it lives one level up.
 *
 * `.pdr-shell` is a card — background, 1px border, 24px corner radius — and it
 * carries `overflow: clip` to keep its children inside those corners. What it
 * did NOT carry was any padding, so every child sat flush against the clip
 * edge with 1px of slack: the h1's box started at 713.5 inside a box starting
 * at 712.5. Making the h1 itself `overflow: visible` was necessary and useless
 * on its own, because the shell clipped the overhang regardless.
 *
 * Padding fixes both the clipped glyph and the reason it looked wrong even
 * where it was intact: a 24px-radius card whose content touches its own border
 * reads as cropped whether or not any pixels were lost. */
.pdr-root .pdr-shell { padding: var(--pc-sp-5); }
@media (max-width: 1019.98px) {
	.pdr-root .pdr-shell { padding: var(--pc-sp-4); }
}

/* 2. The breadcrumb has its own row now; the head row is presets + Filters. */
.uth-crumbs--tight { margin: 0 0 var(--pc-sp-3); }
.uth-radar-head { align-items: center; }

/* 3. The plugin's view toolbar is `position: sticky; top: 8px; z-index: 20`.
   That is right for a page whose header scrolls away and wrong for this one —
   8px from the top of the VIEWPORT is underneath a fixed header, which is why
   "Create alert" and "Share view" were riding over the logo on a phone. It
   stops sticking here; the results bar directly below it is the thing worth
   keeping in view, and it does not stick either. */
.pdr-root .pdr-view-toolbar { position: static; z-index: auto; top: auto; margin-top: 0; }

/* 4. The filter form inside the sheet.
   The slot re-declares `.pdr-root` (see page-radar.php) so the plugin's scoped
   rules and its --pdr-* variables reach the form again. What the slot must NOT
   inherit is the shell's page-level chrome, so it is stripped back to a plain
   container and the form is laid out for a single narrow column. */
.uth-radar-sheetslot {
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--pc-ink); text-align: left;
}
.uth-radar-sheetslot .pdr-filters {
	display: flex; flex-direction: column; gap: var(--pc-sp-4);
	margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
	position: static; max-height: none; overflow: visible;
}
.uth-radar-sheetslot .pdr-filters__primary,
.uth-radar-sheetslot .pdr-filters__advanced {
	display: flex; flex-direction: column; gap: var(--pc-sp-3);
	grid-template-columns: none; margin: 0; padding: 0; border: 0;
}
/* A field is a label above its control, left-aligned, full width. The plugin's
   own grid sizing assumes a wide bar and produced centred, borderless rows in a
   360px sheet. */
.uth-radar-sheetslot .pdr-field {
	display: flex; flex-direction: column; align-items: stretch;
	gap: 6px; width: 100%; min-width: 0; text-align: left;
}
.uth-radar-sheetslot .pdr-field__label { text-align: left; }
.uth-radar-sheetslot .pdr-input,
.uth-radar-sheetslot .pdr-select,
.uth-radar-sheetslot input,
.uth-radar-sheetslot select {
	width: 100%; min-width: 0; box-sizing: border-box; text-align: left;
}
.uth-radar-sheetslot .pdr-filter-footer {
	display: flex; flex-direction: column; align-items: stretch; gap: var(--pc-sp-3);
	margin: 0; padding: 0; border: 0;
}
.uth-radar-sheetslot .pdr-more-button { width: 100%; justify-content: space-between; }
.uth-radar-sheetslot .pdr-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The sheet has its own footer button; the form's submit would be a second one
   saying the same thing. */
.uth-radar-sheetslot .pdr-filters__submit { display: none; }

/* 5. The preset bar hugs its tabs instead of stretching the container. A
   segmented control spanning 1200px reads as a band with words in it rather
   than as a control — which is half of what made the row look wrong. It still
   scrolls on a narrow screen, so the max-width stays. */
.uth-radar-presets .pc-seg { width: max-content; max-width: 100%; }
@media (max-width: 640px) {
	/* On a phone the row is the tabs and nothing else: no card chrome around
	   them, and a scroll that runs to the edge of the screen so the fifth tab is
	   visibly reachable rather than looking cut off inside a box. */
	.uth-radar-presets .pc-seg {
		width: auto; background: none; border: 0; padding: 0; gap: 2px;
		margin-inline: calc(var(--pc-sp-4) * -1);
		padding-inline: var(--pc-sp-4);
		-webkit-overflow-scrolling: touch;
	}
	/* Both properties, because Chrome honours scrollbar-width now and would keep
	   drawing a thin bar under the tabs if only the pseudo-element were hidden. */
	.uth-radar-presets .pc-seg { scrollbar-width: none; }
	.uth-radar-presets .pc-seg::-webkit-scrollbar { display: none; }
	.uth-radar-presets .pc-seg__btn {
		flex: 0 0 auto; white-space: nowrap;
		border: 1px solid var(--pc-hairline); border-radius: var(--pc-r-pill);
		padding: 6px 13px; font-size: var(--pc-t-sm);
	}
	.uth-radar-presets .pc-seg__btn[aria-current="page"] {
		border-color: transparent; background: var(--pc-accent-grad); color: var(--pc-on-accent);
	}

	/* 6. The gaps between the four top blocks, on a screen that has none to
	   spare. Each is a whole step smaller here than on desktop; together they
	   are what moves the first listing above the fold rather than just below it.
	   Nothing is removed — the identity line, the pulse numbers and the view
	   actions are all still there, just not spaced like a landing page. */
	.pdr-root .pdr-hero { margin-bottom: var(--pc-sp-2); gap: var(--pc-sp-2); }
	.pdr-root .pdr-pulse { margin-bottom: var(--pc-sp-3); }
	.pdr-root .pdr-view-toolbar { margin-bottom: var(--pc-sp-2); }
	.pdr-root .pdr-results-bar { margin-bottom: var(--pc-sp-2); }
	.uth-radar-presets { margin-bottom: var(--pc-sp-3); }
}