/* ==========================================================================
   Header (D-58): logo, utility bar, masthead, sticky nav with panels, mobile tab row, ticker strip,
   drawer and search dialog. Ported from redesign-sample/assets/css/site.css.
   Desktop (>= 1024px): utility 32 + masthead 64 + sticky nav 48 + strip 44 = 188px.
   Phones/tablets: logo bar 52 (sticky) + tab row 44 + strip 44 = 140px (96px when there is no breaking news:
   the strip then holds only the desktop-only trending pills and is not drawn).
   Colours through tokens only; type from --fs-*; transforms multiplied by --m.
   ========================================================================== */

/* Tokens owned by the shell (measured, see the harness report). --sticky-h is the height of the part of the
   header that stays on screen: the logo bar on phones, the navy bar from 1024px. */
:root {
	--bar-h: 52px;           /* phone and tablet logo bar */
	--logo-h: 36px;          /* lockup height in the bar and the drawer */
	--sticky-h: var(--bar-h);
	--strip-h: 44px;
}

@media (min-width: 1024px) {
	:root {
		--logo-h: 48px;
		--sticky-h: var(--nav-h);
	}
}

/* Logged in: the admin bar sits above the sticky nav. Set on the root (the class is on body) so html's
   scroll-padding-top (base.css) sees it too, and anchor targets land below the nav. */
:root:has(body.admin-bar) { --sticky-h: calc(var(--bar-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media (min-width: 1024px) {
	:root:has(body.admin-bar) { --sticky-h: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 32px)); }
}
/* WordPress un-fixes the admin bar at 600px and below: it scrolls away, so nothing sits above the sticky nav. */
@media (max-width: 600px) {
	:root:has(body.admin-bar) { --sticky-h: var(--bar-h); }
}

/* Opening a dialog hides the page scrollbar (base.css); keep its space so nothing shifts. */
html { scrollbar-gutter: stable; }

/* Logo ----------------------------------------------------------------------
   Two lockups in the markup; one is shown. Light surfaces get the regular lockup, dark ones the reversed
   (dark theme, both as an explicit choice and by OS preference, and always inside the navy footer). */
.logo,
.logo-mark {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
}

.logo::after { content: ""; position: absolute; inset: -4px; } /* 36px logo, 44px target */

.logo__img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--logo-h);
}

.logo__img--dark { display: none; }

:root[data-theme="dark"] .logo__img--light { display: none; }
:root[data-theme="dark"] .logo__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .logo__img--light { display: none; }
	:root:not([data-theme="light"]) .logo__img--dark { display: block; }
}

.site-footer .logo__img--light { display: none; }
.site-footer .logo__img--dark { display: block; }

.custom-logo { width: auto; height: var(--logo-h); }

/* Compact mark on a white tile: the plain mark is too dark against navy. */
.logo-mark {
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-lg);
	background: var(--white);
}

.logo-mark::after { content: ""; position: absolute; inset: -4px; }
.logo-mark img { width: 28px; height: 28px; max-width: none; }

/* Controls shared by the shell ------------------------------------------------ */
.icon-btn {
	position: relative;
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-lg);
	color: inherit;
	--icon-size: 22px;
	transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}

.icon-btn:active { transform: scale(calc(1 - 0.05 * var(--m))); }
@media (hover: hover) { .icon-btn:hover { background: color-mix(in srgb, currentcolor 10%, transparent); } }

.theme-toggle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--heading);
	--icon-size: 18px;
	transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}

.theme-toggle::after { content: ""; position: absolute; inset: -6px; }
.theme-toggle:active { transform: scale(calc(1 - 0.05 * var(--m))); }
@media (hover: hover) { .theme-toggle:hover { background: var(--tint); } }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Language switch "ने | EN" */
.lang-switch {
	position: relative;
	display: inline-flex;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	font: 700 var(--fs-7) / var(--lh-ui) var(--font-body);
}

.lang-switch > a,
.lang-switch__na,
.lang-switch__current {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 26px;
	padding: 0 var(--s-2);
	color: var(--heading);
	transition: background-color var(--dur-hover) ease;
}

.lang-switch > a::after,
.lang-switch__na::after { content: ""; position: absolute; inset: -9px -1px; } /* 26px visual, 44px target */

/* No overflow: hidden on the box (it would clip the note), so the ends carry the rounding. */
.lang-switch > :first-child { border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px); }
.lang-switch > :last-child { border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0; }

.lang-switch [aria-current="true"] { background: var(--fill-selected); color: var(--white); }
.lang-switch a[aria-current="true"]:focus-visible { outline-color: var(--white); outline-offset: -3px; }
.lang-switch a:not([aria-current="true"]):focus-visible { outline-offset: -3px; }
.lang-switch a:not([aria-current="true"]):active { background: var(--tint); }
@media (hover: hover) { .lang-switch a:not([aria-current="true"]):hover { background: var(--tint); } }

/* English pages must not download a 100 KB Devanagari font for two glyphs: use a system face. */
:root:lang(en) .lang-switch [lang="ne"] { font-family: "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif; }

/* The other language when this page has no translation: muted, with a note on hover/focus/tap. */
.lang-switch__na { color: var(--muted); cursor: help; }
.lang-switch__note {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: var(--z-menu);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--bg);
	font-weight: 400;
	white-space: nowrap;
	/* Hidden with opacity, not display:none, so screen readers still read it when the item has focus. */
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-hover) ease;
}
.lang-switch__na:focus .lang-switch__note { opacity: 1; }
@media (hover: hover) { .lang-switch__na:hover .lang-switch__note { opacity: 1; } }

/* Utility bar (desktop) ---------------------------------------------------------- */
.utility-bar {
	display: none;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-7);
}

.utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	height: 31px; /* + 1px border = 32px */
}

.utility-bar__start,
.utility-bar__links {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-width: 0;
}

.utility-bar__links { flex: none; }

/* The BS + AD dateline is a signature, not grey filler. */
.utility-bar__date { flex: none; color: var(--heading); font-weight: 700; white-space: nowrap; }
.utility-bar__date .sep { margin-inline: var(--s-1); color: var(--line-strong); font-weight: 400; }
.utility-bar__date .ad { font-family: var(--font-ui); font-weight: 400; }

.utility-link {
	position: relative;
	color: var(--heading);
	white-space: nowrap;
}

.utility-link::after { content: ""; position: absolute; inset: -12px -4px; } /* 31px bar, 44px target */
@media (hover: hover) { .utility-link:hover { text-decoration: underline; text-underline-offset: 0.25em; } }

/* Markets (ainn-markets): USD · gold · NEPSE · weather, separated by hairlines. */
.utility-markets {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding-left: var(--s-4);
	border-left: 1px solid var(--line);
	font-family: var(--font-ui);
}

.utility-markets .utility-link + .utility-link { padding-left: var(--s-3); border-left: 1px solid var(--line); }

/* Gold price: three gold bars instead of the word (the word stays as hidden text in the link). The bars are a
   graphic: the value beside them carries the meaning. */
.utility-gold { display: inline-block; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: -5px; }
.utility-gold__bar { fill: var(--gold); stroke: var(--gold-deep); }
.utility-gold__shine { stroke: var(--gold-shine); }

/* NEPSE: green when the index is up, red when it is down. The arrow stays, so colour is never the only signal. */
.utility-chg { font-weight: 700; }
.utility-chg.is-up { color: var(--success-text); }
.utility-chg.is-down { color: var(--live); }
@media (max-width: 1279px) {
	.utility-markets .utility-link:nth-child(n+3) { display: none; } /* Room for USD + gold only. */
}

/* Masthead (desktop) --------------------------------------------------------------- */
.masthead {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	height: 64px;
}

.masthead__brand,
.masthead__tools {
	display: flex;
	align-items: center;
	min-width: 0;
}

.masthead__brand { gap: var(--s-4); }
.masthead__tools { flex: none; gap: var(--s-3); }
.masthead__tools .icon-btn { color: var(--heading); }

.masthead__tagline {
	padding-left: var(--s-4);
	border-left: 1px solid var(--line-strong);
	color: var(--muted);
	font-size: var(--fs-7);
	white-space: nowrap;
}

/* Search field: a button that looks like a field and opens the search dialog. */
.search-field {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 320px;
	min-height: 44px;
	padding: 0 var(--s-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	color: var(--muted);
	font-size: var(--fs-6);
	text-align: left;
	transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-hover) ease;
}

.search-field:active { transform: scale(calc(1 - 0.03 * var(--m))); }
@media (hover: hover) { .search-field:hover { border-color: var(--heading); } }

.search-field kbd {
	margin-left: auto;
	padding: 0 6px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: 400 var(--fs-7) / 1.5 var(--font-ui);
}

/* Sticky nav ------------------------------------------------------------------------
   Phones: the 52px logo bar. Desktop: the 48px navy bar. The tab row is not sticky. */
.site-nav {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	height: var(--bar-h);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	--focus: unset; /* the light bar takes the page focus colour; tokens.css sets sky for navy */
}

.admin-bar .site-nav { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	.admin-bar .site-nav { top: 0; } /* the admin bar has scrolled away */
}

.site-nav-sentinel { height: 0; }

.nav-mobile-top {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	height: 100%;
	padding-inline: calc(var(--page-gutter) - 8px);
}

.nav-mobile-top__logo { justify-self: center; }
.nav-mobile-top .icon-btn { color: var(--heading); }

.nav-bar { display: none; }

/* Desktop nav bar */
@media (min-width: 1024px) {
	.site-nav {
		height: var(--nav-h);
		border-bottom: 0;
		background: var(--navy);
		color: var(--on-navy);
		--focus: var(--sky);
	}

	.nav-mobile-top { display: none; }
	.nav-bar { display: block; height: 100%; }
}

.nav-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	height: 100%;
}

.nav-bar :focus-visible { outline-offset: -3px; }
/* The white mark tile: an inset ring would be sky on white (1.8:1). Draw it outside, on the navy. */
.nav-bar .logo-mark:focus-visible { outline-offset: 2px; }

/* The compact mark and the actions ease in once the masthead has scrolled away (no layout jump). */
.nav-bar__logo {
	flex: none;
	max-width: 0;
	margin-right: 0;
	padding-block: 6px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-width 200ms var(--ease-out), margin-right 200ms var(--ease-out), padding-inline 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s 200ms;
}

.is-stuck .nav-bar__logo {
	max-width: 56px;
	margin-right: var(--s-2);
	padding-inline: 4px;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	margin-left: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms var(--ease-out), visibility 0s 200ms;
}

.is-stuck .nav-actions { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-bar .icon-btn { color: var(--white); }

.primary-menu,
.primary-menu .sub-menu,
.more-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	min-width: 0;
}

.primary-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.primary-menu > li > a,
.primary-menu > li > .nav-parent,
.nav-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 var(--s-3);
	color: var(--on-navy);
	font: 700 var(--fs-6) / var(--lh-ui) var(--font-body);
	white-space: nowrap;
	--icon-size: 16px;
	transition: transform var(--dur-press) var(--ease-out), background-color 120ms ease;
}

.primary-menu > li > .nav-parent:active,
.nav-more__toggle:active { transform: scale(calc(1 - 0.03 * var(--m))); }

@media (hover: hover) {
	.primary-menu > li > a:hover,
	.primary-menu > li > .nav-parent:hover,
	.nav-more__toggle:hover { background: color-mix(in srgb, var(--white) 10%, transparent); }
}

.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > .nav-parent,
.primary-menu > .current-menu-parent > a { box-shadow: inset 0 -3px 0 var(--sky); }

.primary-menu > .menu-item-home > a { justify-content: center; min-width: 44px; padding-inline: var(--s-2); }

.nav-toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	margin-left: -8px;
	color: var(--on-navy-muted);
	--icon-size: 16px;
}

.primary-menu .icon,
.nav-more__toggle .icon { transition: transform var(--dur-hover) var(--ease-out); }

.nav-toggle[aria-expanded="true"] .icon,
.nav-parent[aria-expanded="true"] .icon,
.nav-more__toggle[aria-expanded="true"] .icon { transform: rotate(calc(180deg * var(--m))); }

/* Panels: Provinces and More. Opacity + a 6px drop; the exit is faster than the enter. Keyboard and
   pointer open the same way (aria-expanded on the button before the panel). */
.primary-menu .sub-menu,
.nav-more__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-menu);
	min-width: 220px;
	padding: var(--s-2);
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--bg);
	color: var(--text);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(-6px * var(--m)));
	transform-origin: top left;
	transition: opacity 110ms ease-out, transform 110ms ease-out, visibility 0s 110ms;
	--focus: var(--blue);
}

[aria-expanded="true"] + .sub-menu,
[aria-expanded="true"] + .nav-more__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out), visibility 0s;
}

.primary-menu .sub-menu a,
.more-menu a {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 var(--s-3);
	border-radius: var(--radius);
	color: var(--heading);
	font-weight: 400;
}

@media (hover: hover) {
	.primary-menu .sub-menu a:hover,
	.more-menu a:hover { background: var(--tint); }
}

/* More: right-aligned (it is the last item), two labelled groups side by side. */
.nav-more { position: relative; display: flex; align-items: stretch; align-self: stretch; }

.nav-more__panel {
	left: auto;
	right: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--s-4);
	min-width: 440px;
	transform-origin: top right;
}

.nav-more__panel:has(> .more-group:only-child) { grid-template-columns: minmax(0, 1fr); min-width: 220px; }

.more-group__title {
	padding: var(--s-2) var(--s-3) var(--s-1);
	color: var(--muted);
	font-size: var(--fs-7);
	font-weight: 700;
}

/* 1024 to 1279: twelve items plus More must fit in the container, so the padding tightens. English labels are
   wider (~250px longer, D-55): the item padding is tight at every width, and below 1280 there is no room for the
   compact mark next to twelve of them and the items step down to 14px (measured to fit from 1024). */
:lang(en) .nav-bar .primary-menu > li > a,
:lang(en) .nav-bar .primary-menu > li > .nav-parent,
:lang(en) .nav-bar .nav-more__toggle { padding-inline: var(--s-2); }

@media (max-width: 1279px) {
	.primary-menu > li > a,
	.primary-menu > li > .nav-parent,
	.nav-more__toggle { padding-inline: var(--s-2); }

	:lang(en) .nav-bar__logo { display: none; }

	:lang(en) .nav-bar .primary-menu > li > a,
	:lang(en) .nav-bar .primary-menu > li > .nav-parent,
	:lang(en) .nav-bar .nav-more__toggle { font-size: var(--fs-7); }
}

/* Category tab row (phones and tablets): navy, scrolls sideways, fades at the right edge. */
.tabs-row {
	background: var(--navy);
	--focus: var(--sky);
}

.tabs-row nav {
	-webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent);
}

.mobile-tabs {
	display: flex;
	margin: 0;
	padding: 0 var(--s-6) 0 var(--page-gutter);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 40px;
}

.mobile-tabs::-webkit-scrollbar { display: none; }

.mobile-tabs a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s-4);
	color: var(--on-navy);
	font-weight: 700;
	white-space: nowrap;
}

.mobile-tabs a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sky); }
.mobile-tabs a:focus-visible { outline-offset: -4px; }

/* header.php's <header> holds the desktop bars only: below 1024px it is empty, so it must not be a second banner. */
.site-header { display: none; }

@media (min-width: 1024px) {
	.site-header { display: block; }
	.utility-bar { display: block; }
	.masthead { display: flex; }
	.tabs-row { display: none; }
}

/* Strip: breaking ticker + trending topics (44px) ------------------------------------------- */
.strip {
	display: flex;
	align-items: stretch;
	gap: var(--s-5);
	min-height: var(--strip-h);
	border-bottom: 1px solid var(--line);
}

/* Trending shows from 1024px up only. With no breaking news the strip holds nothing below that: no blank band. */
.strip--trending-only { display: none; }
@media (min-width: 1024px) { .strip--trending-only { display: flex; } }

.ticker {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--s-3);
	min-width: 0;
}

.ticker__label {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--s-2);
	padding: 2px var(--s-3);
	border-radius: var(--radius);
	background: var(--live-fill);
	color: var(--white);
	font-size: var(--fs-7);
	font-weight: 700;
	line-height: var(--lh-ui);
}

.ticker__label .live-dot {
	background: currentcolor;
	box-shadow: none;
	animation: dot-fade 1.6s ease-in-out infinite;
}

@keyframes dot-fade { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ticker__label .live-dot { animation: none; } }

/* Viewport wraps the scrolling track and clips overflow */
.ticker__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	height: var(--strip-h);
	overflow: hidden;
	display: flex;
	align-items: center;
	-webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 20px, var(--ink) calc(100% - 20px), transparent);
	mask-image: linear-gradient(to right, transparent, var(--ink) 20px, var(--ink) calc(100% - 20px), transparent);
}

/* Default / no-JS / reduced motion fallback */
.ticker:not(.is-scrolling) .ticker__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, var(--ink) calc(100% - 24px), transparent);
}
.ticker:not(.is-scrolling) .ticker__viewport::-webkit-scrollbar { display: none; }

.ticker__items {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	will-change: transform;
}

/* Continuous marquee ribbon: scrolls right-to-left */
.ticker.is-scrolling .ticker__items {
	animation: ticker-marquee var(--ticker-duration, 30s) linear infinite;
}

@keyframes ticker-marquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Stop scrolling on hover */
@media (hover: hover) {
	.ticker.is-scrolling:hover .ticker__items {
		animation-play-state: paused;
	}
}

/* Pause when keyboard focus is inside */
.ticker.is-scrolling:focus-within .ticker__items {
	animation-play-state: paused;
}

/* Pause when user clicks pause button */
.ticker.is-paused .ticker__items {
	animation-play-state: paused !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.ticker.is-scrolling .ticker__items {
		animation: none;
	}
	.ticker__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.ticker__item {
	display: inline-flex;
	align-items: center;
	flex: none;
	font-size: var(--fs-6);
	font-weight: 700;
	line-height: var(--strip-h);
}

/* Separator dot after each headline */
.ticker__item::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--live-fill);
	margin: 0 var(--s-5);
	opacity: 0.7;
	flex-shrink: 0;
}

/* Block link that fills the height for easy clicking */
.ticker__item a {
	display: inline-block;
	white-space: nowrap;
	color: var(--heading);
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms ease;
}
.ticker__item a:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
	.ticker__item a:hover {
		color: var(--primary);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

.ticker__toggle { color: var(--muted); --icon-size: 16px; flex: none; }
.ticker__toggle:focus-visible { outline-offset: -2px; }
.ticker__toggle .ticker__play,
.ticker__toggle[aria-pressed="true"] .ticker__pause { display: none; }
.ticker__toggle[aria-pressed="true"] .ticker__play { display: block; }

.trending {
	display: none;
	flex: 0 1 auto;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
	max-width: 58%;
}

@media (min-width: 1024px) { .trending { display: flex; } }

.trending__label {
	flex: none;
	color: var(--muted);
	font-size: var(--fs-7);
	font-weight: 700;
	white-space: nowrap;
}

.strip .trending__list {
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 4px; /* room for the pill hit area and focus ring inside the scroller */
	overflow-x: auto;
	scrollbar-width: none;
}

.strip .trending__list::-webkit-scrollbar { display: none; }

/* Dialogs: drawer + search ----------------------------------------------------------------
   Native <dialog>. Enter is slower than exit; the backdrop fades. @starting-style + allow-discrete let the
   closed-to-open change animate without a class. Reduced motion: --m zeroes the movement, base.css the durations. */
dialog {
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: var(--bg);
	color: var(--text);
	overscroll-behavior: contain;
}

dialog::backdrop {
	background: var(--scrim);
	opacity: 0;
	transition: opacity 160ms ease-out, display 160ms allow-discrete, overlay 160ms allow-discrete;
}

dialog[open]::backdrop {
	opacity: 1;
	transition-duration: var(--dur-drawer);
}

@starting-style {
	dialog[open]::backdrop { opacity: 0; }
}

.drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(360px, 88vw);
	height: 100dvh;
	margin: 0;
	overflow-y: auto;
	opacity: 0;
	transform: translateX(calc(-100% * var(--m)));
	transition: transform 180ms var(--ease-out), opacity 180ms ease-out, display 180ms allow-discrete, overlay 180ms allow-discrete;
}

.drawer:focus-visible { outline: none; } /* a pointer opens it with focus on the panel itself (site.js); nothing to ring */

.drawer[open] {
	opacity: 1;
	transform: none;
	transition-duration: var(--dur-drawer);
	transition-timing-function: var(--ease-drawer);
}

@starting-style {
	.drawer[open] { opacity: 0; transform: translateX(calc(-100% * var(--m))); }
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
	border-bottom: 1px solid var(--line);
	--logo-h: 36px;
}

.drawer__head .icon-btn { color: var(--heading); }

.drawer__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: var(--bg-soft);
	color: var(--muted);
	font-size: var(--fs-7);
}

.drawer__date { color: var(--heading); font-weight: 700; }
.drawer__date .sep,
.drawer__date .ad { display: none; } /* Phones: one calendar; the reader's own comes first. */

.drawer__switches { display: flex; align-items: center; gap: var(--s-3); }
.drawer .theme-toggle { width: 36px; height: 36px; }

.drawer__body { padding-bottom: var(--s-6); }

.drawer .primary-menu,
.drawer .more-menu { display: block; }

.drawer .primary-menu > li {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--line);
}

.drawer .primary-menu > .menu-item-home { display: none; } /* The logo above is the home link. */

.drawer .primary-menu > li > a,
.drawer .primary-menu > li > .nav-parent {
	flex: 1;
	min-height: 48px;
	padding: 0 var(--s-4);
	color: var(--heading);
	font: 700 var(--fs-6) / var(--lh-ui) var(--font-body);
	text-align: left;
	box-shadow: none;
}

.drawer .primary-menu > li > .nav-parent { justify-content: space-between; }
.drawer .nav-toggle { width: 48px; height: 48px; margin: 0; color: var(--muted); }

.drawer .primary-menu .sub-menu {
	position: static;
	display: none;
	flex-basis: 100%;
	min-width: 0;
	padding: 0 0 var(--s-2) var(--s-4);
	border: 0;
	border-radius: 0;
	background: var(--bg-soft);
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	--focus: unset;
}

.drawer [aria-expanded="true"] + .sub-menu { display: block; }

.drawer .primary-menu .sub-menu a,
.drawer .more-menu a { min-height: 48px; height: auto; padding-inline: var(--s-4); font-weight: 400; }

/* These rows run the full width of the drawer, whose scroll box would clip an outset ring on both sides. */
.drawer .primary-menu :focus-visible,
.drawer .more-menu :focus-visible { outline-offset: -3px; }

.drawer__section-title,
.drawer .more-group__title {
	margin: 0;
	padding: var(--s-4) var(--s-4) var(--s-1);
	color: var(--muted);
	font-size: var(--fs-7);
	font-weight: 700;
}

.drawer .more-group__title { padding-top: var(--s-2); }

.drawer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: var(--s-4);
}

/* Search dialog: top-anchored, 640px, the field and its close button on one row. */
.search-dialog {
	position: fixed;
	inset: var(--s-4) auto auto 50%;
	width: min(640px, calc(100% - 2 * var(--page-gutter)));
	max-height: calc(100dvh - 2 * var(--s-4));
	margin: 0;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	transform: translate(-50%, calc(-8px * var(--m))) scale(calc(1 - 0.02 * var(--m)));
	transform-origin: top center;
	transition: opacity 120ms ease-out, transform 120ms ease-out, display 120ms allow-discrete, overlay 120ms allow-discrete;
}

.search-dialog[open] {
	opacity: 1;
	transform: translate(-50%, 0);
	transition-duration: var(--dur-pop);
	transition-timing-function: var(--ease-out);
}

@starting-style {
	.search-dialog[open] { opacity: 0; transform: translate(-50%, calc(-8px * var(--m))) scale(calc(1 - 0.02 * var(--m))); }
}

/* "/" opens it instantly: a keyboard shortcut should not animate. */
.search-dialog.is-instant,
.search-dialog.is-instant::backdrop { transition-duration: 0s; }

.search-dialog__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-3) var(--s-4) var(--s-4);
}

.search-dialog__inner > * { grid-column: 1 / -1; }
.search-dialog__inner > .search-form { grid-column: 1; grid-row: 1; }
.search-dialog__inner > .search-dialog__close { grid-column: 2; grid-row: 1; color: var(--heading); }

.search-form {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0 0 0 var(--s-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-lg);
	--icon-size: 22px;
}

.search-form:focus-within { border-color: var(--blue); }
.search-form .icon { color: var(--muted); }

/* width: 0 keeps the input's intrinsic width (size=20, ~184px) out of the form's min-content, which a grid
   parent (archive head, empty search) would otherwise size its column by: overflow below ~340px. */
.search-form input[type="search"] {
	flex: 1;
	width: 0;
	min-width: 0;
	height: 48px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: var(--fs-6);
	outline: none;
}

.search-form .btn { margin: 3px; }

/* One red call to action per view: inside the dialog the submit is navy. */
.search-dialog .btn--primary { background: var(--fill-selected); }
@media (hover: hover) { .search-dialog .btn--primary:hover { background: var(--navy-2); } }
:root[data-theme="dark"] .search-dialog .btn--primary { box-shadow: inset 0 0 0 1px var(--focus); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .search-dialog .btn--primary { box-shadow: inset 0 0 0 1px var(--focus); }
}

.search-dialog__body { padding: var(--s-1) var(--s-1) 0 0; }

.search-dialog h2 {
	margin: var(--s-4) 0 var(--s-2);
	color: var(--muted);
	font-size: var(--fs-7);
}

.recent-searches {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent-searches a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink);
}

@media (hover: hover) { .recent-searches a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }

/* No JavaScript (the pre-paint script adds .js): controls only script can operate are hidden instead of left dead
   (the phone bar keeps its grid, so the logo stays centred), and Provinces opens on hover and focus. */
html:not(.js) :is(.search-field, .theme-toggle, .nav-more, .nav-actions [data-dialog-open]) { display: none; }
html:not(.js) .nav-mobile-top .icon-btn { visibility: hidden; }
html:not(.js) .primary-menu > li:is(:hover, :focus-within) > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Phones ----------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.search-form { padding-left: var(--s-2); }
	.search-form .btn { padding-inline: var(--s-3); }
	.search-dialog__inner { padding: var(--s-2) var(--s-2) var(--s-4) var(--s-3); }
}

/* Forced colors drop the box-shadow that marks the current section in the nav and the phone tab row. */
@media (forced-colors: active) {
	.primary-menu > .current-menu-item > a,
	.primary-menu > .current-menu-ancestor > .nav-parent,
	.primary-menu > .current-menu-parent > a,
	.mobile-tabs a[aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 0.35em;
	}
}

@media print {
	.strip,
	.tabs-row,
	.utility-bar,
	.masthead,
	.cookie-notice,
	.toast,
	dialog { display: none !important; }
}