/* Layout and theming of the plugin's iframe page, loaded after main.css.
   Everything here is plugin-only; the calculator.io site never loads this file. */

html,
body {
	background: transparent;
	min-height: 0;
}

html.dark body {
	background: #1F2937;
}

body {
	box-sizing: border-box;
	padding: 4px; /* room for the cards' box-shadow so it is not cut at the frame edge */
}

/* ---- Layout: form and result are flex items that wrap into one column when narrow ------- */

.ci-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 100%;
}

.ci-form {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 100%;
}

.ci-result {
	flex: 2 1 380px;
	min-width: 0;
	max-width: 100%;
}

/* Below this width a flex item can take the whole row, so let both fill it. */
@media (max-width: 767px) {
	.ci-form,
	.ci-result {
		flex-basis: 100%;
	}
}

/* The site's mobile styles reserve a strip on the form's right for its results-drawer tab,
   which this page does not have. */
#calculator_form .calculator-setting__title,
#calculator_form .calculator-content {
	padding-right: 24px;
}

#calculator_form .calculator-content {
	padding-left: 24px;
}

.ci-result .calculator-result {
	max-width: 100%;
}

/* ---- Wide content scrolls inside its own box, never widens the page ---------------------- */

.ci-result .result-table__wrapper,
.ci-result .table-cell--only {
	max-width: 100%;
}

.ci-result .result-table__wrapper {
	overflow-x: auto;
}

.ci-result img,
.ci-result svg,
.ci-result canvas {
	max-width: 100%;
}

/* Chart boxes: a fixed aspect ratio instead of the site's fixed pixel heights, so a narrow
   column gets a short chart and a wide one is not stretched into a square. */
.ci-result .chart-wrapper--loan {
	height: auto;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	max-height: 420px;
	position: relative;
}

.ci-result .chart-wrapper--loan .chart {
	max-height: none;
	height: 100%;
}

.ci-result .chart-wrapper--loan .chart__legend {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	box-sizing: border-box;
	padding: 0 6px; /* keep the first and last labels inside the frame */
}

/* ---- Accent colour (shortcode attribute accent="#rrggbb") --------------------------------
   Only active when ci-init.js has set --ci-accent, so the default look is untouched. */

html[data-ci-accent] {
	--ci-accent-hover: color-mix(in srgb, var(--ci-accent) 78%, #000);
	--ci-accent-soft: color-mix(in srgb, var(--ci-accent) 14%, #fff);
	--ci-accent-line: color-mix(in srgb, var(--ci-accent) 45%, #fff);
}

html[data-ci-accent] .button--primary,
html[data-ci-accent] .button--copy {
	background-color: var(--ci-accent);
	border-color: var(--ci-accent);
}

html[data-ci-accent] .button--primary:hover:not(:disabled):not(:active),
html[data-ci-accent] .button--copy:hover:not(:disabled):not(:active) {
	background-color: var(--ci-accent-hover);
}

html[data-ci-accent] .button--primary:active,
html[data-ci-accent] .button--copy:active {
	background-color: var(--ci-accent);
	border-color: var(--ci-accent);
}

html[data-ci-accent] .system-switcher {
	background-color: var(--ci-accent);
}

html[data-ci-accent] .button--pale {
	background: var(--ci-accent-soft);
	color: var(--ci-accent-hover);
}

html[data-ci-accent] .input-field:focus-within::after {
	border-color: var(--ci-accent-line);
}

html[data-ci-accent] .checkbox__input:checked + .checkbox__box,
html[data-ci-accent] .tab-item--active::after {
	background-color: var(--ci-accent);
}

html[data-ci-accent] .tab-item--active,
html[data-ci-accent] .calculator-content-head__title {
	color: var(--ci-accent);
}

html[data-ci-accent] .button-switcher--active path[stroke],
html[data-ci-accent] .tab-item--active svg path[stroke] {
	stroke: var(--ci-accent);
}

html[data-ci-accent] .button-switcher--active path[fill] {
	fill: var(--ci-accent);
}