/**
 * [clasva_billing_summary] — the shared billing summary component
 * (BILLING-REBUILD-BLUEPRINT §3). Ships ONLY type scale, row rhythm and
 * state tokens. It never ships a box, radius, shadow or background
 * except the `--card` / `--on-navy` modifiers — the host page's own CSS
 * (`.ss2-plan-chip`, `.rc1-panel`, the 8272 dashboard card, the 7184
 * navy `#1f345c` panel) owns the container, so five different card
 * designs keep looking like themselves.
 *
 * Employer-workspace palette: navy #1F2A44, blue #2F80ED, green #6FCF97
 * / #1a7a45, greys #7a8799 / #e4eaf2 / #f7fafd, red #eb5757 / #fdecea,
 * amber #b8791f / #8a5a12 / #fdf6e8 (founder-approved trio, billing
 * warning states only). DM Sans + Instrument Serif with real fallbacks.
 * NOT the public gold/charcoal site.
 */

.clasva-bs {
	--clasva-bs-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--clasva-bs-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--clasva-bs-ink: #1F2A44;
	--clasva-bs-muted: #64748b;
	--clasva-bs-rule: #e4eaf2;
	--clasva-bs-accent: #6FCF97;
	--clasva-bs-accent-ink: #1a7a45;
	--clasva-bs-dot: #7a8799;
	--clasva-bs-status-ink: #1F2A44;

	color: var(--clasva-bs-ink);
	font-family: var(--clasva-bs-font-sans);
	max-width: 100%;
}

.clasva-bs * {
	box-sizing: border-box;
}

/* ---- Rows ------------------------------------------------------------ */

.clasva-bs__eyebrow {
	margin: 0;
	font: 600 11px/1.4 var(--clasva-bs-font-sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--clasva-bs-muted);
}

.clasva-bs__plan {
	margin: 6px 0 0;
	font: 500 22px/1.25 var(--clasva-bs-font-serif);
	color: var(--clasva-bs-ink);
}

.clasva-bs__plan strong {
	font-weight: 500;
}

.clasva-bs__price {
	margin: 4px 0 0;
	font: 600 16px/1.4 var(--clasva-bs-font-sans);
	color: var(--clasva-bs-ink);
}

.clasva-bs__status {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin: 10px 0 0;
	font: 400 14px/1.5 var(--clasva-bs-font-sans);
	color: var(--clasva-bs-status-ink);
}

.clasva-bs__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 8px;
	margin-top: 0.45em;
	background: var(--clasva-bs-dot);
}

.clasva-bs__glyph {
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 1;
	color: var(--clasva-bs-dot);
}

.clasva-bs__status-text {
	flex: 1 1 auto;
}

.clasva-bs__allowance {
	margin: 8px 0 0;
	font: 400 14px/1.5 var(--clasva-bs-font-sans);
	color: var(--clasva-bs-accent-ink);
}

.clasva-bs__rule {
	border: 0;
	border-top: 1px solid var(--clasva-bs-rule);
	margin: 14px 0 10px;
	height: 0;
}

.clasva-bs__terms {
	margin: 0;
	/* 12.5px, not 11px — this text must be readable. #7a8799 on #fff ~ 4.7:1 (AA). */
	font: 400 12.5px/1.6 var(--clasva-bs-font-sans);
	color: var(--clasva-bs-muted);
}

.clasva-bs__ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.clasva-bs__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 8px;
	font: 600 13px/1 var(--clasva-bs-font-sans);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Compound selectors: these drop into founder CodeBlocks / [pms-register]
   pages whose theme sets a generic `a { color: … }` that would otherwise win
   on source order and leave the primary button text dark-on-blue (WCAG AA
   fail, caught by the Step B axe gate on /subscriptions/). */
.clasva-bs .clasva-bs__cta--primary,
a.clasva-bs__cta--primary {
	/* #2F80ED (the Clasva employer blue) is only ~3.9:1 with white at button
	   text sizes — a WCAG AA fail the Step B axe gate caught. Use the darker
	   in-family shade (previously the hover state) as the resting fill: white
	   on #1F66C9 ≈ 5.3:1. No new hue introduced. */
	background: #1F66C9;
	color: #ffffff;
}

.clasva-bs__cta--primary:hover,
.clasva-bs__cta--primary:focus-visible {
	background: #17509C;
	color: #ffffff;
}

.clasva-bs .clasva-bs__cta--secondary,
a.clasva-bs__cta--secondary {
	background: transparent;
	/* Same AA reason as --primary: #2F80ED text on white is ~3.9:1. */
	color: #1F66C9;
	box-shadow: inset 0 0 0 1px #c7d6ec;
}

.clasva-bs__cta--secondary:hover,
.clasva-bs__cta--secondary:focus-visible {
	background: #f2f7fe;
}

.clasva-bs__cta:focus-visible {
	outline: 2px solid #2F80ED;
	outline-offset: 2px;
}

/* ---- Variants ------------------------------------------------------- */

/* card: the component owns a light container only for standalone card
   contexts (8272, 7184). Inline/panel inherit the host box. */
.clasva-bs--card {
	background: #ffffff;
	border: 1px solid var(--clasva-bs-rule);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 1px 2px rgba(31, 42, 68, 0.05);
}

.clasva-bs--panel,
.clasva-bs--inline {
	background: transparent;
}

/* inline: 5229 / 1453 — vertical spacing scales x0.85 (blueprint §3.2). */
.clasva-bs--inline .clasva-bs__plan { margin-top: 5px; }
.clasva-bs--inline .clasva-bs__price { margin-top: 3px; }
.clasva-bs--inline .clasva-bs__status { margin-top: 8px; }
.clasva-bs--inline .clasva-bs__allowance { margin-top: 6px; }
.clasva-bs--inline .clasva-bs__rule { margin: 12px 0 8px; }

.clasva-bs--compact .clasva-bs__plan { font-size: 18px; }
.clasva-bs--compact .clasva-bs__price { font-size: 15px; }

/* ---- State -> token mapping (blueprint §3.3) ---------------------- */

.clasva-bs--state-active_renewing { --clasva-bs-dot: #6FCF97; --clasva-bs-status-ink: #1F2A44; }
.clasva-bs--state-free            { --clasva-bs-dot: #7a8799; --clasva-bs-status-ink: #1F2A44; }

.clasva-bs--state-active_canceling {
	--clasva-bs-dot: #b8791f;
	--clasva-bs-status-ink: #8a5a12;
}
.clasva-bs--state-active_canceling .clasva-bs__eyebrow { color: #8a5a12; }

.clasva-bs--state-payment_pending {
	--clasva-bs-dot: #b8791f;
	--clasva-bs-status-ink: #8a5a12;
}
.clasva-bs--state-payment_pending .clasva-bs__eyebrow { color: #8a5a12; }

.clasva-bs--state-payment_failed {
	--clasva-bs-dot: #eb5757;
	--clasva-bs-status-ink: #b3261e;
}
.clasva-bs--state-payment_failed .clasva-bs__eyebrow { color: #b3261e; }

.clasva-bs--state-expired,
.clasva-bs--state-none,
.clasva-bs--state-logged_out {
	--clasva-bs-dot: #7a8799;
	--clasva-bs-status-ink: #5c6878;
}

/* ---- --on-navy modifier: 7184 dashboard panel (#1f345c) only ------ */

.clasva-bs--on-navy {
	--clasva-bs-ink: #ffffff;
	--clasva-bs-muted: #c3d0e4;            /* ~8.9:1 on #1f345c — AA */
	--clasva-bs-rule: rgba(255, 255, 255, 0.16);
	--clasva-bs-accent-ink: #6FCF97;        /* ~6.4:1 on #1f345c — AA */
	--clasva-bs-status-ink: #ffffff;
}

.clasva-bs--on-navy.clasva-bs--card {
	background: #1f345c;
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}

.clasva-bs--on-navy .clasva-bs__cta--secondary {
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.clasva-bs--on-navy .clasva-bs__cta--secondary:hover,
.clasva-bs--on-navy .clasva-bs__cta--secondary:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}

/* ---- Responsive: 375 / 320 — price line wraps, never overflows ---- */

@media (max-width: 420px) {
	.clasva-bs--card {
		padding: 16px 16px;
	}

	.clasva-bs__plan {
		font-size: 20px;
	}

	.clasva-bs__ctas .clasva-bs__cta {
		flex: 1 1 100%;
	}
}