/* ============================================================
 * RocketX Markets — the "flight deck": market news + economic
 * calendar styled as a rocket-cockpit instrument cluster.
 * Dark-canvas section; enqueued at render time by inc/markets.php.
 *
 * Cockpit vocabulary:
 *   .rx-cockpit-panel   glass instrument panel w/ HUD corner brackets
 *   .rx-cockpit__led    system status light
 *   .rx-tminus__*       launch-countdown module
 *   .rx-radar__*        24 h event radar
 *   .rx-mono            telemetry digits (system mono stack — no webfont)
 * ============================================================ */

.rx-markets {
	--rx-hud-green: #40d98c;
	--rx-hud-amber: #e8b93e;
	--rx-hud-line: rgba(240, 133, 102, 0.22);   /* faint orange stroke */
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--rx-s-5) var(--rx-s-3) var(--rx-s-6);
}

.rx-mono {
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* ---- Instrument panel chrome ---- */

.rx-cockpit-panel {
	position: relative;
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-r-md);
	background:
		linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
		/* faint plotting grid */
		repeating-linear-gradient(0deg,   transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px),
		repeating-linear-gradient(90deg,  transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px),
		var(--rx-surface-dark);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: var(--rx-s-3);
	padding-top: calc(var(--rx-s-3) + 14px);
}

/* HUD corner brackets — top-left and bottom-right */
.rx-cockpit-panel::before,
.rx-cockpit-panel::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.rx-cockpit-panel::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--rx-orange);
	border-left: 2px solid var(--rx-orange);
	border-top-left-radius: var(--rx-r-md);
}

.rx-cockpit-panel::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid var(--rx-hud-line);
	border-right: 2px solid var(--rx-hud-line);
	border-bottom-right-radius: var(--rx-r-md);
}

.rx-cockpit-panel__tag {
	position: absolute;
	top: 0;
	left: var(--rx-s-3);
	transform: translateY(-50%);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rx-orange-300);
	background: var(--rx-navy);
	border: 1px solid var(--rx-hud-line);
	border-radius: var(--rx-r-pill);
	padding: 0.35em 1em;
	white-space: nowrap;
	max-width: calc(100% - 2 * var(--rx-s-3));
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Masthead ---- */

.rx-cockpit__mast {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rx-s-3);
	flex-wrap: wrap;
}

.rx-markets__eyebrow {
	margin: 0 0 var(--rx-s-1);
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rx-orange-300);
}

.rx-markets__headline {
	margin: 0;
	font-size: var(--rx-fs-2xl);
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
}

.rx-markets__subhead {
	margin: var(--rx-s-2) 0 0;
	max-width: 56ch;
	font-size: var(--rx-fs-md);
	color: rgba(255, 255, 255, 0.72);
}

/* Systems board — feed LEDs + UTC clock */

.rx-cockpit__systems {
	display: flex;
	align-items: center;
	justify-content: space-between;   /* fill the row edge-to-edge */
	width: 100%;
	gap: var(--rx-s-2);
	padding: var(--rx-s-1) var(--rx-s-2);
	border-radius: var(--rx-r-md);
	flex-wrap: wrap;
	row-gap: 4px;
}

.rx-cockpit__sys {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--rx-fs-xs);
	white-space: nowrap;
}

.rx-cockpit__sys-name {
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.rx-cockpit__sys-src { color: rgba(255, 255, 255, 0.58); }

.rx-cockpit__sys--clock {
	color: var(--rx-hud-green);
}

.rx-cockpit__sys--clock .rx-cockpit__sys-name { color: rgba(255, 255, 255, 0.45); }

.rx-cockpit__led {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rx-hud-green);
	box-shadow: 0 0 8px rgba(64, 217, 140, 0.8);
}

.rx-cockpit__sys.is-down .rx-cockpit__led {
	background: var(--rx-orange);
	box-shadow: 0 0 8px rgba(220, 79, 44, 0.8);
}

/* ---- Row: T-minus + radar ---- */

.rx-cockpit__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--rx-s-3);
	margin-top: var(--rx-s-4);
	align-items: stretch;
}

/* T-minus launch countdown */

.rx-cockpit-panel--tminus {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 260px;
	/* no overflow:hidden — it would clip the straddling __tag label */
}

/* soft engine-glow floor */
.rx-cockpit-panel--tminus {
	background-image:
		radial-gradient(ellipse 70% 45% at 50% 108%, rgba(220, 79, 44, 0.22), transparent 70%),
		repeating-linear-gradient(0deg,  transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px),
		repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px);
}

.rx-tminus__event {
	margin: 0 0 var(--rx-s-1);
	font-size: var(--rx-fs-md);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

.rx-tminus__event b { color: var(--rx-orange-300); font-weight: 700; }

.rx-tminus__clock {
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 24px rgba(220, 79, 44, 0.45);
}

.rx-cockpit-panel--tminus.is-imminent .rx-tminus__clock {
	color: var(--rx-orange-300);
	text-shadow: 0 0 32px rgba(220, 79, 44, 0.75);
}

.rx-cockpit-panel--tminus.is-standby .rx-tminus__clock {
	color: rgba(255, 255, 255, 0.3);
	text-shadow: none;
}

/* Weekend close: no qualifying release, but the FX market reopens Sunday —
   the clock counts down to the open, so keep it alive with a calm cyan tint
   (distinct from the imminent-orange). Placed after the is-standby rule so it
   wins on equal specificity when both classes are set. */
.rx-cockpit-panel--tminus.is-closed .rx-tminus__clock {
	color: rgba(125, 211, 252, 0.85);
	text-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

/* All-clear chip — only shown while in standby, so the panel never reads bare */
.rx-tminus__standby {
	display: none;
	align-items: center;
	gap: 0.55em;
	margin-top: var(--rx-s-2);
	padding: 0.32em 0.95em;
	font-size: var(--rx-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
}

.rx-tminus__standby::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}

.rx-cockpit-panel--tminus.is-standby .rx-tminus__standby { display: inline-flex; }

/* Weekend-close chip reads as a paused market rather than "all clear" */
.rx-cockpit-panel--tminus.is-closed .rx-tminus__standby::before {
	background: #7dd3fc;
	box-shadow: 0 0 8px rgba(125, 211, 252, 0.8);
}

/* News-impact filter — compact segmented HUD control below the countdown.
   `button.`-prefixed + !important background to beat the Elementor kit's
   global orange <button> fill (same fix as button.rx-markets-tab above). */
.rx-tminus__label {
	margin: var(--rx-s-1) 0 0;
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* Event radar */

.rx-cockpit-panel--radar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rx-s-1);
}

.rx-radar {
	position: relative;
	width: min(220px, 100%);
	aspect-ratio: 1;
}

.rx-radar__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rx-radar__ring,
.rx-radar__axis {
	fill: none;
	stroke: rgba(255, 255, 255, 0.1);
	stroke-width: 1;
}

.rx-radar__blip { stroke: none; }
.rx-radar__blip--high   { fill: var(--rx-orange);   filter: drop-shadow(0 0 4px rgba(220, 79, 44, 0.9)); }
.rx-radar__blip--medium { fill: var(--rx-hud-amber); }
.rx-radar__blip--low    { fill: rgba(255, 255, 255, 0.45); }

.rx-radar__sweep {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(220, 79, 44, 0.28), transparent 70deg, transparent 360deg);
	-webkit-mask-image: radial-gradient(circle, black 98%, transparent 100%);
	mask-image: radial-gradient(circle, black 98%, transparent 100%);
	animation: rx-radar-sweep 6s linear infinite;
	pointer-events: none;
}

/* Anti-clockwise, deliberately: blips are plotted at an angle proportional to
   hours-ahead, so as an event approaches its angle shrinks and it spirals in
   anti-clockwise toward 12 o'clock. The sweep travels WITH that drift rather
   than against it. It also puts the bright edge of the conic gradient in front
   with the faded tail trailing behind — the classic phosphor-decay look. */
@keyframes rx-radar-sweep {
	to { transform: rotate(-360deg); }
}

.rx-radar__legend {
	display: flex;
	gap: var(--rx-s-2);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.5);
}

.rx-radar__legend span { display: flex; align-items: center; gap: 0.45em; }

.rx-radar__key {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}

.rx-radar__key--high   { background: var(--rx-orange); }
.rx-radar__key--medium { background: var(--rx-hud-amber); }
.rx-radar__key--low    { background: rgba(255, 255, 255, 0.45); }

/* ---- Status / filter bar ---- */

.rx-markets__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rx-s-2);
	flex-wrap: wrap;
	margin-top: var(--rx-s-3);
	padding: var(--rx-s-1) var(--rx-s-2);
	border-radius: var(--rx-r-pill);
	border: 1px solid var(--rx-line);
}

.rx-markets__status {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--rx-fs-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	padding-left: var(--rx-s-1);
}

.rx-markets__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rx-orange);
	box-shadow: 0 0 0 0 rgba(220, 79, 44, 0.6);
	animation: rx-markets-pulse 2.2s var(--rx-ease-in-out) infinite;
}

@keyframes rx-markets-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(220, 79, 44, 0.55); }
	70%  { box-shadow: 0 0 0 9px rgba(220, 79, 44, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 79, 44, 0); }
}

/* Weekend / holiday close — the badge mirrors the shared market-hours check:
   amber, static (no live pulse), with a "Weekend" / "Markets closed" label. */
.rx-markets__status.is-closed .rx-markets__dot {
	background: var(--rx-hud-amber);
	box-shadow: none;
	animation: none;
}

.rx-markets__status.is-closed .rx-markets__state { color: var(--rx-hud-amber); }

.rx-markets__updated {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
}

.rx-markets__tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rx-markets__tabs::-webkit-scrollbar { display: none; }

/* `button.`-prefixed + !important backgrounds: the Elementor kit paints
   global <button> rules (orange fill) that otherwise win — same fix as
   button.rx-legal__tab in legal.css. */
button.rx-markets-tab {
	appearance: none;
	border: 1px solid transparent;
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.65);
	font: 600 var(--rx-fs-sm) / 1 inherit;
	font-family: inherit;
	padding: 0.55em 1em;
	border-radius: var(--rx-r-pill);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--rx-dur-fast) var(--rx-ease-out),
	            background-color var(--rx-dur-fast) var(--rx-ease-out),
	            border-color var(--rx-dur-fast) var(--rx-ease-out);
}

button.rx-markets-tab:hover { color: #fff; }

button.rx-markets-tab.is-active {
	color: #fff;
	background-color: rgba(220, 79, 44, 0.18) !important;
	border-color: rgba(220, 79, 44, 0.4);
}

/* ---- Layout grid ---- */

.rx-markets__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: var(--rx-s-3);
	margin-top: var(--rx-s-3);
	align-items: start;
}

/* ---- Comms — news feed ---- */

.rx-markets__news {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rx-markets-card {
	padding: var(--rx-s-2) 0;
	border-bottom: 1px solid var(--rx-line);
	transition: background-color var(--rx-dur-fast) var(--rx-ease-out);
}

.rx-markets-card:last-child { border-bottom: 0; }

.rx-markets-card:hover { background: rgba(255, 255, 255, 0.025); }

.rx-markets-card.is-hidden { display: none; }

.rx-markets-card__frame {
	position: relative;
	margin: 0 0 var(--rx-s-2);
	border: 1px solid var(--rx-hud-line);
	border-radius: var(--rx-r-sm);
	overflow: hidden;
}

/* bracket accents on the featured visual */
.rx-markets-card__frame::before,
.rx-markets-card__frame::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 1;
}

.rx-markets-card__frame::before { top: 0; left: 0; border-top: 2px solid var(--rx-orange); border-left: 2px solid var(--rx-orange); }
.rx-markets-card__frame::after  { bottom: 0; right: 0; border-bottom: 2px solid var(--rx-orange); border-right: 2px solid var(--rx-orange); }

.rx-markets-card__img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	filter: saturate(0.85);
}

.rx-markets-card__head {
	display: flex;
	align-items: center;
	gap: var(--rx-s-1);
	flex-wrap: wrap;
	font-size: var(--rx-fs-xs);
	margin-bottom: 6px;
}

.rx-markets-card__head > time { color: var(--rx-hud-green); }

.rx-markets-card__src {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rx-markets-card__src::before { content: '◦ '; color: rgba(255, 255, 255, 0.25); }

.rx-markets-card__tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-left: auto;
}

.rx-markets-tag {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--rx-orange-300);
	background: rgba(220, 79, 44, 0.14);
	border: 1px solid rgba(220, 79, 44, 0.28);
	padding: 0.2em 0.65em;
	border-radius: var(--rx-r-pill);
}

.rx-markets-card__title {
	margin: 0;
	font-size: var(--rx-fs-base);
	font-weight: 700;
	line-height: 1.35;
}

.rx-markets-card--featured .rx-markets-card__title { font-size: var(--rx-fs-lg); }

/* Headline opens the on-site reader — a button, styled like a link
   (`button.` + !important against the Elementor kit's global button fill). */
button.rx-markets-card__open {
	appearance: none;
	border: 0;
	background-color: transparent !important;
	padding: 0;
	margin: 0;
	font: inherit;
	font-family: inherit;
	text-align: left;
	color: #fff;
	cursor: pointer;
	/* buttons don't wrap under the kit's reset — long headlines must */
	display: block;
	width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	transition: color var(--rx-dur-fast) var(--rx-ease-out);
}

button.rx-markets-card__open:hover,
button.rx-markets-card__open:focus-visible { color: var(--rx-orange-300); }

.rx-markets-card__excerpt {
	margin: 6px 0 0;
	font-size: var(--rx-fs-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

/* ---- Mission schedule — calendar ---- */

.rx-markets__cal {
	position: sticky;
	top: calc(var(--rx-s-6) + 24px);   /* clears the fixed nav */
	/* scroll lives on __days below — overflow on the panel itself would
	   clip the straddling __tag label */
}

/* Panel header: tag on the left, the High / +Medium impact toggle on the right. */
/* Impact toggle — lives in the launch-window panel, under the T-minus clock.
   One control for the countdown, the radar, the schedule list and the .ics. */
.rx-tminus__filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7em;
	margin-top: var(--rx-s-4);
}

.rx-tminus__filter-label {
	padding-left: 0.28em;                 /* optical: offset trailing tracking */
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.36);
}

/* Scroll frame: relative host for the ▲/▼ cues that overlay the capped list. */
.rx-markets-cal__scroll { position: relative; }

.rx-markets-cal__days {
	max-height: calc(100vh - var(--rx-s-8) - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Rows/days hidden by the High-only impact filter. */
.rx-markets-ev.is-impact-hidden,
.rx-markets-cal__day.is-impact-hidden { display: none; }

/* Scroll cues — surface only when there's more schedule in that direction.
   The !important resets neutralise Elementor's global <button> kit styling
   (background, padding, min-height, letter-spacing) that would otherwise bleed
   in — same defence the impact toggle uses. */
.rx-markets-cal__cue {
	position: absolute;
	right: 6px;                          /* tucked to the sidebar edge, clear of the text */
	z-index: 2;
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1;
	cursor: pointer;
	color: var(--rx-orange-300) !important;
	background-color: rgba(10, 12, 20, 0.82) !important;
	background-image: none !important;
	border: 1px solid rgba(220, 79, 44, 0.4) !important;
	border-radius: 4px !important;              /* square with a lightly softened corner */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
	transition: color var(--rx-dur-fast) var(--rx-ease-out),
	            background-color var(--rx-dur-fast) var(--rx-ease-out),
	            border-color var(--rx-dur-fast) var(--rx-ease-out);
}

.rx-markets-cal__cue:hover {
	color: #fff !important;
	background-color: rgba(220, 79, 44, 0.28) !important;
	border-color: rgba(220, 79, 44, 0.7) !important;
}

.rx-markets-cal__cue:focus-visible {
	outline: 2px solid var(--rx-orange-300);
	outline-offset: 2px;
}

.rx-markets-cal__cue--up { top: -6px; }
.rx-markets-cal__cue--down { bottom: -6px; }
.rx-markets-cal__cue[hidden] { display: none; }

/* Impact toggle — a single on/off switch (High only ⇄ High + Medium) that
   drives the calendar list, the radar, the countdown AND the .ics export.
   Built on a bare <button>, so it carries the same Elementor-reset guards. */
.rx-toggle {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: inherit;
}

.rx-toggle__track {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	border-radius: var(--rx-r-pill);
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: background-color var(--rx-dur-fast) var(--rx-ease-out),
	            border-color var(--rx-dur-fast) var(--rx-ease-out);
}

.rx-toggle__knob {
	position: absolute;
	top: 50%;
	left: 3px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	transition: transform var(--rx-dur-fast) var(--rx-ease-out),
	            background-color var(--rx-dur-fast) var(--rx-ease-out);
}

.rx-toggle.is-on { color: rgba(255, 255, 255, 0.9); }

.rx-toggle.is-on .rx-toggle__track {
	background: rgba(220, 79, 44, 0.28);
	border-color: rgba(220, 79, 44, 0.6);
}

.rx-toggle.is-on .rx-toggle__knob {
	transform: translateY(-50%) translateX(18px);
	background: var(--rx-orange-300);
}

.rx-toggle__text {
	font-size: var(--rx-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
}

.rx-toggle:focus-visible {
	outline: 2px solid var(--rx-orange-300);
	outline-offset: 3px;
	border-radius: var(--rx-r-md);
}

.rx-markets-cal__daylabel {
	margin: var(--rx-s-2) 0 var(--rx-s-1);
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rx-orange-300);
}

.rx-markets-cal__day:first-child .rx-markets-cal__daylabel { margin-top: 0; }

.rx-markets-cal__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rx-markets-ev {
	display: grid;
	grid-template-columns: auto auto auto minmax(0, 1fr);
	align-items: baseline;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--rx-line);
}

.rx-markets-ev:last-child { border-bottom: 0; }

.rx-markets-ev.is-past { opacity: 0.45; }

.rx-markets-ev__time {
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
	font-size: var(--rx-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--rx-hud-green);
}

.rx-markets-ev.is-past .rx-markets-ev__time { color: rgba(255, 255, 255, 0.55); }

.rx-markets-ev__cur {
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
}

.rx-markets-ev__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	align-self: center;
	background: var(--rx-mute);
}

.rx-markets-ev[data-impact='high']   .rx-markets-ev__dot { background: var(--rx-orange); box-shadow: 0 0 10px rgba(220, 79, 44, 0.6); }
.rx-markets-ev[data-impact='medium'] .rx-markets-ev__dot { background: var(--rx-hud-amber); }

.rx-markets-ev__title {
	display: block;
	font-size: var(--rx-fs-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.35;
}

.rx-markets-ev__vals {
	display: flex;
	gap: var(--rx-s-1);
	flex-wrap: wrap;
	margin-top: 2px;
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
	font-size: var(--rx-fs-xs);
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.5);
}

.rx-markets-ev__val b {
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	margin-right: 2px;
}

.rx-markets-ev__val--actual { color: var(--rx-orange-300); }

.rx-markets-cal__empty {
	font-size: var(--rx-fs-sm);
	color: rgba(255, 255, 255, 0.55);
}

.rx-markets-cal__export {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: var(--rx-s-2);
	padding: 0.7em 1em;
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rx-orange-300);
	border: 1px dashed rgba(220, 79, 44, 0.4);
	border-radius: var(--rx-r-md);
	transition: background-color var(--rx-dur-fast) var(--rx-ease-out),
	            border-color var(--rx-dur-fast) var(--rx-ease-out),
	            color var(--rx-dur-fast) var(--rx-ease-out);
}

.rx-markets-cal__export:hover {
	color: #fff;
	background: rgba(220, 79, 44, 0.14);
	border-color: rgba(220, 79, 44, 0.6);
	border-style: solid;
}

.rx-markets-cal__tz {
	margin: var(--rx-s-2) 0 0;
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---- Disclaimer ---- */

.rx-markets__disclaimer {
	margin: var(--rx-s-4) 0 0;
	font-size: var(--rx-fs-xs);
	color: rgba(255, 255, 255, 0.58);
	max-width: 72ch;
}

/* ---- On-site reader modal ---- */

.rx-markets-modal {
	position: fixed;
	inset: 0;
	z-index: var(--rx-z-modal, 9000);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rx-s-3);
}

/* `display:flex` above would defeat the `hidden` attribute (UA display:none
   loses to any author rule) — restate it explicitly. */
.rx-markets-modal[hidden] { display: none; }

.rx-markets-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 7, 18, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.rx-markets-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(680px, 100%);
	max-height: min(80vh, 720px);
	/* scroll lives on __body below — overflow here would clip the
	   straddling __tag label (same trap as the schedule panel) */
	background-color: var(--rx-navy);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	animation: rx-modal-in 0.28s var(--rx-ease-out);
}

@keyframes rx-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

button.rx-markets-modal__close {
	position: absolute;
	top: var(--rx-s-2);
	right: var(--rx-s-2);
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* hard-reset the kit's button padding/min-sizes or the circle balloons
	   into an oval */
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--rx-line);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--rx-dur-fast) var(--rx-ease-out),
	            border-color var(--rx-dur-fast) var(--rx-ease-out);
}

button.rx-markets-modal__close:hover {
	color: #fff;
	border-color: rgba(220, 79, 44, 0.5);
}

button.rx-markets-modal__close:focus-visible {
	outline: 2px solid var(--rx-orange-300);
	outline-offset: 2px;
}

.rx-markets-modal__head { padding-right: 44px; }

.rx-markets-modal__title {
	margin: var(--rx-s-1) 0 var(--rx-s-2);
	font-size: var(--rx-fs-lg);
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
}

.rx-markets-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	font-size: var(--rx-fs-sm);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
}

.rx-markets-modal__body p,
.rx-markets-modal__body ul,
.rx-markets-modal__body ol { margin: 0 0 var(--rx-s-2); }

.rx-markets-modal__body li { margin-bottom: 6px; }

.rx-markets-modal__body strong { color: rgba(255, 255, 255, 0.92); }

.rx-markets-modal__body h3,
.rx-markets-modal__body h4 {
	margin: var(--rx-s-2) 0 var(--rx-s-1);
	font-size: var(--rx-fs-base);
	color: #fff;
}

.rx-markets-modal__attr {
	margin: var(--rx-s-2) 0 0;
	padding-top: var(--rx-s-2);
	border-top: 1px solid var(--rx-line);
	font-size: var(--rx-fs-xs);
	color: rgba(255, 255, 255, 0.58);
}

.rx-markets-modal__attr-link {
	color: var(--rx-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rx-markets-modal__attr-link:hover,
.rx-markets-modal__attr-link:focus-visible {
	color: var(--rx-orange);
	text-decoration: none;
}

/* ---- Motion safety ---- */

@media (prefers-reduced-motion: reduce) {
	.rx-markets__dot { animation: none; }
	.rx-radar__sweep { animation: none; opacity: 0.35; }
	.rx-markets-modal__panel { animation: none; }
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
	.rx-cockpit__row,
	.rx-markets__grid { grid-template-columns: 1fr; }

	.rx-markets__cal {
		position: static;
		max-height: none;
		order: -1;   /* schedule above the feed on mobile — traders check it first */
	}
}

@media (max-width: 600px) {
	.rx-markets__headline { font-size: var(--rx-fs-xl); }
	.rx-markets__bar { border-radius: var(--rx-r-lg); }
	.rx-markets-card__img { height: 170px; }
	.rx-cockpit-panel--tminus { min-height: 200px; }
	.rx-cockpit__systems { width: 100%; }
	/* Centre the eyebrow over the stacked header on phones. */
	.rx-cockpit__mast-copy { width: 100%; }
	.rx-markets__eyebrow { text-align: center; }
}