/*
|||||||||||||||||||||||||||||||||
///   RIS Layout Framework     //
///   Replaces Bootstrap grid  //
|||||||||||||||||||||||||||||||||
*/

/* ---- Box Sizing Reset ---- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

/* ---- Container ---- */

.container-fluid {
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* ---- Row ---- */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

/* ---- Column Base ---- */

[class*="col-"] {
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* ---- Medium Breakpoint (≥768px) ---- */

@media (min-width: 768px) {
	.col-md-1 {
		flex: 0 0 8.3333%;
		max-width: 8.3333%;
	}
	.col-md-2 {
		flex: 0 0 16.6667%;
		max-width: 16.6667%;
	}
	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-4 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	.col-md-5 {
		flex: 0 0 41.6667%;
		max-width: 41.6667%;
	}
	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-7 {
		flex: 0 0 58.3333%;
		max-width: 58.3333%;
	}
	.col-md-8 {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
	}
	.col-md-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-10 {
		flex: 0 0 83.3333%;
		max-width: 83.3333%;
	}
	.col-md-11 {
		flex: 0 0 91.6667%;
		max-width: 91.6667%;
	}
	.col-md-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ---- Large Breakpoint (≥992px) ---- */

@media (min-width: 992px) {
	.col-lg-1 {
		flex: 0 0 8.3333%;
		max-width: 8.3333%;
	}
	.col-lg-2 {
		flex: 0 0 16.6667%;
		max-width: 16.6667%;
	}
	.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-lg-4 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	.col-lg-5 {
		flex: 0 0 41.6667%;
		max-width: 41.6667%;
	}
	.col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-lg-7 {
		flex: 0 0 58.3333%;
		max-width: 58.3333%;
	}
	.col-lg-8 {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
	}
	.col-lg-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-lg-10 {
		flex: 0 0 83.3333%;
		max-width: 83.3333%;
	}
	.col-lg-11 {
		flex: 0 0 91.6667%;
		max-width: 91.6667%;
	}
	.col-lg-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ---- Responsive Embed (video iframes) ---- */

.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

.embed-responsive-16by9::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* PJAX Route Transitions — Note: ris-stagger elements inside
   .ris-route-enter are delayed with calc(80ms + stagger vars) */

.ris-route-enter {
	opacity: 0;
}

.ris-route-enter.ris-route-enter-active {
	transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 1;
}

.ris-route-exit {
	opacity: 1;
}

.ris-route-exit.ris-route-exit-active {
	transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1);
	opacity: 0;
}

.ris-route-morph {
	will-change: opacity;
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}

.ris-banner-enter {
	filter: none;
}

.ris-route-enter.ris-banner-enter {
	opacity: 0;
	transform: translateY(6px);
}

.ris-route-enter.ris-route-enter-active.ris-banner-enter {
	transition:
		opacity 200ms ease-out,
		transform 200ms ease-out;
	opacity: 1;
	transform: translateY(0);
	filter: none;
}

.ris-banner-morph {
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
	filter: none;
}

.ris-banner-exit {
	filter: none;
}

.ris-route-exit.ris-route-exit-active.ris-banner-exit {
	transition:
		opacity 160ms ease-in,
		transform 160ms ease-in;
	opacity: 0;
	transform: translateY(-4px);
	filter: none;
}

.ris-banner-enter .hp-banner__top,
.ris-banner-enter .lp-banner__top,
.ris-banner-enter .hp-cats-row,
.ris-banner-enter .lp-grid {
	animation: none;
}

/* Suppress stagger on cards inside banner — the banner VT group handles their animation */
.ris-banner-enter .hp-cat-card {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}

.ris-route-enter.ris-route-enter-active
	:is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources)
	:is(h1, h2, h3, h4, h5, h6, p, a, span, li, label, th, td) {
	animation: none;
	clip-path: none;
}

.ris-route-enter :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources) {
	opacity: 0;
}

.ris-route-enter.ris-route-enter-active :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources) {
	animation: risCardStaggerIn var(--stagger-duration, 280ms) var(--stagger-easing, cubic-bezier(0.34, 1.4, 0.64, 1)) both;
	animation-delay: calc(80ms + var(--ris-stagger-delay, 0ms));
}

/* On reverse transitions, keep entering landing content stable (no fade/stagger flash). */
:root.ris-vt-reverse .ris-route-enter,
:root.ris-vt-reverse .ris-route-enter.ris-route-enter-active {
	opacity: 1;
	transition: none;
}

:root.ris-vt-reverse .ris-route-enter :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources),
:root.ris-vt-reverse .ris-route-enter.ris-route-enter-active :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources) {
	opacity: 1;
	animation: none;
	animation-delay: 0ms;
	clip-path: none;
}

@keyframes risCardStaggerIn {
	from {
		opacity: 0;
		transform: translateY(var(--stagger-translate-y, 6px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Card exit animation (navigating away from card pages) ─────────── */
/* Applied to cards before navigation to animate them out cleanly.      */
/* Staggered per-card via --ris-stagger-delay for grouped exit effect.  */

.ris-card-exit {
	animation: risCardExitOut 240ms cubic-bezier(0.4, 0, 1, 1) var(--ris-stagger-delay, 0ms) forwards;
	pointer-events: none;
}

@keyframes risCardExitOut {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.94);
	}
}

/* ── Page-level fade-out during navigation ─────────────────── */
/* Applied to .main when navigating between different landing   */
/* pages, so the banner and non-card content fades out together */
/* with the card exit animation.                                */

.ris-page-fade-out {
	transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
	opacity: 0;
}

.ris-page-fade-out .lp-banner__visual,
.ris-page-fade-out .lp-banner__back,
.ris-page-fade-out .lp-section-label,
.ris-page-fade-out .lp-prompt {
	transition: opacity 120ms ease-out;
	opacity: 0;
}

@supports (view-transition-name: none) {
	.ris-vt-active .table-layout > .main {
		view-transition-name: ris-main;
		opacity: 1 !important;
		transition: none !important;
	}

	.ris-vt-active .hp-banner,
	.ris-vt-active .lp-banner {
		view-transition-name: ris-hero-banner;
	}

	/* Exclude the cats row from the banner VT group — it should
	   crossfade with main content, not morph with the banner heading.
	   This prevents a jarring 394→173px size change on the banner group. */
	.ris-vt-active .hp-cats-row {
		view-transition-name: none;
	}

	.ris-vt-active .lp-card.is-transitioning {
		view-transition-name: ris-data-card;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__title {
		view-transition-name: ris-data-title;
	}

	.ris-vt-active .dp-subheader__title[data-dp-card-title] {
		view-transition-name: ris-data-title;
	}

	/* Type icon → view-tile icon morphs (one named group per type key).
	   Targets the tile's inner icon square so it crossfades with the card's
	   same-size chip instead of stretching into the full-width tile. */
	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="dashboard"],
	.ris-vt-active .dp-options__btn[data-type-key="dashboard"] .dp-viewtab__icon {
		view-transition-name: ris-type-dashboard;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="map"],
	.ris-vt-active .dp-options__btn[data-type-key="map"] .dp-viewtab__icon {
		view-transition-name: ris-type-map;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="overview"],
	.ris-vt-active .dp-options__btn[data-type-key="overview"] .dp-viewtab__icon {
		view-transition-name: ris-type-overview;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="index"],
	.ris-vt-active .dp-options__btn[data-type-key="index"] .dp-viewtab__icon {
		view-transition-name: ris-type-index;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="table"],
	.ris-vt-active .dp-options__btn[data-type-key="table"] .dp-viewtab__icon {
		view-transition-name: ris-type-table;
	}

	.ris-vt-active .lp-card.is-transitioning .lp-card__type[data-type-key="profile"],
	.ris-vt-active .dp-options__btn[data-type-key="profile"] .dp-viewtab__icon {
		view-transition-name: ris-type-profile;
	}

	/* Old .main stays visible as backdrop while new content fades in */
	::view-transition-old(ris-main) {
		animation: none;
		mix-blend-mode: normal;
	}

	::view-transition-new(ris-main) {
		animation: risMainIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
		mix-blend-mode: normal;
	}

	/* Root group: instant swap — prevents sidebar crossfade flicker */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
		mix-blend-mode: normal;
	}

	/* Title: move without scaling the captured screenshot */
	::view-transition-old(ris-data-title),
	::view-transition-new(ris-data-title) {
		animation-duration: 240ms;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		mix-blend-mode: normal;
		object-fit: none;
		object-position: left top;
	}

	/* Type icon → button: same-size squares, plain crossfade */
	::view-transition-old(ris-type-dashboard),
	::view-transition-new(ris-type-dashboard),
	::view-transition-old(ris-type-map),
	::view-transition-new(ris-type-map),
	::view-transition-old(ris-type-overview),
	::view-transition-new(ris-type-overview),
	::view-transition-old(ris-type-index),
	::view-transition-new(ris-type-index),
	::view-transition-old(ris-type-table),
	::view-transition-new(ris-type-table),
	::view-transition-old(ris-type-profile),
	::view-transition-new(ris-type-profile) {
		animation-duration: 240ms;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		mix-blend-mode: normal;
	}

	/* Group container: controls position/size morph from card rect → dashboard rect */
	::view-transition-group(ris-data-card) {
		animation-duration: 320ms;
		animation-timing-function: cubic-bezier(0.34, 1.28, 0.64, 1);
		border-radius: var(--radius);
	}

	/* Banner group: smooth crossfade (no spring overshoot to prevent size-change jank) */
	::view-transition-group(ris-hero-banner) {
		animation-duration: 280ms;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	::view-transition-old(ris-data-card) {
		animation: risCardOut 200ms ease-in both;
		transform-origin: center center;
		backface-visibility: hidden;
	}

	::view-transition-new(ris-data-card) {
		animation: risCardIn 280ms cubic-bezier(0.34, 1.28, 0.64, 1) both;
		transform-origin: center center;
		backface-visibility: hidden;
	}

	::view-transition-old(ris-hero-banner) {
		animation: risBannerOldOut 160ms ease-in both;
	}

	::view-transition-new(ris-hero-banner) {
		animation: risBannerNewIn 240ms cubic-bezier(0.34, 1.28, 0.64, 1) both;
	}
}

@keyframes risBannerOldOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes risBannerNewIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes risCardOut {
	from {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes risCardIn {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.99);
	}
	50% {
		opacity: 1;
	}
	75% {
		transform: translateY(0) scale(1.004);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes risMainIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes risMainOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* ===========================
   Unified Entrance Animations
   ===========================
   Cards and sections fade in one-at-a-time with subtle
   translateY + gentle spring overshoot.  An IntersectionObserver
   adds .ris-entered when elements scroll into view.
   prefers-reduced-motion: reduce → animations disabled.
*/

@keyframes risStaggerIn {
	from {
		opacity: 0;
		transform: translateY(var(--stagger-translate-y, 6px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes risStaggerInLg {
	from {
		opacity: 0;
		transform: translateY(var(--stagger-translate-y-lg, 10px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Base: hidden until observed */
.ris-stagger {
	opacity: 0;
	will-change: opacity, transform;
}

/* Ensure off-screen items are revealed when receiving focus (keyboard accessibility).
   Scoped to elements that have NOT yet entered — applying this to already-entered
   elements caused their entrance animation to restart when focus left the element
   (e.g. closing a dropdown inside the card), making the whole card re-animate. */
.ris-stagger:not(.ris-entered):focus-within {
	opacity: 1;
	transform: none;
	animation: none !important;
}

/* Revealed state: animate in with spring overshoot */
.ris-stagger.ris-entered {
	animation: risStaggerIn var(--stagger-duration, 280ms) var(--stagger-easing, cubic-bezier(0.34, 1.4, 0.64, 1)) both;
	animation-delay: var(--stagger-delay, 0ms);
}

/* Larger elements (banners, embeds) use the larger translate variant */
.ris-stagger-lg.ris-entered {
	animation-name: risStaggerInLg;
}

/* Reduced motion: show everything immediately, skip transforms */
@media (prefers-reduced-motion: reduce) {
	.ris-stagger {
		opacity: 1;
		transform: none;
		animation: none !important;
		will-change: auto;
	}
}

/* During PJAX route transitions, the transition system handles
   card visibility — prevent the observer-based stagger from
   fighting with PJAX-controlled opacity/transform. */
.ris-route-enter .ris-stagger {
	opacity: 0;
	animation: none;
}

.ris-route-enter.ris-route-enter-active .ris-stagger {
	animation: risStaggerIn var(--stagger-duration, 280ms) var(--stagger-easing, cubic-bezier(0.34, 1.4, 0.64, 1)) both;
	animation-delay: calc(80ms + var(--ris-stagger-delay, 0ms) + var(--stagger-delay, 0ms));
}

.ris-route-enter.ris-route-enter-active .ris-stagger.ris-stagger-lg {
	animation-name: risStaggerInLg;
}

/* Reverse transition: keep entering content stable (no re-animation) */
:root.ris-vt-reverse .ris-stagger {
	opacity: 1;
	transform: none;
	animation: none !important;
}

/* Skip stagger animation after reverse navigation completes */
.main.ris-no-stagger .ris-stagger {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* Reverse: dp-body shrinks back down to the originating lp-card */
@keyframes risCardReverseOut {
	from {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes risCardReverseIn {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(1.01);
	}
	50% {
		opacity: 1;
	}
	75% {
		transform: translateY(0) scale(0.998);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports (view-transition-name: none) {
	:root.ris-vt-reverse ::view-transition-group(ris-data-card) {
		animation-duration: 280ms;
		animation-timing-function: cubic-bezier(0.34, 1.28, 0.64, 1);
		border-radius: var(--radius);
	}

	:root.ris-vt-reverse ::view-transition-old(ris-data-card) {
		animation: risCardReverseOut 180ms ease-in both;
		transform-origin: center center;
		backface-visibility: hidden;
	}

	:root.ris-vt-reverse ::view-transition-new(ris-data-card) {
		animation: risCardReverseIn 260ms cubic-bezier(0.34, 1.28, 0.64, 1) both;
		transform-origin: center center;
		backface-visibility: hidden;
	}

	/* Reverse: old .main fades out, new .main revealed underneath */
	:root.ris-vt-reverse ::view-transition-old(ris-main) {
		animation: risMainOut 160ms ease-in both;
		mix-blend-mode: normal;
	}

	:root.ris-vt-reverse ::view-transition-new(ris-main) {
		animation: none;
		mix-blend-mode: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ris-route-enter,
	.ris-route-enter.ris-route-enter-active,
	.ris-route-exit,
	.ris-route-exit.ris-route-exit-active,
	.ris-route-morph,
	.ris-banner-enter,
	.ris-banner-morph,
	.ris-banner-exit,
	.ris-card-exit,
	.ris-page-fade-out {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		animation: none !important;
	}

	.ris-banner-enter .hp-banner__top,
	.ris-banner-enter .lp-banner__top,
	.ris-banner-enter .hp-cats-row,
	.ris-banner-enter .lp-grid {
		animation: none !important;
	}

	.ris-banner-enter .hp-cat-card {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}

	.ris-route-enter :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources),
	.ris-route-enter.ris-route-enter-active :is(.lp-card, .hp-cat-card, .hp-spotlight-card, a.hp-widget--geo, a.hp-widget--quickstart, a.hp-widget--sources) {
		opacity: 1 !important;
		animation: none !important;
	}

	::view-transition-old(root),
	::view-transition-new(root),
	::view-transition-old(ris-main),
	::view-transition-new(ris-main),
	::view-transition-old(ris-hero-banner),
	::view-transition-new(ris-hero-banner),
	::view-transition-old(ris-data-card),
	::view-transition-new(ris-data-card),
	::view-transition-old(ris-data-title),
	::view-transition-new(ris-data-title),
	::view-transition-old(ris-type-dashboard),
	::view-transition-new(ris-type-dashboard),
	::view-transition-old(ris-type-map),
	::view-transition-new(ris-type-map),
	::view-transition-old(ris-type-overview),
	::view-transition-new(ris-type-overview),
	::view-transition-old(ris-type-index),
	::view-transition-new(ris-type-index),
	::view-transition-old(ris-type-table),
	::view-transition-new(ris-type-table),
	::view-transition-old(ris-type-profile),
	::view-transition-new(ris-type-profile) {
		animation: none !important;
	}
}