/**
 * Fabric Plan Capacity Calculator — front end styles.
 * Every rule is scoped to .fpcc so the host theme is untouched.
 */

/* Light only, by design. Colours are sampled from the reference comp. */
.fpcc {
	--fpcc-bg: #ffffff;
	--fpcc-bg-sunken: #f5f8f9;
	--fpcc-ink: #0e1a1e;
	--fpcc-ink-soft: #4d5f66;
	--fpcc-ink-faint: #647880;
	--fpcc-line: #dce6e9;
	--fpcc-line-strong: #c3d3d8;
	--fpcc-accent: #009b80;
	--fpcc-accent-ink: #00745e;
	--fpcc-buffer: #e29a33;
	--fpcc-jobs: #8fa1a8;
	--fpcc-radius: 14px;
	--fpcc-radius-sm: 8px;
	--fpcc-shadow: 0 1px 2px rgba(14, 26, 30, .05), 0 8px 24px -16px rgba(14, 26, 30, .22);

	box-sizing: border-box;
	color: var(--fpcc-ink);
	font-size: 15px;
	line-height: 1.5;
	/* No max-width: the component fills whatever the page container gives it.
	   Constrain it from the page builder, not from here. */
	margin-inline: auto;
}

.fpcc *,
.fpcc *::before,
.fpcc *::after {
	box-sizing: inherit;
}

/* :where() keeps this reset at zero added specificity, so the component rules
   below win on source order. Written as `.fpcc p, .fpcc ol, ...` it would score
   0-1-1 and silently beat every single-class margin rule in this file. */
.fpcc :where(p, h2, h3, dl, dd, ol) {
	margin: 0;
	padding: 0;
}

/* ---------- Panels ---------- */

.fpcc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.fpcc-panel {
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line);
	border-radius: var(--fpcc-radius);
	box-shadow: var(--fpcc-shadow);
	padding: 22px;
}

.fpcc-panel--cost {
	margin-top: 18px;
}

.fpcc-panel__step {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fpcc-ink-faint);
	margin-bottom: 10px;
}

.fpcc-panel__num {
	color: var(--fpcc-accent-ink);
}

/* Scoped with .fpcc so this scores 0-2-0 rather than 0-1-0. These are <h2>
   elements, and themes routinely style headings with a container selector
   (`.entry-content h2`, `.oxy-rich-text h2`) that scores 0-1-1 and would
   otherwise win the font-size. The old <h3> matched fewer of those rules, so
   the class alone was enough; at h2 it is not. */
.fpcc .fpcc-panel__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin-bottom: 6px;
}

.fpcc-panel__lede {
	color: var(--fpcc-ink-soft);
	font-size: 13.5px;
	margin-bottom: 18px;
}

/* ---------- Role rows ---------- */

.fpcc-roles {
	display: grid;
	gap: 18px;
}

.fpcc-role__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.fpcc-role__id {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	min-width: 0;
}

.fpcc-role__dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--fpcc-role-color, var(--fpcc-accent));
	align-self: center;
	flex: none;
}

.fpcc-role__name {
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.fpcc-role__rate {
	font-size: 12.5px;
	color: var(--fpcc-ink-faint);
}

.fpcc-role__total {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.fpcc-role__desc {
	font-size: 12.5px;
	color: var(--fpcc-ink-soft);
	margin: 2px 0 10px;
}

.fpcc-role__controls {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ---------- Range ---------- */

.fpcc-range {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	height: 22px;
	margin: 0;
	cursor: pointer;
}

.fpcc-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: var(--fpcc-line-strong);
}

.fpcc-range::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--fpcc-line-strong);
}

.fpcc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: var(--fpcc-role-color, var(--fpcc-accent));
	border: 2px solid var(--fpcc-bg);
	box-shadow: 0 0 0 1px rgba(22, 32, 46, .12);
}

.fpcc-range::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--fpcc-role-color, var(--fpcc-accent));
	border: 2px solid var(--fpcc-bg);
	box-shadow: 0 0 0 1px rgba(22, 32, 46, .12);
}

.fpcc-range:focus-visible {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 4px;
	border-radius: 999px;
}

/* ---------- Number inputs ---------- */

.fpcc-number {
	flex: none;
	width: 74px;
	padding: 7px 8px;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--fpcc-ink);
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line-strong);
	border-radius: var(--fpcc-radius-sm);
	text-align: left;
}

.fpcc-number--sm {
	width: 66px;
}

.fpcc-number:focus-visible {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 1px;
	border-color: var(--fpcc-accent);
}

.fpcc-number:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ---------- Per-role CU/second vs CU-hours ---------- */

.fpcc-role__metrics {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.fpcc-metric {
	flex: 1 1 0;
	min-width: 0;
	background: var(--fpcc-bg-sunken);
	border-radius: var(--fpcc-radius-sm);
	padding: 7px 10px;
}

.fpcc-metric dt {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fpcc-ink-faint);
}

.fpcc-metric dd {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fpcc-accent-ink);
	margin-top: 2px;
}

/* ---------- Automation jobs ---------- */

.fpcc-jobs,
.fpcc-buffer {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--fpcc-line);
}

.fpcc-jobs__head,
.fpcc-buffer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fpcc-jobs__title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 15px;
}

/* Matches .fpcc-legend__swatch--jobs so the two readings of the same number
   are visibly the same thing. */
.fpcc-jobs__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
	background: var(--fpcc-jobs);
}

.fpcc-jobs__title label {
	cursor: pointer;
}

.fpcc-jobs__desc,
.fpcc-buffer__desc {
	display: block;
	font-size: 12.5px;
	color: var(--fpcc-ink-soft);
	margin-top: 6px;
	max-width: 46ch;
}

.fpcc-jobs__readout {
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-top: 10px;
}

.fpcc-jobs__note {
	font-size: 11.5px;
	color: var(--fpcc-ink-faint);
	margin-top: 4px;
}

/* ---------- Buffer ---------- */

.fpcc-buffer__title {
	display: block;
	font-weight: 700;
	font-size: 15px;
}

.fpcc-buffer__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--fpcc-ink-soft);
	flex-wrap: wrap;
}

.fpcc-buffer__row label {
	font-weight: 600;
	color: var(--fpcc-ink);
}

.fpcc-switch {
	position: relative;
	display: inline-flex;
	flex: none;
	cursor: pointer;
}

.fpcc-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.fpcc-switch__track {
	display: block;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--fpcc-line-strong);
	transition: background .16s ease;
}

.fpcc-switch__thumb {
	display: block;
	width: 18px;
	height: 18px;
	margin: 3px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(22, 32, 46, .3);
	transition: transform .16s ease;
}

.fpcc-switch input:checked + .fpcc-switch__track {
	background: var(--fpcc-accent);
}

.fpcc-switch input:checked + .fpcc-switch__track .fpcc-switch__thumb {
	transform: translateX(18px);
}

.fpcc-switch input:focus-visible + .fpcc-switch__track {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 2px;
}

/* ---------- Total ---------- */

.fpcc-total {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 2px solid var(--fpcc-accent);
	flex-wrap: wrap;
}

.fpcc-total__title {
	display: block;
	font-weight: 700;
	font-size: 15px;
}

.fpcc-total__sub {
	display: block;
	font-size: 12px;
	color: var(--fpcc-ink-faint);
	margin-top: 2px;
}

.fpcc-total__value {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--fpcc-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fpcc-total__unit {
	font-size: 15px;
	font-weight: 600;
	margin-left: 3px;
}

/* ---------- SKU tag ---------- */

.fpcc-sku {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 18px;
}

.fpcc-sku__tag {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--fpcc-accent);
}

.fpcc-sku__tier {
	font-size: 13px;
	color: var(--fpcc-ink-faint);
}

/* ---------- Stacked bar ---------- */

.fpcc-fit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.fpcc-stack {
	width: 84px;
}

.fpcc-stack__bar {
	display: flex;
	flex-direction: column;
	height: 232px;
	border: 1px solid var(--fpcc-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--fpcc-bg-sunken);
}

/* JS writes --fpcc-seg-pct; the axis it maps to depends on the breakpoint. */
.fpcc-stack__seg {
	display: block;
	flex: none;
	width: 100%;
	height: var(--fpcc-seg-pct, 0%);
	background: var(--fpcc-seg-color, var(--fpcc-accent));
	transition: height .22s ease;
}

.fpcc-stack__seg--free {
	background: transparent;
}

.fpcc-stack__seg--buffer {
	background: var(--fpcc-buffer);
}

.fpcc-stack__seg[data-fpcc-seg="jobs"] {
	background: var(--fpcc-jobs);
}

.fpcc-stack__caption {
	margin-top: 9px;
	font-size: 11.5px;
	color: var(--fpcc-ink-faint);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.fpcc-stack__caption strong {
	display: block;
	color: var(--fpcc-ink);
	font-size: 12.5px;
	margin-top: 2px;
}

/* ---------- Legend ---------- */

.fpcc-legend__row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 0;
	border-bottom: 1px solid var(--fpcc-line);
	font-size: 13.5px;
}

.fpcc-legend__row[hidden] {
	display: none;
}

.fpcc-legend__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
	background: var(--fpcc-role-color, var(--fpcc-accent));
}

.fpcc-legend__swatch--buffer {
	background: var(--fpcc-buffer);
}

.fpcc-legend__swatch--jobs {
	background: var(--fpcc-jobs);
}

.fpcc-legend__label {
	flex: 1 1 auto;
	min-width: 0;
}

.fpcc-legend__count {
	color: var(--fpcc-ink-faint);
	font-size: 12px;
	margin-left: 3px;
}

.fpcc-legend__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fpcc-legend__row--total {
	border-bottom: 0;
	border-top: 2px solid var(--fpcc-ink);
	margin-top: 4px;
	padding-top: 11px;
	font-size: 15px;
}

.fpcc-legend__row--total .fpcc-legend__label {
	font-weight: 700;
}

.fpcc-legend__row--total .fpcc-legend__value {
	font-weight: 700;
}

.fpcc-legend__note {
	font-size: 12px;
	color: var(--fpcc-ink-faint);
	margin-top: 7px;
}

/* ---------- Pricing ---------- */

.fpcc-selects {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 16px 0 20px;
}

.fpcc-select {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 260px;
	min-width: 0;
}

.fpcc-select label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fpcc-ink-faint);
	white-space: nowrap;
}

.fpcc-select select {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	color: var(--fpcc-ink);
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line-strong);
	border-radius: var(--fpcc-radius-sm);
	padding: 8px 10px;
}

.fpcc-select select:focus-visible {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 1px;
}

.fpcc-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	transition: opacity .15s ease;
}

.fpcc-prices.is-loading {
	opacity: .45;
}

.fpcc-price__kind {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fpcc-ink-faint);
	margin-bottom: 6px;
}

.fpcc-price__amount {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.fpcc-price--reserved .fpcc-price__kind {
	color: var(--fpcc-accent-ink);
}

.fpcc-price--reserved .fpcc-price__amount {
	color: var(--fpcc-accent);
}

/* A region that sells no reservation says so, in muted text at a size that
   does not read as a price. */
.fpcc-price--unavailable .fpcc-price__amount {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--fpcc-ink-faint);
}

.fpcc-price--unavailable .fpcc-price__kind {
	color: var(--fpcc-ink-faint);
}

.fpcc-price__meta[hidden] {
	display: none;
}

.fpcc-price__meta {
	font-size: 12.5px;
	color: var(--fpcc-ink-soft);
	margin-top: 4px;
}

.fpcc-price__save {
	color: var(--fpcc-accent-ink);
	font-weight: 600;
}

.fpcc-notice {
	margin-top: 14px;
	padding: 9px 12px;
	border-radius: var(--fpcc-radius-sm);
	background: #fff6e6;
	border: 1px solid #f0d9ac;
	color: #7a5310;
	font-size: 12.5px;
}

.fpcc-notice[hidden] {
	display: none;
}

.fpcc-source {
	margin-top: 14px;
	font-size: 11.5px;
	color: var(--fpcc-ink-faint);
	line-height: 1.55;
}

.fpcc-source a,
.fpcc-footnotes a {
	color: var(--fpcc-accent-ink);
	text-decoration: underline;
}

/* ---------- Footnotes ---------- */

.fpcc-footnotes {
	margin-top: 30px;
	padding-left: 18px;
	padding-right: 4px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--fpcc-ink-faint);
	list-style: decimal;
}

.fpcc-footnotes li + li {
	margin-top: 5px;
}

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

@media (max-width: 900px) {
	.fpcc__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.fpcc-panel {
		padding: 18px 16px;
	}

	.fpcc-fit {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.fpcc-stack {
		width: 100%;
	}

	.fpcc-stack__bar {
		flex-direction: row-reverse;
		height: 42px;
	}

	/* Horizontal bar: the same percentage drives width instead of height. */
	.fpcc-stack__seg {
		width: var(--fpcc-seg-pct, 0%);
		height: 100%;
		transition: width .22s ease;
	}

	.fpcc-role__metrics {
		flex-wrap: wrap;
	}

	.fpcc-total__value {
		font-size: 28px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.fpcc * {
		transition: none !important;
	}
}

/* No dark scheme: this renders the same on every device, so it always matches
   the surrounding page. Deliberate — do not reintroduce prefers-color-scheme. */
.fpcc {
	color-scheme: light;
}

/* ==========================================================================
   Role-change scenarios — [fabric_role_change_scenarios]
   ========================================================================== */

.fpcc-scn {
	--fpcc-scn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--fpcc-scn-chart-h: 215px;
}

/* Used by both shortcodes. The calculator has always emitted
   .screen-reader-text and relied on the theme to define it — Oxygen does not
   always. Scoped here so the plugin no longer depends on that. */
.fpcc .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Tabs ----------
   Hidden until the script runs: without it the buttons do nothing, and the
   panels below render stacked and individually headed instead. */

.fpcc-scn__tabs {
	display: none;
	flex-wrap: wrap;
	gap: 2px;
	padding: 5px;
	background: var(--fpcc-bg-sunken);
	border: 1px solid var(--fpcc-line);
	border-radius: 999px;
}

.fpcc-scn.is-js .fpcc-scn__tabs {
	display: inline-flex;
}

.fpcc-scn__tab {
	appearance: none;
	padding: 8px 17px;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	color: var(--fpcc-ink-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.fpcc-scn__tab:hover {
	color: var(--fpcc-ink);
}

.fpcc-scn__tab.is-active {
	color: var(--fpcc-ink);
	background: var(--fpcc-bg);
	border-color: var(--fpcc-line);
	box-shadow: 0 1px 2px rgba(14, 26, 30, .06);
}

.fpcc-scn__tab:focus-visible {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 2px;
}

/* ---------- Panel ---------- */

.fpcc-scn__panel {
	margin-top: 16px;
	padding: 24px;
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line);
	border-radius: var(--fpcc-radius);
}

.fpcc-scn.is-js .fpcc-scn__panel {
	display: none;
}

.fpcc-scn.is-js .fpcc-scn__panel.is-active {
	display: block;
}

/* The scenario name. Redundant once the tabs carry it. */
.fpcc-scn__heading {
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--fpcc-ink);
}

.fpcc-scn.is-js .fpcc-scn__heading {
	display: none;
}

.fpcc-scn__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 26px;
}

.fpcc-scn__caption {
	max-width: 46ch;
	font-size: 15px;
	color: var(--fpcc-ink);
}

.fpcc-scn__total {
	flex: none;
	text-align: right;
	white-space: nowrap;
}

.fpcc-scn__total-value {
	font-family: var(--fpcc-scn-mono);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--fpcc-ink);
	font-variant-numeric: tabular-nums;
}

.fpcc-scn__total-unit {
	margin-left: 6px;
	font-size: 13px;
	color: var(--fpcc-ink-faint);
}

/* ---------- Chart ---------- */

.fpcc-scn__bars {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: var(--fpcc-scn-chart-h);
}

.fpcc-scn__slot {
	position: relative;
	flex: 1 1 0;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

.fpcc-scn__bar {
	width: 100%;
	min-height: 5px;
	height: var(--fpcc-scn-pct);
	background: var(--fpcc-scn-color);
	border-radius: 3px;
}

/* ---------- Scenario-change transition ----------

   Every panel has the same 30 slots in the same order, so switching tabs is a
   morph rather than a swap: the script copies the outgoing panel's heights and
   colours onto the incoming slots, forces a reflow, then restores each slot's
   own values. Day 5 visibly rises from Viewer to Stakeholder height instead of
   appearing there.

   Custom properties are not animatable, but nothing here animates one — the
   transitions are on `height` and `bottom`, whose computed values change when
   the property does. The small per-bar delay makes it read left to right.

   Only under .is-js: with no script there is no tab change to animate, and the
   plugin-wide prefers-reduced-motion rule kills all of it. */

.fpcc-scn.is-js .fpcc-scn__bar {
	transition:
		height .46s cubic-bezier(.22, .61, .36, 1),
		background-color .34s ease;
	transition-delay: calc(var(--fpcc-scn-i, 0) * 6ms);
}

/* A marker belongs to its own scenario's upgrade day, so it fades in rather
   than sliding across; `bottom` still transitions, so it rides up with the bar
   it sits above instead of hanging in the old position. */
.fpcc-scn.is-js .fpcc-scn__marker {
	transition:
		bottom .46s cubic-bezier(.22, .61, .36, 1),
		opacity .3s ease;
	transition-delay: calc(var(--fpcc-scn-i, 0) * 6ms);
}

.fpcc-scn.is-js .fpcc-scn__panel.is-morphing .fpcc-scn__marker {
	opacity: 0;
	transition-duration: 0s;
}

/* The caption and total swap instantly otherwise, which reads as a flicker
   against bars that are still moving. */
.fpcc-scn.is-js .fpcc-scn__head {
	transition: opacity .3s ease .08s;
}

.fpcc-scn.is-js .fpcc-scn__panel.is-morphing .fpcc-scn__head {
	opacity: 0;
	transition-duration: 0s;
}

/* Sits just clear of the bar it marks, so it tracks the bar's height. The
   slot carries --fpcc-scn-pct precisely so this calc can read it.
   z-index matters: every slot is position:relative, so without it the bars to
   the right of this one paint over the label. */
.fpcc-scn__marker {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: calc(var(--fpcc-scn-pct) + 9px);
	transform: translateX(-50%);
	padding: 3px 8px;
	font-family: var(--fpcc-scn-mono);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--fpcc-ink);
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line);
	border-radius: var(--fpcc-radius-sm);
}

.fpcc-scn__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 11px;
	font-family: var(--fpcc-scn-mono);
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--fpcc-ink-faint);
}

/* ---------- Legend ---------- */

/* ul/li are not in the :where() reset at the top of this file, so the theme's
   list padding and markers are still live here. Cleared explicitly rather than
   widening that reset, which the calculator's markup also sits under. */
.fpcc-scn__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.fpcc-scn__legend-item {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--fpcc-ink);
}

.fpcc-scn__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--fpcc-scn-color);
}

.fpcc-scn__legend-sep {
	color: var(--fpcc-ink-faint);
}

.fpcc-scn__legend-rate {
	font-family: var(--fpcc-scn-mono);
	font-variant-numeric: tabular-nums;
	color: var(--fpcc-ink-soft);
}

/* ---------- Footnote ---------- */

.fpcc-scn__note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fpcc-ink-faint);
}

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

@media (max-width: 760px) {
	.fpcc-scn {
		--fpcc-scn-chart-h: 180px;
	}

	/* The pill shape only reads well on one line; once the tabs wrap, square
	   the container off rather than leaving a stadium around three rows. */
	.fpcc-scn.is-js .fpcc-scn__tabs {
		display: flex;
		border-radius: var(--fpcc-radius);
	}

	.fpcc-scn__panel {
		padding: 18px;
	}

	.fpcc-scn__head {
		flex-direction: column;
		gap: 12px;
	}

	.fpcc-scn__total {
		text-align: left;
	}

	.fpcc-scn__bars {
		gap: 3px;
	}
}

@media (max-width: 520px) {
	.fpcc-scn {
		--fpcc-scn-chart-h: 150px;
	}

	.fpcc-scn__tab {
		padding: 7px 13px;
		font-size: 13px;
	}

	.fpcc-scn__total-value {
		font-size: 25px;
	}

	.fpcc-scn__bars {
		gap: 2px;
	}

	.fpcc-scn__bar {
		border-radius: 2px;
	}

	.fpcc-scn__marker {
		padding: 2px 6px;
		font-size: 11px;
	}
}

/* ==========================================================================
   Per-role cost table — [fabric_role_cost_table]
   ========================================================================== */

.fpcc-tbl {
	--fpcc-tbl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Tabs ----------
   Same pattern as the scenario chart: hidden until the script runs, because
   without it the buttons do nothing and the panels below stack instead. */

.fpcc-tbl__tabs {
	display: none;
	flex-wrap: wrap;
	gap: 2px;
	padding: 5px;
	background: var(--fpcc-bg-sunken);
	border: 1px solid var(--fpcc-line);
	border-radius: 999px;
}

.fpcc-tbl.is-js .fpcc-tbl__tabs {
	display: inline-flex;
}

.fpcc-tbl__tab {
	appearance: none;
	padding: 8px 17px;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	color: var(--fpcc-ink-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.fpcc-tbl__tab:hover {
	color: var(--fpcc-ink);
}

.fpcc-tbl__tab.is-active {
	color: var(--fpcc-ink);
	background: var(--fpcc-bg);
	border-color: var(--fpcc-line);
	box-shadow: 0 1px 2px rgba(14, 26, 30, .06);
}

.fpcc-tbl__tab:focus-visible {
	outline: 2px solid var(--fpcc-accent);
	outline-offset: 2px;
}

/* ---------- Panel ---------- */

.fpcc-tbl__panel {
	margin-top: 16px;
}

.fpcc-tbl.is-js .fpcc-tbl__panel {
	display: none;
}

.fpcc-tbl.is-js .fpcc-tbl__panel.is-active {
	display: block;
}

.fpcc-tbl__heading {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--fpcc-ink);
}

.fpcc-tbl.is-js .fpcc-tbl__heading {
	display: none;
}

.fpcc-tbl__card {
	background: var(--fpcc-bg);
	border: 1px solid var(--fpcc-line);
	border-radius: var(--fpcc-radius);
	overflow: hidden;
}

/* ---------- Table ---------- */

.fpcc-tbl__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.fpcc-tbl__table th,
.fpcc-tbl__table td {
	padding: 17px 20px;
	vertical-align: middle;
}

.fpcc-tbl__table thead th {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fpcc-ink-faint);
	border-bottom: 1px solid var(--fpcc-line);
	white-space: nowrap;
}

.fpcc-tbl__num {
	text-align: right;
}

.fpcc-tbl__mono {
	font-family: var(--fpcc-tbl-mono);
	font-variant-numeric: tabular-nums;
	color: var(--fpcc-ink);
}

.fpcc-tbl__table tbody tr + tr {
	border-top: 1px solid var(--fpcc-line);
}

/* Zebra on the middle role only, as in the comp — it separates three rows of
   near-identical shape without turning the table into stripes. */
.fpcc-tbl__table tbody tr:nth-child(even) {
	background: var(--fpcc-bg-sunken);
}

.fpcc-tbl__table tbody th {
	font-weight: 400;
}

.fpcc-tbl__role {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.fpcc-tbl__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fpcc-tbl-color);
	transform: translateY(-1px);
}

.fpcc-tbl__role-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fpcc-tbl__role-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--fpcc-ink);
}

.fpcc-tbl__role-desc {
	font-size: 13px;
	color: var(--fpcc-ink-faint);
}

/* The automation-job row is not a role: no swatch, lighter label, so the eye
   does not read it as a fourth person. */
.fpcc-tbl__row--job .fpcc-tbl__role {
	padding-left: 18px;
}

.fpcc-tbl__row--job .fpcc-tbl__role-name {
	font-weight: 400;
	color: var(--fpcc-ink-soft);
}

.fpcc-tbl__cost {
	font-family: var(--fpcc-tbl-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--fpcc-accent-ink);
	white-space: nowrap;
}

/* ---------- Empty state ---------- */

.fpcc-tbl__card--empty {
	padding: 30px 20px;
}

.fpcc-tbl__empty {
	font-size: 15px;
	color: var(--fpcc-ink-soft);
	text-align: center;
}

/* ---------- Footnote ---------- */

.fpcc-tbl__note {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fpcc-ink-faint);
}

/* ---------- Refetch states ---------- */

.fpcc-tbl.is-loading .fpcc-tbl__card {
	opacity: .55;
	transition: opacity .15s ease;
}

/* A refetch that failed leaves the previous region's figures on screen. They
   are coherent but no longer match the calculator beside them, so say so
   rather than letting them pass as current. */
.fpcc-tbl.is-stale .fpcc-tbl__note::after {
	content: " " attr(data-fpcc-stale-note);
	color: var(--fpcc-buffer);
	font-weight: 600;
}

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

@media (max-width: 760px) {
	.fpcc-tbl.is-js .fpcc-tbl__tabs {
		display: flex;
		border-radius: var(--fpcc-radius);
	}

	.fpcc-tbl__table th,
	.fpcc-tbl__table td {
		padding: 14px 13px;
	}

	.fpcc-tbl__table thead th {
		font-size: 10px;
		letter-spacing: .05em;
	}

	.fpcc-tbl__role-desc {
		display: none;
	}

	.fpcc-tbl__row--job .fpcc-tbl__role {
		padding-left: 0;
	}
}

@media (max-width: 520px) {
	.fpcc-tbl__tab {
		padding: 7px 13px;
		font-size: 13px;
	}

	/* Sustained CU is the column a phone can most afford to lose: it is the
	   input to the next column rather than an answer on its own. */
	.fpcc-tbl__table thead th:nth-child(2),
	.fpcc-tbl__table tbody td:nth-child(2) {
		display: none;
	}

	.fpcc-tbl__table th,
	.fpcc-tbl__table td {
		padding: 13px 11px;
	}

	.fpcc-tbl__role-name {
		font-size: 14px;
	}
}

/* ==========================================================================
   Inline values — [fpcc_value]
   ========================================================================== */

/* Deliberately unstyled: these sit inside the host page's own sentences and
   must inherit its type. The class exists as a hook, not as a look. */
.fpcc-value {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Only ever seen by someone who can edit the page. A silently empty span in
   the middle of a sentence is how a typo reaches production. */
.fpcc-value--error {
	padding: 1px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85em;
	white-space: normal;
	color: #8a5200;
	background: #fff5e5;
	border: 1px solid #e29a33;
	border-radius: 4px;
}