/**
 * Variant CSS: pricing--ledger-rows-board
 * Layer 2 — Path B pricing role (brief-bound, 2026-06-10).
 *
 * A dense "price ledger / account book" board. The whole price list is framed
 * as one continuous board: tier cells butt together (zero gap) and share thin
 * hairline rules so they tile into a register grid, with an outer frame around
 * the board. Each cell is a ledger line-entry: a large leading index number
 * (from counter(), correct after the loader clones/renumbers tiers), the
 * service name, a right-aligned tabular price sitting on a baseline rule, and
 * a short tagline beneath. The loader re-chunks the tier columns into rows of
 * up to 3 to fit the client's priced-service count (4-6); the shared-rule grid
 * keeps every row reading as the same ledger regardless of how many rows there
 * are. Scoped to the variant class.
 */

body.aibt-universal .universal-pricing--ledger-rows-board {
	background: var(--background);
	color: var(--text-primary);
	/* Reset the ledger line counter ONCE at section level so the index runs
	   continuously across every chunked `__tiers` row (resetting per-row would
	   restart it at each row). */
	counter-reset: aibt-led;
}

/* ── Intro ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__intro {
	margin-bottom: var(--space-6);
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-3) 0 !important;
}

body.aibt-universal .universal-pricing--ledger-rows-board h2.universal-pricing__headline,
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	max-width: 22ch;
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: 1.6 !important;
	color: var(--text-secondary) !important;
	margin: var(--space-4) 0 0 0 !important;
	max-width: 56ch;
}

/* ── The board: chunked `__tiers` rows tile into one register grid ─ */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tiers {
	gap: 0;
	align-items: stretch;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius);
	overflow: hidden;
}

/* Stack the chunked rows flush (no margin) so they form a single board; the
   shared cell borders draw the horizontal rules between rows. */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tiers + .universal-pricing__tiers {
	margin-top: -1px;
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tiers:not(:last-child) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Each ledger line-entry. counter() drives the leading index from DOM order. */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier {
	counter-increment: aibt-led;
	position: relative;
	background: var(--background-alt);
	padding: var(--space-5);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"idx name"
		"idx price"
		"idx tagline";
	column-gap: var(--space-4);
	row-gap: var(--space-2);
	align-content: start;
	/* Hairline rules between cells form the register grid. */
	border-right: 1px solid var(--divider-primary);
	border-bottom: 1px solid var(--divider-primary);
	transition: background var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier:hover {
	background: var(--background-card, var(--background-alt));
}

/* Leading index number — the "line number" of the ledger entry. */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier::before {
	content: counter(aibt-led, decimal-leading-zero);
	grid-area: idx;
	align-self: start;
	font-family: var(--font-mono, var(--font-display));
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
	padding-right: var(--space-3);
	border-right: 2px solid var(--divider-accent, var(--accent));
}

body.aibt-universal .universal-pricing--ledger-rows-board h3.universal-pricing__tier-name,
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier-name {
	grid-area: name;
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Price sits on its own baseline rule, right-aligned, tabular figures. */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier-price {
	grid-area: price;
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier-price span {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text-muted);
}

body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier-tagline {
	grid-area: tagline;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.5 !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* Focus-visible ring on cells reachable by keyboard (e.g. when linked). */
body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* ── Tablet: 2-up board ────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tiers {
		flex-wrap: wrap;
	}
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier {
		flex-basis: 50%;
	}
}

/* ── Mobile: single stacked register column ────────────────────── */
@media (max-width: 640px) {
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tiers {
		flex-wrap: wrap;
	}
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier {
		flex-basis: 100%;
		/* No vertical right-rule needed in a single column. */
		border-right: 0;
	}
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier-price {
		text-align: left;
	}
	/* A5: drop the wide tracking on the uppercase kicker at narrow widths. */
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-pricing--ledger-rows-board .universal-pricing__tier {
		transition: none;
	}
}