/* PanelCalc design system v2 — single source of truth.
   One button family, one hero system, one photo treatment, no inline styles.
   Loaded last; authoritative over all earlier layers. */

:root {
	--pc-panel: #0B1C26;
	--pc-panel-2: #12303C;
	--pc-rail: #0E7490;
	--pc-signal: #38BDF8;
	--pc-amber: #F5A623;
	--pc-amber-strong: #B45309;
	--pc-paper: #F4F6F7;
	--pc-card: #FFFFFF;
	--pc-ink: #0B1C26;
	--pc-copy: #334E5A;
	--pc-faint: #6B8490;
	--pc-line: #D3E0E4;
	--pc-hero-copy: #C9D6DC;
}

/* ============ ONE BUTTON FAMILY ============ */
.pc-button,
.pc-header-cta,
.pc-header-link.pc-header-link--cta {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
	padding: 0 20px;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.pc-button:active, .pc-header-cta:active { transform: translateY(1px); }

/* primary = amber on dark, amber-bordered on light — same token everywhere */
.pc-button-primary,
.pc-header-cta {
	background: var(--pc-amber);
	border-color: var(--pc-amber);
	color: #0B1C26;
}
.pc-button-primary:visited, .pc-header-cta:visited { color: #0B1C26; }
.pc-button-primary:hover, .pc-header-cta:hover {
	background: #FFB93E;
	border-color: #FFB93E;
	color: #0B1C26;
	box-shadow: 0 2px 14px rgba(245, 166, 35, 0.4);
}

/* secondary = outline; on dark heroes it inverts via .on-dark */
.pc-button-secondary {
	border-color: var(--pc-line);
	background: var(--pc-card);
	color: var(--pc-panel);
}
.pc-button-secondary:hover {
	border-color: var(--pc-rail);
	color: var(--pc-rail);
	box-shadow: none;
}
.on-dark .pc-button-secondary,
.pc-button-secondary.on-dark {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #FFFFFF;
}
.on-dark .pc-button-secondary:hover,
.pc-button-secondary.on-dark:hover {
	border-color: var(--pc-amber);
	color: var(--pc-amber);
}

/* tertiary = quiet */
.pc-button-tertiary {
	border-color: var(--pc-line);
	background: var(--pc-paper);
	color: var(--pc-ink);
}
.pc-button-tertiary:hover { border-color: var(--pc-rail); color: var(--pc-rail); }

/* header compact variant — same family, smaller */
.pc-header-cta { min-height: 40px; padding: 0 14px; font-size: 0.78rem; }
.pc-header-link {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--pc-copy);
	text-decoration: none;
}
.pc-header-link:hover { color: var(--pc-rail); }

/* kill legacy navy-button + page-shell overrides → single family wins */
.pc-page-shell a.pc-button-primary,
.pc-page-shell a.pc-button-primary:hover,
.pc-page-shell a.pc-button-primary:visited {
	color: #0B1C26;
}

/* ============ ONE HERO SYSTEM ============ */
.pc-hero-band {
	background:
		repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0 2px, transparent 2px 72px),
		radial-gradient(900px 380px at 78% 18%, rgba(245, 166, 35, 0.18), transparent 70%),
		linear-gradient(180deg, var(--pc-panel-2) 0%, var(--pc-panel) 100%);
	border-bottom: 4px solid var(--pc-amber);
	color: #F4F1E8;
}
.pc-hero-band h1 { color: #FFFFFF; letter-spacing: -0.02em; text-wrap: balance; }
.pc-hero-band .pc-lede { color: var(--pc-hero-copy); }
.pc-hero-band .pc-eyebrow { color: var(--pc-amber); letter-spacing: 0.14em; }

/* ============ ONE PHOTO TREATMENT ============ */
.pc-hero__media,
.pc-page-intro__media,
.pc-detail-hero__media {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
	background: #FFFFFF;
}
.pc-hero__media img,
.pc-page-intro__media img,
.pc-detail-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* inline SVG hero art: keep vector crisp inside the photo card frame */
.pc-hero__art svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 13px;
}
.pc-photo-credit {
	margin: 0;
	padding: 8px 14px;
	font-size: 0.68rem;
	color: var(--pc-faint);
	background: #FFFFFF;
	border-top: 1px solid var(--pc-line);
}
.on-dark .pc-photo-credit, .pc-hero-band .pc-photo-credit { color: var(--pc-faint); }

/* ============ LAYOUT TOKENS (replace inline paddings) ============ */
.pc-section-pad { padding-top: 72px; }
.pc-bleed-inner-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 44px 32px 36px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
}
.pc-footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 32px 32px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px 28px;
}

/* ============ TYPE SCALE (single) ============ */
body { font-variant-numeric: tabular-nums; }
h1 { letter-spacing: -0.02em; text-wrap: balance; }
.pc-eyebrow, .pc-card__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
code, kbd, .pc-mono {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

/* ============ CARDS + METRICS (single) ============ */
.pc-card:hover { border-color: var(--pc-rail); box-shadow: 0 4px 18px rgba(14, 116, 144, 0.14); }
.pc-card__title { color: var(--pc-panel); }
.pc-card__topline span {
	border-color: var(--pc-rail);
	background: #EAF3F5;
	color: var(--pc-rail);
	font-weight: 800;
}
.calculator-results .pc-metric,
.pc-results .pc-metric,
.pc-metric { border-left: 4px solid var(--pc-amber); }
.pc-table th, table.pc-table th { background: var(--pc-panel); color: #FFFFFF; }
.pc-table tr:nth-child(even) td, table.pc-table tr:nth-child(even) td { background: #F2F7F8; }

/* ============ FOOTER ============ */
.pc-site-footer, .site-footer { border-top: 4px solid var(--pc-amber); }
.pc-photo-attribution { font-size: 0.72rem; color: var(--pc-faint); }
.pc-photo-attribution a { color: inherit; }

@media (max-width: 820px) {
	.pc-bleed-inner-grid { grid-template-columns: 1fr; }
	.pc-hero__media img, .pc-page-intro__media img { aspect-ratio: 16 / 10; }
}

/* page-intro bands (migrated from inline tone vars) */
.pc-page-intro-band {
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 48px calc(50% - 50vw);
	border-radius: 0;
	position: relative;
}
.pc-page-intro-band.pc-band-light {
	background: #EDF3F4;
	border-bottom: 1px solid var(--pc-line);
}
.pc-page-intro__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 32px 68px;
	text-align: center;
}
.pc-page-intro__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.pc-hero-title { max-width: 16ch; }

/* mobile nav (migrated from inline styles) */
.pc-mobile-nav { display: none; flex-basis: 100%; }
.pc-mobile-nav__summary { cursor: pointer; padding: 10px 0; font-size: 0.82rem; font-weight: 800; }
.pc-mobile-nav__list { display: grid; gap: 4px; padding: 4px 0 12px; }
.pc-mobile-nav__link { font-weight: 800; padding: 6px 0; text-decoration: none; color: var(--pc-ink); }

/* primary nav (migrated from inline-critical styles) */
.pc-site-nav { position: static; }
.pc-nav-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.pc-nav-item { list-style: none; }
.pc-nav-link {
	display: inline-block;
	padding: 10px 0;
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
	color: var(--pc-ink);
}
.pc-nav-link--top { display: inline-flex; align-items: center; gap: 6px; }
.pc-nav-caret { font-size: 0.65rem; }
.pc-nav-has-mega { position: static; }
.pc-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	display: none;
	background: var(--pc-panel);
	border-top: 4px solid var(--pc-amber);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
	z-index: 60;
}
.pc-mega__inner {
	max-width: 1200px; margin: 0 auto; padding: 28px 32px 32px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 28px;
}
.pc-mega__group { margin: 0 0 10px; }
.pc-mega__group-link {
	color: var(--pc-amber); font-size: 0.72rem; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.pc-mega__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pc-mega__item { list-style: none; }
.pc-mega__link { display: block; padding: 6px 0; color: #E6E9EE; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.pc-mega__link:hover { color: var(--pc-amber); }
.pc-breadcrumbs--center { justify-content: center; }
.pc-relations-subtitle { margin-top: 36px; }

/* hero icon tiles (lucide stroke icons, no illustration art) */
.pc-hero__tiles { background: transparent; border: none; box-shadow: none; overflow: visible; }
.pc-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.pc-tile {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 14px;
	padding: 20px 18px;
	display: grid;
	gap: 6px;
	justify-items: start;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.pc-tile svg, .pc-tile .lucide {
	width: 26px;
	height: 26px;
	color: var(--pc-rail);
}
.pc-tile:nth-child(3n+1) svg, .pc-tile:nth-child(3n+1) .lucide { color: var(--pc-amber-strong); }
.pc-tile strong {
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	color: var(--pc-panel);
	font-variant-numeric: tabular-nums;
}
.pc-tile span { font-size: 0.72rem; color: var(--pc-faint); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 820px) {
	.pc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* header is dark: nav + sign-in links must be light (were dark-on-dark) */
.pc-site-header { position: relative; }
.pc-nav-link { color: #E6E9EE; }
.pc-nav-link:hover { color: var(--pc-amber); }
.pc-site-nav a[aria-current="page"] { color: var(--pc-amber); }
.pc-header-link { color: #C9D6DC; }
.pc-header-link:hover { color: var(--pc-amber); }

/* calculator hero: true center, no shell offset */
.pc-tool-header.pc-page-intro-band .pc-page-intro__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px 32px 68px;
	display: flex;
	justify-content: center;
}
.pc-tool-header__copy {
	min-width: 0;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pc-tool-header__copy h1 { text-align: center; }
.pc-tool-header__copy .pc-lede { text-align: center; max-width: 640px; }

/* kill legacy 2-col tool-header grid + left-aligned h1 inside centered band */
.pc-tool-header.pc-page-intro-band {
	display: block;
	max-width: none;
	padding: 0;
}
.pc-tool-header.pc-page-intro-band h1 {
	margin-left: auto;
	margin-right: auto;
	letter-spacing: -0.02em;
}

/* directory filter bar: one count line + pill nav (replaces list-meta + text nav) */
.pc-filterbar {
	max-width: var(--pc-content);
	margin: 0 auto 32px;
	padding: 0 var(--pc-gutter);
	display: grid;
	gap: 14px;
}
.pc-filterbar__count {
	margin: 0;
	color: var(--pc-faint);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pc-filterbar .pc-topic-nav,
.pc-filterbar .pc-calculator-category-nav {
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pc-filterbar .pc-topic-nav a {
	min-height: 0;
	padding: 8px 14px;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	background: var(--pc-card, #FFFFFF);
	color: var(--pc-copy);
	font-size: 0.78rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pc-filterbar .pc-topic-nav a:hover {
	border-color: var(--pc-rail);
	color: var(--pc-rail);
}
.pc-filterbar .pc-topic-nav a.is-current {
	border-color: var(--pc-panel);
	background: var(--pc-panel);
	color: #FFFFFF;
}
.pc-filterbar__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(14, 116, 144, 0.12);
	color: var(--pc-rail);
	font-size: 0.7rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.pc-filterbar .pc-topic-nav a.is-current .pc-filterbar__n {
	background: var(--pc-amber);
	color: var(--pc-panel);
}

/* education slot: reading-width explainer directly above the disclaimer */
.pc-calculator-education {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--pc-line);
	color: var(--pc-copy);
}
.pc-calculator-education h2,
.pc-calculator-education h3 { color: var(--pc-panel); }

/* calculator hero slims down so the tool reaches the first screen */
.pc-tool-header.pc-page-intro-band .pc-page-intro__inner {
	padding: 36px 32px 40px;
}
.pc-tool-header.pc-page-intro-band h1 {
	font-size: 2rem;
}