/* =====================================================================
   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)
   ===================================================================== */

#mybank {
	/* 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;
}

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

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

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

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

#mybank div.fieldsets {
	overflow: visible;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	background: transparent;
}
#mybank .leftcolumn, #mybank .rightcolumn { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

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

/* panels */
#mybank .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);
}
#mybank .se-panel--result { box-shadow: var(--se-shadow-md); }
#mybank .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 */
#mybank fieldset { transition: opacity .45s var(--se-ease); }

/* ---------- section headers (replaces gradient pills) ---------- */
#mybank .se-head { margin: 0 0 16px; }
#mybank 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;
}
#mybank 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));
}
#mybank fieldset h2::after {
	content: "";
	position: absolute;
	left: 14px; right: 0; bottom: 0;
	height: 1px;
	background: var(--se-line);
}
#mybank .se-head.analysis h2::before { background: linear-gradient(180deg, var(--se-accent), var(--se-primary-strong)); }

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

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

/* ---------- fields ---------- */
#mybank .se-field { margin-bottom: 4px; }
#mybank fieldset div.caption,
#mybank 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);
}
#mybank fieldset div.inputs { width: 100%; padding: 0; margin: 2px 0; text-align: left; font-weight: 400; }
#mybank fieldset div.hint { font-size: 12.5px; color: var(--se-muted); margin: 0 0 4px; }
#mybank .se-helper { font-size: 12px; color: var(--se-muted); margin-top: 6px; }
#mybank .se-helper .maxloan { color: var(--se-primary-strong); font-weight: 600; }
#mybank .se-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* text + select inputs */
#mybank input[type=text],
#mybank input[type=email],
#mybank 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;
}
#mybank input[type=text]:hover,
#mybank input[type=email]:hover,
#mybank select:hover { border-color: #b9c6dc; }
#mybank input[type=text]:focus,
#mybank input[type=email]:focus,
#mybank select:focus,
#mybank input[type=text]:focus-visible,
#mybank input[type=email]:focus-visible,
#mybank select:focus-visible {
	border-color: var(--se-primary);
	box-shadow: 0 0 0 4px var(--se-primary-soft);
}
#mybank ::placeholder { color: #aeb8c9; opacity: 1; }

/* select chevron */
#mybank .se-select-wrap { position: relative; }
#mybank .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;
}
#mybank select { padding-right: 40px; cursor: pointer; }
#mybank select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--se-ink); }

/* ---------- segmented selector (investment / loan type) ---------- */
#mybank .se-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
#mybank .se-segment .selectorbutton { position: relative; }
#mybank .se-segment input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#mybank .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);
}
#mybank .se-segment label span { display: none; }
#mybank .se-segment label:active { transform: scale(.985); }
#mybank .se-segment input[type="radio"]:checked + label {
	background: var(--se-primary);
	color: #fff;
	border-color: var(--se-primary);
	box-shadow: var(--se-shadow-sm);
}
#mybank .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) {
	#mybank .se-segment input[type="radio"]:not(:checked) + label:hover { background: var(--se-inset-2); color: var(--se-ink); }
}

/* ---------- image / owner choice cards ---------- */
#mybank .se-choice { display: grid; gap: 12px; margin-top: 12px; }
#mybank .se-choice--3 { grid-template-columns: repeat(3, 1fr); }
#mybank .se-choice--2 { grid-template-columns: repeat(2, 1fr); }
#mybank .imageselectorbutton, #mybank .ownerselectorbutton { text-align: center; }
#mybank .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);
}
#mybank .se-choice input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#mybank .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);
}
#mybank .se-choice__media img { width: 38px; height: 38px; }
#mybank .se-choice__label { line-height: 1.2; }
#mybank .se-choice label:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
	#mybank .se-choice label:hover { border-color: var(--se-line-strong); box-shadow: var(--se-shadow-sm); }
	#mybank .se-choice label:hover .se-choice__media { background: var(--se-primary-soft); }
}
#mybank .se-choice input[type=radio]:checked + .se-choice__media {
	background: var(--se-primary-soft);
	transform: scale(1.04);
}
#mybank .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);
}
#mybank .se-choice label:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--se-primary-soft); }

/* ---------- range sliders ---------- */
#mybank .se-range-wrap { margin: 6px 0 2px; }
#mybank .mybank_slider_output { margin-bottom: 2px; }
#mybank .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;
}
#mybank .output-number { color: var(--se-ink-soft); }
#mybank .output-number span { color: var(--se-primary-strong); font-weight: 700; }

#mybank .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);
}
#mybank .circle-down { left: 0; }
#mybank .circle-up { right: 0; }
#mybank .circle-control:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
	#mybank .circle-control:hover { border-color: var(--se-primary); background: var(--se-primary-soft); }
}
#mybank .circle-control:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 4px var(--se-primary-soft); }
#mybank .circle-down::after,
#mybank .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;
}
#mybank .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;
}

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

#mybank input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 26px;
	background: transparent;
	outline: none;
	cursor: pointer;
	margin: 0; padding: 0;
}
#mybank input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--se-pill); background: linear-gradient(90deg, var(--se-primary), var(--se-accent)); }
#mybank input[type=range]::-moz-range-track { height: 8px; border-radius: var(--se-pill); background: linear-gradient(90deg, var(--se-primary), var(--se-accent)); }
#mybank 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);
}
#mybank 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);
}
#mybank input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
#mybank input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--se-primary-soft); }

/* ---------- output tables ---------- */
#mybank #output-table-container { margin-top: 14px; }
#mybank table.output-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14.5px; }
#mybank table.output-table td { vertical-align: top; padding: 9px 4px; border-bottom: 1px solid var(--se-line); }
#mybank table.output-table tr:last-child td { border-bottom: none; }
#mybank table td.table-label { text-align: left; color: var(--se-ink-soft); }
#mybank 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 */
#mybank .loanshow .output-table {
	background: var(--se-inset);
	border: 1px solid var(--se-line);
	border-radius: var(--se-r);
	margin-top: 8px;
}
#mybank .loanshow .output-table td { padding: 12px 18px; border-bottom-color: rgba(20,102,204,.08); }
#mybank .loanshow .output-table tr:first-child td { padding-top: 16px; }
#mybank .loanshow .output-table tr:last-child td { padding-bottom: 16px; }
#mybank 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); }
#mybank table.output-table td.totals.table-value { color: var(--se-primary-strong); }
#mybank table td.table-title { font-weight: 700; font-size: 14px; padding: 6px 0; text-align: center; }
#mybank table td.table-label.show { padding-top: 14px; border-bottom: none; }

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

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

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

/* tax summary tables */
#mybank table.output-table.taxsummary th { text-align: center; border: none; padding: 4px 0; }
#mybank 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;
}
#mybank table.output-table.taxsummary th h2::before, #mybank table.output-table.taxsummary th h2::after { display: none; }
#mybank table.output-table.taxsummary.coowner { display: none; }
#mybank .ptbdetails, #mybank .ctbdetails { display: none; }
#mybank .ptbdetails td, #mybank .ctbdetails td { font-size: 13px; }

/* ---------- info boxes ---------- */
#mybank .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;
}
#mybank .infobox__title { font-weight: 600; color: var(--se-ink); margin-bottom: 8px; }
#mybank .infobox__source { text-align: center; font-style: italic; font-size: 10.5px; color: var(--se-muted); margin-top: 8px; }
#mybank .infobox table { width: 100%; }
#mybank .infobox td { width: 50%; display: inline-flex; align-items: center; font-size: 11px; text-align: left; padding: 5px 0; border: none; }
#mybank .infobox td img { padding-right: 8px; }
#mybank .infobox.dollarcost { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
#mybank .infobox.dollarcost + .infobox.dollarcost { margin-top: 8px; }
#mybank .infobox.dollarcost img { width: 34px; height: 34px; flex: none; }

/* ---------- ACE (annual cashflow expenses) ---------- */
#mybank .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);
}
#mybank .acecaption img { width: 34px; height: 34px; margin: 0 10px 0 0; vertical-align: middle; }
#mybank #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;
}
#mybank div.aceicon { display: grid; place-items: center; }
#mybank div.aceicon img { width: 30px; height: 30px; }
#mybank div.acelabel { font-size: 12.5px; line-height: 1.3; color: var(--se-ink-soft); }
#mybank div.acelabel span { font-weight: 600; color: var(--se-ink); }
#mybank div.acepercent { font-family: var(--se-head); font-size: 22px; font-weight: 600; text-align: right; color: var(--se-ink); }
#mybank 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; }
#mybank .blackball { display: inline-block; width: 16px; height: 16px; background: var(--se-black); border-radius: 50%; }

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

/* ---------- expenses / who pays ---------- */
#mybank 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);
}
#mybank 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;
}
#mybank 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); }
#mybank .weeklyoutput__icon { width: 34px; height: 34px; }

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

#mybank .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; }
#mybank .smalllabel { font-size: 12px; color: var(--se-muted); margin-bottom: 10px; }
#mybank .pieoutput { display: grid; grid-template-columns: 12% 18% 40% 22% 8%; align-items: center; gap: 4px 0; }
#mybank .pieoutput .expenselabel { line-height: 1.3; font-size: 14px; text-align: left; color: var(--se-ink-soft); }
#mybank .pieoutput .expenselabel span { font-weight: 700; color: var(--se-ink); }
#mybank .pieoutput .expensepercent { font-family: var(--se-head); line-height: 1.1; font-size: 26px; font-weight: 600; text-align: right; }
#mybank .pieoutput img { width: 46px; height: 46px; }
#mybank .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); }
#mybank .ownerprofit, #mybank .ownerloss { display: none; }

/* ---------- charts (SVG) ---------- */
#mybank .circular-chart { display: block; margin: 16px auto; max-width: 78%; max-height: 160px; }
#mybank .tax-chart { display: block; margin: 0 auto; max-width: 78%; max-height: 150px; }
#mybank .metrics-chart { display: block; margin: 0 auto; max-width: 82%; max-height: 150px; }
#mybank .metrics-chart .lvr-text { font-size: 15px; font-weight: 500; }
#mybank .metrics-chart .lvr, #mybank .metrics-chart .gry, #mybank .metrics-chart .eql, #mybank .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) */
#mybank .circlea { stroke: #ff5a5f; fill: none; stroke-width: 3.2; }
#mybank .circleb { stroke: var(--se-yellow); fill: none; stroke-width: 3.2; }
#mybank .circlec { stroke: var(--se-accent); fill: none; stroke-width: 3.2; }
#mybank .circled { stroke: var(--se-ink); fill: none; stroke-width: 3.2; }

#mybank .circlee { stroke: var(--se-orange); fill: none; stroke-width: 3.6; }
#mybank .circlef { stroke: #b32566; fill: none; stroke-width: 3.6; }
#mybank .circleg { stroke: #7c5cf0; fill: none; stroke-width: 3.6; }
#mybank .circleh { stroke: #2ba6c4; fill: none; stroke-width: 3.6; }
#mybank .circlei { stroke: #e6ecf5; fill: none; stroke-width: 3.6; }
#mybank .circlej { stroke: var(--se-accent); fill: none; stroke-width: 3; }
#mybank .circlek { stroke: var(--se-accent); fill: none; stroke-width: 3; }
#mybank .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. */
#mybank .circlem, #mybank .circlen, #mybank .circleo,
#mybank .circlep, #mybank .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);
}
#mybank .circlem { stroke: #7c5cf0; }	/* body corporate */
#mybank .circlen { stroke: #07ba26; }	/* management fees */
#mybank .circleo { stroke: var(--se-accent); }	/* property rates */
#mybank .circlep { stroke: var(--se-black); }	/* other expenses */
#mybank .circleq { stroke: #f6bd25; }	/* loan repayments */
#mybank .metrics-chart path.circlem.se-seg--hot, #mybank .metrics-chart path.circlen.se-seg--hot,
#mybank .metrics-chart path.circleo.se-seg--hot, #mybank .metrics-chart path.circlep.se-seg--hot,
#mybank .metrics-chart path.circleq.se-seg--hot { stroke-width: 5.4; }

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

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

#mybank .metrics-item { width: 100%; height: auto; margin: 0 auto; text-align: center; }
#mybank #metricselector { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: var(--se-ink); }
#mybank .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) ---------- */
#mybank .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; }
#mybank .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); }
#mybank .piccaoutput__icon { width: 28px; height: 28px; }

#mybank .svg-item { width: 200px; height: 200px; font-size: 28px; margin: 14px auto; position: relative; z-index: 2; }
#mybank .svg-item .donut-segment { transform-origin: center; stroke: var(--se-ink); transition: stroke-dasharray .6s var(--se-ease); }
#mybank .svg-item .donut-text { fill: #ffffff; }
#mybank .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) */
#mybank .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);
}
#mybank .svg-item.piccablue::before   { opacity: .16; background-color: var(--se-blue); }
#mybank .svg-item.piccagreen::before  { opacity: .16; background-color: var(--se-green); }
#mybank .svg-item.piccayellow::before { opacity: .18; background-color: var(--se-yellow); }
#mybank .svg-item.piccaorange::before { opacity: .18; background-color: var(--se-orange); }
#mybank .svg-item.piccared::before    { opacity: .16; background-color: var(--se-red); }
#mybank .svg-item.piccablack::before  { opacity: .12; background-color: var(--se-black); }

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

#mybank .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; }
#mybank #ipp, #mybank #cip { text-align: center; }

/* PICCA factors */
#mybank 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; }
#mybank fieldset div.piccabox table { width: 100%; }
#mybank fieldset div.piccabox td { text-align: center; font-size: 12px; width: 25%; color: var(--se-ink-soft); padding: 4px 2px; border: none; }
#mybank .piccafactors img { width: 40px; height: 40px; }

/* PICCA tip callout */
#mybank fieldset div.piccatipbox { margin: 12px auto; }
#mybank 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;
}
#mybank 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 */
#mybank fieldset div.piccatip > div:first-child { flex: none; display: grid; place-items: center; }
#mybank fieldset div.piccatip img { width: 56px; height: 56px; flex: none; display: block; }
#mybank fieldset .metrics-item div.piccatip { justify-content: flex-start; }
@media only screen and (max-width: 560px) {
	#mybank fieldset div.piccatip img { width: 46px; height: 46px; }
}

/* ---------- property variables tiles ---------- */
#mybank #summaryselector { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; color: var(--se-ink); margin-top: 10px; }
#mybank .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;
}
#mybank .summaryselectorbutton img { width: 46px; height: 46px; }
#mybank .summaryselectorbutton__label { font-size: 12.5px; color: var(--se-muted); }
#mybank .summaryselectorbutton__value { font-family: var(--se-head); font-weight: 600; font-size: 17px; color: var(--se-ink); }

/* ---------- apply / email capture ---------- */
#mybank .mybankapplication { display: none; }
#mybank .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);
}
#mybank .se-apply__copy { min-width: 0; }
#mybank .mybankcontent .inputlabel { margin: 0 0 10px; color: #eaf2ff; font-size: 15px; line-height: 1.45; font-weight: 500; }
#mybank .se-apply .textinput input { background: rgba(255,255,255,.96); border-color: transparent; }
#mybank .se-apply .textinput input:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.35); border-color: #fff; }
#mybank #error { display: none; color: #ffdede; font-weight: 600; font-size: 13px; margin: 8px 0 0; }
#mybank .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) {
	#mybank .mybankcontent .submit:hover { box-shadow: var(--se-shadow-lg); transform: translateY(-1px); }
}
#mybank .mybankcontent .submit:active { transform: scale(.985); }
#mybank .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 #mybank - 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; }

#mybank .se-apply__status { grid-column: 1 / -1; }
#mybank .se-apply__status:empty { display: none; }
#mybank #mybank_ajax_loading,
#mybank #mybank_ajax_success,
#mybank #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; } }

#mybank #mybank_ajax_success { background: rgba(255,255,255,.96); border-color: #fff; }
#mybank .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;
}
#mybank .se-success__tick {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: #0e9f6e; position: relative;
}
#mybank .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);
}
#mybank #mybank_ajax_failure { background: rgba(207,32,32,.14); border-color: rgba(255,190,190,.6); }
#mybank .se-fail { color: #ffe2e2; font-weight: 600; }

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

#mybank .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) ---------- */
#mybank .section2, #mybank .section3, #mybank .section4, #mybank .section5,
#mybank .section6, #mybank .section7, #mybank .section8, #mybank .section9,
#mybank .section10, #mybank .section12, #mybank .section13, #mybank .section14,
#mybank .section15 { display: none; }
#mybank .loanshow { display: none; }
#mybank .loanshow.is-visible { display: grid; }
#mybank .adjustmentoutput { display: none; }
#mybank .plain { color: var(--se-ink-soft); }

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

/* floating tooltip tag */
#mybank .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;
}
#mybank .se-tip.se-tip--on { opacity: 1; transform: translateY(0) scale(1); }
#mybank .se-tip .se-tip__label { color: #c7d6ec; margin-right: 7px; }
#mybank .se-tip b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
#mybank .se-tip .se-tip__pct { color: #7fb4ff; font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }
#mybank .se-tip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -6px;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1b2333;
	border-bottom: 0;
}
#mybank .se-tip.se-tip--below::after { top: -6px; bottom: auto; border-top: 0; border-bottom-color: #1b2333; }

/* ---------- responsive ---------- */
@media only screen and (max-width: 820px) {
	#mybank div.fieldsets { grid-template-columns: 1fr; }
	#mybank .leftcolumn, #mybank .rightcolumn { gap: 16px; }
	#mybank .se-apply { grid-template-columns: 1fr; }
	#mybank .se-apply__action { width: 100%; }
	#mybank .mybankcontent .submit { width: 100%; }
}
@media only screen and (max-width: 560px) {
	#mybank .se-panel { padding: 18px 16px 20px; }
	#mybank .se-grid-2 { grid-template-columns: 1fr; }
	#mybank #metricselector { grid-template-columns: 1fr; }
	#mybank #summaryselector { grid-template-columns: 1fr 1fr; }
	#mybank #aceoutput { grid-template-columns: 34px 1fr auto; }
	#mybank fieldset div.details { grid-template-columns: 44px 1fr; gap: 12px; }
	#mybank fieldset h2 { font-size: 19px; }
}

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