:root {
--ink: #0f172a;
--ink2: #334155;
--mute: #64748b;
--line: #e2e8f0;
--bg: #f8fafc;
--card: #ffffff;
--blue: #2563eb;
--blueS: #eff6ff;
--blueL: #dbeafe;
--green: #059669;
--greenS: #ecfdf5;
--greenL: #a7f3d0;
--amber: #d97706;
--amberS: #fffbeb;
--amberL: #fde68a;
--red: #dc2626;
--redS: #fef2f2;
--purple: #7c3aed;
--purpleS: #f5f3ff;
--purpleL: #ddd6fe;
--teal: #0d9488;
--tealS: #f0fdfa;
--pink: #db2777;
--pinkS: #fdf2f8;
--gray: #6b7280;
--grayS: #f3f4f6;
--grayL: #d1d5db;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.report-container {
max-width: 900px;
margin: 0 auto;
background: var(--card);
box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}
/* ── Hero Header ── */
.hero {
background: linear-gradient(135deg, #1e40af 0%, #6d28d9 100%);
color: #fff;
padding: 40px;
position: relative;
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.hero .report-label {
color: #c7d2fe;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 8px;
font-weight: 600;
}
.hero h1 {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.hero .sub {
color: #dbeafe;
font-size: 14px;
margin-bottom: 6px;
}
.hero-meta {
text-align: right;
font-size: 12px;
color: #c7d2fe;
line-height: 1.8;
}
.badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.badge {
padding: 7px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
}
.badge.learner-type {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}
.badge.decision-conf {
background: rgba(255,255,255,0.12);
color: #fde68a;
border: 1.5px solid #fde68a;
}
.badge.intent {
background: rgba(255,255,255,0.12);
color: #93c5fd;
border: 1.5px solid #93c5fd;
}
/* ── Section Group Layout (from old report) ── */
.section-group {
padding: 30px 40px;
border-bottom: 1px solid var(--line);
}
.section-group:last-child { border-bottom: none; }
.group-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.group-icon {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.group-icon svg { width: 20px; height: 20px; }
.group-icon.blue { background: var(--blueS); }
.group-icon.green { background: var(--greenS); }
.group-icon.purple { background: var(--purpleS); }
.group-icon.amber { background: var(--amberS); }
.group-icon.teal { background: var(--tealS); }
.group-icon.red { background: var(--redS); }
.group-icon.pink { background: var(--pinkS); }
.group-title {
font-size: 20px;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.01em;
}
.section-block { margin-bottom: 24px; }
.section-block:last-child { margin-bottom: 0; }
/* ── Confidence Badges ── */
.confidence {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .04em;
margin-left: auto;
}
.conf-high { background: var(--greenS); color: var(--green); }
.conf-med { background: var(--amberS); color: var(--amber); }
/* ── Cards ── */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(15,23,42,0.03);
}
/* ── Callout boxes ── */
.callout {
border-left: 3px solid var(--blue);
background: var(--blueS);
padding: 16px 18px;
border-radius: 0 10px 10px 0;
margin: 14px 0;
font-size: 14px;
color: var(--ink2);
line-height: 1.7;
}
.callout.green { background: var(--greenS); border-color: var(--green); }
.callout.amber { background: var(--amberS); border-color: var(--amber); }
.callout.purple { background: var(--purpleS); border-color: var(--purple); }
.callout.teal { background: var(--tealS); border-color: var(--teal); }
.callout.red { background: var(--redS); border-color: var(--red); }
.callout strong { color: var(--ink); }
/* ── Chips ── */
.chip {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
margin: 3px 3px 3px 0;
}
.chip.green { background: var(--greenS); color: var(--green); border: 1px solid var(--greenL); }
.chip.amber { background: var(--amberS); color: var(--amber); border: 1px solid var(--amberL); }
.chip.purple { background: var(--purpleS); color: var(--purple); border: 1px solid var(--purpleL); }
.chip.blue { background: var(--blueS); color: var(--blue); border: 1px solid var(--blueL); }
/* ── Executive Summary fields ── */
.exec-field {
border-left: 3px solid var(--blue);
background: var(--blueS);
padding: 14px 18px;
border-radius: 0 10px 10px 0;
margin-bottom: 12px;
}
.exec-field .field-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--blue);
font-weight: 700;
margin-bottom: 4px;
}
.exec-field .field-text {
font-size: 14px;
color: var(--ink2);
line-height: 1.7;
}
/* ── Executive Summary (new shape: paragraph + highlights) ── */
.exec-paragraph {
font-size: 15px;
line-height: 1.75;
color: var(--ink);
margin: 0 0 14px;
padding: 18px 20px;
background: linear-gradient(135deg, var(--blueS) 0%, var(--purpleS) 100%);
border-left: 4px solid var(--blue);
border-radius: 0 12px 12px 0;
}
.exec-highlights {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
margin-bottom: 8px;
}
.exec-highlights .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
}
.exec-highlights .chip-label {
text-transform: uppercase;
letter-spacing: .05em;
font-size: 10px;
font-weight: 700;
opacity: .75;
}
.exec-highlights .chip-value {
font-weight: 600;
}
/* ── Learner Profile ── */
.learner-card {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border: 1px solid var(--purpleL);
border-radius: 14px;
padding: 28px;
}
.learner-card .lp-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--purple);
font-weight: 700;
margin-bottom: 6px;
}
.learner-card .lp-type {
font-size: 22px;
font-weight: 700;
color: #5b21b6;
margin-bottom: 12px;
}
.learner-card p { color: var(--ink2); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.trait-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
/* ── RIASEC Radar ── */
.radar-container {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: start;
}
.radar-wrap { width: 280px; height: 280px; }
.riasec-legend { font-size: 13px; color: var(--ink2); }
.riasec-legend .code-item { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.riasec-legend .code-letter { font-weight: 800; font-size: 18px; min-width: 24px; }
/* ── Domain Podium ── */
.domain-podium {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.domain-card {
border-radius: 12px;
padding: 18px;
text-align: center;
}
.domain-card.gold { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; }
.domain-card.silver { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); border: 2px solid #94a3b8; }
.domain-card.bronze { background: linear-gradient(135deg, #fef2f2, #fecaca); border: 2px solid #f87171; }
.domain-card .rank { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; color: var(--mute); }
.domain-card .domain-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.domain-card .domain-score { font-size: 32px; font-weight: 800; margin-top: 6px; }
/* ── Bar chart ── */
.bar-row { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.bar-label { flex: 0 0 180px; font-size: 13px; color: var(--ink2); font-weight: 500; }
.bar-track { flex: 1; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }
.bar-val { flex: 0 0 40px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); }
.muted { color: var(--mute); font-size: 13px; }
/* ── Intersection cards ── */
.intersection-card {
background: var(--purpleS);
border: 1px solid var(--purpleL);
border-radius: 12px;
padding: 18px;
margin-bottom: 12px;
}
.intersection-card .field-name { font-weight: 700; font-size: 15px; color: var(--purple); margin-bottom: 2px; }
.intersection-card .domains-tag { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.intersection-card p { font-size: 13px; color: var(--ink2); margin: 0; }
/* ── Program cards ── */
.program-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
margin-bottom: 12px;
}
.program-card .program-name { font-weight: 700; font-size: 15px; color: var(--blue); margin-bottom: 4px; }
.program-card .emphasis { font-size: 13px; color: var(--ink2); margin-bottom: 4px; }
.program-card .suits-you { font-size: 13px; color: var(--purple); font-style: italic; }
/* ── Career tags ── */
.career-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.career-tag {
background: var(--blueS);
border: 1px solid var(--blueL);
color: var(--blue);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
}
/* ── Readiness ── */
.readiness-overall {
background: linear-gradient(135deg, var(--blueS), var(--purpleS));
border-radius: 14px;
padding: 24px;
text-align: center;
margin-bottom: 20px;
border: 1px solid var(--line);
}
.readiness-overall .ro-score { font-size: 48px; font-weight: 800; color: var(--blue); }
.readiness-overall .ro-label { font-size: 13px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.readiness-card {
border-radius: 12px;
padding: 18px;
margin-bottom: 12px;
}
.readiness-card.strength { background: var(--greenS); border: 1px solid var(--greenL); }
.readiness-card.growth { background: var(--amberS); border: 1px solid var(--amberL); }
.readiness-card .dim-label { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.readiness-card .observation { font-size: 13px; color: var(--ink2); margin-bottom: 10px; }
.readiness-card .actions { list-style: none; padding: 0; }
.readiness-card .actions li { font-size: 13px; padding: 4px 0 4px 18px; position: relative; color: var(--ink2); }
.readiness-card .actions li::before { content: "\2192"; position: absolute; left: 0; color: var(--ink); }
.scenario-box {
background: linear-gradient(135deg, #fef3c7, #fffbeb);
border: 2px solid var(--amber);
border-radius: 14px;
padding: 22px;
margin: 18px 0;
}
.scenario-box .scenario-title { font-weight: 700; font-size: 14px; color: var(--amber); margin-bottom: 8px; }
.scenario-box .scenario-situation { font-size: 14px; color: var(--ink2); margin-bottom: 12px; font-style: italic; }
.scenario-box ul { padding-left: 20px; }
.scenario-box li { font-size: 13px; color: var(--ink2); margin-bottom: 6px; }
/* ── Country Cards ── */
.country-card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 24px;
margin-bottom: 18px;
position: relative;
}
.country-card.top { border-color: var(--greenL); background: linear-gradient(180deg, var(--greenS), #fff 40%); }
.country-rank {
position: absolute;
top: -11px;
left: 20px;
background: var(--green);
color: #fff;
padding: 3px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
}
.country-card h3 {
font-size: 20px;
font-weight: 700;
color: var(--ink);
margin: 0 0 8px;
}
.country-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 14px 0;
font-size: 12px;
color: var(--mute);
}
.country-meta strong { color: var(--ink); display: block; font-size: 13px; }
.match-badge {
display: inline-block;
background: var(--greenS);
color: var(--green);
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
/* ── Cost tables ── */
.cost-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 12px 0; }
.cost-table th {
text-align: left;
padding: 9px 12px;
background: #edf2f7;
color: var(--mute);
font-weight: 600;
border-bottom: 2px solid #cbd5e0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
}
.cost-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cost-table .amt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cost-table .hl { background: #fffbeb; }
.cost-table .track-note { font-size: 11px; color: var(--mute); font-weight: 400; }
/* ── Upfront costs grid ── */
.upfront-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
margin: 12px 0;
}
.upfront-item {
background: var(--amberS);
border: 1px solid var(--amberL);
border-radius: 10px;
padding: 10px;
text-align: center;
}
.upfront-item .uf-label { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.upfront-item .uf-val { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
/* ── Scholarship card ── */
.scholarship-card {
background: var(--greenS);
border: 1px solid var(--greenL);
border-radius: 12px;
padding: 16px;
margin: 12px 0;
}
.scholarship-card h5 { font-size: 13px; color: var(--green); margin-bottom: 8px; font-weight: 700; }
.scholarship-card li { font-size: 12px; margin-bottom: 4px; color: var(--ink2); }
/* ── Study culture grid ── */
.culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.culture-item { padding: 12px; border-radius: 10px; font-size: 13px; }
.culture-item.adjust { background: #fff7ed; border: 1px solid #fed7aa; }
.culture-item.advantage { background: var(--greenS); border: 1px solid var(--greenL); }
.culture-item .ci-label { font-weight: 700; font-size: 12px; margin-bottom: 3px; color: var(--ink); }
/* ── Practical info grid ── */
.pinfo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.pinfo-item { font-size: 13px; color: var(--ink2); }
.pinfo-item strong { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-bottom: 2px; font-weight: 600; }
/* ── Test cards ── */
.test-card { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.test-card .test-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.test-card .test-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.priority-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.priority-required { background: var(--redS); color: var(--red); }
.priority-recommended { background: var(--amberS); color: var(--amber); }
.priority-optional { background: var(--grayS); color: var(--gray); }
.test-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; font-size: 12px; }
.test-meta .tm-item { background: var(--bg); border-radius: 8px; padding: 8px; text-align: center; }
.test-meta .tm-label { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .03em; }
.test-meta .tm-val { font-weight: 600; color: var(--ink); margin-top: 2px; }
/* ── Action items ── */
.action-item {
display: flex;
gap: 14px;
padding: 14px;
border-radius: 12px;
background: var(--bg);
margin-bottom: 10px;
border: 1px solid var(--line);
}
.action-num {
flex: 0 0 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: #fff;
}
.action-num.blue { background: var(--blue); }
.action-num.green { background: var(--green); }
.action-num.purple { background: var(--purple); }
.action-num.amber { background: var(--amber); }
.action-num.teal { background: var(--teal); }
.action-body { flex: 1; font-size: 14px; color: var(--ink2); }
.action-body strong { display: block; color: var(--ink); margin-bottom: 3px; }
.action-type-tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 4px; padding: 2px 8px; border-radius: 10px; }
.action-type-tag.blue { background: var(--blueS, #eff6ff); color: var(--blue); }
.action-type-tag.green { background: var(--greenS, #f0fdf4); color: var(--green); }
.action-type-tag.purple { background: var(--purpleS, #faf5ff); color: var(--purple); }
.action-type-tag.amber { background: var(--amberS); color: var(--amber); }
.action-type-tag.teal { background: var(--tealS); color: var(--teal); }
/* ── Family prompts ── */
.family-prompt {
display: flex;
gap: 14px;
padding: 16px;
border-radius: 12px;
background: var(--tealS);
margin-bottom: 10px;
border-left: 3px solid var(--teal);
}
.family-prompt .prompt-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); font-weight: 700; margin-bottom: 4px; }
.family-prompt .prompt-text { font-size: 14px; color: var(--ink2); line-height: 1.6; font-style: italic; }
/* ── Stats row ── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.stat-box {
text-align: center;
padding: 14px;
background: var(--bg);
border-radius: 10px;
border: 1px solid var(--line);
}
.stat-box .stat-val { font-size: 20px; font-weight: 800; color: var(--ink); }
.stat-box .stat-label { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
/* ── Checklist ── */
.checklist { list-style: none; padding: 0; }
.checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px dashed var(--line);
font-size: 13px;
color: var(--ink2);
}
.checklist li:last-child { border: none; }
.checklist li::before { content: "\2610"; font-size: 14px; color: var(--mute); flex: 0 0 18px; }
/* ── Financial comparison table ── */
.fin-compare { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0; }
.fin-compare th { text-align: left; padding: 10px 12px; background: var(--blueS); color: var(--blue); font-weight: 600; border-bottom: 2px solid var(--blueL); font-size: 12px; }
.fin-compare td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.fin-compare .amt { font-weight: 600; color: var(--ink); }
/* ── Key note ── */
.key-note {
background: var(--greenS);
border: 1px solid var(--greenL);
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
color: var(--green);
font-weight: 500;
margin: 12px 0;
}
/* ── Tradeoff box ── */
.tradeoff-box {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
color: var(--ink2);
margin: 12px 0;
}
.tradeoff-box strong { color: var(--amber); }
/* ── Intersection Chips ── */
.intersection-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--purpleS);
border: 1px solid var(--purpleL);
border-radius: 999px;
padding: 6px 14px;
font-size: 12px;
}
.ix-domains { font-weight: 600; color: var(--purple); }
.ix-arrow { color: var(--mute); }
.ix-field { color: var(--ink); font-weight: 500; }
/* ── Enhanced Program Cards ── */
.career-direction {
font-size: 12px;
color: var(--teal);
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--line);
}
.future-proof-indicator {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 12px;
}
.fp-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; }
.fp-note { color: var(--mute); font-style: italic; }
/* ── Possible Paths Buckets ── */
.path-intro-note {
font-size: 13px;
color: var(--ink2);
font-style: italic;
margin: 14px 0 18px;
padding: 12px 16px;
background: linear-gradient(135deg, var(--blueS), var(--purpleS));
border-left: 3px solid var(--blue);
border-radius: 0 10px 10px 0;
}
.path-buckets-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 18px 0;
}
.path-bucket {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
position: relative;
overflow: hidden;
transition: transform .2s, box-shadow .2s;
}
.path-bucket::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--bucket-color, var(--blue));
}
.path-bucket:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.path-bucket.bucket-strategy { --bucket-color: #2563eb; --bucket-bg: #eff6ff; --bucket-fg: #1e40af; }
.path-bucket.bucket-finance { --bucket-color: #059669; --bucket-bg: #ecfdf5; --bucket-fg: #047857; }
.path-bucket.bucket-people { --bucket-color: #db2777; --bucket-bg: #fdf2f8; --bucket-fg: #be185d; }
.path-bucket.bucket-global { --bucket-color: #7c3aed; --bucket-bg: #f5f3ff; --bucket-fg: #6d28d9; }
.bucket-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 2px solid var(--bucket-bg, var(--blueS));
}
.bucket-icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--bucket-bg, var(--blueS));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bucket-icon { font-size: 26px; line-height: 1; }
.bucket-title-block { flex: 1; min-width: 0; }
.bucket-title {
font-weight: 700;
font-size: 16px;
color: var(--ink);
line-height: 1.2;
display: block;
}
.bucket-vibe {
display: inline-block;
margin-top: 4px;
font-size: 11px;
color: var(--bucket-fg, var(--blue));
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
background: var(--bucket-bg, var(--blueS));
padding: 3px 8px;
border-radius: 999px;
}
/* Bucket rows (5 sections per card) */
.bucket-row { margin-bottom: 12px; }
.bucket-row:last-child { margin-bottom: 0; }
.bucket-row-label {
font-size: 11px;
font-weight: 700;
color: var(--bucket-fg, var(--blue));
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 4px;
}
.bucket-row-text {
font-size: 13px;
color: var(--ink2);
line-height: 1.55;
}
/* "You'd love this if" hooks */
.bucket-hooks {
list-style: none;
padding: 0;
margin: 0;
}
.bucket-hooks li {
font-size: 12px;
color: var(--ink2);
padding: 2px 0 2px 16px;
position: relative;
line-height: 1.5;
}
.bucket-hooks li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--bucket-color, var(--blue));
font-weight: 700;
font-size: 12px;
}
/* Industry tags */
.bucket-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.bucket-tag {
background: var(--bucket-bg, var(--blueS));
color: var(--bucket-fg, var(--blue));
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
}
/* Example roles */
.bucket-roles {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.bucket-roles li {
font-size: 12px;
color: var(--ink);
font-weight: 500;
padding: 5px 10px 5px 22px;
background: var(--bg);
border-left: 2px solid var(--bucket-color, var(--blue));
border-radius: 4px;
position: relative;
}
.bucket-roles li::before {
content: "\2192";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--bucket-color, var(--blue));
font-weight: 700;
font-size: 12px;
}
.skills-travel {
background: linear-gradient(135deg, var(--blueS), var(--purpleS));
border: 1px solid var(--blueL);
border-radius: 12px;
padding: 16px 18px;
margin-top: 16px;
}
.skills-travel h4 {
font-size: 14px;
color: var(--ink);
margin: 0 0 6px;
}
.skills-travel p {
font-size: 12px;
color: var(--ink2);
margin: 0 0 10px;
}
.skills-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-chip {
background: var(--card);
border: 1px solid var(--blueL);
color: var(--blue);
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
/* ── Also Consider Cards ── */
.also-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
transition: box-shadow .2s;
}
.also-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.also-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.also-flag { font-size: 22px; }
.also-name { font-weight: 700; font-size: 15px; color: var(--ink); flex: 1; }
.also-score {
background: var(--blueS);
color: var(--blue);
font-weight: 700;
font-size: 13px;
padding: 3px 10px;
border-radius: 999px;
}
.also-highlights { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.also-chip {
background: var(--grayS);
color: var(--ink2);
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 500;
}
.also-note { font-size: 12px; color: var(--ink2); margin-bottom: 6px; line-height: 1.5; }
.also-cost { font-size: 11px; color: var(--mute); font-weight: 600; }
/* ── Compressed Test Table ── */
.alt-tests-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin: 8px 0;
}
.alt-tests-table th {
text-align: left;
padding: 8px 10px;
background: var(--grayS);
color: var(--ink2);
font-weight: 600;
border-bottom: 2px solid var(--line);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
}
.alt-tests-table td {
padding: 10px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.alt-tests-table .amt { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* ── Disclaimer ── */
.disclaimer {
font-size: 11px;
color: var(--mute);
background: #f1f5f9;
padding: 16px 20px;
border-radius: 10px;
margin-top: 20px;
border: 1px solid var(--line);
line-height: 1.8;
}
p { margin: 0 0 10px; color: var(--ink2); }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 10px; font-weight: 600; }
/* ── Responsive ── */
@media (max-width: 640px) {
.hero { padding: 28px 20px; }
.hero h1 { font-size: 24px; }
.hero-top { flex-direction: column; }
.hero-meta { text-align: left; margin-top: 12px; }
.section-group { padding: 24px 20px; }
.radar-container { grid-template-columns: 1fr; }
.domain-podium { grid-template-columns: 1fr; }
.bar-label { flex-basis: 110px; font-size: 12px; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.country-meta { grid-template-columns: 1fr; }
.culture-grid { grid-template-columns: 1fr; }
.pinfo-grid { grid-template-columns: 1fr; }
.test-meta { grid-template-columns: repeat(2, 1fr); }
.path-buckets-grid { grid-template-columns: 1fr; }
}
@media print {
body { background: #fff; }
.report-container { box-shadow: none; }
.section-group { break-inside: avoid; }
.hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}