/**
 * Eligibility Checker.
 *
 * OUT-15: teal #1F7F95 for eligible now, accent #A5CCD5 for conditional or waiting,
 * near-black #20343A on the accent. Montserrat throughout.
 *
 * Every rule is scoped under .ktt-elig. Avada's content styles use descendant
 * selectors that score (0,1,1) and beat a lone class, which has caught this project
 * out on the calculator, the sidebar and the gate.
 */

/*
 * ── ⭐ `scroll-margin-top` — Katie, 2026-09-02 ───────────────────────────────
 * When a new question scrolls itself into view (see `paint()` in
 * `ktt-eligibility.js`), this is what stops it landing UNDERNEATH the site's
 * sticky header.
 *
 * ⛔ In CSS rather than as a pixel offset in the JS, because that is where a
 * header height belongs and where it can be tuned without touching logic —
 * `scrollIntoView` honours it natively.
 *
 * ⚠️ Raise it if the header grows; too small hides the question's first line,
 * too large leaves an odd gap above it.
 */
.ktt-elig {
	scroll-margin-top: 100px;
	--e-teal: #1F7F95;
	--e-teal-dark: #155F70;
	--e-accent: #A5CCD5;
	--e-bg: #F0F7F9;
	--e-alert: #B4453A;
	--e-ink: #20343A;

	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #434343;
	font-size: 16px;
	line-height: 1.65;
	max-width: 780px;
	margin: 0 auto;
}

.ktt-elig * { box-sizing: border-box; }

.ktt-elig .ktt-elig__panel {
	background: #fff;
	border: 1px solid var(--e-accent);
	border-radius: 6px;
	padding: 30px 32px;
}

.ktt-elig .ktt-elig__who {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--e-ink);
	background: var(--e-accent);
	padding: 4px 11px;
	border-radius: 3px;
	margin: 0 0 18px;
}

.ktt-elig .ktt-elig__q {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	color: var(--e-teal-dark);
	margin: 0 0 10px;
}

.ktt-elig .ktt-elig__lead { margin: 0 0 16px; }
.ktt-elig .ktt-elig__helper { font-size: 14px; color: #6b7b80; margin: 0 0 16px; }
.ktt-elig .ktt-elig__tip { font-size: 13.5px; color: #6b7b80; margin: 12px 0 0; }

.ktt-elig .ktt-elig__choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
}

.ktt-elig .ktt-elig__choice {
	text-align: left;
	font-family: inherit;
	font-size: 15px;
	color: var(--e-ink);
	background: var(--e-bg);
	border: 2px solid var(--e-accent);
	border-radius: 5px;
	padding: 11px 14px;
	cursor: pointer;
}

.ktt-elig .ktt-elig__choice:hover { background: #C2DCE2; }

.ktt-elig .ktt-elig__choice.is-on {
	background: var(--e-teal);
	border-color: var(--e-teal);
	color: #fff;
}

.ktt-elig .ktt-elig__escape {
	font-family: inherit;
	font-size: 14px;
	background: none;
	border: 0;
	color: var(--e-teal);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	margin: 0 0 18px;
}

.ktt-elig .ktt-elig__card {
	border-top: 1px solid #e3eef1;
	padding: 16px 0 0;
	margin: 0 0 8px;
}

.ktt-elig .ktt-elig__cardname {
	font-weight: 600;
	font-size: 15px;
	color: var(--e-ink);
	margin: 0 0 10px;
}

.ktt-elig .ktt-elig__month { display: flex; gap: 10px; margin: 0 0 14px; }

.ktt-elig .ktt-elig__month select,
.ktt-elig .ktt-elig__text {
	font-family: inherit;
	font-size: 16px;
	padding: 10px 12px;
	border: 1px solid var(--e-accent);
	border-radius: 5px;
	background: #fff;
	color: var(--e-ink);
	min-width: 0;
}

.ktt-elig .ktt-elig__text { width: 100%; margin: 0 0 12px; }

.ktt-elig .ktt-elig__unsure {
	background: var(--e-bg);
	border-left: 3px solid var(--e-accent);
	border-radius: 4px;
	padding: 18px 20px;
	margin: 18px 0 0;
}

.ktt-elig .ktt-elig__actions { margin: 20px 0 0; }

.ktt-elig .ktt-elig__next {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--e-teal);
	border: 0;
	border-radius: 5px;
	padding: 13px 28px;
	cursor: pointer;
}

.ktt-elig .ktt-elig__next:hover { background: var(--e-teal-dark); }

.ktt-elig .ktt-elig__link { margin: 0 0 16px; }
.ktt-elig .ktt-elig__link a,
.ktt-elig .ktt-elig__cardlinks a { color: var(--e-teal); }

/* ---- results ---- */

.ktt-elig .ktt-elig__person { margin: 0 0 34px; }
.ktt-elig .ktt-elig__person:last-of-type { margin-bottom: 0; }

.ktt-elig .ktt-elig__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--e-teal-dark);
	margin: 0 0 4px;
}

.ktt-elig .ktt-elig__stamp {
	font-size: 12.5px;
	color: #6b7b80;
	margin: 0 0 20px;
}

.ktt-elig .ktt-elig__subject {
	border-top: 1px solid #e3eef1;
	padding: 18px 0 0;
	margin: 0 0 18px;
}

.ktt-elig .ktt-elig__subjecthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--e-ink);
	margin: 0 0 8px;
}

.ktt-elig .ktt-elig__chip {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 3px;
	background: var(--e-accent);
	color: var(--e-ink);
	white-space: nowrap;
}

.ktt-elig .ktt-elig__chip.is-now { background: var(--e-teal); color: #fff; }
/* ⭐ Katie 2026-09-29 — the 3/24 note's all-caps headline, on its own line. */
.ktt-elig .ktt-elig__notetitle { display: block; font-weight: 700; letter-spacing: .04em; margin-bottom: 4px; }
/* ⭐ Katie 2026-09-29 — a sole proprietor at 3/24+: the lines under a business card's CONDITIONAL badge, red "for now". */
.ktt-elig .ktt-elig__answer--324 { color: #C62828; }

.ktt-elig .ktt-elig__answer { font-size: 16px; margin: 0 0 10px; }

.ktt-elig .ktt-elig__note {
	font-size: 14px;
	line-height: 1.6;
	color: #55666b;
	margin: 0 0 8px;
}

.ktt-elig .ktt-elig__note--assume {
	background: var(--e-bg);
	border-left: 3px solid var(--e-accent);
	border-radius: 3px;
	padding: 12px 14px;
	margin: 0 0 18px;
	color: #434343;
}

.ktt-elig .ktt-elig__cardlinks { font-size: 14px; margin: 10px 0 0; }
.ktt-elig .ktt-elig__cardlinks a { display: inline-block; margin: 0 16px 4px 0; }

.ktt-elig .ktt-elig__warn {
	background: #FDF4F3;
	border-left: 3px solid var(--e-alert);
	border-radius: 3px;
	padding: 14px 16px;
	margin: 0 0 18px;
	font-size: 15px;
	color: #20343A;
}

.ktt-elig .ktt-elig__caveats {
	background: var(--e-bg);
	border-radius: 5px;
	padding: 20px 22px;
	margin: 26px 0 0;
	font-size: 14.5px;
}

.ktt-elig .ktt-elig__caveats ul { margin: 10px 0 0; padding: 0 0 0 20px; }
.ktt-elig .ktt-elig__caveats li { margin: 0 0 9px; }
.ktt-elig .ktt-elig__caveats li:last-child { margin-bottom: 0; }

.ktt-elig .ktt-elig__disclaimer {
	font-size: 12.5px;
	color: #6b7b80;
	margin: 20px 0 0;
}

@media (max-width: 640px) {
	.ktt-elig .ktt-elig__panel { padding: 22px 18px; }
	.ktt-elig .ktt-elig__q { font-size: 17px; }
	.ktt-elig .ktt-elig__month { flex-direction: column; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOUNTED INSIDE THE PLAN GENERATOR'S INTERVIEW
   Plan Generator Polish Spec, P1 · 2026-09-08

   The Checker renders standalone on its own page AND nested inside the Plan
   Generator's interview card. Standalone it is correctly a card: border, radius,
   its own padding. Nested, that makes a box inside a box — inset and visibly
   narrower than the step before it, because steps 1–6 draw the question straight
   into the interview card and step 7 onward swaps this component in.

   Measured side by side, the two halves disagreed on almost everything:

     property        interview            eligibility
     padding         14px 18px            30px 32px
     border          none                 1px solid #A5CCD5
     radius          0                    6px
     choice font     16px / 600           15px / 400
     choice height   48px                 45px

   ⛔ EVERY RULE BELOW IS SCOPED TO `.ktt-plan-interview`. The standalone Checker
   is unchanged — it is right as it is, and it is a different context.

   ⚠️ THREE CLASSES DEEP ON PURPOSE. The base rules in this file are written
   `.ktt-elig .ktt-elig__panel` (two classes), so the spec's suggested
   `.ktt-plan-interview .ktt-elig__panel` would tie on specificity and win only
   by source order. Adding `.ktt-elig` makes these win outright, whatever moves
   around this file later.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Nested, the panel stops being a card and becomes part of the one it is in. */
.ktt-plan-interview .ktt-elig .ktt-elig__panel {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
}

/* One question style across both halves. 18px, not the 19px this file used —
   the shared type scale in the spec puts question headings at 18px. */
.ktt-plan-interview .ktt-elig .ktt-elig__q {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #155F70;
	margin: 0 0 8px;
}

/* One answer bar. The interview's bars were 16px/600 at 48px, these were
   15px/400 at 45px — same job, two weights.
   ⚠️ `min-height` RATHER THAN `height`, so a label that wraps to two lines makes
   its bar taller instead of overflowing it, and a wrapped bar never leaves its
   neighbours looking short. */
.ktt-plan-interview .ktt-elig .ktt-elig__choice {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	padding: 12px 16px;
	min-height: 48px;
	height: auto;
	border: 2px solid #A5CCD5;
	border-radius: 5px;
}

/* Selection reads as state, not as a second button — the same treatment applied
   to the interview's own bars in `ktt-plan.css`. Solid teal stays reserved for
   the control you press. */
.ktt-plan-interview .ktt-elig .ktt-elig__choice.is-on {
	background: #F0F7F9;
	border-color: #1F7F95;
	color: #155F70;
	box-shadow: inset 0 0 0 1px #1F7F95;
	padding-left: 40px;
	position: relative;
}

.ktt-plan-interview .ktt-elig .ktt-elig__choice.is-on::before {
	content: "\2713";
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #1F7F95;
	font-weight: 700;
}

/* One primary button. This was 15px/700 with no border at radius 5; the
   interview's Next is 14.5px/600 with a 2px border at radius 8. Two buttons
   doing one job, a step apart from each other.
   ⚠️ 44px MINIMUM — the tap-target floor, and it is why this sets min-height
   rather than relying on padding alone. */
.ktt-plan-interview .ktt-elig .ktt-elig__next {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	padding: 11px 22px;
	min-height: 44px;
	border: 2px solid #1F7F95;
	border-radius: 8px;
}

/* Card names are headings, not buttons — let them wrap.
   "Southwest® Rapid Rewards® Performance Business Credit Card" measures ~529px
   at 16px/600, so it wraps on a phone. That is fine. ⛔ Do not truncate it: the
   card name is the thing the answer is about. */
.ktt-plan-interview .ktt-elig .ktt-elig__cardname {
	line-height: 1.3;
	overflow-wrap: break-word;
	margin: 0 0 8px;
}

/* The phone gutters, second half of the P0 fix. The nested panel's 30px 32px was
   spending 60px of a 375px screen on padding inside padding. */
@media ( max-width: 599px ) {
	.ktt-plan-interview .ktt-elig .ktt-elig__panel {
		padding: 0;
	}
}