/*
 * Marine Loan Calculator — public calculator. A sibling of the BlueSleuth Sell My Boat form:
 * EVERYTHING is scoped under `.bs-mlc` so it can never collide with the broker's theme. All colours
 * come from CSS variables: the per-broker brand palette (--brand primary, --brand-d a pre-darkened
 * brand for the header gradient, --accent secondary) is injected inline on the wrapper from Settings;
 * the neutral ground/surface/ink/border tokens are defined here for light and dark. System font
 * stack only — no external font is loaded.
 */

.bs-mlc {
	--brand: #1a5aa6;                 /* primary — overridden inline per broker */
	--brand-d: #144780;               /* pre-darkened brand — overridden inline per broker */
	--accent: #cf9f34;                /* secondary — overridden inline per broker */
	--ground: #eef2f6;
	--surface: #ffffff;
	--surface-2: #f7f9fb;
	--ink: #14202b;
	--ink-2: #5b6b7a;
	--border: #dfe4ea;
	--on-brand: #ffffff;
	--radius: 14px;

	color-scheme: light dark;
	max-width: 940px;
	margin: 0 auto;
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.bs-mlc *, .bs-mlc *::before, .bs-mlc *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
	.bs-mlc:not([data-theme="light"]) {
		--ground: #10161d;
		--surface: #161d25;
		--surface-2: #1c2530;
		--ink: #e8edf2;
		--ink-2: #9fb0bf;
		--border: #2a3540;
	}
}

/* ---- Card + brand-gradient header -------------------------------------- */
.bs-mlc .mlc-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 10px 30px -18px rgba(20, 32, 43, .45);
}
.bs-mlc .mlc-header {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%);
	color: var(--on-brand);
	padding: 22px 26px 18px;
}
.bs-mlc .mlc-kicker {
	display: inline-block;
	font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent);
}
.bs-mlc .mlc-header-title { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bs-mlc .mlc-anchor { flex: 0 0 auto; color: var(--on-brand); opacity: .95; }
.bs-mlc .mlc-title { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--on-brand); }
.bs-mlc .mlc-rule { display: block; height: 3px; width: 64px; margin-top: 14px; background: var(--accent); border-radius: 3px; }

/* ---- Two-column body --------------------------------------------------- */
.bs-mlc .mlc-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.bs-mlc .mlc-inputs { padding: 24px 26px; }
.bs-mlc .mlc-results { padding: 24px 26px; background: var(--surface-2); border-left: 1px solid var(--border); }

.bs-mlc .mlc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.bs-mlc .mlc-field { display: flex; flex-direction: column; min-width: 0; }
.bs-mlc .mlc-field label { font-weight: 600; margin-bottom: 5px; font-size: .84rem; color: var(--ink); }

/* Inputs: bordered shell with optional $ prefix / % suffix; figures right-aligned + tabular. */
.bs-mlc .mlc-input {
	display: flex; align-items: center; min-height: 44px;
	border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
	transition: border-color .15s ease, box-shadow .15s ease;
	overflow: hidden;
}
.bs-mlc .mlc-input:focus-within {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.bs-mlc .mlc-affix { color: var(--ink-2); font-weight: 600; padding: 0 4px; flex: 0 0 auto; }
.bs-mlc .mlc-affix-pre { padding-left: 12px; }
.bs-mlc .mlc-affix-post { padding-right: 12px; }
.bs-mlc .mlc-input input,
.bs-mlc .mlc-input select {
	flex: 1 1 auto; width: 100%; min-width: 0; min-height: 42px;
	padding: 8px 12px; font-size: 1rem; font-family: inherit;
	color: var(--ink); background: transparent; border: 0; outline: none;
	font-variant-numeric: tabular-nums;
}
.bs-mlc .mlc-input-money input,
.bs-mlc .mlc-input-pct input,
.bs-mlc .mlc-input input[data-int] { text-align: right; }
.bs-mlc .mlc-input-money input { padding-left: 4px; }
.bs-mlc .mlc-input-pct input { padding-right: 4px; }
.bs-mlc .mlc-input select { text-align: left; cursor: pointer; }

.bs-mlc .mlc-help { color: var(--ink-2); font-size: .76rem; margin-top: 4px; }
.bs-mlc .mlc-solve-note {
	margin: 12px 0 0; padding: 10px 12px; font-size: .82rem; color: var(--ink-2);
	background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px;
}
.bs-mlc .mlc-results .mlc-solve-note { background: var(--surface); }

.bs-mlc .mlc-section-label {
	margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--border);
	font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}

/* ---- Buttons ----------------------------------------------------------- */
.bs-mlc .mlc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bs-mlc .mlc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 11px 20px; font-size: .98rem; font-weight: 600; font-family: inherit;
	border: 1px solid transparent; border-radius: 9px; cursor: pointer;
	transition: filter .15s ease, background .15s ease;
}
.bs-mlc .mlc-btn-brand { background: var(--brand); color: var(--on-brand); }
.bs-mlc .mlc-btn-accent { background: var(--accent); color: #1b1b1b; }
.bs-mlc .mlc-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.bs-mlc .mlc-btn-brand:hover, .bs-mlc .mlc-btn-accent:hover { filter: brightness(.94); }
.bs-mlc .mlc-btn-ghost:hover { background: var(--surface-2); }
.bs-mlc .mlc-btn:focus-visible,
.bs-mlc .mlc-input:focus-within { outline: none; }
.bs-mlc .mlc-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px;
}

/* ---- Help box ---------------------------------------------------------- */
.bs-mlc .mlc-helpbox {
	margin-top: 18px; padding: 14px 16px; background: var(--surface-2);
	border: 1px solid var(--border); border-radius: 10px;
}
.bs-mlc .mlc-helpbox[hidden] { display: none; }
.bs-mlc .mlc-helpbox h4 { margin: 0 0 8px; font-size: .95rem; color: var(--ink); }
.bs-mlc .mlc-helpbox ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .86rem; }
.bs-mlc .mlc-helpbox li { margin-bottom: 6px; }

/* ---- Results ----------------------------------------------------------- */
.bs-mlc .mlc-hero {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%);
	color: var(--on-brand); border-radius: 12px; padding: 18px 20px; text-align: center;
}
.bs-mlc .mlc-hero-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.bs-mlc .mlc-hero-value { display: block; margin-top: 6px; font-size: 2.35rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bs-mlc .mlc-hero-cur { color: var(--accent); margin-right: 2px; }

.bs-mlc .mlc-readouts { margin-top: 18px; display: flex; flex-direction: column; }
.bs-mlc .mlc-readout {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 12px 2px; border-bottom: 1px solid var(--border);
}
.bs-mlc .mlc-readout:last-child { border-bottom: 0; }
.bs-mlc .mlc-readout-label { color: var(--ink-2); font-size: .88rem; }
.bs-mlc .mlc-readout-value { font-weight: 700; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Amortization schedule --------------------------------------------- */
.bs-mlc .mlc-schedule { border-top: 1px solid var(--border); }
.bs-mlc .mlc-schedule[hidden] { display: none; }
.bs-mlc .mlc-schedule-summary {
	padding: 12px 26px; background: var(--surface-2); color: var(--ink-2);
	font-size: .85rem; border-bottom: 1px solid var(--border);
}
.bs-mlc .mlc-schedule-summary:empty { display: none; }
.bs-mlc .mlc-schedule-scroll { max-height: 360px; overflow: auto; }
.bs-mlc .mlc-schedule-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bs-mlc .mlc-schedule-table th,
.bs-mlc .mlc-schedule-table td { padding: 9px 14px; text-align: right; white-space: nowrap; }
.bs-mlc .mlc-schedule-table th:first-child,
.bs-mlc .mlc-schedule-table td:first-child { text-align: left; }
.bs-mlc .mlc-schedule-table td.mlc-num { font-variant-numeric: tabular-nums; }
.bs-mlc .mlc-schedule-table thead th {
	position: sticky; top: 0; z-index: 1;
	background: var(--brand); color: var(--on-brand); font-weight: 700;
}
.bs-mlc .mlc-schedule-table tbody tr:nth-child(even) { background: var(--surface-2); }
.bs-mlc .mlc-schedule-table tbody tr:last-child { font-weight: 700; }

/* ---- Responsive: single column on phones ------------------------------- */
@media (max-width: 560px) {
	.bs-mlc .mlc-body { grid-template-columns: 1fr; }
	.bs-mlc .mlc-results { border-left: 0; border-top: 1px solid var(--border); }
	.bs-mlc .mlc-inputs, .bs-mlc .mlc-results { padding: 18px 16px; }
	.bs-mlc .mlc-header { padding: 18px 16px 14px; }
	.bs-mlc .mlc-grid { grid-template-columns: 1fr; }
	.bs-mlc .mlc-actions { flex-direction: column; }
	.bs-mlc .mlc-actions .mlc-btn { width: 100%; }
	.bs-mlc .mlc-btn-brand, .bs-mlc .mlc-btn-accent { order: -1; }
	.bs-mlc .mlc-schedule-summary { padding-left: 16px; padding-right: 16px; }
}

/* ---- Print: show the schedule, drop the buttons ------------------------ */
@media print {
	.bs-mlc .mlc-actions, .bs-mlc .mlc-helpbox { display: none !important; }
	.bs-mlc .mlc-card { box-shadow: none; border-color: #ccc; }
	.bs-mlc .mlc-schedule[hidden] { display: block !important; }
	.bs-mlc .mlc-schedule-scroll { max-height: none; overflow: visible; }
}

/* Respect reduced-motion — no transitions. */
@media (prefers-reduced-motion: reduce) {
	.bs-mlc *, .bs-mlc *::before, .bs-mlc *::after { transition: none !important; scroll-behavior: auto !important; }
}