/* Hallmark · genre: atmospheric · design-system: design-123bet.md
 *
 * NIGHT treatment for the Highstakes Core blocks — the dark counterpart to
 * blocks.css. Registered by the plugin as `highstakes-blocks-night` but never
 * enqueued by it: a theme opts in.
 *
 *   wp_enqueue_style( 'highstakes-blocks-night' );
 *
 * Shared by every dark theme built on this platform (123bet, 123bet-magazine),
 * which is why it lives with the blocks rather than in one of them. blocks.css is
 * written against tokens, so most of the work here is re-pointing its six surface
 * levers; this file only carries what those levers can't reach — the dark-tuned
 * category signals, the mega-menu panel as a detached card, the CTA fill, the
 * on-image chip treatment, and the newsletter card's cyan signal.
 *
 * TOKEN CONTRACT — an opting-in theme must declare these in its own :root, on top
 * of the theme.json colour presets that blocks.css already needs:
 *
 *   --hs-cta  --hs-cta-ink  --hs-cta-hover   call-to-action fill, label, hover
 *   --radius-card  --radius-media  --radius-field  --radius-cta
 *   --hs-lift  --hs-lift-deep  --hs-glow     elevation + the CTA hover glow
 *   --hs-nav-top  --hs-nav-h                 floating-navbar geometry
 *   --hs-cyan  --hs-band-2                   second signal + raised band
 *
 * Optional, for a theme that also offers a light mode (see the parent's
 * palette-day.css). Each has a night fallback inline, so this file still stands
 * up on its own:
 *
 *   --hs-recess     a strip set into a card — here, the mobile menu's foot
 *   --hs-field-bg   an input or hover plate inside a card
 *   --hs-shade      which end of the scale a hover mixes toward
 *
 * See wp-content/themes/123bet/assets/css/theme.css for the reference set, and
 * tokens-123bet.css at the repo root for the portable export.
 *
 * Every colour references a theme.json preset. Loaded after blocks.css.
 */

:root {
	/* Category signals, re-tuned for a dark canvas. The plugin's light-paper
	 * values (L ~52–60%) go muddy here, so each hue steps up to L ~72–80% and
	 * the brand violet is deliberately excluded — it has to stay the accent.
	 *
	 * Declared twice. The `-on-band` alias holds the value; the plain token points
	 * at it. A light palette re-points the plain token for the paper canvas and
	 * leaves the alias alone, so the band scope in palette-day.css can hand the
	 * night value back to the components that stay night in both modes — the chips
	 * on the mosaic tiles and the overlay cards, which sit on a photo scrim and
	 * would otherwise carry a paper-tuned dark hue on a near-black plate. That is
	 * the job --hs-accent-on-band already does for the violet; these eight are the
	 * same idea, and the two files are always enqueued together. */
	--hs-cat-sports-betting-on-band: oklch(74% 0.15 252); /* blue   */
	--hs-cat-casino-on-band:         oklch(74% 0.16 345); /* rose   */
	--hs-cat-poker-on-band:          oklch(72% 0.17 25);  /* coral  */
	--hs-cat-slots-on-band:          oklch(80% 0.15 78);  /* amber  */
	--hs-cat-online-on-band:         oklch(78% 0.13 195); /* cyan   */
	--hs-cat-land-based-on-band:     oklch(74% 0.14 130); /* green  */
	--hs-cat-horse-racing-on-band:   oklch(76% 0.13 165); /* teal   */
	--hs-cat-sweepstakes-on-band:    oklch(84% 0.16 105); /* lime   */

	--hs-cat-sports-betting: var(--hs-cat-sports-betting-on-band);
	--hs-cat-casino:         var(--hs-cat-casino-on-band);
	--hs-cat-poker:          var(--hs-cat-poker-on-band);
	--hs-cat-slots:          var(--hs-cat-slots-on-band);
	--hs-cat-online:         var(--hs-cat-online-on-band);
	--hs-cat-land-based:     var(--hs-cat-land-based-on-band);
	--hs-cat-horse-racing:   var(--hs-cat-horse-racing-on-band);
	--hs-cat-sweepstakes:    var(--hs-cat-sweepstakes-on-band);
}

/* --- Shared CTA fill --------------------------------------------------- */
/* blocks.css paints every CTA with --hs-accent-strong, which on this palette is
 * the bright link colour — too light to carry white label text. Repoint the
 * affiliate/action buttons at the deeper CTA step. */
.hs-banner__cta,
.hs-banner--card .hs-banner__cta,
.hs-op-tile__cta,
.hs-operator-table__cta,
.hs-megamenu__searchtoggle,
.hs-megamenu__searchview .search-submit,
.hs-megamenu__searchview input[type="submit"],
.hs-megamenu__searchview button[type="submit"] {
	background: var(--hs-cta);
	color: var(--hs-cta-ink);
	border-radius: var(--radius-cta);
	font-family: var(--hs-body);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: background var(--dur-short) var(--hs-ease), box-shadow var(--dur-short) var(--hs-ease);
}
.hs-banner__cta:hover,
.hs-banner--promo .hs-banner__cta:hover,
.hs-banner--card .hs-banner__cta:hover,
.hs-op-tile__cta:hover,
.hs-operator-table__cta:hover,
.hs-megamenu__searchtoggle:hover {
	background: var(--hs-cta-hover);
	color: var(--hs-cta-ink);
	box-shadow: var(--hs-glow);
}

/* --- Banner ----------------------------------------------------------- */
.hs-banner--promo::before {
	background: linear-gradient(
		90deg,
		color-mix(in oklch, var(--hs-band) 95%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 62%, transparent) 58%,
		color-mix(in oklch, var(--hs-band) 20%, transparent) 100%
	);
}
.hs-banner__eyebrow {
	font-family: var(--hs-body);
	letter-spacing: 0.1em;
	color: var(--hs-accent-strong);
}
.hs-banner__heading {
	font-weight: 800;
	letter-spacing: -0.035em;
	overflow-wrap: anywhere;
	min-width: 0;
}
/* Sidebar banner stack — each banner takes the same 1px box treatment as every
 * other panel in the rail, so an image banner reads as part of the set rather
 * than a loose cut-out. The wrapper does the clipping, so the image inside drops
 * its own radius or the two would fight at different corners. */
.hs-sidebar-banners > .hs-banner {
	border: 1px solid var(--hs-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.hs-sidebar-banners > .hs-banner > a { display: block; }
.hs-sidebar-banners > .hs-banner img { border-radius: 0; }

/* Image-less composed banner → a raised card rather than a ruled panel */
.hs-banner--card {
	background: var(--hs-surface);
	border: 1px solid var(--hs-rule);
	border-top-width: 1px;
	color: var(--hs-ink);
}
.hs-banner--card .hs-banner__heading { color: var(--hs-ink); }

/* --- Banner colour themes ---------------------------------------------- */
/* Three brand themes, set per banner in the admin (banner_theme). Each one
 * re-points the same five-token contract the newsletter card already used, so
 * nothing below needed a new rule — the eyebrow, the top rule, the border tint,
 * the corner wash and the button all resolve through it:
 *
 *   --hs-signal        the *line* colour — eyebrow, rules, ghost label. Has to
 *                      read as text on the canvas.
 *   --hs-signal-fill   the solid button's fill.
 *   --hs-signal-ink    the label sitting on that fill.
 *   --hs-signal-hover  the solid button's hover fill.
 *   --hs-signal-glow   the hover glow.
 *
 * Why line and fill are separate tokens: for the two light steps they are the
 * same value — cyan and lime are bright enough to rule a line and dark enough,
 * with ink on top, to fill a button. Volt Purple is neither at one lightness. Its
 * bright step (L 72) carries a line on the night canvas but is too light under
 * white label text; its CTA step (L 58) fills a button but disappears as a
 * hairline. So purple sets the two apart and the others collapse them, which is
 * exactly the split --hs-accent-strong / --hs-cta already makes elsewhere.
 *
 * A note on Neon Lime. §03 calls it "a spark, not a wash: a single live
 * indicator or highlight per view, never a fill", so offering it as a banner
 * theme spends the brand's scarcest colour. It is here because it was asked for,
 * and the admin field says so — but one lime banner per page is the ceiling, and
 * the operator-review badge already claims lime on a review page. */
.hs-banner--theme-purple {
	--hs-signal: var(--hs-accent-strong);
	--hs-signal-fill: var(--hs-cta);
	--hs-signal-ink: var(--hs-cta-ink);
	--hs-signal-hover: var(--hs-cta-hover);
	--hs-signal-glow: var(--hs-glow);
}
.hs-banner--theme-teal {
	/* The line steps down by day; the fill never does — see --hs-cyan-fill. Cyan
	 * as a plate is a light step (L 76), so the label on it is the deep band and
	 * never white, the same constraint that gives the violet its own CTA step. */
	--hs-signal: var(--hs-cyan);
	--hs-signal-fill: var(--hs-cyan-fill, var(--hs-cyan));
	--hs-signal-ink: var(--hs-band);
	--hs-signal-hover: color-mix(in oklch, var(--hs-cyan-fill, var(--hs-cyan)) 86%, var(--hs-shade, white));
	--hs-signal-glow: 0 10px 28px -14px var(--hs-cyan-fill, var(--hs-cyan));
}
.hs-banner--theme-lime {
	/* The line steps down by day (see --hs-lime-signal); the fill never does. */
	--hs-signal: var(--hs-lime-signal, var(--hs-lime));
	--hs-signal-fill: var(--hs-lime);
	--hs-signal-ink: var(--hs-lime-ink);
	--hs-signal-hover: color-mix(in oklch, var(--hs-lime) 88%, var(--hs-shade, white));
	--hs-signal-glow: 0 10px 28px -14px var(--hs-lime);
}

/* The themed treatment. `--themed` is the hook the renderer puts on every banner
 * once a theme is resolved; the three classes above only carry values. */
.hs-banner--themed .hs-banner__eyebrow { color: var(--hs-signal); }

/* Solid — the default. Overrides the shared CTA fill at the top of this file,
 * which is violet for every button in the system; a themed banner's button
 * follows its theme instead. */
.hs-banner--btn-solid .hs-banner__cta {
	background: var(--hs-signal-fill);
	color: var(--hs-signal-ink);
	border: 1px solid transparent;
}
.hs-banner--btn-solid .hs-banner__cta:hover {
	background: var(--hs-signal-hover);
	color: var(--hs-signal-ink);
	box-shadow: var(--hs-signal-glow);
}

/* Ghost — an outline in the theme colour, transparent centre. The label is the
 * *line* token, not the fill, because it sits on the banner's own surface rather
 * than on a coloured plate: purple ghost gets the bright step, and lime ghost
 * gets the darkened one by day. Hover fills to a low tint rather than to the
 * solid, so the two styles stay visibly different states of one control rather
 * than the ghost simply becoming the solid on contact. */
.hs-banner--btn-ghost .hs-banner__cta {
	background: transparent;
	color: var(--hs-signal);
	border: 1px solid color-mix(in oklch, var(--hs-signal) 55%, transparent);
	box-shadow: none;
}
.hs-banner--btn-ghost .hs-banner__cta:hover {
	background: color-mix(in oklch, var(--hs-signal) 14%, transparent);
	border-color: var(--hs-signal);
	color: var(--hs-signal);
	box-shadow: none;
}

/* Themed box treatment — the tinted border and signal top rule, on the composed
 * card and on any banner in the sidebar stack. `.hs-sidebar-banners > .hs-banner`
 * further down is two classes, so it outranks a lone modifier and would flatten
 * the top rule back to a hairline; the descendant selector here outranks it. */
.hs-banner--card.hs-banner--themed,
.hs-banner--newsletter.hs-banner--themed,
.hs-sidebar-banners > .hs-banner--themed {
	border: 1px solid color-mix(in oklch, var(--hs-signal) 26%, var(--hs-rule));
	border-top: 2px solid var(--hs-signal);
}
/* An image-only banner has no eyebrow, no button and no top rule to speak of —
 * only the box. Keep it a plain hairline so a themed stack of image banners does
 * not turn into a row of coloured brackets. */
.hs-sidebar-banners > .hs-banner--themed:not(.hs-banner--card):not(.hs-banner--promo) {
	border: 1px solid var(--hs-rule);
}

/* --- Newsletter card + form --------------------------------------------- */
/* The house module in a rail of commercial ones: every operator promo beside it
 * is violet, so the Brief has to read as not-an-offer. That is why it defaults to
 * the cyan second signal — see "Cyan's job" in design-123bet.md.
 *
 * The card no longer declares the signal tokens itself. It used to be the only
 * component with a signal, so it owned them; now the banner themes above do, and
 * the renderer defaults a newsletter card to `teal`, which is the same cyan it
 * always had. Leaving the old declarations in place would have pinned the card to
 * cyan and quietly half-ignored an editor who chose purple or lime — the fill
 * would move and the eyebrow, rule and border would not.
 *
 * The form is inside the card, so it inherits that theme too: a purple Brief now
 * gets a purple Subscribe button. The modal it replaced could not — one dialog
 * was shared by every card on the page, so it had no single theme to follow and
 * held the house cyan regardless. The fallbacks below are that old constant, and
 * only apply to a form rendered outside a themed card. */
.hs-banner--newsletter {
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in oklch, var(--hs-signal) 13%, transparent), transparent 62%),
		var(--hs-surface);
}

.hs-newsletter__field input {
	background: var(--hs-field-bg, var(--hs-band-2));
	border-color: var(--hs-rule);
	border-radius: var(--radius-field);
	color: var(--hs-ink);
}
.hs-newsletter__field input::placeholder { color: var(--hs-muted); }
.hs-newsletter__field input:focus-visible {
	outline-color: var(--hs-signal, var(--hs-cyan));
	border-color: color-mix(in oklch, var(--hs-signal, var(--hs-cyan)) 55%, var(--hs-rule));
}
/* Matches the themed banner CTA above, token for token — inside a card the two
 * buttons are the same control wearing the same theme.
 *
 * Cyan is a light step (L 76), so a label sitting on it is the deep band, never
 * white — the same reason the violet CTA needs its own deeper step. */
.hs-newsletter__submit {
	background: var(--hs-signal-fill, var(--hs-cyan));
	color: var(--hs-signal-ink, var(--hs-band));
	border-radius: var(--radius-cta);
	transition: background var(--dur-short) var(--hs-ease), box-shadow var(--dur-short) var(--hs-ease);
}
.hs-newsletter__submit:hover:not([disabled]) {
	background: var(--hs-signal-hover, color-mix(in oklch, var(--hs-cyan) 86%, var(--hs-shade, white)));
	box-shadow: var(--hs-signal-glow, 0 10px 28px -14px var(--hs-cyan));
}

/* --- Rating ----------------------------------------------------------- */
.hs-rating { color: var(--wp--preset--color--status-pending); }
.hs-rating__num {
	color: var(--hs-ink);
	font-family: var(--hs-body);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Mega menu -------------------------------------------------------- */
.hs-megamenu__bar { gap: 0 1.1rem; }
.hs-megamenu__top > a,
.hs-megamenu__trigger {
	font-family: var(--hs-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	padding: 0.55rem 0.1rem;
	border-bottom: 0;
	color: var(--hs-on-band-muted);
	border-radius: 999px;
	transition: color var(--dur-short) var(--hs-ease);
}
.hs-megamenu__top > a:hover,
.hs-megamenu__trigger:hover,
.hs-megamenu__trigger[aria-expanded="true"] {
	color: var(--hs-accent-strong);
	border-bottom-color: transparent;
}

/* The panel is a detached card hanging under the pill, matched to its width. */
@media (min-width: 783px) {
	/* Fill the pill's content box so the hoverable area of the bar reaches its
	 * inner edges — one less dead strip between a trigger and its panel. */
	.hs-megamenu {
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	.hs-megamenu__panel {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 0;
		right: 0;
		width: auto;
		/* Scrolling lives on the panel's content, not the panel: a scroll
		 * container clips its own overflow, which would eat the hover bridge
		 * below (an absolutely-positioned pseudo-element with a negative offset). */
		overflow: visible;
		padding: var(--wp--preset--spacing--40);
		background: var(--hs-surface);
		color: var(--hs-ink);
		border: 1px solid var(--hs-rule);
		border-radius: var(--radius-card);
		box-shadow: var(--hs-lift-deep);
	}
	/* Hover bridge. The panel floats clear of the pill, and those in-between
	 * pixels are the pill's own padding + the gap — neither is part of the menu,
	 * so travelling from a trigger to the panel would register as leaving. This
	 * transparent strip closes the gap: it hit-tests as the panel, which IS a menu
	 * descendant, so the pointer never leaves. view.js also defers the close by
	 * 220ms; belt and braces, because this has to feel instant. */
	.hs-megamenu__panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -1.6rem;
		height: 1.6rem;
	}
	.hs-megamenu__panel > .hs-wire,
	.hs-megamenu__panel > .hs-megamenu__grid {
		max-height: calc(100vh - var(--hs-nav-top) - var(--hs-nav-h) - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.hs-megamenu__panel--wire { padding-top: 0; padding-bottom: 0; }
	/* Wider rail than the parent's 15%: at 18% the longest filter-page labels
	 * ("Fastest Payout Casinos", "Instant Play Casinos") stay on one line. */
	.hs-wire { grid-template-columns: minmax(205px, 18%) 1fr; }
}
.hs-megamenu__link {
	color: var(--hs-ink-2);
	border-bottom: 1px solid var(--hs-rule);
	border-radius: 0;
}
.hs-megamenu__link:hover { color: var(--hs-accent-strong); }

/* Mega-menu "wire" panel */
.hs-wire__rail { border-right: 1px solid var(--hs-rule); }
.hs-wire__cat {
	font-family: var(--hs-body);
	font-weight: 600;
	color: var(--hs-ink-2);
	border-bottom: 1px solid var(--hs-rule);
}
.hs-wire__cat:hover,
.hs-wire__cat.is-active { color: var(--hs-accent-strong); }
.hs-wire__viewall {
	font-family: var(--hs-body);
	letter-spacing: 0.06em;
	color: var(--hs-accent-strong);
}
.hs-wire__card { color: var(--hs-ink); }
.hs-wire__thumb { background: var(--hs-paper-2); }
.hs-wire__cardtitle {
	font-family: var(--hs-display);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.hs-wire__card:hover .hs-wire__cardtitle { color: var(--hs-accent-strong); }
.hs-wire__carddate,
.hs-megamenu__previewdate,
.hs-megamenu__previewlabel {
	font-family: var(--hs-body);
	letter-spacing: 0.02em;
}

/* Mobile overlay surfaces */
@media (max-width: 782px) {
	.hs-megamenu__overlay,
	.hs-megamenu__ohead,
	.hs-megamenu__bar,
	.hs-megamenu__panel,
	.hs-megamenu__searchview { background: var(--hs-paper); }
	.hs-megamenu__ohead { border-bottom: 1px solid var(--hs-rule); }
	.hs-megamenu__ologo,
	.hs-megamenu__close { color: var(--hs-ink); }
	.hs-megamenu__ologo { font-family: var(--hs-display); font-weight: 800; letter-spacing: -0.03em; }
	.hs-megamenu__ofoot { background: var(--hs-recess, var(--hs-band)); border-top: 1px solid var(--hs-rule); }
	.hs-megamenu__top { border-bottom: 1px solid var(--hs-rule); }
	.hs-megamenu__top > a,
	.hs-megamenu__trigger {
		color: var(--hs-ink);
		font-size: 1rem;
		letter-spacing: 0;
		padding: 1rem 0;
	}
	.hs-megamenu__top > a:hover,
	.hs-megamenu__trigger:hover,
	.hs-megamenu__trigger[aria-expanded="true"] { color: var(--hs-accent-strong); }
	.hs-megamenu__back { color: var(--hs-accent-strong); font-family: var(--hs-body); }
	.hs-megamenu__burger { font-family: var(--hs-body); letter-spacing: 0.08em; }
	.hs-megamenu__searchview .search-field,
	.hs-megamenu__searchview input[type="search"] {
		background: var(--hs-surface);
		border: 1px solid var(--hs-rule);
		border-radius: var(--radius-field);
		color: var(--hs-ink);
	}
	.hs-megamenu__previewcard { color: var(--hs-ink); border-top: 1px solid var(--hs-rule); }
	.hs-megamenu__previewtitle { font-family: var(--hs-display); letter-spacing: -0.02em; }
	/* The root list is bottom-anchored above the fixed search bar; without the
	 * extra bottom padding the auto-margined tagline sits flush against the
	 * scroll container's edge and gets clipped mid-line. */
	.hs-megamenu__bar { padding-bottom: 2rem; }
	.hs-megamenu__meta { border-top: 1px solid var(--hs-rule); padding-bottom: 0.75rem; }
	.hs-megamenu__meta .hs-dateline__tag { font-family: var(--hs-body); }
}

/* --- States index ----------------------------------------------------- */
.hs-states-index__item { border-bottom: 1px solid var(--hs-rule); }
.hs-states-index__link { color: var(--hs-ink-2); }
.hs-states-index__link:hover { color: var(--hs-accent-strong); }
.hs-states-index__status {
	font-family: var(--hs-body);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	padding: 0.16rem 0.55rem;
}
/* On a dark canvas a tint chip reads better as translucent-over-paper than as a
 * mix toward the base, and the pending label needs to lighten, not darken. */
.hs-states-index__status--legal   { background: color-mix(in oklch, var(--wp--preset--color--status-legal) 20%, transparent); }
.hs-states-index__status--pending { background: color-mix(in oklch, var(--wp--preset--color--status-pending) 20%, transparent); color: var(--wp--preset--color--status-pending); }
.hs-states-index__status--partial { background: color-mix(in oklch, var(--wp--preset--color--status-partial) 20%, transparent); }
.hs-states-index__status--illegal { background: color-mix(in oklch, var(--wp--preset--color--status-illegal) 20%, transparent); }

/* Legal-status filter bar — pills */
.hs-states-filter__btn {
	border: 1px solid var(--hs-rule);
	border-radius: 999px;
	background: var(--hs-surface);
	font-family: var(--hs-body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--hs-ink-2);
}
.hs-states-filter__btn:hover { border-color: var(--hs-accent); color: var(--hs-ink); }
.hs-states-filter__input:checked + label {
	background: var(--hs-cta);
	border-color: transparent;
	color: var(--hs-cta-ink);
}

/* --- Operator list / tiles -------------------------------------------- */
.hs-operator-list__heading,
.hs-operator-table__heading,
.hs-mag-heading {
	font-family: var(--hs-display);
	font-weight: 700;
	letter-spacing: -0.03em;
}
.hs-operator-list__empty,
.hs-operator-table__empty,
.hs-mag-empty {
	background: var(--hs-surface);
	border: 1px dashed var(--hs-rule);
	border-left-width: 1px;
	border-radius: var(--radius-card);
	color: var(--hs-muted);
	padding: 1rem 1.15rem;
}

/* No lift here either. An operator tile has no photograph to ease forward, so
 * its hover is the border warming to the accent — a state change rather than a
 * movement, which is what the rest of the grid now does. */
.hs-op-tile {
	transition: border-color var(--dur-short) var(--hs-ease);
}
.hs-op-tile:hover {
	border-color: color-mix(in oklch, var(--hs-accent) 45%, var(--hs-rule));
}
.hs-op-tile__head { border-bottom: 1px solid var(--hs-rule); }
/* Operator logos are drawn for light backgrounds, so they get a plate at night.
 * Resolved through --hs-logo-plate rather than --hs-ink directly: the day palette
 * points that lever at transparent, because the card is already a light plate and
 * an ink plate there hides the dark-on-light marks these logos are built from.
 * The fallback keeps the plate for any child theme that ships no day palette. */
.hs-op-tile__logo,
.hs-operator-table__logo {
	background: var(--hs-logo-plate, var(--hs-ink));
	border-radius: 8px;
	padding: 0.3rem 0.45rem;
	box-sizing: border-box;
}
.hs-op-tile__name,
.hs-operator-table__name {
	font-family: var(--hs-display);
	font-weight: 700;
	letter-spacing: -0.03em;
}
.hs-op-tile__badge {
	background: color-mix(in oklch, var(--hs-accent) 20%, transparent);
	color: var(--hs-accent-strong);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	font-family: var(--hs-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hs-op-tile__eyebrow {
	background: color-mix(in oklch, var(--hs-accent) 18%, transparent);
	color: var(--hs-accent-strong);
	font-weight: 700;
}
.hs-op-tile__bonus {
	font-family: var(--hs-display);
	font-weight: 800;
	letter-spacing: -0.03em;
}
.hs-op-tile__ticks li::before {
	background: color-mix(in oklch, var(--wp--preset--color--status-legal) 22%, transparent);
}
.hs-op-tile__review { color: var(--hs-accent-strong); }

/* Filter-pages sub-nav */
.hs-operator-list__nav {
	background: var(--hs-surface);
	border: 1px solid var(--hs-rule);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--40);
	top: calc(var(--hs-nav-top) + var(--hs-nav-h) + 1rem);
}
.hs-operator-list__navtitle {
	font-family: var(--hs-body);
	letter-spacing: 0.1em;
	color: var(--hs-muted);
	margin-bottom: 0.5rem;
}
.hs-operator-list__nav a {
	color: var(--hs-ink-2);
	border-bottom: 1px solid var(--hs-rule);
}
.hs-operator-list__nav li:last-child a { border-bottom: 0; }
.hs-operator-list__nav a:hover { color: var(--hs-accent-strong); }

/* --- Operator table --------------------------------------------------- */
.hs-operator-table__list { border-top: 0; }
.hs-operator-table__row { border-bottom: 1px solid var(--hs-rule); }
.hs-operator-table__row:last-child { border-bottom: 0; }
/* The #1 row is the accent's one loud placement in this module. */
.hs-operator-table__row:first-child {
	border-left: 0;
	background: color-mix(in oklch, var(--hs-accent) 10%, transparent);
	border-radius: var(--radius-media);
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}
.hs-operator-table__rank {
	font-family: var(--hs-body);
	font-weight: 700;
	color: var(--hs-muted);
}
.hs-operator-table__row:first-child .hs-operator-table__rank { color: var(--hs-accent-strong); }
.hs-operator-table__terms { color: var(--hs-muted); }
.hs-operator-table--grid .hs-operator-table__row {
	background: var(--hs-surface);
	border: 1px solid var(--hs-rule);
}
.hs-operator-table--grid .hs-operator-table__row:first-child {
	border-color: color-mix(in oklch, var(--hs-accent) 50%, var(--hs-rule));
	background: color-mix(in oklch, var(--hs-accent) 12%, var(--hs-surface));
}
.hs-operator-table--grid .hs-operator-table__rank {
	font-family: var(--hs-body);
	letter-spacing: 0.08em;
}

/* --- Post Feed · magazine modules ------------------------------------- */
/* The parent's heading was a rule with an accent-underlined span; here the
 * section head is a plain tight-tracked line with the accent as a leading tick. */
.hs-mag-heading {
	border-bottom: 1px solid var(--hs-rule);
	padding-bottom: 0.55rem;
}
.hs-mag-heading__text {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.hs-mag-heading__text::before {
	content: "";
	width: 0.3rem;
	height: 1.05em;
	border-radius: 999px;
	background: var(--hs-accent);
	flex: none;
}

/* Category chip — a tinted pill in its own hue */
.hs-mag-card__cat {
	font-family: var(--hs-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.6rem;
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent)) 18%, transparent);
}
.hs-mag-card__cat:hover {
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent)) 30%, transparent);
}

/* Cards */
.hs-mag-card__title { font-family: var(--hs-body); font-weight: 700; letter-spacing: -0.02em; }
.hs-mag-card__title a { color: var(--hs-ink); }
.hs-mag-card__title a:hover { color: var(--hs-accent-strong); }
.hs-mag-card__excerpt { color: var(--hs-muted); }
.hs-mag-card__meta {
	font-family: var(--hs-body);
	font-size: 0.74rem;
	letter-spacing: 0;
	color: var(--hs-muted);
}
.hs-mag-card__author::after { color: var(--hs-rule); }
.hs-mag-card__media img { transition: opacity var(--dur-short) var(--hs-ease); }
.hs-mag-card:hover .hs-mag-card__media img { opacity: 0.88; }

.hs-mag-card--lead .hs-mag-card__title {
	font-family: var(--hs-display);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.06;
}

/* Compact list + list feeds */
.hs-mag-card--list { border-top: 1px solid var(--hs-rule); }
.hs-mag-card--feature { border-top: 1px solid var(--hs-rule); }
.hs-mag-card--feature .hs-mag-card__title { letter-spacing: -0.03em; }

/* Trending */
.hs-mag-trending__item { border-bottom: 1px solid var(--hs-rule); }
.hs-mag-trending__rank {
	font-family: var(--hs-display);
	font-weight: 700;
	color: var(--hs-accent-strong);
	font-variant-numeric: tabular-nums;
}
.hs-mag-trending__title { font-family: var(--hs-body); font-weight: 700; letter-spacing: -0.01em; }
.hs-mag-trending__title a { color: var(--hs-ink); }
.hs-mag-trending__title a:hover { color: var(--hs-accent-strong); }

/* Overlay tiles. The photography reads at full colour — no hue wash over it; the
 * scrim in blocks.css is what buys legibility, and the category signal is carried
 * by the chip alone. */
.hs-ocard__title a:hover { color: var(--hs-accent-strong); }
.hs-ocard__excerpt { color: var(--hs-on-band-muted); }
.hs-ocard .hs-meta { color: var(--hs-on-band-muted); }
.hs-ocard--lead .hs-ocard__inner { backdrop-filter: blur(10px); }
/* Inside the panel the chips sit on the panel, not on the photo — and that panel
 * is a scrim over the image, so the wash tracks --hs-on-band rather than the
 * page's ink. The two coincide at night; by day only this one is right. */
.hs-ocard--lead .hs-chip,
.hs-ocard--lead .hs-byline {
	background: color-mix(in oklch, var(--hs-on-band) 12%, transparent);
}

@media (max-width: 640px) {
	.hs-ocard--lead .hs-ocard__inner { backdrop-filter: none; }
}

/* Mosaic — overlaid text on imagery */
.hs-mag-tile { background: var(--hs-paper-2); }
.hs-mag-tile__link::before {
	background: linear-gradient(
		to top,
		color-mix(in oklch, var(--hs-band) 95%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 40%, transparent) 48%,
		transparent 78%
	);
}
/* On-image chip: a solid dark pill carrying the category colour as its label.
 * A filled colour chip here would need dark text at these lightnesses and
 * fights the photography. */
.hs-mag-tile__cat {
	background: color-mix(in oklch, var(--hs-band) 82%, transparent);
	color: var(--hs-c, var(--hs-accent-strong));
	backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 0.28rem 0.7rem;
	font-family: var(--hs-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.hs-mag-tile__title {
	font-family: var(--hs-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--hs-accent-ink);
	overflow-wrap: anywhere;
	min-width: 0;
}
.hs-mag-tile__meta { font-family: var(--hs-body); letter-spacing: 0; }

/* Operator Reviews archive grid */
.hs-operator-archive .wp-block-post-template.is-layout-grid { gap: 1.5rem; }