/*
 * Result pages -- side rails (2026-10-17). Built by assets/result-rail.js; only exists at >= 1360px.
 * Everything is prefixed .rr- / .rr-fx; colours come from the existing tokens so dark mode follows on its own.
 */
.rr, .rr-fx { position: fixed; z-index: 15; }
.rr[hidden], .rr-fx[hidden] { display: none; }

.rr {
  padding: 16px 14px 14px; border-radius: 22px; background: var(--surface, #fff);
  border: 1px solid var(--lc-dff5e3, rgba(36, 74, 57, .12)); box-shadow: 0 24px 44px -30px rgba(36, 74, 57, .45);
  max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior: contain;
  animation: rr-in .6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rr-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rr--next { animation-delay: .12s; }
.rr__title { margin: 0 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted, #6b6f78); }

/* table of contents */
.rr__prog { height: 4px; margin: 0 4px 12px; border-radius: 4px; background: var(--lc-dff5e3, #DFF5E3); overflow: hidden; }
.rr__prog i { display: block; height: 100%; transform: scaleX(0); transform-origin: right center; border-radius: 4px; background: linear-gradient(90deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047)); transition: transform .15s linear; }
.rr__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rr__list a {
  display: block; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.7;
  color: var(--ink, #17191c); opacity: .78; transition: background .2s, color .2s, opacity .2s;
}
.rr__list a:hover { background: var(--lc-dff5e3, #DFF5E3); color: var(--lc-244a39, #244a39); opacity: 1; }
.rr__list a[aria-current="true"] {
  opacity: 1; color: var(--lt-ffffff, #fff);
  background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047));
}

/* next-step card */
.rr--next { background: linear-gradient(180deg, var(--lc-fbe1d1, #FBE1D1) -80%, var(--surface, #fff) 55%); }
.rr__acts { display: grid; gap: 8px; }
.rr__btn {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--lc-dff5e3, rgba(36, 74, 57, .15)); background: var(--surface, #fff);
  color: var(--ink, #17191c); font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s;
}
.rr__btn svg { flex: none; width: 18px; height: 18px; }
.rr__btn:hover { transform: translateY(-2px); background: var(--lc-dff5e3, #DFF5E3); }
.rr__btn:focus-visible, .rr__list a:focus-visible { outline: 3px solid var(--lc-fbe1d1, #FBE1D1); outline-offset: 2px; }
.rr__btn--primary { border: 0; color: var(--lt-ffffff, #fff); background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047)); }
.rr__btn--primary:hover { background: linear-gradient(135deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-244a39, #244a39)); }
.rr__note { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.8; color: var(--muted, #6b6f78); }

/* soft decorative margins: blobs + the site's dotted pattern, behind everything */
.rr-fx { inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rr-fx__blob { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(60px); opacity: .5; animation: rr-drift 18s ease-in-out infinite alternate; }
.rr-fx__blob--a { right: -140px; top: 18%; background: radial-gradient(closest-side, rgba(159, 224, 191, .55), transparent); }
.rr-fx__blob--b { left: -140px; top: 52%; background: radial-gradient(closest-side, rgba(251, 225, 209, .75), transparent); animation-delay: -6s; }
@keyframes rr-drift { to { transform: translate3d(0, 60px, 0) scale(1.08); } }
.rr-fx__pat { position: absolute; top: 0; bottom: 0; width: 260px; opacity: .35; background: url('hero-pattern.svg') center / 260px repeat; }
.rr-fx__pat--r { right: 0; -webkit-mask-image: linear-gradient(to left, black, transparent); mask-image: linear-gradient(to left, black, transparent); }
.rr-fx__pat--l { left: 0; -webkit-mask-image: linear-gradient(to right, black, transparent); mask-image: linear-gradient(to right, black, transparent); }
html[data-theme="dark"] .rr-fx__blob { opacity: .22; }
html[data-theme="dark"] .rr-fx__pat { opacity: .16; }

@media (prefers-reduced-motion: reduce) { .rr, .rr-fx__blob { animation: none; } .rr__prog i { transition: none; } }
@media (max-width: 1359px), print { .rr, .rr-fx { display: none !important; } }

/* couple comparisons without the account sidebar: centred column like the single-test results */
.res-solo-section { padding-block: var(--space-md, 20px) var(--space-xl, 56px); }
.container.res-solo { max-width: min(1100px, 94vw); }

/* NEO report: same 1100px column as the other results (it used to run ~1340px wide and left no room for the rails) */
.mpt-page .mpt-narrow:has(.nrx), .mpt-narrow:has(.nrx) { max-width: min(1100px, 94vw) !important; }

/* NEO: pin the report column itself (the page container is wider on this site, ~1500px) */
.mpt-page .test-result:has(.nrx), .mpt-page .nrx { max-width: 1100px; margin-inline: auto; }
.mpt-page--result:has(.nrx) .res-view-bar { max-width: 1100px; }

/* MBTI: same pinned 1100px column */
.mpt-page .test-result:has(.type-reveal) { max-width: 1100px; margin-inline: auto; }
.mpt-page--result:has(.type-reveal) .res-view-bar { max-width: 1100px; }

/* rail scrollbar: slim mint pill that fattens on hover (webkit); Firefox gets the standard thin version */
.rr::-webkit-scrollbar { width: 10px; }
.rr::-webkit-scrollbar-track { margin-block: 18px; border-radius: 10px; background: transparent; }
.rr::-webkit-scrollbar-thumb {
  border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
  background-image: linear-gradient(180deg, var(--lc-9fe0bf, #9fe0bf), var(--lc-5f9a7c, #5f9a7c));
  transition: background-color .2s;
}
.rr:hover::-webkit-scrollbar-thumb { border-width: 2px; background-image: linear-gradient(180deg, var(--lc-5f9a7c, #5f9a7c), var(--lc-2a6047, #2a6047)); }
@supports (-moz-appearance: none) { .rr { scrollbar-width: thin; scrollbar-color: var(--lc-5f9a7c, #5f9a7c) transparent; } }
/* dark twin of the rail scrollbar (dark.css styles every scrollbar with a more specific selector; keep the rail's pill look) */
html[data-theme="dark"] .rr::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] .rr::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(143, 214, 176, .75), rgba(95, 154, 124, .75)); background-clip: padding-box; border: 3px solid transparent; }
html[data-theme="dark"] .rr:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(170, 232, 200, .95), rgba(120, 190, 150, .95)); background-clip: padding-box; border-width: 2px; }

/* MMPI: same pinned 1100px column (mpt-report-v2.css lets it run up to 1440px) */
.mpt-page .mpt-narrow:has(.mrx), .mpt-narrow:has(.mrx) { max-width: min(1100px, 94vw) !important; }
.mpt-page .mpt-narrow:has(.mrx) .res-ready { max-width: 1100px !important; margin-inline: auto; }
.mpt-page--result:has(.mrx) .res-view-bar { max-width: 1100px; }

/* result views drop the visible breadcrumb (Rank Math still prints the BreadcrumbList schema); the rails would sit on it anyway */
body:has(.res-view-bar) .breadcrumbs, body:has(.test-result.res-ready) .breadcrumbs, body:has(.res-account-head) .breadcrumbs,
body:has(.res-solo) .breadcrumbs, body:has(.cmp .cmp-h2) .breadcrumbs { display: none; }

/* no dead band between the header and the first line of a result view */
body:has(.cmp .cmp-h2) main > .section { padding-block-start: var(--space-md, 20px); }
body:has(.res-view-bar) .res-view-bar { padding-block-start: 8px; }

/* with the rails on screen the "back to my tests" row is redundant (the left card has it, plus share + copy), so every
   result starts straight with its hero card. The share pill inside the bar stays in the DOM: the rail button clicks it. */
@media (min-width: 1360px) {
  .res-view-bar, .res-solo > p.res-noprint:first-child,
  body:has(.cmp .cmp-h2) .cmp-back, body:has(.cmp .cmp-h2) .cmp-hero--compact { display: none; }
}

/* phones: every chart fits the screen width (no sideways scrolling inside a card, no clipped edges). Text inside a shrunk
   chart gets small, so the figures stay pinch-zoomable (the viewport allows scaling; touch-action keeps the gesture). */
@media (max-width: 720px) {
  .cmp-sch-fig svg.ch, .mrx-strip-svg { min-width: 0 !important; width: 100% !important; max-width: 100%; height: auto; }
  .cmp-sch-fig, .mrx-strip { overflow-x: visible; }
  .res-scope svg.ch, .cmp svg.ch, .sch svg.ch, .cmp-svgbox svg, .cmp-svgfig svg, .cmp-sch-fig svg, .mrx-strip svg { max-width: 100%; height: auto; }
  .cmp-sch-fig, .cmp-svgbox, .cmp-svgfig, .mrx-strip, .sch-story__fig, .res-scope figure { touch-action: pan-x pan-y pinch-zoom; }
  .res-scope img, .cmp img { max-width: 100%; height: auto; }
}