/* مُرتقى — صفحة النتيجة */
.result-main { padding-block: var(--sp-6) var(--sp-8); }
.result-container { max-width: 1120px; }
.result-heading { margin-bottom: var(--sp-5); }
.result-heading h1 { margin-top: var(--sp-1); font-size: var(--fs-xl); }
.result-app { min-width: 0; }
.result-stack { display: grid; gap: var(--sp-4); }
.result-overall {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--brand-soft), var(--surface) 66%);
  box-shadow: var(--sh-3);
}
.result-overall::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  inset-inline-end: -70px;
  bottom: -95px;
  border: 34px solid color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.result-overall__score {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.result-code {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 8px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  color: var(--brand);
  font: 800 2rem/1 "Segoe UI", Arial, sans-serif;
  box-shadow: var(--sh-2);
}
.result-overall h2 { font-size: var(--fs-2xl); }
.result-mode-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--sp-2);
  padding: .35rem .75rem;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border));
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.result-mode-badge--quick {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  background: var(--green-soft);
  color: var(--green-strong);
}
.result-mode-notice {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border));
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--green-soft), var(--surface));
}
.result-mode-notice h2 { font-size: var(--fs-lg); }
.result-mode-notice p { color: var(--text-muted); }
.result-mode-notice .btn { width: fit-content; }
.result-overall__label {
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-weight: 700;
}
.borderline-note {
  width: fit-content;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
}
.result-summary {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  color: var(--text-muted);
}
.confidence-alert {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--orange) 55%, var(--border));
  border-radius: var(--r-lg);
  background: var(--orange-soft);
}
.confidence-alert h2 { font-size: var(--fs-lg); color: var(--orange-strong); }
.confidence-alert p { color: var(--text-muted); font-size: var(--fs-sm); }

.result-section {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.result-section__head { margin-bottom: var(--sp-4); }
.result-section__head h2 { font-size: var(--fs-xl); }
.result-section__head p { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); }
.dimension-grid { display: grid; gap: var(--sp-3); }
.dimension-card {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.dimension-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.dimension-level {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  color: var(--brand);
  background: var(--brand-soft);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
}
.dimension-card p { color: var(--text-muted); font-size: var(--fs-sm); }
.insight-grid { display: grid; gap: var(--sp-3); }
.insight-card {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--brand-soft);
}
.insight-card--gap { background: var(--orange-soft); }
.insight-card__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.insight-card h3 { margin-bottom: var(--sp-2); }
.insight-card p { color: var(--text-muted); font-size: var(--fs-sm); }
.personalization-list { display: grid; gap: var(--sp-2); }
.personalization-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.personalization-item:last-child { border-bottom: 0; }
.personalization-item dt { color: var(--text-muted); }
.personalization-item dd { margin: 0; font-weight: 800; }
.result-note {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.result-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.related-result-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.related-result-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  background: var(--surface);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.related-result-link:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sh-1);
}
.related-result-link__arrow {
  color: var(--brand);
  font-size: var(--fs-lg);
}
.delete-result {
  color: var(--text-muted);
  border-color: var(--border);
}
.delete-result:hover { color: #B42318; border-color: #B42318; }
.empty-result {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.empty-result p { max-width: 48ch; color: var(--text-muted); }
.empty-result__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.result-disclaimer {
  padding: var(--sp-4);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--r-md);
  color: var(--text-muted);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}

.result-section,
.result-overall,
.confidence-alert { scroll-margin-top: 92px; }
.result-overall__copy { min-width: 0; }
.result-overall .eyebrow { color: var(--brand); }
.level-scale {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.level-scale__step {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
}
.level-scale__step--passed { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.level-scale__step--current {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-2);
}
.level-scale__code { font: 800 1.05rem/1 "Segoe UI", Arial, sans-serif; }
.level-scale__label { font-size: .75rem; font-weight: 700; text-align: center; }
.report-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--sh-1);
}
.report-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  color: var(--text-muted);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.report-nav a:hover,
.report-nav a:focus-visible { color: var(--brand); background: var(--brand-soft); }
.report-two-column,
.goal-grid,
.gap-action-grid,
.weeks-grid,
.phase-grid,
.resource-grid {
  display: grid;
  gap: var(--sp-3);
}
.report-card {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.report-card--positive {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 68%, var(--surface));
}
.report-card--accent {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--border));
  background: var(--brand-soft);
}
.report-card h3,
.avoid-card h3 { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.report-card p,
.university-copy { color: var(--text-muted); }
.report-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-inline-start: 1.25rem;
}
.report-list li { padding-inline-start: var(--sp-1); color: var(--text-muted); }
.report-list li::marker { color: var(--brand); font-weight: 800; }
.report-list--compact { gap: var(--sp-1); font-size: var(--fs-sm); }
.dimension-grid--rich .dimension-card { align-content: start; }
.dimension-card__meaning { color: var(--text) !important; font-weight: 700; }
.dimension-card strong {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.report-details {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.report-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brand);
  cursor: pointer;
  font-weight: 800;
}
.report-details h4 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); }
.gap-action-grid { margin-top: var(--sp-4); }
.numbered-action {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}
.numbered-action__number {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
}
.numbered-action p { color: var(--text-muted); }
.avoid-card {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-inline-start: 4px solid var(--orange);
  border-radius: var(--r-md);
  background: var(--orange-soft);
}
.goal-grid { margin-bottom: var(--sp-4); }
.result-section--exam {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background: linear-gradient(145deg, var(--surface), var(--brand-soft));
}
.exam-role {
  margin-bottom: var(--sp-4);
  color: var(--text-muted);
}
.exam-status {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
}
.exam-status .eyebrow { color: color-mix(in srgb, #fff 76%, transparent); }
.exam-status h3 { margin: var(--sp-1) 0 var(--sp-2); }
.exam-status p { color: color-mix(in srgb, #fff 86%, transparent); }
.university-copy + .university-copy { margin-top: var(--sp-2); }
.plan-timeline {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: plan;
}
.plan-task {
  position: relative;
  min-width: 0;
  padding: var(--sp-4);
  padding-inline-start: calc(var(--sp-4) + 8px);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.plan-task__meta {
  margin-bottom: var(--sp-1);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.plan-task h3 { margin-bottom: var(--sp-1); }
.plan-task p { color: var(--text-muted); }
.plan-task strong {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}
.week-card,
.phase-card,
.resource-card {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.week-card h3 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-lg); }
.week-card__time {
  margin-block: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.week-card strong { font-size: var(--fs-sm); }
.phase-card {
  border-top: 4px solid var(--brand);
}
.phase-card__month {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--brand);
  font-weight: 800;
}
.phase-card p { color: var(--text-muted); }
.resource-card {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}
.resource-card__provider {
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.resource-card p { color: var(--text-muted); font-size: var(--fs-sm); }
.resource-card__reason { color: var(--text) !important; font-weight: 700; }
.resource-card .btn { margin-top: auto; }

/* Rich decision reports: shared visual primitives, track-specific composition. */
.rich-result {
  --rich-accent: var(--brand);
  --rich-accent-soft: var(--brand-soft);
}
.rich-result--fit {
  --rich-accent: #b86512;
  --rich-accent-soft: #fff6e8;
}
.rich-hero {
  grid-template-columns: minmax(180px, .72fr) minmax(0, 2fr);
  align-items: center;
  border-color: color-mix(in srgb, var(--rich-accent) 28%, var(--border));
  background:
    radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--rich-accent) 15%, transparent), transparent 34%),
    linear-gradient(145deg, var(--rich-accent-soft), var(--surface) 68%);
}
.rich-hero--decision-fit {
  background:
    radial-gradient(circle at 10% 26%, color-mix(in srgb, #e98a24 19%, transparent), transparent 34%),
    linear-gradient(145deg, #fff8ed, var(--surface) 70%);
}
.rich-hero__copy { position: relative; z-index: 1; min-width: 0; }
.rich-hero__copy .eyebrow {
  margin-bottom: var(--sp-2);
  color: var(--rich-accent);
  font-weight: 800;
}
.rich-hero__summary {
  max-width: 68ch;
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-lg);
}
.rich-hero__accent {
  max-width: 68ch;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-inline-start: 4px solid var(--rich-accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--rich-accent-soft) 78%, var(--surface));
  font-weight: 700;
}
.rich-hero__visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.rich-progress {
  --progress: 0;
  width: 156px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--surface) 76%, transparent 78% 99%),
    conic-gradient(var(--rich-accent) calc(var(--progress) * 1%), color-mix(in srgb, var(--rich-accent) 13%, var(--border)) 0);
  text-align: center;
  box-shadow: var(--sh-2);
}
.rich-progress strong {
  color: var(--rich-accent);
  font-size: 2rem;
  line-height: 1;
}
.rich-progress span {
  max-width: 10ch;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.rich-stage-badge {
  width: min(170px, 100%);
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  border: 2px solid var(--rich-accent);
  border-radius: var(--r-xl);
  color: var(--rich-accent);
  background: repeating-linear-gradient(
    135deg,
    var(--surface) 0 10px,
    var(--rich-accent-soft) 10px 20px
  );
  font-weight: 800;
  text-align: center;
}
.rich-hero__disclaimer {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--rich-accent) 16%, var(--border));
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.rich-insight-grid,
.rich-dimension-grid,
.rich-split-grid,
.rich-option-grid {
  display: grid;
  gap: var(--sp-3);
}
.rich-insight {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-top: 4px solid var(--rich-accent);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.rich-insight--strength { border-top-color: var(--green); background: var(--green-soft); }
.rich-insight--gap { border-top-color: var(--orange); background: var(--orange-soft); }
.rich-insight--next { border-top-color: var(--brand); background: var(--brand-soft); }
.rich-insight--primary {
  border-color: color-mix(in srgb, var(--rich-accent) 36%, var(--border));
  background: linear-gradient(145deg, var(--rich-accent-soft), var(--surface));
}
.rich-insight--alternative { border-top-color: #5c6f82; }
.rich-insight__label {
  display: inline-block;
  margin-bottom: var(--sp-2);
  color: var(--rich-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.rich-insight h3 { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.rich-insight p { color: var(--text-muted); }
.rich-insight__action {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--rich-accent) 18%, var(--border));
  color: var(--text) !important;
  font-weight: 700;
}
.rich-dimension {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.rich-dimension--strength { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.rich-dimension--gap { border-color: color-mix(in srgb, var(--orange) 58%, var(--border)); }
.rich-dimension__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.rich-dimension__top h3 { font-size: var(--fs-lg); }
.rich-dimension__score { color: var(--rich-accent); font-size: var(--fs-xl); }
.rich-meter {
  height: 8px;
  margin-block: var(--sp-3);
  overflow: hidden;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--rich-accent) 12%, var(--border));
}
.rich-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rich-accent), color-mix(in srgb, var(--rich-accent) 64%, #fff));
}
.rich-dimension__meaning,
.rich-dimension__impact,
.rich-dimension__action { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }
.rich-dimension__action { color: var(--text); font-weight: 700; }
.rich-list-card {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.rich-list-card--positive { border-inline-start: 4px solid var(--green); }
.rich-list-card--caution { border-inline-start: 4px solid var(--orange); }
.rich-list-card h3 { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.rich-timeline {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rich-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-soft);
}
.rich-timeline__marker {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--rich-accent);
  font-weight: 800;
}
.rich-timeline__item h3 { font-size: var(--fs-md); }
.rich-timeline__item p { margin-top: var(--sp-1); color: var(--text-muted); }
.rich-timeline__item strong { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); }
.rich-direction {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--rich-accent-soft);
  font-weight: 700;
}
.rich-check-list li::marker { color: var(--green); }
.rich-warning-list li::marker { color: var(--orange); }
.rich-section--alternative {
  border-color: color-mix(in srgb, #5c6f82 34%, var(--border));
  background: linear-gradient(145deg, #f6f8fa, var(--surface));
}
.rich-actions {
  position: sticky;
  z-index: 4;
  bottom: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--rich-accent) 24%, var(--border));
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(14px);
}
.rich-result a:focus-visible,
.rich-result button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rich-accent) 72%, #fff);
  outline-offset: 3px;
}

@media (min-width: 720px) {
  .dimension-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-two-column,
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weeks-grid,
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rich-insight-grid--three,
  .rich-dimension-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rich-insight-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rich-dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rich-split-grid,
  .rich-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rich-timeline--month { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .result-main { padding-top: var(--sp-4); }
  .result-overall { padding: var(--sp-5) var(--sp-4); }
  .result-overall__score { align-items: flex-start; }
  .result-code { width: 82px; height: 82px; flex-basis: 82px; border-width: 6px; font-size: 1.65rem; }
  .result-overall h2 { font-size: var(--fs-xl); }
  .result-section { padding: var(--sp-4); }
  .result-actions .btn,
  .empty-result__actions .btn { width: 100%; }
  .related-result-links { grid-template-columns: 1fr; }
  .personalization-item { display: grid; gap: 0; }
  .result-heading h1 { font-size: var(--fs-lg); }
  .result-overall__score { display: grid; }
  .result-code { width: 74px; height: 74px; flex-basis: 74px; }
  .level-scale { gap: 4px; }
  .level-scale__step { padding-inline: 4px; }
  .level-scale__label { font-size: .68rem; }
  .report-nav a { flex: 1 1 calc(50% - var(--sp-2)); justify-content: center; }
  .rich-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .rich-hero__visual { grid-row: 1; }
  .rich-progress { width: 124px; }
  .rich-hero__summary { font-size: var(--fs-md); }
  .rich-dimension__top { align-items: center; }
  .rich-actions { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .report-details summary { scroll-behavior: auto; }
  .rich-actions { backdrop-filter: none; }
}

/* Contract-driven categorical result visualization. Values are stages, never percentages. */
.result-visual {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(var(--sp-4), 4vw, var(--sp-6));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--sh-1);
  scroll-margin-top: 92px;
}
.result-visual__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
}
.result-visual__heading h2 { font-size: var(--fs-xl); }
.result-visual__copy {
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.result-visual__position {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) minmax(0, 1.55fr);
  gap: var(--sp-4);
  align-items: center;
}
.result-visual__current {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-4);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--brand-soft);
}
.result-visual__current span,
.result-visual__current small { color: var(--text-muted); font-size: var(--fs-xs); }
.result-visual__current strong { color: var(--brand); font-size: var(--fs-xl); }
.result-visual__scale {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-visual__stage {
  min-width: 0;
  padding: var(--sp-3) 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  background: var(--surface-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: center;
}
.result-visual__stage.is-passed {
  border-color: color-mix(in srgb, var(--green) 54%, var(--border));
}
.result-visual__stage.is-current {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.result-visual__dimensions { display: grid; gap: var(--sp-2); }
.result-visual__dimension {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}
.result-visual__dimension.is-strength {
  border-inline-start: 5px solid var(--green);
}
.result-visual__dimension.is-gap,
.result-visual__dimension.is-developing {
  border-inline-start: 5px solid var(--orange);
}
.result-visual__dimension-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.result-visual__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--brand);
  font-weight: 900;
}
.is-strength .result-visual__icon { color: var(--green); }
.is-gap .result-visual__icon,
.is-developing .result-visual__icon { color: var(--orange); }
.result-visual__status { color: var(--text-muted); font-size: var(--fs-xs); }
.result-visual__reading {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: var(--sp-3);
  align-items: center;
}
.result-visual__meter-wrap {
  min-width: 0;
  display: grid;
  gap: 5px;
  direction: ltr;
}
.result-visual__meter-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}
.result-visual__meter {
  --result-position: .5;
  min-width: 0;
  position: relative;
  height: 14px;
  margin-block: 13px 2px;
  border: 2px solid color-mix(in srgb, var(--text-muted) 34%, var(--border));
  border-radius: var(--r-full);
  background: linear-gradient(
    90deg,
    #ef665e 0%,
    #f3b43f 34%,
    #7357df 67%,
    #25a76f 100%
  );
  box-shadow:
    inset 0 1px 2px rgb(23 19 40 / .2),
    0 2px 8px color-mix(in srgb, var(--brand) 13%, transparent);
}
.result-visual__marker {
  position: absolute;
  inset-block-start: -19px;
  inset-inline-start: calc(var(--result-position) * 100%);
  width: 20px;
  height: 33px;
  display: grid;
  justify-items: center;
  align-content: start;
  color: var(--text);
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgb(23 19 40 / .22));
}
.result-visual__marker-arrow {
  font-size: 17px;
  line-height: 1;
}
.result-visual__marker-dot {
  width: 12px;
  height: 12px;
  margin-block-start: 1px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 2px rgb(23 19 40 / .5);
}
.result-visual__level {
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 800;
}
.report-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.report-toc strong { flex-basis: 100%; font-size: var(--fs-sm); }
.report-toc a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  color: var(--text-muted);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.report-toc a:hover,
.report-toc a:focus-visible,
.report-toc a[aria-current="location"] {
  color: var(--brand);
  background: var(--brand-soft);
}
.result-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

@media (max-width: 640px) {
  .result-visual__heading,
  .result-visual__position,
  .result-visual__dimension { grid-template-columns: 1fr; }
  .result-visual__heading { display: grid; }
  .result-visual__scale { gap: 3px; }
  .result-visual__stage { padding-inline: 3px; font-size: .68rem; }
  .result-visual__reading { grid-template-columns: 1fr; }
  .result-visual__level { white-space: normal; }
  .report-toc a { flex: 1 1 calc(50% - var(--sp-2)); }
  .result-export-actions .btn { width: 100%; }
}

@media print {
  @page { margin: 14mm; }
  html { color-scheme: light; }
  body,
  .result-page,
  .result-main { color: #000 !important; background: #fff !important; }
  .route-header,
  .skip-link,
  .report-toc,
  .result-actions,
  .rich-actions,
  .result-export-actions,
  [data-privacy-settings],
  [data-theme-toggle],
  [data-locale-link] { display: none !important; }
  .result-main { padding: 0 !important; }
  .result-container { width: 100% !important; max-width: none !important; }
  .result-heading { margin-bottom: 12pt; }
  .result-app { display: block !important; }
  .result-app > *,
  .result-section,
  .result-overall,
  .result-card,
  .result-visual,
  .dimension-card,
  .rich-dimension,
  .rich-insight,
  .report-card,
  .resource-card {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    border-color: #777 !important;
  }
  .result-app > * { margin-bottom: 12pt; }
  h1, h2, h3 {
    color: #000 !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  .result-visual__meter {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-color: #444 !important;
    background: linear-gradient(90deg, #ddd 0%, #aaa 50%, #222 100%) !important;
  }
  .result-visual__marker { color: #000 !important; filter: none !important; }
  .result-visual__marker-dot { border-color: #fff !important; background: #000 !important; }
  .result-visual__dimension.is-strength { border-inline-start: 5px double #111 !important; }
  .result-visual__dimension.is-gap,
  .result-visual__dimension.is-developing { border-inline-start: 5px dashed #111 !important; }
  a[href^="http"]::after { content: none !important; }
}