/**
 * Mira Care Workstation — page widget styles.
 *
 * Ported from src/pages/MiraCareWorkstation.tsx and its section components
 * (MiraCareEaseOfUse, StakeholderTabs, RfidAnalyticsPreview).
 *
 * All selectors are page-namespaced under `ig-mcws-` to avoid collisions with
 * other pages. Brand tokens are REUSED from the base assets/css/widgets.css and
 * only re-declared here on the page wrapper (`:root` tokens are NOT redefined).
 */

/* =========================================================================
   Brand tokens (mirrors the base widgets.css scoping onto .ig-mcws)
   ========================================================================= */
.ig-mcws {
	--ig-navy: hsl(225 70% 17%);
	--ig-navy-light: hsl(225 50% 30%);
	--ig-gold: hsl(38 91% 55%);
	--ig-gold-light: hsl(38 91% 70%);
	--ig-teal: hsl(174 60% 42%);
	--ig-teal-light: hsl(174 50% 60%);
	--ig-background: var(--ig-surface, hsl(0 0% 100%));
	--ig-foreground: var(--ig-ink, hsl(225 70% 17%));
	--ig-muted: hsl(220 20% 96%);
	--ig-muted-foreground: hsl(220 10% 46%);
	--ig-border: hsl(220 20% 90%);
	--ig-card: hsl(0 0% 100%);
	--ig-accent: hsl(174 60% 42%);
	--ig-radius: 0.75rem;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

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

/* =========================================================================
   Hero
   ========================================================================= */
.ig-mcws-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ig-surface, var(--ig-navy));
}

.ig-mcws-hero__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--ig-navy) 0%, var(--ig-navy-light) 50%, var(--ig-navy) 100%);
}

.ig-mcws-hero__inner {
	position: relative;
	z-index: 10;
	max-width: 72rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.ig-mcws-hero__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.ig-mcws-hero__content {
		padding-left: 2rem;
	}
}

.ig-mcws-hero__content {
	animation: ig-fade-in-up 0.7s ease-out both;
}

.ig-mcws-hero__heading {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 1.5rem;
}

.ig-mcws-hero__heading-accent {
	display: block;
	color: var(--ig-gold);
}

.ig-mcws-hero__sub {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 32rem;
	line-height: 1.6;
	margin: 0 0 2rem;
}

.ig-mcws-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.ig-mcws-hero__media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ig-mcws-hero__img {
	position: relative;
	z-index: 2;
	height: 500px;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.35));
	animation: ig-fade-in-right 0.7s ease-out 0.2s both;
}

@media (max-width: 640px) {
	.ig-mcws-hero__img {
		height: 340px;
	}
}

/* =========================================================================
   Intro
   ========================================================================= */
.ig-mcws-intro {
	padding: 5rem 0;
	background: var(--ig-background);
}

.ig-mcws-intro__inner {
	max-width: 48rem;
	text-align: center;
}

.ig-mcws-intro__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1.5rem;
}

.ig-mcws-intro__body {
	color: var(--ig-muted-foreground);
	line-height: 1.7;
	font-size: 1.125rem;
	margin: 0;
}

/* =========================================================================
   Ease of Use (animated cabinet demo)
   ========================================================================= */
.ig-mcws-ease {
	padding: 5rem 0;
	background: var(--ig-surface, var(--ig-muted));
}

.ig-mcws-ease__wrap {
	max-width: 72rem;
}

.ig-mcws-ease__head {
	text-align: center;
	margin-bottom: 3rem;
}

.ig-mcws-ease__eyebrow {
	color: var(--ig-teal);
}

.ig-mcws-ease__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1rem;
}

.ig-mcws-ease__sub {
	color: var(--ig-muted-foreground);
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.6;
}

.ig-mcws-ease__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.ig-mcws-ease__grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.ig-mcws-ease__visual-col {
		grid-column: span 3;
	}

	.ig-mcws-ease__steps-col {
		grid-column: span 2;
	}
}

/* Stage */
.ig-mcws-ease__stage {
	position: relative;
	border-radius: 1.5rem;
	padding: 2rem;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ig-navy), var(--ig-navy-light));
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
	.ig-mcws-ease__stage {
		padding: 3rem;
	}
}

.ig-mcws-ease__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 30%, hsl(174 60% 42% / 0.25), transparent 60%);
	opacity: 0.2;
	animation: ig-mcws-glow 2s ease-in-out infinite;
}

.ig-mcws-ease__cabinet-outer {
	position: relative;
	z-index: 10;
	max-width: 24rem;
	margin: 0 auto;
}

.ig-mcws-ease__cabinet {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 1rem;
	padding: 1.25rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Badge reader */
.ig-mcws-ease__reader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding: 0 0.5rem;
}

.ig-mcws-ease__reader-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ig-mcws-ease__badge {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ig-muted);
	transition: background 0.3s ease;
	flex-shrink: 0;
}

/* Badge is active (teal) from step 0 onwards. */
.ig-mcws-ease .ig-mcws-ease__badge {
	background: var(--ig-teal);
}

.ig-mcws-ease.is-step-0 .ig-mcws-ease__badge {
	animation: ig-mcws-ping 1.2s ease-out infinite;
}

.ig-mcws-ease__scan-icon {
	width: 1rem;
	height: 1rem;
	border: 2px solid #fff;
	border-radius: 2px;
	position: relative;
}

.ig-mcws-ease__scan-icon::after {
	content: '';
	position: absolute;
	left: -1px;
	right: -1px;
	top: 50%;
	height: 2px;
	background: #fff;
}

.ig-mcws-ease__status-label {
	font-size: 10px;
	color: var(--ig-muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

.ig-mcws-ease__status {
	position: relative;
	min-height: 1rem;
}

.ig-mcws-ease__status-text {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ig-navy);
	display: none;
}

.ig-mcws-ease.is-step-0 .ig-mcws-ease__status-text[data-status="0"],
.ig-mcws-ease.is-step-1 .ig-mcws-ease__status-text[data-status="1"],
.ig-mcws-ease.is-step-2 .ig-mcws-ease__status-text[data-status="2"],
.ig-mcws-ease.is-step-3 .ig-mcws-ease__status-text[data-status="3"] {
	display: inline-block;
	animation: ig-fade-in-up 0.3s ease-out both;
}

.ig-mcws-ease__dots {
	display: flex;
	gap: 0.25rem;
}

.ig-mcws-ease__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--ig-muted);
}

/* dot 0: badgeActive (always on); dot 1: step>=1; dot 2: completed (step 3) */
.ig-mcws-ease__dot[data-dot="0"] {
	background: var(--ig-teal);
}

.ig-mcws-ease:not(.is-step-0) .ig-mcws-ease__dot[data-dot="1"] {
	background: var(--ig-teal);
}

.ig-mcws-ease.is-step-3 .ig-mcws-ease__dot[data-dot="2"] {
	background: var(--ig-teal);
}

/* Decorative drawers */
.ig-mcws-ease__drawer-dec {
	background: hsl(220 20% 96% / 0.6);
	border-radius: 0.5rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem 0;
}

.ig-mcws-ease__drawer-dec:first-of-type {
	margin-top: 0;
}

.ig-mcws-ease__drawer-grip {
	width: 2.5rem;
	height: 0.25rem;
	background: hsl(220 10% 46% / 0.3);
	border-radius: 9999px;
}

/* Active drawer */
.ig-mcws-ease__active-wrap {
	position: relative;
}

.ig-mcws-ease__drawer {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid var(--ig-border);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
	background: linear-gradient(to bottom, var(--ig-card), hsl(220 20% 96% / 0.4));
	height: 36px;
	transition: height 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.3s ease;
}

/* Drawer open on steps 1 and 2. */
.ig-mcws-ease.is-step-1 .ig-mcws-ease__drawer,
.ig-mcws-ease.is-step-2 .ig-mcws-ease__drawer {
	height: 160px;
	background: hsl(225 70% 17% / 0.85);
}

.ig-mcws-ease__drawer-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	border-bottom: 1px solid var(--ig-border);
	background: hsl(220 20% 96% / 0.4);
}

/* Handle only visible while drawer is closed. */
.ig-mcws-ease.is-step-1 .ig-mcws-ease__drawer-handle,
.ig-mcws-ease.is-step-2 .ig-mcws-ease__drawer-handle {
	display: none;
}

.ig-mcws-ease__vials {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	padding: 1rem;
}

.ig-mcws-ease__vial {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(0) scale(1);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Meds shown from step 1 onwards. */
.ig-mcws-ease:not(.is-step-0) .ig-mcws-ease__vial {
	opacity: 1;
}

/* Vials 1 and 3 (0-indexed) fly up when retrieved (step >= 2). */
.ig-mcws-ease.is-step-2 .ig-mcws-ease__vial[data-vial="1"],
.ig-mcws-ease.is-step-2 .ig-mcws-ease__vial[data-vial="3"],
.ig-mcws-ease.is-step-3 .ig-mcws-ease__vial[data-vial="1"],
.ig-mcws-ease.is-step-3 .ig-mcws-ease__vial[data-vial="3"] {
	opacity: 0;
	transform: translateY(-60px) scale(0.6);
}

.ig-mcws-ease__vial-cap {
	width: 1.5rem;
	height: 0.5rem;
	border-radius: 0.375rem 0.375rem 0 0;
	background: var(--ig-gold);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ig-mcws-ease__vial[data-vial="1"] .ig-mcws-ease__vial-cap,
.ig-mcws-ease__vial[data-vial="3"] .ig-mcws-ease__vial-cap {
	background: var(--ig-teal);
}

.ig-mcws-ease__vial-ring {
	width: 1.5rem;
	height: 0.25rem;
	background: hsl(220 10% 46% / 0.3);
	margin-top: -1px;
}

.ig-mcws-ease__vial-neck {
	width: 0.75rem;
	height: 0.25rem;
	background: hsl(45 90% 70% / 0.7);
	border-left: 1px solid hsl(38 70% 35% / 0.3);
	border-right: 1px solid hsl(38 70% 35% / 0.3);
	margin-top: -1px;
}

.ig-mcws-ease__vial-body {
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: -1px;
	border-radius: 0.5rem 0.5rem 0.375rem 0.375rem;
	background: linear-gradient(to bottom, hsl(45 90% 80% / 0.8), hsl(38 90% 60% / 0.7));
	border: 1px solid hsl(38 70% 35% / 0.3);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ig-mcws-ease__vial-shine {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	width: 0.25rem;
	height: 1rem;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 9999px;
}

.ig-mcws-ease__vial-band {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 0.75rem;
	background: rgba(255, 255, 255, 0.9);
}

.ig-mcws-ease__vial-scan {
	position: absolute;
	inset: 0;
	border-radius: 0.375rem;
	box-shadow: 0 0 0 2px hsl(174 60% 42% / 0.6);
	opacity: 0;
}

.ig-mcws-ease:not(.is-step-0) .ig-mcws-ease__vial-scan {
	animation: ig-mcws-pulse 1.4s ease-in-out infinite;
}

/* RFID scan pills (only on step 3) */
.ig-mcws-ease__rfid {
	position: absolute;
	top: -0.5rem;
	right: 0.5rem;
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}

.ig-mcws-ease.is-step-3 .ig-mcws-ease__rfid {
	display: flex;
}

.ig-mcws-ease__rfid-pill {
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: hsl(174 60% 42% / 0.9);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	animation: ig-mcws-pulse 1s ease-in-out infinite;
}

.ig-mcws-ease__rfid-pill:nth-child(2) { animation-delay: 0.2s; }
.ig-mcws-ease__rfid-pill:nth-child(3) { animation-delay: 0.4s; }

/* Completion check (only on step 3) */
.ig-mcws-ease__complete {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ig-mcws-ease.is-step-3 .ig-mcws-ease__complete {
	display: flex;
	animation: ig-mcws-pop 0.3s ease-out both;
}

.ig-mcws-ease__complete-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: var(--ig-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Time counter */
.ig-mcws-ease__time {
	margin-top: 1.5rem;
	text-align: center;
}

.ig-mcws-ease__time-label {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 0 0 0.25rem;
}

.ig-mcws-ease__time-value {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--ig-gold);
	margin: 0;
}

/* Steps column */
.ig-mcws-ease__steps-col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ig-mcws-ease__step {
	width: 100%;
	text-align: left;
	padding: 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid var(--ig-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	background: var(--ig-card);
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
	font-family: inherit;
}

.ig-mcws-ease__step.is-active {
	background: var(--ig-navy);
	transform: scale(1.02);
}

.ig-mcws-ease__step-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--ig-muted);
	color: var(--ig-muted-foreground);
	font-weight: 700;
	transition: background 0.2s ease, color 0.2s ease;
}

.ig-mcws-ease__step.is-active .ig-mcws-ease__step-icon {
	background: var(--ig-gold);
	color: var(--ig-navy);
}

.ig-mcws-ease__step.is-done .ig-mcws-ease__step-icon {
	background: var(--ig-teal);
	color: #fff;
}

.ig-mcws-ease__step-check {
	display: none;
}

.ig-mcws-ease__step.is-done .ig-mcws-ease__step-num {
	display: none;
}

.ig-mcws-ease__step.is-done .ig-mcws-ease__step-check {
	display: inline;
}

.ig-mcws-ease__step-text {
	flex: 1;
	display: block;
}

.ig-mcws-ease__step-kicker {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
	color: var(--ig-muted-foreground);
}

.ig-mcws-ease__step.is-active .ig-mcws-ease__step-kicker {
	color: var(--ig-gold);
}

.ig-mcws-ease__step-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
	color: var(--ig-navy);
}

.ig-mcws-ease__step.is-active .ig-mcws-ease__step-label {
	color: #fff;
}

.ig-mcws-ease__step-caption {
	display: block;
	font-size: 0.875rem;
	color: var(--ig-muted-foreground);
	line-height: 1.5;
}

.ig-mcws-ease__step.is-active .ig-mcws-ease__step-caption {
	color: rgba(255, 255, 255, 0.8);
}

/* Controls */
.ig-mcws-ease__controls {
	display: flex;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.ig-mcws-ease__btn {
	background: var(--ig-card);
	border: 1px solid var(--ig-border);
	color: var(--ig-navy);
	padding: 0.625rem 1.25rem;
}

.ig-mcws-ease__btn:hover {
	background: var(--ig-muted);
	color: var(--ig-navy);
}

.ig-mcws-ease__toggle {
	flex: 1;
	justify-content: center;
}

.ig-mcws-ease__toggle .ig-mcws-ease__toggle-play {
	display: none;
}

.ig-mcws-ease__toggle[data-playing="false"] .ig-mcws-ease__toggle-pause {
	display: none;
}

.ig-mcws-ease__toggle[data-playing="false"] .ig-mcws-ease__toggle-play {
	display: inline;
}

.ig-mcws-ease__reset {
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.625rem 1rem;
}

/* =========================================================================
   Advantages
   ========================================================================= */
.ig-mcws-advantages {
	padding: 5rem 0;
	background: var(--ig-surface, var(--ig-muted));
}

.ig-mcws-advantages__head {
	text-align: center;
	margin-bottom: 4rem;
}

.ig-mcws-advantages__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1rem;
}

.ig-mcws-advantages__grid {
	display: grid;
	gap: 2rem;
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.ig-mcws-advantages__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ig-mcws-advantages__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-mcws-advantages__card {
	background: var(--ig-card);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.ig-mcws-advantages__card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
}

.ig-mcws-advantages__icon {
	width: 3.5rem;
	height: 3.5rem;
	background: hsl(38 91% 55% / 0.15);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem;
}

.ig-mcws-advantages__icon svg,
.ig-mcws-advantages__icon i {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
	color: var(--ig-gold);
}

.ig-mcws-advantages__card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 0.75rem;
}

.ig-mcws-advantages__card-desc {
	font-size: 0.875rem;
	color: var(--ig-muted-foreground);
	line-height: 1.6;
	margin: 0;
}

/* =========================================================================
   Stakeholders (tabs)
   ========================================================================= */
.ig-mcws-stk {
	padding: 5rem 0;
	background: var(--ig-background);
}

.ig-mcws-stk__head {
	text-align: center;
	margin-bottom: 4rem;
}

.ig-mcws-stk__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1rem;
}

.ig-mcws-stk__sub {
	color: var(--ig-muted-foreground);
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.6;
}

.ig-mcws-stk__grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.ig-mcws-stk__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-mcws-stk__tabs {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.ig-mcws-stk__tabs {
		flex-direction: column;
		gap: 0.75rem;
	}
}

.ig-mcws-stk__tab {
	position: relative;
	flex: 1;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--ig-border);
	background: hsl(0 0% 100% / 0.5);
	padding: 1rem 1.25rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	font-family: inherit;
}

@media (min-width: 768px) {
	.ig-mcws-stk__tab {
		flex: none;
	}
}

.ig-mcws-stk__tab:hover {
	border-color: hsl(38 91% 55% / 0.4);
	background: var(--ig-card);
}

.ig-mcws-stk__tab.is-active {
	border-color: var(--ig-gold);
	background: var(--ig-card);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ig-mcws-stk__tab-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ig-muted-foreground);
	transition: color 0.2s ease;
}

.ig-mcws-stk__tab.is-active .ig-mcws-stk__tab-label {
	color: var(--ig-navy);
}

.ig-mcws-stk__tab {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ig-mcws-stk__tab-bar {
	width: 0.5rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--ig-muted);
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.ig-mcws-stk__tab.is-active .ig-mcws-stk__tab-bar {
	background: var(--ig-gold);
}

.ig-mcws-stk__content {
	position: relative;
}

@media (min-width: 768px) {
	.ig-mcws-stk__content {
		grid-column: span 2;
	}
}

.ig-mcws-stk__panel {
	display: none;
	border-radius: 1rem;
	border: 1px solid var(--ig-border);
	background: var(--ig-card);
	padding: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	min-height: 200px;
}

@media (min-width: 768px) {
	.ig-mcws-stk__panel {
		padding: 2.5rem;
	}
}

.ig-mcws-stk__panel.is-active {
	display: block;
	animation: ig-fade-in-up 0.4s ease-out both;
}

.ig-mcws-stk__panel-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 1.25rem;
}

.ig-mcws-stk__panel-bar {
	width: 0.5rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--ig-gold);
	flex-shrink: 0;
}

.ig-mcws-stk__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ig-mcws-stk__point {
	display: flex;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ig-muted-foreground);
}

.ig-mcws-stk__point-dot {
	margin-top: 0.5rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--ig-teal);
	flex-shrink: 0;
}

/* =========================================================================
   RFID Analytics Preview
   ========================================================================= */
.ig-mcws-analytics {
	padding: 5rem 0;
	background: var(--ig-surface, var(--ig-muted));
}

.ig-mcws-analytics__wrap {
	max-width: 72rem;
}

.ig-mcws-analytics__head {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 2.5rem;
}

.ig-mcws-analytics__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ig-gold);
	margin-bottom: 0.75rem;
}

.ig-mcws-analytics__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 0.75rem;
}

.ig-mcws-analytics__desc {
	color: var(--ig-muted-foreground);
	line-height: 1.7;
	margin: 0;
}

.ig-mcws-analytics__dash {
	border-radius: 1.5rem;
	border: 1px solid var(--ig-border);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	background: linear-gradient(135deg, var(--ig-card), hsl(220 20% 96% / 0.4));
}

.ig-mcws-analytics__dash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--ig-border);
	background: hsl(0 0% 100% / 0.6);
}

.ig-mcws-analytics__dash-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ig-mcws-analytics__dash-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background: hsl(38 91% 55% / 0.15);
	color: var(--ig-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.ig-mcws-analytics__dash-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ig-navy);
}

.ig-mcws-analytics__dash-subtitle {
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
}

.ig-mcws-analytics__live {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
}

.ig-mcws-analytics__live-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ig-accent);
	animation: ig-mcws-pulse 1.5s ease-in-out infinite;
}

.ig-mcws-analytics__body {
	padding: 1.5rem;
}

.ig-mcws-analytics__tiles {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.ig-mcws-analytics__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-mcws-analytics__tile {
	background: var(--ig-card);
	border-radius: 0.75rem;
	border: 1px solid var(--ig-border);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 180px;
}

.ig-mcws-analytics__tile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ig-mcws-analytics__tile-title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ig-navy);
}

.ig-mcws-analytics__badge {
	font-size: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	background: var(--ig-muted);
	color: var(--ig-muted-foreground);
}

/* Donut */
.ig-mcws-analytics__donut-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.ig-mcws-analytics__donut {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 9999px;
}

.ig-mcws-analytics__donut-hole {
	position: absolute;
	inset: 18px;
	border-radius: 9999px;
	background: var(--ig-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ig-mcws-analytics__donut-cap {
	font-size: 10px;
	color: var(--ig-muted-foreground);
}

.ig-mcws-analytics__donut-num {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--ig-navy);
}

.ig-mcws-analytics__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	justify-content: center;
}

.ig-mcws-analytics__legend-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 10px;
	color: var(--ig-muted-foreground);
}

.ig-mcws-analytics__legend-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
}

/* Bars */
.ig-mcws-analytics__bars {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.25rem 0;
	flex: 1;
	justify-content: center;
}

.ig-mcws-analytics__bar-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	margin-bottom: 0.25rem;
}

.ig-mcws-analytics__bar-label {
	color: var(--ig-muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 0.5rem;
}

.ig-mcws-analytics__bar-value {
	font-weight: 600;
	color: var(--ig-navy);
}

.ig-mcws-analytics__bar-track {
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ig-muted);
	overflow: hidden;
}

.ig-mcws-analytics__bar-fill {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: var(--ig-gold);
}

/* Insights */
.ig-mcws-analytics__insights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	justify-content: center;
}

.ig-mcws-analytics__insight {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 11px;
}

.ig-mcws-analytics__insight-icon {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.7rem;
}

.ig-mcws-analytics__insight-icon--info {
	background: hsl(174 60% 42% / 0.1);
	color: var(--ig-accent);
}

.ig-mcws-analytics__insight-icon--warn {
	background: hsl(38 91% 55% / 0.15);
	color: var(--ig-navy);
}

.ig-mcws-analytics__insight-icon--good {
	background: hsl(174 60% 42% / 0.15);
	color: var(--ig-teal);
}

.ig-mcws-analytics__insight-label {
	color: var(--ig-muted-foreground);
	line-height: 1.4;
}

.ig-mcws-analytics__dash-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--ig-border);
	padding: 0.75rem 1.5rem;
	background: hsl(220 20% 96% / 0.3);
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
}

.ig-mcws-analytics__dash-ver {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: nowrap;
}

/* =========================================================================
   CTA
   ========================================================================= */
.ig-mcws-cta {
	padding: 5rem 0;
	background: var(--ig-surface, var(--ig-accent));
	color: var(--ig-ink, #fff);
}

.ig-mcws-cta__inner {
	max-width: 48rem;
	text-align: center;
}

.ig-mcws-cta__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: #fff;
	margin: 0.75rem 0 1rem;
}

.ig-mcws-cta__sub {
	color: rgba(255, 255, 255, 0.8);
	max-width: 36rem;
	margin: 0 auto 2rem;
	line-height: 1.6;
}

.ig-mcws-cta__btn {
	padding: 0.75rem 2.5rem;
	font-size: 1rem;
}

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes ig-fade-in-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ig-fade-in-right {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes ig-mcws-glow {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 0.6; }
}

@keyframes ig-mcws-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

@keyframes ig-mcws-ping {
	0%   { box-shadow: 0 0 0 0 hsl(174 60% 42% / 0.6); }
	70%  { box-shadow: 0 0 0 12px hsl(174 60% 42% / 0); }
	100% { box-shadow: 0 0 0 0 hsl(174 60% 42% / 0); }
}

@keyframes ig-mcws-pop {
	from { opacity: 0; transform: scale(0); }
	to   { opacity: 1; transform: scale(1); }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.ig-mcws-hero__content,
	.ig-mcws-hero__img,
	.ig-mcws-ease__glow,
	.ig-mcws-ease__vial-scan,
	.ig-mcws-ease__rfid-pill,
	.ig-mcws-analytics__live-dot,
	.ig-mcws-ease__badge {
		animation: none !important;
	}
}