/* =====================================================================
   MyBank / PICCA calculator - modernized UI
   Calculation engine (mybank.js) is untouched; this file only restyles.
   PICCA score band colors are locked:
   blue #12a6f3, green #00e18c, yellow #ffd700, orange #ff914d,
   red #ff1616, black #000000  (semantic score states only)
   ===================================================================== */

#piccaapp {
	/* palette */
	--se-ink: #1b2333;
	--se-ink-soft: #45506a;
	--se-muted: #6c7789;
	--se-line: #e6ecf4;
	--se-line-strong: #d3dceb;
	--se-surface: #ffffff;
	--se-inset: #f3f7fc;
	--se-inset-2: #eef3fa;
	--se-primary: #1466cc;
	--se-primary-strong: #0f4fa0;
	--se-primary-soft: #e9f1fd;
	--se-accent: #12a6f3;
	/* locked PICCA bands */
	--se-blue: #12a6f3;
	--se-green: #00e18c;
	--se-yellow: #ffd700;
	--se-orange: #ff914d;
	--se-red: #ff1616;
	--se-black: #000000;
	/* elevation (tinted toward brand) */
	--se-shadow-sm: 0 1px 2px rgba(18,54,110,.05), 0 1px 3px rgba(18,54,110,.06);
	--se-shadow-md: 0 8px 24px -10px rgba(18,54,110,.18), 0 2px 6px rgba(18,54,110,.07);
	--se-shadow-lg: 0 20px 48px -16px rgba(18,54,110,.24);
	/* radii + motion */
	--se-r-sm: 10px;
	--se-r: 14px;
	--se-r-lg: 20px;
	--se-pill: 999px;
	--se-ease: cubic-bezier(.23, 1, .32, 1);
	--se-ease-inout: cubic-bezier(.77, 0, .175, 1);
	/* type */
	--se-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--se-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	font-family: var(--se-body);
	color: var(--se-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#piccaapp *, #piccaapp *::before, #piccaapp *::after { box-sizing: border-box; }

/* number cells use tabular figures so columns never jitter */
#piccaapp .table-value,
#piccaapp .output-number,
#piccaapp .donut-percent,
#piccaapp .acepercent,
#piccaapp .expensepercent,
#piccaapp .metricslabel + *,
#piccaapp .summaryselectorbutton__value,
#piccaapp .weekly, #piccaapp .income, #piccaapp .profit, #piccaapp .loss,
#piccaapp .lvr, #piccaapp .gry, #piccaapp .eql, #piccaapp .dir,
#piccaapp .maxloan {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------- layout shell ---------- */
#piccaapp .mybankcontent {
	width: 100%;
	text-align: left;
	color: var(--se-ink);
	font-size: 15px;
	padding: 0;
	margin: 0 0 16px 0;
	background: transparent;
}

#piccaapp p { margin: 8px 0; padding: 0; line-height: 1.6; }

/* Mobile-only build: always a single vertical column (no desktop 2-col grid).
   The iframe host is narrow, so the flow never splits into columns. */
#piccaapp div.fieldsets {
	overflow: visible;
	display: block;
	background: transparent;
}
#piccaapp .se-flow {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 4vw, 20px);
	min-width: 0;
}

#piccaapp div.fieldsets fieldset {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	background: transparent;
}

/* panels */
#piccaapp .se-panel {
	background: var(--se-surface);
	border: 1px solid var(--se-line);
	border-radius: var(--se-r-lg);
	padding: 28px 28px 30px;
	box-shadow: var(--se-shadow-sm);
}
#piccaapp .se-panel--result { box-shadow: var(--se-shadow-md); }
/* Result panels fade+rise gently the moment JS reveals them (display:none ->
   block restarts this animation). Only opacity/transform animate, so the panel
   height never changes and the auto-scroll target stays perfectly still - this
   is what keeps the reveal smooth instead of "rocking". */
#piccaapp .se-panel--result { animation: seRevealUp .42s var(--se-ease) both; }
@keyframes seRevealUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
#piccaapp .se-panel--intro {
	background: linear-gradient(180deg, var(--se-inset), var(--se-surface));
	border-style: dashed;
	border-color: var(--se-line-strong);
	box-shadow: none;
}

/* revealed sections animate up gently */
#piccaapp fieldset { transition: opacity .45s var(--se-ease); }

/* ---------- section headers (replaces gradient pills) ---------- */
#piccaapp .se-head { margin: 0 0 16px; }
#piccaapp fieldset h2 {
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--se-ink);
	margin: 0;
	padding: 0 0 12px 14px;
	position: relative;
	background: none;
	border-radius: 0;
	text-align: left;
}
#piccaapp fieldset h2::before {
	content: "";
	position: absolute;
	left: 0; top: 3px; bottom: 14px;
	width: 4px;
	border-radius: var(--se-pill);
	background: linear-gradient(180deg, var(--se-primary), var(--se-accent));
}
#piccaapp fieldset h2::after {
	content: "";
	position: absolute;
	left: 14px; right: 0; bottom: 0;
	height: 1px;
	background: var(--se-line);
}
#piccaapp .se-head.analysis h2::before { background: linear-gradient(180deg, var(--se-accent), var(--se-primary-strong)); }

#piccaapp fieldset h2.description {
	background: none;
	padding: 0;
	color: var(--se-ink);
	font-size: 18px;
}
#piccaapp fieldset h2.description::before,
#piccaapp fieldset h2.description::after { display: none; }

/* ---------- intro/description panels ---------- */
#piccaapp fieldset div.details { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
#piccaapp .details__icon img { width: 52px; height: 52px; }
#piccaapp .details__body .hint { font-size: 13.5px; color: var(--se-muted); line-height: 1.6; margin-top: 6px; }

/* ---------- fields ---------- */
#piccaapp .se-field { margin-bottom: 4px; }
#piccaapp fieldset div.caption,
#piccaapp fieldset label.caption {
	display: block;
	width: 100%;
	line-height: 1.35;
	margin: 14px 0 6px;
	font-weight: 500;
	font-size: 14px;
	color: var(--se-ink-soft);
}
#piccaapp fieldset div.inputs { width: 100%; padding: 0; margin: 2px 0; text-align: left; font-weight: 400; }
#piccaapp fieldset div.hint { font-size: 12.5px; color: var(--se-muted); margin: 0 0 4px; }
#piccaapp .se-helper { font-size: 12px; color: var(--se-muted); margin-top: 6px; }
#piccaapp .se-helper .maxloan { color: var(--se-primary-strong); font-weight: 600; }
#piccaapp .se-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* text + select inputs */
#piccaapp input[type=text],
#piccaapp input[type=email],
#piccaapp select {
	width: 100%;
	border: 1.5px solid var(--se-line-strong);
	padding: 12px 14px;
	color: var(--se-ink);
	font-family: var(--se-body);
	font-size: 16px;
	line-height: 1.2;
	outline: none;
	border-radius: var(--se-r-sm);
	background: var(--se-surface);
	transition: border-color .18s var(--se-ease), box-shadow .18s var(--se-ease);
	-webkit-appearance: none;
	appearance: none;
}
#piccaapp input[type=text]:hover,
#piccaapp input[type=email]:hover,
#piccaapp select:hover { border-color: #b9c6dc; }
#piccaapp input[type=text]:focus,
#piccaapp input[type=email]:focus,
#piccaapp select:focus,
#piccaapp input[type=text]:focus-visible,
#piccaapp input[type=email]:focus-visible,
#piccaapp select:focus-visible {
	border-color: var(--se-primary);
	box-shadow: 0 0 0 4px var(--se-primary-soft);
}
#piccaapp ::placeholder { color: #aeb8c9; opacity: 1; }

/* select chevron */
#piccaapp .se-select-wrap { position: relative; }
#piccaapp .se-select-wrap::after {
	content: "";
	position: absolute;
	right: 16px; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--se-muted);
	border-bottom: 2px solid var(--se-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
#piccaapp select { padding-right: 40px; cursor: pointer; }
#piccaapp select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--se-ink); }

/* ---------- segmented selector (investment / loan type) ---------- */
#piccaapp .se-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
#piccaapp .se-segment .selectorbutton { position: relative; }
#piccaapp .se-segment input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#piccaapp .se-segment label {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	min-height: 46px;
	padding: 8px 12px;
	background: var(--se-inset);
	color: var(--se-ink-soft);
	cursor: pointer;
	border: 1.5px solid transparent;
	border-radius: var(--se-r-sm);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	transition: background .16s var(--se-ease), color .16s var(--se-ease), border-color .16s var(--se-ease), transform .12s var(--se-ease);
}
#piccaapp .se-segment label span { display: none; }
#piccaapp .se-segment label:active { transform: scale(.985); }
#piccaapp .se-segment input[type="radio"]:checked + label {
	background: var(--se-primary);
	color: #fff;
	border-color: var(--se-primary);
	box-shadow: var(--se-shadow-sm);
}
#piccaapp .se-segment input[type="radio"]:focus-visible + label {
	border-color: var(--se-primary);
	box-shadow: 0 0 0 4px var(--se-primary-soft);
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .se-segment input[type="radio"]:not(:checked) + label:hover { background: var(--se-inset-2); color: var(--se-ink); }
}

/* ---------- image / owner choice cards ---------- */
#piccaapp .se-choice { display: grid; gap: 12px; margin-top: 12px; }
#piccaapp .se-choice--3 { grid-template-columns: repeat(3, 1fr); }
#piccaapp .se-choice--2 { grid-template-columns: repeat(2, 1fr); }
#piccaapp .imageselectorbutton, #piccaapp .ownerselectorbutton { text-align: center; }
#piccaapp .se-choice label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px 12px;
	border: 1.5px solid var(--se-line);
	border-radius: var(--se-r);
	background: var(--se-surface);
	cursor: pointer;
	color: var(--se-ink-soft);
	font-weight: 600;
	font-size: 13.5px;
	transition: border-color .16s var(--se-ease), box-shadow .16s var(--se-ease), transform .12s var(--se-ease), background .16s var(--se-ease);
}
#piccaapp .se-choice input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#piccaapp .se-choice__media {
	display: grid;
	place-items: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--se-inset);
	transition: background .16s var(--se-ease), transform .18s var(--se-ease);
}
#piccaapp .se-choice__media img { width: 38px; height: 38px; }
#piccaapp .se-choice__label { line-height: 1.2; }
#piccaapp .se-choice label:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
	#piccaapp .se-choice label:hover { border-color: var(--se-line-strong); box-shadow: var(--se-shadow-sm); }
	#piccaapp .se-choice label:hover .se-choice__media { background: var(--se-primary-soft); }
}
#piccaapp .se-choice input[type=radio]:checked + .se-choice__media {
	background: var(--se-primary-soft);
	transform: scale(1.04);
}
#piccaapp .se-choice label:has(input:checked) {
	border-color: var(--se-primary);
	color: var(--se-ink);
	box-shadow: 0 0 0 3px var(--se-primary-soft);
}
#piccaapp .se-choice label:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--se-primary-soft); }

/* ---------- range sliders ---------- */
#piccaapp .se-range-wrap { margin: 6px 0 2px; }
#piccaapp .mybank_slider_output { margin-bottom: 2px; }
#piccaapp .output-pad {
	padding: 0 40px;
	min-height: 34px;
	position: relative;
	text-align: center;
	margin: 10px 0 8px;
	font-size: 15px;
	color: var(--se-ink-soft);
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}
#piccaapp .output-number { color: var(--se-ink-soft); }
#piccaapp .output-number span { color: var(--se-primary-strong); font-weight: 700; }

#piccaapp .circle-control {
	height: 34px; width: 34px;
	position: absolute; top: 0;
	border-radius: 50%;
	border: 1.5px solid var(--se-line-strong);
	background: var(--se-surface);
	cursor: pointer;
	touch-action: none;
	transition: border-color .15s var(--se-ease), background .15s var(--se-ease), transform .1s var(--se-ease);
}
#piccaapp .circle-down { left: 0; }
#piccaapp .circle-up { right: 0; }
#piccaapp .circle-control:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
	#piccaapp .circle-control:hover { border-color: var(--se-primary); background: var(--se-primary-soft); }
}
#piccaapp .circle-control:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 4px var(--se-primary-soft); }
#piccaapp .circle-down::after,
#piccaapp .circle-up::after {
	content: ""; position: absolute;
	width: 14px; height: 2.5px; border-radius: 2px;
	background: var(--se-primary-strong);
	top: 50%; left: 50%; margin-top: -1.25px; margin-left: -7px;
}
#piccaapp .circle-up::before {
	content: ""; position: absolute;
	width: 2.5px; height: 14px; border-radius: 2px;
	background: var(--se-primary-strong);
	top: 50%; left: 50%; margin-top: -7px; margin-left: -1.25px;
}

#piccaapp .share_output { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; color: var(--se-muted); margin-top: 8px; }
#piccaapp .share_output span { color: var(--se-primary-strong); font-weight: 700; }

#piccaapp input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 26px;
	background: transparent;
	outline: none;
	cursor: pointer;
	margin: 0; padding: 0;
}
#piccaapp input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--se-pill); background: linear-gradient(90deg, var(--se-primary), var(--se-accent)); }
#piccaapp input[type=range]::-moz-range-track { height: 8px; border-radius: var(--se-pill); background: linear-gradient(90deg, var(--se-primary), var(--se-accent)); }
#piccaapp input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 5px solid var(--se-primary);
	margin-top: -8px;
	box-shadow: var(--se-shadow-sm);
	transition: transform .12s var(--se-ease), box-shadow .15s var(--se-ease);
}
#piccaapp input[type=range]::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 5px solid var(--se-primary);
	box-shadow: var(--se-shadow-sm);
}
#piccaapp input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
#piccaapp input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--se-primary-soft); }

/* ---------- output tables ---------- */
#piccaapp #output-table-container { margin-top: 14px; }
#piccaapp table.output-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14.5px; }
#piccaapp table.output-table td { vertical-align: top; padding: 9px 4px; border-bottom: 1px solid var(--se-line); }
#piccaapp table.output-table tr:last-child td { border-bottom: none; }
#piccaapp table td.table-label { text-align: left; color: var(--se-ink-soft); }
#piccaapp table td.table-value { text-align: right; color: var(--se-ink); font-weight: 600; white-space: nowrap; }

/* loan results: give the figures a padded inset "bubble" for breathing room */
#piccaapp .loanshow .output-table {
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	border-radius: var(--se-r);
	margin-top: 8px;
}
#piccaapp .loanshow .output-table td { padding: 12px 18px; border-bottom-color: rgba(20,102,204,.08); }
#piccaapp .loanshow .output-table tr:first-child td { padding-top: 16px; }
#piccaapp .loanshow .output-table tr:last-child td { padding-bottom: 16px; }
#piccaapp table.output-table td.totals { font-weight: 700; border-top: 2px solid var(--se-line-strong); border-bottom: none; padding-top: 10px; color: var(--se-ink); }
#piccaapp table.output-table td.totals.table-value { color: var(--se-primary-strong); }
#piccaapp table td.table-title { font-weight: 700; font-size: 14px; padding: 6px 0; text-align: center; }
#piccaapp table td.table-label.show { padding-top: 14px; border-bottom: none; }

/* detail sub-rows: indent + muted */
#piccaapp table .pcdetails td.table-label,
#piccaapp table .bfcdetails td.table-label,
#piccaapp table .redetails td.table-label,
#piccaapp table .didetails td.table-label { padding-left: 16px; }
#piccaapp .pcdetails td, #piccaapp .bfcdetails td, #piccaapp .redetails td, #piccaapp .didetails td {
	font-size: 13px; color: var(--se-muted); border-bottom: 1px dashed var(--se-line);
}
#piccaapp .pcdetails td.table-value, #piccaapp .bfcdetails td.table-value,
#piccaapp .redetails td.table-value, #piccaapp .didetails td.table-value { font-weight: 500; color: var(--se-ink-soft); }

#piccaapp .analyticstitle {
	color: var(--se-primary-strong);
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 15px;
	margin: 18px 0 8px;
}

#piccaapp a.ptbshow, #piccaapp a.ctbshow,
#piccaapp a.treshow, #piccaapp a.dishow, #piccaapp a.pcshow, #piccaapp a.bfcshow {
	text-decoration: none;
	color: var(--se-primary);
	font-weight: 600;
	font-size: 13.5px;
	display: inline-flex; align-items: center; gap: 6px;
}
#piccaapp a.ptbshow i, #piccaapp a.ctbshow i { color: var(--se-primary); font-size: 11px; }

/* tax summary tables */
#piccaapp table.output-table.taxsummary th { text-align: center; border: none; padding: 4px 0; }
#piccaapp table.output-table.taxsummary th h2 {
	font-family: var(--se-head);
	color: var(--se-ink);
	background: none;
	font-size: 17px;
	padding: 0 0 6px;
	margin: 6px 0 0;
}
#piccaapp table.output-table.taxsummary th h2::before, #piccaapp table.output-table.taxsummary th h2::after { display: none; }
#piccaapp table.output-table.taxsummary.coowner { display: none; }
#piccaapp .ptbdetails, #piccaapp .ctbdetails { display: none; }
#piccaapp .ptbdetails td, #piccaapp .ctbdetails td { font-size: 13px; }

/* ---------- info boxes ---------- */
#piccaapp .infobox {
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	padding: 12px 14px;
	border-radius: var(--se-r);
	margin: 12px auto 0;
	width: 100%;
	text-align: left;
	font-size: 12.5px;
	color: var(--se-ink-soft);
	line-height: 1.55;
}
#piccaapp .infobox__title { font-weight: 600; color: var(--se-ink); margin-bottom: 8px; }
#piccaapp .infobox__source { text-align: center; font-style: italic; font-size: 10.5px; color: var(--se-muted); margin-top: 8px; }
#piccaapp .infobox table { width: 100%; }
#piccaapp .infobox td { width: 50%; display: inline-flex; align-items: center; font-size: 11px; text-align: left; padding: 5px 0; border: none; }
#piccaapp .infobox td img { padding-right: 8px; }
#piccaapp .infobox.dollarcost { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
#piccaapp .infobox.dollarcost + .infobox.dollarcost { margin-top: 8px; }
#piccaapp .infobox.dollarcost img { width: 34px; height: 34px; flex: none; }

/* ---------- ACE (annual cashflow expenses) ---------- */
#piccaapp .acecaption {
	margin: 6px 0 10px; padding: 0;
	font-family: var(--se-head); font-weight: 600;
	font-size: 17px; line-height: 1.3; color: var(--se-ink);
}
#piccaapp .acecaption img { width: 34px; height: 34px; margin: 0 10px 0 0; vertical-align: middle; }
#piccaapp #aceoutput {
	display: grid;
	grid-template-columns: 40px 1fr auto 40px 1fr auto;
	align-items: center;
	gap: 10px 14px;
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	padding: 20px 22px;
	border-radius: var(--se-r);
	margin-top: 8px;
}
#piccaapp div.aceicon { display: grid; place-items: center; }
#piccaapp div.aceicon img { width: 30px; height: 30px; }
#piccaapp div.acelabel { font-size: 12.5px; line-height: 1.3; color: var(--se-ink-soft); }
#piccaapp div.acelabel span { font-weight: 600; color: var(--se-ink); }
#piccaapp div.acepercent { font-family: var(--se-head); font-size: 22px; font-weight: 600; text-align: right; color: var(--se-ink); }
#piccaapp div#aceother { text-align: center; padding: 12px 0 2px; font-size: 13px; color: var(--se-ink-soft); display: flex; align-items: center; justify-content: center; gap: 8px; }
#piccaapp .blackball { display: inline-block; width: 16px; height: 16px; background: var(--se-black); border-radius: 50%; }

/* ---------- finance summary ---------- */
#piccaapp table.fs_table { margin-top: 16px; }

/* ---------- expenses / who pays ---------- */
#piccaapp fieldset div.weeklylabel {
	margin: 4px 0 14px; padding: 0;
	font-family: var(--se-head); font-weight: 600;
	font-size: 17px; line-height: 1.3; text-align: center; color: var(--se-ink);
}
#piccaapp fieldset div.weeklyoutputbox {
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	padding: 20px 28px; border-radius: var(--se-r-lg);
	margin: 0 auto; max-width: 340px;
}
#piccaapp fieldset div.weeklyoutput { display: flex; align-items: center; gap: 10px; font-family: var(--se-head); font-weight: 600; font-size: 28px; justify-content: center; color: var(--se-ink); }
#piccaapp .weeklyoutput__icon { width: 34px; height: 34px; }

#piccaapp #profit, #piccaapp #loss { text-align: center; font-size: 15px; margin-top: 16px; }
#piccaapp .profit-heading { color: var(--se-ink-soft); margin-bottom: 4px; }
#piccaapp .profit, #piccaapp .loss { font-family: var(--se-head); font-size: 28px; font-weight: 700; margin-right: 10px; }
#piccaapp .profit { color: #059862; }
#piccaapp .loss { color: #cf2020; }
#piccaapp #profit .profitflex, #piccaapp #loss .profitflex { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--se-head); font-size: 26px; font-weight: 700; }
#piccaapp .profit-mini { width: 26px; height: 26px; }
#piccaapp .profit-minus { width: 18px; height: 18px; }
#piccaapp .plsub { font-size: 11px; }

#piccaapp .expensesbreakdown { text-align: center; background: var(--se-inset); border: 1px solid var(--se-line); padding: 20px; border-radius: var(--se-r-lg); margin-top: 14px; }
#piccaapp .smalllabel { font-size: 12px; color: var(--se-muted); margin-bottom: 10px; }
#piccaapp .pieoutput { display: grid; grid-template-columns: 12% 18% 40% 22% 8%; align-items: center; gap: 4px 0; }
#piccaapp .pieoutput .expenselabel { line-height: 1.3; font-size: 14px; text-align: left; color: var(--se-ink-soft); }
#piccaapp .pieoutput .expenselabel span { font-weight: 700; color: var(--se-ink); }
#piccaapp .pieoutput .expensepercent { font-family: var(--se-head); line-height: 1.1; font-size: 26px; font-weight: 600; text-align: right; }
#piccaapp .pieoutput img { width: 46px; height: 46px; }
#piccaapp .profitoutput { text-align: center; background: var(--se-inset); border: 1px solid var(--se-line); padding: 20px; border-radius: var(--se-r-lg); margin-top: 14px; color: var(--se-ink-soft); }
#piccaapp .ownerprofit, #piccaapp .ownerloss { display: none; }

/* ---------- charts (SVG) ---------- */
#piccaapp .circular-chart { display: block; margin: 16px auto; max-width: 78%; max-height: 160px; }
#piccaapp .tax-chart { display: block; margin: 0 auto; max-width: 78%; max-height: 150px; }
#piccaapp .metrics-chart { display: block; margin: 0 auto; max-width: 82%; max-height: 150px; }
#piccaapp .metrics-chart .lvr-text { font-size: 15px; font-weight: 500; }
#piccaapp .metrics-chart .lvr, #piccaapp .metrics-chart .gry, #piccaapp .metrics-chart .eql, #piccaapp .metrics-chart .dir { font-size: 0.32em; line-height: 1; transform: translateY(0.5em); fill: var(--se-ink) !important; font-family: var(--se-head); font-weight: 600; }

/* chart stroke roles (class names are JS contract; hues harmonized) */
#piccaapp .circlea { stroke: #ff5a5f; fill: none; stroke-width: 3.2; }
#piccaapp .circleb { stroke: var(--se-yellow); fill: none; stroke-width: 3.2; }
#piccaapp .circlec { stroke: var(--se-accent); fill: none; stroke-width: 3.2; }
#piccaapp .circled { stroke: var(--se-ink); fill: none; stroke-width: 3.2; }

#piccaapp .circlee { stroke: var(--se-orange); fill: none; stroke-width: 3.6; }
#piccaapp .circlef { stroke: #b32566; fill: none; stroke-width: 3.6; }
#piccaapp .circleg { stroke: #7c5cf0; fill: none; stroke-width: 3.6; }
#piccaapp .circleh { stroke: #2ba6c4; fill: none; stroke-width: 3.6; }
#piccaapp .circlei { stroke: #e6ecf5; fill: none; stroke-width: 3.6; }
#piccaapp .circlej { stroke: var(--se-accent); fill: none; stroke-width: 3; }
#piccaapp .circlek { stroke: var(--se-accent); fill: none; stroke-width: 3; }
#piccaapp .circlel { stroke: var(--se-orange); fill: none; stroke-width: 3; }

/* ACE donut: five discrete slices (JS sets dasharray + dashoffset per slice).
   Butt caps keep the hairline gaps between slices clean - round caps would
   bleed each slice over its neighbour and re-group the colours. */
#piccaapp .circlem, #piccaapp .circlen, #piccaapp .circleo,
#piccaapp .circlep, #piccaapp .circleq {
	fill: none;
	stroke-width: 4;
	stroke-linecap: butt;
	transition: stroke-width .18s var(--se-ease), opacity .18s var(--se-ease), filter .18s var(--se-ease);
}
#piccaapp .circlem { stroke: #7c5cf0; }	/* body corporate */
#piccaapp .circlen { stroke: #07ba26; }	/* management fees */
#piccaapp .circleo { stroke: var(--se-accent); }	/* property rates */
#piccaapp .circlep { stroke: var(--se-black); }	/* other expenses */
#piccaapp .circleq { stroke: #f6bd25; }	/* loan repayments */
#piccaapp .metrics-chart path.circlem.se-seg--hot, #piccaapp .metrics-chart path.circlen.se-seg--hot,
#piccaapp .metrics-chart path.circleo.se-seg--hot, #piccaapp .metrics-chart path.circlep.se-seg--hot,
#piccaapp .metrics-chart path.circleq.se-seg--hot { stroke-width: 5.4; }

#piccaapp .circler { stroke: var(--se-accent); fill: none; stroke-width: 4; }
#piccaapp .circles { stroke: #f0338f; fill: none; stroke-width: 4; }

#piccaapp .orangeball { display: block; margin: 0 auto 6px; width: 18px; height: 18px; background: var(--se-orange); border-radius: 50%; }
#piccaapp .blueball { display: block; margin: 0 auto 6px; width: 18px; height: 18px; background: var(--se-blue); border-radius: 50%; }

#piccaapp .metrics-item { width: 100%; height: auto; margin: 0 auto; text-align: center; }
#piccaapp #metricselector { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: var(--se-ink); }
#piccaapp .metricslabel { font-family: var(--se-head); font-weight: 600; font-size: 14px; text-align: center; color: var(--se-ink); margin-top: 2px; }

/* ---------- PICCA score (signature element) ---------- */
#piccaapp .piccaoutputbox { background: var(--se-inset); border: 1px solid var(--se-line); padding: 14px 26px; border-radius: var(--se-pill); margin: 6px auto 12px; max-width: 280px; }
#piccaapp .piccaoutput { display: flex; align-items: center; gap: 10px; font-family: var(--se-head); font-weight: 600; font-size: 18px; justify-content: center; color: var(--se-ink); }
#piccaapp .piccaoutput__icon { width: 28px; height: 28px; }

#piccaapp .svg-item { width: 200px; height: 200px; font-size: 28px; margin: 14px auto; position: relative; z-index: 2; }
#piccaapp .svg-item .donut-segment { transform-origin: center; stroke: var(--se-ink); transition: stroke-dasharray .6s var(--se-ease); }
#piccaapp .svg-item .donut-text { fill: #ffffff; }
#piccaapp .svg-item .donut-percent { font-family: var(--se-head); font-size: 0.52em; fill: #ffffff; font-weight: 600; line-height: 1; transform: translateY(0.5em); }

/* soft halo behind the score, colored per band (locked colors) */
#piccaapp .svg-item::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 216px; height: 216px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: -1;
	opacity: 0;
	transition: opacity .4s var(--se-ease), background-color .4s var(--se-ease);
}
#piccaapp .svg-item.piccablue::before   { opacity: .16; background-color: var(--se-blue); }
#piccaapp .svg-item.piccagreen::before  { opacity: .16; background-color: var(--se-green); }
#piccaapp .svg-item.piccayellow::before { opacity: .18; background-color: var(--se-yellow); }
#piccaapp .svg-item.piccaorange::before { opacity: .18; background-color: var(--se-orange); }
#piccaapp .svg-item.piccared::before    { opacity: .16; background-color: var(--se-red); }
#piccaapp .svg-item.piccablack::before  { opacity: .12; background-color: var(--se-black); }

/* smiley row */
#piccaapp .piccafaces { background: var(--se-inset); border: 1px solid var(--se-line); padding: 20px 16px; border-radius: var(--se-r-lg); margin: 12px auto; }
#piccaapp #faceselector { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; justify-items: center; }
#piccaapp .faceimg { margin: 0; text-align: center; opacity: .38; transform: scale(.86); transition: opacity .25s var(--se-ease), transform .25s var(--se-ease); }
#piccaapp .faceimg img { vertical-align: middle; width: 34px; height: 34px; }
#piccaapp .faceimg.thisface { opacity: 1; transform: scale(1.12); position: relative; z-index: 2; }
#piccaapp .faceimg.thisface::before {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 50px; height: 50px; border-radius: 50%;
	transform: translate(-50%, -50%); z-index: -1; opacity: .22;
}
#piccaapp .faceimg.level1.thisface::before { background-color: var(--se-blue); }
#piccaapp .faceimg.level2.thisface::before { background-color: var(--se-green); }
#piccaapp .faceimg.level3.thisface::before { background-color: var(--se-yellow); opacity: .3; }
#piccaapp .faceimg.level4.thisface::before { background-color: var(--se-orange); opacity: .26; }
#piccaapp .faceimg.level5.thisface::before { background-color: var(--se-red); }
#piccaapp .faceimg.level6.thisface::before { background-color: var(--se-black); opacity: .16; }

#piccaapp .facelabel { display: none; text-align: center; font-size: 13.5px; font-weight: 500; color: var(--se-ink-soft); margin-top: 12px; line-height: 1.45; }
#piccaapp #ipp, #piccaapp #cip { text-align: center; }

/* PICCA factors */
#piccaapp fieldset div.piccabox { background: var(--se-inset); border: 1px solid var(--se-line); padding: 18px 16px; border-radius: var(--se-r-lg); margin: 0 auto; }
#piccaapp fieldset div.piccabox table { width: 100%; }
#piccaapp fieldset div.piccabox td { text-align: center; font-size: 12px; width: 25%; color: var(--se-ink-soft); padding: 4px 2px; border: none; }
#piccaapp .piccafactors img { width: 40px; height: 40px; }

/* PICCA tip callout */
#piccaapp fieldset div.piccatipbox { margin: 12px auto; }
#piccaapp fieldset div.piccatip {
	display: flex; column-gap: 14px; align-items: center;
	font-size: 12.5px; text-align: left; font-weight: 500; line-height: 1.5;
	color: var(--se-ink-soft);
	background: var(--se-primary-soft);
	border: 1px solid #d3e4fb;
	border-radius: var(--se-r);
	padding: 16px 18px;
}
#piccaapp fieldset div.piccatip strong { color: var(--se-primary-strong); }
/* the icon is the anchor of the callout - it must read at a glance, and the
   wrapper div is a flex child so it needs the same no-shrink treatment */
#piccaapp fieldset div.piccatip > div:first-child { flex: none; display: grid; place-items: center; }
#piccaapp fieldset div.piccatip img { width: 56px; height: 56px; flex: none; display: block; }
#piccaapp fieldset .metrics-item div.piccatip { justify-content: flex-start; }
@media only screen and (max-width: 560px) {
	#piccaapp fieldset div.piccatip img { width: 46px; height: 46px; }
}

/* ---------- property variables tiles ---------- */
#piccaapp #summaryselector { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; color: var(--se-ink); margin-top: 10px; }
#piccaapp .summaryselectorbutton {
	text-align: center;
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	border-radius: var(--se-r);
	padding: 22px 16px;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#piccaapp .summaryselectorbutton img { width: 46px; height: 46px; }
#piccaapp .summaryselectorbutton__label { font-size: 12.5px; color: var(--se-muted); }
#piccaapp .summaryselectorbutton__value { font-family: var(--se-head); font-weight: 600; font-size: 17px; color: var(--se-ink); }

/* ---------- apply / email capture ---------- */
#piccaapp .mybankapplication { display: none; }
#piccaapp .se-apply {
	background: linear-gradient(135deg, var(--se-primary-strong), var(--se-primary));
	border-radius: var(--se-r-lg);
	padding: 22px 24px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
	box-shadow: var(--se-shadow-md);
}
#piccaapp .se-apply__copy { min-width: 0; }
#piccaapp .mybankcontent .inputlabel { margin: 0 0 10px; color: #eaf2ff; font-size: 15px; line-height: 1.45; font-weight: 500; }
#piccaapp .se-apply .textinput input { background: rgba(255,255,255,.96); border-color: transparent; }
#piccaapp .se-apply .textinput input:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.35); border-color: #fff; }
#piccaapp #error { display: none; color: #ffdede; font-weight: 600; font-size: 13px; margin: 8px 0 0; }
#piccaapp .mybankcontent .submit {
	margin: 0;
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
	box-sizing: border-box;
	background: #fff;
	color: var(--se-primary-strong);
	text-align: center;
	cursor: pointer;
	border: none;
	padding: 14px 30px;
	min-height: 52px;
	border-radius: var(--se-r-sm);
	box-shadow: var(--se-shadow-sm);
	transition: transform .12s var(--se-ease), box-shadow .18s var(--se-ease), background .16s var(--se-ease);
	-webkit-appearance: none;
	appearance: none;
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .mybankcontent .submit:hover { box-shadow: var(--se-shadow-lg); transform: translateY(-1px); }
}
#piccaapp .mybankcontent .submit:active { transform: scale(.985); }
#piccaapp .mybankcontent .submit:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.5); }

/* ---------- ajax states (inline, inside the email panel) ---------- */
/* Not scoped to #piccaapp - these must stay hidden even if the markup ever moves
   outside the form, otherwise all three states print at the top of the page. */
.hidedefault { display: none; }

#piccaapp .se-apply__status { grid-column: 1 / -1; }
#piccaapp .se-apply__status:empty { display: none; }
#piccaapp #mybank_ajax_loading,
#piccaapp #mybank_ajax_success,
#piccaapp #mybank_ajax_failure {
	margin: 2px 0 0;
	padding: 12px 16px;
	border-radius: var(--se-r-sm);
	font-size: 14.5px;
	line-height: 1.45;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.28);
	color: #eaf2ff;
	animation: se-lead-in .28s var(--se-ease) both;
}
@keyframes se-lead-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

#piccaapp #mybank_ajax_success { background: rgba(255,255,255,.96); border-color: #fff; }
#piccaapp .se-success {
	display: flex; align-items: center; gap: 10px;
	font-family: 'Poppins', system-ui, sans-serif; font-weight: 600;
	color: var(--se-primary-strong); font-size: 15px;
}
#piccaapp .se-success__tick {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: #0e9f6e; position: relative;
}
#piccaapp .se-success__tick::after {
	content: ""; position: absolute; left: 7px; top: 4px;
	width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
#piccaapp #mybank_ajax_failure { background: rgba(207,32,32,.14); border-color: rgba(255,190,190,.6); }
#piccaapp .se-fail { color: #ffe2e2; font-weight: 600; }

/* the panel has served its purpose - soften it once the lead is captured */
#piccaapp .se-apply--done .se-apply__copy, #piccaapp .se-apply--done .se-apply__action { opacity: .55; }
#piccaapp .mybankcontent .submit.is-sending, #piccaapp .mybankcontent .submit.is-sent { opacity: .7; cursor: default; box-shadow: none; }
#piccaapp .mybankcontent .submit:disabled { transform: none; }

#piccaapp .se-spinner {
	display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
	border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
	border-radius: 50%; animation: se-spin .7s linear infinite; margin-right: 8px;
}
@keyframes se-spin { to { transform: rotate(360deg); } }

/* ---------- utility display defaults (JS reveal contract) ---------- */
#piccaapp .section2, #piccaapp .section3, #piccaapp .section4, #piccaapp .section5,
#piccaapp .section6, #piccaapp .section7, #piccaapp .section8, #piccaapp .section9,
#piccaapp .section10, #piccaapp .section12, #piccaapp .section13, #piccaapp .section14,
#piccaapp .section15 { display: none; }
#piccaapp .loanshow { display: none; }
#piccaapp .loanshow.is-visible { display: grid; }
#piccaapp .adjustmentoutput { display: none; }
#piccaapp .plain { color: var(--se-ink-soft); }

/* ---------- interactive charts (added by mybank-ui.js) ---------- */
#piccaapp .circular-chart, #piccaapp .metrics-chart, #piccaapp .tax-chart, #piccaapp .donut {
	transition: transform .3s var(--se-ease);
}
/* segment arcs become hoverable; tracks do not */
#piccaapp path.circlea, #piccaapp path.circleb, #piccaapp path.circlec,
#piccaapp path.circlee, #piccaapp path.circlef, #piccaapp path.circleg, #piccaapp path.circleh,
#piccaapp path.circlej, #piccaapp path.circlek, #piccaapp path.circlel,
#piccaapp path.circlem, #piccaapp path.circlen, #piccaapp path.circleo, #piccaapp path.circlep, #piccaapp path.circleq,
#piccaapp path.circler, #piccaapp path.circles,
#piccaapp .donut-segment {
	pointer-events: stroke;
	cursor: pointer;
	transition: stroke-width .18s var(--se-ease), opacity .18s var(--se-ease), filter .18s var(--se-ease);
}
#piccaapp path.circlei, #piccaapp path.circlea { pointer-events: stroke; }
#piccaapp .metrics-chart path.circlei { pointer-events: none; }
/* hover states applied by JS */
#piccaapp .se-chart--active { transform: scale(1.035); }
#piccaapp .se-seg--hot { filter: drop-shadow(0 2px 6px rgba(18,54,110,.28)) brightness(1.05); }
#piccaapp .se-seg--dim { opacity: .32; }
#piccaapp .se-legend-row { cursor: pointer; border-radius: 8px; transition: background .16s var(--se-ease); }
@media (hover: hover) and (pointer: fine) {
	#piccaapp .se-legend-row:hover { background: rgba(20,102,204,.06); }
}

/* floating tooltip tag */
#piccaapp .se-tip {
	position: fixed;
	z-index: 2147483000;
	pointer-events: none;
	background: #1b2333;
	color: #fff;
	font-family: var(--se-body);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	padding: 9px 13px;
	border-radius: 10px;
	box-shadow: 0 12px 30px -8px rgba(9,24,50,.55);
	max-width: 260px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(5px) scale(.96);
	transition: opacity .14s var(--se-ease), transform .14s var(--se-ease);
	left: -9999px; top: -9999px;
}
#piccaapp .se-tip.se-tip--on { opacity: 1; transform: translateY(0) scale(1); }
#piccaapp .se-tip .se-tip__label { color: #c7d6ec; margin-right: 7px; }
#piccaapp .se-tip b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
#piccaapp .se-tip .se-tip__pct { color: #7fb4ff; font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }
#piccaapp .se-tip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -6px;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1b2333;
	border-bottom: 0;
}
#piccaapp .se-tip.se-tip--below::after { top: -6px; bottom: auto; border-top: 0; border-bottom-color: #1b2333; }

/* =====================================================================
   TWO-STEP SHELL
   Step 1 collects the details and ends in the "Calculate My PICCA Score"
   gate; step 2 is the score plus every result panel, fronted by a sticky
   recap bar. Only one step is in the flow at a time.

   Every rule here is prefixed with #piccaapp - the file scopes everything
   that way, and unscoped class selectors lose to theme rules in production.
   ===================================================================== */

#piccaapp .pa-step { min-width: 0; }
#piccaapp .pa-step[hidden] { display: none; }

/* Title Share Split moved into step 1 as the last field. The controller hides
   the whole wrapper for one owner - never rely on the bare [hidden] attribute
   surviving a theme rule, so state it. */
#piccaapp .se-range-wrap[hidden] { display: none !important; }

/* The step-2 heading gets tabindex="-1" so focus can be moved there on the
   swap - screen readers announce the new context. A mouse/touch user must not
   see a focus ring for that; a keyboard user still does. */
#piccaapp .pa-step h2:focus { outline: none; }
#piccaapp .pa-step h2:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 4px; border-radius: 4px; }

/* the incoming step fades and lifts; height is settled before it paints, so
   the scroll target never moves under the user */
#piccaapp .pa-step { animation: seRevealUp .34s var(--se-ease) both; }

/* ---------- step 1: the gate ---------- */
#piccaapp .pa-gate {
	margin: 22px 0 0;
	padding: 18px 16px 16px;
	border-top: 1px solid var(--se-line);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
#piccaapp .pa-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 15px 22px;
	margin: 0;
	border: none;
	border-radius: var(--se-r);
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(135deg, var(--se-primary-strong), var(--se-primary));
	color: #fff !important;
	box-shadow: 0 10px 22px -12px rgba(20, 102, 204, .75), var(--se-shadow-sm);
	transition: transform .14s var(--se-ease), box-shadow .2s var(--se-ease), background .18s var(--se-ease), opacity .18s var(--se-ease);
}
/* dark surface: every text node sets its own colour, never inherits */
#piccaapp .pa-cta .pa-cta__label { color: #fff !important; }
#piccaapp .pa-cta__arrow {
	flex: none;
	width: 9px; height: 9px;
	border: solid #fff;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	transition: transform .18s var(--se-ease);
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .pa-cta:not(:disabled):hover {
		box-shadow: 0 16px 30px -14px rgba(20, 102, 204, .9), var(--se-shadow-md);
		transform: translateY(-1px);
	}
	#piccaapp .pa-cta:not(:disabled):hover .pa-cta__arrow { transform: rotate(45deg) translate(2px, -2px); }
}
#piccaapp .pa-cta:not(:disabled):active { transform: scale(.985); box-shadow: var(--se-shadow-sm); }
#piccaapp .pa-cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--se-surface), 0 0 0 6px var(--se-primary);
}
/* Disabled still has to READ as a button - a borderless tint on an already
   pale panel looked like a line of grey text. Dashed border says "not yet". */
#piccaapp .pa-cta:disabled {
	background: var(--se-inset-2);
	border: 1px dashed var(--se-line-strong);
	color: var(--se-muted) !important;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
#piccaapp .pa-cta:disabled .pa-cta__label { color: var(--se-muted) !important; }
#piccaapp .pa-cta:disabled .pa-cta__arrow { border-color: var(--se-muted); }

#piccaapp .pa-gate__hint {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--se-muted);
	text-align: center;
	min-height: 20px;
}
#piccaapp.pa-ready .pa-gate__hint { color: var(--se-primary-strong); font-weight: 600; }

/* ---------- step 1: sticky "back to my score" ---------- */
#piccaapp .pa-return {
	position: sticky;
	bottom: 10px;
	z-index: 6;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
#piccaapp .pa-return[hidden] { display: none; }
#piccaapp .pa-return__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--se-pill);
	background: linear-gradient(135deg, #12305c, var(--se-primary-strong));
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: #fff !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: var(--se-shadow-lg);
	transition: transform .14s var(--se-ease), box-shadow .2s var(--se-ease);
}
#piccaapp .pa-return__text { color: #fff !important; }
#piccaapp .pa-return__score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 2px 9px;
	border-radius: var(--se-pill);
	background: rgba(255, 255, 255, .16);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .pa-return__btn:hover { transform: translateY(-1px); }
}
#piccaapp .pa-return__btn:active { transform: scale(.985); }
#piccaapp .pa-return__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--se-surface), 0 0 0 6px var(--se-primary); }

/* ---------- step 2: sticky recap bar ----------
   Two rows on purpose: row 1 is Edit + the score, row 2 gives the chip strip
   the FULL width. Squeezing all six chips onto one row beside those two
   controls left about a chip and a half visible at 390px. */
#piccaapp .pa-recap {
	position: sticky;
	top: 0;
	z-index: 7;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"back  score"
		"chips chips";
	align-items: center;
	gap: 9px 10px;
	margin: 0;
	padding: 10px 12px 11px;
	border: 1px solid var(--se-line);
	border-radius: var(--se-r-lg);
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: var(--se-shadow-md);
}
#piccaapp .pa-recap__back {
	grid-area: back;
	justify-self: start;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 8px 13px 8px 11px;
	margin: 0;
	border: 1px solid var(--se-line-strong);
	border-radius: var(--se-pill);
	background: var(--se-primary-soft);
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	color: var(--se-primary-strong) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .16s var(--se-ease), transform .14s var(--se-ease);
}
#piccaapp .pa-recap__backtext { color: var(--se-primary-strong) !important; }
#piccaapp .pa-recap__arrow,
#piccaapp .pa-edit__arrow {
	flex: none;
	width: 8px; height: 8px;
	border: solid currentColor;
	border-width: 2px 0 0 2px;
	transform: rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .pa-recap__back:hover { background: #dbe8fb; }
}
#piccaapp .pa-recap__back:active { transform: scale(.97); }
#piccaapp .pa-recap__back:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20, 102, 204, .35); }

#piccaapp .pa-recap__chips {
	grid-area: chips;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0;
	margin: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	/* fade the strip out at the trailing edge so it reads as scrollable */
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}
#piccaapp .pa-recap__chips::-webkit-scrollbar { display: none; }

#piccaapp .pa-chip {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-height: 38px;
	padding: 8px 12px;
	margin: 0;
	border: 1px solid var(--se-line-strong);
	border-radius: var(--se-pill);
	background: var(--se-inset);
	font-family: var(--se-body);
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .16s var(--se-ease), border-color .16s var(--se-ease), transform .14s var(--se-ease);
}
#piccaapp .pa-chip[hidden] { display: none; }
#piccaapp .pa-chip .pa-chip__k { color: var(--se-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
#piccaapp .pa-chip .pa-chip__v { color: var(--se-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
	#piccaapp .pa-chip:hover { background: var(--se-primary-soft); border-color: var(--se-primary); }
}
#piccaapp .pa-chip:active { transform: scale(.97); }
#piccaapp .pa-chip:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 3px rgba(20, 102, 204, .3); }

#piccaapp .pa-recap__score {
	grid-area: score;
	justify-self: end;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 0 4px 0 2px;
	margin: 0;
	font-family: var(--se-head);
}
#piccaapp .pa-recap__scorek { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--se-muted); }
#piccaapp .pa-recap__score b { font-size: 19px; font-weight: 700; color: var(--se-primary-strong); font-variant-numeric: tabular-nums; }

/* ---------- step 2: "Edit my details" under the score ---------- */
#piccaapp .pa-editrow { margin: 18px 0 0; padding: 0; }
#piccaapp .pa-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 50px;
	padding: 13px 20px;
	margin: 0;
	border: 1px solid var(--se-line-strong);
	border-radius: var(--se-r);
	background: var(--se-inset);
	font-family: var(--se-head);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.25;
	color: var(--se-primary-strong) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .16s var(--se-ease), border-color .16s var(--se-ease), transform .14s var(--se-ease);
}
@media (hover: hover) and (pointer: fine) {
	#piccaapp .pa-edit:hover { background: var(--se-primary-soft); border-color: var(--se-primary); }
}
#piccaapp .pa-edit:active { transform: scale(.99); }
#piccaapp .pa-edit:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 3px rgba(20, 102, 204, .3); }

/* ---------- returning to step 1: highlight the field you came back for ---------- */
#piccaapp .pa-flash {
	animation: paFlash 1.5s var(--se-ease) 1;
	border-radius: var(--se-r-sm);
}
@keyframes paFlash {
	0%   { box-shadow: 0 0 0 0 rgba(20, 102, 204, .0); }
	18%  { box-shadow: 0 0 0 4px rgba(20, 102, 204, .28); }
	70%  { box-shadow: 0 0 0 4px rgba(20, 102, 204, .18); }
	100% { box-shadow: 0 0 0 0 rgba(20, 102, 204, 0); }
}

/* ---------- unlocked: after the first score, step 1 never re-hides ----------
   The engine writes inline display:none via .hide('slow'), so these rules need
   !important to out-rank it. Input sections only - the intro panels
   (.section11-.section14) stay hidden, matching pa_hidedescriptions. */
#piccaapp.pa-unlocked .section2,
#piccaapp.pa-unlocked .section3,
#piccaapp.pa-unlocked .section4 { display: block !important; }

/* ...and the intro panels stay shut for good. The engine's keyup handler still
   runs .section14.show('slow') on the loan field, then piccaappCalculate()
   hides it again on the same keystroke - harmless in the old build where you
   rarely typed after seeing the score, but going back to edit is the whole
   point here, so pin them closed and the flicker cannot happen. */
#piccaapp.pa-unlocked .section11,
#piccaapp.pa-unlocked .section12,
#piccaapp.pa-unlocked .section13,
#piccaapp.pa-unlocked .section14 { display: none !important; }

/* ---------- responsive (mobile-only build) ---------- */
/* The email/apply row and submit always stack full-width for touch. */
#piccaapp .se-apply { grid-template-columns: 1fr; }
#piccaapp .se-apply__action { width: 100%; }
#piccaapp .mybankcontent .submit { width: 100%; }

/* Phone widths: collapse every internal 2-col grid to a single column. */
@media only screen and (max-width: 560px) {
	#piccaapp .se-panel { padding: clamp(16px, 5vw, 22px) clamp(14px, 4.5vw, 18px) clamp(18px, 5vw, 22px); }
	#piccaapp .se-grid-2 { grid-template-columns: 1fr; }
	#piccaapp #metricselector { grid-template-columns: 1fr; }
	#piccaapp #summaryselector { grid-template-columns: 1fr 1fr; }
	#piccaapp #aceoutput { grid-template-columns: 34px 1fr auto; }
	#piccaapp fieldset div.details { grid-template-columns: 44px 1fr; gap: 12px; }
	#piccaapp fieldset h2 { font-size: clamp(17px, 5vw, 20px); }
	#piccaapp .pa-gate { padding: 16px 2px 4px; margin-top: 18px; }
	#piccaapp .pa-recap { padding: 8px; gap: 7px; }
	#piccaapp .pa-recap__score { padding-right: 4px; }
}

/* Smallest phones (<=380px): single-column tiles and tighter type so nothing
   overflows the iframe at 320px minimum width. */
@media only screen and (max-width: 380px) {
	#piccaapp #summaryselector { grid-template-columns: 1fr; }
	#piccaapp .se-choice--3 { grid-template-columns: 1fr; }
	#piccaapp fieldset div.weeklyoutput { font-size: 24px; }
	#piccaapp #profit .profitflex, #piccaapp #loss .profitflex { font-size: 22px; }
	/* the arrow alone carries the meaning at this width - keeps the chip strip
	   as wide as possible without dropping below a 38px tap target */
	#piccaapp .pa-recap__backtext { display: none; }
	#piccaapp .pa-recap__back { padding: 8px 11px; }
	#piccaapp .pa-recap__scorek { display: none; }
	#piccaapp .pa-cta { font-size: 16px; min-height: 54px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	#piccaapp *, #piccaapp *::before, #piccaapp *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}