/**
 * YFJ Results report + Student dashboard.
 * Results layout follows the approved Killarney Score report design.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * RESULTS REPORT
 * ═══════════════════════════════════════════════════════════════════════ */

.yfj-report {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 44px) 20px clamp(40px, 6vw, 72px);
}

/* ── Report header ──────────────────────────────────────────────────────── */

.yfj-report-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--yfj-gap-lg);
	flex-wrap: wrap;
	padding-bottom: var(--yfj-gap);
	margin-bottom: clamp(24px, 4vw, 38px);
	border-bottom: 2px solid var(--yfj-line);
}

.yfj-report-title .yfj-eyebrow { margin-bottom: 6px; }

.yfj-report-name {
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 800;
	color: var(--yfj-navy);
	margin: 0 0 6px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.yfj-report-meta {
	font-size: 14px;
	color: var(--yfj-muted);
	margin: 0;
}

.yfj-report-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--yfj-surface-alt);
	border: 1px solid var(--yfj-line);
	border-radius: var(--yfj-radius);
	padding: 14px 20px;
}

.yfj-report-summary-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--yfj-muted);
	line-height: 1.4;
	max-width: 78px;
}

.yfj-summary-bands {
	display: flex;
	gap: 6px;
}

.yfj-summary-band {
	width: 34px;
	height: 34px;
	border-radius: var(--yfj-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	color: #fff;
}

/* ── Section card — mirrors the approved report layout ──────────────────── */

.yfj-report-card {
	display: grid;
	grid-template-columns: 232px minmax(150px, .85fr) minmax(200px, 1.35fr) minmax(200px, 1.35fr) minmax(160px, 1fr);
	gap: 0;
	background: var(--yfj-surface);
	border: 1.5px solid var(--yfj-line);
	border-radius: var(--yfj-radius-lg);
	overflow: hidden;
	margin-bottom: 18px;
	transition: box-shadow .2s ease;
}

.yfj-report-card:hover { box-shadow: var(--yfj-shadow-md); }

/* Band-coloured outline per card */
.yfj-report-card[data-band="A"] { border-color: var(--yfj-band-a); }
.yfj-report-card[data-band="B"] { border-color: var(--yfj-band-b); }
.yfj-report-card[data-band="C"] { border-color: var(--yfj-band-c); }
.yfj-report-card[data-band="D"] { border-color: var(--yfj-band-d); }
.yfj-report-card[data-band="E"] { border-color: var(--yfj-band-e); }

/* Column 1 — big letter tile */
.yfj-report-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(22px, 3vw, 34px) 18px;
	margin: 14px;
	border-radius: var(--yfj-radius);
	min-height: 210px;
}

.yfj-report-card[data-band="A"] .yfj-report-tile { background: var(--yfj-band-a-bg); }
.yfj-report-card[data-band="B"] .yfj-report-tile { background: var(--yfj-band-b-bg); }
.yfj-report-card[data-band="C"] .yfj-report-tile { background: var(--yfj-band-c-bg); }
.yfj-report-card[data-band="D"] .yfj-report-tile { background: var(--yfj-band-d-bg); }
.yfj-report-card[data-band="E"] .yfj-report-tile { background: var(--yfj-band-e-bg); }

.yfj-report-letter {
	font-size: clamp(72px, 9vw, 108px);
	font-weight: 800;
	line-height: .88;
	letter-spacing: -4px;
	margin-bottom: 18px;
}

.yfj-report-card[data-band="A"] .yfj-report-letter { color: var(--yfj-band-a); }
.yfj-report-card[data-band="B"] .yfj-report-letter { color: var(--yfj-band-b); }
.yfj-report-card[data-band="C"] .yfj-report-letter { color: var(--yfj-band-c); }
.yfj-report-card[data-band="D"] .yfj-report-letter { color: var(--yfj-band-d); }
.yfj-report-card[data-band="E"] .yfj-report-letter { color: var(--yfj-band-e); }

.yfj-report-section {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--yfj-ink);
	line-height: 1.45;
}

/* Columns 2-5 — content panes */
.yfj-report-col {
	padding: clamp(20px, 2.4vw, 28px) clamp(16px, 1.8vw, 24px);
	border-left: 1px solid var(--yfj-line-soft);
	min-width: 0;
}

.yfj-report-col:nth-child(2) { border-left: none; }

.yfj-report-col-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--yfj-ink);
	margin: 0 0 10px;
	line-height: 1.4;
}

.yfj-report-identity {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--yfj-ink);
	margin: 0 0 12px;
	line-height: 1.4;
}

.yfj-report-score {
	font-size: 14px;
	color: var(--yfj-body);
	margin: 0;
}

.yfj-report-scorebar {
	margin-top: 12px;
	height: 6px;
	background: var(--yfj-line);
	border-radius: 3px;
	overflow: hidden;
}

.yfj-report-scorefill {
	height: 100%;
	border-radius: 3px;
	transition: width .6s cubic-bezier(.22,.61,.36,1);
}

.yfj-report-card[data-band="A"] .yfj-report-scorefill { background: var(--yfj-band-a); }
.yfj-report-card[data-band="B"] .yfj-report-scorefill { background: var(--yfj-band-b); }
.yfj-report-card[data-band="C"] .yfj-report-scorefill { background: var(--yfj-band-c); }
.yfj-report-card[data-band="D"] .yfj-report-scorefill { background: var(--yfj-band-d); }
.yfj-report-card[data-band="E"] .yfj-report-scorefill { background: var(--yfj-band-e); }

.yfj-report-text {
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--yfj-body);
	margin: 0;
}

.yfj-report-text + .yfj-report-text { margin-top: 9px; }

/* ── Report actions ─────────────────────────────────────────────────────── */

.yfj-report-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: clamp(28px, 4vw, 42px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--yfj-line);
}

/* ── Responsive report ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.yfj-report-card {
		grid-template-columns: 200px 1fr 1fr;
	}
	/* Career path + manage-you drop to a second row spanning the content area */
	.yfj-report-col:nth-child(4) { grid-column: 2 / 3; border-top: 1px solid var(--yfj-line-soft); border-left: none; }
	.yfj-report-col:nth-child(5) { grid-column: 3 / 4; border-top: 1px solid var(--yfj-line-soft); }
	.yfj-report-tile { grid-row: 1 / 3; min-height: 0; }
}

@media (max-width: 782px) {
	.yfj-report-card {
		grid-template-columns: 1fr;
	}

	.yfj-report-tile {
		grid-row: auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
		text-align: left;
		min-height: 0;
		padding: 20px 22px;
	}

	.yfj-report-letter {
		font-size: 62px;
		margin-bottom: 0;
		letter-spacing: -2px;
	}

	.yfj-report-col,
	.yfj-report-col:nth-child(4),
	.yfj-report-col:nth-child(5) {
		grid-column: auto;
		border-left: none;
		border-top: 1px solid var(--yfj-line-soft);
		padding: 18px 22px;
	}

	.yfj-report-col:nth-child(2) { border-top: none; }

	.yfj-report-head {
		flex-direction: column;
		align-items: stretch;
	}

	.yfj-report-summary { justify-content: space-between; }

	.yfj-report-actions .yfj-btn { flex: 1 1 100%; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
	.yfj-report-actions,
	header, footer, nav,
	.elementor-location-header,
	.elementor-location-footer { display: none !important; }

	.yfj-report { max-width: none; padding: 0; }

	.yfj-report-card {
		break-inside: avoid;
		page-break-inside: avoid;
		box-shadow: none;
		margin-bottom: 12px;
	}

	.yfj-report-tile { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * STUDENT DASHBOARD
 * ═══════════════════════════════════════════════════════════════════════ */

.yfj-dash {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px) 20px clamp(40px, 6vw, 64px);
}

/* ── Welcome strip ──────────────────────────────────────────────────────── */

.yfj-dash-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yfj-gap-lg);
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--yfj-navy) 0%, #2A4580 100%);
	border-radius: var(--yfj-radius-lg);
	padding: clamp(24px, 3.5vw, 38px);
	margin-bottom: var(--yfj-gap);
	color: #fff;
}

.yfj-dash-hero .yfj-eyebrow { color: #FFB89A; }

.yfj-dash-hello {
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	margin: 0 0 6px;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.yfj-dash-sub {
	font-size: 15px;
	color: rgba(255, 255, 255, .78);
	margin: 0;
	max-width: 520px;
	line-height: 1.6;
}

.yfj-dash-hero-score {
	text-align: right;
	flex-shrink: 0;
}

.yfj-dash-hero-score-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin: 0 0 8px;
}

.yfj-dash-hero-bands {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.yfj-dash-hero-band {
	width: 40px;
	height: 40px;
	border-radius: var(--yfj-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 17px;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .22);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

.yfj-dash-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--yfj-gap);
	align-items: start;
}

.yfj-dash-col {
	display: flex;
	flex-direction: column;
	gap: var(--yfj-gap);
	min-width: 0;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

.yfj-panel {
	background: var(--yfj-surface);
	border: 1px solid var(--yfj-line);
	border-radius: var(--yfj-radius);
	box-shadow: var(--yfj-shadow);
	overflow: hidden;
}

.yfj-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--yfj-line-soft);
}

.yfj-panel-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--yfj-navy);
	margin: 0;
}

.yfj-panel-body { padding: 22px; }
.yfj-panel-body-flush { padding: 0; }

/* ── Profile completion ─────────────────────────────────────────────────── */

.yfj-progress-ring {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

.yfj-progress-num {
	font-size: 34px;
	font-weight: 800;
	color: var(--yfj-navy);
	line-height: 1;
}

.yfj-progress-track {
	flex: 1;
	height: 9px;
	background: var(--yfj-line);
	border-radius: 5px;
	overflow: hidden;
}

.yfj-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--yfj-orange) 0%, #F0803F 100%);
	border-radius: 5px;
	transition: width .6s cubic-bezier(.22,.61,.36,1);
}

.yfj-checklist { list-style: none; margin: 0; padding: 0; }

.yfj-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--yfj-line-soft);
}

.yfj-checklist li:last-child { border-bottom: none; }

.yfj-check {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

.yfj-checklist .done .yfj-check { background: #D1FAE5; color: #065F46; }
.yfj-checklist .todo .yfj-check { background: #FEF3C7; color: #92400E; }
.yfj-checklist .done span:nth-child(2) { color: var(--yfj-body); }
.yfj-checklist .todo span:nth-child(2) { color: var(--yfj-navy); font-weight: 500; }

.yfj-checklist a {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--yfj-orange);
	text-decoration: none;
	white-space: nowrap;
}

.yfj-checklist a:hover { text-decoration: underline; }

/* ── Info rows ──────────────────────────────────────────────────────────── */

.yfj-info-list { list-style: none; margin: 0; padding: 0; }

.yfj-info-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 22px;
	font-size: 14px;
	border-bottom: 1px solid var(--yfj-line-soft);
}

.yfj-info-list li:last-child { border-bottom: none; }

.yfj-info-key {
	color: var(--yfj-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.yfj-info-val {
	color: var(--yfj-ink);
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

/* ── Quiz status block ──────────────────────────────────────────────────── */

.yfj-quizstate {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.yfj-quizstate-main { flex: 1; min-width: 220px; }

.yfj-quizstate-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--yfj-navy);
	margin: 0 0 5px;
}

.yfj-quizstate-desc {
	font-size: 14px;
	color: var(--yfj-muted);
	margin: 0;
	line-height: 1.55;
}

.yfj-quizstate-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ── Shortcuts ──────────────────────────────────────────────────────────── */

.yfj-shortcuts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.yfj-shortcut {
	display: block;
	padding: 15px 16px;
	background: var(--yfj-surface-alt);
	border: 1px solid var(--yfj-line);
	border-radius: var(--yfj-radius-sm);
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.yfj-shortcut:hover {
	background: var(--yfj-orange-50);
	border-color: rgba(232, 82, 26, .35);
	transform: translateY(-1px);
}

.yfj-shortcut-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--yfj-navy);
	margin-bottom: 2px;
}

.yfj-shortcut-desc {
	display: block;
	font-size: 12.5px;
	color: var(--yfj-muted);
	line-height: 1.45;
}

/* ── Resume block ───────────────────────────────────────────────────────── */

.yfj-resume-state {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--yfj-radius-sm);
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.55;
}

.yfj-resume-none      { background: var(--yfj-surface-alt); color: var(--yfj-body); }
.yfj-resume-pending   { background: var(--yfj-warn-bg);     color: #78350F; }
.yfj-resume-review    { background: #EEF2FF;                color: var(--yfj-navy); }
.yfj-resume-approved  { background: var(--yfj-success-bg);  color: #0A3D1F; }
.yfj-resume-rejected  { background: var(--yfj-danger-bg);   color: #7F1D1D; }

.yfj-resume-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }

.yfj-resume-state strong { display: block; margin-bottom: 3px; }

.yfj-upload-row {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.yfj-file-input {
	flex: 1;
	min-width: 200px;
	padding: 10px 12px;
	border: 1px dashed var(--yfj-line);
	border-radius: var(--yfj-radius-sm);
	font-size: 13.5px;
	background: var(--yfj-surface-alt);
	cursor: pointer;
}

/* ── Empty states ───────────────────────────────────────────────────────── */

.yfj-empty {
	text-align: center;
	padding: 32px 20px;
	color: var(--yfj-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ── Responsive dashboard ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.yfj-dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.yfj-dash-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--yfj-gap);
	}

	.yfj-dash-hero-score { text-align: left; width: 100%; }
	.yfj-dash-hero-bands { justify-content: flex-start; }

	.yfj-shortcuts { grid-template-columns: 1fr; }

	.yfj-quizstate { flex-direction: column; align-items: stretch; }
	.yfj-quizstate-actions .yfj-btn { flex: 1; }

	.yfj-info-list li { flex-direction: column; gap: 3px; }
	.yfj-info-val { text-align: left; }

	.yfj-checklist li { flex-wrap: wrap; }
	.yfj-checklist a { margin-left: 33px; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * THANK YOU
 * ═══════════════════════════════════════════════════════════════════════ */

.yfj-thankyou {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 88px) 20px;
	text-align: center;
}

.yfj-thankyou-mark {
	width: 74px;
	height: 74px;
	margin: 0 auto clamp(20px, 3vw, 28px);
	border-radius: 50%;
	background: var(--yfj-success-bg);
	color: var(--yfj-success);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 700;
	border: 3px solid rgba(26, 122, 60, .2);
}

.yfj-thankyou .yfj-lede {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.yfj-thankyou-actions {
	margin: clamp(24px, 4vw, 34px) 0 16px;
}

@media (max-width: 600px) {
	.yfj-thankyou-actions .yfj-btn { width: 100%; }
}