/*
Theme Name: ATAR Calculator Online (atar-calculator-online-theme-v1)
Theme URI: https://atarcalculatoronline.com
Author: WP-Flash | SerpZenith
Author URI: https://wpflash.site
Description: Bespoke theme for ATAR Calculator Online. Calculators for every Australian state built on official 2025 admissions centre data. Built with WP-Flash v4.0.
Version: 1.0.8
Requires at least: 6.4
Requires PHP: 7.4
License: Private
Text Domain: atar-calculator-online-theme-v1
*/

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("assets/fonts/plus-jakarta-sans.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* =====================================================================
   TOKENS
   ===================================================================== */
:root {
	--navy: #1B2A4A;
	--navy-2: #24365E;
	--teal: #14B8A6;
	--teal-ink: #0F766E;
	--amber: #F5A524;
	--amber-soft: #FDF1DA;
	--paper: #FAF8F4;

	--bg: var(--paper);
	--surface: #FFFFFF;
	--surface-2: #F3F0E9;
	--text: #1B2A4A;
	--muted: #556079;
	--border: #E4DED2;
	--link: var(--teal-ink);
	--focus: #0F766E;
	--ok-bg: #E3F6F3;
	--ok-ink: #0B5F58;
	--est-bg: #FDF1DA;
	--est-ink: #7A4A00;
	--chk-bg: #ECEEF4;
	--chk-ink: #3A4560;
	--up: #0B5F58;
	--down: #9A3412;

	--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--radius: 10px;
	--radius-lg: 16px;
	--shadow: 0 1px 2px rgba(27, 42, 74, .06), 0 6px 20px rgba(27, 42, 74, .06);
	--container: 1180px;
	--prose: 760px;
}
:root[data-theme="dark"] {
	--bg: #0E1628;
	--surface: #15213B;
	--surface-2: #1B2947;
	--text: #E8ECF4;
	--muted: #A4AEC4;
	--border: #2A3A60;
	--link: #2DD4BF;
	--focus: #2DD4BF;
	--ok-bg: #0F3B3A;
	--ok-ink: #8FF0E2;
	--est-bg: #3D2C0C;
	--est-ink: #FFD48A;
	--chk-bg: #243354;
	--chk-ink: #C9D2E6;
	--up: #5EEAD4;
	--down: #FDBA74;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0E1628;
		--surface: #15213B;
		--surface-2: #1B2947;
		--text: #E8ECF4;
		--muted: #A4AEC4;
		--border: #2A3A60;
		--link: #2DD4BF;
		--focus: #2DD4BF;
		--ok-bg: #0F3B3A;
		--ok-ink: #8FF0E2;
		--est-bg: #3D2C0C;
		--est-ink: #FFD48A;
		--chk-bg: #243354;
		--chk-ink: #C9D2E6;
		--up: #5EEAD4;
		--down: #FDBA74;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
	}
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(23px, 2.8vw, 30px); margin-top: 1.8em; }
h3 { font-size: 20px; margin-top: 1.5em; font-weight: 700; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-logo img { width: 190px; height: auto; }
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .logo-light { display: none !important; }
	:root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
.primary-nav { margin-left: auto; }
.nav-links { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--surface-2); }
.header-actions { display: flex; gap: 6px; margin-left: 8px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .i-sun { display: block; }
	:root:not([data-theme="light"]) .i-moon { display: none; }
}
.nav-toggle { display: none; }
.mobile-nav { display: none; border-top: 1px solid var(--border); }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 20px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mobile-nav a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; background: var(--surface-2); }
.state-bar { background: var(--navy); color: #fff; }
.state-bar .container { display: flex; align-items: center; gap: 14px; min-height: 44px; overflow-x: auto; scrollbar-width: none; }
.state-bar .container::-webkit-scrollbar { display: none; }
.state-bar-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #A8F0E6; white-space: nowrap; }
.state-bar ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.state-bar a { display: block; white-space: nowrap; padding: 6px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.state-bar a:hover { background: var(--navy-2); }
.state-bar a[aria-current="page"] { background: var(--amber); color: var(--navy); }
@media (max-width: 900px) {
	.primary-nav { display: none; }
	.nav-toggle { display: inline-grid; }
	.header-actions { margin-left: auto; }
	.site-logo img { width: 168px; }
}

/* =====================================================================
   PAGE HEAD
   ===================================================================== */
.art-head { padding: 28px 0 22px; border-bottom: 1px solid var(--border); background: var(--surface); }
.art-head .container > * { max-width: 860px; }
.art-head-calc { padding-bottom: 16px; }
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border); }
.breadcrumbs a { color: var(--muted); }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 8px; }
:root[data-theme="dark"] .kicker { color: #5EEAD4; }
.dek { font-size: 19px; color: var(--muted); margin: 0 0 14px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.byline .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.byline .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.byline .verified { color: var(--ok-ink); font-weight: 600; }
.home-hero { background: var(--navy); color: #fff; padding: 40px 0 34px; }
.home-hero h1 { color: #fff; max-width: 820px; }
.home-hero .dek { color: #C9D3E8; max-width: 760px; }
.home-hero .kicker { color: #A8F0E6; }

/* =====================================================================
   LAYOUT + PROSE
   ===================================================================== */
.content-wrap { padding-top: 28px; padding-bottom: 56px; }
.content-wrap.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.prose { max-width: var(--prose); min-width: 0; }
.is-calc .prose, .content-wrap.is-calc .prose { max-width: none; }
.is-calc .prose > :not(.calc):not(.table-wrap):not(.table-tools):not(.card-grid):not(.state-panel) { max-width: var(--prose); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--teal); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.page-figure { margin: 0 0 24px; }
.page-figure img { border-radius: var(--radius-lg); width: 100%; }
.quick-answer { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--amber); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 24px; box-shadow: var(--shadow); }
.quick-answer p:last-child { margin: 0; }
.callout { background: var(--surface-2); border-radius: var(--radius); padding: 14px 18px; margin: 1.2em 0; }
.callout-warn { background: var(--est-bg); color: var(--est-ink); }
.aside-sticky { position: sticky; top: 130px; display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.panel h2 { font-size: 15px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.1em; font-size: 15px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--link); text-decoration: underline; }
.panel-cta { background: var(--navy); border-color: var(--navy); }
.panel-cta h2 { color: #A8F0E6; }
.aside-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aside-states a { display: block; padding: 8px 12px; border-radius: 8px; background: var(--navy-2); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.aside-states a:hover { background: var(--teal-ink); }
@media (max-width: 1000px) {
	.content-wrap.has-aside { display: block; }
	.aside { display: none; }
}

/* =====================================================================
   BADGES + SOURCE NOTE
   ===================================================================== */
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; vertical-align: middle; }
.badge-official { background: var(--ok-bg); color: var(--ok-ink); }
.badge-estimate { background: var(--est-bg); color: var(--est-ink); }
.badge-verify { background: var(--chk-bg); color: var(--chk-ink); }
.source-note { font-size: 14px; color: var(--muted); margin: 10px 0 18px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--amber-soft); color: #7A4A00; margin-left: 4px; }

/* =====================================================================
   TABLES
   ===================================================================== */
.table-wrap { overflow-x: auto; margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
caption { caption-side: top; text-align: left; padding: 12px 14px; font-size: 14px; color: var(--muted); font-weight: 600; }
th, td { padding: 9px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: var(--surface-2); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 0; white-space: nowrap; position: sticky; top: 0; }
tbody th { font-weight: 600; }
.data-table td.up { color: var(--up); font-weight: 700; }
.data-table td.down { color: var(--down); }
.data-table td.strong { font-weight: 700; }
.table-tools { margin: 14px 0 8px; }
.table-filter, .calc input, .calc select { font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%; }
.table-filter { max-width: 340px; }
.table-filter:focus, .calc input:focus, .calc select:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }

/* =====================================================================
   CALCULATOR
   ===================================================================== */
.calc { margin: 0 0 32px; }
.calc-loading { padding: 40px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.calc-off { background: var(--est-bg); color: var(--est-ink); padding: 18px 20px; border-radius: var(--radius-lg); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.calc-form, .calc-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.calc-result { position: sticky; top: 124px; }
.calc-title { font-size: 21px; margin: 0 0 4px; }
.calc-help { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.calc-rows { display: grid; gap: 10px; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px 40px; gap: 8px; align-items: center; }
.calc-row:has(.calc-credits) { grid-template-columns: minmax(0, 1fr) 120px 110px 40px; }
.calc-fixed { font-size: 14px; color: var(--muted); padding: 0 6px; }
.calc-remove { width: 40px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.calc-remove:hover { color: var(--down); border-color: var(--down); }
.calc-actions { display: flex; gap: 10px; margin-top: 14px; }
.btn { font: inherit; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; min-height: 44px; border-radius: 10px; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--teal-ink); color: var(--teal-ink); }
:root[data-theme="dark"] .btn-ghost { border-color: #2DD4BF; color: #2DD4BF; }
.btn-text { background: transparent; color: var(--muted); }
.calc-big { display: grid; gap: 2px; padding: 16px 18px; border-radius: 12px; background: var(--navy); color: #fff; margin-bottom: 14px; }
.calc-big-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A8F0E6; }
.calc-big-num { font-size: clamp(44px, 6vw, 60px); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--amber); }
.calc-agg { font-size: 15px; color: #D5DCEC; }
.calc-break { font-size: 14px; }
.calc-break th, .calc-break td { padding: 7px 10px; }
.calc-break tr:not(.is-used) td { color: var(--muted); }
.calc-msg { margin: 0; color: var(--muted); }
.calc-notes { font-size: 14px; color: var(--muted); padding-left: 1.1em; margin: 6px 0 10px; }
.calc-disclaimer { font-size: 13px; color: var(--muted); margin: 0; border-top: 1px solid var(--border); padding-top: 10px; }
.rev-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rev-top label { font-size: 14px; font-weight: 600; display: grid; gap: 4px; }
.rev-subs { display: grid; gap: 8px; }
.rev-subs .calc-row { grid-template-columns: 1fr; }
.rev-subs label { font-size: 14px; font-weight: 600; display: grid; gap: 4px; }
.state-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.state-tabs button { font: inherit; font-weight: 700; padding: 10px 18px; min-height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.state-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.is-home .state-tabs { margin-top: -6px; }
@media (max-width: 860px) {
	.calc-grid { grid-template-columns: 1fr; }
	.calc-result { position: static; }
}
@media (max-width: 520px) {
	.calc-row { grid-template-columns: minmax(0, 1fr) 96px 40px; }
	.calc-row:has(.calc-credits) { grid-template-columns: minmax(0, 1fr) 96px 40px; }
	.calc-row:has(.calc-credits) .calc-name { grid-column: 1 / -1; }
	.calc-form, .calc-result { padding: 16px; }
	.rev-top { grid-template-columns: 1fr; }
}

/* =====================================================================
   CARDS, FAQ, RELATED, UPDATE LOG
   ===================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 16px 0 28px; }
.card { display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.card-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-ink); }
:root[data-theme="dark"] .card-kicker { color: #5EEAD4; }
.card-title { font-weight: 800; font-size: 17px; line-height: 1.3; }
.card-text { font-size: 14px; color: var(--muted); }
.faq { margin: 2em 0; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; }
.faq-item summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--teal-ink); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 18px 14px; }
.faq-answer p:last-child { margin: 0; }
.related { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 8px; }
.related ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.related a { display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; font-weight: 700; color: var(--text); }
.related a:hover { border-color: var(--teal); }
.rel-desc { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.update-log { margin-top: 32px; font-size: 15px; }
.update-log ul { list-style: none; padding: 0; }
.update-log time { font-weight: 700; margin-right: 8px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--navy); color: #C9D3E8; padding: 44px 0 24px; margin-top: 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { font-size: 15px; margin-top: 14px; max-width: 340px; }
.site-footer h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #A8F0E6; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-legal { border-top: 1px solid #2E416C; margin-top: 32px; padding-top: 18px; font-size: 13px; color: #9FAACA; }
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	body { font-size: 16px; }
	.container { padding: 0 16px; }
	.footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.card { transition: none; }
	.card:hover { transform: none; }
}
@media print {
	.site-header, .site-footer, .aside, .calc-actions, .calc-remove { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ===== Calculator v2 (1.0.3): picker, row chips, gauge, dock, motion ===== */
.calc-row { grid-template-areas: "sub score rm" "meta meta meta"; row-gap: 4px; padding: 6px; margin: -6px; border-radius: 12px; transition: background-color .2s ease; }
.calc-row > .calc-pick, .calc-row > .calc-sub, .calc-row > .calc-name { grid-area: sub; }
.calc-row > .calc-score-wrap { grid-area: score; }
.calc-row > .calc-remove { grid-area: rm; }
.calc-row:has(.calc-credits) { grid-template-areas: "sub cr score rm" "meta meta meta meta"; }
.calc-row > .calc-credits { grid-area: cr; }
.calc-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.calc-meta:empty { display: none; }
.calc-row.is-full { background: color-mix(in srgb, var(--teal) 7%, transparent); }
.chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; animation: wpf-pop .25s ease both; }
.chip-ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip-part { background: var(--est-bg); color: var(--est-ink); }
.chip-out { background: var(--chk-bg); color: var(--chk-ink); }
.chip-warn { background: #FDE8E1; color: var(--down); }
.calc-score { text-align: center; font-variant-numeric: tabular-nums; }
.calc-pick { position: relative; min-width: 0; }
.calc .calc-pick-in { padding-right: 34px; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23556079' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m14 14-3.2-3.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.calc-pick.has-val .calc-pick-in { background-image: none; font-weight: 600; }
.calc-pick-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; display: none; }
.calc-pick.has-val:focus-within .calc-pick-clear, .calc-pick.has-val:hover .calc-pick-clear { display: block; }
@media (hover: none) { .calc-pick.has-val:hover:not(:focus-within) .calc-pick-clear { display: none; } }
.calc-pick-clear:hover { color: var(--down); background: var(--surface-2); }
.calc-pick-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(27, 42, 74, .18); animation: wpf-drop .14s ease-out both; }
.calc-pick-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.3; }
.calc-pick-list li.is-active, .calc-pick-list li:hover { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.calc-pick-list li[aria-selected="true"] { font-weight: 700; color: var(--teal-ink); }
.calc-pick-none { color: var(--muted); cursor: default !important; }
.calc-big { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, var(--navy-2) 0%, var(--navy) 55%); animation: wpf-rise .35s ease both; }
.calc-big::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .28), transparent 70%); pointer-events: none; }
.calc-gauge { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.calc-gauge-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--amber)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.calc-gauge-scale { display: flex; justify-content: space-between; font-size: 11px; color: #9FB0CF; margin-top: 4px; font-variant-numeric: tabular-nums; }
.calc-share { margin-top: 10px; padding-left: 0; }
.calc-dock { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 10px 30px rgba(14, 22, 40, .35); transform: translateY(140%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.calc-dock.is-on { transform: translateY(0); }
.calc-dock-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A8F0E6; }
.calc-dock-num { font-size: 26px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; margin-right: auto; }
.calc-dock-btn { font: inherit; font-weight: 700; font-size: 14px; color: var(--navy); background: #fff; border: 0; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
@media (max-width: 860px) { .calc-dock { display: flex; } }

/* Hero motion: soft drifting light on navy heroes */
.home-hero, .art-head-calc { position: relative; isolation: isolate; overflow: hidden; }
.home-hero::before, .home-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.home-hero::before { width: 520px; height: 520px; right: -120px; top: -220px; background: radial-gradient(circle, rgba(20, 184, 166, .55), transparent 65%); animation: wpf-drift 18s ease-in-out infinite alternate; }
.home-hero::after { width: 420px; height: 420px; left: 30%; bottom: -260px; background: radial-gradient(circle, rgba(245, 165, 36, .35), transparent 65%); animation: wpf-drift 22s ease-in-out infinite alternate-reverse; }
.state-tabs button { transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; }
.state-tabs button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.calc-form, .calc-result { transition: box-shadow .25s ease; }
.calc-form:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent), var(--shadow); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@keyframes wpf-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, 40px, 0) scale(1.15); } }
@keyframes wpf-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes wpf-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes wpf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
	.calc-row { grid-template-columns: minmax(0, 1fr) 84px 40px; }
	.calc-row:has(.calc-credits) { grid-template-areas: "sub sub sub" "cr score rm" "meta meta meta"; grid-template-columns: minmax(0, 1fr) 84px 40px; }
	.calc-pick-list { max-height: 50vh; }
	body:has(.calc-dock.is-on) .site-footer { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
	.home-hero::before, .home-hero::after, .chip, .calc-pick-list, .calc-big { animation: none; }
	.calc-gauge-fill, .calc-dock, .reveal { transition: none; }
	.reveal { opacity: 1; transform: none; }
}
@media print { .calc-dock { display: none !important; } }
.calc-big.is-empty .calc-big-num { color: rgba(255, 255, 255, .35); }
.calc-steps { margin: 4px 0 0; padding-left: 1.3em; color: var(--muted); font-size: 15px; display: grid; gap: 6px; }
/* Gain column, tip, adjustment points, selection rank (1.0.4) */
.calc-gain { color: var(--muted); font-variant-numeric: tabular-nums; }
.calc-gain.is-up { color: var(--up); font-weight: 700; }
.calc-tip { font-size: 13.5px; color: var(--muted); margin: 8px 0 10px; }
.calc-adj { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.calc-adj summary { cursor: pointer; font-weight: 700; color: var(--teal-ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.calc-adj summary::-webkit-details-marker { display: none; }
.calc-adj summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 800; }
.calc-adj[open] summary::before { content: "−"; }
.calc-adj-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 600; }
.calc .calc-adj-in { width: 96px; text-align: center; }
.calc-adj-help { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.calc-rank { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: -4px 0 6px; animation: wpf-rise .3s ease both; }
.calc-rank > div { border-radius: 12px; padding: 12px 14px; background: var(--surface-2); text-align: center; }
.calc-rank > div.is-rank { background: var(--ok-bg); }
.calc-rank-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.calc-rank .is-rank .calc-rank-label { color: var(--ok-ink); }
.calc-rank-num { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.calc-rank .is-rank .calc-rank-num { color: var(--ok-ink); }
.calc-rank-plus { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
/* SACE grade tool (1.0.6) */
.calc-row.sg-row { grid-template-columns: minmax(0, 1fr) 96px 96px 40px; grid-template-areas: "name w g rm"; }
.calc-row.sg-row > .calc-name { grid-area: name; }
.calc-row.sg-row > .sg-w { grid-area: w; text-align: center; }
.calc-row.sg-row > .sg-grade { grid-area: g; }
.calc-row.sg-row > .calc-remove { grid-area: rm; }
.sg-ext { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 14px; margin: 16px 0 0; }
.sg-ext legend { font-weight: 700; padding: 0 6px; }
.sg-ext .rev-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sg-ext label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
@media (max-width: 520px) {
	.calc-row.sg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; grid-template-areas: "name name name" "w g rm"; }
}
.calc-actions { flex-wrap: wrap; }
@media (max-width: 520px) { .sg-ext .rev-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sg-ext label { font-size: 13px; } }
.calc-grid > * { min-width: 0; }
.calc-row > * { min-width: 0; }
.calc-big-num.is-range { font-size: clamp(30px, 4.2vw, 42px); }
/* Images on calculator pages and the homepage hero (1.0.8) */
.page-figure img { height: auto; display: block; box-shadow: var(--shadow); }
.is-calc .prose > .page-figure.is-calc-figure { max-width: var(--prose); }
.home-hero.has-art .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.home-hero-art img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.home-figure-mobile { display: none; }
@media (max-width: 900px) {
	.home-hero.has-art .container { grid-template-columns: 1fr; }
	.home-hero-art { display: none; }
	.home-figure-mobile { display: block; }
}